@charset "UTF-8";
select {
  display: none;
}

img {
  display: block;
  width: 100%;
  height: 100%;
}

a {
  color: var(--main-text-color);
}
a:hover {
  color: var(--main-purple-color);
}

.link {
  color: var(--secondary-purple-color);
}

.display-inline {
  display: inline-block;
}

textarea {
  color: var(--main-text-color);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

button {
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
  padding: 0;
  outline: none;
}

.row {
  margin-left: auto;
  margin-right: auto;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}

.col {
  float: left;
  box-sizing: border-box;
}

.col.l12 {
  width: 100%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.text-center {
  text-align: center;
}

.secondary-text {
  color: var(--secondary-text-color);
  font-size: 13px;
}

.mr-2 {
  margin-right: 0.5rem !important;
}

.mr-3 {
  margin-right: 0.75rem !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.mb-3 {
  margin-bottom: 0.75rem !important;
}

.ml-0 {
  margin-left: 0 !important;
}

.ml-2 {
  margin-left: 0.5rem !important;
}

.ml-3 {
  margin-left: 0.75rem !important;
}

.mb-4 {
  margin-bottom: 1rem !important;
}

.mb-5 {
  margin-bottom: 25px;
}

.mb-6 {
  margin-bottom: 30px !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mt-3 {
  margin-top: 0.75rem !important;
}

.mt-4 {
  margin-top: 1rem !important;
}

.ml-20 {
  margin-left: 20px !important;
}

.w-100 {
  width: 100%;
}

.d-flex {
  display: flex;
}

.d-block {
  display: block;
}

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

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

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

.scroll-hidden {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scroll-hidden::-webkit-scrollbar {
  display: none;
}

.info-text {
  font-size: 15px;
  color: var(--main-text-color);
}

.not-found {
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.not-found img {
  width: 150px;
}

.you-blocked {
  margin: 17px 0;
}
.you-blocked i {
  font-size: 25px;
  margin-right: 10px;
  padding: 5px;
  background: var(--red-color);
  color: white;
  border-radius: 50%;
}
.you-blocked .info-text {
  display: flex;
  align-items: center;
  line-height: 20px;
}

.title-column {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title-column__left {
  margin-right: 10px;
}

@media (min-width: 720px) {
  ::-webkit-scrollbar {
    width: 6px;
    height: 10px;
    background: hsla(0deg, 0%, 55%, 0.2);
  }
  ::-webkit-scrollbar-thumb {
    background: hsla(0deg, 0%, 55%, 0.7);
    border-radius: 10px;
  }
  ::-webkit-scrollbar-track {
    border-radius: 10px;
  }
}
.description {
  color: var(--secondary-text-color);
  margin-bottom: 25px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  padding: 0 48px;
}

.ul-list {
  padding: 0;
}
.ul-list li {
  list-style: none;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 23px;
}
.ul-list span {
  font-size: 14px;
  color: var(--secondary-text-color);
}

.tg-button {
  display: flex;
  margin-bottom: 10px;
  background: #40b3e0;
  color: white;
  border-radius: 20px;
  font-size: 13px;
  align-items: center;
  padding: 8px 12px;
  text-align: center;
}
.tg-button:hover {
  background: #5cc2ea;
  color: white;
}
.tg-button svg {
  width: 25px;
  height: 25px;
  margin-right: 7px;
}
.tg-button--center {
  font-size: 13px;
  text-align: center;
  margin: 15px 0 10px;
  max-width: 360px;
}
.tg-button-wrapper {
  display: flex;
  justify-content: center;
}

.mh-300 {
  max-height: 300px;
}

.scroll-v {
  overflow-y: auto;
}

.reg-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #000;
  color: #fff;
  padding: 10px;
  text-align: center;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.reg-banner a {
  color: #fff;
  text-decoration: underline;
  margin-left: 10px;
}

#close-banner {
  position: absolute;
  top: 5px;
  right: 10px;
  cursor: pointer;
}

.tg-prompt {
  position: fixed;
  z-index: 99999;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
  width: 360px;
  max-width: calc(100vw - 20px);
  border-radius: 14px;
  background: #151515;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  overflow: hidden; /* чтобы всё было аккуратно */
}
.tg-prompt:hover {
  opacity: 0.92;
}

.tg-prompt--show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

/* Кликабельная зона — вся плашка */
.tg-prompt__tap {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 44px 10px 12px; /* справа место под крестик */
  color: #fff;
  text-decoration: none;
}
.tg-prompt__tap:hover {
  color: white;
}

/* Иконка */
.tg-prompt__icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 16px;
}
.tg-prompt__icon .diamond {
  margin: 0;
}

/* Текст всегда в 2 строки */
.tg-prompt__text {
  min-width: 0;
  line-height: 1.1;
}

.tg-prompt__title {
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tg-prompt__subtitle {
  margin-top: 3px;
  font-size: 12px;
  opacity: 0.78;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Кнопка */
.tg-prompt__cta {
  height: 30px;
  padding: 0 12px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #111;
  background: linear-gradient(135deg, #ffd36e, #ff9f5a);
}

/* Маленький крестик, НЕ жрёт место */
.tg-prompt__close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}

.tg-prompt__close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* Мобилка: уменьшаем ширину и кнопку */
@media (max-width: 420px) {
  .tg-prompt {
    width: 100%;
  }
  .tg-prompt__cta {
    padding: 0 10px;
  }
}
#close-tg {
  color: white !important;
}

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

.dust-toast {
  background: var(--purple-btn-bg) !important;
  color: white !important;
  padding: 20px 15px 20px 15px !important;
  box-shadow: rgba(119, 44, 232, 0.62) -5px 5px, rgba(119, 44, 232, 0.59) -10px 10px, rgba(175, 46, 240, 0.2) -15px 15px, rgba(204, 46, 240, 0.1) -20px 20px, rgba(240, 46, 170, 0.05) -25px 25px !important;
}
.dust-toast::before {
  content: "";
  display: none !important;
}

.header {
  background: var(--light-bg);
  z-index: 51;
}
.header .container {
  display: flex;
  padding-top: 15px;
  padding-bottom: 10px;
  align-items: center;
}
.header__link {
  color: var(--main-text-color);
  margin-right: 25px;
  font-weight: 400;
  letter-spacing: 0.5px;
  padding-bottom: 10px;
  font-size: 15px;
  position: relative;
}
@media screen and (max-width: 920px) {
  .header__link.header__link--hidden {
    display: none;
  }
}
.header__link-sub {
  position: absolute;
  top: 26px;
  background: var(--light-bg);
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.1);
  display: none;
  flex-direction: column;
  white-space: nowrap;
  transition: all 0.3s;
}
.header__link-sub a {
  padding: 10px 5px;
}
.header__link--more {
  position: relative;
  margin-left: 25px;
  cursor: pointer;
}
.header__link--more:hover .header__link-sub {
  display: flex;
}
.header__link-label {
  position: absolute;
  top: 2px;
  right: -35px;
  background-color: #9671ff;
  font-size: 10px;
  color: white;
  padding: 2px 3px;
  border-radius: 4px;
  font-weight: 600;
}
.header__link:not(.active-link):not(.header__link--more):hover {
  opacity: 0.7;
}
.header__link:last-of-type {
  margin-right: 0;
}
.header__link--active {
  border-bottom: 3px solid var(--main-purple-color);
}
.header__menu {
  display: flex;
  margin-top: 6px;
}
@media screen and (max-width: 900px) {
  .header__menu {
    display: none;
  }
}
.header__controls {
  display: flex;
  align-items: center;
  margin-left: auto;
}
.header__item {
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}
.header__item i {
  font-size: 24px;
}
@media screen and (max-width: 600px) {
  .header__item i {
    font-size: 23px;
    font-weight: 300;
  }
}
.header__item:hover {
  background: var(--medium-bg);
  border-radius: 10px;
  color: var(--main-text-color);
}
@media screen and (max-width: 380px) {
  .header__item {
    padding: 3px;
  }
}
.header-profile {
  width: 45px;
  height: 45px;
  margin-right: 0;
  position: relative;
}
.header-profile--label::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 29px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--red-color);
  border: 2px solid white;
  display: block;
}
.header-profile img {
  border-radius: 50%;
}
@media screen and (max-width: 380px) {
  .header-profile {
    width: 40px;
    height: 40px;
  }
}
.header__burger {
  display: none;
  margin-right: 10px;
  font-size: 24px;
  padding: 5px;
  line-height: 21px;
}
@media screen and (max-width: 900px) {
  .header__burger {
    display: block;
  }
}
@media screen and (max-width: 500px) {
  .header__burger {
    font-size: 23px;
  }
}
@media screen and (max-width: 350px) {
  .header__burger {
    margin-right: 4px;
  }
}
.header__mobile-menu {
  position: fixed;
  width: 85%;
  max-width: 295px;
  left: 0;
  top: 65px;
  margin: 0;
  height: calc(100% + 60px);
  height: -moz-calc(100%);
  padding-bottom: 140px;
  background-color: var(--light-bg);
  z-index: 50;
  overflow-y: auto;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateX(-105%);
  list-style: none;
  padding-left: 0;
  border-top: 1px solid var(--border-color);
  transition: all 0.35s ease-in-out;
}
@media screen and (min-width: 380px) {
  .header__mobile-menu {
    top: 70px;
  }
}
.header__mobile-menu-show {
  height: unset !important;
}
.header__mobile-menu-show span {
  display: flex;
  align-items: center;
}
.header__mobile-menu-show span i {
  font-size: 22px;
  color: var(--icons-color);
  margin-right: 8px;
}
.header__mobile-menu-show-item {
  display: none;
  padding-left: 0;
  list-style: none;
}
.header__mobile-menu-show-icon {
  margin-left: auto;
  font-size: 20px !important;
}
.header__mobile-menu li {
  height: 48px;
  line-height: 48px;
  padding: 0 32px 0 20px;
  position: relative;
}
.header__mobile-menu li a {
  display: flex;
  align-items: center;
  color: var(--main-text-color);
}
.header__mobile-menu li a i {
  font-size: 22px;
  color: var(--icons-color);
  margin-right: 8px;
}
.header__mobile-menu .new-link::before {
  content: "";
  height: 9px;
  width: 9px;
  background: var(--red-color);
  border-radius: 50%;
  position: absolute;
  top: 13px;
  left: 37px;
  border: 2px solid var(--light-bg);
}

.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  height: 120vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 49;
  display: none;
}

.header-notifications {
  position: relative;
}
.header-notifications__count {
  position: absolute;
  top: 3px;
  right: -4px;
  border-radius: 36%;
  background-color: #fc363b;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 11px !important;
  font-weight: 500;
  font-family: "exo 2", sans-serif;
  width: 18.5px;
  height: 15px;
}
@media screen and (max-width: 382px) {
  .header-notifications__count {
    top: 0;
    right: -5px;
  }
}

.pagination {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.pagination__button {
  border-radius: var(--secondary-border-radius);
  margin: 0 5px;
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pagination__button a {
  line-height: normal;
  padding: 11px 12px;
  font-size: 15px;
  color: #777;
}
.pagination__button a:hover {
  color: #333;
}
.pagination__button:not(.pagination__button--active):hover {
  background-color: #f2f2f2;
}
.pagination__button--active {
  background-color: rgba(135, 78, 221, 0.1490196078);
  font-weight: 500;
}
.pagination__button--active a {
  color: var(--secondary-purple-color);
}

.comments__tip {
  display: flex;
  align-items: center;
  background: rgba(119, 44, 232, 0.1490196078);
  padding: 6px 10px;
  color: var(--purple-btn-bg);
  border-radius: 20px;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 600;
  transition: all 0.2s;
  cursor: pointer;
}
.comments__tip:hover {
  color: white;
  background: var(--purple-btn-bg);
}
.comments__club-tag {
  margin-right: 5px;
  font-weight: 500;
  font-size: 16px;
}
.comments__club-tag--level2 {
  color: #8758b0;
}
.comments__club-tag--level3 {
  color: #814cb0;
}
.comments__club-tag--level4 {
  color: #7940ab;
}
.comments__club-tag--level5 {
  color: #7232a9;
}
.comments__club-tag--level6 {
  color: #6b26a6;
}
.comments__image img, .comments__image video {
  width: 130px;
  border-radius: 10px;
  margin: 10px 0;
}
.comments__sort-controls {
  display: flex;
  margin-bottom: 15px;
}
.comments__change-sort {
  margin-right: 20px;
  padding: 10px 0;
  cursor: pointer;
  display: block;
  flex-shrink: 0;
  color: var(--main-text-color);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 3px solid transparent;
}
.comments__change-sort--active {
  border-bottom: 3px solid var(--purple-btn-bg);
}
.comments__pinned {
  background: var(--purple-btn-bg);
  color: white;
  padding: 3px 4px;
  border-radius: 4px;
  margin-left: auto;
  display: flex;
  align-items: center;
}
.comments__pinned i {
  margin-right: 2px;
  margin-top: 2px;
  font-size: 14px;
}
.comments__send-form-image {
  position: relative;
  width: 80px;
  height: 80px;
}
.comments__send-form-image-close {
  position: absolute;
  top: -4px;
  right: -5px;
  background: var(--grey-background);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  z-index: 99;
}
.comments__send-form-image-close i {
  margin-top: 2px;
}
.comments__send-form-image img, .comments__send-form-image video {
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  width: 100%;
  height: 100%;
}
.comments__premium-logo {
  background-image: linear-gradient(72.98deg, #7c54ee 0%, #9c42d6 25%, #772ce8 100%);
  color: #fff;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
  height: 15px;
  line-height: 15px;
  border-radius: 13px;
  padding: 0 5px;
  margin-left: 5px;
}
.comments__premium-logo:hover {
  color: #fff !important;
}
.comments__list {
  margin-top: 15px;
}
.comments__list .comments__close-form-btn,
.comments__list .comments__cancel-edit {
  display: block;
}
.comments__list .comments__send-form {
  margin-top: 10px;
}
.comments__to {
  margin-bottom: 10px;
  color: var(--main-text-color);
}
.comments__to a {
  color: var(--purple-btn-bg);
}
.comments__sticker {
  margin-top: 18px;
  width: 84px;
  cursor: pointer;
}
.comments__status {
  width: 16px;
  cursor: pointer;
  padding: 0 5px;
  box-sizing: content-box;
  margin-left: 1px;
}
.comments__status[data-name=PRO] {
  width: 30px;
}
.comments__status[data-name=PRO] img {
  border-radius: 6px;
  -o-object-fit: contain;
     object-fit: contain;
}
.comments__summon-list {
  display: flex;
  margin-bottom: 10px;
}
.comments__summon-item {
  display: flex;
  margin-right: 5px;
  padding: 2px 10px;
  background: var(--purple-btn-bg);
  border-radius: 6px;
  font-size: 14px;
  color: white;
  cursor: pointer;
}
.comments__summon-item:after {
  content: "\e5cd";
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
  margin-left: 8px;
  margin-top: 3px;
}
.comments__item {
  margin-bottom: 6px;
  margin-left: -16px;
  transition: background 1s;
}
.comments__item--target > .comments__inner {
  background: rgba(72, 15, 188, 0.03);
}
.comments__item--new {
  background: rgba(72, 15, 188, 0.03);
}
@media only screen and (max-width: 700px) {
  .comments__item .comments__item .comments__item .comments__item .comments__children {
    margin-left: 0px !important;
    border-left: none;
  }
}
.comments__item .comments__item .comments__item .comments__item .comments__item .comments__item .comments__item .comments__children {
  margin-left: 0px !important;
  border-left: none;
}
.comments__inner {
  padding: 8px;
  margin-left: 8px;
  margin-bottom: 5px;
}
.comments__inner:hover .comments__rating-btn {
  opacity: 1;
}
.comments__header {
  display: flex;
  align-items: center;
  margin-bottom: 7px;
}
.comments__author {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.comments__avatar {
  width: 34px;
  height: 34px;
  margin-right: 10px;
  margin-left: 4px;
  position: relative;
  flex-shrink: 0;
}
.comments__avatar img {
  border-radius: 3px;
}
.comments__user {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-right: 10px;
  display: flex;
  align-items: center;
}
.comments__name {
  color: var(--main-text-color);
  font-weight: 500;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.comments__date {
  color: var(--secondary-text-color);
  font-size: 13px;
  margin-top: 3px;
}
.comments__show-summon {
  font-size: 16px;
  line-height: 3px;
  margin-left: auto;
  color: var(--main-purple-color);
}
.comments__rating {
  display: flex;
  margin-left: auto;
  align-self: self-start;
}
.comments__rating-btn {
  opacity: 0;
}
@media screen and (max-width: 1000px) {
  .comments__rating-btn {
    opacity: 1;
    font-size: 15px;
    color: var(--secondary-text-color);
  }
}
.comments__rating-number {
  min-width: 35px;
  font-size: 13px;
  text-align: center;
  font-weight: 500;
  margin: 0;
  line-height: 19px;
  border-radius: 2px;
}
@media screen and (max-width: 1000px) {
  .comments__rating-number {
    min-width: 30px;
  }
}
.comments__rating-number-wrapper {
  width: 35px;
  height: 25px;
  margin: 0 12px;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 1000px) {
  .comments__rating-number-wrapper {
    width: 30px;
    margin: 0 10px;
  }
}
.comments__rating-number--green {
  background-color: var(--rating-bg-green);
  color: #0a1;
}
.comments__rating-number--grey {
  color: #595959;
}
.comments__rating-number--red {
  color: #cd192e;
  background-color: var(--rating-bg-red);
}
.comments__body {
  font-size: 15px;
  line-height: 20px;
  overflow-wrap: break-word;
}
.comments__body-summons {
  display: flex;
  margin-top: 10px;
  font-size: 14px;
  flex-wrap: wrap;
}
.comments__body-summons a:not(:last-child):after {
  content: ",";
  margin-right: 5px;
}
.comments__body-summons-title {
  margin-right: 5px;
  color: var(--secondary-text-color);
}
.comments__body tgs-player {
  width: 84px;
  height: 84px;
  margin-top: 18px;
}
.comments__footer {
  display: flex;
  margin-top: 7px;
  font-size: 13px;
  color: var(--secondary-text-color);
}
.comments__children {
  position: relative;
  margin-left: 16px;
  padding-left: 16px;
  border-left: 1px solid var(--border-color);
}
.comments__children:hover .comments__collapse {
  display: block;
}
.comments__collapse {
  position: absolute;
  top: 0;
  left: -1px;
  width: 16px;
  height: 100%;
  cursor: pointer;
  border-left: 2px solid transparent;
  display: none;
}
.comments__collapse:hover {
  border-left-color: var(--main-purple-color);
}
.comments__controls-btn {
  margin-left: 8px;
  margin-top: 3px;
  display: flex;
  align-items: center;
}
.comments__controls-btn i {
  font-size: 22px;
  line-height: 3px;
}
.comments .comments__send-form {
  border: 1px solid var(--border-color);
  border-radius: var(--main-border-radius);
  padding: 15px;
}
.comments .comments__send-form textarea {
  resize: none;
  border: none;
  outline: none;
  width: 100%;
  height: 3rem;
  background-color: transparent;
  min-height: 70px;
}
.comments .comments__send-form--mini {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 8px 15px;
}
.comments .comments__send-form--mini textarea {
  max-height: 22px;
  min-height: unset;
  cursor: pointer;
  overflow: hidden;
}
.comments .comments__send-form--mini .comments__actions-buttons {
  display: none;
}
.comments .comments__actions {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.comments .comments__actions-list {
  display: flex;
}
.comments .comments__actions-buttons {
  display: flex;
  margin-left: auto;
}
.comments .comments__actions-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 34px;
  background-color: var(--medium-bg);
  cursor: pointer;
  margin-right: 7px;
}
.comments .comments__actions-btn:nth-last-of-type {
  margin-right: 0;
}
.comments .comments__actions-btn--sticker {
  color: #5fbb90;
}
.comments .comments__actions-btn--spoiler {
  color: #447;
}
.comments .comments__actions-btn--raffle {
  display: none;
}
.comments .comments__actions-btn--raffle.comments__actions-btn--raffle-active {
  color: #d8499e;
}
.comments .comments__actions-btn:hover {
  opacity: 0.5;
}
.comments__reply-btn:hover {
  color: var(--main-text-color);
}
.comments__close-form-btn, .comments__cancel-edit {
  margin-right: 10px;
  display: none;
  color: var(--secondary-text-color);
}
.comments__close-form-btn:hover, .comments__cancel-edit:hover {
  color: var(--main-text-color);
}
.comments__children-open {
  color: var(--secondary-text-color);
  margin-left: 16px;
  cursor: pointer;
}
.comments__children-open:hover {
  color: var(--secondary-purple-color);
}
.comments__load-more {
  cursor: pointer;
  margin: 15px 0;
  display: flex;
  align-items: center;
}
.comments__load-more i {
  margin-left: 5px;
  margin-top: 4px;
}
.comments__load-more:hover {
  color: var(--main-text-color);
}

.tippy-box[data-theme~=comments-rating] {
  background-color: unset;
}

.rating-info {
  top: 30px;
  left: 5px;
  padding: 3px 0;
  width: 180px;
  max-height: 270px;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--light-bg);
  font-size: 0.85em;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
}
.rating-info__user {
  display: flex;
  align-items: center;
  padding: 8px;
}
.rating-info__user:hover {
  background-color: var(--seconday-bg-color);
}
.rating-info__avatar {
  width: 25px;
  height: 25px;
  margin-right: 10px;
  flex-shrink: 0;
}
.rating-info__name {
  color: var(--main-text-color);
  font-size: 1.2em;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.rating-info__color--like {
  color: var(--green-color);
}
.rating-info__color--dislike {
  color: var(--red-color);
}

.comments-summon input {
  border: 1px solid var(--border-color);
  border-radius: var(--main-border-radius);
  padding: 5px 10px;
  outline: none;
}
.comments-summon input:focus {
  border-color: var(--main-purple-color);
}
.comments-summon input::-moz-placeholder {
  color: var(--secondary-text-color);
  font-size: 14px;
}
.comments-summon input::placeholder {
  color: var(--secondary-text-color);
  font-size: 14px;
}
.comments-summon__item {
  display: flex;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
}
.comments-summon__item:hover {
  color: var(--main-purple-color);
}
.comments-summon__item img {
  margin-right: 5px;
  width: 20px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 3px;
}

.comments--profile-page .comments__item {
  border-bottom: 1px solid var(--border-color);
}

.modal-tenor__header {
  display: flex;
  margin-top: 25px;
  margin-bottom: 20px;
}
.modal-tenor__input {
  width: 100%;
  margin-right: 10px;
}
.modal-tenor__input input {
  width: 100%;
  border: 1px solid transparent;
  background: var(--medium-bg);
  padding: 9px 10px;
  border-radius: var(--main-border-radius);
  outline: none;
  color: var(--main-text-color);
}
.modal-tenor__input input:active, .modal-tenor__input input:focus {
  border: 1px solid var(--main-purple-color);
}
.modal-tenor__result {
  display: flex;
  justify-content: space-between;
  margin: 0 -10px !important;
  position: relative;
  overflow: auto;
  height: 300px;
}
.modal-tenor__result img {
  width: 100%;
  height: auto;
  margin-right: 8px;
  border-radius: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}
.modal-tenor__result video {
  width: 92%;
  height: auto;
  margin: 0 8px;
  border-radius: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}
.modal-tenor__column {
  margin: 0 5px;
}

.modal-tenor__load-trigger {
  display: none;
}

.modal-tenor__load-trigger[data-next]:not([data-next=""]) {
  display: block;
}

#modal-tenor {
  z-index: 19999;
}

.comments-alert {
  width: 100%;
  background: var(--purple-btn-bg);
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  margin-bottom: 15px;
  margin-top: 15px;
  font-weight: 500;
  font-size: 15px;
  position: relative;
  cursor: pointer;
}
.comments-alert::after {
  content: "\e5cd";
  position: absolute;
  top: 5px;
  right: 5px;
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
  font-size: 18px;
}

.new-feed--users .comments__item {
  margin-left: 0 !important;
}

.isGuest .comments__image {
  display: none;
}

.best-comment {
  display: flex;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--light-bg);
  justify-content: center;
  align-items: center;
}
.best-comment__avatar {
  display: block;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}
.best-comment__avatar-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.best-comment__content {
  min-width: 0;
  flex: 1 1 auto;
}
.best-comment__tips {
  display: inline-flex;
  align-items: center;
  background: rgba(119, 44, 232, 0.1490196078);
  padding: 6px 10px;
  color: var(--purple-btn-bg);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  transition: all 0.2s;
  cursor: pointer;
  margin-bottom: 5px;
}
.best-comment__tips-icon {
  line-height: 1;
}
.best-comment__tips-value {
  line-height: 1;
}
.best-comment__text {
  font-size: 14px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tip-popup {
  background: var(--light-bg);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  width: 180px;
  font-family: sans-serif;
  font-size: 13px;
}
.tip-popup__buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.tip-popup__button {
  flex: 1;
  margin: 0 2px;
  padding: 4px 0;
  font-size: 12px;
  border: none;
  border-radius: 6px;
  background: linear-gradient(135deg, #ff4da0, #a64dff);
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.tip-popup__button:hover {
  transform: scale(1.05);
}
.tip-popup__button--1 {
  background: linear-gradient(135deg, #ff7eb3, #ff4da0);
}
.tip-popup__button--10 {
  background: linear-gradient(135deg, #a64dff, #5a3eff);
}
.tip-popup__top {
  border-top: 1px solid var(--border-color);
  padding-top: 6px;
}
.tip-popup__top-item {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}
.tip-popup__top-item:last-child {
  margin-bottom: 0;
}
.tip-popup__avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 6px;
}
.tip-popup__name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tip-popup__count {
  font-weight: bold;
  color: #555;
  margin-left: 4px;
}

/* контейнер для наград */
.reward-float {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 99999;
  pointer-events: none;
}

/* одна плашка */
.reward-float__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-top: 10px;
  border-radius: 14px;
  background: rgba(20, 20, 24, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(12px);
  animation: rewardFloatUp 1.25s ease forwards;
}

.reward-float__icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: block;
}

.reward-float__text {
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

@keyframes rewardFloatUp {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  15% {
    opacity: 1;
    transform: translateY(0);
  }
  70% {
    opacity: 1;
    transform: translateY(-18px);
  }
  100% {
    opacity: 0;
    transform: translateY(-28px);
  }
}
.comments__children-placeholder {
  margin: 8px 0 0 52px;
}

.comments__children-load {
  color: var(--purple-btn-bg);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-width: 0px;
  border-style: initial;
  border-color: initial;
  -o-border-image: initial;
     border-image: initial;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(119, 44, 232, 0.08);
  transition: background 0.15s, opacity 0.15s;
}

.comments__children-load:hover {
  background: rgba(119, 44, 232, 0.14);
  text-decoration: none;
}

.comments__children-load.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

.comments__rating-btn--active {
  color: var(--main-color);
  transform: scale(1.08);
}

.comments__rating-btn--like.comments__rating-btn--active {
  color: #009933;
}

.comments__rating-btn--dislike.comments__rating-btn--active {
  color: #fc363b;
}

.reader {
  background: var(--grey-background);
}
.reader__notification {
  background: var(--light-bg);
  position: fixed;
  overflow: hidden;
  width: 300px;
  padding: 15px;
  z-index: 1200;
  transition: transform 0.3s;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.1);
  top: 11px;
  border-radius: 16px;
}
.reader__notification-close {
  position: absolute;
  right: 10px;
  top: 3px;
  font-size: 17px;
  padding: 3px;
  cursor: pointer;
}
.reader__notification-header {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.reader__notification-icon {
  background: var(--red-color);
  color: white;
  width: 26px;
  height: 26px;
  font-size: 18px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  flex-shrink: 0;
}
.reader__notification-icon--green {
  background: #4cd863 !important;
}
.reader__notification-icon--blue {
  background: #007aff !important;
}
.reader__notification-body {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 14px;
  color: var(--secondary-text-color);
  display: inline;
}
.reader__notification-title {
  font-size: 15px;
}
.reader__wrapper {
  display: flex;
  margin: 0 auto;
  max-width: 750px;
  padding: 0 20px;
  justify-content: center;
}
.reader__wrapper-controls a {
  margin-left: 10px;
}
.reader__wrapper--finish {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 15px;
}
.reader__wrapper--finish > div {
  font-size: 28px;
  margin-bottom: 15px;
  color: var(--secondary-text-color);
}
.reader__wrapper--finish a {
  display: inline-flex;
}
@media screen and (min-width: 900px) {
  .reader--comments-open {
    padding-right: 350px;
  }
}
.reader--comments-open .reader-menu {
  display: none;
}
.reader__container {
  padding-top: 90px;
}
.reader__header {
  display: flex;
  align-items: center;
  background: var(--light-bg);
  position: fixed;
  width: 100%;
  margin: 0 auto;
  padding: 15px 10px 10px 10px;
  z-index: 1200;
  transition: transform 0.3s;
}
@media screen and (max-width: 900px) {
  .reader__header {
    align-items: start;
  }
  .reader__header .logo {
    display: none;
  }
}
@media screen and (max-width: 900px) {
  .reader__header--hide {
    transform: translate(0%, -100%);
  }
}
.reader__pages {
  background: var(--grey-background);
  max-width: 750px;
  margin: 0 auto;
}
.reader__item {
  min-height: 178px;
}
.reader__item img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.reader__chapters {
  font-size: 15px;
  color: var(--main-text-color);
  margin: 0 4px;
  cursor: pointer;
}
.reader__controls {
  display: flex;
  align-items: center;
  padding-bottom: 5px;
}
@media screen and (max-width: 900px) {
  .reader__controls {
    flex-direction: column;
    margin-left: auto;
  }
}
.reader__controls-name {
  font-size: 15px;
  margin-right: 15px;
  color: var(--main-text-color);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media screen and (max-width: 900px) {
  .reader__controls-name {
    max-width: 185px;
    margin-right: 0;
  }
}
.reader__controls .navigate-button {
  display: flex;
  align-items: center;
  color: var(--icons-color);
  font-size: 20px;
  padding: 3px 1px;
  border-radius: var(--main-border-radius);
}
.reader__controls .navigate-button:hover {
  background: var(--grey-background);
}
.reader__controls-wrapper {
  display: flex;
  align-items: center;
}
.reader__footer {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}
@media screen and (max-width: 900px) {
  .reader__footer-p {
    padding-top: 70px;
  }
}
.reader__footer a:first-of-type {
  margin-right: 10px;
}
.reader__footer a:hover {
  color: white;
}
@media screen and (max-width: 358px) {
  .reader__footer .button {
    padding: 9px 8px;
    font-size: 13px;
  }
}
.reader__show-comments-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}
.reader__show-comments-btn i {
  margin-right: 5px;
}

.reader-menu {
  top: 0;
  right: 12px;
  width: 92px;
  height: 100%;
  display: table;
  z-index: 999;
  position: fixed;
  box-sizing: border-box;
  text-align: center;
  padding: 60px 8px 0;
  -webkit-box-sizing: border-box;
  transition: bottom 0.5s;
}
.reader-menu .menu--bookmark {
  width: 160px;
}
@media screen and (max-width: 900px) {
  .reader-menu {
    left: 0;
    right: 0;
    bottom: 0;
    top: unset;
    width: 100%;
    height: 54px;
    padding: 0;
  }
}
@media screen and (max-width: 900px) {
  .reader-menu--hide {
    bottom: -100%;
  }
}
.reader-menu__wrapper {
  display: table-cell;
  vertical-align: middle;
}
.reader-menu__inner {
  padding: 10px 5px;
  background-color: var(--light-bg);
  border-radius: var(--main-border-radius);
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 900px) {
  .reader-menu__inner {
    flex-direction: row;
    padding: 6px;
    display: flex;
    justify-content: center;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}
.reader-menu__page {
  font-size: 14px;
  color: var(--secondary-text-color);
  margin-bottom: 20px;
}
.reader-menu__item {
  padding: 5px;
  margin-bottom: 5px;
  border-radius: var(--main-border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 900px) {
  .reader-menu__item {
    margin-bottom: 0;
    padding: 5px 10px;
  }
}
@media screen and (max-width: 375px) {
  .reader-menu__item {
    margin-bottom: 0;
    padding: 5px 7px;
  }
}
.reader-menu__item i {
  font-size: 24px;
  color: var(--icons-color);
}
@media screen and (max-width: 900px) {
  .reader-menu__item i {
    font-size: 22px;
  }
}
.reader-menu__item--page {
  font-size: 15px;
  margin-bottom: 15px;
  max-width: 54px;
}
@media screen and (max-width: 900px) {
  .reader-menu__item--page {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    font-size: 14px;
  }
}
.reader-menu__item--comment {
  position: relative;
}
.reader-menu__item--comment .reader-menu__item--label {
  transition: transform 0.5s;
}
.reader-menu__item--comment .reader-menu__item--label-new {
  transform: scale(1.5);
}
.reader-menu__item--like {
  font-size: 12px;
  color: var(--main-text-color);
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 900px) {
  .reader-menu__item--like {
    display: flex;
    align-items: center;
    flex-direction: row;
  }
  .reader-menu__item--like i {
    margin-right: 4px;
  }
}
.reader-menu__item--label {
  position: absolute;
  top: 0;
  right: 7px;
  min-width: 16px;
  height: 16px;
  padding: 0 2px;
  color: var(--white-color);
  font-size: 9px;
  background: var(--purple-btn-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
@media screen and (max-width: 900px) {
  .reader-menu__item--label {
    right: 4px;
  }
}
.reader-menu__item--active {
  color: var(--purple-btn-bg);
}
.reader-menu__item--active i {
  color: var(--purple-btn-bg);
}
.reader-menu__item:not(.reader-menu__item--page):hover {
  background: var(--grey-background);
}

.reader-chapters {
  list-style: none;
  padding: 0;
}
.reader-chapters__server {
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}
.reader-chapters__server-title {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 10px;
}
.reader-chapters__server .button {
  height: 38px;
  border-radius: 13px;
  font-size: 13px;
  margin-right: 6px;
  margin-bottom: 6px;
}
.reader-chapters__create-card .button {
  display: flex;
  align-items: center;
  justify-content: center;
}
.reader-chapters__create-card .button i {
  margin-right: 5px;
  font-size: 20px;
}
.reader-chapters__item {
  padding: 10px 15px;
  font-size: 16px;
  margin-bottom: 5px;
  border-radius: var(--main-border-radius);
  display: flex;
  align-items: center;
  color: var(--main-text-color);
}
.reader-chapters__item:not(.reader-chapters__item--active):hover {
  background-color: var(--medium-bg);
  color: var(--main-text-color);
}
.reader-chapters__item--active {
  background-color: var(--purple-btn-bg);
  color: white !important;
}

.reader-comments {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  padding: 0 15px;
  height: 100%;
  max-width: 100%;
  z-index: 9999;
  width: 400px;
  border-left: 1px solid var(--border-color);
  background: var(--light-bg);
  overflow-y: auto;
  overflow-x: hidden;
}
@media screen and (max-width: 900px) {
  .reader-comments {
    width: 100%;
  }
}
.reader-comments__close {
  cursor: pointer;
  position: fixed;
  top: 10px;
  right: 16px;
  z-index: 40;
  height: 24px;
  width: 24px;
  padding: 6px;
  color: var(--main-text-color);
  background: var(--medium-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reader-chapters-theme {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.reader-chapters-theme button {
  width: 40px;
  height: 40px;
  background: var(--medium-bg);
  border-radius: var(--main-border-radius);
}
.reader-chapters-theme button i {
  font-size: 20px;
}
.reader-chapters-theme button:hover {
  color: var(--purple-btn-bg);
}

.button-telegram {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 15px 0;
}
.button-telegram i {
  margin-right: 5px;
  font-size: 20px;
}

@media screen and (max-width: 900px) {
  body.reader-popup {
    overflow: hidden;
  }
}

.b-manga-reader .header__mobile-menu {
  top: 73px !important;
}

.reader-menu-scroll {
  display: none;
  top: 0;
  right: 83px;
  width: 92px;
  height: 100%;
  z-index: 999;
  position: fixed;
  box-sizing: border-box;
  text-align: center;
  padding: 60px 8px 0;
  -webkit-box-sizing: border-box;
  transition: bottom 0.5s;
}
.reader-menu-scroll__wrapper {
  display: table-cell;
  vertical-align: middle;
}
.reader-menu-scroll__wrapper-controls {
  background: var(--light-bg);
  margin: 0 auto;
  border-radius: 6px;
  font-size: 23px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: var(--icons-color);
  padding: 2px;
}
.reader-menu-scroll__wrapper-controls button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.reader-menu-scroll__wrapper-controls button:nth-of-type(2) {
  margin: 10px 0;
}
@media screen and (max-width: 900px) {
  .reader-menu-scroll__wrapper-controls {
    width: 100px;
    flex-direction: row;
  }
  .reader-menu-scroll__wrapper-controls button:nth-of-type(2) {
    margin: 0 10px;
  }
}
.reader-menu-scroll--hide {
  display: none !important;
}
@media screen and (max-width: 900px) {
  .reader-menu-scroll {
    left: 0;
    right: 0;
    bottom: 53px;
    top: unset;
    width: 100%;
    height: 54px;
    padding: 0;
  }
}

.body--reader-auto .reader-menu-scroll {
  display: table;
}

.note-panel {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  width: min(920px, 100vw - 32px);
  background: var(--light-bg);
  color: var(--main-text-color);
  border: 1px solid var(--border-color);
  border-radius: 22px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
  z-index: 1002;
  padding: 16px 18px;
}

.note-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.note-panel__title {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.2px;
}

.note-panel__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.note-close {
  border: none;
  background: transparent;
  color: var(--main-text-color);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  line-height: 36px;
  text-align: center;
}

.note-close:hover {
  background: rgba(127, 127, 127, 0.12);
}

.note-panel__body {
  margin-top: 12px;
}

.note-textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  background: var(--light-bg);
  color: var(--main-text-color);
  resize: vertical;
  min-height: 96px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) inset;
}

.note-read__text {
  white-space: pre-wrap;
  word-break: break-word;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  background: var(--light-bg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) inset;
}

.note-link {
  margin-top: 8px;
  background: transparent;
  border: none;
  color: inherit;
  opacity: 0.8;
  cursor: pointer;
}

.note-link:hover {
  opacity: 1;
}

.note-btn {
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--main-text-color);
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
}

.note-btn--primary {
  background: #2f66ff;
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 16px;
  font-weight: 600;
}

.note-btn--primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.note-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
}

.note-icon--danger {
  background: #ef4444;
  color: #fff;
}

.note-icon--danger:hover {
  filter: brightness(1.05);
}

@media (max-width: 600px) {
  .note-panel {
    padding: 14px 14px;
    border-radius: 18px;
  }
  .note-panel__title {
    font-size: 18px;
  }
  .note-icon {
    width: 40px;
    height: 40px;
  }
}
.reader-text__notification {
  background: var(--dark-grey-bg);
  padding: 10px;
  line-height: 17px;
  text-align: center;
}

.reader-text__notification-title {
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reader-text__notification-title span {
  margin-left: 5px;
  font-size: 13px;
}

.reader-text__notification-text {
  font-size: 12px;
}

.reader-autoscroll-btn .reader-autoscroll-icon-stop {
  display: none;
}
.reader-autoscroll-btn:hover {
  background: var(--medium-bg);
  transform: none;
}
.reader-autoscroll-btn.is-active {
  background: var(--purple-btn-bg);
  color: #fff;
}
.reader-autoscroll-btn.is-active i {
  color: #fff;
}
.reader-autoscroll-btn.is-active .reader-autoscroll-icon-play {
  display: none;
}
.reader-autoscroll-btn.is-active .reader-autoscroll-icon-stop {
  display: block;
}
.reader-autoscroll-btn.is-active:hover {
  background: var(--purple-btn-bg);
}

.popup--settings .popup__content {
  max-width: 560px;
  padding: 24px;
  border-radius: 28px;
  background: radial-gradient(circle at top right, rgba(126, 48, 255, 0.12), transparent 34%), var(--light-bg);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
}
.popup--settings .secondary-title {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 18px;
  letter-spacing: -0.4px;
}

.reader-settings {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 22px;
}
.reader-settings__section {
  padding: 14px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--medium-bg) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-color) 75%, transparent);
}
.reader-settings__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.reader-settings__section-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--main-text-color);
  margin-bottom: 3px;
}
.reader-settings__section-text {
  font-size: 12px;
  color: var(--secondary-text-color);
  line-height: 1.35;
}
.reader-settings__theme {
  margin: 0;
  padding: 0;
  gap: 10px;
}
.reader-settings__theme span {
  font-size: 14px;
  color: var(--secondary-text-color);
}
.reader-settings__theme button {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  background: var(--light-bg);
  border: 1px solid var(--border-color);
}
.reader-settings__range {
  margin-top: 12px;
}
.reader-settings__range input {
  width: 100%;
  height: 5px;
  accent-color: var(--purple-btn-bg);
}
.reader-settings__range-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
  font-size: 13px;
  color: var(--secondary-text-color);
}
.reader-settings__range-header b {
  color: var(--main-text-color);
  font-size: 13px;
  font-weight: 800;
}
.reader-settings__switch {
  display: flex;
  padding: 4px;
  gap: 4px;
  margin-top: 12px;
  border-radius: 16px;
  background: var(--light-bg);
  border: 1px solid var(--border-color);
}
.reader-settings__switch button {
  flex: 1;
  height: 36px;
  border-radius: 12px;
  color: var(--secondary-text-color);
  font-size: 13px;
  font-weight: 800;
  transition: 0.18s ease;
}
.reader-settings__switch button.is-active {
  background: var(--purple-btn-bg);
  color: #fff;
  box-shadow: 0 8px 18px rgba(126, 48, 255, 0.22);
}
.reader-settings__toggle {
  width: 46px;
  height: 26px;
  border-radius: 99px;
  padding: 3px;
  flex-shrink: 0;
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  transition: 0.18s ease;
}
.reader-settings__toggle span {
  width: 18px;
  height: 18px;
  display: block;
  border-radius: 50%;
  background: var(--secondary-text-color);
  transition: 0.18s ease;
}
.reader-settings__toggle.is-active {
  background: var(--purple-btn-bg);
  border-color: var(--purple-btn-bg);
}
.reader-settings__toggle.is-active span {
  background: #fff;
  transform: translateX(20px);
}

.reader-click-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 50vw;
  z-index: 9999;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: readerClickOverlayShow 0.18s ease forwards;
}
.reader-click-overlay span {
  font-size: clamp(42px, 7vw, 96px);
  font-weight: 900;
  color: rgba(255, 255, 255, 0.65);
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.reader-click-overlay--left {
  left: 0;
  background: rgba(85, 48, 18, 0.38);
}
.reader-click-overlay--right {
  right: 0;
  background: rgba(18, 85, 42, 0.38);
}
.reader-click-overlay--hide {
  animation: readerClickOverlayHide 0.32s ease forwards;
}

@keyframes readerClickOverlayShow {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes readerClickOverlayHide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.popup:before, .popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.popup {
  z-index: 1300;
  flex-direction: column;
  align-items: center;
  display: none;
}
.popup__body {
  position: relative;
}
.popup__close {
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 20px;
  cursor: pointer;
}
.popup__content {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  max-height: 100%;
  width: 100%;
  max-width: 440px;
  overflow-y: auto;
  overflow-x: hidden;
  will-change: transform;
  background: var(--light-bg);
  color: var(--main-text-color);
  z-index: 1400;
  transition: 0.3s ease;
  padding: 20px;
}
.popup:before {
  content: "";
  margin: -100px;
  display: block;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1200;
  transition: opacity 0.3s ease;
}

.popup--chapters-select .popup__content {
  max-width: 520px;
}

.dropdown__content {
  display: none;
}
.dropdown__trigger {
  cursor: pointer;
}

.tippy-box[data-theme=dropdown],
.tippy-box[data-theme=select-page] {
  background-color: var(--light-bg);
  color: var(--main-text-color);
  border-radius: 4px;
  text-align: left;
  pointer-events: auto;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.08), 0px 4px 16px rgba(0, 0, 0, 0.08);
  max-width: none !important;
}

.tippy-box[data-theme=select-page] {
  max-height: 300px;
  overflow-y: auto;
}

.menu {
  display: flex;
  flex-direction: column;
}
.menu--bookmark {
  width: 232px;
}
.menu--profile {
  width: 260px;
}
.menu__inner {
  background: var(--medium-bg);
  border-radius: 10px;
  margin: 5px 0;
}
.menu__packs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 8px;
  padding: 5px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(139, 0, 255, 0.08), rgba(119, 44, 232, 0.14));
  border: 1px solid rgba(139, 0, 255, 0.12);
  color: var(--main-text-color);
  transition: 0.2s ease;
  position: relative;
  overflow: hidden;
}
.menu__packs:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(139, 0, 255, 0.12), rgba(119, 44, 232, 0.18));
  color: var(--main-text-color);
}
.menu__packs-icon {
  width: 34px;
  height: 34px;
  min-width: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(to right, #7232a9, #814cb0, #8856b4, #8c5eb4);
}
.menu__packs-icon i {
  margin-right: 0;
  font-size: 18px;
  color: white;
}
.menu__packs-content {
  min-width: 0;
  flex: 1;
}
.menu__packs-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--main-text-color);
}
.menu__packs-text {
  font-size: 11px;
  line-height: 1.25;
  color: var(--secondary-text-color);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.menu__packs-arrow {
  font-size: 18px;
  line-height: 1;
  color: var(--purple-btn-bg);
  margin-left: 4px;
  flex-shrink: 0;
}
.menu__item {
  padding: 8px 13px;
  color: var(--main-text-color);
  display: flex;
  align-items: center;
  border-radius: var(--main-border-radius);
  position: relative;
}
.menu__item img {
  width: 20px;
}
.menu__item--custom {
  transition: all 0.2s;
  background-image: linear-gradient(135deg, #4b3f72, #5a4b8c, #6a58a3, #5d4f96, #4a3d7a) !important;
  color: white;
  font-weight: 700;
}
.menu__item--custom:hover {
  color: white;
  transform: scale(1.01);
}
.menu__item--custom img {
  width: 20px;
}
.menu__item--event {
  transition: all 0.2s;
  background-image: linear-gradient(to right, #1d64e7, #3d5ad0, #3453e5, #2757ce, #0023ff) !important;
  color: white;
  font-weight: 700;
  margin-top: 5px;
}
.menu__item--event:hover {
  color: white;
  transform: scale(1.01);
}
.menu__item--event img {
  width: 20px;
}
.menu__item i {
  margin-right: 7px;
  font-size: 17px;
}
.menu__item:not(.menu__item--active):hover {
  background-color: var(--medium-bg);
}
.menu__item-label {
  background-color: var(--red-color);
  color: white;
  display: inline-block;
  margin-left: 8px;
  padding: 1px 4px;
  font-size: 12px;
  border-radius: 7px;
  min-width: 18px;
  text-align: center;
}
.menu__item--active {
  background-color: var(--main-purple-color);
  color: white;
}
.menu__item--hide {
  display: none;
}
.menu__item--warning {
  color: var(--red-color);
}
.menu__item--new::after {
  content: "";
  width: 4px;
  height: 4px;
  position: absolute;
  background-color: var(--red-color);
  top: 7px;
  left: 27px;
  border-radius: 50%;
}
.menu__divider {
  width: 100%;
  height: 1px;
  background-color: var(--border-color);
  margin: 5px 0;
}
.menu__header {
  display: flex;
  align-items: center;
  padding: 8px 13px;
}
.menu__rating {
  padding: 7px 13px;
  width: 100%;
}
.menu__rating-header, .menu__rating-footer {
  font-size: 13px;
  display: flex;
  justify-content: space-between;
}
.menu__rating-header div:first-of-type {
  color: var(--main-text-color);
}
.menu__rating-header div:last-of-type span:first-of-type {
  color: var(--main-text-color);
}
.menu__rating-header div:last-of-type span:last-of-type {
  color: var(--secondary-text-color);
}
.menu__rating-footer div:first-of-type {
  color: var(--secondary-text-color);
}
.menu__rating-footer div:last-of-type {
  color: var(--main-text-color);
}
.menu__rating-bar {
  width: 100%;
  height: 6px;
  background-color: var(--medium-bg);
  border-radius: var(--main-border-radius);
  margin: 8px 0;
  position: relative;
}
.menu__rating-bar--fill {
  position: absolute;
  background: var(--purple-btn-bg);
  height: 6px;
  top: -1px;
  left: -1px;
  border-radius: var(--main-border-radius);
}
.menu__avatar {
  width: 35px;
  height: 35px;
  margin-right: 13px;
  flex-shrink: 0;
}
.menu__avatar img {
  border-radius: 50%;
}
.menu__name {
  font-weight: 500;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}
.menu__balance {
  font-weight: 500;
  font-size: 12px;
}
.menu__balance .diamond {
  width: 12px;
  height: 12px;
  margin-right: 3px;
}

.bookmark {
  margin-top: 20px;
  display: flex;
}
.bookmark__wrapper {
  width: 280px;
  margin-bottom: 20px;
  margin-right: 20px;
}
@media screen and (max-width: 750px) {
  .bookmark__wrapper {
    width: 100%;
  }
}
@media screen and (max-width: 750px) {
  .bookmark {
    flex-direction: column;
  }
}
.bookmark label {
  display: none;
}
.bookmark.mass-edit label {
  display: block;
}
.bookmark.mass-edit .bookmark__manga-image::before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  transition: background 0.2s ease;
  box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  right: 0;
  border-radius: var(--main-border-radius);
}
.bookmark__right {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.bookmark__right .dropdown {
  margin-top: 10px;
  margin-bottom: -10px;
}
.bookmark__manga {
  display: flex;
  height: auto;
  align-items: center;
  margin-top: 20px;
}
.bookmark__manga-container {
  position: relative;
}
.bookmark__manga-container label {
  position: absolute;
  top: 8px;
  left: 6px;
}
.bookmark__manga-score {
  position: absolute;
  bottom: 4px;
  right: 4px;
  color: white;
  font-size: 12px;
  font-weight: 500;
  padding: 1px 4px;
  border-radius: 4px;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bookmark__manga-score--green {
  background: var(--green-color);
}
.bookmark__manga-score--red {
  background: var(--red-color);
}
.bookmark__manga-score--grey {
  background-color: #aaa;
}
.bookmark__manga-image {
  display: block;
  padding-top: 150%;
  position: relative;
  background-size: cover;
  background-position: 50%;
  width: 70px;
  background-color: var(--medium-bg);
  overflow: hidden;
  border-radius: 4px;
}
.bookmark__manga-image:hover {
  opacity: 0.7;
}
@media screen and (max-width: 600px) {
  .bookmark__manga-image {
    width: 60px;
  }
}
.bookmark__manga-info {
  margin-right: 10px;
  margin-left: 12px;
}
.bookmark__manga-name {
  font-size: 15px;
  color: var(--main-text-color);
  margin-bottom: 8px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
@media screen and (max-width: 750px) {
  .bookmark__manga-name {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
.bookmark__manga-chapter {
  font-size: 14px;
  color: var(--secondary-text-color);
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.bookmark__manga-chapter span {
  display: inline-block;
  padding: 2px 4px;
  background-color: var(--red-color);
  color: var(--white-color);
  border-radius: var(--main-border-radius);
  font-size: 10px;
  margin-left: 5px;
}
@media screen and (max-width: 550px) {
  .bookmark__manga-chapter span {
    display: none;
  }
}
.bookmark__manga-right {
  display: flex;
  margin-left: auto;
  align-items: center;
}
.bookmark__manga-controls {
  display: flex;
}
.bookmark__manga-controls button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border-radius: var(--main-border-radius);
  font-size: 24px;
  color: var(--icons-color);
  margin-right: 5px;
}
.bookmark__manga-controls button:last-of-type {
  margin-right: 0;
}
.bookmark__manga-controls button:hover {
  background-color: var(--medium-bg);
}
@media screen and (max-width: 550px) {
  .bookmark__manga-controls button {
    font-size: 20px;
  }
}
.bookmark__manga-date {
  font-size: 14px;
  color: var(--secondary-text-color);
  display: flex;
  line-height: 20px;
  margin-right: 40px;
}
@media screen and (max-width: 550px) {
  .bookmark__manga-date {
    display: none;
  }
}
.bookmark__manga-date i {
  font-size: 20px;
  margin-right: 5px;
}

.bookmark-group-update--active {
  color: var(--red-color);
}

.modal-bookmark-edit__controls {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.modal-bookmark-edit__remove-btn {
  color: var(--red-color) !important;
  display: flex;
  align-items: center;
}
.modal-bookmark-edit__remove-btn i {
  font-size: 20px;
  margin-right: 6px;
}

.modal-bookmark-folder {
  margin-top: 22px;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 8px;
}
.modal-bookmark-folder::-webkit-scrollbar {
  width: 6px;
}
.modal-bookmark-folder::-webkit-scrollbar-thumb {
  background: var(--medium-bg);
  border-radius: 20px;
}
.modal-bookmark-folder-item {
  display: grid;
  grid-template-columns: 34px 1fr 44px 44px;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--medium-bg);
}
.modal-bookmark-folder-item:last-child {
  border-bottom: 0;
}
.modal-bookmark-folder-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary-text-color);
}
.modal-bookmark-folder-item__icon i {
  font-size: 25px;
}
.modal-bookmark-folder-name {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--medium-bg);
  border-radius: 13px;
  background: var(--light-bg);
  color: var(--main-text-color);
  font-size: 16px;
  font-weight: 500;
  outline: none;
  transition: 0.2s ease;
}
.modal-bookmark-folder-name:focus {
  border-color: var(--purple-btn-bg);
  box-shadow: 0 0 0 3px rgba(128, 64, 255, 0.12);
}
.modal-bookmark-folder-name:disabled {
  color: var(--secondary-text-color);
  background: var(--light-bg);
  cursor: default;
}
.modal-bookmark-folder-save, .modal-bookmark-folder-delete {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s ease;
}
.modal-bookmark-folder-save {
  background: var(--purple-btn-bg);
  color: #fff;
}
.modal-bookmark-folder-save:hover {
  transform: translateY(-1px);
  opacity: 0.9;
}
.modal-bookmark-folder-delete {
  background: rgba(255, 60, 60, 0.09);
  color: var(--red-color);
}
.modal-bookmark-folder-delete i {
  font-size: 21px;
}
.modal-bookmark-folder-delete:hover {
  background: rgba(255, 60, 60, 0.16);
}
.modal-bookmark-folder-empty {
  width: 44px;
  height: 44px;
}
@media screen and (max-width: 600px) {
  .modal-bookmark-folder-item {
    grid-template-columns: 30px 1fr 40px 40px;
    gap: 8px;
  }
  .modal-bookmark-folder-name {
    height: 42px;
    font-size: 14px;
  }
  .modal-bookmark-folder-save, .modal-bookmark-folder-delete, .modal-bookmark-folder-empty {
    width: 40px;
    height: 40px;
  }
}

.bookmark-folder-controls {
  display: flex;
}
.bookmark-folder-controls button {
  display: flex;
  align-items: center;
  margin-right: 10px;
}
@media screen and (max-width: 750px) {
  .bookmark-folder-controls button:first-of-type i {
    margin-right: 5px;
  }
}
.bookmark-folder-controls button:last-of-type {
  margin-right: 0;
}
.bookmark-folder-controls button i {
  margin-right: 5px;
  font-size: 22px;
}
@media screen and (max-width: 750px) {
  .bookmark-folder-controls button i {
    margin-right: 0;
    font-size: 22px;
  }
}
@media screen and (max-width: 750px) {
  .bookmark-folder-controls button span {
    display: none;
  }
}

.modal-bookmark-folder-create__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-bookmark-folder-create .switch {
  margin-right: 45px;
  margin-bottom: 0;
}

.bookmark-label {
  position: absolute;
  right: 15px;
  top: 10px;
  display: inline-flex;
  box-sizing: border-box;
  height: 20px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 15px;
  font-weight: 700;
  font-style: normal;
  text-align: center;
  margin-top: 0;
  text-transform: lowercase;
  letter-spacing: 0;
  color: #fff;
  z-index: 2;
  max-width: 117px;
  overflow: hidden;
}
.bookmark-label--reading {
  background-color: #ea003d;
  box-shadow: 0 4px 12px rgba(234, 0, 61, 0.4);
}
.bookmark-label--will-read {
  background-color: #00a5ff;
  box-shadow: 0 4px 12px rgba(0, 165, 255, 0.4);
}
.bookmark-label--read {
  background-color: #ff542e;
  box-shadow: 0 4px 12px rgba(255, 84, 46, 0.4);
}
.bookmark-label--abandon {
  background-color: #312b45;
  box-shadow: 0 4px 12px rgba(49, 43, 69, 0.4);
}
.bookmark-label--favourite {
  background-color: #73a32f;
  box-shadow: 0 4px 12px rgba(115, 163, 47, 0.4);
}
.bookmark-label--undefined {
  background: #1f1f1f;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.bookmark-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 71px;
  background: #1c1c1e;
  color: #ddd;
  z-index: 1005;
  display: none;
}
.bookmark-header__container {
  display: flex;
  height: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 15px;
}
.bookmark-header__left {
  display: flex;
  align-items: center;
}
.bookmark-header__left button:hover {
  opacity: 0.8;
}
.bookmark-header__right {
  margin-left: auto;
  display: flex;
}
.bookmark-header__right button {
  margin-right: 15px;
}
.bookmark-header__right button i {
  display: none;
}
@media screen and (max-width: 450px) {
  .bookmark-header__right button i {
    font-size: 22px;
    display: block;
  }
  .bookmark-header__right button span {
    display: none;
  }
}
.bookmark-header__right button:hover {
  opacity: 0.8;
}
.bookmark-header__right button:last-of-type {
  margin-right: 0;
}
.bookmark-header__status-text {
  font-weight: 500;
  margin-right: 15px;
}
.bookmark-header__select-all-btn {
  color: hsla(0deg, 0%, 100%, 0.6);
}

.twitter-typeahead {
  display: flex !important;
  width: 100%;
}

.twitter-typeahead pre {
  height: 35px;
}

.twitter-typeahead .tt-menu {
  width: 100%;
  margin-top: 5px;
  border-radius: var(--main-border-radius);
  background-color: var(--light-bg);
  box-shadow: 0 10px 20px -2px rgba(0, 0, 0, 0.4);
  color: var(--main-text-color);
  padding: 10px 0;
  line-height: 27px;
}

.suggestion__item, .suggestion__empty {
  display: flex;
  padding: 10px 15px;
  color: var(--main-text-color);
}
.suggestion__name {
  line-height: 21px;
}
.suggestion__image {
  width: 35px;
  height: 35px;
  margin-right: 12px;
  flex-shrink: 0;
}
.suggestion__image img {
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.suggestion__rating {
  margin-left: auto;
  font-weight: 500;
  margin-right: 5px;
  font-size: 14px;
}
.suggestion__info {
  display: flex;
  align-items: center;
  width: 100%;
}
.suggestion__info-item {
  margin-right: 5px;
}

.suggestion-block__select-result .search-result__empty {
  display: block;
  margin: 0 0 15px 0;
}

.suggestion-block__item {
  display: flex;
  align-items: center;
  background: var(--medium-bg);
  margin-bottom: 15px;
  padding: 15px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.suggestion-block__item img {
  width: 35px;
  border-radius: 4px;
  margin-right: 7px;
  transition: transform 0.2s ease;
}
.suggestion-block__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  background: var(--medium-bg);
}
.suggestion-block__item:hover img {
  transform: scale(1.05);
}
.suggestion-block__item:active {
  transform: scale(0.98);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.suggestion-block__load-more {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px dashed var(--border-color);
  background: var(--light-bg);
  color: var(--secondary-text-color);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  margin-bottom: 10px;
}
.suggestion-block__load-more:hover {
  background: var(--medium-bg);
  border-color: var(--main-purple-color);
  color: var(--main-text-color);
  transform: translateY(-1px);
}
.suggestion-block__load-more:active {
  transform: scale(0.98);
  background: var(--medium-bg);
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
  overflow-y: auto;
}
.modal--open {
  display: flex;
}
.modal--fixed-bottom {
  top: unset;
  padding-bottom: 0;
}
.modal--fixed-bottom .modal__inner {
  max-width: 768px;
  width: 100%;
}
.modal--fixed-bottom .modal__content {
  width: 100%;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.modal .secondary-title {
  margin-top: 0;
}
.modal--search {
  padding-top: 9px;
}
.modal--search .modal__inner {
  margin-top: 0px;
}
.modal--search .modal__body {
  overflow-y: unset;
  padding: 0;
}
.modal--search .modal__content {
  min-width: 100%;
  width: 600px;
  border-radius: 16px;
}
.modal__inner {
  max-width: 92vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: auto;
  margin-bottom: auto;
}
.modal__content {
  position: relative;
  z-index: 1120;
  background: var(--light-bg);
  color: var(--main-text-color);
  width: 500px;
  border-radius: 16px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}
.modal__header {
  position: relative;
  padding: 20px 24px 0;
}
.modal__title {
  margin: 0;
  padding-right: 30px;
  font-size: 17px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.modal__close {
  cursor: pointer;
  position: absolute;
  top: 15px;
  right: 12px;
  z-index: 40;
  height: 24px;
  width: 24px;
  padding: 6px;
  color: var(--main-text-color);
  background: var(--medium-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
}
.modal__close:hover {
  opacity: 0.7;
}
.modal__body {
  padding: 24px;
  overflow-y: auto;
}
.modal::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: -100px;
  z-index: 1101;
  background: rgba(0, 0, 0, 0.6);
}

.search-bar {
  padding: 20px;
}
.search-bar__controls {
  margin-bottom: 15px;
}
.search-bar__controls button {
  border-radius: 10px;
  margin-right: 10px;
}
.search-bar__controls button:last-of-type {
  margin-right: 0;
}
.search-bar__tabs {
  display: flex;
  overflow-x: auto;
  margin-top: 15px;
  padding-bottom: 8px;
}
.search-bar__tab {
  background: var(--medium-bg);
  padding: 7px 12px;
  border-radius: 16px;
  font-size: 13px;
  margin-right: 10px;
  cursor: pointer;
}
.search-bar__tab:not(.search-bar__tab--active):hover {
  opacity: 0.8;
}
.search-bar__tab--active {
  background: var(--purple-btn-bg);
  color: white;
}
.search-bar__switch {
  position: absolute;
  top: 5px;
  right: 35px;
  height: 28px;
  background: var(--dark-grey-bg);
  text-align: left;
  padding: 4px;
  border-radius: 13px;
  display: flex;
  width: 75px;
  cursor: pointer;
}
@media only screen and (max-width: 350px) {
  .search-bar__switch {
    width: 65px;
  }
}
.search-bar__switch--active .search-bar__switch-item {
  left: 16px;
}
.search-bar__switch-item {
  background: var(--light-bg);
  font-size: 13px;
  border-radius: 13px;
  padding: 3px 7px 4px;
  transition: all 0.4s;
  position: absolute;
  left: 5px;
  top: 3px;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  width: 53px;
  text-align: center;
}
@media only screen and (max-width: 350px) {
  .search-bar__switch-item {
    width: 45px;
    font-size: 12px;
    padding: 4px 6px 5px;
  }
}
.search-bar__container {
  display: flex;
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--border-color);
}
.search-bar__input {
  height: 38px;
  line-height: 38px;
  border: 0;
  background: var(--light-bg);
  color: var(--main-text-color);
  padding-left: 38px;
  padding-right: 38px;
  border-radius: 16px;
  width: 100%;
  outline: none;
}
@media only screen and (max-width: 350px) {
  .search-bar__input::-moz-placeholder {
    font-size: 13px;
  }
  .search-bar__input::placeholder {
    font-size: 13px;
  }
}
.search-bar__left {
  position: absolute;
  top: 0;
  left: 0;
  width: 38px;
  height: 38px;
  cursor: pointer;
  color: var(--main-text-color);
  font-size: 18px;
  padding: 10px;
  z-index: 2;
}
.search-bar__right {
  position: absolute;
  top: 0;
  right: 0;
  padding: 11px;
  width: 38px;
  height: 38px;
  cursor: pointer;
  color: var(--secondary-text-color);
}
.search-bar__history {
  margin-top: 8px;
}
.search-bar__history-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 5px;
  font-size: 13px;
  color: var(--secondary-text-color);
  border-radius: 10px;
}
.search-bar__history-item:hover {
  background-color: var(--medium-bg);
  color: var(--main-text-color);
  cursor: pointer;
}
.search-bar__title {
  font-size: 16px;
  font-weight: 500;
  margin: 16px 0 10px;
  padding: 0 5px;
}
.search-bar__hots {
  display: flex;
  flex-wrap: wrap;
}
.search-bar__hot {
  background-color: var(--medium-bg);
  border-radius: 16px;
  color: var(--secondary-text-color);
  margin-right: 5px;
  margin-bottom: 6px;
  padding: 5px 13px;
  font-size: 14px;
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-bar__hot:hover {
  color: var(--main-text-color);
}

.search-result {
  display: none;
}
.search-result__title {
  margin: 0 0 20px 32px;
}
.search-result__list {
  padding-bottom: 20px;
}
.search-result__more {
  padding: 8px 32px;
  display: block;
  color: var(--purple-btn-bg);
}
.search-result__item {
  display: flex;
  align-items: center;
  padding: 8px 32px;
  margin-bottom: 2px;
}
.search-result__item:hover {
  background: hsla(0deg, 0%, 55%, 0.1);
  color: var(--main-text-color);
}
.search-result__empty {
  margin-left: 30px;
  font-size: 13px;
}
.search-result__image {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  flex-shrink: 0;
}
.search-result__image img {
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

.modal-report {
  display: flex;
  flex-direction: column;
  margin-top: 24px;
}
.modal-report textarea {
  width: 100%;
  resize: none;
}

#modal-manga-rating .modal__body {
  padding: 10px 0;
}

#modal-comment-report {
  z-index: 9999;
}

.adult-modal {
  display: flex;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999999;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
  overflow-y: auto;
}
.adult-modal::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: -100px;
  z-index: 1101;
  background: rgba(0, 0, 0, 0.65);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.adult-modal__inner {
  max-width: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: auto;
  margin-bottom: auto;
}
.adult-modal__content {
  position: relative;
  z-index: 1120;
  background: #fff;
  background: var(--light-bg);
  width: 92vw;
  border-radius: 14px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}
.adult-modal__header {
  position: relative;
  padding: 13px 20px 0;
  font-size: 18px;
  font-weight: 600;
}
.adult-modal__header span {
  color: var(--red-color);
}
.adult-modal__body {
  padding: 20px;
  overflow-y: auto;
  font-size: 15px;
  line-height: 20px;
}
.adult-modal__footer {
  padding: 0 20px 20px;
}
.adult-modal__check {
  display: flex;
  margin-left: 20px;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--secondary-text-color);
}

.search {
  display: flex;
  align-items: center;
}
.search input {
  border: 1px solid transparent;
  background: var(--medium-bg);
  font-size: 15px;
  height: 44px;
  border-radius: var(--main-border-radius);
  margin-right: 10px;
  padding: 0 10px;
  width: 100%;
  outline: var(--main-purple-color);
  color: var(--main-text-color);
}
.search input:focus, .search input:active {
  border-color: var(--main-purple-color);
}
.search input::-moz-placeholder {
  font-size: 15px;
  color: var(--secondary-text-color);
}
.search input::placeholder {
  font-size: 15px;
  color: var(--secondary-text-color);
}
@media screen and (max-width: 345px) {
  .search input::-moz-placeholder {
    font-size: 12px;
  }
  .search input::placeholder {
    font-size: 12px;
  }
}
.search button {
  height: 44px;
  font-size: 12px;
}
.search button i {
  font-size: 18px;
  margin-right: 5px;
}
@media screen and (max-width: 345px) {
  .search button i {
    font-size: 16px;
    margin-right: 4px;
  }
}

.search form {
  width: 100%;
}

.body--search-page .manga-cards__link,
.body--search-page .manga-cards__text {
  display: none;
}

.like-button {
  border: none;
  background: none;
  border-radius: 40px;
  padding: 0.45rem 0.75rem;
  color: #878787;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  filter: grayscale(100%);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.like-button:hover {
  border-color: currentColor;
}

.like-button.liked {
  color: #ff6e6f;
  border-color: currentColor;
  filter: grayscale(0);
}

.like-icon {
  width: 18px;
  height: 16px;
  display: inline-block;
  position: relative;
  margin-right: 0.25em;
  font-size: 1.5rem;
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyMSAxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAuMTAxIDQuNDE3UzguODk1LjIwNyA1LjExMS4yMDdjLTQuNDY1IDAtMTAuOTY3IDYuODQ2IDUuMDgyIDE3LjU5MkMyNS4yMzcgNy4wMyAxOS42NjUuMjAyIDE1LjUwMS4yMDJjLTQuMTYyIDAtNS40IDQuMjE1LTUuNCA0LjIxNXoiIGZpbGw9IiNGRjZFNkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==") no-repeat center;
  background-size: 100%;
}

.liked .like-icon {
  animation: heartPulse 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.liked .like-icon [class^=heart-animation-] {
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyMSAxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAuMTAxIDQuNDE3UzguODk1LjIwNyA1LjExMS4yMDdjLTQuNDY1IDAtMTAuOTY3IDYuODQ2IDUuMDgyIDE3LjU5MkMyNS4yMzcgNy4wMyAxOS42NjUuMjAyIDE1LjUwMS4yMDJjLTQuMTYyIDAtNS40IDQuMjE1LTUuNCA0LjIxNXoiIGZpbGw9IiNGRjZFNkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==") no-repeat center;
  background-size: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 14px;
  opacity: 0;
}

.liked .like-icon [class^=heart-animation-]::before, .liked .like-icon [class^=heart-animation-]::after {
  content: "";
  background: inherit;
  background-size: 100%;
  width: inherit;
  height: inherit;
  display: inherit;
  position: relative;
  top: inherit;
  left: inherit;
  opacity: 0;
}

.liked .like-icon .heart-animation-1 {
  animation: heartFloatMain-1 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.liked .like-icon .heart-animation-1::before, .liked .like-icon .heart-animation-1::after {
  width: 12px;
  height: 10px;
  visibility: hidden;
}

.liked .like-icon .heart-animation-1::before {
  opacity: 0.6;
  animation: heartFloatSub-1 1s 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.liked .like-icon .heart-animation-1::after {
  animation: heartFloatSub-2 1s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  opacity: 0.75;
}

.liked .like-icon .heart-animation-2 {
  animation: heartFloatMain-2 1s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.liked .like-icon .heart-animation-2::before, .liked .like-icon .heart-animation-2::after {
  width: 10px;
  height: 8px;
  visibility: hidden;
}

.liked .like-icon .heart-animation-2::before {
  animation: heartFloatSub-3 1s 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  opacity: 0.25;
}

.liked .like-icon .heart-animation-2::after {
  animation: heartFloatSub-4 1s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  opacity: 0.4;
}
@keyframes heartPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}
@keyframes heartUnlike {
  50% {
    transform: scale(0.75);
  }
}
@keyframes heartFloatMain-1 {
  0% {
    opacity: 0;
    transform: translate(0) rotate(0);
  }
  50% {
    opacity: 1;
    transform: translate(0, -25px) rotate(-20deg);
  }
}
@keyframes heartFloatMain-2 {
  0% {
    opacity: 0;
    transform: translate(0) rotate(0) scale(0);
  }
  50% {
    opacity: 0.9;
    transform: translate(-10px, -38px) rotate(25deg) scale(1);
  }
}
@keyframes heartFloatSub-1 {
  0% {
    visibility: hidden;
    transform: translate(0) rotate(0);
  }
  50% {
    visibility: visible;
    transform: translate(13px, -13px) rotate(30deg);
  }
}
@keyframes heartFloatSub-2 {
  0% {
    visibility: hidden;
    transform: translate(0) rotate(0);
  }
  50% {
    visibility: visible;
    transform: translate(18px, -10px) rotate(55deg);
  }
}
@keyframes heartFloatSub-3 {
  0% {
    visibility: hidden;
    transform: translate(0) rotate(0);
  }
  50% {
    visibility: visible;
    transform: translate(-10px, -10px) rotate(-40deg);
  }
  100% {
    transform: translate(-50px, 0);
  }
}
@keyframes heartFloatSub-4 {
  0% {
    visibility: hidden;
    transform: translate(0) rotate(0);
  }
  50% {
    visibility: visible;
    transform: translate(2px, -18px) rotate(-25deg);
  }
}
.favourite-send-btn {
  position: relative;
}
.favourite-send-btn.elem-animation > svg {
  opacity: 0;
}
.favourite-send-btn .favourite-btn--active {
  display: none;
}
.favourite-send-btn .favourite-btn--not-active {
  display: inline-block;
}
.favourite-send-btn.active .favourite-btn--active {
  display: inline-block;
}
.favourite-send-btn.active .favourite-btn--not-active {
  display: none;
}
.favourite-send-btn .a-lottie {
  position: absolute;
  z-index: 1;
  width: 37px;
  top: -4px;
  left: 50%;
  transform: translate(-50%, 0);
  padding-right: 1px;
}

.favourite-btn--active,
.favourite-btn--not-active {
  width: 22px;
  fill: transparent;
  color: var(--icons-color);
  margin-bottom: 2px;
  flex-shrink: 0;
}

.manga__poster .favourite-btn--active,
.manga__poster .favourite-btn--not-active {
  margin-bottom: 0;
}
.manga__poster .a-lottie {
  top: -1px;
}

.chapters__like-btn .a-lottie {
  transition: unset;
  left: 11px;
  top: -7px;
  width: 36px;
  padding-right: 0;
}

.manga__favourite-btn .a-lottie {
  padding-right: 0;
}

.modal-product__like .a-lottie {
  top: 2px;
}

.cards-like-btn .a-lottie {
  transition: unset;
  left: 26px;
  top: -10px;
  width: 36px;
  padding-right: 0;
}
.cards-like-btn span {
  margin-left: 5px;
}

.reader-menu__inner .a-lottie {
  top: -2px;
}
@media screen and (max-width: 900px) {
  .reader-menu__inner .a-lottie {
    top: -3px;
    left: 3px;
    transform: none;
  }
}

.collection__user-like > svg {
  margin-bottom: 0;
}
.collection__user-like .a-lottie {
  padding-right: 0;
  top: 2px;
}

.app-svg {
  position: absolute;
  width: 0;
  height: 0;
  left: 0;
  top: 0;
}

.catalog {
  display: flex;
  justify-content: space-between;
}
.catalog__left {
  width: 75%;
  flex-grow: 1;
}
.catalog__right {
  width: 25%;
  margin-left: 20px;
}
@media screen and (max-width: 850px) {
  .catalog__right {
    display: none;
    margin-left: 0;
  }
}
.catalog__right.popup {
  display: block;
  margin-left: 0;
  width: 100%;
}
.catalog__right.popup form {
  padding-bottom: 350px;
}
.catalog__right form.popup__content {
  max-width: 400px;
}
@media screen and (max-width: 600px) {
  .catalog__right form.popup__content {
    max-width: 280px;
  }
}
.catalog__right-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-top: 5px;
  margin-bottom: 15px;
}
.catalog__right-header .small-title {
  margin: 0;
}
.catalog__right-clear-button {
  display: flex;
  align-items: center;
  font-size: 15px;
  letter-spacing: 0.5px;
  color: var(--main-text-color);
  border-radius: var(--main-border-radius);
}
.catalog__chapters {
  margin: 20px 0;
  display: flex;
  flex-wrap: wrap;
}
.catalog__chapters input {
  display: none;
}
.catalog__chapters span {
  padding: 4px 7px;
  background-color: var(--medium-bg);
  border-radius: var(--main-border-radius);
  font-size: 14px;
  color: var(--secondary-text-color);
}
.catalog__chapters input:checked ~ span {
  background-color: var(--purple-btn-bg);
  color: white;
}
.catalog__chapters label {
  margin-right: 3px;
  cursor: pointer;
  margin-bottom: 7px;
}
.catalog .cards__item {
  width: 16.6%;
}
@media screen and (max-width: 1200px) {
  .catalog .cards__item {
    width: 20%;
  }
}
@media screen and (max-width: 985px) {
  .catalog .cards__item {
    width: 25%;
  }
}
@media screen and (max-width: 650px) {
  .catalog .cards__item {
    width: 33.3333%;
  }
}
@media screen and (max-width: 374px) {
  .catalog .cards__item {
    width: 50%;
  }
}

.mobile-show-filter {
  display: none;
}
@media screen and (max-width: 850px) {
  .mobile-show-filter {
    display: inline-block;
  }
}

.tabs--center {
  display: flex;
  justify-content: center;
}
.tabs__nav {
  display: flex;
  margin-bottom: 20px;
  overflow-x: auto;
}
.tabs__item {
  margin-right: 20px;
  padding: 10px;
  cursor: pointer;
  display: block;
  flex-shrink: 0;
  color: var(--main-text-color);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 3px solid transparent;
}
@media only screen and (max-width: 350px) {
  .tabs__item {
    font-size: 12px !important;
    padding: 10px 5px !important;
  }
}
.tabs__item[disabled] {
  color: #b7b7b7;
  cursor: default;
}
.tabs__item:not([disabled]):hover {
  color: var(--purple-btn-bg);
}
.tabs__item--label-new {
  position: relative;
}
.tabs__item--label-new::after {
  position: absolute;
  content: "";
  top: 7px;
  right: 0;
  width: 5px;
  height: 5px;
  background: var(--red-color);
  border-radius: 50%;
}
.tabs__item--active {
  border-color: var(--purple-btn-bg);
}
.tabs__item:last-of-type {
  margin-right: 0;
}
.tabs__page {
  display: none;
}
.tabs__page--active {
  display: block;
}

.profile__header {
  display: flex;
}
.profile .comments__send-form textarea::-moz-placeholder {
  color: var(--secondary-text-color) !important;
}
.profile .comments__send-form textarea::placeholder {
  color: var(--secondary-text-color) !important;
}
.profile__controls {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  z-index: 3;
}
.profile__controls a, .profile__controls button {
  opacity: 0.7;
  margin-bottom: 5px;
  color: white;
}
.profile__controls a:hover, .profile__controls button:hover {
  opacity: 1;
}
.profile__gift-item {
  width: 85px;
  margin-right: 15px;
  cursor: pointer;
  border-radius: 20px;
  background: var(--medium-bg);
}
.profile__about {
  margin-bottom: 20px;
  line-height: 22px;
  font-size: 15px;
  word-wrap: break-word;
}
.profile__cover {
  width: 100%;
  height: 100%;
  position: absolute;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 0;
  top: 0;
  left: 0;
  border-radius: var(--main-border-radius);
}
.profile__wrapper {
  z-index: 5;
}
.profile__avatar {
  width: 100px;
  height: 100px;
  margin-right: 25px;
  flex-shrink: 0;
  position: relative;
  z-index: 5;
}
@media screen and (max-width: 550px) {
  .profile__avatar {
    width: 60px;
    height: 60px;
    margin-right: 0;
    margin-bottom: 10px;
  }
}
.profile__avatar img {
  border-radius: var(--main-border-radius);
}
.profile__background {
  width: 100%;
  height: 320px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: var(--main-border-radius);
  /*box-shadow: inset 0 0 0 1000px rgba(0,0,0,60%);*/
  padding: 40px;
  color: white;
  margin-bottom: 20px;
  display: flex;
  position: relative;
}
.profile__background::after {
  content: "";
  background: rgba(0, 0, 0, 0.3);
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--main-border-radius);
}
@media screen and (max-width: 550px) {
  .profile__background::after {
    width: 100%;
    background-image: -webkit-linear-gradient(top, transparent, rgba(37, 29, 52, 0.7882352941));
    background-color: transparent;
  }
}
@media screen and (max-width: 550px) {
  .profile__background {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
.profile__name {
  font-size: 40px;
  font-weight: 600;
  z-index: 2;
  margin-bottom: 10px;
  position: relative;
}
@media screen and (max-width: 550px) {
  .profile__name {
    font-size: 30px;
    text-align: center;
  }
}
.profile__name a {
  color: unset;
}
.profile__info {
  font-size: 14px;
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.profile__info-old-names {
  display: flex;
  flex-wrap: wrap;
  line-height: 20px;
}
.profile__info-old-names div {
  flex-shrink: 0;
}
.profile__info-old-names-item:not(:last-child):after {
  content: ",";
  margin-right: 3px;
}
.profile__info-item {
  display: flex;
  align-items: center;
  font-weight: 500;
}
.profile__info-value-club {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: auto;
  margin-right: 0;
}
.profile__info-value-club a {
  padding: 10px;
  margin-right: 0 !important;
}
.profile__info-moderator {
  color: #22b722;
}
@media screen and (max-width: 550px) {
  .profile__info {
    flex-direction: column;
  }
}
.profile__info-footer {
  display: inline-flex;
  flex-direction: column;
  width: 250px;
}
.profile__info-footer a {
  width: 100%;
}
.profile__info--ignore-btn {
  cursor: pointer;
  margin-bottom: 10px;
}
.profile__info span {
  margin-right: 4px;
}
.profile__info-label {
  display: block;
  height: 20px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 15px;
  font-weight: 700;
  margin-left: 5px;
}
@media screen and (max-width: 550px) {
  .profile__info-label {
    margin-top: 10px;
  }
}
.profile__info-label-type--user {
  background-color: #ff542e;
  box-shadow: 0 4px 12px rgba(255, 84, 46, 0.4);
  color: white;
}
.profile__info-label-type--admin {
  background-color: #ea003d;
  box-shadow: 0 4px 12px rgba(234, 0, 61, 0.4);
  color: white;
}
.profile__info-label-type--1 {
  background-color: #ea003d;
  box-shadow: 0 4px 12px rgba(234, 0, 61, 0.4);
  color: white;
}
.profile__info-label-type--moderator {
  background-color: #22b722;
  box-shadow: 0 4px 12px rgba(131, 239, 116, 0.4);
  color: white;
}
.profile__info-label-type--2 {
  background-color: #22b722;
  box-shadow: 0 4px 12px rgba(131, 239, 116, 0.4);
  color: white;
}
.profile__info-label-type--4 {
  background-color: #22b722;
  box-shadow: 0 4px 12px rgba(131, 239, 116, 0.4);
  color: white;
}
.profile__info-label-type--animator {
  background-color: #253bce;
  box-shadow: 0 4px 12px rgba(62, 52, 176, 0.4);
  color: white;
}
.profile__info-label-type--3 {
  background-color: #253bce;
  box-shadow: 0 4px 12px rgba(62, 52, 176, 0.4);
  color: white;
}
.profile__info-label-type--5 {
  background-color: #870fee;
  box-shadow: 0 4px 12px rgba(151, 46, 255, 0.44);
  color: white;
}
.profile__info-label-type--6 {
  background-color: #2a2a2a;
  box-shadow: 0 4px 12px rgba(76, 77, 74, 0.44);
  color: white;
}
.profile__info-label-type--7 {
  background-color: #8b00ff;
  box-shadow: 0 4px 12px rgba(89, 52, 176, 0.4);
  color: white;
}
.profile__info-label-type--8 {
  background-color: var(--main-purple-color);
  /*box-shadow: 0 4px 12px rgb(89 52 176 / 40%);*/
  color: white;
}
.profile__info-label-type--8 {
  background-color: var(--main-purple-color);
  box-shadow: 0 4px 12px rgb(var(--main-purple-color)/40%);
  color: white;
}
.profile__info-label-type--9 {
  background-color: #32a0a1;
  box-shadow: 0 4px 12px rgba(52, 176, 172, 0.4);
  color: white;
}
.profile__title {
  display: flex;
  font-size: 20px;
  font-weight: 400;
  align-items: center;
  margin-bottom: 20px;
}
.profile__title a {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--secondary-purple-color);
  margin-left: auto;
}
.profile__title i {
  margin-left: 2px;
  margin-top: 3px;
}
.profile__middle {
  display: flex;
  justify-content: space-between;
}
.profile__middle-right {
  width: 48%;
}
@media screen and (max-width: 1100px) {
  .profile__middle-right {
    width: 100%;
  }
}
.profile__middle-left {
  width: 48%;
}
@media screen and (max-width: 1100px) {
  .profile__middle-left {
    width: 100%;
  }
}
@media screen and (max-width: 1320px) {
  .profile__middle {
    flex-direction: column;
  }
}
.profile__activity {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 20px;
}
@media screen and (max-width: 1320px) {
  .profile__activity {
    flex-wrap: unset;
    overflow-y: scroll;
  }
}
.profile__activity-item {
  border-radius: var(--main-border-radius);
  width: 215px;
  background: var(--medium-bg);
  margin-bottom: 10px;
  flex-shrink: 0;
}
@media screen and (max-width: 1400px) {
  .profile__activity-item {
    width: 200px;
  }
}
@media screen and (max-width: 1320px) {
  .profile__activity-item {
    margin-right: 15px;
  }
  .profile__activity-item:last-of-type {
    margin-right: 0;
  }
}
.profile__activity-image {
  height: 100px;
  width: 100%;
  display: block;
}
.profile__activity-image img {
  border-top-left-radius: var(--main-border-radius);
  border-top-right-radius: var(--main-border-radius);
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
}
.profile__activity-middle {
  border-bottom: 2px solid var(--light-bg);
}
.profile__activity-name {
  display: block;
  font-size: 15px;
  color: var(--main-text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 10px;
}
.profile__activity-footer {
  display: flex;
  padding: 10px;
}
.profile__activity-percent {
  font-size: 13px;
  margin-left: 10px;
  flex-shrink: 0;
}
.profile__activity-bar {
  height: 13px;
  background-color: var(--medium-bg);
  position: relative;
  border-radius: var(--main-border-radius);
  width: 100%;
}
.profile__activity-bar--fill {
  background: var(--purple-btn-bg);
  height: 13px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--main-border-radius);
  color: var(--secondary-purple-color);
}
.profile__user-activity {
  margin-bottom: 20px;
}
.profile__user-activity-bar {
  height: 10px;
  background-color: #505050;
  border-radius: 4px;
}
.profile__user-activity-bar--active {
  width: 44%;
  height: 100%;
  background-color: var(--purple-btn-bg);
  border-radius: 4px;
}
.profile__cuts {
  position: relative;
  z-index: 2;
}
.profile__cut {
  top: 0px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--white-color);
  border-radius: 50%;
  margin: 0 0 0 -6px;
  position: absolute;
}
.profile__user-activity-times {
  display: flex;
}
.profile__user-activity-time {
  width: 20%;
  text-align: center;
  font-size: 0.75em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 7px;
}
@media screen and (max-width: 550px) {
  .profile__user-activity-time span {
    display: none;
  }
}
.profile__friends {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  overflow: unset;
  flex-wrap: wrap;
  /*&--full {
      overflow: unset;
      flex-wrap: wrap;
      .profile__friends-item {
          margin-bottom: 10px;
          position: relative;
          @media screen and (max-width: 700px) {
              width: 46%;
          }
          @media screen and (max-width: 400px) {
             width: 100%;
          }
      }
  }*/
}
@media screen and (max-width: 1030px) {
  .profile__friends {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (max-width: 850px) {
  .profile__friends {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 650px) {
  .profile__friends {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 450px) {
  .profile__friends {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media screen and (max-width: 550px) {
  .profile__friends {
    padding-bottom: 20px;
  }
}
.profile__friends-search-input {
  width: 100%;
}
.profile__friends-type {
  width: 15px !important;
  margin-right: 5px;
}
.profile__friends-item {
  display: flex;
  align-items: center;
  background: var(--medium-bg);
  margin-bottom: 2px;
  padding: 10px;
  border-radius: var(--main-border-radius);
  flex-shrink: 0;
  position: relative;
}
@media screen and (max-width: 550px) {
  .profile__friends-item {
    margin-bottom: 0;
  }
}
.profile__friends-item--online .profile__friends-avatar::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  background: var(--green-color);
  border-radius: 50%;
  border: 2px solid var(--light-bg);
}
.profile__friends-avatar {
  width: 35px;
  height: 35px;
  margin-right: 15px;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}
.profile__friends-avatar img {
  border-radius: var(--main-border-radius);
}
.profile__friends-name {
  font-size: 15px;
  color: var(--main-text-color);
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  display: flex;
  max-height: 20px;
}
.profile__friends-time {
  font-size: 13px;
  color: var(--secondary-text-color);
  margin-bottom: 5px;
}

.week {
  left: 10%;
}

.month {
  left: 30%;
}

.month_3 {
  left: 50%;
}

.month_6 {
  left: 70%;
}

.year {
  left: 90%;
}

.frame {
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(1.18);
  border-radius: 0 !important;
}

.main-profile--mobile {
  background: var(--light-bg) !important;
  padding-top: 0 !important;
}

.mobile-profile__header {
  margin: 0 -10px;
  position: relative;
}
.mobile-profile__background {
  height: 213px;
}
.mobile-profile__background-image {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}
.mobile-profile__background .profile__cover {
  max-height: 213px;
  border-radius: 0;
}
.mobile-profile__avatar {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100px;
  height: 100px;
  box-shadow: 0 5px 12px -4px rgba(34, 60, 80, 0.3490196078);
}
.mobile-profile__avatar img {
  border-radius: var(--main-border-radius);
}
.mobile-profile__wrapper {
  background: var(--light-bg);
  border-radius: 32px 32px 0 0;
  margin-top: -30px;
  padding: 75px 10px 20px;
  position: relative;
  z-index: 5;
  margin-bottom: 15px;
}
.mobile-profile__name {
  font-weight: 600;
  font-size: 30px;
  margin-top: 5px;
  text-align: center;
  position: relative;
}
.mobile-profile__name a {
  font-size: 28px;
}
.mobile-profile__status {
  display: flex;
  justify-content: center;
  margin-top: 7px;
  font-size: 14px;
}
.mobile-profile__status img {
  margin-left: 5px;
  width: 18px;
}
.mobile-profile__status--pro {
  display: flex;
  justify-content: center;
  background-image: linear-gradient(72.98deg, #7c54ee 0%, #9c42d6 25%, #772ce8 100%);
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  height: 18px;
  line-height: 17px;
  border-radius: 13px;
  padding: 0 8px;
  font-size: 14px;
  width: 40px;
  margin: 0 auto;
  margin-top: 10px;
}
.mobile-profile__online {
  font-size: 13px;
  margin-top: 7px;
  color: var(--secondary-text-color);
  text-align: center;
}
.mobile-profile__stat {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.mobile-profile__column {
  width: 33.3%;
  text-align: center;
}
.mobile-profile__column div:first-of-type {
  font-size: 16px;
  font-weight: 600;
}
.mobile-profile__column div:last-of-type {
  font-size: 12px;
  color: var(--secondary-text-color);
}
.mobile-profile__controls {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.mobile-profile__controls a {
  margin-right: 10px;
}
.mobile-profile__gift-btn {
  border: none;
  background: var(--medium-bg);
  border-radius: var(--main-border-radius);
  color: var(--main-text-color);
  padding: 1px 8px;
  cursor: pointer;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-align: center;
  box-sizing: border-box;
  font-size: 20px;
  margin-left: 10px;
  display: flex;
  align-items: center;
}
.mobile-profile__gift-btn i {
  margin-top: 1px;
}

.friends-controls {
  display: flex;
  flex-direction: column;
}
.friends-controls--mobile {
  margin-left: 10px;
  flex-direction: row;
}
.friends-controls--mobile button {
  border: none;
  background: var(--medium-bg);
  border-radius: var(--main-border-radius);
  color: var(--main-text-color);
  padding: 1px 8px;
  cursor: pointer;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-align: center;
  box-sizing: border-box;
  font-size: 22px;
}
.friends-controls--mobile button:first-of-type {
  margin-right: 10px;
}
.friends-controls--mobile button i {
  margin-top: 6px;
}

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

.modal-gift {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.modal-gift__image {
  width: 150px;
  margin-bottom: 10px;
}
.modal-gift__name {
  font-size: 25px;
  font-weight: 500;
  margin-bottom: 10px;
}
.modal-gift__text {
  font-size: 15px;
  line-height: 20px;
  text-align: center;
}

.modal[id=modal-user-info] {
  text-align: center;
}
.modal[id=modal-user-info] .profile__info {
  flex-direction: column !important;
}
.modal[id=modal-user-info] .profile__info-list {
  display: inline-flex;
  flex-direction: column;
  width: 250px;
}
.modal[id=modal-user-info] .profile__info .club-top-list__item {
  width: 100% !important;
  margin: 13px 0 !important;
}
.modal[id=modal-user-info] .profile__info .club-top-list__name {
  background: none !important;
  margin-right: 0 !important;
  padding: 0 !important;
  border-radius: unset;
  color: white;
}
.modal[id=modal-user-info] .profile__info-pro {
  display: flex;
}
.modal[id=modal-user-info] .profile__info-pro span:first-of-type {
  display: flex;
  justify-content: center;
  background-image: linear-gradient(72.98deg, #7c54ee 0%, #9c42d6 25%, #772ce8 100%);
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  height: 21px;
  line-height: 17px;
  border-radius: 13px;
  padding: 0 8px;
  font-size: 14px;
  width: 45px;
  margin-right: 5px;
}
.modal[id=modal-user-info] .profile__info-pro span:last-of-type {
  color: var(--main-text-color);
}
.modal[id=modal-user-info] .profile__info-item {
  display: flex;
  padding: 8px 0;
  font-size: 13px;
  justify-content: space-between;
}
.modal[id=modal-user-info] .profile__info-type {
  flex-shrink: 0;
}
.modal[id=modal-user-info] .profile__info span {
  margin-bottom: 10px;
  font-size: 15px;
}
.modal[id=modal-user-info] .profile__info-links {
  display: flex;
  margin-top: 10px;
  margin-bottom: 10px;
}
.modal[id=modal-user-info] .profile__info a {
  padding: 5px 10px;
  border-radius: 20px;
  background: var(--medium-bg);
  color: var(--main-text-color);
}
.modal[id=modal-user-info] .profile__info a:first-of-type {
  background: var(--medium-bg);
  margin-right: 10px;
}
.modal[id=modal-user-info] .profile__info button {
  padding: 5px 10px;
  border-radius: 20px;
  background: var(--medium-bg);
  color: var(--main-text-color);
}

.profile-cards {
  display: flex;
}
.profile-cards .manga-cards__item-wrapper {
  width: 180px;
  padding: 0 !important;
  margin-right: 10px;
}
@media screen and (max-width: 540px) {
  .profile-cards .manga-cards__item-wrapper {
    width: 160px;
  }
}
@media screen and (max-width: 480px) {
  .profile-cards .manga-cards__item-wrapper {
    width: 140px;
  }
}
@media screen and (max-width: 420px) {
  .profile-cards .manga-cards__item-wrapper {
    width: 110px;
  }
}
@media screen and (max-width: 361px) {
  .profile-cards .manga-cards__item-wrapper {
    width: 100px;
  }
}
@media screen and (max-width: 321px) {
  .profile-cards .manga-cards__item-wrapper {
    width: 92px;
  }
}
@media screen and (max-width: 400px) {
  .profile-cards .manga-cards__item {
    padding: 0 !important;
  }
}

.friend-controls__item {
  background: var(--light-bg);
  padding: 15px 20px;
  margin-bottom: 10px;
  border-radius: 10px;
  display: flex;
  align-items: center;
}
.friend-controls__item a {
  color: var(--main-purple-color);
  margin-left: 7px;
  font-weight: 500;
}
@media screen and (max-width: 580px) {
  .friend-controls__item a {
    margin-left: 0;
  }
}
@media screen and (max-width: 580px) {
  .friend-controls__item {
    flex-direction: column;
    align-items: center;
  }
}
.friend-controls__item:last-of-type {
  margin-bottom: 0;
}
.friend-controls__controls {
  margin-left: auto;
}
@media screen and (max-width: 580px) {
  .friend-controls__controls {
    margin-top: 15px;
    margin-left: 0;
  }
}

.card-controls {
  display: flex;
  margin-bottom: 15px;
  overflow: auto;
}
.card-controls a,
.card-controls button {
  flex-shrink: 0;
}

.owl-item .profile__friends-item {
  margin-right: 15px;
  width: 240px;
}

.edit-decor__content--custom {
  display: block !important;
}

.profile-customization-form {
  max-height: 300px;
}
.profile-customization-form__select {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.profile-customization-form__select .ss-main {
  max-width: 210px;
}
.profile-customization-form__title {
  font-size: 20px;
  margin: 15px 0;
  font-weight: 500;
}
.profile-customization-form__input-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  font-size: 15px;
}
.profile-customization-form__input-wrapper:first-of-type {
  padding-top: 0 !important;
}
.profile-customization-form__color-picker {
  position: relative;
  display: inline-block;
}
.profile-customization-form__color-picker-input {
  opacity: 0; /* Прячем стандартный input */
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.profile-customization-form__color-picker-display {
  display: block;
  width: 23px;
  height: 23px;
  background-color: #b6570a;
  border: 2px solid white;
  cursor: pointer;
  border-radius: 50%;
}
.profile-customization-form__checkbox-wrapper {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
}
.profile-customization-form__checkbox-wrapper .switch {
  margin-bottom: 0 !important;
  display: flex;
  width: 100%;
}
.profile-customization-form__checkbox-wrapper .switch-for {
  width: 100%;
  font-size: 15px;
}
.profile-customization-form__checkbox-wrapper .switch-for::after {
  content: "";
  width: 30px;
  height: 8px;
  border-radius: 15px;
  position: absolute;
  top: 6px;
  right: 0;
  background: var(--medium-bg);
  transition-duration: 300ms;
}
.profile-customization-form__checkbox-wrapper .switch-for::before {
  content: "";
  width: 15px;
  height: 15px;
  background: var(--purple-btn-bg);
  border-radius: 50%;
  position: absolute;
  right: 18px;
  top: 3px;
  z-index: 1;
  transition-duration: 300ms;
}

.profile-blacklist-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 69, 69, 0.12), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 69, 69, 0.22);
}

.profile-blacklist-note__icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 69, 69, 0.14);
  flex-shrink: 0;
}

.profile-blacklist-note__title {
  font-weight: 700;
  font-size: 14px;
}

.profile-blacklist-note__reason {
  margin-top: 5px;
  font-size: 13px;
  opacity: 0.85;
}

.profile-blacklist-note__reason span {
  font-weight: 600;
}

.profile-blacklist-note__reason--empty {
  opacity: 0.55;
  font-style: italic;
}

.blacklist-page {
  width: 100%;
  max-width: 1180px;
  margin: 28px auto 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.blacklist-page__item {
  position: relative;
  display: grid;
  grid-template-columns: 360px minmax(260px, 1fr) 190px;
  align-items: center;
  gap: 28px;
  min-height: 118px;
  padding: 20px 24px 20px 30px;
  border-radius: 24px;
  background: var(--block-color);
  border: 1px solid var(--border-color);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08);
}

.blacklist-page__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(to bottom, #ff6262, #ff9a9a);
}

.blacklist-page__user {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: inherit;
}

.blacklist-page__avatar {
  position: relative;
  flex-shrink: 0;
}

.blacklist-page__avatar img {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.blacklist-page__avatar::after {
  content: "⛔";
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #ff5a5a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  box-shadow: 0 6px 14px rgba(255, 90, 90, 0.35);
}

.blacklist-page__info {
  min-width: 0;
}

.blacklist-page__name {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  word-break: break-word;
}

.blacklist-page__date {
  margin-top: 6px;
  font-size: 14px;
  color: var(--text-muted-color);
}

.blacklist-page__reason {
  min-width: 0;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--body-color);
  border: 1px solid var(--border-color);
}

.blacklist-page__reason-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted-color);
  margin-bottom: 8px;
}

.blacklist-page__reason-text {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-color);
  word-break: break-word;
}

.blacklist-page__reason-text--empty {
  color: var(--text-muted-color);
  font-style: italic;
}

.blacklist-page__bottom {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.blacklist-page__bottom .button {
  width: 170px;
  height: 46px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 1000px) {
  .blacklist-page__item {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .blacklist-page__bottom {
    justify-content: stretch;
  }
  .blacklist-page__bottom .button {
    width: 100%;
  }
}
@media (max-width: 700px) {
  .blacklist-page {
    margin-top: 20px;
    gap: 14px;
  }
  .blacklist-page__item {
    min-height: auto;
    padding: 16px;
    border-radius: 20px;
  }
  .blacklist-page__avatar img {
    width: 58px;
    height: 58px;
    border-radius: 18px;
  }
  .blacklist-page__reason {
    padding: 12px;
  }
}
.friends-showcase {
  padding-bottom: 32px;
}

.friends-showcase__hero {
  position: relative;
  overflow: hidden;
  min-height: 230px;
  margin-bottom: 18px;
  padding: 30px;
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.16), rgba(255, 107, 174, 0.08)), var(--block-bg, #f6f6f8);
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.06));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
}

.friends-showcase__glow {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(18px);
  opacity: 0.8;
}

.friends-showcase__glow--one {
  width: 190px;
  height: 190px;
  left: -45px;
  top: -55px;
  background: rgba(124, 92, 255, 0.28);
}

.friends-showcase__glow--two {
  width: 230px;
  height: 230px;
  right: 14%;
  bottom: -120px;
  background: rgba(255, 107, 174, 0.22);
}

.friends-showcase__hero-content,
.friends-showcase__hero-actions {
  position: relative;
  z-index: 2;
}

.friends-showcase__label {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--primary-color, #7c5cff);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.friends-showcase__title {
  margin: 0;
  color: var(--text-color, #242424);
  font-size: 44px;
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: -0.04em;
}

.friends-showcase__title span {
  margin-left: 6px;
  color: var(--text-muted, #777);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0;
}

.friends-showcase__subtitle {
  max-width: 560px;
  margin-top: 12px;
  color: var(--text-muted, #777);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 600;
}

.friends-showcase-card__avatar {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.friends-showcase-card__avatar {
  position: relative;
  z-index: 5;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}

.friends-showcase-card__frame {
  pointer-events: none;
}

.friends-showcase-card__image {
  pointer-events: none;
}

.profile__friends-avatar.friends-showcase-card__avatar {
  cursor: pointer;
}

.profile__friends-avatar.friends-showcase-card__avatar img {
  pointer-events: none;
}

.profile-preview-fixed {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 99999;
  width: calc(100% - 32px);
  max-width: 720px;
  pointer-events: none;
}

.profile-preview-fixed__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 18px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: rgba(18, 18, 24, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  pointer-events: auto;
}

.profile-preview-fixed__icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  font-size: 18px;
}

.profile-preview-fixed__content {
  flex: 1;
  min-width: 0;
}

.profile-preview-fixed__title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.profile-preview-fixed__text {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}

.profile-preview-fixed__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s ease;
}

.profile-preview-fixed__close:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .profile-preview-fixed {
    width: calc(100% - 20px);
    bottom: 12px;
  }
  .profile-preview-fixed__inner {
    padding: 12px;
    gap: 12px;
    border-radius: 16px;
  }
  .profile-preview-fixed__icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 12px;
    font-size: 15px;
  }
  .profile-preview-fixed__title {
    font-size: 13px;
  }
  .profile-preview-fixed__text {
    font-size: 12px;
  }
  .profile-preview-fixed__close {
    height: 36px;
    padding: 0 12px;
    font-size: 12px;
  }
}
.friends-showcase__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.friends-showcase__stat {
  min-width: 132px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.56);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

.friends-showcase__stat-value {
  color: var(--text-color, #242424);
  font-size: 22px;
  line-height: 1;
  font-weight: 950;
}

.friends-showcase__stat-label {
  margin-top: 5px;
  color: var(--text-muted, #777);
  font-size: 12px;
  font-weight: 800;
}

.friends-showcase__hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.friends-showcase__action {
  height: 46px;
  min-width: 46px;
  padding: 0 17px;
  border: 0;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--text-color, #242424);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  transition: 0.2s ease;
}

.friends-showcase__action:hover {
  transform: translateY(-2px);
  color: var(--text-color, #242424);
}

.friends-showcase__action--primary {
  background: var(--primary-color, #7c5cff);
  color: #fff;
  box-shadow: 0 14px 34px rgba(124, 92, 255, 0.28);
}

.friends-showcase__action--primary:hover {
  color: #fff;
}

.friends-showcase__panel {
  margin-bottom: 16px;
  padding: 12px;
  border-radius: 24px;
  background: var(--block-bg, #f6f6f8);
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.05));
  display: flex;
  align-items: center;
  gap: 12px;
}

.friends-showcase__sort {
  height: 44px;
  min-width: 190px;
  padding: 0 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.friends-showcase__sort-icon {
  width: 17px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.friends-showcase__sort-icon span {
  height: 2px;
  border-radius: 999px;
  background: var(--text-muted, #777);
}

.friends-showcase__sort-icon span:nth-child(1) {
  width: 17px;
}

.friends-showcase__sort-icon span:nth-child(2) {
  width: 12px;
}

.friends-showcase__sort-icon span:nth-child(3) {
  width: 7px;
}

.friends-showcase__select {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text-color, #242424);
  font-size: 14px;
  font-weight: 900;
  outline: none;
  cursor: pointer;
}

.friends-showcase__search {
  flex: 1;
  margin: 0;
}

.friends-showcase__search-input {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border-radius: 16px;
  border: 0;
  background: rgba(255, 255, 255, 0.55);
  color: var(--text-color, #242424);
  font-size: 14px;
  font-weight: 800;
  outline: none;
}

.friends-showcase__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.friends-showcase-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 94px;
  padding: 15px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.42)), var(--block-bg, #f7f7f9);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.055);
  display: flex;
  align-items: center;
  gap: 13px;
  transition: 0.22s ease;
}

.friends-showcase-card:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 15%, rgba(124, 92, 255, 0.16), transparent 34%), radial-gradient(circle at 95% 80%, rgba(255, 107, 174, 0.13), transparent 32%);
  opacity: 0;
  transition: 0.22s ease;
}

.friends-showcase-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.09);
}

.friends-showcase-card:hover:before {
  opacity: 1;
}

.friends-showcase-card__avatar,
.friends-showcase-card__content,
.friends-showcase-card__open {
  position: relative;
  z-index: 2;
}

.friends-showcase-card__avatar {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 20px;
  display: block;
  text-decoration: none;
}

.friends-showcase-card__image {
  width: 58px;
  height: 58px;
  border-radius: 2px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.friends-showcase-card__frame {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.friends-showcase-card__content {
  min-width: 0;
  flex: 1;
  display: block;
  text-decoration: none;
}

.friends-showcase-card__name {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-color, #242424);
  font-size: 16px;
  line-height: 1.2;
  font-weight: 950;
}

.friends-showcase-card__type {
  flex: 0 0 auto;
  line-height: 1;
}

.friends-showcase-card__username {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friends-showcase-card__time {
  margin-top: 6px;
  color: var(--text-muted, #777);
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friends-showcase-card__open {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--text-muted, #777);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 18px;
  font-weight: 900;
  opacity: 0;
  transform: translateX(6px);
  transition: 0.2s ease;
}

.friends-showcase-card:hover .friends-showcase-card__open {
  opacity: 1;
  transform: translateX(0);
}

.friends-showcase-card__open:hover {
  color: var(--primary-color, #7c5cff);
}

/* dark */
body.dark .friends-showcase__hero {
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.18), rgba(255, 107, 174, 0.07)), #181922;
  border-color: rgba(255, 255, 255, 0.07);
}

body.dark .friends-showcase__label,
body.dark .friends-showcase__stat,
body.dark .friends-showcase__action,
body.dark .friends-showcase__sort,
body.dark .friends-showcase__search-input,
body.dark .friends-showcase-card__open {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.07);
}

body.dark .friends-showcase__title,
body.dark .friends-showcase__stat-value,
body.dark .friends-showcase__select,
body.dark .friends-showcase__search-input,
body.dark .friends-showcase-card__name,
body.dark .friends-showcase__action {
  color: #f4f4f6;
}

body.dark .friends-showcase__subtitle,
body.dark .friends-showcase__title span,
body.dark .friends-showcase__stat-label,
body.dark .friends-showcase-card__time,
body.dark .friends-showcase-card__open {
  color: #9a9aa3;
}

body.dark .friends-showcase__action--primary {
  background: var(--primary-color, #7c5cff);
  color: #fff;
}

body.dark .friends-showcase__panel {
  background: #181922;
  border-color: rgba(255, 255, 255, 0.07);
}

body.dark .friends-showcase-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)), #1d1e27;
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: none;
}

body.dark .friends-showcase-card:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.035)), #242631;
}

/* adaptive */
@media (max-width: 1400px) {
  .friends-showcase__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1000px) {
  .friends-showcase__hero {
    flex-direction: column;
  }
  .friends-showcase__hero-actions {
    width: 100%;
  }
  .friends-showcase__action {
    flex: 1;
  }
  .friends-showcase__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .friends-showcase__hero {
    min-height: auto;
    padding: 22px;
    border-radius: 26px;
  }
  .friends-showcase__title {
    font-size: 34px;
  }
  .friends-showcase__subtitle {
    font-size: 14px;
  }
  .friends-showcase__panel {
    flex-direction: column;
    align-items: stretch;
  }
  .friends-showcase__sort {
    width: 100%;
  }
  .friends-showcase__grid {
    grid-template-columns: 1fr;
  }
  .friends-showcase-card {
    min-height: 82px;
    padding: 12px;
    border-radius: 20px;
  }
  .friends-showcase-card__avatar,
  .friends-showcase-card__image {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
    border-radius: 17px;
  }
  .friends-showcase-card__open {
    opacity: 1;
    transform: none;
  }
}
.mobile-profile-battle-mini {
  width: calc(100% - 32px);
  margin: 20px auto 12px;
  padding: 11px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--secondary-border-radius);
  background: var(--medium-bg);
  color: var(--main-text-color);
  text-decoration: none;
}

.mobile-profile-battle-mini__icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(139, 0, 255, 0.09);
}
.mobile-profile-battle-mini__icon svg {
  width: 22px;
  height: 22px;
  fill: var(--main-purple-color);
}

.mobile-profile-battle-mini__content {
  min-width: 0;
  flex: 1;
  text-align: left;
  margin-left: 8px;
}
.mobile-profile-battle-mini__content span {
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
  line-height: 1.15;
  color: var(--secondary-text-color);
}
.mobile-profile-battle-mini__content strong {
  display: block;
  font-size: 16px;
  line-height: 1.15;
  font-weight: 600;
  color: var(--title-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-profile-battle-mini__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.mobile-profile-battle-mini__meta div {
  min-width: 44px;
  padding: 5px 7px;
  border-radius: 10px;
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  text-align: center;
}
.mobile-profile-battle-mini__meta b {
  display: block;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  color: var(--title-color);
}
.mobile-profile-battle-mini__meta span {
  display: block;
  margin-top: 3px;
  font-size: 9px;
  padding: 3px 6px;
  line-height: 1;
  color: var(--secondary-text-color);
}

.mobile-profile-battle-mini__arrow {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--main-purple-color);
}
.mobile-profile-battle-mini__arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 420px) {
  .mobile-profile-battle-mini {
    padding: 10px;
    gap: 8px;
  }
  .mobile-profile-battle-mini__meta {
    gap: 4px;
  }
  .mobile-profile-battle-mini__meta div {
    min-width: 38px;
    padding: 5px 5px;
  }
  .mobile-profile-battle-mini__meta b {
    font-size: 12px;
  }
  .mobile-profile-battle-mini__meta span {
    font-size: 8px;
  }
}
@media (max-width: 360px) {
  .mobile-profile-battle-mini__meta div:nth-child(2) {
    display: none;
  }
}
.profile-battle-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
}
.profile-battle-modal.is-active, .profile-battle-modal.active {
  display: block;
}

.profile-battle-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.profile-battle-modal__box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 24px);
  max-width: 440px;
  max-height: calc(100dvh - 24px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px;
  border-radius: 24px;
  background: var(--light-bg);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.28);
  -webkit-overflow-scrolling: touch;
}

.profile-battle-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--medium-bg);
  color: var(--secondary-text-color);
  font-size: 24px;
  cursor: pointer;
}

.profile-battle-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-right: 40px;
}
.profile-battle-modal__header span {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
  color: var(--secondary-text-color);
}
.profile-battle-modal__header strong {
  display: block;
  font-size: 26px;
  line-height: 1.05;
  color: var(--title-color);
  font-weight: 900;
}

.profile-battle-modal__rp {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(139, 0, 255, 0.08);
  color: var(--main-purple-color);
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.profile-battle-modal__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 14px;
}
.profile-battle-modal__stats div {
  min-width: 0;
  padding: 10px 6px;
  border-radius: 14px;
  background: var(--medium-bg);
  text-align: center;
}
.profile-battle-modal__stats b {
  display: block;
  font-size: 17px;
  line-height: 1;
  color: var(--title-color);
}
.profile-battle-modal__stats span {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--secondary-text-color);
}

.profile-battle-modal__section {
  margin-top: 16px;
}

.profile-battle-modal__title {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 900;
  color: var(--title-color);
}

.profile-battle-modal__buff {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border-radius: 14px;
  background: var(--medium-bg);
}
.profile-battle-modal__buff b {
  display: block;
  font-size: 14px;
  color: var(--title-color);
}
.profile-battle-modal__buff span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--secondary-text-color);
}

.profile-battle-modal__buff-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(139, 0, 255, 0.08);
  color: var(--main-purple-color);
}

.profile-battle-modal__deck {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.profile-battle-modal__card {
  min-width: 0;
  padding: 7px;
  border-radius: 16px;
  background: var(--medium-bg);
}

.profile-battle-modal__card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 74/111;
  overflow: hidden;
  border-radius: 12px;
  background: var(--dark-grey-bg);
}
.profile-battle-modal__card-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.profile-battle-modal__card-rank {
  position: absolute;
  top: 5px;
  left: 5px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.profile-battle-modal__card-name {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 800;
  color: var(--title-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-battle-modal__card-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-top: 6px;
}
.profile-battle-modal__card-stats span {
  min-width: 0;
  padding: 4px 2px;
  border-radius: 8px;
  background: var(--light-bg);
  text-align: center;
  font-size: 7px;
  color: var(--secondary-text-color);
}
.profile-battle-modal__card-stats b {
  display: block;
  margin-bottom: 2px;
  font-size: 10px;
  color: var(--title-color);
}

.profile-battle-modal__seal {
  margin-top: 6px;
  padding: 6px;
  border-radius: 10px;
  background: rgba(139, 0, 255, 0.06);
}
.profile-battle-modal__seal small {
  display: block;
  margin-bottom: 2px;
  font-size: 8px;
  color: var(--secondary-text-color);
}
.profile-battle-modal__seal b {
  display: block;
  font-size: 10px;
  color: var(--main-purple-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-battle-modal__fight {
  width: 100%;
  margin-top: 16px;
}

.profile-battle-modal__empty {
  padding: 12px;
  border-radius: 14px;
  background: var(--medium-bg);
  color: var(--secondary-text-color);
  font-size: 12px;
}

@media (max-width: 420px) {
  .profile-battle-modal__box {
    width: calc(100% - 12px);
    max-height: calc(100vh - 12px);
    padding: 14px;
    border-radius: 20px;
  }
  .profile-battle-modal__header strong {
    font-size: 22px;
  }
  .profile-battle-modal__rp {
    font-size: 12px;
    padding: 7px 10px;
  }
  .profile-battle-modal__deck {
    gap: 6px;
  }
}
body.profile-battle-lock {
  overflow: hidden;
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
}

.profile-battle-modal.is-active {
  touch-action: none;
}

.profile-battle-modal__box {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.collection-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
  padding-bottom: 16px;
  margin-top: 20px;
}
@media screen and (max-width: 756px) {
  .collection-list {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  }
}
@media screen and (max-width: 350px) {
  .collection-list {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}
.collection-list__item {
  position: relative;
  padding: 36%;
  display: block;
  transition: all 0.2s;
  margin-bottom: 10px;
}
.collection-list__item img {
  border-radius: 5px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.collection-list__item::after {
  content: "";
  position: absolute;
  background: linear-gradient(0deg, rgb(39, 38, 42) 0%, rgba(255, 255, 255, 0) 60%);
  z-index: 2;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
.collection-list__item:hover {
  transform: translateY(-6px);
}
.collection-list__item:hover .collection-list__img:nth-of-type(1) {
  transform: translateY(4px);
}
.collection-list__item:hover .collection-list__img:nth-of-type(2) {
  transform: translateY(2px);
}
.collection-list__wrapper {
  position: relative;
  margin-bottom: 30px;
}
.collection-list__title {
  font-size: 24px;
  font-weight: 700;
  color: white;
  position: absolute;
  bottom: 10%;
  left: 0;
  width: 100%;
  text-align: center;
  cursor: pointer;
  z-index: 3;
}
.collection-list__img {
  position: absolute;
  overflow: hidden;
  transition: all 0.2s;
}
.collection-list__img:nth-of-type(1) {
  position: absolute;
  top: -13px;
  left: 20px;
  right: 20px;
  bottom: 13px;
  opacity: 0.35;
}
.collection-list__img:nth-of-type(2) {
  position: absolute;
  top: -7px;
  left: 10px;
  right: 10px;
  bottom: 7px;
  opacity: 0.55;
}

.collection__views {
  display: flex;
  align-items: center;
  font-size: 13px;
}
.collection__views i {
  color: var(--icons-color);
  margin-right: 5px;
}
.collection__user {
  display: flex;
  margin-bottom: 15px;
}
.collection__user-avatar {
  width: 80px;
  height: 80px;
  margin-right: 15px;
  flex-shrink: 0;
}
.collection__user-avatar img {
  border-radius: var(--main-border-radius);
}
.collection__user-name {
  font-weight: 600;
  font-size: 16px;
}
.collection__user-info {
  color: var(--secondary-text-color);
  font-size: 14px;
}
.collection__user-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.collection__user-like {
  color: var(--red-color);
}
.collection__user-controls {
  display: flex;
  align-items: center;
}
.collection__user-controls i {
  font-size: 20px;
}
.collection__user-controls .button {
  margin-right: 5px;
  padding: 5px 5px;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 330px) {
  .collection__user-controls .button {
    padding: 4px 4px;
    height: 27px;
  }
}
.collection__desc {
  font-size: 15px;
  color: var(--main-text-color);
  line-height: 20px;
  margin-bottom: 15px;
}
.collection__progress {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
@media screen and (max-width: 550px) {
  .collection__progress {
    flex-direction: column;
    align-items: start;
  }
}
.collection__progress span {
  flex-shrink: 0;
  margin-right: 20px;
  color: var(--secondary-text-color);
}
@media screen and (max-width: 550px) {
  .collection__progress span {
    display: block;
    margin-bottom: 10px;
  }
}
.collection__progress-bar {
  height: 22px;
  background-color: var(--medium-bg);
  position: relative;
  border-radius: var(--main-border-radius);
  width: 100%;
}
.collection__progress-bar-fill {
  background-color: rgba(135, 78, 221, 0.1490196078);
  height: 22px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--main-border-radius);
  color: var(--secondary-purple-color);
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}

.collections {
  margin-bottom: 30px;
}

.collections .owl-item {
  padding-top: 10px;
}

@media screen and (max-width: 360px) {
  .collections.owl-carousel {
    margin: 0 -5px;
  }
}

.owl-carousel .collections__item {
  width: 327px;
  height: 186px;
}
@media screen and (max-width: 400px) {
  .owl-carousel .collections__item {
    margin-left: 6px;
    margin-right: 6px;
  }
}
@media screen and (max-width: 360px) {
  .owl-carousel .collections__item {
    width: 305px;
    height: 174px;
  }
}
@media screen and (max-width: 320px) {
  .owl-carousel .collections__item {
    width: 275px;
    height: 155px;
  }
}

.create-collection {
  display: flex;
}
.create-collection__left {
  flex-basis: 100%;
}
.create-collection__backgrounds {
  display: flex;
}
.create-collection__backgrounds img {
  width: 150px !important;
  margin: 10px;
  border-radius: var(--main-border-radius);
}
.create-collection__backgrounds--active {
  box-shadow: 0px 2px 8px 3px rgba(113, 0, 247, 0.47);
}
.create-collection__characters {
  display: flex;
}
.create-collection__characters img {
  width: 80px !important;
  margin: 10px;
}
.create-collection__characters--active {
  box-shadow: 0px 2px 8px 3px rgba(113, 0, 247, 0.47);
}
.create-collection__example {
  position: relative;
  margin-top: 50px;
}
.create-collection__example .collections__character {
  bottom: 0;
}
.create-collection__manga-list {
  margin-top: 15px;
}
.collections.owl-carousel {
  display: flex;
  flex-wrap: nowrap;
}

.collection-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
  padding-bottom: 16px;
  margin-top: 20px;
}
@media screen and (max-width: 756px) {
  .collection-cards {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  }
}
@media screen and (max-width: 350px) {
  .collection-cards {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}
.collection-cards__title {
  margin-bottom: 15px;
  font-size: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  padding: 0 25px;
  text-align: center;
}
.collection-cards__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--light-bg);
  padding-top: 20px;
}
.collection-cards__item:hover {
  color: var(--main-text-color);
}
.collection-cards__item:hover .collection-cards__title {
  color: var(--main-purple-color);
}
.collection-cards__info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.collection-cards__info-item {
  display: flex;
  align-items: center;
  padding: 4px 7px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-right: 10px;
  font-size: 14px;
}
.collection-cards__info i {
  font-size: 17px;
  margin-right: 5px;
  color: var(--secondary-text-color);
}
.collection-cards__images {
  position: relative;
  height: 170px;
  margin-top: auto;
}
.collection-cards__image {
  bottom: -50px;
  width: 140px;
  left: 50%;
  margin-left: -70px;
  box-shadow: 0 0 0 3px #1c1c1c;
  position: absolute;
  display: block;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 6px;
  background-color: var(--light-bg);
}
@media screen and (max-width: 380px) {
  .collection-cards__image {
    width: 130px;
    margin-left: -63px;
  }
}
.collection-cards__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  transition: opacity 0.15s ease-in;
}
.collection-cards__image:nth-of-type(1) {
  transform: rotate(-10deg) translate(-90px, -30px);
  box-shadow: none;
}
.collection-cards__image:nth-of-type(3) {
  transform: rotate(10deg) translate(90px, 20px);
}
.collection-cards__wrapper {
  position: relative;
  padding-top: 140%;
  max-width: 100%;
  border-radius: 6px;
  overflow: hidden;
}

.collections.owl-carousel .collection-cards__title {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}
.collections.owl-carousel .collection-cards__images {
  height: 100px;
}
.collections.owl-carousel .collection-cards__image {
  width: 80px;
  bottom: -30px;
  margin-left: -40px;
}
.collections.owl-carousel .collection-cards__image:nth-of-type(1) {
  transform: rotate(-10deg) translate(-60px, -20px);
}
.collections.owl-carousel .collection-cards__image:nth-of-type(3) {
  transform: rotate(10deg) translate(60px, 10px);
}

.edit-list {
  margin-top: 20px;
}
.edit-list__item {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
.edit-list__inner {
  display: flex;
}
.edit-list__info {
  display: flex;
  justify-content: space-between;
  font-size: 0.9em;
  color: var(--secondary-text-color);
  margin-bottom: 10px;
}
.edit-list__content {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.edit-list__img {
  width: 115px;
  margin-right: 20px;
  align-self: flex-start;
}
.edit-list__img img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
}
.edit-list__textarea textarea {
  outline: none;
  border: none;
  background: var(--medium-bg);
  resize: none;
  height: 75px;
  width: 100%;
  padding: 10px 15px;
  border-radius: 6px;
}
.edit-list__del-btn {
  display: inline-flex;
  align-items: center;
  width: 180px;
  margin-top: 10px;
}
.edit-list__del-btn i {
  margin-right: 5px;
  font-size: 20px;
}
.edit-list__title {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  background-color: var(--light-bg);
  border-radius: 6px;
  border: 1px solid var(--border-color);
  margin-bottom: 20px;
}
.edit-list__title i {
  font-size: 20px;
  margin-top: 7px;
}
.edit-list__title button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 10px;
}
.edit-list__name {
  margin-right: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}

.manga-collections {
  margin-top: 24px;
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
}
.manga-collections__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.manga-collections__title {
  color: var(--title-color);
  font-weight: 600;
  margin: 15px 0;
  font-size: 1.5em;
}
.manga-collections__text {
  margin-top: 5px;
  font-size: 15px;
  color: var(--secondary-text-color);
}
.manga-collections__all {
  flex-shrink: 0;
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--main-purple-color);
  text-decoration: none;
}
.manga-collections__list {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 14px;
  -webkit-overflow-scrolling: touch;
}
.manga-collections__list::-webkit-scrollbar {
  height: 6px;
}
.manga-collections__list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.14);
  border-radius: 20px;
}
.manga-collections__card {
  width: 260px;
  min-width: 260px;
  margin-right: 10px;
  height: 250px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  background: var(--light-bg);
  color: var(--main-text-color);
  text-decoration: none;
  box-sizing: border-box;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.manga-collections__card:hover {
  border-color: rgba(139, 0, 255, 0.25);
}
.manga-collections__covers {
  height: 112px;
  display: flex;
  gap: 6px;
  padding: 12px 12px 0;
  box-sizing: border-box;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(139, 0, 255, 0.06), rgba(255, 255, 255, 0));
}
.manga-collections__cover {
  width: calc((100% - 12px) / 3);
  height: 96px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}
.manga-collections__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 14px 14px;
  min-width: 0;
}
.manga-collections__name {
  height: 46px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--title-color);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.manga-collections__meta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.manga-collections__meta span {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  padding: 5px 10px;
  border-radius: 10px;
  background: var(--medium-bg);
  color: var(--secondary-text-color);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}
.manga-collections .owl-stage {
  display: flex;
}
.manga-collections .owl-item {
  display: flex;
}
.manga-collections .owl-stage-outer {
  overflow: hidden;
}
.manga-collections .owl-nav {
  position: absolute;
  top: -56px;
  right: 0;
  display: flex;
  gap: 8px;
}
.manga-collections__nav {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.manga-collections__nav::before {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--icons-color);
  border-right: 2px solid var(--icons-color);
}
.manga-collections__nav--prev::before {
  transform: rotate(-135deg);
  margin-left: 3px;
}
.manga-collections__nav--next::before {
  transform: rotate(45deg);
  margin-right: 3px;
}

@media (max-width: 768px) {
  .manga-collections {
    margin-top: 18px;
  }
  .manga-collections__title {
    font-size: 23px;
  }
  .manga-collections__text {
    font-size: 13px;
  }
  .manga-collections__list {
    gap: 10px;
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .manga-collections__list::-webkit-scrollbar {
    display: none;
  }
  .manga-collections__card {
    width: 220px;
    min-width: 220px;
    height: 230px;
    border-radius: 18px;
  }
  .manga-collections__covers {
    height: 100px;
    padding: 10px 10px 0;
  }
  .manga-collections__cover {
    height: 86px;
    border-radius: 8px;
  }
  .manga-collections__body {
    padding: 10px 12px 12px;
  }
  .manga-collections__name {
    height: 42px;
    font-size: 15px;
  }
  .manga-collections__meta span {
    font-size: 12px;
    padding: 4px 8px;
  }
}
.admin-manga-link {
  position: fixed;
  right: 0;
  bottom: 10px;
  background: #8d8d8d;
  width: 15px;
  height: 15px;
}

.fz21 {
  font-size: 21px !important;
}

#back-to-top {
  background-color: var(--light-bg);
  color: var(--main-text-color);
}
@media screen and (max-width: 700px) {
  #back-to-top {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #back-to-top svg {
    margin: 0;
  }
}

.b-manga-reader #back-to-top {
  display: none;
}

.manga-cards__wrapper-video {
  margin: 0 auto;
  max-width: 225px;
  position: relative;
}
.manga-cards__wrapper-video .card-anim-frame {
  z-index: 10;
}

.position-relative {
  position: relative;
}

.loader {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: block;
  margin: 15px auto;
  position: relative;
  background: #FFF;
  box-shadow: -24px 0 #FFF, 24px 0 #FFF;
  box-sizing: border-box;
  animation: shadowPulse 2s linear infinite;
}

@keyframes shadowPulse {
  33% {
    background: #FFF;
    box-shadow: -24px 0 var(--secondary-purple-color), 24px 0 #FFF;
  }
  66% {
    background: var(--secondary-purple-color);
    box-shadow: -24px 0 #FFF, 24px 0 #FFF;
  }
  100% {
    background: #FFF;
    box-shadow: -24px 0 #FFF, 24px 0 var(--secondary-purple-color);
  }
}
.value {
  position: absolute;
  left: 0;
  right: 0;
  transition: transform 0.3s ease;
}

.value-enter, .value-leave {
  transform: translateY(100%);
}

.value-leave-active {
  transform: translateY(-100%);
  opacity: 0;
}

.value-enter-active {
  transform: translateY(0);
}

.info-block {
  background: var(--dark-grey-bg);
  padding: 10px;
  border-radius: 10px;
  border-top: 2px solid var(--purple-btn-bg);
  font-weight: 500;
}

.mb-toast-wrap {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  pointer-events: none;
}

.mb-toast {
  max-width: 300px;
  margin: 0 auto;
  background: var(--light-bg);
  color: var(--main-text-color);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 10px 12px;
  font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-8px);
  animation: mb-toast-in 200ms ease-out forwards;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.mb-toast + .mb-toast {
  margin-top: 10px;
}

.mb-toast a {
  color: var(--main-text-color);
  text-decoration: underline;
}

.mb-toast--out {
  animation: mb-toast-out 180ms ease-in forwards;
}

@keyframes mb-toast-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes mb-toast-out {
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}
.manga-cards__item .position-relative {
  transform: translateZ(0); /* форсим слой */
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.manga-cards__item video {
  position: relative;
  z-index: 1;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.manga-cards__item .card-anim-frame {
  z-index: 2;
  pointer-events: none;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.fi-centr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mr-5 {
  margin-right: 5px;
}

body.common-confirm-open {
  overflow: hidden;
}

.common-confirm {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.common-confirm--show {
  opacity: 1;
  pointer-events: auto;
}
.common-confirm--show .common-confirm__modal {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.common-confirm__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.74);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.common-confirm__modal {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 430px;
  padding: 28px;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.common-confirm__icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 22px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ffbf1a, #ff8a00);
  box-shadow: 0 16px 34px rgba(255, 145, 0, 0.3);
}
.common-confirm__icon svg {
  width: 42px;
  height: 42px;
  fill: none;
}
.common-confirm__icon svg path:first-child {
  fill: rgba(255, 255, 255, 0.18);
}
.common-confirm__icon svg path:not(:first-child) {
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.common-confirm__title {
  font-size: 27px;
  line-height: 1.2;
  font-weight: 800;
  text-align: center;
  color: #18181b;
}
.common-confirm__text {
  max-width: 330px;
  margin: 14px auto 0;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 500;
  text-align: center;
  color: #686872;
}
.common-confirm__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 28px;
}
.common-confirm__button {
  height: 52px;
  border: 0;
  border-radius: 17px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: 0.15s ease;
  outline: none;
}
.common-confirm__button:hover {
  transform: translateY(-1px);
}
.common-confirm__button:active {
  transform: translateY(0);
}
.common-confirm__button--cancel {
  background: #f1f2f6;
  color: #18181b;
}
.common-confirm__button--cancel:hover {
  background: #e8e9ef;
}
.common-confirm__button--confirm {
  background: var(--purple-btn-bg);
  color: #fff;
  box-shadow: 0 12px 28px rgba(91, 33, 182, 0.28);
}
.common-confirm__button--confirm:hover {
  opacity: 0.92;
}

body.dark .common-confirm__modal {
  background: #1f1f26;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.7);
}
body.dark .common-confirm__title {
  color: #ffffff;
}
body.dark .common-confirm__text {
  color: rgba(255, 255, 255, 0.68);
}
body.dark .common-confirm__button--cancel {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
body.dark .common-confirm__button--cancel:hover {
  background: rgba(255, 255, 255, 0.13);
}
body.dark .common-confirm__button--confirm {
  background: var(--purple-btn-bg);
  color: #ffffff;
  box-shadow: 0 14px 34px rgba(124, 58, 237, 0.38);
}

@media (max-width: 480px) {
  .common-confirm {
    align-items: flex-end;
    padding: 12px;
  }
  .common-confirm__modal {
    max-width: 100%;
    padding: 24px 18px 18px;
    border-radius: 24px;
  }
  .common-confirm__icon {
    width: 64px;
    height: 64px;
    border-radius: 21px;
    margin-bottom: 18px;
  }
  .common-confirm__title {
    font-size: 23px;
  }
  .common-confirm__text {
    font-size: 15px;
  }
  .common-confirm__buttons {
    gap: 10px;
  }
  .common-confirm__button {
    height: 48px;
  }
}
.common-confirm__textarea {
  width: 100%;
  min-height: 92px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font-size: 14px;
  line-height: 1.4;
  resize: vertical;
  outline: none;
}

.common-confirm__textarea:focus {
  border-color: var(--color-main);
}

.battle-promo-banner {
  position: fixed;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999999;
  width: calc(100% - 24px);
  max-width: 520px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 2px 10px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: battlePromoShow 0.35s ease;
  color: #1f1f1f;
}

@keyframes battlePromoShow {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
.battle-promo-banner__icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #7c5cff, #a65cff);
  color: #fff;
  font-size: 18px;
  box-shadow: 0 8px 18px rgba(124, 92, 255, 0.3);
}

.battle-promo-banner__content {
  flex: 1;
  min-width: 0;
}

.battle-promo-banner__title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.battle-promo-banner__text {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.35;
  opacity: 0.72;
}

.battle-promo-banner__button {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #7c5cff, #a65cff);
  color: #fff !important;
  text-decoration: none !important;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(124, 92, 255, 0.25);
  transition: transform 0.15s ease;
}

.battle-promo-banner__button:hover {
  transform: translateY(-1px);
}

.battle-promo-banner__close {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  cursor: pointer;
  color: inherit;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.battle-promo-banner__close:hover {
  background: rgba(0, 0, 0, 0.12);
}

body.dark .battle-promo-banner,
.dark .battle-promo-banner,
[data-theme=dark] .battle-promo-banner {
  background: rgba(25, 25, 35, 0.94);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 2px 10px rgba(0, 0, 0, 0.2);
}

body.dark .battle-promo-banner__close,
.dark .battle-promo-banner__close,
[data-theme=dark] .battle-promo-banner__close {
  background: rgba(255, 255, 255, 0.08);
}

body.dark .battle-promo-banner__close:hover,
.dark .battle-promo-banner__close:hover,
[data-theme=dark] .battle-promo-banner__close:hover {
  background: rgba(255, 255, 255, 0.15);
}

@media (max-width: 520px) {
  .battle-promo-banner {
    top: 30px;
    width: calc(100% - 16px);
    padding: 11px;
    gap: 10px;
    border-radius: 16px;
  }
  .battle-promo-banner__icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
  .battle-promo-banner__title {
    font-size: 13px;
  }
  .battle-promo-banner__text {
    font-size: 11px;
  }
  .battle-promo-banner__button {
    padding: 7px 10px;
    font-size: 11px;
  }
}
.modal-tenor__powered {
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.6;
  text-align: center;
}

.admin-panel {
  position: fixed;
  right: 0;
  top: 25%;
  display: flex;
  flex-direction: column;
  background-color: var(--dark-grey-bg);
  border-radius: var(--main-border-radius);
  border-top: 1x solid var(--border-color);
  border-left: 1x solid var(--border-color);
  border-bottom: 1x solid var(--border-color);
  z-index: 999;
}
.admin-panel--left {
  left: 0;
  right: unset;
}
@media screen and (max-width: 500px) {
  .admin-panel--left {
    display: none;
  }
}
.admin-panel--left .admin-panel__tasks {
  left: unset;
  right: 100px;
}
.admin-panel--left .admin-panel__tasks--show {
  right: -310px;
}
.admin-panel__active-task, .admin-panel__err-task {
  font-size: 15px;
  padding: 2px;
}
.admin-panel__active-task {
  color: var(--green-color);
}
.admin-panel__err-task {
  color: var(--red-color);
}
.admin-panel__item {
  margin-bottom: 5px;
  width: 37px;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-panel__item--remanga {
  color: #1976d2;
}
.admin-panel__tasks {
  position: absolute;
  top: 0;
  left: 100px;
  background: var(--dark-grey-bg);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  color: #202020;
  text-align: center;
  width: 300px;
  padding: 15px;
  border: 1px solid var(--border-color);
  transition: left 0.5s;
  border-radius: var(--main-border-radius);
}
.admin-panel__tasks--show {
  left: -310px;
}
.admin-panel__tasks input {
  margin-bottom: 5px;
}
.admin-panel__tasks-title {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.admin-panel label input {
  display: none;
}
.admin-panel label input:checked ~ span {
  background-color: var(--bg-inverse);
  color: white;
}
.admin-panel label span {
  background: var(--medium-bg);
  margin-bottom: 10px;
  color: var(--secondary-text-color);
  border-radius: 10px;
  padding: 5px 15px;
  font-size: 13px;
  display: block;
  cursor: pointer;
}

.chapter-history__name {
  line-height: 22px;
  font-size: 15px;
}
.chapter-history__item {
  display: flex;
}
.chapter-history__item:last-of-type .chapter-history__wrapper::before {
  display: none;
}
.chapter-history__type {
  position: relative;
}
.chapter-history__wrapper::before {
  background: var(--seconday-bg-color);
  content: "";
  height: 100%;
  left: 19px;
  position: absolute;
  top: 0;
  width: 2px;
  z-index: 0;
}
.chapter-history__icon {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--purple-btn-bg);
  color: white;
  border-radius: 50%;
  font-size: 20px;
  margin-right: 17px;
}
.chapter-history__content {
  margin-bottom: 25px;
}
.chapter-history__date {
  font-size: 13px;
  color: var(--secondary-text-color);
  margin-bottom: 5px;
}
.chapter-history a {
  font-weight: 500;
  color: var(--secondary-purple-color);
}

.card-title-page {
  min-height: 100vh;
  color: #fff;
  background: #060814;
}
.card-title-page__container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}
.card-title-page__hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.card-title-page__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #060814 0%, rgba(6, 8, 20, 0.94) 35%, rgba(6, 8, 20, 0.42) 68%, rgba(6, 8, 20, 0.72) 100%), linear-gradient(180deg, rgba(6, 8, 20, 0.1) 0%, #060814 100%);
}
.card-title-page__hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}
.card-title-page__hero-content {
  position: relative;
  z-index: 2;
  max-width: 560px;
  padding-top: 12px;
}
.card-title-page__badge {
  display: inline-flex;
  padding: 10px 18px;
  border-radius: 999px;
  color: #f1d9ff;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  background: rgba(126, 34, 206, 0.45);
  border: 1px solid rgba(168, 85, 247, 0.5);
  box-shadow: 0 0 28px rgba(168, 85, 247, 0.22);
}
.card-title-page__title {
  margin: 28px 0 0;
  font-size: 72px;
  line-height: 0.86;
  font-weight: 950;
  letter-spacing: -0.06em;
  text-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}
.card-title-page__title span {
  display: block;
  color: #c157ff;
  font-family: cursive;
  font-size: 36px;
  line-height: 1;
  font-weight: 400;
  text-shadow: 0 0 18px rgba(193, 87, 255, 0.8);
}
.card-title-page__text {
  max-width: 520px;
  margin: 28px 0 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 18px;
  line-height: 1.6;
}
.card-title-page__progress-card {
  width: 390px;
  margin-top: 30px;
  padding: 20px;
  border-radius: 22px;
  background: rgba(12, 15, 34, 0.78);
  border: 1px solid rgba(168, 85, 247, 0.34);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32), 0 0 30px rgba(168, 85, 247, 0.12);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}
.card-title-page__progress-card p {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
}
.card-title-page__progress-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 14px;
}
.card-title-page__progress-top span {
  display: block;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
}
.card-title-page__progress-top b {
  display: block;
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
}
.card-title-page__progress-top strong {
  color: #c084fc;
  font-size: 24px;
  line-height: 1;
  font-weight: 950;
}
.card-title-page__progress-line {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.11);
}
.card-title-page__progress-line div {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c3aed, #d946ef);
  box-shadow: 0 0 18px rgba(217, 70, 239, 0.72);
}
.card-title-page__cards {
  position: relative;
  z-index: 3;
  margin-top: 38px;
}
.card-title-page__comments {
  margin-top: 54px;
  padding-bottom: 60px;
}
.card-title-page__section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.card-title-page__section-head h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 950;
  letter-spacing: -0.035em;
}
.card-title-page__section-head p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.52);
  font-size: 15px;
}
.card-title-page__counter {
  padding: 10px 16px;
  border-radius: 999px;
  color: #d8b4fe;
  font-weight: 900;
  background: rgba(126, 34, 206, 0.22);
  border: 1px solid rgba(168, 85, 247, 0.36);
  white-space: nowrap;
}
.card-title-page__tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 22px;
}
.card-title-page__tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.68);
  font-weight: 900;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: 0.18s ease;
}
.card-title-page__tab span {
  padding: 4px 8px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(0, 0, 0, 0.24);
  font-size: 12px;
}
.card-title-page__tab:hover {
  color: #fff;
  border-color: rgba(168, 85, 247, 0.35);
}
.card-title-page__tab--active {
  color: #fff;
  background: rgba(126, 34, 206, 0.24);
  border-color: rgba(168, 85, 247, 0.56);
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.12);
}
.card-title-page__tab--active span {
  color: #e9d5ff;
  background: rgba(126, 34, 206, 0.38);
}
.card-title-page__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 14px;
  max-width: 860px;
}
.card-title-page__card {
  position: relative;
  aspect-ratio: 2/3;
  border-radius: 14px;
  text-decoration: none;
  transition: filter 0.18s ease, box-shadow 0.18s ease, opacity 0.22s ease, transform 0.22s ease;
}
.card-title-page__card:hover {
  filter: brightness(1.08);
}
.card-title-page__card:hover .card-title-page__card-image img {
  transform: scale(1.035);
}
.card-title-page__card--new {
  opacity: 0;
  transform: translateY(10px);
}
.card-title-page__card--collected .card-title-page__card-image {
  border-color: rgba(168, 85, 247, 0.65);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34), 0 0 20px rgba(168, 85, 247, 0.2);
}
.card-title-page__card--locked .card-title-page__card-image {
  border-color: rgba(255, 255, 255, 0.12);
}
.card-title-page__card--locked img {
  filter: brightness(0.62) saturate(0.72);
}
.card-title-page__card--locked .card-title-page__card-image::after {
  opacity: 1;
}
.card-title-page__card-image {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(180deg, #111421, #080a14);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.card-title-page__card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.42)), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.045) 0, rgba(255, 255, 255, 0.045) 1px, transparent 1px, transparent 7px);
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.card-title-page__card-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.18s ease, filter 0.18s ease;
}
.card-title-page__card-status {
  position: absolute;
  z-index: 2;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 5px 8px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  font-weight: 900;
  background: rgba(0, 0, 0, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.card-title-page__card-status--collected {
  color: #f1d9ff;
  background: rgba(126, 34, 206, 0.58);
  border-color: rgba(216, 180, 254, 0.28);
}
.card-title-page__load {
  max-width: 860px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.card-title-page__load-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  box-shadow: 0 0 22px rgba(168, 85, 247, 0.25);
  transition: 0.18s ease;
}
.card-title-page__load-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(168, 85, 247, 0.38);
}
.card-title-page__load-button span {
  min-width: 28px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: 999px;
  color: #e9d5ff;
  background: rgba(0, 0, 0, 0.25);
  font-size: 12px;
}
.card-title-page__load-note {
  color: rgba(255, 255, 255, 0.58);
  font-size: 14px;
}

@media (max-width: 900px) {
  .card-title-page__container {
    padding: 0 14px;
  }
  .card-title-page__hero {
    min-height: 490px;
    align-items: flex-end;
    padding-bottom: 42px;
  }
  .card-title-page__hero::after {
    background: linear-gradient(90deg, rgba(6, 8, 20, 0.94), rgba(6, 8, 20, 0.58)), linear-gradient(180deg, rgba(6, 8, 20, 0.1) 0%, #060814 100%);
  }
  .card-title-page__hero-bg {
    -o-object-position: 62% top;
       object-position: 62% top;
  }
  .card-title-page__hero-content {
    max-width: 100%;
  }
  .card-title-page__title {
    font-size: 48px;
  }
  .card-title-page__title span {
    font-size: 28px;
  }
  .card-title-page__text {
    margin-top: 22px;
    font-size: 15px;
    line-height: 1.55;
  }
  .card-title-page__progress-card {
    width: 100%;
    margin-top: 24px;
    padding: 18px;
  }
  .card-title-page__cards {
    margin-top: 30px;
  }
  .card-title-page__section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
  .card-title-page__section-head h2 {
    font-size: 25px;
  }
  .card-title-page__tabs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .card-title-page__tab {
    justify-content: space-between;
  }
  .card-title-page__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: none;
  }
  .card-title-page__card-status {
    left: 6px;
    right: 6px;
    bottom: 6px;
    min-height: 23px;
    font-size: 10px;
  }
  .card-title-page__load {
    max-width: none;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .card-title-page__load-button {
    justify-content: center;
  }
}
@media (max-width: 420px) {
  .card-title-page__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.card-title-page__top-users {
  margin-top: 38px;
}
.card-title-page__top-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 860px;
}
.card-title-page__top-user {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 86px;
  padding: 16px;
  border-radius: 20px;
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: 0.18s ease;
}
.card-title-page__top-user:hover {
  transform: translateY(-3px);
  border-color: rgba(168, 85, 247, 0.45);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
}
.card-title-page__top-user img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  background: rgba(255, 255, 255, 0.08);
}
.card-title-page__top-user b {
  display: block;
  max-width: 150px;
  overflow: hidden;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.card-title-page__top-user span {
  display: block;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
}
.card-title-page__top-user--1 {
  border-color: rgba(251, 191, 36, 0.46);
  box-shadow: 0 0 24px rgba(251, 191, 36, 0.1);
}
.card-title-page__top-user--2 {
  border-color: rgba(216, 180, 254, 0.34);
}
.card-title-page__top-user--3 {
  border-color: rgba(244, 114, 182, 0.3);
}
.card-title-page__top-place {
  min-width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  color: #e9d5ff;
  font-size: 14px;
  font-weight: 950;
  background: rgba(126, 34, 206, 0.28);
}

@media (max-width: 900px) {
  .card-title-page__top-list {
    grid-template-columns: 1fr;
    max-width: none;
  }
}
.card-title-page__top-users {
  margin-top: 38px;
  margin-bottom: 38px;
}
.card-title-page__top-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 860px;
}
.card-title-page__top-user {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 86px;
  padding: 16px;
  border-radius: 20px;
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: 0.18s ease;
}
.card-title-page__top-user:hover {
  transform: translateY(-3px);
  border-color: rgba(168, 85, 247, 0.45);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
}
.card-title-page__top-user img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  background: rgba(255, 255, 255, 0.08);
}
.card-title-page__top-user b {
  display: block;
  max-width: 150px;
  overflow: hidden;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.card-title-page__top-user span {
  display: block;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
}
.card-title-page__top-user--1 {
  border-color: rgba(251, 191, 36, 0.46);
  box-shadow: 0 0 24px rgba(251, 191, 36, 0.1);
}
.card-title-page__top-user--2 {
  border-color: rgba(216, 180, 254, 0.34);
}
.card-title-page__top-user--3 {
  border-color: rgba(244, 114, 182, 0.3);
}
.card-title-page__top-place {
  min-width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  color: #e9d5ff;
  font-size: 14px;
  font-weight: 950;
  background: rgba(126, 34, 206, 0.28);
}
.card-title-page__top-empty {
  grid-column: 1/-1;
  padding: 18px;
  border-radius: 18px;
  color: rgba(255, 255, 255, 0.58);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 900px) {
  .card-title-page__top-list {
    grid-template-columns: 1fr;
    max-width: none;
  }
}
.chapters .search button {
  display: flex;
  align-items: center;
  justify-content: center;
}
.chapters__load-more {
  margin-top: 15px;
}
.chapters__item {
  position: relative;
  background: var(--medium-bg);
  display: flex;
  align-items: center;
  padding: 12px 15px;
  border-radius: var(--main-border-radius);
  font-size: 14px;
  line-height: 25px;
  margin-bottom: 10px;
  color: var(--main-text-color);
}
.chapters__item:last-of-type {
  margin-bottom: 0;
}
.chapters__item:hover {
  background-color: var(--chapters-hover);
  color: var(--main-text-color);
}
.chapters__item:hover .chapters__value,
.chapters__item:hover .chapters__volume {
  color: var(--main-purple-color);
}
.chapters__item-mark {
  color: var(--main-text-color);
  border-radius: var(--main-border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 0 5px;
  background-color: var(--light-bg);
  margin-left: auto;
}
.chapters__title {
  font-weight: 400;
  color: var(--main-text-color);
  font-size: 18px;
}
.chapters__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
}
.chapters__header button {
  display: flex;
  align-items: center;
  color: var(--secondary-text-color);
}
.chapters__header button i {
  transform: rotate(90deg);
  font-size: 20px;
}
.chapters__header button:hover {
  color: var(--main-purple-color);
}
.chapters__volume, .chapters__value {
  margin-right: 5px;
}
.chapters__name {
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 280px;
}
@media screen and (max-width: 600px) {
  .chapters__name {
    display: none;
  }
}
.chapters__add-date {
  margin-left: auto;
  color: var(--secondary-text-color);
}
.chapters__controls {
  margin-left: 10px;
  display: flex;
  align-items: center;
  font-size: 18px;
}
.chapters__controls i {
  margin-top: 2px;
}
.chapters__controls button {
  display: flex;
}
.chapters__seen {
  color: var(--main-text-color);
}
.chapters__like-btn {
  width: 50px;
  display: flex;
  align-items: center;
}
.chapters__like-btn span {
  font-size: 14px;
  margin-left: 3px;
}
.chapters__like-btn:hover i {
  color: var(--main-purple-color);
}

.chapter-search {
  margin-bottom: 10px;
}
.chapter-search input {
  overflow: visible;
}
.chapter-search input::-moz-placeholder {
  color: var(--main-text-color);
}
.chapter-search input::placeholder {
  color: var(--main-text-color);
}

body.isGuest .chapters__item:visited {
  background-color: var(--chapter-visited);
}

.rek {
  margin-bottom: 20px;
}
.rek__title {
  font-size: 13px;
  color: var(--secondary-text-color);
  text-align: center;
  margin-bottom: 5px;
}
.rek__title span {
  cursor: pointer;
  margin-left: 5px;
}
.rek--mt {
  margin-top: 10px;
}

.reader__top-a {
  max-width: 750px;
  margin: 0 auto;
}

.hot-chapters {
  margin-bottom: 25px;
}
.hot-chapters__title {
  font-weight: 400;
  margin-bottom: 15px;
  color: var(--main-text-color);
  font-size: 15px;
}
.hot-chapters__item {
  position: relative;
  width: 70px;
  height: 90px;
  flex-shrink: 0;
  margin-right: 15px;
  background-color: var(--medium-bg);
  display: block;
  border-radius: 10px;
}
.hot-chapters__item:hover {
  opacity: 0.8;
}
.hot-chapters__number {
  color: var(--main-text-color);
  font-size: 21px;
  font-weight: 500;
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.hot-chapters__chapter {
  color: var(--main-text-color);
  font-size: 14px;
  position: absolute;
  left: 50%;
  top: 66%;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.hot-chapters__wrapper {
  display: flex;
}
.hot-chapters__new {
  background: green;
  position: absolute;
  width: 11px;
  height: 11px;
  top: 0;
  right: 0;
  border-radius: 50%;
  border: 3px solid var(--indicator-border);
}

/* Скрыть стандартный чекбокс */
.custom-checkbox input {
  position: absolute;
  opacity: 0;
}

/* Стилизация контейнера для чекбокса */
.custom-checkbox {
  position: relative;
  padding-left: 30px; /* Размер контейнера, включая псевдоэлемент */
  cursor: pointer;
  display: inline-block;
  line-height: 20px;
}

/* Стилизация псевдоэлемента (галочки) */
.custom-checkbox .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background: var(--checkbox-color);
  border-radius: 4px;
}

/* Стилизация псевдоэлемента при активном чекбоксе */
.custom-checkbox input:checked + .checkmark {
  background-color: var(--purple-btn-bg);
}

/* Создание формы галочки */
.custom-checkbox .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Отображение формы галочки при активном чекбоксе */
.custom-checkbox input:checked + .checkmark:after {
  display: block;
}

/* Стилизация формы галочки */
.custom-checkbox .checkmark:after {
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.updates__item {
  display: flex;
  margin-bottom: 15px;
  align-items: center;
}
.updates__right {
  font-size: 14px;
  text-align: right;
  flex-shrink: 0;
  margin-left: 10px;
}
@media screen and (max-width: 600px) {
  .updates__right {
    text-align: unset;
    margin-left: 0;
    margin-top: 7px;
  }
}
.updates__left {
  max-width: 600px;
}
.updates__chapter {
  margin-bottom: 7px;
  font-weight: 400;
}
.updates__more-chapters {
  font-size: 14px;
  color: var(--secondary-text-color);
}
@media screen and (max-width: 600px) {
  .updates__more-chapters {
    display: none;
  }
}
.updates__img {
  width: 70px;
  height: 90px;
  margin-right: 10px;
  flex-shrink: 0;
}
.updates__img img {
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--main-border-radius);
}
.updates__img:hover {
  opacity: 0.7;
}
.updates__body {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
@media screen and (max-width: 600px) {
  .updates__body {
    flex-direction: column;
  }
}
.updates__name {
  font-weight: 400;
  font-size: 15px;
  margin-bottom: 6px;
  display: block;
}
.updates__type {
  margin-bottom: 7px;
}
@media screen and (max-width: 600px) {
  .updates__type {
    display: none;
  }
}
.updates__type, .updates__time {
  color: var(--secondary-text-color);
  font-size: 14px;
}
.updates--my-list {
  display: none;
}

.updates-page {
  padding: 24px 0 40px;
}
.updates-page__head {
  margin-bottom: 20px;
}
.updates-page__title {
  margin: 0 0 8px;
  font-size: 32px;
  line-height: 1.15;
  font-weight: 800;
  color: var(--title-color);
  letter-spacing: -0.02em;
}
.updates-page__subtitle {
  font-size: 15px;
  line-height: 1.5;
  color: var(--secondary-text-color);
}
.updates-page__pagination {
  margin-top: 24px;
}

.updates-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.updates-list__item {
  display: block;
  text-decoration: none;
  color: inherit;
}
.updates-list__item-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 88px;
  padding: 20px 22px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: var(--light-bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.updates-list__item:hover .updates-list__item-inner {
  transform: translateY(-2px);
  border-color: rgba(139, 0, 255, 0.18);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}
.updates-list__item-content {
  flex: 1;
  min-width: 0;
}
.updates-list__item-title {
  margin-bottom: 8px;
  font-size: 19px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--main-text-color);
  word-break: break-word;
}
.updates-list__item-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--secondary-text-color);
}
.updates-list__item-date {
  color: var(--secondary-text-color);
}
.updates-list__item-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--icons-color);
  opacity: 0.35;
}
.updates-list__item-action {
  color: var(--main-purple-color);
  font-weight: 600;
}
.updates-list__item-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 14px;
  background: var(--notification-not-read-color);
  color: var(--main-purple-color);
  transition: transform 0.2s ease, background 0.2s ease;
}
.updates-list__item:hover .updates-list__item-arrow {
  transform: translateX(2px);
  background: rgba(139, 0, 255, 0.12);
}

.update-article {
  padding: 24px 26px 28px;
  border: 1px solid var(--border-color);
  border-radius: 24px;
  background: var(--light-bg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.update-article__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-color);
}
.update-article__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--icons-color);
  font-size: 14px;
  font-weight: 600;
  transition: color 0.2s ease;
}
.update-article__back:hover {
  color: var(--main-purple-color);
}
.update-article__date {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--secondary-text-color);
  text-align: right;
}
.update-article__head {
  margin-bottom: 22px;
}
.update-article__title {
  margin: 0;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 800;
  color: var(--title-color);
  letter-spacing: -0.025em;
  word-break: break-word;
}
.update-article__content {
  font-size: 16px;
  line-height: 1.8;
  color: var(--main-text-color);
  word-break: break-word;
}

.content-styled h1,
.content-styled h2,
.content-styled h3,
.content-styled h4 {
  margin: 24px 0 14px;
  color: var(--title-color);
  line-height: 1.25;
  font-weight: 800;
}
.content-styled h1:first-child,
.content-styled h2:first-child,
.content-styled h3:first-child,
.content-styled h4:first-child {
  margin-top: 0;
}
.content-styled p {
  margin: 0 0 16px;
}
.content-styled p:last-child {
  margin-bottom: 0;
}
.content-styled strong,
.content-styled b {
  font-weight: 700;
  color: var(--title-color);
}
.content-styled em,
.content-styled i {
  font-style: italic;
}
.content-styled a {
  color: var(--main-purple-color);
  text-decoration: none;
}
.content-styled a:hover {
  text-decoration: underline;
}
.content-styled ul,
.content-styled ol {
  margin: 0 0 18px 22px;
  padding: 0;
}
.content-styled li {
  margin-bottom: 8px;
}
.content-styled blockquote {
  margin: 20px 0;
  padding: 16px 18px;
  border-left: 4px solid var(--main-purple-color);
  background: var(--medium-bg);
  border-radius: 0 var(--secondary-border-radius) var(--secondary-border-radius) 0;
  color: var(--main-text-color);
}
.content-styled hr {
  margin: 24px 0;
  border: 0;
  border-top: 1px solid var(--border-color);
}

.update-discussion {
  margin-top: 20px;
  padding: 22px 24px;
  border: 1px solid var(--border-color);
  border-radius: 24px;
  background: var(--light-bg);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.04);
}
.update-discussion__head {
  margin-bottom: 18px;
}
.update-discussion__title {
  margin-bottom: 6px;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 750;
  color: var(--title-color);
}
.update-discussion__subtitle {
  font-size: 14px;
  line-height: 1.5;
  color: var(--secondary-text-color);
}
.update-discussion__body {
  min-height: 120px;
  padding: 18px;
  border-radius: 18px;
  background: var(--medium-bg);
  border: 1px dashed var(--border-color);
}

@media (max-width: 768px) {
  .updates-page {
    padding: 18px 0 30px;
  }
  .updates-page__title {
    font-size: 26px;
  }
  .updates-page__subtitle {
    font-size: 14px;
  }
  .updates-list {
    gap: 10px;
  }
  .updates-list__item-inner {
    min-height: 76px;
    padding: 16px;
    border-radius: 18px;
  }
  .updates-list__item-title {
    font-size: 17px;
    margin-bottom: 6px;
  }
  .updates-list__item-meta {
    font-size: 12px;
  }
  .updates-list__item-arrow {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }
  .update-article {
    padding: 18px 18px 22px;
    border-radius: 20px;
  }
  .update-article__top {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 18px;
    padding-bottom: 14px;
  }
  .update-article__date {
    text-align: left;
  }
  .update-article__title {
    font-size: 26px;
  }
  .update-article__content {
    font-size: 15px;
    line-height: 1.75;
  }
  .update-discussion {
    padding: 18px;
    border-radius: 20px;
  }
  .update-discussion__title {
    font-size: 20px;
  }
  .update-discussion__subtitle {
    font-size: 13px;
  }
  .update-discussion__body {
    min-height: 100px;
    padding: 14px;
    border-radius: 16px;
  }
}
@media (max-width: 480px) {
  .updates-list__item-inner {
    gap: 12px;
    padding: 14px;
  }
  .updates-list__item-title {
    font-size: 16px;
  }
  .updates-list__item-arrow {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
  .update-article__title {
    font-size: 23px;
  }
}
.admin-updates-page,
.admin-update-form-page {
  padding: 24px 0 40px;
}

.admin-updates-page__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.admin-updates-page__title {
  margin: 0 0 6px;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 800;
  color: var(--title-color);
}
.admin-updates-page__subtitle {
  font-size: 14px;
  color: var(--secondary-text-color);
}
.admin-updates-page__create {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  background: var(--purple-btn-bg);
  color: var(--white-color);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}
.admin-updates-page__alert {
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--rating-bg-green);
  color: var(--green-color);
  border: 1px solid rgba(0, 153, 51, 0.12);
}
.admin-updates-page__pagination {
  margin-top: 20px;
}

.admin-updates-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.admin-updates-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: var(--light-bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}
.admin-updates-list__content {
  min-width: 0;
  flex: 1;
}
.admin-updates-list__title {
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--main-text-color);
  word-break: break-word;
}
.admin-updates-list__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--secondary-text-color);
}
.admin-updates-list__actions {
  flex-shrink: 0;
}
.admin-updates-list__edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  background: var(--notification-not-read-color);
  color: var(--main-purple-color);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}

.admin-update-form-page__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.admin-update-form-page__title {
  margin: 0;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 800;
  color: var(--title-color);
}
.admin-update-form-page__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--light-bg);
  color: var(--main-text-color);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.admin-update-form-page__errors {
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--rating-bg-red);
  border: 1px solid rgba(252, 54, 59, 0.12);
}
.admin-update-form-page__error {
  color: var(--red-color);
}
.admin-update-form-page__error + .admin-update-form-page__error {
  margin-top: 6px;
}

.admin-update-form {
  padding: 22px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: var(--light-bg);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.04);
}
.admin-update-form__group {
  margin-bottom: 18px;
}
.admin-update-form__group--checkbox {
  margin-top: -2px;
}
.admin-update-form__label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--title-color);
}
.admin-update-form__input, .admin-update-form__textarea {
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--light-bg);
  color: var(--main-text-color);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.admin-update-form__input:focus, .admin-update-form__textarea:focus {
  border-color: var(--main-purple-color);
  box-shadow: 0 0 0 3px rgba(139, 0, 255, 0.08);
}
.admin-update-form__input {
  height: 48px;
  padding: 0 14px;
}
.admin-update-form__textarea {
  min-height: 280px;
  padding: 14px;
  resize: vertical;
}
.admin-update-form__checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--main-text-color);
  cursor: pointer;
}
.admin-update-form__checkbox input {
  margin: 0;
}
.admin-update-form__bottom {
  margin-top: 22px;
}
.admin-update-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  background: var(--purple-btn-bg);
  color: var(--white-color);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.ck-editor__editable {
  min-height: 320px;
  color: var(--main-text-color);
}

@media (max-width: 768px) {
  .admin-updates-page,
  .admin-update-form-page {
    padding: 18px 0 30px;
  }
  .admin-updates-page__top {
    flex-direction: column;
  }
  .admin-updates-page__title {
    font-size: 26px;
  }
  .admin-updates-list__item {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
  }
  .admin-updates-list__actions {
    width: 100%;
  }
  .admin-updates-list__edit {
    width: 100%;
  }
  .admin-update-form-page__top {
    flex-direction: column;
  }
  .admin-update-form-page__title {
    font-size: 26px;
  }
  .admin-update-form {
    padding: 16px;
  }
}
.ck-editor__top .ck-toolbar {
  border-top-left-radius: 14px !important;
  border-top-right-radius: 14px !important;
  border-color: var(--border-color) !important;
}

.ck-editor__main .ck-content {
  min-height: 320px;
  padding: 16px !important;
  border-bottom-left-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
  border-color: var(--border-color) !important;
  color: var(--main-text-color) !important;
  font-size: 15px;
  line-height: 1.7;
}

.ck.ck-editor {
  width: 100%;
}

.update-popup {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  max-width: 520px;
  margin: auto;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.3s ease;
}
.update-popup--visible {
  opacity: 1;
  transform: translateY(0);
}
.update-popup__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-radius: var(--secondary-border-radius);
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
.update-popup__content {
  flex: 1;
  min-width: 0;
}
.update-popup__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--main-purple-color);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.update-popup__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--main-text-color);
  line-height: 1.35;
}
.update-popup__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.update-popup__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  background: var(--purple-btn-bg);
  color: var(--white-color);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.2s;
}
.update-popup__button:hover {
  opacity: 0.9;
}
.update-popup__close {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: var(--medium-bg);
  color: var(--main-text-color);
  cursor: pointer;
  font-size: 16px;
}

.update-toast {
  display: none;
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  width: 100%;
  max-width: 320px;
}

.update-toast__inner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--light-bg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.update-toast__content {
  min-width: 0;
  flex: 1;
}

.update-toast__label {
  margin-bottom: 4px;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  color: var(--main-purple-color);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.update-toast__title {
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--main-text-color);
  word-break: break-word;
}

.update-toast__link {
  color: inherit;
  text-decoration: none;
}
.update-toast__link:hover {
  color: var(--main-purple-color);
}

.update-toast__close {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: -2px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--icons-color);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.update-toast__close:hover {
  background: var(--medium-bg);
  color: var(--main-text-color);
}

@media (max-width: 640px) {
  .update-toast {
    right: 10px;
    left: 10px;
    bottom: 10px;
    max-width: none;
    width: auto;
  }
  .update-toast__inner {
    padding: 11px 11px 11px 12px;
    border-radius: 12px;
  }
  .update-toast__title {
    font-size: 12px;
  }
}
.products {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 -10px;
  padding-top: 25px;
}
.products__item {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 160px;
  flex: 1 0 auto;
  max-width: 43%;
  margin: 0 10px 20px 10px;
  border-radius: 8px;
  transition: transform 0.3s;
  cursor: pointer;
}
.products__item--new::after {
  position: absolute;
  content: "";
  bottom: 7px;
  right: 10px;
  width: 5px;
  height: 5px;
  background: var(--red-color);
  border-radius: 50%;
}
.products__item[data-product-type=profilestatus] {
  width: 70px;
}
.products__item--purchased .products__image::before {
  content: "";
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  right: 0;
  border-radius: var(--main-border-radius);
}
.products__item--purchased .products__image::after {
  content: "\e876";
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
  color: white;
  background-color: var(--green-color);
  font-size: 31px;
  padding: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.products__item:hover {
  transform: scale(1.1);
}
.products__header {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--border-color);
  padding: 12px;
  border-radius: 10px 10px 0 0;
}
.products__body {
  background: var(--medium-bg);
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 0 0 10px 10px;
}
.products__price {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: var(--secondary-text-color);
  font-weight: 600;
}
.products__discount {
  position: relative;
  margin-left: 5px;
  font-size: 12px;
  color: var(--secondary-text-color);
  font-weight: 400;
}
.products__discount::after {
  content: "";
  position: absolute;
  left: 0;
  top: 45%;
  width: 100%;
  height: 1px;
  background: var(--red-color);
}
.products__image {
  width: 100%;
  position: relative;
}
.products__image img {
  border-radius: var(--main-border-radius);
}
.products__type {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--secondary-text-color);
  text-align: center;
  margin-bottom: 8px;
}
.products__skin {
  width: 100%;
  height: 80px;
  border-radius: 10px 10px 0 0;
}

[data-product-type=profileskin] .products__header {
  padding: 0;
}

.diamond {
  width: 14px;
  height: 14px;
  display: inline-block;
  background: url('data:image/svg+xml,<svg width="64px" height="64px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--emojione" preserveAspectRatio="xMidYMid meet"><path fill="%239450e0" d="M41 4H23L2 20.1L32 60l30-39.9z"></path><g fill="%23c28fef"><path d="M32 60l12.5-39.9H18.8z"></path><path d="M9.5 9.5L2 20.1h16.8L23 4z"></path><path d="M54.5 9.5L41 4l3.5 16.1H62z"></path></g></svg>');
  background-repeat: no-repeat;
  background-size: cover;
  margin-right: 5px;
}

.products-placeholder {
  display: flex;
  flex-direction: column;
  width: 160px;
  flex: 1 0 auto;
  max-width: 43%;
  margin: 0 10px 20px;
  position: relative;
}
.products-placeholder--profilestatus {
  width: 70px;
}

.total-balance {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 22px;
}
.total-balance__link span {
  font-weight: 400;
}
.total-balance div:first-of-type {
  margin-right: 5px;
}
.total-balance div:last-of-type {
  font-weight: 400;
  color: var(--secondary-text-color);
  margin-left: auto;
  cursor: pointer;
}

.modal--cover-example .modal__content {
  width: 90vw;
  max-width: 1400px;
}

.modal-product {
  margin-top: 10px;
}
.modal-product__wrapper {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}
.modal-product__like {
  margin-right: auto;
  margin-left: 12px;
  height: 39px;
  background: none !important;
}
.modal-product__info-wrapper {
  display: flex;
}
.modal-product__icon {
  width: 16px;
  cursor: pointer;
  padding: 0 5px;
  box-sizing: content-box;
}
.modal-product__icon img {
  -o-object-fit: contain;
     object-fit: contain;
}
.modal-product__not-enough {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-bottom: 15px;
  color: var(--secondary-text-color);
}
.modal-product__not-enough .diamond {
  margin-right: 0;
  margin-left: 3px;
}
.modal-product__body {
  background: var(--medium-bg);
  border-radius: var(--main-border-radius);
  padding: 10px 15px;
  margin-bottom: 15px;
}
.modal-product__image {
  width: 35px;
  height: 35px;
  margin-right: 10px;
  position: relative;
}
.modal-product__image img {
  border-radius: 3px;
}
.modal-product__name {
  font-weight: 500;
  color: var(--main-text-color);
  font-size: 14px;
  margin-bottom: 2px;
}
.modal-product__time {
  font-size: 13px;
  color: var(--secondary-text-color);
}
.modal-product__example {
  font-size: 15px;
  color: var(--main-text-color);
}
.modal-product__footer {
  display: flex;
  justify-content: space-between;
}
.modal-product__price {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 14px;
}

.product-sticker__list {
  display: flex;
  flex-wrap: wrap;
  max-height: 300px;
  overflow: auto;
  justify-content: space-between;
}
.product-sticker__header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.product-sticker__preview {
  width: 100px;
  height: 100px;
  margin-right: 10px;
}
.product-sticker__preview img {
  border-radius: 8px;
}
.product-sticker__image {
  width: 21%;
  margin-bottom: 16px;
}
.product-sticker__image--placeholder {
  width: 21%;
  margin-bottom: 16px;
}
.product-sticker__image tgs-player {
  width: 100%;
  height: 100%;
}
.product-sticker__name {
  font-size: 16px;
  font-weight: 500;
  color: var(--main-text-color);
  margin-bottom: 10px;
}
.product-sticker__type {
  font-size: 14px;
  color: var(--secondary-text-color);
}

.products-show-avatar-wrapper {
  margin-top: 25px;
}

.products__item[data-product-type=frame] .products__image {
  margin: 12px;
}
.products__item[data-product-type=frame] .products__image--avatar {
  visibility: hidden;
}
.products__item[data-product-type=frame] .products__image--frame {
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(1.18);
  border-radius: 0 !important;
  width: 100%;
  height: 100%;
}

.products--show-avatar .products__image--avatar {
  visibility: visible !important;
}

body.isGuest .products__image--frame {
  position: relative !important;
  transform: scale(1) !important;
}

.dust-buy {
  margin: 14px 0 10px;
}

.dust-buy__btn {
  position: relative;
  width: 100%;
  min-height: 58px;
  border: 0;
  border-radius: 16px;
  padding: 12px 14px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #6d3bff 0%, #8a36ff 45%, #751baa 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transform: translateZ(0);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.dust-buy__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(109, 59, 255, 0.32);
  filter: saturate(1.05);
}

.dust-buy__btn:active {
  transform: translateY(0px) scale(0.99);
  box-shadow: 0 8px 18px rgba(109, 59, 255, 0.22);
}

.dust-buy__btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}

/* “сияние” */
.dust-buy__shine {
  position: absolute;
  inset: -40% -60%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 55%);
  transform: rotate(12deg);
  pointer-events: none;
}

/* бегущий блик */
.dust-buy__btn::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -60%;
  width: 40%;
  height: 180%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
  transform: rotate(18deg);
  animation: dust-buy-sheen 3.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes dust-buy-sheen {
  0% {
    left: -60%;
    opacity: 0;
  }
  18% {
    opacity: 0.9;
  }
  45% {
    left: 120%;
    opacity: 0;
  }
  100% {
    left: 120%;
    opacity: 0;
  }
}
.dust-buy__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.dust-buy__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  font-size: 16px;
}

.dust-buy__text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  min-width: 0;
}

.dust-buy__title {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.2px;
}

.dust-buy__subtitle {
  font-size: 12.5px;
  opacity: 0.92;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dust-buy__gem {
  opacity: 0.95;
}

.dust-buy__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex: 0 0 auto;
}

.dust-buy__badge {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.dust-buy__timer {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.3px;
}

.dust-buy__hint {
  margin-top: 8px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.55);
}

/* состояние “всё, время вышло” */
.dust-buy--ended .dust-buy__btn {
  background: linear-gradient(135deg, #9a9a9a 0%, #7b7b7b 100%);
  box-shadow: none;
  cursor: not-allowed;
  filter: grayscale(0.2);
}

.dust-buy--ended .dust-buy__btn::after {
  display: none;
}

/* ===== pack description block ===== */
.lootbox__description-text {
  background: var(--grey-background);
  border: 1px solid var(--border-color);
  border-radius: var(--secondary-border-radius);
  padding: 16px 18px;
  margin-top: 10px;
  color: var(--secondary-text-color);
  line-height: 1.4;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.06);
}

/* аккуратный акцент "только 1" */
.lootbox__description-text > span,
.lootbox__description-text span:not(.lootbox__balance):not(.lootbox__dust-balance) {
  color: var(--main-purple-color);
  font-weight: 700;
}

/* ===== stats look (Алмазов / Пыль) ===== */
/* "Алмазов: {число}" — превращаем в строку-стат */
.lootbox__description-text .lootbox__balance {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  margin-left: 6px;
  border-radius: 999px;
  border: 1px solid rgba(139, 0, 255, 0.22);
  background: rgba(139, 0, 255, 0.07);
  color: var(--main-purple-color);
  font-weight: 800;
  letter-spacing: 0.2px;
}

/* иконка алмаза перед числом */
.lootbox__description-text .lootbox__balance::before {
  content: "";
  width: 16px;
  height: 16px;
  display: inline-block;
  background-image: url("/img/icons/diamond.svg");
  background-size: contain;
  background-repeat: no-repeat;
  filter: var(--invert);
  opacity: 0.9;
}

/* строка с пылью: выравнивание и расстояния */
.lootbox__description-text .align-center {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* число пыли — такой же "пилл" */
.lootbox__description-text .lootbox__dust-balance {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(139, 0, 255, 0.18);
  background: rgba(139, 0, 255, 0.06);
  color: var(--main-purple-color);
  font-weight: 800;
  letter-spacing: 0.2px;
}

/* иконка пыли */
.lootbox__description-text .lootbox__dust-balance::before {
  content: "";
  width: 16px;
  height: 16px;
  display: inline-block;
  background-image: url("/img/icons/dust.svg"); /* если нет — поставь любую */
  background-size: contain;
  background-repeat: no-repeat;
  filter: var(--invert);
  opacity: 0.9;
}

/* иконка подсказки — в тему, без лишнего шума */
.lootbox__description-text .lootbox__prize-desc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(139, 0, 255, 0.22);
  background: rgba(139, 0, 255, 0.06);
  color: var(--main-purple-color);
  cursor: help;
}

.lootbox__description-text .lootbox__prize-desc .icon {
  color: inherit;
  font-size: 14px;
}

/* чуть компактнее на мобилке */
@media (max-width: 480px) {
  .lootbox__description-text {
    padding: 14px 14px;
    border-radius: 12px;
  }
  .lootbox__description-text .align-center {
    gap: 6px;
  }
}
.pack-help {
  background: var(--light-bg);
  border-radius: var(--secondary-border-radius);
  padding: 16px 18px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.05);
}

/* title */
.pack-help__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--title-color);
  margin-bottom: 10px;
}

.pack-help__accent {
  color: var(--main-purple-color);
}

/* text */
.pack-help__text {
  font-size: 15px;
  line-height: 1.45;
  color: var(--secondary-text-color);
  margin-bottom: 14px;
}

.pack-help__mark {
  font-weight: 700;
  color: var(--main-text-color);
}

.pack-help__mark--accent {
  color: var(--main-purple-color);
}

/* stats container */
.pack-help__stats {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

/* single stat */
.pack-help__stat {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* icon wrapper */
.pack-help__stat-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* твой diamond уже готов */
.pack-help__stat-icon .diamond {
  transform: scale(0.85);
}

/* dust icon — создаём из CSS */
.pack-help__stat-icon--dust {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--secondary-purple-color), var(--main-purple-color));
  box-shadow: 0 0 0 2px rgba(139, 0, 255, 0.12), 0 0 6px rgba(139, 0, 255, 0.35);
}

/* labels */
.pack-help__stat-label {
  font-size: 15px;
  color: var(--secondary-text-color);
}

/* values */
.pack-help__stat-value {
  font-weight: 800;
  font-size: 16px;
  color: var(--main-purple-color);
}

/* hint */
.pack-help__hint {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  color: var(--icons-color);
  cursor: help;
  transition: 0.15s;
}

.pack-help__hint:hover {
  color: var(--main-purple-color);
  border-color: var(--main-purple-color);
}

.lootbox-bonus {
  background: var(--light-bg);
  border-radius: var(--secondary-border-radius);
  padding: 16px 18px;
  margin-top: 14px;
}

/* title */
.lootbox-bonus__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--title-color);
  margin-bottom: 12px;
}

/* list */
.lootbox-bonus__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* item */
.lootbox-bonus__item {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* rank badge */
.lootbox-bonus__rank {
  min-width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-weight: 800;
  font-size: 13px;
  color: white;
}

/* rank colors */
.lootbox-bonus__rank--s {
  background: linear-gradient(135deg, #ff5c4d, #eb469f);
}

.lootbox-bonus__rank--x {
  background: linear-gradient(135deg, #3670a3, #0d2635);
}

.lootbox-bonus__rank--xl {
  background: linear-gradient(135deg, #772ce8, #8b00ff);
}

/* text */
.lootbox-bonus__text {
  color: var(--secondary-text-color);
  font-size: 15px;
}

/* number */
.lootbox-bonus__value {
  font-weight: 800;
  color: var(--main-purple-color);
}

/* dust info */
.lootbox-bonus__dust {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
  color: var(--secondary-text-color);
  font-size: 15px;
}

.lootbox-bonus__dust-highlight {
  color: var(--main-purple-color);
  font-weight: 700;
}

.last-read {
  margin-bottom: 30px;
}
.last-read__item {
  display: flex;
  padding: 12px 15px;
  background: var(--light-bg);
  margin-right: 15px;
  border-radius: var(--main-border-radius);
  width: 310px;
  transition: color 0.3s;
}
.last-read__item:hover {
  background: var(--medium-bg);
}
.last-read__image {
  width: 70px;
  height: 90px;
  flex-shrink: 0;
  margin-right: 15px;
  background-color: var(--light-bg);
}
.last-read__image img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: top center;
  object-position: top center;
  border-radius: var(--main-border-radius);
}
.last-read__body {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.last-read__name {
  margin-top: 10px;
  font-weight: 400;
  color: var(--main-text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.last-read__chapters {
  margin-top: auto;
  color: var(--secondary-text-color);
  font-size: 14px;
  margin-bottom: 7px;
}
.last-read__bar {
  height: 6px;
  background-color: var(--medium-bg);
  position: relative;
  border-radius: var(--main-border-radius);
  width: 100%;
}
.last-read__bar--fill {
  background: var(--purple-btn-bg);
  height: 6px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--main-border-radius);
}

.last-read-placeholder {
  height: 114px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.payment {
  display: flex;
  flex-direction: column;
}

.payment__title {
  text-align: center;
  font-size: 2.5em;
  margin-bottom: 30px;
}

.payment__desc {
  margin-bottom: 30px;
  text-align: center;
}
.payment__desc span {
  display: block;
  margin-top: 10px;
  color: var(--main-purple-color);
}

.payment__variants {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.payment__variant {
  width: 33%;
  position: relative;
  margin-bottom: 20px;
}
.payment__variant-bonus {
  font-size: 12px;
  color: #dd7500;
  margin-top: 8px;
  font-weight: 500;
  display: block;
}
.payment__variant-title {
  margin-bottom: 5px;
}
.payment__variant input {
  display: none;
}

.payment__variant label {
  display: block;
  font-size: 1.1em;
  color: var(--main-text-color);
  border: 1px solid var(--border-color);
  padding: 25px 20px;
  cursor: pointer;
  border-radius: var(--main-border-radius);
}
.payment__variant label:hover {
  background: var(--light-bg);
}

.payment__variant-title {
  font-size: 1.1em;
  margin-bottom: 5px;
}

.payment__variant-price span,
.payment__variant-title span {
  font-weight: 500;
}

.payment__pay-btn {
  width: auto;
  margin: 0 auto;
}

.payment__variants input[type=radio]:checked + label {
  background-color: var(--main-purple-color);
  color: white;
}

.payment__form {
  display: flex;
  flex-direction: column;
  margin-bottom: 50px;
}

.payment__status {
  margin-bottom: 20px;
  font-weight: 500;
}

@media only screen and (max-width: 950px) {
  .payment__variants {
    flex-direction: column;
    align-items: center;
  }
  .payment__variant {
    width: 100%;
    margin-bottom: 10px;
  }
}
.payment__variant-discount {
  position: absolute;
  right: 10px;
  bottom: 4px;
  font-size: 11px;
}

.leaderboard-top__list {
  display: flex;
  justify-content: center;
}
.leaderboard-top__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 40px;
}
.leaderboard-top__item:nth-of-type(1) .leaderboard-top__image > img {
  border-color: #a7a7aa;
}
.leaderboard-top__item:nth-of-type(1) .leaderboard-top__icon {
  background: #a7a7aa;
  bottom: -9px;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 50%;
  padding: 3px;
}
.leaderboard-top__item:nth-of-type(2) .leaderboard-top__image {
  width: 130px;
  height: 130px;
}
@media screen and (max-width: 400px) {
  .leaderboard-top__item:nth-of-type(2) .leaderboard-top__image {
    width: 90px;
    height: 90px;
  }
}
.leaderboard-top__item:nth-of-type(2) .leaderboard-top__image > img {
  border-color: #ffb637;
}
.leaderboard-top__item:nth-of-type(2) .leaderboard-top__icon {
  background: #ffb637;
  bottom: -9px;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 50%;
  padding: 3px;
}
.leaderboard-top__item:nth-of-type(3) .leaderboard-top__image > img {
  border-color: #b0854f;
}
.leaderboard-top__item:nth-of-type(3) .leaderboard-top__icon {
  background: #b0854f;
  bottom: -9px;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 50%;
  padding: 3px;
}
.leaderboard-top__item:last-of-type {
  margin-right: 0;
}
.leaderboard-top__name {
  margin: 5px 0;
  font-size: 15px;
  color: var(--main-text-color);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 80px;
}
.leaderboard-top__image {
  position: relative;
  width: 75px;
  height: 75px;
  margin-bottom: 10px;
}
@media screen and (max-width: 400px) {
  .leaderboard-top__image {
    width: 60px;
    height: 60px;
  }
}
.leaderboard-top__image > img {
  border-radius: 50%;
  border: 3px solid;
}
.leaderboard-top__score {
  font-size: 13px;
  font-weight: 600;
  color: var(--secondary-text-color);
  display: flex;
  align-items: center;
}
.leaderboard-top__score i {
  font-size: 21px;
  margin-left: 4px;
}
.leaderboard-top__icon {
  position: absolute;
  width: 28px;
}

.leaderboard {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 800px;
  width: 100%;
  margin: 20px auto;
}
.leaderboard--animators {
  margin-top: 10px !important;
}
.leaderboard__list {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 15px;
}
.leaderboard__item {
  display: flex;
  align-items: center;
  background: var(--light-bg);
  margin-top: 10px;
  border-radius: 10px;
  padding: 10px;
  width: 100%;
}
.leaderboard__image {
  width: 35px;
  height: 35px;
  margin: 0 15px;
}
.leaderboard__image img {
  border-radius: 6px;
}
.leaderboard__name {
  font-weight: 500;
}
.leaderboard_number {
  font-size: 14px;
}
.leaderboard__score {
  margin-left: auto;
  color: var(--secondary-text-color);
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.leaderboard__score i {
  font-size: 21px;
  margin-left: 4px;
  margin-top: 2px;
}

.user-quest {
  display: flex;
  justify-content: space-between;
  padding-bottom: 15px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border-color);
}
@media screen and (max-width: 700px) {
  .user-quest {
    flex-direction: column;
  }
}
.user-quest__totally {
  display: flex;
  justify-content: space-between;
  padding-bottom: 15px;
  margin-bottom: 22px;
}
@media screen and (max-width: 350px) {
  .user-quest__totally {
    flex-direction: column;
  }
}
.user-quest__totally-item {
  width: 49%;
  background: var(--medium-bg);
  border-radius: var(--main-border-radius);
  padding: 15px;
}
@media screen and (max-width: 350px) {
  .user-quest__totally-item {
    width: 100%;
    margin-bottom: 15px;
    padding: 15px 10px;
  }
}
.user-quest__totally-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.user-quest__totally-title--plus {
  color: var(--green-color);
}
.user-quest__totally-title--minus {
  color: var(--red-color);
}
.user-quest__totally-text {
  font-size: 14px;
}
@media screen and (max-width: 359px) {
  .user-quest__totally-text {
    font-size: 13px;
  }
}
.user-quest__wrapper {
  width: 100%;
}
.user-quest__icon {
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 5px;
  border-radius: 5px;
  font-size: 20px;
  width: 34px;
  height: 34px;
  color: white;
  flex-shrink: 0;
}
.user-quest__text {
  color: var(--secondary-text-color);
  font-size: 14px;
  margin-bottom: 10px;
}
.user-quest__bar {
  height: 6px;
  background-color: var(--medium-bg);
  position: relative;
  border-radius: var(--main-border-radius);
  width: 100%;
}
.user-quest__bar--fill {
  background: var(--purple-btn-bg);
  height: 6px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--main-border-radius);
}
.user-quest__item {
  display: flex;
  background: var(--medium-bg);
  padding: 10px;
  border-radius: var(--main-border-radius);
  width: 32.5%;
}
@media screen and (max-width: 700px) {
  .user-quest__item {
    width: 100%;
    margin-bottom: 13px;
  }
}

.user-transactions__item {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 5px;
}
.user-transactions__info {
  display: flex;
  margin-bottom: 7px;
}
.user-transactions__amount {
  margin-right: 15px;
  font-weight: 600;
  width: 50px;
  flex-shrink: 0;
}
.user-transactions__amount--plus {
  color: var(--green-color);
}
.user-transactions__amount--minus {
  color: var(--red-color);
}
.user-transactions__message {
  margin-right: 15px;
}
.user-transactions__date {
  margin-left: auto;
  color: var(--secondary-text-color);
  font-size: 13px;
}

.daily-rewards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
  gap: 15px;
}
.daily-rewards-item {
  margin-bottom: 20px;
  cursor: pointer;
}
.daily-rewards-item-day {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 5px;
}
.daily-rewards-item-wrapper {
  background-color: var(--medium-bg);
  border-radius: 10px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.daily-rewards-item-image {
  background-repeat: no-repeat;
  width: 83px;
  height: 81px;
  background-position: center;
  background-size: cover;
  padding: 10px;
  background-size: 70%;
}
.daily-rewards-item-image--Scroll_e {
  background-image: url("/assets/cards/scrolls/E.png");
}
.daily-rewards-item-image--Scroll_d {
  background-image: url("/assets/cards/scrolls/D.png");
}
.daily-rewards-item-image--Scroll_c {
  background-image: url("/assets/cards/scrolls/C.png");
}
.daily-rewards-item-image--Scroll_b {
  background-image: url("/assets/cards/scrolls/B.png");
}
.daily-rewards-item-image--Scroll_g {
  background-image: url("/assets/cards/scrolls/G.png");
}
.daily-rewards-item-image--Scroll_p {
  background-image: url("/assets/cards/scrolls/P.png");
}
.daily-rewards-item-image--Scroll_a {
  background-image: url("/assets/cards/scrolls/A.png");
}
.daily-rewards-item-image--Scroll_s {
  background-image: url("/assets/cards/scrolls/S.png");
}
.daily-rewards-item-image--Coins {
  background-image: url('data:image/svg+xml,<svg width="64px" height="64px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--emojione" preserveAspectRatio="xMidYMid meet"><path fill="%239450e0" d="M41 4H23L2 20.1L32 60l30-39.9z"></path><g fill="%23c28fef"><path d="M32 60l12.5-39.9H18.8z"></path><path d="M9.5 9.5L2 20.1h16.8L23 4z"></path><path d="M54.5 9.5L41 4l3.5 16.1H62z"></path></g></svg>');
}
.daily-rewards-item-image--Coins::after {
  content: "50";
  position: absolute;
  bottom: 15px;
  right: 21px;
  background: var(--light-bg);
  padding: 2px;
  border-radius: 6px;
  border: 1px sol var(--border-color);
  font-size: 12px;
  font-weight: 500;
}
.daily-rewards-item-image--Card_s {
  background-image: url("/assets/card_pack.png");
}
.daily-rewards-item-image--Card_s::after {
  content: "S";
  position: absolute;
  bottom: 15px;
  right: 11px;
  background: #f54972;
  padding: 2px 4px;
  color: white;
  border-radius: 6px;
  border: 1px sol var(--border-color);
  font-size: 12px;
  font-weight: 700;
}
.daily-rewards-item-image--Card_a {
  background-image: url("/assets/card_pack.png");
}
.daily-rewards-item-image--Card_a::after {
  content: "A";
  position: absolute;
  bottom: 15px;
  right: 11px;
  background: #9b0a05;
  padding: 2px 4px;
  color: white;
  border-radius: 6px;
  border: 1px sol var(--border-color);
  font-size: 12px;
  font-weight: 700;
}
.daily-rewards-item-image--Card_p {
  background-image: url("/assets/card_pack.png");
}
.daily-rewards-item-image--Card_p::after {
  content: "P";
  position: absolute;
  bottom: 15px;
  right: 11px;
  background: #005db6;
  padding: 2px 4px;
  color: white;
  border-radius: 6px;
  border: 1px sol var(--border-color);
  font-size: 12px;
  font-weight: 700;
}
.daily-rewards-item-image--Card_g {
  background-image: url("/assets/card_pack.png");
}
.daily-rewards-item-image--Card_g::after {
  content: "G";
  position: absolute;
  bottom: 15px;
  right: 11px;
  background: #004e2f;
  padding: 2px 4px;
  color: white;
  border-radius: 6px;
  border: 1px sol var(--border-color);
  font-size: 12px;
  font-weight: 700;
}
.daily-rewards-item-image--Card_b {
  background-image: url("/assets/card_pack.png");
}
.daily-rewards-item-image--Card_b::after {
  content: "B";
  position: absolute;
  bottom: 15px;
  right: 11px;
  background: #eb5d9b;
  padding: 2px 4px;
  color: white;
  border-radius: 6px;
  border: 1px sol var(--border-color);
  font-size: 12px;
  font-weight: 700;
}
.daily-rewards-item-image--Card_c {
  background-image: url("/assets/card_pack.png");
}
.daily-rewards-item-image--Card_c::after {
  content: "C";
  position: absolute;
  bottom: 15px;
  right: 11px;
  background: #df9300;
  padding: 2px 4px;
  color: white;
  border-radius: 6px;
  border: 1px sol var(--border-color);
  font-size: 12px;
  font-weight: 700;
}
.daily-rewards-item-image--Card_d {
  background-image: url("/assets/card_pack.png");
}
.daily-rewards-item-image--Card_d::after {
  content: "D";
  position: absolute;
  bottom: 15px;
  right: 11px;
  background: #718b99;
  padding: 2px 4px;
  color: white;
  border-radius: 6px;
  border: 1px sol var(--border-color);
  font-size: 12px;
  font-weight: 700;
}
.daily-rewards-item-image--Card_e {
  background-image: url("/assets/card_pack.png");
}
.daily-rewards-item-image--Card_e::after {
  content: "E";
  position: absolute;
  bottom: 15px;
  right: 11px;
  background: #613324;
  padding: 2px 4px;
  color: white;
  border-radius: 6px;
  border: 1px sol var(--border-color);
  font-size: 12px;
  font-weight: 700;
}
.daily-rewards-item-exp {
  text-align: center;
  height: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  cursor: pointer;
}
.daily-rewards-item-exp--completed span {
  background: var(--green-color) !important;
  color: white !important;
}
.daily-rewards-item-exp--active span {
  background: var(--purple-btn-bg) !important;
  color: white !important;
}
.daily-rewards-item-exp span {
  transition: all 0.2s;
  background: var(--dark-grey-bg);
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 13px;
  color: var(--main-text-color);
  font-weight: 500;
  width: 100%;
  margin-top: 25px;
}

/* Базу оставляем, но делаем безопасные переносы */
.balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: var(--medium-bg);
  margin-bottom: 25px;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(23, 24, 35, 0.04);
}

/* Левая часть */
.balance__info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0; /* важно для обрезки/переносов в flex */
}

.balance__diamond {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}

.balance__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.balance__label {
  font-size: 12px;
  line-height: 1;
  color: #6B7280;
  margin-bottom: 4px;
}

.balance__value {
  font-size: 22px;
  font-weight: 800;
  color: var(--purple-btn-bg);
  line-height: 1.1;
  white-space: nowrap; /* число не ломаем */
}

.balance__sub {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.2;
  color: #6B7280;
  display: flex;
  gap: 4px;
  flex-wrap: wrap; /* чтобы на узких экранах красиво переносилось */
}

.balance__sub-value {
  font-weight: 600;
  color: #8B5CF6;
}

/* Правая часть */
.balance__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

/* --- Мобилка --- */
@media (max-width: 520px) {
  .balance {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px 14px;
  }
  .balance__info {
    width: 100%;
  }
  .balance__actions {
    width: 100%;
  }
  .balance__btn {
    width: 100%;
    text-align: center;
    padding-left: 14px;
    padding-right: 14px;
  }
  .balance__value {
    font-size: 20px; /* чуть компактнее */
  }
}
.pay {
  /* текст внутри суммари */
  /* кнопка справа */
}
.pay__wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 22px 50px;
}
@media (max-width: 450px) {
  .pay__wrap {
    padding: 0 10px 40px;
  }
}
.pay__title {
  font-weight: 900;
  font-size: 40px;
  margin: 0 0 8px;
}
.pay__lead {
  margin: 0 0 18px;
  color: var(--muted-color, #9aa2b2);
}
.pay__status {
  margin: 12px 0 16px;
}
.pay__notice {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--light-bg);
  padding: 12px 14px;
  border-radius: 14px;
  color: var(--secondary-text-color);
  margin: 8px 0 18px;
}
.pay__form {
  margin-top: 6px;
}
.pay__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 820px) {
  .pay__grid {
    grid-template-columns: 1fr;
  }
}
.pay__card {
  position: relative;
  cursor: pointer;
}
.pay__radio {
  display: none;
}
.pay__label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 120px;
  cursor: pointer;
  padding: 18px 16px;
  border-radius: 16px;
  border: 1px solid rgba(124, 58, 237, 0.18);
  background: var(--light-bg);
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
@media (max-width: 450px) {
  .pay__label {
    min-height: 105px;
  }
}
.pay__label:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.1);
}
.pay__radio:checked + .pay__label {
  border-color: transparent;
  background: var(--purple-btn-bg);
  color: white;
  box-shadow: 0 12px 32px rgba(124, 58, 237, 0.28);
}
.pay__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  -moz-column-gap: 12px;
       column-gap: 12px;
}
.pay__amount {
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 8px;
  /* уменьшить размер суммы на мобильных */
}
@media (max-width: 450px) {
  .pay__amount {
    font-size: 22px;
    line-height: 1.2;
  }
}
@media (max-width: 380px) {
  .pay__amount {
    font-size: 19px;
  }
}
.pay__price {
  font-weight: 600;
  color: var(--muted-color, #9aa2b2);
  font-size: 18px;
  white-space: nowrap;
}
@media (max-width: 450px) {
  .pay__price {
    font-size: 15px;
  }
}
.pay__badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.pay__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid rgba(124, 58, 237, 0.22);
  background: rgba(124, 58, 237, 0.12);
}
.pay__badge--x2 {
  border-color: rgba(255, 81, 117, 0.25);
  background: linear-gradient(90deg, rgba(255, 81, 117, 0.16), rgba(124, 58, 237, 0.16));
}
.pay__badge--discount {
  background: rgba(124, 58, 237, 0.1);
}
.pay__badge--best {
  color: #fff;
  background: var(--purple-btn-bg);
  border-color: transparent;
}
.pay__submit {
  margin-top: 14px;
}
.pay__bar {
  bottom: 0;
  background: var(--light-bg);
  border-top: 1px solid var(--border-color);
  margin-top: 24px;
  border-radius: var(--main-border-radius);
}
.pay__bar-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 650px) {
  .pay__bar-inner {
    flex-direction: column;
  }
  .pay__bar-inner button {
    width: 100%;
  }
}
.pay__summary {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: 0.2px;
}
@media (max-width: 450px) {
  .pay__summary {
    font-size: 24px;
  }
}
.pay__summary small {
  display: block;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--muted-color, #9aa2b2);
}
@media (max-width: 450px) {
  .pay__summary small {
    font-size: 14px;
  }
}
.pay__bar-btn {
  border-radius: 18px;
  padding: 12px 20px;
  font-weight: 800;
  background: linear-gradient(90deg, #7c3aed, #22d3ee);
  color: #fff;
  box-shadow: 0 10px 28px rgba(124, 58, 237, 0.45);
}

.pay-top__title {
  font-size: 26px;
  font-weight: 900;
  margin: 26px 0 12px;
}
.pay-top__podium {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 14px;
  align-items: end;
  margin-bottom: 40px;
}
@media (max-width: 800px) {
  .pay-top__podium {
    grid-template-columns: 1fr;
  }
}
.pay-top__card {
  position: relative;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  gap: 12px;
}
.pay-top__card--gold {
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.14), transparent), rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 44px rgba(255, 215, 0, 0.18);
}
.pay-top__card--silver {
  background: linear-gradient(180deg, rgba(180, 200, 220, 0.14), transparent), rgba(255, 255, 255, 0.06);
}
.pay-top__card--bronze {
  background: linear-gradient(180deg, rgba(205, 127, 50, 0.14), transparent), rgba(255, 255, 255, 0.06);
}
.pay-top__ava {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.pay-top__ava img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.pay-top__who {
  display: flex;
  flex-direction: column;
}
.pay-top__name {
  font-weight: 900;
}
.pay-top__tag {
  font-size: 12px;
  color: var(--muted-color, #9aa2b2);
}
.pay-top__medal {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #111;
  background: #ffd700;
}
.pay-top__card--silver .pay-top__medal {
  background: #c0c0c0;
}
.pay-top__card--bronze .pay-top__medal {
  background: #cd7f32;
}
.pay-top__list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 700px) {
  .pay-top__list {
    grid-template-columns: 1fr;
  }
}
.pay-top__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}
.pay-top__pos {
  min-width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #0b0d12;
  background: var(--purple-btn-bg);
  color: white;
}
.pay-top__miniava {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.pay-top__miniava img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.pay-top__rowname {
  font-weight: 700;
}

.pay-stars {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 20px;
  text-decoration: none;
  color: var(--main-text-color);
  overflow: hidden;
  background: var(--light-bg);
  margin-bottom: 18px;
  transform: translateZ(0);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.pay-stars:hover {
  transform: translateY(-1px);
  border-color: rgba(124, 77, 255, 0.32);
  box-shadow: 0 16px 34px rgba(124, 77, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}
.pay-stars:hover .pay-stars__btn-arrow {
  transform: translateX(4px);
}
.pay-stars__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #2AABEE, #7C4DFF);
  box-shadow: 0 10px 22px rgba(42, 171, 238, 0.2);
  position: relative;
  isolation: isolate;
}
.pay-stars__icon::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.45), transparent 55%);
  transform: rotate(12deg);
  z-index: -1;
}
.pay-stars__icon-star {
  font-size: 26px;
  color: #fff;
  line-height: 1;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.2));
  animation: pay-stars-pulse 2.8s ease-in-out infinite;
}
@keyframes pay-stars-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.92;
  }
  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}
.pay-stars__body {
  min-width: 0;
}
.pay-stars__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.pay-stars__badge {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(124, 77, 255, 0.12);
  color: #7C4DFF;
  white-space: nowrap;
}
.pay-stars__title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1.15;
}
.pay-stars__text {
  font-size: 14px;
  line-height: 1.45;
  color: var(--secondary-text-color);
  margin-bottom: 10px;
}
.pay-stars__footer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pay-stars__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2AABEE, #7C4DFF);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(124, 77, 255, 0.18);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.pay-stars__btn-arrow {
  transition: transform 0.18s ease;
}
.pay-stars__hint {
  font-size: 12px;
  color: var(--secondary-text-color);
  white-space: nowrap;
}
.pay-stars__shine {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: pay-stars-shine 7s ease-in-out infinite;
  opacity: 0.85;
}
@keyframes pay-stars-shine {
  0%, 65% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}
@media (max-width: 600px) {
  .pay-stars {
    grid-template-columns: 48px 1fr;
    padding: 14px 14px;
    border-radius: 18px;
  }
  .pay-stars__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }
  .pay-stars__title {
    font-size: 15px;
  }
  .pay-stars__text {
    font-size: 13px;
    margin-bottom: 9px;
  }
  .pay-stars__btn {
    width: 100%;
    justify-content: center;
    padding: 10px 14px;
  }
  .pay-stars__hint {
    width: 100%;
    white-space: normal;
  }
}

.donate-levels-box {
  background: var(--light-bg);
  border: 1px solid rgba(139, 0, 255, 0.1);
  border-radius: 22px;
  padding: 24px;
  margin-bottom: 22px;
  box-shadow: 0 10px 30px rgba(139, 0, 255, 0.04);
  /* верх блока */
  /* блок бонуса справа */
  /* прогресс */
  /* список уровней */
  /* карточка */
  /* иконка */
  /* сумма */
  /* процент */
  /* пройденный уровень */
  /* текущий уровень */
  /* нижний текст */
  /* планшет */
  /* мобильная версия */
}
.donate-levels-box__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.donate-levels-box__heading {
  min-width: 0;
}
.donate-levels-box__title {
  font-size: 24px;
  line-height: 1.15;
  font-weight: 800;
  color: var(--main-text-color);
}
.donate-levels-box__subtitle {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--secondary-text-color);
  max-width: 760px;
}
.donate-levels-box__current {
  min-width: 180px;
  padding: 16px 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, #7b2ff7 0%, #a44cff 100%);
  color: #fff;
  box-shadow: 0 12px 30px rgba(123, 47, 247, 0.18);
  flex-shrink: 0;
  text-align: center;
}
.donate-levels-box__current-label {
  font-size: 14px;
  opacity: 0.9;
}
.donate-levels-box__current-value {
  margin-top: 6px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}
.donate-levels-box__progress {
  margin-top: 22px;
}
.donate-levels-box__progress-bar {
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(139, 0, 255, 0.12);
}
.donate-levels-box__progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #7b2ff7 0%, #a44cff 100%);
  transition: width 0.35s ease;
}
.donate-levels-box__progress-info {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--secondary-text-color);
}
.donate-levels-box__list-wrapper {
  margin-top: 20px;
}
.donate-levels-box__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.donate-levels-box__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: 14px 12px;
  border-radius: 18px;
  background: var(--grey-background);
  border: 1px solid rgba(139, 0, 255, 0.08);
  text-align: center;
  transition: 0.25s ease;
}
.donate-levels-box__icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(139, 0, 255, 0.1);
  font-size: 20px;
}
.donate-levels-box__sum {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--main-text-color);
  white-space: nowrap;
}
.donate-levels-box__bonus {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(123, 47, 247, 0.1);
  font-size: 15px;
  font-weight: 800;
  color: #7b2ff7;
  white-space: nowrap;
}
.donate-levels-box__item--passed {
  background: rgba(139, 0, 255, 0.05);
}
.donate-levels-box__item--passed:not(.donate-levels-box__item--current)::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #7b2ff7;
}
.donate-levels-box__item--current {
  background: linear-gradient(135deg, #7b2ff7 0%, #9d4dff 100%);
  border-color: transparent;
  box-shadow: 0 14px 30px rgba(123, 47, 247, 0.18);
  transform: translateY(-2px);
}
.donate-levels-box__item--current .donate-levels-box__sum, .donate-levels-box__item--current .donate-levels-box__bonus {
  color: #fff;
}
.donate-levels-box__item--current .donate-levels-box__icon {
  background: rgba(255, 255, 255, 0.16);
}
.donate-levels-box__item--current .donate-levels-box__bonus {
  background: rgba(255, 255, 255, 0.16);
}
.donate-levels-box__footer {
  margin-top: 16px;
  font-size: 13px;
  color: var(--secondary-text-color);
}
@media (max-width: 1200px) {
  .donate-levels-box__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .donate-levels-box {
    padding: 18px;
    border-radius: 18px;
    /* горизонтальный скролл */
  }
  .donate-levels-box__top {
    flex-direction: column;
    gap: 14px;
  }
  .donate-levels-box__title {
    font-size: 24px;
  }
  .donate-levels-box__subtitle {
    font-size: 14px;
  }
  .donate-levels-box__current {
    width: 100%;
  }
  .donate-levels-box__current-value {
    font-size: 24px;
  }
  .donate-levels-box__progress-info {
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
  }
  .donate-levels-box__list-wrapper {
    margin-top: 16px;
    margin-right: -18px;
    margin-left: -18px;
    padding-right: 18px;
    padding-left: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
  }
  .donate-levels-box__list-wrapper::-webkit-scrollbar {
    display: none;
  }
  .donate-levels-box__list {
    display: flex;
    gap: 12px;
    width: -moz-max-content;
    width: max-content;
    min-width: 100%;
  }
  .donate-levels-box__item {
    width: 140px;
    min-height: 90px;
    flex: 0 0 auto;
  }
  .donate-levels-box__icon {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }
  .donate-levels-box__sum {
    font-size: 16px;
  }
  .donate-levels-box__bonus {
    font-size: 14px;
    padding: 5px 8px;
  }
}
@media (max-width: 480px) {
  .donate-levels-box__item {
    width: 128px;
  }
  .donate-levels-box__sum {
    font-size: 15px;
  }
  .donate-levels-box__bonus {
    font-size: 13px;
  }
}

.promo-page {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  padding: 48px 32px;
  background: radial-gradient(circle at top right, rgba(129, 92, 255, 0.18), transparent 30%), radial-gradient(circle at bottom left, rgba(79, 172, 254, 0.12), transparent 35%), linear-gradient(180deg, var(--section-color) 0%, var(--section-color-dark, #111827) 100%);
  border: 1px solid var(--border-color);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.promo-page__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  opacity: 0.5;
}

.promo-page__blur {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.promo-page__blur--one {
  width: 240px;
  height: 240px;
  background: rgba(129, 92, 255, 0.25);
  top: -80px;
  right: -60px;
}

.promo-page__blur--two {
  width: 200px;
  height: 200px;
  background: rgba(0, 212, 255, 0.18);
  bottom: -60px;
  left: -60px;
}

.promo-page__content {
  position: relative;
  z-index: 2;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.promo-page__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 24px;
}

.promo-page__badge i {
  color: #8b5cf6;
}

.promo-page__title {
  font-size: 52px;
  line-height: 1.05;
  font-weight: 900;
  margin-bottom: 22px;
  color: var(--text-color);
  letter-spacing: -2px;
}

.promo-page__title span {
  background: linear-gradient(90deg, #8b5cf6 0%, #00d4ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.promo-page__text {
  max-width: 620px;
  margin: 0 auto 34px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--secondary-text-color);
}

.promo-page__link {
  color: #8b5cf6;
  font-weight: 700;
  text-decoration: none;
  transition: 0.2s;
}

.promo-page__link:hover {
  opacity: 0.75;
}

.promo-page__card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

.promo-page__input-wrapper {
  position: relative;
  margin-bottom: 18px;
}

.promo-page__input-icon {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  z-index: 2;
  color: #8b5cf6;
  font-size: 18px;
}

.promo-page__input {
  width: 100%;
  height: 66px;
  border-radius: 22px;
  border: 1px solid rgba(139, 92, 246, 0.22);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 243, 255, 0.94));
  padding: 0 24px 0 62px;
  color: #2b2350;
  font-size: 18px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 30px rgba(139, 92, 246, 0.12);
  transition: 0.22s;
}

body.dark .promo-page__input {
  box-shadow: inset 0 1px 0 rgba(47, 17, 101, 0.9), 0 12px 30px rgba(139, 92, 246, 0.12);
}

.promo-page__input::-moz-placeholder {
  color: rgba(43, 35, 80, 0.42);
}

.promo-page__input::placeholder {
  color: rgba(43, 35, 80, 0.42);
}

.promo-page__input:focus {
  background: #fff;
  border-color: rgba(139, 92, 246, 0.65);
  box-shadow: 0 0 0 5px rgba(139, 92, 246, 0.12), 0 16px 36px rgba(139, 92, 246, 0.18);
}

.promo-page__input-glow {
  display: none;
}

.promo-page__input:focus + .promo-page__input-glow {
  opacity: 1;
}

.promo-page__button {
  width: 100%;
  height: 64px;
  border: 0;
  border-radius: 20px;
  background: linear-gradient(90deg, #8b5cf6 0%, #6d4aff 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  transition: 0.2s;
  box-shadow: 0 12px 30px rgba(109, 74, 255, 0.35);
}

.promo-page__button:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(109, 74, 255, 0.45);
}

.promo-page__button:active {
  transform: scale(0.98);
}

.promo-page__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.promo-page__bottom-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--secondary-text-color);
  font-size: 14px;
  font-weight: 600;
}

.promo-page__bottom-item i {
  color: #8b5cf6;
}

@media (max-width: 768px) {
  .promo-page {
    padding: 34px 18px 22px;
    border-radius: 24px;
  }
  .promo-page__title {
    font-size: 36px;
    letter-spacing: -1px;
  }
  .promo-page__text {
    font-size: 15px;
    line-height: 1.6;
  }
  .promo-page__card {
    padding: 16px;
    border-radius: 22px;
  }
  .promo-page__input {
    height: 60px;
    font-size: 15px;
  }
  .promo-page__button {
    height: 58px;
    font-size: 15px;
  }
  .promo-page__bottom {
    gap: 10px;
  }
  .promo-page__bottom-item {
    width: 100%;
    justify-content: center;
  }
}
body.dark .promo-page__input,
.dark .promo-page__input {
  background: linear-gradient(135deg, rgba(31, 25, 56, 0.98), rgba(24, 22, 40, 0.96));
  color: #fff;
  border-color: rgba(139, 92, 246, 0.32);
}

body.dark .promo-page__input::-moz-placeholder, .dark .promo-page__input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.42);
}

body.dark .promo-page__input::placeholder,
.dark .promo-page__input::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

.promo-page__input:focus,
.promo-page__input:active {
  outline: none;
  -webkit-appearance: none;
  box-shadow: 0 0 0 5px rgba(139, 92, 246, 0.12), 0 16px 36px rgba(139, 92, 246, 0.18) !important;
}

.promo-page__input::-moz-focus-inner {
  border: 0;
}

input,
textarea,
button,
select {
  -webkit-tap-highlight-color: transparent;
}

.promo-page__input:-webkit-autofill,
.promo-page__input:-webkit-autofill:hover,
.promo-page__input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-transition: background-color 999999s ease-in-out 0s;
  transition: background-color 999999s ease-in-out 0s;
  box-shadow: 0 0 0 1000px rgba(31, 25, 56, 0.98) inset;
}

.promo-page {
  background: radial-gradient(circle at top right, rgba(129, 92, 255, 0.1), transparent 30%), radial-gradient(circle at bottom left, rgba(0, 212, 255, 0.08), transparent 35%), #ffffff;
}

/* pills */
.promo-page__bottom-item {
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.12);
  color: #4b4563;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

/* badge */
.promo-page__badge {
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.12);
  color: #4b4563;
}

/* dark theme */
.dark .promo-page__bottom-item,
body.dark .promo-page__bottom-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.72);
}

.dark .promo-page__badge,
body.dark .promo-page__badge {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* LIGHT THEME */
.promo-page {
  background: radial-gradient(circle at top right, rgba(129, 92, 255, 0.1), transparent 30%), radial-gradient(circle at bottom left, rgba(0, 212, 255, 0.08), transparent 35%), #ffffff;
}

/* DARK THEME */
.dark .promo-page,
body.dark .promo-page {
  background: radial-gradient(circle at top right, rgba(129, 92, 255, 0.18), transparent 30%), radial-gradient(circle at bottom left, rgba(79, 172, 254, 0.12), transparent 35%), linear-gradient(180deg, #13111c 0%, #0f0d17 100%);
}

.promo-success-effect {
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 6, 20, 0.42);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  animation: promoEffectBgIn 0.25s ease forwards;
}

.promo-success-effect--hide {
  animation: promoEffectBgOut 0.45s ease forwards;
}

.promo-success-effect__flash {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.55), rgba(0, 212, 255, 0.18), transparent 70%);
  animation: promoFlash 0.9s ease forwards;
}

.promo-success-effect__ring {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px solid rgba(139, 92, 246, 0.75);
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.45), inset 0 0 20px rgba(0, 212, 255, 0.22);
  animation: promoRing 1.15s ease forwards;
}

.promo-success-effect__card {
  position: relative;
  z-index: 3;
  width: min(360px, 100vw - 32px);
  padding: 28px 22px 24px;
  border-radius: 28px;
  text-align: center;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(245, 241, 255, 0.94));
  border: 1px solid rgba(139, 92, 246, 0.22);
  box-shadow: 0 24px 70px rgba(20, 10, 70, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  animation: promoCardIn 0.55s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}

.promo-success-effect__icon {
  width: 74px;
  height: 74px;
  margin: 0 auto 14px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  background: linear-gradient(135deg, #8b5cf6, #00d4ff);
  box-shadow: 0 16px 35px rgba(139, 92, 246, 0.35);
  animation: promoIconPulse 1.1s ease infinite;
}

.promo-success-effect__title {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 900;
  color: #2b2350;
  margin-bottom: 8px;
}

.promo-success-effect__text {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
  color: rgba(43, 35, 80, 0.62);
}

.promo-success-effect__diamond {
  position: fixed;
  z-index: 1000002;
  margin-left: -6px;
  margin-top: -6px;
  border-radius: 4px;
  background: linear-gradient(135deg, #ffffff 0%, #9f7aea 45%, #00d4ff 100%);
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.95), 0 0 28px rgba(0, 212, 255, 0.7);
  transform: translate(0, 0) rotate(45deg) scale(0.35);
  transition: transform 1.35s cubic-bezier(0.16, 0.84, 0.44, 1), opacity 1.35s ease;
  pointer-events: none;
}

.promo-success-effect__diamond::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.45);
}

@keyframes promoEffectBgIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes promoEffectBgOut {
  to {
    opacity: 0;
  }
}
@keyframes promoFlash {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(2.2);
  }
}
@keyframes promoRing {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  45% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(4.2);
  }
}
@keyframes promoCardIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.82) rotate(-2deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0);
  }
}
@keyframes promoIconPulse {
  0%, 100% {
    transform: scale(1) rotate(0);
  }
  50% {
    transform: scale(1.08) rotate(-4deg);
  }
}
@keyframes promoDiamondBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(45deg) scale(0.2);
  }
  14% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(calc(45deg + var(--rotate))) scale(1.15);
  }
}
.dark .promo-success-effect__card,
body.dark .promo-success-effect__card {
  background: linear-gradient(135deg, rgba(31, 25, 56, 0.98), rgba(17, 14, 30, 0.96));
  border-color: rgba(139, 92, 246, 0.32);
}

.dark .promo-success-effect__title,
body.dark .promo-success-effect__title {
  color: #fff;
}

.dark .promo-success-effect__text,
body.dark .promo-success-effect__text {
  color: rgba(255, 255, 255, 0.68);
}

.wallet-panel {
  margin-bottom: 18px;
  padding: 14px;
  border-radius: 18px;
  background: var(--light-bg, #fff);
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.09));
  color: var(--main-text-color, rgba(0, 0, 0, 0.87));
  box-shadow: 0 10px 26px rgba(18, 18, 23, 0.045);
}
.wallet-panel__balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px;
  border-radius: 16px;
  background: radial-gradient(circle at top right, rgba(139, 0, 255, 0.09), transparent 30%), linear-gradient(135deg, #fcfcfd 0%, #f6f3fb 100%);
  border: 1px solid rgba(139, 0, 255, 0.08);
}
.wallet-panel__balance-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.wallet-panel__gem {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(139, 0, 255, 0.12), rgba(119, 44, 232, 0.06));
  color: var(--purple-btn-bg, #772ce8);
  border: 1px solid rgba(139, 0, 255, 0.08);
}
.wallet-panel__gem .diamond {
  margin-right: 0 !important;
}
.wallet-panel__label {
  font-size: 12px;
  line-height: 1.1;
  color: var(--secondary-text-color, rgba(0, 0, 0, 0.6));
}
.wallet-panel__amount {
  margin-top: 3px;
  font-size: 27px;
  line-height: 1;
  font-weight: 900;
  color: var(--title-color, #232323);
  letter-spacing: -0.4px;
}
.wallet-panel__small {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.1;
  color: var(--secondary-text-color, rgba(0, 0, 0, 0.6));
}
.wallet-panel__pay {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--purple-btn-bg, #772ce8);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: 0.18s ease;
  box-shadow: 0 8px 18px rgba(119, 44, 232, 0.18);
}
.wallet-panel__pay:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(119, 44, 232, 0.26);
}
.wallet-panel__drop {
  position: relative;
  margin-top: 10px;
  padding: 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(139, 0, 255, 0.08);
  box-shadow: 0 4px 14px rgba(18, 18, 23, 0.03);
}
.wallet-panel__drop-main {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-right: 105px;
}
.wallet-panel__drop-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(139, 0, 255, 0.1), rgba(119, 44, 232, 0.04));
  color: var(--purple-btn-bg, #772ce8);
  border: 1px solid rgba(139, 0, 255, 0.08);
}
.wallet-panel__drop-title {
  font-size: 15px;
  font-weight: 900;
  line-height: 1.1;
  color: var(--title-color, #232323);
}
.wallet-panel__drop-text {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.2;
  color: var(--secondary-text-color, rgba(0, 0, 0, 0.6));
}
.wallet-panel__drop-state {
  position: absolute;
  right: 14px;
  top: 14px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 0;
  font-weight: 800;
  line-height: 1;
}
.wallet-panel__drop-state::before {
  font-size: 11px;
}
.wallet-panel__drop-state--ready {
  color: var(--green-color, #093);
  background: rgba(0, 153, 51, 0.08);
}
.wallet-panel__drop-state--ready::before {
  content: "Доступно";
}
.wallet-panel__drop-state--wait {
  color: var(--purple-btn-bg, #772ce8);
  background: rgba(139, 0, 255, 0.08);
}
.wallet-panel__drop-state--wait::before {
  content: "Перезарядка";
}
.wallet-panel__drop-line, .wallet-panel__line {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(34, 36, 38, 0.08);
}
.wallet-panel__drop-line span, .wallet-panel__line span {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.wallet-panel__drop-line {
  margin-top: 13px;
}
.wallet-panel__drop-line span {
  background: linear-gradient(90deg, #b56dff, #772ce8);
}
.wallet-panel__line span {
  background: linear-gradient(90deg, #8b00ff, #772ce8);
}
.wallet-panel__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.wallet-panel__stat {
  min-width: 0;
  padding: 13px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  transition: 0.18s ease;
}
.wallet-panel__stat:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(18, 18, 23, 0.04);
}
.wallet-panel__stat > span {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  line-height: 1.1;
  color: var(--secondary-text-color, rgba(0, 0, 0, 0.6));
}
.wallet-panel__stat > b {
  display: block;
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
  color: var(--title-color, #232323);
}
.wallet-panel__stat--income {
  background: linear-gradient(135deg, rgba(0, 153, 51, 0.05), #fff);
}
.wallet-panel__stat--income > b {
  color: var(--green-color, #093);
}
.wallet-panel__stat--expense {
  background: linear-gradient(135deg, rgba(252, 54, 59, 0.04), #fff);
}
.wallet-panel__stat--expense > b {
  color: var(--red-color, #fc363b);
}
.wallet-panel__stat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.1;
}
.wallet-panel__stat-head span {
  color: var(--secondary-text-color, rgba(0, 0, 0, 0.6));
}
.wallet-panel__stat-head b {
  font-weight: 900;
  color: var(--main-text-color, rgba(0, 0, 0, 0.87));
  white-space: nowrap;
}
.wallet-panel__actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 11px;
}
.wallet-panel__action {
  min-height: 46px;
  border-radius: 15px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: 0.18s ease;
  border: 1px solid rgba(0, 0, 0, 0.07);
}
.wallet-panel__action i {
  font-size: 15px;
}
.wallet-panel__action:hover {
  transform: translateY(-1px);
}
.wallet-panel__action--ads {
  background: linear-gradient(135deg, #8b00ff, #772ce8);
  color: #fff;
  border: 0;
  box-shadow: 0 8px 18px rgba(119, 44, 232, 0.18);
}
.wallet-panel__action--calendar {
  background: #faf7ff;
  color: var(--purple-btn-bg, #772ce8);
  border-color: rgba(139, 0, 255, 0.1);
}
.wallet-panel__action--calendar:hover {
  background: #f4edff;
}
.wallet-panel__action--contract {
  background: #fff;
  color: var(--title-color, #232323);
}
.wallet-panel__action--contract:hover {
  border-color: rgba(139, 0, 255, 0.14);
  color: var(--purple-btn-bg, #772ce8);
}

@media (max-width: 480px) {
  .wallet-panel {
    padding: 11px;
  }
  .wallet-panel__amount {
    font-size: 24px;
  }
  .wallet-panel__drop-main {
    padding-right: 0;
  }
  .wallet-panel__drop-state {
    position: static;
    display: inline-flex;
    margin: 10px 0 0 53px;
  }
  .wallet-panel__actions {
    grid-template-columns: 1fr;
  }
}
html[data-theme=dark] .wallet-panel,
body.theme-dark .wallet-panel,
.dark .wallet-panel {
  background: #17171c;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}
html[data-theme=dark] .wallet-panel__balance,
body.theme-dark .wallet-panel__balance,
.dark .wallet-panel__balance {
  background: radial-gradient(circle at top right, rgba(139, 0, 255, 0.12), transparent 34%), linear-gradient(135deg, #202028, #252530);
  border-color: rgba(255, 255, 255, 0.07);
}
html[data-theme=dark] .wallet-panel__drop, html[data-theme=dark] .wallet-panel__stat,
body.theme-dark .wallet-panel__drop,
body.theme-dark .wallet-panel__stat,
.dark .wallet-panel__drop,
.dark .wallet-panel__stat {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.07);
}
html[data-theme=dark] .wallet-panel__gem, html[data-theme=dark] .wallet-panel__drop-icon,
body.theme-dark .wallet-panel__gem,
body.theme-dark .wallet-panel__drop-icon,
.dark .wallet-panel__gem,
.dark .wallet-panel__drop-icon {
  background: rgba(139, 0, 255, 0.1);
  border-color: rgba(139, 0, 255, 0.12);
  color: #cfacff;
}
html[data-theme=dark] .wallet-panel__label, html[data-theme=dark] .wallet-panel__small, html[data-theme=dark] .wallet-panel__drop-text, html[data-theme=dark] .wallet-panel__stat > span, html[data-theme=dark] .wallet-panel__stat-head span,
body.theme-dark .wallet-panel__label,
body.theme-dark .wallet-panel__small,
body.theme-dark .wallet-panel__drop-text,
body.theme-dark .wallet-panel__stat > span,
body.theme-dark .wallet-panel__stat-head span,
.dark .wallet-panel__label,
.dark .wallet-panel__small,
.dark .wallet-panel__drop-text,
.dark .wallet-panel__stat > span,
.dark .wallet-panel__stat-head span {
  color: rgba(255, 255, 255, 0.56);
}
html[data-theme=dark] .wallet-panel__amount, html[data-theme=dark] .wallet-panel__drop-title, html[data-theme=dark] .wallet-panel__stat > b, html[data-theme=dark] .wallet-panel__stat-head b,
body.theme-dark .wallet-panel__amount,
body.theme-dark .wallet-panel__drop-title,
body.theme-dark .wallet-panel__stat > b,
body.theme-dark .wallet-panel__stat-head b,
.dark .wallet-panel__amount,
.dark .wallet-panel__drop-title,
.dark .wallet-panel__stat > b,
.dark .wallet-panel__stat-head b {
  color: rgba(255, 255, 255, 0.93);
}
html[data-theme=dark] .wallet-panel__line, html[data-theme=dark] .wallet-panel__drop-line,
body.theme-dark .wallet-panel__line,
body.theme-dark .wallet-panel__drop-line,
.dark .wallet-panel__line,
.dark .wallet-panel__drop-line {
  background: rgba(255, 255, 255, 0.1);
}
html[data-theme=dark] .wallet-panel__action,
body.theme-dark .wallet-panel__action,
.dark .wallet-panel__action {
  border-color: rgba(255, 255, 255, 0.07);
}
html[data-theme=dark] .wallet-panel__action--calendar,
body.theme-dark .wallet-panel__action--calendar,
.dark .wallet-panel__action--calendar {
  background: rgba(139, 0, 255, 0.08);
  color: #cfacff;
}
html[data-theme=dark] .wallet-panel__action--contract,
body.theme-dark .wallet-panel__action--contract,
.dark .wallet-panel__action--contract {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.88);
}
html[data-theme=dark] .wallet-panel__stat--income,
body.theme-dark .wallet-panel__stat--income,
.dark .wallet-panel__stat--income {
  background: rgba(0, 153, 51, 0.08);
}
html[data-theme=dark] .wallet-panel__stat--expense,
body.theme-dark .wallet-panel__stat--expense,
.dark .wallet-panel__stat--expense {
  background: rgba(252, 54, 59, 0.08);
}

.settings {
  display: flex;
  justify-content: center;
}
.settings .form {
  width: 500px;
}
.settings .form__text {
  margin-bottom: 12px;
}
.settings .form__text span {
  color: var(--main-purple-color);
}
.settings__media {
  flex-direction: column;
}
.settings__avatars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
}
.settings__item--hide {
  display: none;
}
.settings__show-all-items {
  cursor: pointer;
}
.settings__more {
  width: 150px;
  height: 150px;
  border-radius: var(--main-border-radius);
  background-color: var(--medium-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--main-text-color);
  font-size: 10px;
  padding: 10px;
  text-align: center;
  margin-right: 15px;
  margin-bottom: 15px;
}
@media screen and (max-width: 500px) {
  .settings__more {
    width: 80px;
    height: 80px;
  }
}
.settings__more--cover {
  width: 32%;
  height: 130px;
}
@media screen and (max-width: 600px) {
  .settings__more--cover {
    width: 100%;
    height: 100px;
  }
}
.settings__more span {
  font-size: 40px;
  color: var(--secondary-text-color);
  display: block;
  margin-bottom: 10px;
}
@media screen and (max-width: 500px) {
  .settings__more span {
    font-size: 25px;
    margin-bottom: 0;
  }
}
.settings__avatar {
  margin-right: 15px;
  margin-bottom: 15px;
  cursor: pointer;
  transition: transform 0.2s;
  position: relative;
}
.settings__avatar img {
  border-radius: var(--main-border-radius);
}
.settings__avatar:hover {
  transform: scale(1.05);
}
@media screen and (max-width: 500px) {
  .settings__avatar {
    width: 80px;
    height: 80px;
  }
}
.settings__frames {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
}
.settings__skin {
  width: 150px;
  height: 150px;
  margin-right: 15px;
  margin-bottom: 15px;
  cursor: pointer;
  background: var(--secondary-text-color);
  transition: transform 0.2s;
}
.settings__skin:hover {
  transform: scale(1.05);
}
@media screen and (max-width: 500px) {
  .settings__skin {
    width: 80px;
    height: 80px;
  }
}
.settings__frame {
  width: 150px;
  height: 150px;
  margin-right: 15px;
  margin-bottom: 15px;
  cursor: pointer;
  transition: transform 0.2s;
}
.settings__frame--empty img {
  border-radius: var(--main-border-radius);
}
.settings__frame:hover {
  transform: scale(1.05);
}
@media screen and (max-width: 500px) {
  .settings__frame {
    width: 80px;
    height: 80px;
  }
}
.settings__background {
  height: 250px;
  width: 100%;
  margin-bottom: 15px;
  cursor: pointer;
}
.settings__background:last-of-type {
  margin-bottom: 0;
}
.settings__background img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
  border-radius: var(--main-border-radius);
}
.settings__covers {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  justify-content: center;
}
.settings__cover {
  margin-bottom: 15px;
  margin-right: 15px;
  width: 32%;
  height: 130px;
  cursor: pointer;
  transition: transform 0.2s;
  position: relative;
}
.settings__cover:hover {
  transform: scale(1.05);
}
@media screen and (max-width: 600px) {
  .settings__cover {
    width: 100%;
    height: 100px;
  }
}
.settings__cover img {
  border-radius: var(--main-border-radius);
  -o-object-fit: cover;
     object-fit: cover;
}

.profile-import {
  display: flex;
  align-items: center;
  margin: 20px 0;
}
.profile-import__icon {
  width: 28px;
  height: 28px;
  margin-right: 5px;
  flex-shrink: 0;
}
.profile-import__icon img {
  border-radius: 3px;
}
.profile-import__input {
  height: 32px;
  border-radius: 3px;
  width: 100%;
}
.profile-import__input input {
  height: 100%;
  background: var(--light-bg);
  padding: 0 10px 5px 10px;
  outline: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--main-text-color);
  width: 100%;
  max-width: 300px;
}
.profile-import__input input:focus {
  border: 1px solid var(--purple-btn-bg);
}
.profile-import__input input::-moz-placeholder {
  font-size: 14px;
  color: var(--secondary-text-color);
}
.profile-import__input input::placeholder {
  font-size: 14px;
  color: var(--secondary-text-color);
}

.showcase-all {
  display: flex;
  margin: 30px 0;
  padding: 10px;
  background: var(--dark-grey-bg);
  border-radius: 15px;
}
.showcase-all__wrapper {
  display: grid;
  overflow-y: auto;
  min-height: 150px;
  max-height: 350px;
  grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
  gap: 15px;
  padding: 5px;
  width: 100%;
}
.showcase-all__item img {
  -o-object-fit: contain;
     object-fit: contain;
}

.showcase--gift .showcase__item,
.showcase--ach .showcase__item {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.showcase--gift .showcase__item img,
.showcase--ach .showcase__item img {
  width: 100px;
  height: 100px;
}

.personalized__remove-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  background: var(--grey-background);
  width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-layout-editor {
  margin-top: 12px;
}

.profile-layout-editor--locked {
  opacity: 0.7;
  pointer-events: none;
}

.profile-layout-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.profile-layout-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.profile-layout-item label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  cursor: pointer;
  font-size: 14px;
}
.profile-layout-item input[type=checkbox] {
  transform: translateY(1px);
}
.profile-layout-item:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

.profile-layout-item__drag {
  cursor: grab;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  opacity: 0.75;
  font-size: 16px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.profile-layout-item:active .profile-layout-item__drag {
  cursor: grabbing;
}

.profile-layout-item--ghost {
  opacity: 0.45;
}

.profile-layout-item--chosen {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transform: scale(1.01);
}

@media (max-width: 480px) {
  .profile-layout-item {
    padding: 9px 10px;
  }
  .profile-layout-item label {
    font-size: 13px;
  }
  .profile-layout-item__drag {
    font-size: 15px;
    padding: 5px 7px;
  }
}
.profile-layout-item__locked {
  opacity: 0.7;
}

.settings-page {
  max-width: 920px;
  margin: 0 auto;
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.settings-card {
  background: var(--block-bg, #fff);
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.settings-card__head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.settings-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-color, #222);
}

.settings-card__desc {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-muted, #8a8a8a);
}

.settings-notice {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(120, 92, 255, 0.08);
  color: var(--text-color, #222);
  font-size: 14px;
}

.settings-notice span {
  font-weight: 700;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.settings-form__textarea {
  margin-top: 12px;
  min-height: 120px;
  resize: vertical;
}

.settings-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  border-radius: 14px;
  background: var(--body-bg, rgba(0, 0, 0, 0.025));
}

.settings-row__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color, #222);
}

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

.settings-switches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.settings-switch {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px;
  border-radius: 14px;
  background: var(--body-bg, rgba(0, 0, 0, 0.025));
  cursor: pointer;
}

.settings-switch input[type=checkbox] {
  display: none;
}

.settings-switch__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-switch__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color, #222);
}

.settings-switch__desc {
  font-size: 12px;
  color: var(--text-muted, #8a8a8a);
}

.settings-switch__control {
  position: relative;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 999px;
  background: rgba(140, 140, 140, 0.35);
  transition: 0.2s;
}

.settings-switch__control:before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.settings-switch input[type=checkbox]:checked + .settings-switch__control {
  background: var(--primary-color, #7b5cff);
}

.settings-switch input[type=checkbox]:checked + .settings-switch__control:before {
  transform: translateX(20px);
}

.settings-actions {
  position: sticky;
  bottom: 12px;
  z-index: 5;
  display: flex;
  justify-content: center;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.settings__save-btn {
  min-width: 240px;
}

@media (max-width: 768px) {
  .settings-card {
    padding: 16px;
    border-radius: 16px;
  }
  .settings-grid,
  .settings-switches {
    grid-template-columns: 1fr;
  }
  .settings-row {
    align-items: stretch;
    flex-direction: column;
  }
  .settings-row__select {
    width: 100%;
  }
  .settings-actions {
    bottom: 8px;
  }
  .settings__save-btn {
    width: 100%;
  }
}
.settings-card {
  overflow: hidden;
}

.settings-grid > *,
.settings-row__select,
.settings-switch,
.settings-form__textarea {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.settings-row {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
}

.settings-row__select {
  width: 100%;
}

.settings-grid .default-select,
.settings-grid .sl-select,
.settings-grid .form__field {
  width: 100%;
}

.settings-form__textarea {
  width: 100%;
}

.settings-switches {
  width: 100%;
}

.settings-actions {
  max-width: 100%;
  box-sizing: border-box;
}

/* dark theme */
body.dark .settings-card {
  background: #1f1f23;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

body.dark .settings-card__title,
body.dark .settings-row__title,
body.dark .settings-switch__title {
  color: #f2f2f3;
}

body.dark .settings-card__desc,
body.dark .settings-switch__desc {
  color: rgba(255, 255, 255, 0.55);
}

body.dark .settings-row,
body.dark .settings-switch {
  background: rgba(255, 255, 255, 0.045);
}

body.dark .settings-notice {
  background: rgba(140, 120, 255, 0.14);
  color: #f2f2f3;
}

body.dark .settings-form .form__field,
body.dark .settings-form .default-select,
body.dark .settings-form .sl-select,
body.dark .settings-row__select {
  background: #28282d;
  border-color: rgba(255, 255, 255, 0.09);
  color: #f2f2f3;
}

body.dark .settings-form .form__field::-moz-placeholder {
  color: rgba(255, 255, 255, 0.45);
}

body.dark .settings-form .form__field::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

body.dark .settings-actions {
  background: rgba(20, 20, 23, 0.78);
}

body.dark .settings-switch__control {
  background: rgba(255, 255, 255, 0.18);
}

@media (max-width: 768px) {
  .settings-row {
    grid-template-columns: 1fr;
  }
}
.settings-form input:-webkit-autofill,
.settings-form input:-webkit-autofill:hover,
.settings-form input:-webkit-autofill:focus,
.settings-form textarea:-webkit-autofill,
.settings-form select:-webkit-autofill {
  -webkit-text-fill-color: var(--text-color, #222);
  box-shadow: 0 0 0 1000px #fff inset;
  -webkit-transition: background-color 9999s ease-in-out 0s;
  transition: background-color 9999s ease-in-out 0s;
}

body.dark .settings-form input:-webkit-autofill,
body.dark .settings-form input:-webkit-autofill:hover,
body.dark .settings-form input:-webkit-autofill:focus,
body.dark .settings-form textarea:-webkit-autofill,
body.dark .settings-form select:-webkit-autofill {
  -webkit-text-fill-color: #f2f2f3;
  box-shadow: 0 0 0 1000px #28282d inset;
}

.settings-media {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.settings-media__section {
  width: 100%;
  padding: 24px;
  border-radius: 24px;
  background: var(--light-bg);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
}

.settings-media__head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
}

.settings-media__title {
  font-size: 24px;
  font-weight: 800;
  color: var(--main-text-color);
}

.settings-media__desc {
  margin-top: 5px;
  font-size: 14px;
  color: var(--secondary-text-color);
}

.settings-media__grid,
.settings-media__covers {
  display: grid;
  margin-top: 0;
  gap: 14px;
  align-items: start;
}

/* Ячейка растягивается, а сама карточка внутри остается квадратной */
.settings-media__grid {
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
}

.settings-media__grid--skin {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.settings-media__covers {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.settings-media__item,
.settings-media__more {
  width: 138px;
  height: auto;
  aspect-ratio: 1/1;
  max-width: 100%;
  justify-self: start;
  margin: 0;
  border-radius: 18px;
  box-sizing: border-box;
}

.settings-media__grid--skin .settings-media__item,
.settings-media__grid--skin .settings-media__more {
  width: 170px;
  height: 170px;
}

.settings-media__item {
  position: relative;
  overflow: hidden;
  background: var(--medium-bg);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  border: 2px solid transparent;
}

.settings-media__item:hover,
.settings-media__cover:hover,
.settings-media__more:hover,
.settings-media__cover-more:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.08);
}

.settings-media__item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Аватарки и рамки не растягиваются криво */
.settings__avatar.settings-media__item img,
.settings__frame.settings-media__item img {
  -o-object-fit: contain;
     object-fit: contain;
}

.settings__skin.settings-media__item {
  border-radius: 18px;
}

.settings__skin--empty.settings-media__item {
  background: linear-gradient(135deg, rgba(120, 120, 120, 0.16) 25%, transparent 25%) -10px 0, linear-gradient(225deg, rgba(120, 120, 120, 0.16) 25%, transparent 25%) -10px 0, linear-gradient(315deg, rgba(120, 120, 120, 0.16) 25%, transparent 25%), linear-gradient(45deg, rgba(120, 120, 120, 0.16) 25%, transparent 25%);
  background-size: 20px 20px;
  background-color: var(--medium-bg);
}

.settings-media__more {
  aspect-ratio: auto;
  background: var(--medium-bg);
  border: 1px dashed rgba(0, 0, 0, 0.12);
  font-size: 13px;
  line-height: 1.3;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 12px;
}

.settings-media__more span {
  font-size: 34px;
  line-height: 1;
  margin-bottom: 8px;
}

.settings-media__cover,
.settings-media__cover-more {
  width: 100%;
  max-width: 420px;
  height: 155px;
  justify-self: center;
  margin: 0;
  border-radius: 18px;
  box-sizing: border-box;
}

.settings-media__cover {
  position: relative;
  overflow: hidden;
  background: var(--medium-bg);
  transition: transform 0.2s, box-shadow 0.2s;
}

.settings-media__cover img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.settings-media__cover-more {
  background: var(--medium-bg);
  border: 1px dashed rgba(0, 0, 0, 0.12);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 14px;
}

.settings-media .personalized__remove-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}

.settings-media-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 18px 0 24px;
  flex-wrap: wrap;
}

.settings-media-actions__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  border-radius: 14px;
  background: var(--light-bg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--main-text-color);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.2s;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.settings-media-actions__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.settings-media-actions__btn i {
  font-size: 18px;
}

.settings-media-actions__btn--primary {
  background: var(--primary-color);
  color: #fff;
  border-color: transparent;
}

/* Тумблер скрытия бесплатных аватарок */
.settings-media-filter {
  margin-top: 14px;
}

.settings-media-filter__toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.settings-media-filter__toggle input {
  display: none;
}

.settings-media-filter__switch {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: rgba(120, 120, 120, 0.3);
  transition: 0.2s;
  flex-shrink: 0;
}

.settings-media-filter__switch:before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.settings-media-filter__toggle input:checked + .settings-media-filter__switch {
  background: var(--primary-color);
}

.settings-media-filter__toggle input:checked + .settings-media-filter__switch:before {
  transform: translateX(20px);
}

.settings-media-filter__text {
  font-size: 14px;
  font-weight: 600;
  color: var(--main-text-color);
}

.settings-media-filter__switch {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: rgba(120, 120, 120, 0.3) !important;
  transition: 0.2s;
  flex-shrink: 0;
}

.settings-media-filter__free-toggle:checked ~ .settings-media-filter__switch {
  background: var(--main-link-color, var(--primary-color, #8b5cf6)) !important;
}

.settings-media-filter__switch:before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.settings-media-filter__free-toggle:checked ~ .settings-media-filter__switch:before {
  transform: translateX(20px);
}

/* dark */
body.dark .settings-media__section {
  background: #1f1f23;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.25);
}

body.dark .settings-media__title {
  color: #f2f2f3;
}

body.dark .settings-media__desc,
body.dark .settings-media-filter__text {
  color: rgba(255, 255, 255, 0.65);
}

body.dark .settings-media__item,
body.dark .settings-media__more,
body.dark .settings-media__cover,
body.dark .settings-media__cover-more {
  background: #28282d;
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark .settings-media__more,
body.dark .settings-media__cover-more {
  border-color: rgba(255, 255, 255, 0.14);
  color: #f2f2f3;
}

body.dark .settings-media__more span,
body.dark .settings-media__cover-more span {
  color: rgba(255, 255, 255, 0.55);
}

body.dark .settings-media-actions__btn {
  background: #1f1f23;
  border-color: rgba(255, 255, 255, 0.08);
  color: #f2f2f3;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

body.dark .settings-media-actions__btn--primary {
  background: var(--primary-color);
  color: #fff;
}

/* mobile */
@media screen and (max-width: 768px) {
  .settings-media__section {
    padding: 16px;
    border-radius: 18px;
  }
  .settings-media__title {
    font-size: 21px;
  }
  .settings-media__desc {
    font-size: 13px;
  }
  .settings-media__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .settings-media__grid--skin {
    grid-template-columns: repeat(2, 1fr);
  }
  .settings-media__item,
  .settings-media__more,
  .settings-media__grid--skin .settings-media__item,
  .settings-media__grid--skin .settings-media__more {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    border-radius: 16px;
  }
  .settings-media__covers {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .settings-media__cover,
  .settings-media__cover-more {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 16/7;
    border-radius: 16px;
  }
  .settings-media__more {
    font-size: 12px;
    line-height: 1.25;
  }
  .settings-media__more span {
    font-size: 28px;
    margin-bottom: 6px;
  }
  .settings-media-actions {
    gap: 10px;
  }
  .settings-media-actions__btn {
    flex: 1;
    min-width: 140px;
    height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: 13px;
  }
}
@media screen and (max-width: 420px) {
  .settings-media__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .settings-media__grid--skin {
    grid-template-columns: repeat(2, 1fr);
  }
}
.settings-media-filter {
  margin-top: 14px;
}

.settings-media-filter__toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.settings-media-filter__toggle input {
  display: none;
}

.settings-media-filter__switch {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: rgba(120, 120, 120, 0.3);
  transition: 0.2s;
}

.settings-media-filter__switch:before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.settings-media-filter__toggle input:checked + .settings-media-filter__switch {
  background: var(--primary-color);
}

.settings-media-filter__toggle input:checked + .settings-media-filter__switch:before {
  transform: translateX(20px);
}

.settings-media-filter__text {
  font-size: 14px;
  font-weight: 600;
  color: var(--main-text-color);
}

body.dark .settings-media-filter__text {
  color: #f2f2f3;
}

.settings-media__item,
.settings-media__more {
  width: min(100%, 150px);
  height: auto;
  aspect-ratio: 1/1;
  justify-self: start;
}

.settings-media__grid--skin .settings-media__item,
.settings-media__grid--skin .settings-media__more {
  width: min(100%, 150px);
  height: auto;
  aspect-ratio: 1/1;
  justify-self: start;
}

.status-settings {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.status-settings__section {
  padding: 24px;
  border-radius: 24px;
  background: var(--light-bg);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.04);
}

.status-settings__head {
  margin-bottom: 20px;
}

.status-settings__title {
  font-size: 24px;
  font-weight: 800;
  color: var(--main-text-color);
}

.status-settings__subtitle {
  margin-top: 6px;
  font-size: 14px;
  color: var(--secondary-text-color);
}

.status-settings__list {
  display: flex;
  gap: 14px;
}

.status-settings__item {
  width: 120px;
  min-width: 120px;
  padding: 12px 8px;
  border-radius: 18px;
  text-align: center;
  cursor: pointer;
  transition: 0.2s;
  position: relative;
}

.status-settings__item:hover {
  background: rgba(0, 0, 0, 0.035);
  transform: translateY(-2px);
}

.status-settings__image {
  width: 72px;
  height: 72px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: var(--medium-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.status-settings__image img {
  width: 42px;
  height: 42px;
  -o-object-fit: contain;
     object-fit: contain;
}

.status-settings__image--empty {
  background: linear-gradient(135deg, rgba(120, 120, 120, 0.12), rgba(120, 120, 120, 0.04));
}

.status-settings__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--secondary-text-color);
  line-height: 1.25;
}

.status__item--active .status-settings__image {
  box-shadow: 0 0 0 3px rgba(95, 75, 255, 0.14), inset 0 0 0 1px rgba(95, 75, 255, 0.18);
}

.status__item--active .status-settings__name {
  color: var(--main-text-color);
  font-weight: 800;
}

.status__item--unavailable {
  opacity: 0.45;
  filter: grayscale(1);
}

.status-settings__roles {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.status-settings__role {
  min-width: 150px;
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--medium-bg);
  color: var(--main-text-color);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: 0.2s;
  border: 1px solid transparent;
}

.status-settings__role:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.07);
}

.status__role--active {
  background: var(--primary-color);
  color: #fff;
  box-shadow: 0 8px 20px rgba(95, 75, 255, 0.25);
}

body.dark .status-settings__section {
  background: #1f1f23;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.25);
}

body.dark .status-settings__title {
  color: #f2f2f3;
}

body.dark .status-settings__subtitle,
body.dark .status-settings__name {
  color: rgba(255, 255, 255, 0.55);
}

body.dark .status-settings__item:hover,
body.dark .status-settings__role {
  background: rgba(255, 255, 255, 0.055);
}

body.dark .status-settings__image {
  background: #28282d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

body.dark .status__item--active .status-settings__name {
  color: #f2f2f3;
}

body.dark .status__role--active {
  background: var(--primary-color);
  color: #fff;
}

@media screen and (max-width: 768px) {
  .status-settings__section {
    padding: 16px;
    border-radius: 18px;
  }
  .status-settings__title {
    font-size: 21px;
  }
  .status-settings__subtitle {
    font-size: 13px;
  }
  .status-settings__item {
    width: 104px;
    min-width: 104px;
    padding: 10px 6px;
  }
  .status-settings__image {
    width: 64px;
    height: 64px;
  }
  .status-settings__image img {
    width: 38px;
    height: 38px;
  }
  .status__item--active:after {
    top: 58px;
    right: 15px;
  }
  .status-settings__role {
    min-width: 0;
    flex: 1;
    padding: 11px 14px;
  }
}
.manga-mobile__container {
  background-color: var(--light-bg);
  overflow: hidden;
  position: relative;
  width: 100%;
}
.manga-mobile__header {
  background-size: cover;
  filter: blur(8px) saturate(100%);
  height: 92%;
  left: 0;
  position: absolute;
  top: 0;
  transform: scale(1.1);
  width: 100%;
}
.manga-mobile__wrapper {
  padding: 0 4rem 1rem;
  position: relative;
  top: 50px;
}
.manga-mobile__placeholder {
  position: relative;
}
.manga-mobile__image {
  margin: 0 auto;
  max-width: 250px;
  border-radius: 16px;
  box-shadow: 0 5px 12px -4px rgba(34, 60, 80, 0.3490196078);
  overflow: hidden;
  position: relative;
  z-index: 10;
}
.manga-mobile__name-wrapper {
  background: var(--light-bg);
  border-radius: 32px 32px 0 0;
  padding: 60px 1rem 25px;
  position: inherit;
  text-align: center;
  z-index: 2;
}
.manga-mobile__name {
  font-size: 30px;
  font-weight: 500;
  margin: 0 5px 10px 0;
  color: var(--main-text-color);
}
.manga-mobile__name-alt {
  color: var(--secondary-text-color);
  font-size: 14px;
  font-weight: 400;
}
.manga-mobile__name-alt span:not(:last-of-type)::after {
  content: "/";
  padding: 0 5px;
}
.manga-mobile .manga__middle-link {
  margin-right: 15px;
}
.manga-mobile .manga__middle-link::after {
  content: unset !important;
}
.manga-mobile .manga__rating-info {
  display: inline-block;
}
.manga-mobile .manga__rating {
  font-size: 14px;
}

.main--mobile {
  padding-top: 0 !important;
  background: var(--light-bg) !important;
}

.dialog {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  width: 100%;
  position: relative;
  cursor: pointer;
}
.dialog:hover .dialog__name {
  color: var(--main-purple-color);
}
.dialog--not-read::after {
  content: attr(data-count);
  position: absolute;
  bottom: 13px;
  right: 0;
  background-color: var(--medium-bg);
  color: var(--main-text-color);
  border-radius: 50%;
  height: 20px;
  width: 20px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}
.dialog--not-read .dialog__text {
  margin-right: 20px;
}
.dialog__del-btn {
  position: absolute;
  top: 30px;
  left: 31px;
  z-index: 10;
  background: var(--light-bg);
  border-radius: 50%;
  border: 1px solid var(--border-color);
  font-size: 16px;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dialog__content {
  width: 100%;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
  overflow: hidden;
}
.dialog__header {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}
.dialog__name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  font-weight: 500;
  color: var(--main-text-color);
  margin-bottom: 7px;
}
.dialog__user {
  position: relative;
}
.dialog__user--online::before {
  content: "";
  background: #3cce7b;
  position: absolute;
  width: 11px;
  height: 11px;
  top: 1px;
  right: 16px;
  border-radius: 50%;
  border: 3px solid var(--indicator-border);
  z-index: 1;
}
.dialog__avatar {
  width: 50px;
  height: 50px;
  margin-right: 15px;
  flex-shrink: 0;
  display: block;
}
.dialog__avatar img {
  border-radius: 50%;
}
.dialog__time {
  font-size: 13px;
  color: var(--secondary-text-color);
  margin-left: auto;
  flex-shrink: 0;
}
.dialog__text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  font-size: 15px;
  color: var(--secondary-text-color);
}

.messages {
  height: 100%;
  width: 100%;
}
@media screen and (min-width: 990px) {
  .messages {
    display: flex;
    justify-content: space-between;
  }
}
@media screen and (max-width: 990px) {
  .messages--index .messages__chat {
    display: none;
  }
}
@media screen and (max-width: 990px) {
  .messages--show .messages__dialogs {
    display: none;
  }
}
.messages__content {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.messages__chat {
  height: 100%;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 990px) {
  .messages__chat {
    width: 70%;
    margin-left: 20px;
    border-left: 1px solid var(--border-color);
  }
}
.messages__dialogs {
  padding: 0 10px;
  overflow-y: auto;
  height: 100%;
}
@media screen and (min-width: 990px) {
  .messages__dialogs {
    width: 30%;
    padding-left: 0;
    padding-right: 10px;
  }
}
.messages__dialogs--load-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.messages__dialogs--load-btn i {
  margin-left: 5px;
  margin-top: 4px;
}

.chat__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px 10px 10px;
  border-bottom: 1px solid var(--border-color);
}
@media screen and (min-width: 990px) {
  .chat__header {
    padding: 14px 10px 14px 10px;
  }
}
.chat__back {
  padding: 5px 15px;
}
@media screen and (min-width: 990px) {
  .chat__back {
    visibility: hidden;
  }
}
.chat__avatar {
  width: 35px;
  height: 35px;
  display: block;
  flex-shrink: 0;
}
.chat__avatar img {
  border-radius: 50%;
}
.chat__user {
  text-align: center;
}
.chat__user-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--main-text-color);
  margin-bottom: 5px;
  display: block;
}
.chat__user-status {
  font-size: 12px;
  color: var(--main-purple-color);
}
.chat__user-status--offline {
  color: var(--secondary-text-color);
}
.chat__reply {
  align-items: center;
  padding: 5px 10px;
  background: var(--grey-background);
  display: none;
}
.chat__reply-icon {
  margin-right: 10px;
  font-size: 20px;
  color: var(--purple-btn-bg);
}
.chat__reply-content {
  margin-right: auto;
}
.chat__reply-name {
  font-weight: 500;
  color: var(--purple-btn-bg);
  margin-bottom: 3px;
}
.chat__reply-close {
  cursor: pointer;
}
.chat__body {
  display: flex;
  flex: 1 auto;
  flex-basis: 100%;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
  padding: 15px;
}
.chat__group-date {
  text-align: center;
  font-size: 12px;
  color: var(--secondary-text-color);
  padding: 13px 0;
}
.chat__message {
  display: flex;
  background-color: var(--purple-btn-bg);
  color: white;
  font-size: 15px;
  padding: 10px 15px;
  margin-bottom: 10px;
  border-radius: 18px;
  max-width: 80%;
  width: -moz-fit-content;
  width: fit-content;
  align-items: end;
  position: relative;
}
.chat__message--read .chat__message-time {
  background: var(--purple-btn-bg);
  color: white !important;
  padding: 2px;
  border-radius: 3px;
}
.chat__message-delete-btn {
  display: none;
  position: absolute;
  left: -35px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--red-color);
  color: white;
  width: 25px;
  height: 25px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 18px;
}
.chat__message-sticker {
  width: 86px;
}
.chat__message-text {
  word-break: break-word;
}
.chat__message-text::after {
  content: "";
  display: inline-block;
  height: 11px;
  width: 31px;
  position: relative;
}
.chat__message-text a {
  color: white;
  font-weight: 500;
  text-decoration: underline;
}
.chat__message--me {
  margin-left: auto;
  color: var(--main-text-color);
  background: var(--medium-bg);
}
.chat__message--me .chat__message-time {
  color: var(--secondary-text-color);
}
.chat__message--sticker {
  background: transparent;
}
.chat__message-time {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 10px;
  color: #dbd4d4;
  flex-shrink: 0;
}
.chat__form {
  margin-top: auto;
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
}
.chat__form-area {
  border: none;
  border-top: 1px solid var(--border-color);
  resize: none;
  padding: 19px 105px 19px 15px;
  color: var(--main-text-color);
  width: 100%;
  height: 58px;
  outline: none;
  background-color: var(--light-bg);
}
.chat__form-area::-moz-placeholder {
  display: flex;
  align-items: center;
}
.chat__form-area::placeholder {
  display: flex;
  align-items: center;
}
.chat__send-btn {
  position: absolute;
  right: 15px;
  bottom: 7px;
  border-radius: 50%;
  padding: 5px 3px;
  display: flex;
}
.chat__send-btn i {
  font-size: 22px;
  margin-left: 3px;
}
.chat__sticker-btn {
  position: absolute;
  right: 72px;
  bottom: 14px;
}

html.messenger {
  height: 100%;
  overflow: hidden;
  position: fixed;
  min-height: 100vh;
}
html.messenger .footer {
  display: none;
}
html.messenger #back-to-top {
  display: none;
}
html.messenger .main {
  display: flex;
  padding-bottom: 0;
}
html.messenger .main > .container {
  flex-grow: 1;
}
html.messenger body {
  min-height: auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  display: flex;
  flex-flow: column;
}
html.messenger body > .wrapper {
  min-height: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
html.messenger body > .wrapper > .main {
  height: calc(100% - 70px);
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}
html.messenger body > .wrapper > .main > .container {
  flex-grow: 1;
  height: 100%;
  width: 100%;
  display: flex;
}
@media screen and (max-width: 990px) {
  html.messenger body > .wrapper > .main > .container {
    padding: 0;
  }
}
html.messenger .messenger-frame {
  display: flex;
  width: 100%;
  flex-direction: column;
  flex-grow: 1;
}
html.messenger .messenger-box {
  height: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
html.messenger .messenger-inner {
  height: 100%;
  flex: 1 1 auto;
}

.chat-reply {
  border-left: 3px solid white;
  background: rgba(255, 255, 255, 0.1215686275);
  padding: 5px;
  margin-bottom: 5px;
}

.manga-rating__header {
  display: flex;
  align-items: center;
  padding: 15px;
  margin-bottom: 5px;
  background: var(--light-bg);
}
.manga-rating__image {
  width: 64px;
  height: 96px;
  margin-right: 15px;
  flex-shrink: 0;
}
.manga-rating__image img {
  border-radius: 6px;
}
.manga-rating__name {
  font-size: 17px;
  font-weight: 500;
}
.manga-rating__preview {
  background: var(--medium-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 65px;
  padding: 16px;
  color: var(--secondary-text-color);
  font-size: 13px;
}
.manga-rating__preview[data-score="1"], .manga-rating__preview[data-score="2"], .manga-rating__preview[data-score="3"], .manga-rating__preview[data-score="4"] {
  background: var(--red-color);
}
.manga-rating__preview[data-score="5"], .manga-rating__preview[data-score="6"] {
  background: #999;
}
.manga-rating__preview[data-score="7"], .manga-rating__preview[data-score="8"], .manga-rating__preview[data-score="9"], .manga-rating__preview[data-score="10"] {
  background: var(--green-color);
}
.manga-rating__preview--active span {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 46px;
  height: 46px;
  font-size: 24px;
  font-weight: 500;
  border-radius: 46px;
  color: #fff;
  border: 2px solid #fff;
}
.manga-rating__vote {
  padding: 22px 16px;
  display: flex;
  justify-content: space-around;
}
.manga-rating__star {
  background-image: url("/assets/star.svg");
  width: 24px;
  height: 22px;
  cursor: pointer;
}
.manga-rating__star--active {
  background-image: url("/assets/star-filled.svg");
}
.manga-rating__actions {
  display: flex;
  justify-content: center;
  padding: 20px 15px;
  border-top: 1px solid var(--border-color);
}
.manga-rating__actions button:first-of-type {
  margin-right: 15px;
}

.manga-rating__star:not(.manga-rating__star--active) {
  filter: var(--invert);
}

.similar-vote-btn {
  width: 24px;
  height: 24px;
  margin-left: 4px;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: var(--light-bg);
  color: var(--main-purple-color);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: 0.2s;
}
.similar-vote-btn:hover {
  background: var(--main-purple-color);
  color: #fff;
}
.similar-vote-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.similar-vote-btn {
  width: 26px;
  height: 26px;
  margin-left: 4px;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: var(--light-bg);
  color: var(--icons-color);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.similar-vote-btn:hover {
  transform: scale(1.1);
}
.similar-vote-btn--active {
  background: var(--main-purple-color);
  color: #fff;
  border-color: var(--main-purple-color);
  transform: scale(1.15);
  box-shadow: 0 4px 10px rgba(139, 0, 255, 0.3);
}

.similar-vote-btn--click {
  transform: scale(0.9);
}

.modal-card-fav--active i {
  color: var(--main-purple-color);
}

.tippy-box[data-theme=sticker-list] {
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.08), 0px 4px 16px rgba(0, 0, 0, 0.08);
}
.tippy-box[data-theme=sticker-list] .tippy-content {
  padding: 0;
}
.tippy-box[data-theme=sticker-list] .tippy-content .tabs {
  padding: 5px 9px;
}

.sticker__title {
  padding: 5px;
  margin-bottom: 5px;
  font-size: 15px;
  color: var(--main-text-color);
}
.sticker__list {
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  max-height: 250px;
}
.sticker__list--lock .sticker__item::after {
  content: "\e897";
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
  position: absolute;
  right: 0;
  top: 0;
  padding: 2px;
  font-size: 22px;
  border-radius: 50%;
  background: #5f6368;
}
.sticker__list--lock .sticker__item img { /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}
.sticker__pack {
  display: flex;
  padding: 10px 5px;
  border-top: 1px solid var(--border-color);
  margin-bottom: 0;
}
.sticker__pack-item {
  width: 36px;
  height: 36px;
  cursor: pointer;
  margin-right: 10px;
  padding: 5px;
  transition: all 0.2s;
  border-radius: 6px;
  flex-shrink: 0;
}
.sticker__pack-item:hover {
  background: var(--medium-bg);
}
.sticker__item {
  position: relative;
  width: 30%;
  padding: 5px;
  cursor: pointer;
  margin-right: 10px;
  margin-bottom: 10px;
  transition: all 0.2s;
  border-radius: 6px;
}
.sticker__item:hover {
  background: var(--medium-bg);
}
.sticker__item tgs-player {
  width: 100%;
  height: 100%;
}

.sticker__pack-item.tabs__item--active {
  border: none;
  background: var(--seconday-bg-color);
}

.top-users {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
.top-users__item {
  display: flex;
  padding: 15px;
  position: relative;
  align-items: center;
}
.top-users__avatar {
  height: 60px;
  width: 60px;
  margin-right: 15px;
  margin-left: 13px;
  flex-shrink: 0;
  position: relative;
}
.top-users__avatar img {
  border-radius: 6px;
}
.top-users__info {
  width: 100%;
}
.top-users__number {
  font-size: 13px;
}
.top-users__bar {
  width: 100%;
  height: 6px;
  background-color: var(--medium-bg);
  border-radius: var(--main-border-radius);
  margin: 8px 0;
  position: relative;
}
.top-users__bar--fill {
  position: absolute;
  background: var(--purple-btn-bg);
  height: 6px;
  top: -1px;
  left: -1px;
  border-radius: var(--main-border-radius);
}
.top-users__name {
  color: var(--main-text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}
.top-users__data {
  font-size: 14px;
  color: var(--secondary-text-color);
}

.top-users.owl-carousel {
  display: flex;
  flex-wrap: nowrap;
}

.tamada-block {
  background: var(--light-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  border-radius: var(--main-border-radius);
}
.tamada-block__bar {
  height: 24px;
  width: 270px;
  background: var(--medium-bg);
  border-radius: var(--main-border-radius);
  cursor: pointer;
  position: relative;
  display: flex;
}
@media screen and (max-width: 360px) {
  .tamada-block__bar {
    width: 235px;
  }
}
.tamada-block__bar-fill {
  border-radius: var(--main-border-radius);
  background: var(--purple-btn-bg);
  height: 24px;
  transition: width 0.5s ease-in-out;
}
.tamada-block__text {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 13px;
  font-weight: 600;
}
.tamada-block__diamond {
  position: absolute;
  top: -10px;
  left: -32px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--purple-btn-bg);
  border: 3px solid var(--light-bg);
}
.tamada-block__diamond::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 65%;
  height: 65%;
  background-image: url("/assets/gem.png");
  background-size: contain;
  background-position: center;
  transform: translate(-50%, -50%);
}

.modal-tamada__title {
  font-weight: 500;
  font-size: 21px;
  margin-bottom: 7px;
}
.modal-tamada__text {
  margin-bottom: 15px;
  font-size: 15px;
  line-height: 19px;
}
.modal-tamada__activity {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.modal-tamada__activity--true i {
  background: var(--green-color);
  color: white;
}
.modal-tamada__activity--false i {
  background: var(--red-color);
  color: white;
}
.modal-tamada__activity i {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  border-radius: 50%;
  font-size: 18px;
}

.notifications__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.notifications-subscription-btn {
  font-size: 22px;
}
.notifications__clear {
  margin-bottom: 10px;
  font-size: 16px;
  color: var(--main-text-color);
  padding: 0;
}
.notifications__clear span {
  font-size: 13px;
  color: var(--secondary-text-color);
}
.notifications__span-link {
  color: var(--main-purple-color);
}
.notifications__header-controls {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.notifications__mass-edit button {
  padding: 0 6px;
}
.notifications__mass-edit button i {
  font-size: 24px;
}
.notifications__mass-edit button:hover {
  color: var(--main-purple-color);
}
.notifications__item {
  display: flex;
  padding: 10px;
  border-radius: var(--main-border-radius);
  margin-bottom: 10px;
}
.notifications__item--not-read {
  background: var(--notification-not-read-color);
}
.notifications__name {
  color: var(--main-text-color);
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 20px;
}
.notifications__name a {
  color: var(--secondary-purple-color);
}
.notifications__date {
  font-size: 13px;
  color: var(--secondary-text-color);
}
.notifications__image {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  flex-shrink: 0;
}
.notifications__image img {
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--main-border-radius);
}
.notifications__wrapper {
  width: 100%;
}
.notifications__controls {
  margin-left: auto;
  align-self: flex-end;
  display: flex;
}
.notifications__controls button {
  padding: 0 5px;
}
.notifications__controls button:hover i {
  color: var(--main-purple-color);
}
.notifications__controls button i {
  font-size: 21px;
  color: var(--icons-color);
}

.new-card-notification {
  background: var(--medium-bg);
  font-size: 14px;
  padding: 10px 15px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cards-sort {
  display: flex;
  margin-bottom: 25px;
}
.cards-sort__item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: var(--main-border-radius);
  transition: all 0.3s;
  cursor: pointer;
  min-width: 0;
  font-size: 15px;
}
.cards-sort__item i {
  margin-right: 5px;
  font-size: 18px;
}
.cards-sort__item:nth-of-type(1) i {
  color: var(--green-color);
}
.cards-sort__item:nth-of-type(2) i {
  color: var(--red-color);
}
.cards-sort__item--active {
  background: var(--medium-bg);
  flex-grow: 1;
}
.cards-sort__item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cards-sort__item i {
  margin-right: 5px;
}

@media screen and (max-width: 900px) {
  .cards-sort__item:not(.cards-sort__item--active) span {
    display: none;
  }
}
.notifications button:disabled,
.notifications button.is-loading {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

.notifications__read-all-btn.is-loading i,
.notifications__clear.is-loading i,
.notifications__read-btn.is-loading i,
.notifications__delete.is-loading i {
  animation: notification-control-spin 0.8s linear infinite;
}

@keyframes notification-control-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.achievements__list {
  display: flex;
  margin-bottom: 20px;
}
.achievements__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 30px 0;
}
.achievements__header-icon {
  width: 90px;
  margin-bottom: 15px;
}
.achievements__header-title {
  font-weight: 600;
  font-size: 20px;
  color: var(--main-text-color);
  margin-bottom: 7px;
}
.achievements__header-description {
  font-size: 15px;
  color: var(--main-text-color);
}
.achievements__item {
  width: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.achievements__item--locked {
  filter: grayscale(85%);
}
.achievements__name {
  margin-top: 10px;
  text-align: center;
  color: var(--main-text-color);
  font-weight: 500;
}
.achievements__category {
  margin-bottom: 30px;
}
.achievements__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  margin: 18px 0;
}
.achievements__title span:last-of-type {
  font-size: 13px;
  color: var(--secondary-text-color);
}

.achievement {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.achievement__title {
  color: var(--main-text-color);
  font-size: 20px;
  font-weight: 500;
  margin: 20px 0 10px 0;
}
.achievement__image {
  width: 150px;
}
.achievement__description {
  color: var(--main-text-color);
  margin-bottom: 20px;
  font-size: 15px;
  text-align: center;
}
.achievement__condition {
  font-size: 14px;
  color: var(--secondary-text-color);
  text-align: center;
}
.achievement__progress {
  display: flex;
  align-items: center;
  width: 100%;
}
.achievement__progress span {
  font-size: 13px;
  color: var(--secondary-text-color);
}
.achievement__bar {
  width: 100%;
  height: 6px;
  background-color: var(--medium-bg);
  border-radius: var(--main-border-radius);
  margin: 20px 10px 12px 0;
  position: relative;
}
.achievement__bar--fill {
  position: absolute;
  background: var(--purple-btn-bg);
  height: 6px;
  top: -1px;
  left: -1px;
  border-radius: var(--main-border-radius);
}

.mb-achievement-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 6, 20, 0.58);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.mb-achievement-overlay.is-active {
  display: flex;
}
.mb-achievement-overlay.is-hiding .mb-achievement-popup {
  animation: mb-achievement-popup-hide 0.22s ease forwards;
}

.mb-achievement-popup {
  position: relative;
  width: 100%;
  max-width: 520px;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(180deg, #1f1630 0%, #130d1f 100%);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.38);
  color: #fff;
  animation: mb-achievement-popup-show 0.35s ease forwards;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.mb-achievement-popup__glow {
  position: absolute;
  top: -90px;
  left: 50%;
  width: 260px;
  height: 260px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(139, 0, 255, 0.42) 0%, rgba(139, 0, 255, 0) 72%);
  pointer-events: none;
}
.mb-achievement-popup__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.mb-achievement-popup__close:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: scale(1.06);
}
.mb-achievement-popup__header {
  position: relative;
  padding: 28px 28px 12px;
  text-align: center;
}
.mb-achievement-popup__label {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #caa8ff;
}
.mb-achievement-popup__title {
  font-size: 28px;
  line-height: 1.15;
  font-weight: 800;
  word-break: break-word;
}
.mb-achievement-popup__body {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 18px 28px 28px;
}
.mb-achievement-popup__image-wrap {
  position: relative;
  flex: 0 0 132px;
  width: 132px;
  height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.04) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 8px 30px rgba(139, 0, 255, 0.2);
}
.mb-achievement-popup__image {
  max-width: 92px;
  max-height: 92px;
  -o-object-fit: contain;
     object-fit: contain;
  animation: mb-achievement-icon-pop 0.45s ease 0.12s both;
  filter: drop-shadow(0 8px 20px rgba(139, 0, 255, 0.35));
}
.mb-achievement-popup__content {
  flex: 1 1 auto;
  min-width: 0;
}
.mb-achievement-popup__desc {
  margin-bottom: 14px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
  word-break: break-word;
}
.mb-achievement-popup__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, #8b00ff 0%, #6f22ff 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(139, 0, 255, 0.3);
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
.mb-achievement-popup__link:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(139, 0, 255, 0.38);
}

@keyframes mb-achievement-popup-show {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes mb-achievement-popup-hide {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(12px) scale(0.94);
  }
}
@keyframes mb-achievement-icon-pop {
  0% {
    opacity: 0;
    transform: scale(0.72) rotate(-8deg);
  }
  60% {
    opacity: 1;
    transform: scale(1.08) rotate(3deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}
@media (max-width: 640px) {
  .mb-achievement-overlay {
    padding: 14px;
  }
  .mb-achievement-popup {
    max-width: 100%;
  }
  .mb-achievement-popup__header {
    padding: 24px 18px 10px;
  }
  .mb-achievement-popup__title {
    font-size: 24px;
  }
  .mb-achievement-popup__body {
    flex-direction: column;
    gap: 16px;
    padding: 16px 18px 22px;
    text-align: center;
  }
  .mb-achievement-popup__image-wrap {
    width: 116px;
    height: 116px;
    flex-basis: 116px;
  }
  .mb-achievement-popup__image {
    max-width: 82px;
    max-height: 82px;
  }
  .mb-achievement-popup__desc {
    font-size: 14px;
  }
  .mb-achievement-popup__link {
    width: 100%;
  }
}
.achievement-hall {
  padding-bottom: 44px;
}
.achievement-hall__hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  overflow: hidden;
  margin: 18px 0 36px;
  padding: 28px;
  border-radius: 30px;
  background: radial-gradient(circle at 12% 15%, rgba(255, 177, 59, 0.24), transparent 30%), radial-gradient(circle at 92% 20%, rgba(139, 0, 255, 0.18), transparent 34%), linear-gradient(135deg, var(--light-bg), rgba(139, 0, 255, 0.035));
  border: 1px solid var(--border-color);
  box-shadow: 0 18px 55px rgba(35, 35, 35, 0.08);
}
.achievement-hall__hero-bg {
  position: absolute;
  right: -80px;
  top: -100px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(139, 0, 255, 0.12);
  filter: blur(12px);
}
.achievement-hall__trophy {
  position: relative;
  z-index: 2;
  flex: 0 0 116px;
  width: 116px;
  height: 116px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 34px;
  background: var(--gradient-color);
  box-shadow: 0 18px 38px rgba(139, 0, 255, 0.22);
}
.achievement-hall__trophy img {
  width: 80px;
  height: 80px;
  -o-object-fit: contain;
     object-fit: contain;
}
.achievement-hall__hero-content {
  position: relative;
  z-index: 2;
  flex: 1;
}
.achievement-hall__label {
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(139, 0, 255, 0.08);
  color: var(--secondary-purple-color);
  font-size: 13px;
  font-weight: 800;
}
.achievement-hall__name {
  color: var(--title-color);
  font-size: 34px;
  line-height: 1.1;
  font-weight: 900;
}
.achievement-hall__text {
  margin-top: 8px;
  color: var(--secondary-text-color);
  font-size: 15px;
}
.achievement-hall__text b {
  color: var(--title-color);
}
.achievement-hall__main-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}
.achievement-hall__main-bar {
  flex: 1;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--seconday-bg-color);
}
.achievement-hall__main-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--gradient-color);
  box-shadow: 0 0 18px rgba(139, 0, 255, 0.35);
}
.achievement-hall__main-percent {
  min-width: 54px;
  color: var(--title-color);
  font-size: 18px;
  font-weight: 900;
  text-align: right;
}
.achievement-hall__group {
  margin-bottom: 38px;
}
.achievement-hall__group-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}
.achievement-hall__group-overline {
  margin-bottom: 4px;
  color: var(--secondary-text-color);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.achievement-hall__group-title {
  margin: 0;
  color: var(--title-color);
  font-size: 23px;
  font-weight: 900;
}
.achievement-hall__group-stat {
  min-width: 150px;
  text-align: right;
}
.achievement-hall__group-count {
  margin-bottom: 7px;
  color: var(--secondary-text-color);
  font-size: 14px;
  font-weight: 800;
}
.achievement-hall__group-bar {
  width: 150px;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--seconday-bg-color);
}
.achievement-hall__group-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8b00ff, #ff3d75);
}
.achievement-hall__carousel .owl-stage {
  display: flex;
  padding: 8px 0 18px;
}
.achievement-hall__carousel .owl-item {
  display: flex;
}
.achievement-hall__carousel .owl-nav button {
  width: 38px;
  height: 38px;
  border-radius: 50% !important;
  background: var(--light-bg) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  color: var(--title-color) !important;
  transition: 0.2s ease;
}
.achievement-hall__carousel .owl-nav button:hover {
  transform: translateY(-2px);
  color: var(--secondary-purple-color) !important;
}
.achievement-hall__item {
  position: relative;
  width: 164px;
  min-height: 236px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 14px 16px;
  border-radius: 26px;
  background: radial-gradient(circle at 50% 15%, rgba(139, 0, 255, 0.08), transparent 42%), var(--light-bg);
  border: 1px solid var(--border-color);
  margin-right: 10px;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.achievement-hall__item:hover {
  transform: translateY(-6px);
  border-color: rgba(139, 0, 255, 0.26);
}
.achievement-hall__item--open::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 21px;
  border: 1px solid rgba(139, 0, 255, 0.09);
  pointer-events: none;
}
.achievement-hall__item--closed {
  background: radial-gradient(circle at 50% 15%, rgba(0, 0, 0, 0.035), transparent 42%), var(--light-bg);
}
.achievement-hall__item--closed .achievement-hall__medal {
  filter: grayscale(1);
  opacity: 0.46;
}
.achievement-hall__item--closed .achievement-hall__item-name {
  color: var(--secondary-text-color);
  opacity: 0.72;
}
.achievement-hall__status {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 27px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(139, 0, 255, 0.08);
  color: var(--secondary-purple-color);
  font-size: 12px;
}
.achievement-hall__medal {
  position: relative;
  width: 108px;
  height: 108px;
  margin-bottom: 14px;
  border-radius: 50%;
  transition: transform 0.25s ease;
}
.achievement-hall__medal img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.13));
}
.achievement-hall__item:hover .achievement-hall__medal {
  transform: scale(1.06) rotate(-2deg);
}
.achievement-hall__item-name {
  min-height: 44px;
  color: var(--title-color);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
}
.achievement-hall__item-progress {
  width: 100%;
  margin-top: auto;
  padding-top: 14px;
}
.achievement-hall__item-bar {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--seconday-bg-color);
}
.achievement-hall__item-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8b00ff, #ff3d75);
}
.achievement-hall__item-count {
  margin-top: 6px;
  color: var(--secondary-text-color);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

#modal-achievement-info .modal__container,
#modal-achievement-info .modal__content {
  overflow: visible;
  border-radius: 30px;
}
#modal-achievement-info .modal__close {
  z-index: 20;
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  color: var(--title-color);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

.achievement {
  position: relative;
  overflow: hidden;
  padding: 70px 34px 30px;
  text-align: center;
  border-radius: 28px;
  background: radial-gradient(circle at 50% 3%, rgba(139, 0, 255, 0.22), transparent 34%), radial-gradient(circle at 50% 18%, rgba(255, 177, 59, 0.11), transparent 28%), linear-gradient(180deg, var(--light-bg), rgba(139, 0, 255, 0.035));
  border: 1px solid var(--border-color);
}
.achievement__glow {
  position: absolute;
  left: 50%;
  top: -135px;
  width: 360px;
  height: 360px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(139, 0, 255, 0.16);
  filter: blur(14px);
  pointer-events: none;
}
.achievement__image {
  position: relative;
  z-index: 2;
  width: 170px;
  height: 170px;
  margin: 0 auto 26px;
  border-radius: 50%;
}
.achievement__image::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, rgba(139, 0, 255, 0.14), rgba(255, 61, 117, 0.28), rgba(255, 177, 59, 0.22), rgba(139, 0, 255, 0.14));
  animation: achievementModalRotate 9s linear infinite;
}
.achievement__image::after {
  content: "";
  position: absolute;
  inset: -42px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 0, 255, 0.2), transparent 62%);
  pointer-events: none;
}
.achievement__image img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.18));
}
.achievement__title {
  position: relative;
  z-index: 2;
  color: var(--title-color);
  font-size: 30px;
  font-weight: 900;
  line-height: 1.15;
}
.achievement__description {
  position: relative;
  z-index: 2;
  max-width: 520px;
  margin: 14px auto 0;
  color: var(--secondary-text-color);
  font-size: 17px;
  line-height: 1.55;
}
.achievement__condition-box {
  position: relative;
  z-index: 2;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 440px;
  margin: 24px auto 0;
  padding: 16px 22px;
  border-radius: 22px;
  background: rgba(139, 0, 255, 0.09);
  border: 1px solid rgba(139, 0, 255, 0.13);
  text-align: left;
}
.achievement__condition-label {
  margin-bottom: 7px;
  color: var(--secondary-purple-color);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-align: center;
}
.achievement__condition {
  color: var(--main-text-color);
  font-size: 16px;
  line-height: 1.45;
}
.achievement__progress {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 34px;
}
.achievement__progress > span {
  min-width: 68px;
  color: var(--title-color);
  font-size: 20px;
  font-weight: 900;
  text-align: right;
}
.achievement__bar {
  flex: 1;
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--seconday-bg-color);
}
.achievement__bar--fill {
  height: 100%;
  min-width: 8px;
  border-radius: inherit;
  background: var(--gradient-color);
  box-shadow: 0 0 18px rgba(139, 0, 255, 0.32);
  transition: width 0.3s ease;
}

@keyframes achievementModalRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
body.dark .achievement-hall__hero {
  background: radial-gradient(circle at 12% 15%, rgba(255, 177, 59, 0.1), transparent 30%), radial-gradient(circle at 92% 20%, rgba(139, 0, 255, 0.22), transparent 34%), linear-gradient(135deg, #171717, #141018);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.24);
}
body.dark .achievement-hall__item {
  background: radial-gradient(circle at 50% 15%, rgba(139, 0, 255, 0.13), transparent 42%), #171717;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}
body.dark .achievement-hall__item:hover {
  box-shadow: 0 22px 45px rgba(139, 0, 255, 0.18);
}
body.dark .achievement-hall__item--closed {
  background: radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.035), transparent 42%), #171717;
}
body.dark .achievement-hall__status {
  background: rgba(139, 0, 255, 0.14);
}
body.dark .achievement-hall__carousel .owl-nav button {
  background: #171717 !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}
body.dark #modal-achievement-info .modal__close {
  background: #202020;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}
body.dark .achievement {
  background: radial-gradient(circle at 50% 3%, rgba(139, 0, 255, 0.28), transparent 34%), radial-gradient(circle at 50% 18%, rgba(255, 177, 59, 0.08), transparent 28%), linear-gradient(180deg, #171717, #141018);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
body.dark .achievement__condition-box {
  background: rgba(139, 0, 255, 0.13);
  border-color: rgba(191, 148, 255, 0.18);
}
body.dark .achievement__bar {
  background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
  .achievement-hall__hero {
    display: block;
    padding: 24px 18px;
    text-align: center;
  }
  .achievement-hall__trophy {
    margin: 0 auto 18px;
  }
  .achievement-hall__label {
    margin-left: auto;
    margin-right: auto;
  }
  .achievement-hall__name {
    font-size: 27px;
  }
  .achievement-hall__group-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .achievement-hall__group-stat, .achievement-hall__group-bar {
    width: 100%;
    min-width: 0;
    text-align: left;
  }
  .achievement-hall__item {
    width: 146px;
    min-height: 220px;
    padding: 16px 12px;
  }
  .achievement-hall__medal {
    width: 94px;
    height: 94px;
  }
  .achievement-hall__item-name {
    font-size: 14px;
  }
  .achievement {
    padding: 58px 20px 24px;
  }
  .achievement__image {
    width: 142px;
    height: 142px;
    margin-bottom: 22px;
  }
  .achievement__image::before {
    inset: -14px;
  }
  .achievement__image::after {
    inset: -34px;
  }
  .achievement__title {
    font-size: 24px;
  }
  .achievement__description {
    font-size: 15px;
  }
  .achievement__condition-box {
    width: auto;
    padding: 14px 16px;
  }
  .achievement__condition {
    font-size: 14px;
  }
  .achievement__progress {
    gap: 12px;
    margin-top: 26px;
  }
  .achievement__progress > span {
    min-width: 54px;
    font-size: 16px;
  }
}
.achievement__meta {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 520px;
  margin: 22px auto 0;
}
.achievement__meta-item {
  padding: 12px 10px;
  border-radius: 16px;
  background: rgba(139, 0, 255, 0.07);
  border: 1px solid rgba(139, 0, 255, 0.1);
  text-align: center;
}
.achievement__meta-item b {
  display: block;
  margin-top: 4px;
  color: var(--title-color);
  font-size: 15px;
  font-weight: 900;
}
.achievement__meta-item--rarity {
  background: linear-gradient(135deg, rgba(139, 0, 255, 0.1), rgba(255, 61, 117, 0.08));
}
.achievement__meta-label {
  display: block;
  color: var(--secondary-text-color);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.achievement-hall__rarity {
  margin-top: 8px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(139, 0, 255, 0.08);
  color: var(--secondary-purple-color);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

body.dark .achievement__meta-item {
  background: rgba(139, 0, 255, 0.12);
  border-color: rgba(191, 148, 255, 0.16);
}
body.dark .achievement-hall__rarity {
  background: rgba(139, 0, 255, 0.14);
}

@media (max-width: 480px) {
  .achievement__meta {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .achievement__meta-item {
    padding: 8px 6px;
    border-radius: 12px;
  }
  .achievement__meta-label {
    font-size: 9px;
    letter-spacing: 0.04em;
  }
  .achievement__meta-item b {
    font-size: 12px;
  }
}
.rating {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
.rating__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rating__item {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 22px;
}
.rating__user {
  display: flex;
}
.rating__status {
  margin-left: 5px;
  width: 14px;
  cursor: pointer;
  padding: 0 5px;
  box-sizing: content-box;
  margin-top: 1px;
}
.rating__status[data-name=PRO] {
  width: 30px;
}
.rating__status img {
  -o-object-fit: contain;
     object-fit: contain;
}
.rating__number {
  font-size: 13px;
  color: var(--main-text-color);
  width: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  position: relative;
}
.rating__number i {
  position: absolute;
  top: 7px;
  font-size: 36px;
  right: -5px;
}
.rating__number-up {
  color: var(--green-color);
}
.rating__number-down {
  color: var(--red-color);
}
.rating__image {
  height: 60px;
  width: 60px;
  margin-right: 15px;
  margin-left: 13px;
  flex-shrink: 0;
  position: relative;
}
.rating__image img {
  border-radius: var(--main-border-radius);
}
.rating__content {
  width: 100%;
}
.rating__name {
  color: var(--main-text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}
.rating__bar {
  width: 100%;
  height: 6px;
  background-color: var(--medium-bg);
  border-radius: var(--main-border-radius);
  margin: 8px 0;
  position: relative;
}
.rating__bar--fill {
  position: absolute;
  background: var(--purple-btn-bg);
  height: 6px;
  top: -1px;
  left: -1px;
  border-radius: var(--main-border-radius);
}
.rating__data {
  font-size: 14px;
  color: var(--secondary-text-color);
}

.diamond-rating {
  position: fixed;
  width: 30px;
  height: 30px;
  background-image: url("/assets/gem.png");
  background-size: contain;
  background-repeat: no-repeat;
  animation: fall-rating 5s linear, fadeOut-rating 1s linear forwards;
  animation-delay: 0s, 4s;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
  top: 0;
  z-index: 99;
}

@keyframes fall-rating {
  from {
    transform: translateY(-100px) rotate(0deg);
  }
  to {
    transform: translateY(100vh) rotate(360deg);
  }
}
@keyframes fadeOut-rating {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.vote {
  max-width: 610px;
  margin: 20px auto;
  padding: 20px;
  background: var(--medium-bg);
  border-radius: 12px;
  position: relative;
}
.vote__icon {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--dark-grey-bg);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vote__title {
  margin-bottom: 15px;
  font-size: 24px;
  text-align: center;
  margin-top: 0;
}
.vote__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vote__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--dark-grey-bg);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}
.vote__option:hover {
  opacity: 0.8;
}
.vote__radio {
  width: 18px;
  height: 18px;
  accent-color: var(--purple-btn-bg);
}
.vote__label {
  font-size: 16px;
}

.vote__already {
  margin: 10px 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--light-bg);
  font-weight: 600;
}

.battle-home {
  --bh-bg: var(--body-bg, #f4f1f7);
  --bh-card: var(--block-bg, #fff);
  --bh-card-2: var(--secondary-bg, #f9f6fc);
  --bh-text: var(--text-color, #241f2d);
  --bh-muted: var(--text-muted, #877d92);
  --bh-border: rgba(75, 57, 100, .12);
  --bh-line: rgba(75, 57, 100, .08);
  --bh-main: var(--main-color, #7b4df2);
  --bh-pink: #b5658d;
  --bh-soft: rgba(123, 77, 242, .1);
  --bh-soft-pink: rgba(181, 101, 141, .1);
  padding: 14px 0 34px;
  color: var(--bh-text);
  background: radial-gradient(circle at 18% 0%, rgba(123, 77, 242, 0.09), transparent 30%), radial-gradient(circle at 90% 10%, rgba(181, 101, 141, 0.08), transparent 28%), var(--bh-bg);
}
body.dark .battle-home, .theme-dark .battle-home, [data-theme=dark] .battle-home {
  --bh-bg: var(--body-bg, #100f16);
  --bh-card: var(--block-bg, #191620);
  --bh-card-2: var(--secondary-bg, #211d2a);
  --bh-text: var(--text-color, #f6f1fb);
  --bh-muted: var(--text-muted, #aaa1b5);
  --bh-border: rgba(255, 255, 255, .09);
  --bh-line: rgba(255, 255, 255, .07);
  --bh-main: var(--main-color, #9a7cff);
  --bh-pink: #d07996;
  --bh-soft: rgba(154, 124, 255, .13);
  --bh-soft-pink: rgba(208, 121, 150, .13);
}
.battle-home__leader {
  position: relative;
  display: grid;
  grid-template-columns: 44px 46px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border-radius: 15px;
  color: var(--bh-text);
  background: var(--bh-soft);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.battle-home__leader:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(35, 25, 50, 0.09);
}
.battle-home__leader--first {
  background: linear-gradient(135deg, rgba(123, 77, 242, 0.16), rgba(181, 101, 141, 0.12));
}
.battle-home__leader--first b {
  color: #fff;
  background: linear-gradient(135deg, var(--bh-pink), var(--bh-main));
}
.battle-home__leader b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  color: var(--bh-main);
  background: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-weight: 900;
}
.battle-home__leader-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border: 2px solid rgba(123, 77, 242, 0.25);
  border-radius: 50%;
  background: var(--bh-card);
  color: var(--bh-main);
  font-size: 18px;
  font-weight: 900;
}
.battle-home__leader-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.battle-home__leader-main {
  min-width: 0;
}
.battle-home__leader-main strong,
.battle-home__leader-main span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.battle-home__leader-main strong {
  font-size: 13px;
  font-weight: 800;
}
.battle-home__leader-main span {
  margin-top: 3px;
  color: var(--bh-muted);
  font-size: 11px;
  font-weight: 800;
}
.battle-home svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.battle-home__inner {
  width: min(1320px, 100% - 28px);
  margin: 0 auto;
}
.battle-home__rank-box {
  width: 100%;
  cursor: pointer;
  text-align: left;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.battle-home__rank-box:hover {
  transform: translateY(-2px);
  border-color: rgba(123, 77, 242, 0.35);
  box-shadow: 0 18px 34px rgba(35, 25, 50, 0.11);
}
.battle-home__rank-hint {
  display: block;
  margin-top: 10px;
  color: var(--bh-muted);
  font-size: 11px;
  font-weight: 700;
}
.battle-home__ranks-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.battle-home__ranks-modal.is-active {
  display: flex;
}
.battle-home__ranks-bg {
  position: absolute;
  inset: 0;
  background: rgba(14, 10, 18, 0.64);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.battle-home__ranks-box {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--bh-border);
  border-radius: 24px;
  background: linear-gradient(145deg, var(--bh-card), var(--bh-card-2));
  box-shadow: 0 22px 50px rgba(35, 25, 50, 0.16);
}
.battle-home__ranks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.battle-home__ranks-head span {
  display: block;
  color: var(--bh-main);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.battle-home__ranks-head strong {
  display: block;
  margin-top: 3px;
  color: var(--bh-text);
  font-size: 24px;
  font-weight: 700;
}
.battle-home__ranks-head button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 12px;
  color: var(--bh-text);
  background: var(--bh-soft);
  font-size: 24px;
  cursor: pointer;
}
.battle-home__ranks-head button:hover {
  background: rgba(123, 77, 242, 0.16);
}
.battle-home__ranks-note {
  padding: 14px;
  margin-bottom: 14px;
  border-radius: 18px;
  color: var(--bh-muted);
  background: var(--bh-soft);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
}
.battle-home__ranks-list {
  display: grid;
  gap: 10px;
}
.battle-home__rank-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--bh-border);
  border-radius: 18px;
  background: var(--bh-card);
}
.battle-home__rank-card--current {
  border-color: rgba(123, 77, 242, 0.45);
  background: linear-gradient(135deg, rgba(123, 77, 242, 0.12), rgba(181, 101, 141, 0.08));
  box-shadow: inset 0 0 0 1px rgba(123, 77, 242, 0.1);
}
.battle-home__rank-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--bh-soft);
  font-size: 24px;
}
.battle-home__rank-content {
  min-width: 0;
}
.battle-home__rank-content strong {
  display: block;
  color: var(--bh-text);
  font-size: 16px;
  font-weight: 700;
}
.battle-home__rank-content span {
  display: block;
  margin-top: 2px;
  color: var(--bh-main);
  font-size: 11px;
  font-weight: 800;
}
.battle-home__rank-content p {
  margin: 6px 0 0;
  color: var(--bh-muted);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 600;
}
.battle-home__rank-card em {
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--bh-main);
  background: var(--bh-soft);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}
.battle-home__ranks-footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.battle-home__ranks-footer div {
  padding: 12px;
  border-radius: 16px;
  background: var(--bh-soft);
}
.battle-home__ranks-footer b {
  display: block;
  color: var(--bh-text);
  font-size: 13px;
  font-weight: 700;
}
.battle-home__ranks-footer span {
  display: block;
  margin-top: 4px;
  color: var(--bh-muted);
  font-size: 11px;
  font-weight: 700;
}
.battle-home__hero, .battle-home__arena, .battle-home__rank-box, .battle-home__buff-active, .battle-home__resources, .battle-home__stats, .battle-home__leaders-panel, .battle-home__quests-panel, .battle-home__modal-box {
  border: 1px solid var(--bh-border);
  border-radius: 22px;
  background: linear-gradient(145deg, var(--bh-card), var(--bh-card-2));
  box-shadow: 0 16px 38px rgba(35, 25, 50, 0.07);
}
.battle-home__hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 16px;
}
.battle-home__hero-main {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}
.battle-home__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--bh-pink), var(--bh-main));
  box-shadow: 0 12px 24px rgba(123, 77, 242, 0.2);
}
.battle-home__mark svg {
  width: 25px;
  height: 25px;
}
.battle-home__overline, .battle-home__arena-head span, .battle-home__panel-title span, .battle-home__modal-head span {
  display: block;
  margin-bottom: 3px;
  color: var(--bh-main);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.battle-home__title {
  margin: 0;
  font-size: 25px;
  line-height: 1.1;
  font-weight: 700;
}
.battle-home__subtitle {
  margin: 5px 0 0;
  color: var(--bh-muted);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
}
.battle-home__hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.battle-home__hero-link, .battle-home__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: 14px;
  border: 0;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.battle-home__hero-link {
  color: var(--bh-text);
  background: var(--bh-soft);
}
.battle-home__hero-link:hover {
  transform: translateY(-1px);
}
.battle-home__hero-link--awakening {
  color: var(--bh-main);
  background: rgba(123, 77, 242, 0.13);
}
.battle-home__hero-link--reroll {
  color: var(--bh-pink);
  background: rgba(181, 101, 141, 0.13);
}
.battle-home__play {
  gap: 8px;
  color: #fff;
  background: linear-gradient(135deg, var(--bh-pink), var(--bh-main));
  box-shadow: 0 12px 24px rgba(123, 77, 242, 0.2);
}
.battle-home__play:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 28px rgba(123, 77, 242, 0.26);
}
.battle-home__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 22px;
  align-items: start;
}
.battle-home__main, .battle-home__aside {
  display: grid;
  gap: 14px;
}
.battle-home__arena {
  position: relative;
  overflow: hidden;
  padding: 16px;
}
.battle-home__arena:before {
  content: "";
  position: absolute;
  inset: 58px 16px 16px;
  border-radius: 18px;
  background: linear-gradient(90deg, var(--bh-line) 1px, transparent 1px), linear-gradient(0deg, var(--bh-line) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.55;
  pointer-events: none;
}
.battle-home__arena-head, .battle-home__rank-top, .battle-home__progress > div, .battle-home__modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.battle-home__arena-head {
  position: relative;
  z-index: 1;
  margin-bottom: 14px;
}
.battle-home__arena-head strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
}
.battle-home__arena-head a {
  color: var(--bh-main);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.battle-home__squad {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 33px;
}
.battle-home__fighter {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--bh-border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.62);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
body.dark .battle-home__fighter, .theme-dark .battle-home__fighter, [data-theme=dark] .battle-home__fighter {
  background: rgba(255, 255, 255, 0.04);
}
.battle-home__fighter:hover {
  transform: translateY(-4px);
  border-color: rgba(123, 77, 242, 0.42);
  box-shadow: 0 16px 30px rgba(35, 25, 50, 0.13);
}
.battle-home__fighter-image {
  position: relative;
  width: 100%;
  aspect-ratio: 74/111;
  background-position: center top;
  background-size: cover;
  background-color: var(--bh-soft);
}
.battle-home__fighter-image:after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(0deg, rgba(18, 13, 25, 0.4), transparent);
}
.battle-home__fighter-info {
  padding: 10px;
}
.battle-home__seal {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 6px 9px;
  border-radius: 999px;
  color: var(--bh-main);
  background: var(--bh-soft);
  font-size: 11px;
  font-weight: 700;
}
.battle-home__seal svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}
.battle-home__seal span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.battle-home__fighter-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}
.battle-home__fighter-stats span {
  display: grid;
  gap: 1px;
  padding: 6px 4px;
  border-radius: 10px;
  color: var(--bh-muted);
  background: rgba(85, 70, 105, 0.08);
  font-size: 9px;
  font-weight: 700;
  text-align: center;
}
.battle-home__fighter-stats b {
  color: var(--bh-text);
  font-size: 12px;
}
.battle-home__empty-squad {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  gap: 7px;
  min-height: 360px;
  border: 1px dashed rgba(123, 77, 242, 0.34);
  border-radius: 18px;
  color: var(--bh-text);
  background: var(--bh-soft);
  text-decoration: none;
}
.battle-home__empty-squad svg {
  width: 36px;
  height: 36px;
  color: var(--bh-main);
}
.battle-home__empty-squad span {
  color: var(--bh-muted);
  font-size: 13px;
  font-weight: 800;
}
.battle-home__empty-squad strong {
  font-size: 14px;
  font-weight: 700;
}
.battle-home__rank-box, .battle-home__stats, .battle-home__leaders-panel, .battle-home__quests-panel {
  padding: 14px;
}
.battle-home__rank-top span, .battle-home__progress span, .battle-home__resources span, .battle-home__buff-active small, .battle-home__stats-grid span {
  color: var(--bh-muted);
  font-size: 11px;
  font-weight: 800;
}
.battle-home__rank-top strong {
  display: block;
  margin-top: 2px;
  font-size: 21px;
  font-weight: 700;
}
.battle-home__streak {
  padding: 8px 10px;
  border-radius: 13px;
  background: var(--bh-soft-pink);
  color: var(--bh-pink);
  font-size: 13px;
  font-weight: 700;
}
.battle-home__progress {
  margin-top: 13px;
}
.battle-home__progress b {
  font-size: 12px;
  font-weight: 700;
}
.battle-home__progress i {
  display: block;
  overflow: hidden;
  height: 8px;
  margin-top: 7px;
  border-radius: 999px;
  background: var(--bh-line);
}
.battle-home__progress em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--bh-pink), var(--bh-main));
}
.battle-home__buff-active {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 18px;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 12px;
  color: var(--bh-text);
  cursor: pointer;
  text-align: left;
}
.battle-home__buff-active strong,
.battle-home__buff-active em {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.battle-home__buff-active strong {
  margin-top: 1px;
  font-size: 14px;
  font-weight: 700;
}
.battle-home__buff-active em {
  margin-top: 1px;
  color: var(--bh-pink);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}
.battle-home__buff-active > svg {
  color: var(--bh-main);
}
.battle-home__buff-active-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 15px;
  background: var(--bh-soft);
  font-size: 20px;
}
.battle-home__resources {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 10px;
}
.battle-home__resources a {
  display: block;
  padding: 11px;
  border-radius: 15px;
  background: var(--bh-soft);
  color: var(--bh-text);
  text-decoration: none;
}
.battle-home__resources a:last-child {
  background: var(--bh-soft-pink);
}
.battle-home__resources strong {
  display: block;
  margin-top: 2px;
  font-size: 18px;
  font-weight: 600;
}
.battle-home__resources em {
  display: block;
  margin-top: 4px;
  color: var(--bh-main);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}
.battle-home__panel-title {
  margin-bottom: 10px;
}
.battle-home__panel-title strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
}
.battle-home__stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.battle-home__stats-grid div {
  padding: 10px;
  border-radius: 15px;
  background: var(--bh-soft);
}
.battle-home__stats-grid strong {
  display: block;
  margin-top: 2px;
  font-size: 18px;
  font-weight: 600;
}
.battle-home__quests {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.battle-home__quest {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(180px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: var(--bh-soft);
}
.battle-home__quest b,
.battle-home__quest small {
  display: block;
}
.battle-home__quest b {
  font-size: 13px;
  font-weight: 700;
}
.battle-home__quest small {
  margin-top: 4px;
  color: var(--bh-muted);
  font-size: 11px;
  font-weight: 800;
}
.battle-home__quest button {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 11px;
  color: #fff;
  background: var(--bh-main);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}
.battle-home__quest button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: rgba(123, 77, 242, 0.45);
}
.battle-home__quest-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.battle-home__quest-progress div {
  overflow: hidden;
  height: 7px;
  border-radius: 999px;
  background: var(--bh-line);
}
.battle-home__quest-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--bh-pink), var(--bh-main));
}
.battle-home__quest-progress span {
  color: var(--bh-muted);
  font-size: 12px;
  font-weight: 700;
}
.battle-home__leaders {
  display: grid;
  gap: 8px;
}
.battle-home__leader {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 9px;
  border-radius: 14px;
  background: var(--bh-soft);
}
.battle-home__leader b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 11px;
  color: var(--bh-main);
  background: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 700;
}
.battle-home__leader strong,
.battle-home__leader span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.battle-home__leader strong {
  font-size: 13px;
  font-weight: 700;
}
.battle-home__leader span {
  margin-top: 1px;
  color: var(--bh-muted);
  font-size: 11px;
  font-weight: 800;
}
.battle-home__empty-small {
  padding: 10px;
  border-radius: 14px;
  color: var(--bh-muted);
  background: var(--bh-soft);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.battle-home__modal {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.battle-home__modal--active {
  display: flex;
}
.battle-home__modal-bg {
  position: absolute;
  inset: 0;
  background: rgba(13, 10, 18, 0.66);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.battle-home__modal-box {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 14px;
}
.battle-home__modal-head {
  margin-bottom: 12px;
}
.battle-home__modal-head strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
}
.battle-home__modal-head button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 12px;
  color: var(--bh-text);
  background: var(--bh-soft);
  font-size: 24px;
  cursor: pointer;
}
.battle-home__buff-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.battle-home__buff {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--bh-border);
  border-radius: 16px;
  background: var(--bh-card);
  cursor: pointer;
}
.battle-home__buff input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.battle-home__buff--active {
  border-color: rgba(123, 77, 242, 0.55);
  box-shadow: inset 0 0 0 1px rgba(123, 77, 242, 0.16);
}
.battle-home__buff--locked {
  opacity: 0.45;
  cursor: not-allowed;
}
.battle-home__buff-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: var(--bh-soft);
  font-size: 19px;
}
.battle-home__buff-info {
  min-width: 0;
}
.battle-home__buff-info strong,
.battle-home__buff-info small,
.battle-home__buff-info em {
  display: block;
}
.battle-home__buff-info strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.battle-home__buff-info small {
  margin-top: 2px;
  color: var(--bh-pink);
  font-size: 11px;
  font-weight: 700;
}
.battle-home__buff-info em {
  margin-top: 4px;
  color: var(--bh-muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}
.battle-home__buff-count {
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--bh-main);
  background: var(--bh-soft);
  font-size: 11px;
  font-weight: 700;
}
@media (max-width: 1200px) {
  .battle-home__layout {
    grid-template-columns: 1fr;
  }
  .battle-home__aside {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .battle-home__stats, .battle-home__leaders-panel {
    align-self: stretch;
  }
}
@media (max-width: 900px) {
  .battle-home__hero {
    align-items: stretch;
    flex-direction: column;
  }
  .battle-home__hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .battle-home__squad {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .battle-home__quests {
    grid-template-columns: 1fr;
  }
  .battle-home__quest {
    grid-template-columns: 1fr;
  }
  .battle-home__aside {
    grid-template-columns: 1fr;
  }
  .battle-home__buff-list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 540px) {
  .battle-home__inner {
    width: calc(100% - 16px);
  }
  .battle-home__hero-main {
    align-items: flex-start;
  }
  .battle-home__title {
    font-size: 22px;
  }
  .battle-home__hero-actions {
    grid-template-columns: 1fr;
  }
  .battle-home__squad {
    grid-template-columns: 1fr;
  }
  .battle-home__fighter {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
  }
  .battle-home__fighter-image {
    height: 138px;
    aspect-ratio: auto;
  }
  .battle-home__fighter-info {
    align-self: center;
  }
  .battle-home__resources, .battle-home__stats-grid {
    grid-template-columns: 1fr;
  }
}

.is-battle-buff-open {
  overflow: hidden;
}

.battle-home__quest--claimed {
  opacity: 0.72;
}

.battle-home__play--loading {
  pointer-events: none;
  opacity: 0.75;
  animation: battleHomePlayLoading 0.8s ease-in-out infinite;
}

@keyframes battleHomePlayLoading {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 12px 26px rgba(123, 77, 242, 0.18);
  }
  50% {
    transform: translateY(-1px);
    box-shadow: 0 0 28px rgba(123, 77, 242, 0.34);
  }
}
.battle-home__leader-link {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.battle-home__leader-link:hover {
  opacity: 0.7;
}

.battle-top-card {
  padding: 14px;
  border: 1px solid var(--bh-border);
  border-radius: 22px;
  background: linear-gradient(145deg, var(--bh-card), var(--bh-card-2));
  box-shadow: 0 16px 38px rgba(35, 25, 50, 0.07);
}
.battle-top-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.battle-top-card__head span {
  display: block;
  margin-bottom: 3px;
  color: var(--bh-main);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.battle-top-card__head strong {
  display: block;
  color: var(--bh-text);
  font-size: 16px;
  font-weight: 800;
}
.battle-top-card__head a {
  flex: 0 0 auto;
  color: var(--bh-main);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}
.battle-top-card__head a:hover {
  opacity: 0.75;
}
.battle-top-card__list {
  display: grid;
  gap: 8px;
}
.battle-top-card__item {
  display: grid;
  grid-template-columns: 42px 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border-radius: 16px;
  color: var(--bh-text);
  background: var(--bh-soft);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.battle-top-card__item:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(35, 25, 50, 0.09);
}
.battle-top-card__item--first {
  background: linear-gradient(135deg, rgba(123, 77, 242, 0.16), rgba(181, 101, 141, 0.12));
}
.battle-top-card__item--first .battle-top-card__place {
  color: #fff;
  background: linear-gradient(135deg, var(--bh-pink), var(--bh-main));
}
.battle-top-card__item--first .battle-top-card__avatar {
  border-color: rgba(123, 77, 242, 0.45);
  box-shadow: 0 0 0 4px rgba(123, 77, 242, 0.09);
}
.battle-top-card__place {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  color: var(--bh-main);
  background: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  font-weight: 900;
}
.battle-top-card__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border: 2px solid rgba(123, 77, 242, 0.22);
  border-radius: 50%;
  background: var(--bh-card);
  color: var(--bh-main);
  font-size: 18px;
  font-weight: 900;
}
.battle-top-card__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.battle-top-card__info {
  min-width: 0;
}
.battle-top-card__info strong,
.battle-top-card__info span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.battle-top-card__info strong {
  color: var(--bh-text);
  font-size: 13px;
  font-weight: 900;
}
.battle-top-card__info span {
  margin-top: 3px;
  color: var(--bh-muted);
  font-size: 11px;
  font-weight: 800;
}
.battle-top-card__empty {
  padding: 10px;
  border-radius: 14px;
  color: var(--bh-muted);
  background: var(--bh-soft);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.battle-home__ranks-note--legend {
  border-color: rgba(var(--main-color-rgb), 0.35);
  background: linear-gradient(135deg, rgba(var(--main-color-rgb), 0.16), rgba(var(--main-color-rgb), 0.05));
}

.battle-home__ranks-note--legend b {
  color: var(--main-color);
}

.battle-rank-rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 22px;
}

.battle-rank-rules__item {
  padding: 14px;
  border-radius: 18px;
  background: var(--bg-second);
  border: 1px solid var(--border-color);
}

.battle-rank-rules__item b {
  display: block;
  margin-bottom: 6px;
  color: var(--text-color);
  font-size: 14px;
}

.battle-rank-rules__item span {
  display: block;
  color: var(--text-second);
  font-size: 13px;
  line-height: 1.35;
}

.battle-rank-rules__item--legend {
  background: linear-gradient(135deg, rgba(var(--main-color-rgb), 0.16), rgba(var(--main-color-rgb), 0.05));
  border-color: rgba(var(--main-color-rgb), 0.28);
}

.battle-rank-rules__item--legend b {
  color: var(--main-color);
}

@media (max-width: 520px) {
  .battle-rank-rules {
    grid-template-columns: 1fr;
  }
}
.battle-home__mobile-buff-slot {
  display: none;
}

@media (max-width: 900px) {
  .battle-home__mobile-buff-slot {
    display: block;
    margin-bottom: 14px;
  }
}
.battle-home__season-timer {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 14px;
  background: var(--bh-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.battle-home__season-timer span {
  font-size: 12px;
  opacity: 0.72;
}
.battle-home__season-timer b {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.battle-home__chests {
  position: relative;
  overflow: hidden;
  padding: 14px;
  border: 1px solid rgba(154, 124, 255, 0.22);
  border-radius: 24px;
  background: linear-gradient(145deg, var(--bh-card), var(--bh-card-2));
  box-shadow: 0 16px 38px rgba(35, 25, 50, 0.07);
}
.battle-home__chests-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.battle-home__chests-head span {
  color: var(--bh-main);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.battle-home__chests-head strong {
  display: block;
  margin-top: 3px;
  font-size: 17px;
  font-weight: 700;
}
.battle-home__chests-head em {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #d99a58, #9b6dff);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}
.battle-home__chests-list {
  display: grid;
  gap: 10px;
}
.battle-home__chest {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(154, 124, 255, 0.25);
  border-radius: 22px;
  color: var(--bh-text);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(154, 124, 255, 0.13)), var(--bh-soft);
  cursor: pointer;
  text-align: left;
  transition: 0.2s ease;
}
.battle-home__chest:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 205, 120, 0.45);
  box-shadow: 0 16px 28px rgba(20, 12, 34, 0.18);
}
.battle-home__chest:hover .battle-home__chest-icon {
  transform: rotate(-5deg) scale(1.06);
}
.battle-home__chest > b {
  font-size: 18px;
  font-weight: 700;
}
.battle-home__chest-icon {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.85), transparent 18%), linear-gradient(135deg, #d8975d 0%, #c06aa8 52%, #8b62ff 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.22), 0 12px 22px rgba(123, 77, 242, 0.28);
  transition: 0.2s ease;
}
.battle-home__chest-icon:before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 15px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 238, 178, 0.8);
  box-shadow: 0 19px 0 rgba(70, 38, 122, 0.45);
}
.battle-home__chest-icon i {
  position: absolute;
  right: -8px;
  top: -8px;
  width: 25px;
  height: 25px;
  border: 4px solid #211b31;
  border-radius: 50%;
  background: #e36ab6;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
}
.battle-home__chest-info {
  min-width: 0;
}
.battle-home__chest-info strong,
.battle-home__chest-info small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.battle-home__chest-info strong {
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
}
.battle-home__chest-info small {
  display: -webkit-box;
  margin-top: 5px;
  color: var(--bh-muted);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 600;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.battle-home__chest-modal {
  position: fixed;
  inset: 0;
  z-index: 1800;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.battle-home__chest-modal.is-active {
  display: flex;
}
.battle-home__chest-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 35%, rgba(154, 124, 255, 0.35), transparent 32%), rgba(10, 7, 17, 0.82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.battle-home__chest-box {
  position: relative;
  z-index: 2;
  width: min(560px, 100%);
  max-height: calc(100vh - 28px);
  overflow: auto;
  padding: 24px 20px 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 30px;
  background: radial-gradient(circle at 50% -5%, rgba(255, 205, 120, 0.24), transparent 34%), radial-gradient(circle at 80% 10%, rgba(154, 124, 255, 0.18), transparent 32%), #1c1726;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.42);
  text-align: center;
  animation: battleChestModalIn 0.28s ease both;
}
.battle-home__chest-close {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 10;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  background: rgba(154, 124, 255, 0.18);
  font-size: 28px;
  cursor: pointer;
}
.battle-home__chest-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 265px;
  margin-top: 10px;
}
.battle-home__chest-rays {
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 213, 120, 0), rgba(255, 213, 120, 0.35), rgba(154, 124, 255, 0), rgba(255, 213, 120, 0.28), rgba(255, 213, 120, 0));
  filter: blur(2px);
  opacity: 0.6;
  animation: battleChestRays 5s linear infinite;
}
.battle-home__big-chest {
  position: relative;
  z-index: 3;
  width: 170px;
  height: 140px;
  cursor: pointer;
  transform-origin: center bottom;
}
.battle-home__big-chest-body {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 88px;
  border-radius: 18px 18px 26px 26px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.16), transparent 25%, rgba(0, 0, 0, 0.14) 70%), linear-gradient(135deg, #7a46d8, #3d257a);
  box-shadow: inset 0 -14px 0 rgba(0, 0, 0, 0.17), inset 0 0 0 2px rgba(255, 255, 255, 0.14), 0 24px 42px rgba(83, 48, 170, 0.35);
}
.battle-home__big-chest-lid {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 70px;
  height: 58px;
  border-radius: 28px 28px 12px 12px;
  background: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.5), transparent 20%), linear-gradient(135deg, #e0a056, #c46ab3 48%, #8d64ff);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18), 0 14px 24px rgba(123, 77, 242, 0.25);
  transform-origin: center bottom;
}
.battle-home__big-chest-lock {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 43px;
  width: 46px;
  height: 46px;
  transform: translateX(-50%);
  border-radius: 16px;
  background: radial-gradient(circle at 35% 25%, #fff6c8, #ffd669 35%, #c68427 100%);
  box-shadow: 0 0 28px rgba(255, 213, 105, 0.75), inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.battle-home__big-chest.is-opening {
  animation: battleChestShake 0.7s ease both;
}
.battle-home__big-chest.is-opened {
  animation: battleChestPop 0.55s ease both;
}
.battle-home__big-chest.is-opened .battle-home__big-chest-lid {
  animation: battleChestLidOpen 0.6s ease forwards;
}
.battle-home__big-chest.is-opened .battle-home__big-chest-lock {
  animation: battleChestLockPop 0.45s ease forwards;
}
.battle-home__chest-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.battle-home__chest-burst i {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 8px;
  height: 18px;
  border-radius: 5px;
  opacity: 0;
  background: #ffd86b;
}
.battle-home__chest-burst i:nth-child(2n) {
  background: #9a7cff;
}
.battle-home__chest-burst i:nth-child(3n) {
  background: #e36ab6;
}
.battle-home__big-chest.is-opened + .battle-home__chest-burst i, .battle-home__chest-modal.is-active .battle-home__big-chest.is-opened ~ .battle-home__chest-burst i {
  animation: battleChestConfetti 0.9s ease-out forwards;
}
.battle-home__chest-result {
  position: relative;
  z-index: 4;
  margin-top: -8px;
}
.battle-home__chest-result span {
  color: var(--bh-muted);
  font-size: 13px;
  font-weight: 800;
}
.battle-home__chest-result strong {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: 22px;
  font-weight: 900;
}
.battle-home__chest-result p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  font-weight: 700;
}
.battle-home__reward-list {
  display: grid;
  gap: 9px;
  width: min(380px, 100%);
  margin: 16px auto 0;
}
.battle-home__reward {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  text-align: left;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  animation: battleRewardIn 0.4s ease forwards;
}
.battle-home__reward span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 216, 107, 0.22), rgba(154, 124, 255, 0.22));
  color: #ffd86b;
  font-size: 19px;
}
.battle-home__reward strong {
  font-size: 15px;
  font-weight: 900;
}
.battle-home__chest-open-btn {
  min-height: 42px;
  margin-top: 16px;
  padding: 0 22px;
  border: 0;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, #d99a58, #9a6dff);
  box-shadow: 0 14px 28px rgba(123, 77, 242, 0.25);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}
.battle-home__chest-open-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}

.is-battle-chest-open {
  overflow: hidden;
}

@keyframes battleChestModalIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes battleChestRays {
  to {
    transform: rotate(360deg);
  }
}
@keyframes battleChestShake {
  0%, 100% {
    transform: translateX(0) rotate(0);
  }
  20% {
    transform: translateX(-8px) rotate(-4deg);
  }
  40% {
    transform: translateX(8px) rotate(4deg);
  }
  60% {
    transform: translateX(-5px) rotate(-3deg);
  }
  80% {
    transform: translateX(5px) rotate(3deg);
  }
}
@keyframes battleChestPop {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes battleChestLidOpen {
  to {
    transform: rotate(-18deg) translate(-10px, -34px);
  }
}
@keyframes battleChestLockPop {
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px) scale(0.4);
  }
}
@keyframes battleRewardIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes battleChestConfetti {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(0) scale(0.7);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1);
  }
}
.battle-home__chest-burst i:nth-child(1) {
  --x: -130px;
  --y: -100px;
  --r: 160deg;
}

.battle-home__chest-burst i:nth-child(2) {
  --x: -80px;
  --y: -140px;
  --r: 260deg;
}

.battle-home__chest-burst i:nth-child(3) {
  --x: -30px;
  --y: -120px;
  --r: 90deg;
}

.battle-home__chest-burst i:nth-child(4) {
  --x: 45px;
  --y: -145px;
  --r: 210deg;
}

.battle-home__chest-burst i:nth-child(5) {
  --x: 100px;
  --y: -105px;
  --r: 130deg;
}

.battle-home__chest-burst i:nth-child(6) {
  --x: 140px;
  --y: -55px;
  --r: 280deg;
}

.battle-home__chest-burst i:nth-child(7) {
  --x: -145px;
  --y: -35px;
  --r: 120deg;
}

.battle-home__chest-burst i:nth-child(8) {
  --x: 120px;
  --y: -20px;
  --r: 320deg;
}

.battle-home__chest-burst i:nth-child(9) {
  --x: -70px;
  --y: -60px;
  --r: 240deg;
}

.battle-home__chest-burst i:nth-child(10) {
  --x: 70px;
  --y: -70px;
  --r: 80deg;
}

.battle-home__chest-burst i:nth-child(11) {
  --x: -110px;
  --y: -15px;
  --r: 180deg;
}

.battle-home__chest-burst i:nth-child(12) {
  --x: 105px;
  --y: -85px;
  --r: 300deg;
}

.battle-home__chest-burst i:nth-child(13) {
  --x: -40px;
  --y: -150px;
  --r: 220deg;
}

.battle-home__chest-burst i:nth-child(14) {
  --x: 35px;
  --y: -120px;
  --r: 110deg;
}

@media (max-width: 540px) {
  .battle-home__chest {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    padding: 10px;
  }
  .battle-home__chest > b {
    font-size: 16px;
  }
  .battle-home__chest-icon {
    width: 50px;
    height: 50px;
    border-radius: 16px;
  }
  .battle-home__chest-box {
    padding: 18px 14px 16px;
    border-radius: 24px;
  }
  .battle-home__chest-stage {
    min-height: 220px;
  }
  .battle-home__big-chest {
    width: 145px;
    height: 120px;
  }
  .battle-home__chest-result strong {
    font-size: 19px;
  }
}
.battle-awakening {
  --awakening-bg: var(--body-bg, #f4f1f8);
  --awakening-card: var(--block-bg, #ffffff);
  --awakening-soft: var(--secondary-bg, #f8f5fb);
  --awakening-text: var(--text-color, #21172d);
  --awakening-muted: var(--text-muted, #85768f);
  --awakening-border: rgba(83, 55, 112, .14);
  --awakening-primary: var(--main-color, #7b4df2);
  --awakening-violet: #7b4df2;
  --awakening-pink: #bd3d72;
  --awakening-gold: #d7a542;
  --awakening-blue: #4d7cff;
  --awakening-shadow: rgba(37, 20, 58, .10);
  min-height: calc(100vh - 80px);
  padding: 16px 0 38px;
  color: var(--awakening-text);
  background: var(--grey-background);
}
body.dark .battle-awakening, .theme-dark .battle-awakening, [data-theme=dark] .battle-awakening {
  --awakening-bg: var(--body-bg, #0f0b16);
  --awakening-card: var(--block-bg, #181121);
  --awakening-soft: var(--secondary-bg, #21182d);
  --awakening-text: var(--text-color, #fff7ff);
  --awakening-muted: var(--text-muted, #bcaec8);
  --awakening-border: rgba(255, 255, 255, .10);
  --awakening-shadow: rgba(0, 0, 0, .34);
}
.battle-awakening__inner {
  width: min(1200px, 100% - 24px);
  margin: 0 auto;
}
.battle-awakening__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 14px;
  align-items: stretch;
  margin-bottom: 14px;
  padding: 18px;
  border: 1px solid var(--awakening-border);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.34)), var(--awakening-card);
  box-shadow: 0 18px 44px var(--awakening-shadow);
}
body.dark .battle-awakening__hero, .theme-dark .battle-awakening__hero, [data-theme=dark] .battle-awakening__hero {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)), var(--awakening-card);
}
.battle-awakening__eyebrow, .battle-awakening__panel-head span {
  display: block;
  margin-bottom: 4px;
  color: var(--awakening-primary);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.battle-awakening__title {
  margin: 0;
  font-size: 26px;
  line-height: 1.05;
  font-weight: 700;
}
.battle-awakening__description {
  max-width: 660px;
  margin: 8px 0 0;
  color: var(--awakening-muted);
  font-size: 13px;
  line-height: 1.55;
}
.battle-awakening__resources {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.battle-awakening__resource {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 74px;
  padding: 12px;
  border-radius: 18px;
  background: radial-gradient(circle at 15% 20%, rgba(215, 165, 66, 0.22), transparent 38%), rgba(123, 77, 242, 0.09);
}
.battle-awakening__resource--energy {
  background: radial-gradient(circle at 15% 20%, rgba(77, 124, 255, 0.2), transparent 38%), rgba(189, 61, 114, 0.08);
}
.battle-awakening__resource span {
  color: var(--awakening-muted);
  font-size: 11px;
  font-weight: 800;
}
.battle-awakening__resource strong {
  margin-top: 3px;
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
}
.battle-awakening__layout {
  display: grid;
  grid-template-columns: 430px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}
.battle-awakening__altar, .battle-awakening__inventory {
  padding: 16px;
  border: 1px solid var(--awakening-border);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.34)), var(--awakening-card);
  box-shadow: 0 18px 44px var(--awakening-shadow);
}
body.dark .battle-awakening__altar, .theme-dark .battle-awakening__altar, [data-theme=dark] .battle-awakening__altar, body.dark .battle-awakening__inventory, .theme-dark .battle-awakening__inventory, [data-theme=dark] .battle-awakening__inventory {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)), var(--awakening-card);
}
.battle-awakening__altar {
  overflow: hidden;
}
.battle-awakening__circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 430px;
  overflow: hidden;
  border-radius: 28px;
  background: radial-gradient(circle at center, rgba(215, 165, 66, 0.22), transparent 11%), radial-gradient(circle at center, rgba(123, 77, 242, 0.22), transparent 38%), radial-gradient(circle at 50% 100%, rgba(189, 61, 114, 0.16), transparent 45%), rgba(123, 77, 242, 0.055);
}
.battle-awakening__circle::before, .battle-awakening__circle::after {
  content: "";
  position: absolute;
  inset: 34px;
  border: 1px solid rgba(215, 165, 66, 0.32);
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(123, 77, 242, 0.16), inset 0 0 30px rgba(189, 61, 114, 0.1);
  pointer-events: none;
}
.battle-awakening__circle::after {
  inset: 84px;
  border-style: dashed;
  animation: battleAwakeningRotate 18s linear infinite reverse;
}
.battle-awakening__circle-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.battle-awakening__circle-ring--one {
  width: 330px;
  height: 330px;
  border: 1px solid rgba(123, 77, 242, 0.32);
  animation: battleAwakeningRotate 22s linear infinite;
}
.battle-awakening__circle-ring--two {
  width: 252px;
  height: 252px;
  border: 1px dashed rgba(215, 165, 66, 0.42);
  animation: battleAwakeningRotate 14s linear infinite reverse;
}
.battle-awakening__circle-ring--three {
  width: 178px;
  height: 178px;
  border: 1px solid rgba(189, 61, 114, 0.34);
  box-shadow: 0 0 36px rgba(189, 61, 114, 0.13);
  animation: battleAwakeningPulse 2.6s ease-in-out infinite;
}
.battle-awakening__selected {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 164px;
  min-height: 226px;
}
.battle-awakening__selected-empty {
  width: 100%;
  padding: 22px 14px;
  border: 1px solid var(--awakening-border);
  border-radius: 22px;
  color: var(--awakening-muted);
  background: rgba(255, 255, 255, 0.46);
  text-align: center;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
body.dark .battle-awakening__selected-empty, .theme-dark .battle-awakening__selected-empty, [data-theme=dark] .battle-awakening__selected-empty {
  background: rgba(255, 255, 255, 0.05);
}
.battle-awakening__selected-empty span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 10px;
  border-radius: 18px;
  color: var(--awakening-gold);
  background: rgba(215, 165, 66, 0.12);
  font-size: 28px;
}
.battle-awakening__selected-empty strong,
.battle-awakening__selected-empty small {
  display: block;
}
.battle-awakening__selected-empty strong {
  color: var(--awakening-text);
  font-size: 14px;
  font-weight: 900;
}
.battle-awakening__selected-empty small {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 800;
}
.battle-awakening__selected-card {
  position: relative;
  width: 148px;
  border-radius: 20px;
  animation: battleAwakeningFloat 2.8s ease-in-out infinite;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.28));
}
.battle-awakening__selected-card img {
  display: block;
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 0 36px rgba(123, 77, 242, 0.4);
}
.battle-awakening__flash {
  position: absolute;
  z-index: 5;
  inset: -20%;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.95), transparent 10%), radial-gradient(circle at center, rgba(215, 165, 66, 0.65), transparent 24%), radial-gradient(circle at center, rgba(123, 77, 242, 0.38), transparent 42%);
}
.battle-awakening__flash--active {
  animation: battleAwakeningFlash 1.2s ease forwards;
}
.battle-awakening__info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.battle-awakening__info-row {
  padding: 11px 12px;
  border-radius: 16px;
  background: rgba(123, 77, 242, 0.08);
}
.battle-awakening__info-row span,
.battle-awakening__info-row strong {
  display: block;
}
.battle-awakening__info-row span {
  color: var(--awakening-muted);
  font-size: 11px;
  font-weight: 800;
}
.battle-awakening__info-row strong {
  margin-top: 3px;
  font-size: 15px;
  font-weight: 900;
}
.battle-awakening__button {
  position: relative;
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--awakening-pink), var(--awakening-violet) 55%, var(--awakening-blue));
  box-shadow: 0 14px 30px rgba(123, 77, 242, 0.25);
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  transition: transform 0.18s ease, opacity 0.18s ease, filter 0.18s ease;
}
.battle-awakening__button::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transition: transform 0.6s ease;
}
.battle-awakening__button:hover {
  transform: translateY(-1px);
}
.battle-awakening__button:hover::before {
  transform: translateX(120%);
}
.battle-awakening__button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none;
  filter: grayscale(0.25);
}
.battle-awakening__button--loading {
  animation: battleAwakeningButton 1s ease-in-out infinite;
}
.battle-awakening__result {
  display: none;
  margin-top: 12px;
  padding: 13px;
  border: 1px solid rgba(215, 165, 66, 0.34);
  border-radius: 18px;
  background: radial-gradient(circle at 12% 0%, rgba(215, 165, 66, 0.18), transparent 35%), rgba(123, 77, 242, 0.07);
}
.battle-awakening__result--active {
  display: block;
  animation: battleAwakeningResult 0.45s ease both;
}
.battle-awakening__result-head {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.battle-awakening__result-head span {
  color: var(--awakening-gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.battle-awakening__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.battle-awakening__stats div {
  padding: 9px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.42);
  text-align: center;
}
body.dark .battle-awakening__stats div, .theme-dark .battle-awakening__stats div, [data-theme=dark] .battle-awakening__stats div {
  background: rgba(255, 255, 255, 0.055);
}
.battle-awakening__stats span,
.battle-awakening__stats strong {
  display: block;
}
.battle-awakening__stats span {
  color: var(--awakening-muted);
  font-size: 10px;
  font-weight: 900;
}
.battle-awakening__stats strong {
  margin-top: 2px;
  font-size: 17px;
  font-weight: 900;
}
.battle-awakening__seal {
  margin-top: 9px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(215, 165, 66, 0.11);
}
.battle-awakening__seal span,
.battle-awakening__seal strong,
.battle-awakening__seal small {
  display: block;
}
.battle-awakening__seal span {
  color: var(--awakening-muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
.battle-awakening__seal strong {
  margin-top: 3px;
  font-size: 14px;
  font-weight: 900;
}
.battle-awakening__seal small {
  margin-top: 3px;
  color: var(--awakening-muted);
  font-size: 11px;
  line-height: 1.35;
  font-weight: 800;
}
.battle-awakening__panel-head {
  margin-bottom: 12px;
}
.battle-awakening__panel-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}
.battle-awakening .battle-awakening-card--selected {
  position: relative;
  transform: translateY(-4px) scale(1.035) !important;
  box-shadow: 0 0 0 2px rgba(215, 165, 66, 0.72), 0 18px 34px rgba(123, 77, 242, 0.24) !important;
  z-index: 3;
}
.battle-awakening .battle-awakening-card--awakened {
  box-shadow: 0 0 0 2px rgba(215, 165, 66, 0.75), 0 0 18px rgba(215, 165, 66, 0.35) !important;
  filter: saturate(1.12) brightness(1.03);
}
.battle-awakening--casting .battle-awakening__selected-card {
  animation: battleAwakeningCastCard 1.05s ease-in-out infinite;
}
.battle-awakening--casting .battle-awakening__circle-ring--one {
  animation-duration: 2s;
}
.battle-awakening--casting .battle-awakening__circle-ring--two {
  animation-duration: 1.4s;
}
.battle-awakening--casting .battle-awakening__circle-ring--three {
  animation: battleAwakeningPulseFast 0.7s ease-in-out infinite;
}
@media (max-width: 1050px) {
  .battle-awakening__hero, .battle-awakening__layout {
    grid-template-columns: 1fr;
  }
  .battle-awakening__altar {
    position: relative;
    top: auto;
  }
}
@media (max-width: 640px) {
  .battle-awakening {
    padding-top: 10px;
  }
  .battle-awakening__inner {
    width: min(100% - 16px, 1200px);
  }
  .battle-awakening__hero, .battle-awakening__altar, .battle-awakening__inventory {
    padding: 12px;
    border-radius: 18px;
  }
  .battle-awakening__resources, .battle-awakening__info {
    grid-template-columns: 1fr;
  }
  .battle-awakening__title {
    font-size: 24px;
  }
  .battle-awakening__circle {
    height: 360px;
    border-radius: 22px;
  }
  .battle-awakening__selected {
    width: 136px;
    min-height: 190px;
  }
  .battle-awakening__selected-card {
    width: 126px;
  }
  .battle-awakening__stats {
    grid-template-columns: 1fr;
  }
}

@keyframes battleAwakeningRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes battleAwakeningPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.65;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}
@keyframes battleAwakeningPulseFast {
  0%, 100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.18);
    opacity: 1;
  }
}
@keyframes battleAwakeningFloat {
  0%, 100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-10px) rotate(1deg);
  }
}
@keyframes battleAwakeningCastCard {
  0%, 100% {
    transform: translateY(-4px) scale(1) rotate(-1deg);
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.28));
  }
  50% {
    transform: translateY(-18px) scale(1.08) rotate(1deg);
    filter: drop-shadow(0 0 34px rgba(215, 165, 66, 0.55));
  }
}
@keyframes battleAwakeningFlash {
  0% {
    opacity: 0;
    transform: scale(0.65);
  }
  35% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}
@keyframes battleAwakeningButton {
  0%, 100% {
    box-shadow: 0 14px 30px rgba(123, 77, 242, 0.25);
  }
  50% {
    box-shadow: 0 0 34px rgba(215, 165, 66, 0.46);
  }
}
@keyframes battleAwakeningResult {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.battle-awakening__inventory,
.battle-awakening__altar {
  min-height: 640px;
}

.battle-awakening__circle {
  isolation: isolate;
}
.battle-awakening__circle::before {
  animation: battleAwakeningRotate 18s linear infinite;
}

.battle-awakening__selected-card {
  transition: transform 0.25s ease, filter 0.25s ease;
}

.battle-awakening--casting .battle-awakening__circle {
  box-shadow: inset 0 0 60px rgba(123, 77, 242, 0.25), 0 0 42px rgba(215, 165, 66, 0.22);
}
.battle-awakening--casting .battle-awakening__selected-card {
  animation: battleAwakeningEpicCard 1.45s ease-in-out infinite;
}
.battle-awakening--casting .battle-awakening__circle::before {
  animation-duration: 1.3s;
}
.battle-awakening--casting .battle-awakening__circle::after {
  animation-duration: 0.9s;
}

@keyframes battleAwakeningEpicCard {
  0% {
    transform: translateY(0) scale(1) rotate(-1deg);
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.28));
  }
  35% {
    transform: translateY(-22px) scale(1.1) rotate(2deg);
    filter: drop-shadow(0 0 30px rgba(123, 77, 242, 0.65)) drop-shadow(0 0 22px rgba(215, 165, 66, 0.45));
  }
  70% {
    transform: translateY(-8px) scale(1.04) rotate(-2deg);
    filter: drop-shadow(0 0 40px rgba(189, 61, 114, 0.5)) drop-shadow(0 0 26px rgba(215, 165, 66, 0.55));
  }
  100% {
    transform: translateY(0) scale(1) rotate(-1deg);
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.28));
  }
}
.battle-awakening__result {
  position: relative;
  overflow: hidden;
}
.battle-awakening__result-glow {
  position: absolute;
  inset: -40%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(215, 165, 66, 0.22), transparent 26%), radial-gradient(circle at 35% 25%, rgba(123, 77, 242, 0.18), transparent 34%), radial-gradient(circle at 70% 80%, rgba(189, 61, 114, 0.16), transparent 34%);
  animation: battleAwakeningResultGlow 4s linear infinite;
}
.battle-awakening__stats--epic {
  position: relative;
  z-index: 2;
}
.battle-awakening__stat {
  position: relative;
  overflow: hidden;
  transform: translateY(14px) scale(0.86);
  opacity: 0;
  animation: battleAwakeningStatReveal 0.48s ease forwards;
}
.battle-awakening__stat::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  animation: battleAwakeningStatShine 1.2s ease forwards;
  pointer-events: none;
}
.battle-awakening__stat:nth-child(1) {
  animation-delay: 0.08s;
}
.battle-awakening__stat:nth-child(1)::before {
  animation-delay: 0.22s;
}
.battle-awakening__stat:nth-child(2) {
  animation-delay: 0.22s;
}
.battle-awakening__stat:nth-child(2)::before {
  animation-delay: 0.36s;
}
.battle-awakening__stat:nth-child(3) {
  animation-delay: 0.36s;
}
.battle-awakening__stat:nth-child(3)::before {
  animation-delay: 0.5s;
}
.battle-awakening__stat strong {
  font-size: 22px;
  transition: transform 0.25s ease, text-shadow 0.25s ease, color 0.25s ease;
}
.battle-awakening__stat-value--done {
  transform: scale(1.14);
  color: var(--awakening-gold);
  text-shadow: 0 0 12px rgba(215, 165, 66, 0.6), 0 0 26px rgba(123, 77, 242, 0.35);
}
.battle-awakening__seal--epic {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(215, 165, 66, 0.26);
  animation: battleAwakeningSealReveal 0.55s ease 0.55s both;
}
.battle-awakening__seal--epic::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(215, 165, 66, 0.28), transparent);
  transform: translateX(-120%);
  animation: battleAwakeningSealShine 1.4s ease 0.8s forwards;
}
.battle-awakening__seal--epic strong {
  color: var(--awakening-gold);
  text-shadow: 0 0 18px rgba(215, 165, 66, 0.28);
}
.battle-awakening .battle-awakening-card--disabled {
  position: relative;
  opacity: 0.48 !important;
  filter: grayscale(0.35) saturate(0.75);
  pointer-events: none;
}
.battle-awakening .battle-awakening-card--awakened {
  box-shadow: 0 0 0 2px rgba(215, 165, 66, 0.65), 0 0 22px rgba(215, 165, 66, 0.28) !important;
}
@media (max-width: 640px) {
  .battle-awakening__stat strong {
    font-size: 20px;
  }
  .battle-awakening .battle-awakening-card--disabled::after {
    font-size: 9px;
    bottom: 6px;
  }
}

@keyframes battleAwakeningResultGlow {
  from {
    transform: rotate(0deg) scale(1);
  }
  to {
    transform: rotate(360deg) scale(1.04);
  }
}
@keyframes battleAwakeningStatReveal {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.86);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes battleAwakeningStatShine {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(120%);
  }
}
@keyframes battleAwakeningSealReveal {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes battleAwakeningSealShine {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(120%);
  }
}
.battle-awakening__back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  color: var(--awakening-muted);
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  transition: color 0.18s ease, transform 0.18s ease;
}
.battle-awakening__back-link i {
  font-size: 10px;
}
.battle-awakening__back-link:hover {
  color: var(--awakening-primary);
  transform: translateX(-2px);
}

.battle-awakening__buy-energy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  margin-top: 8px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--awakening-primary, #7b4df2), #5d3abe);
  box-shadow: 0 10px 22px rgba(123, 77, 242, 0.24);
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.battle-awakening__buy-energy:hover {
  transform: translateY(-1px);
}
.battle-awakening__buy-energy:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.battle-reroll {
  --reroll-bg: var(--body-bg, #f4f1f8);
  --reroll-card: var(--block-bg, #fff);
  --reroll-soft: var(--secondary-bg, #f8f5fb);
  --reroll-text: var(--text-color, #21172d);
  --reroll-muted: var(--text-muted, #85768f);
  --reroll-border: rgba(83, 55, 112, .14);
  --reroll-primary: var(--main-color, #7b4df2);
  --reroll-pink: #bd3d72;
  --reroll-gold: #d7a542;
  --reroll-blue: #4d7cff;
  --reroll-green: #22a06b;
  --reroll-shadow: rgba(37, 20, 58, .10);
  --awakening-muted: var(--text-muted, #85768f);
  min-height: calc(100vh - 80px);
  padding: 16px 0 38px;
  color: var(--reroll-text);
  background: var(--reroll-bg);
}
body.dark .battle-reroll, .theme-dark .battle-reroll, [data-theme=dark] .battle-reroll {
  --reroll-bg: var(--body-bg, #0f0b16);
  --reroll-card: var(--block-bg, #181121);
  --reroll-soft: var(--secondary-bg, #21182d);
  --reroll-text: var(--text-color, #fff7ff);
  --reroll-muted: var(--text-muted, #bcaec8);
  --reroll-border: rgba(255, 255, 255, .10);
  --reroll-shadow: rgba(0, 0, 0, .34);
}
.battle-reroll__inner {
  width: min(1200px, 100% - 24px);
  margin: 0 auto;
}
.battle-reroll__hero, .battle-reroll__forge, .battle-reroll__inventory {
  border: 1px solid var(--reroll-border);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.34)), var(--reroll-card);
  box-shadow: 0 18px 44px var(--reroll-shadow);
}
body.dark .battle-reroll__hero, .theme-dark .battle-reroll__hero, [data-theme=dark] .battle-reroll__hero, body.dark .battle-reroll__forge, .theme-dark .battle-reroll__forge, [data-theme=dark] .battle-reroll__forge, body.dark .battle-reroll__inventory, .theme-dark .battle-reroll__inventory, [data-theme=dark] .battle-reroll__inventory {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)), var(--reroll-card);
}
.battle-reroll__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
  padding: 18px;
}
.battle-reroll__eyebrow, .battle-reroll__panel-head span {
  display: block;
  margin-bottom: 4px;
  color: var(--reroll-primary);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.battle-reroll__title {
  margin: 0;
  font-size: 26px;
  line-height: 1.05;
  font-weight: 700;
}
.battle-reroll__description {
  max-width: 680px;
  margin: 8px 0 0;
  color: var(--reroll-muted);
  font-size: 13px;
  line-height: 1.55;
}
.battle-reroll__wallet {
  min-height: 74px;
  padding: 12px;
  border-radius: 18px;
  background: radial-gradient(circle at 15% 20%, rgba(215, 165, 66, 0.22), transparent 38%), rgba(123, 77, 242, 0.09);
}
.battle-reroll__wallet span,
.battle-reroll__wallet strong {
  display: block;
}
.battle-reroll__wallet span {
  color: var(--reroll-muted);
  font-size: 11px;
  font-weight: 800;
}
.battle-reroll__wallet strong {
  margin-top: 4px;
  font-size: 24px;
  font-weight: 900;
}
.battle-reroll__layout {
  display: grid;
  grid-template-columns: 430px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}
.battle-reroll__forge, .battle-reroll__inventory {
  min-height: 660px;
  padding: 16px;
}
.battle-reroll__forge {
  overflow: hidden;
}
.battle-reroll__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 390px;
  overflow: hidden;
  border-radius: 28px;
  background: radial-gradient(circle at center, rgba(123, 77, 242, 0.2), transparent 38%), radial-gradient(circle at 50% 100%, rgba(215, 165, 66, 0.14), transparent 45%), rgba(123, 77, 242, 0.055);
  isolation: isolate;
}
.battle-reroll__stage::before, .battle-reroll__stage::after {
  content: "";
  position: absolute;
  inset: 34px;
  border: 1px solid rgba(215, 165, 66, 0.32);
  border-radius: 50%;
  pointer-events: none;
}
.battle-reroll__stage::before {
  animation: battleRerollRotate 18s linear infinite;
}
.battle-reroll__stage::after {
  inset: 82px;
  border-style: dashed;
  animation: battleRerollRotate 12s linear infinite reverse;
}
.battle-reroll__ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.battle-reroll__ring--one {
  width: 330px;
  height: 330px;
  border: 1px solid rgba(123, 77, 242, 0.32);
  animation: battleRerollRotate 22s linear infinite;
}
.battle-reroll__ring--two {
  width: 250px;
  height: 250px;
  border: 1px dashed rgba(215, 165, 66, 0.42);
  animation: battleRerollRotate 14s linear infinite reverse;
}
.battle-reroll__ring--three {
  width: 170px;
  height: 170px;
  border: 1px solid rgba(189, 61, 114, 0.34);
  box-shadow: 0 0 36px rgba(189, 61, 114, 0.13);
  animation: battleRerollPulse 2.6s ease-in-out infinite;
}
.battle-reroll__sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.battle-reroll__sparks span {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--reroll-gold);
  box-shadow: 0 0 16px rgba(215, 165, 66, 0.8);
  animation: battleRerollSpark 2.4s ease-in-out infinite;
}
.battle-reroll__sparks span:nth-child(1) {
  left: 18%;
  top: 34%;
}
.battle-reroll__sparks span:nth-child(2) {
  left: 78%;
  top: 28%;
  animation-delay: 0.4s;
}
.battle-reroll__sparks span:nth-child(3) {
  left: 68%;
  top: 76%;
  animation-delay: 0.8s;
}
.battle-reroll__sparks span:nth-child(4) {
  left: 27%;
  top: 72%;
  animation-delay: 1.2s;
}
.battle-reroll__selected {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  min-height: 220px;
}
.battle-reroll__empty {
  width: 100%;
  padding: 22px 14px;
  border: 1px solid var(--reroll-border);
  border-radius: 22px;
  color: var(--reroll-muted);
  background: rgba(255, 255, 255, 0.46);
  text-align: center;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.battle-reroll__empty span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 10px;
  border-radius: 18px;
  color: var(--reroll-gold);
  background: rgba(215, 165, 66, 0.12);
  font-size: 28px;
}
.battle-reroll__empty strong,
.battle-reroll__empty small {
  display: block;
}
.battle-reroll__empty strong {
  color: var(--reroll-text);
  font-size: 14px;
  font-weight: 900;
}
.battle-reroll__empty small {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 800;
}
.battle-reroll__selected-card {
  width: 148px;
  border-radius: 20px;
  animation: battleRerollFloat 2.8s ease-in-out infinite;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.28));
}
.battle-reroll__selected-card img {
  display: block;
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 0 36px rgba(123, 77, 242, 0.4);
}
.battle-reroll__burst {
  position: absolute;
  z-index: 6;
  inset: -20%;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.95), transparent 9%), radial-gradient(circle at center, rgba(215, 165, 66, 0.65), transparent 24%), radial-gradient(circle at center, rgba(123, 77, 242, 0.4), transparent 42%);
}
.battle-reroll__burst--active {
  animation: battleRerollBurst 1.2s ease forwards;
}
.battle-reroll__result {
  margin-top: 12px;
}
.battle-reroll__result-empty, .battle-reroll__result-card {
  padding: 13px;
  border-radius: 18px;
  background: rgba(123, 77, 242, 0.07);
}
.battle-reroll__result-empty {
  color: var(--reroll-muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.battle-reroll__result-card {
  border: 1px solid rgba(215, 165, 66, 0.28);
  animation: battleRerollResult 0.45s ease both;
}
.battle-reroll__result-card--stats {
  box-shadow: inset 0 0 26px rgba(77, 124, 255, 0.1);
}
.battle-reroll__result-card--seal {
  box-shadow: inset 0 0 26px rgba(215, 165, 66, 0.13);
}
.battle-reroll__result-head {
  margin-bottom: 10px;
  text-align: center;
}
.battle-reroll__result-head span {
  color: var(--reroll-gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.battle-reroll__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.battle-reroll__stats div {
  padding: 9px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.42);
  text-align: center;
}
.battle-reroll__stats span,
.battle-reroll__stats strong {
  display: block;
}
.battle-reroll__stats span {
  color: var(--reroll-muted);
  font-size: 10px;
  font-weight: 900;
}
.battle-reroll__stats strong {
  margin-top: 2px;
  font-size: 17px;
  font-weight: 900;
}
.battle-reroll__seal {
  margin-top: 9px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(215, 165, 66, 0.11);
}
.battle-reroll__seal span,
.battle-reroll__seal strong,
.battle-reroll__seal small {
  display: block;
}
.battle-reroll__seal span {
  color: var(--reroll-muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
.battle-reroll__seal strong {
  margin-top: 3px;
  font-size: 14px;
  font-weight: 900;
}
.battle-reroll__seal small {
  margin-top: 3px;
  color: var(--reroll-muted);
  font-size: 11px;
  line-height: 1.35;
  font-weight: 800;
}
.battle-reroll__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.battle-reroll__button {
  min-height: 58px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  cursor: pointer;
  font-weight: 900;
  transition: transform 0.18s ease, opacity 0.18s ease, filter 0.18s ease;
}
.battle-reroll__button span,
.battle-reroll__button small {
  display: block;
}
.battle-reroll__button span {
  font-size: 13px;
}
.battle-reroll__button small {
  margin-top: 3px;
  opacity: 0.78;
  font-size: 11px;
  font-weight: 800;
}
.battle-reroll__button:hover {
  transform: translateY(-1px);
}
.battle-reroll__button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  filter: grayscale(0.25);
}
.battle-reroll__button--stats {
  background: linear-gradient(135deg, var(--reroll-blue), var(--reroll-primary));
}
.battle-reroll__button--seal {
  background: linear-gradient(135deg, var(--reroll-pink), var(--reroll-gold));
}
.battle-reroll__button--loading {
  animation: battleRerollButton 1s ease-in-out infinite;
}
.battle-reroll__panel-head {
  margin-bottom: 12px;
}
.battle-reroll__panel-head h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
}
.battle-reroll .battle-reroll-card--selected {
  position: relative;
  transform: translateY(-4px) scale(1.035) !important;
  box-shadow: 0 0 0 2px rgba(215, 165, 66, 0.72), 0 18px 34px rgba(123, 77, 242, 0.24) !important;
  z-index: 3;
}
.battle-reroll--casting .battle-reroll__selected-card {
  animation: battleRerollEpicCard 1.15s ease-in-out infinite;
}
.battle-reroll--casting .battle-reroll__ring--one {
  animation-duration: 1.5s;
}
.battle-reroll--casting .battle-reroll__ring--two {
  animation-duration: 1s;
}
.battle-reroll--casting .battle-reroll__ring--three {
  animation: battleRerollPulseFast 0.6s ease-in-out infinite;
}
.battle-reroll--stats .battle-reroll__stage {
  box-shadow: inset 0 0 60px rgba(77, 124, 255, 0.22), 0 0 42px rgba(77, 124, 255, 0.18);
}
.battle-reroll--seal .battle-reroll__stage {
  box-shadow: inset 0 0 60px rgba(215, 165, 66, 0.24), 0 0 42px rgba(215, 165, 66, 0.2);
}
@media (max-width: 1050px) {
  .battle-reroll__hero, .battle-reroll__layout {
    grid-template-columns: 1fr;
  }
  .battle-reroll__forge, .battle-reroll__inventory {
    min-height: auto;
  }
}
@media (max-width: 640px) {
  .battle-reroll {
    padding-top: 10px;
  }
  .battle-reroll__inner {
    width: min(100% - 16px, 1200px);
  }
  .battle-reroll__hero, .battle-reroll__forge, .battle-reroll__inventory {
    padding: 12px;
    border-radius: 18px;
  }
  .battle-reroll__title {
    font-size: 24px;
  }
  .battle-reroll__stage {
    height: 350px;
    border-radius: 22px;
  }
  .battle-reroll__actions, .battle-reroll__stats {
    grid-template-columns: 1fr;
  }
  .battle-reroll__selected {
    width: 136px;
    min-height: 190px;
  }
  .battle-reroll__selected-card {
    width: 126px;
  }
}

@keyframes battleRerollRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes battleRerollPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.65;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}
@keyframes battleRerollPulseFast {
  0%, 100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.18);
    opacity: 1;
  }
}
@keyframes battleRerollFloat {
  0%, 100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-10px) rotate(1deg);
  }
}
@keyframes battleRerollSpark {
  0%, 100% {
    opacity: 0.2;
    transform: translateY(0) scale(0.8);
  }
  50% {
    opacity: 1;
    transform: translateY(-16px) scale(1.3);
  }
}
@keyframes battleRerollEpicCard {
  0%, 100% {
    transform: translateY(0) scale(1) rotate(-1deg);
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.28));
  }
  45% {
    transform: translateY(-20px) scale(1.09) rotate(2deg);
    filter: drop-shadow(0 0 30px rgba(123, 77, 242, 0.65)) drop-shadow(0 0 22px rgba(215, 165, 66, 0.45));
  }
}
@keyframes battleRerollBurst {
  0% {
    opacity: 0;
    transform: scale(0.65);
  }
  35% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}
@keyframes battleRerollButton {
  0%, 100% {
    box-shadow: 0 14px 30px rgba(123, 77, 242, 0.25);
  }
  50% {
    box-shadow: 0 0 34px rgba(215, 165, 66, 0.46);
  }
}
@keyframes battleRerollResult {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.battle-reroll__result-card--epic {
  position: relative;
  overflow: hidden;
}
.battle-reroll__result-glow {
  position: absolute;
  inset: -40%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(215, 165, 66, 0.22), transparent 26%), radial-gradient(circle at 35% 25%, rgba(123, 77, 242, 0.18), transparent 34%), radial-gradient(circle at 70% 80%, rgba(189, 61, 114, 0.16), transparent 34%);
  animation: battleRerollResultGlow 4s linear infinite;
}
.battle-reroll__stats--epic, .battle-reroll__seal--epic, .battle-reroll__result-head {
  position: relative;
  z-index: 2;
}
.battle-reroll__stat {
  position: relative;
  overflow: hidden;
  transform: translateY(14px) scale(0.86);
  opacity: 0;
  animation: battleRerollStatReveal 0.48s ease forwards;
}
.battle-reroll__stat::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  animation: battleRerollStatShine 1.2s ease forwards;
  pointer-events: none;
}
.battle-reroll__stat:nth-child(1) {
  animation-delay: 0.08s;
}
.battle-reroll__stat:nth-child(1)::before {
  animation-delay: 0.22s;
}
.battle-reroll__stat:nth-child(2) {
  animation-delay: 0.22s;
}
.battle-reroll__stat:nth-child(2)::before {
  animation-delay: 0.36s;
}
.battle-reroll__stat:nth-child(3) {
  animation-delay: 0.36s;
}
.battle-reroll__stat:nth-child(3)::before {
  animation-delay: 0.5s;
}
.battle-reroll__stat strong {
  font-size: 22px;
  transition: transform 0.25s ease, text-shadow 0.25s ease, color 0.25s ease;
}
.battle-reroll__stat-value--done {
  transform: scale(1.14);
  color: var(--reroll-gold);
  text-shadow: 0 0 12px rgba(215, 165, 66, 0.6), 0 0 26px rgba(123, 77, 242, 0.35);
}
.battle-reroll__seal--epic {
  overflow: hidden;
  border: 1px solid rgba(215, 165, 66, 0.26);
  animation: battleRerollSealReveal 0.55s ease 0.55s both;
}
.battle-reroll__seal--epic::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(215, 165, 66, 0.28), transparent);
  transform: translateX(-120%);
  animation: battleRerollSealShine 1.4s ease 0.8s forwards;
}
.battle-reroll__seal--epic strong {
  color: var(--reroll-gold);
  text-shadow: 0 0 18px rgba(215, 165, 66, 0.28);
}
@media (max-width: 640px) {
  .battle-reroll__stat strong {
    font-size: 20px;
  }
}

@keyframes battleRerollResultGlow {
  from {
    transform: rotate(0deg) scale(1);
  }
  to {
    transform: rotate(360deg) scale(1.04);
  }
}
@keyframes battleRerollStatReveal {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.86);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes battleRerollStatShine {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(120%);
  }
}
@keyframes battleRerollSealReveal {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes battleRerollSealShine {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(120%);
  }
}
.battle-reroll__result-card--epic {
  position: relative;
  overflow: hidden;
}
.battle-reroll__result-card--epic::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at 12% 0%, rgba(215, 165, 66, 0.16), transparent 34%), radial-gradient(circle at 88% 18%, rgba(123, 77, 242, 0.12), transparent 36%), linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 42%);
  animation: none !important;
}
.battle-reroll__result-glow {
  display: none !important;
  animation: none !important;
}
.battle-reroll__stats--compare {
  position: relative;
  z-index: 2;
}
.battle-reroll__stats--compare .battle-reroll__stat {
  min-height: 92px;
  padding: 12px 10px;
  transform: translateY(12px) scale(0.94);
  opacity: 0;
  animation: battleRerollCompareStat 0.45s ease forwards;
}
.battle-reroll__stats--compare .battle-reroll__stat:nth-child(1) {
  animation-delay: 0.08s;
}
.battle-reroll__stats--compare .battle-reroll__stat:nth-child(2) {
  animation-delay: 0.2s;
}
.battle-reroll__stats--compare .battle-reroll__stat:nth-child(3) {
  animation-delay: 0.32s;
}
.battle-reroll__stats--compare .battle-reroll__stat strong {
  margin-top: 2px;
  color: var(--reroll-gold);
  font-size: 34px;
  line-height: 1;
  font-weight: 900;
  text-shadow: 0 0 18px rgba(215, 165, 66, 0.26);
}
.battle-reroll__stats--compare .battle-reroll__stat small {
  display: block;
  margin-top: 7px;
  color: var(--reroll-muted);
  font-size: 11px;
  font-weight: 900;
}
.battle-reroll__diff {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 22px;
  margin-top: 7px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  font-style: normal;
  font-weight: 900;
  animation: battleRerollDiffPop 0.55s ease 0.35s both;
}
.battle-reroll__diff--plus {
  color: #fff;
  background: rgba(34, 160, 107, 0.95);
  box-shadow: 0 0 18px rgba(34, 160, 107, 0.28);
}
.battle-reroll__diff--minus {
  color: #fff;
  background: rgba(189, 61, 81, 0.95);
  box-shadow: 0 0 18px rgba(189, 61, 81, 0.28);
}
.battle-reroll__diff--same {
  color: var(--reroll-muted);
  background: rgba(123, 77, 242, 0.12);
}
.battle-reroll__seal {
  position: relative;
  z-index: 2;
}
.battle-reroll__seal--swap {
  overflow: hidden;
  border: 1px solid rgba(215, 165, 66, 0.28);
  background: radial-gradient(circle at 50% 0%, rgba(215, 165, 66, 0.16), transparent 44%), rgba(215, 165, 66, 0.08);
}
.battle-reroll__seal-change {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}
.battle-reroll__seal-old, .battle-reroll__seal-new {
  min-height: 74px;
  padding: 10px;
  border-radius: 13px;
}
.battle-reroll__seal-old strong,
.battle-reroll__seal-old small, .battle-reroll__seal-new strong,
.battle-reroll__seal-new small {
  display: block;
}
.battle-reroll__seal-old strong, .battle-reroll__seal-new strong {
  margin: 0;
  font-size: 13px;
  font-weight: 900;
}
.battle-reroll__seal-old small, .battle-reroll__seal-new small {
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.35;
  font-weight: 800;
}
.battle-reroll__seal-old {
  opacity: 0.62;
  background: rgba(255, 255, 255, 0.26);
  transform: translateX(0);
  animation: battleRerollOldSealLeave 0.7s ease both;
}
.battle-reroll__seal-new {
  background: rgba(215, 165, 66, 0.13);
  box-shadow: inset 0 0 22px rgba(215, 165, 66, 0.12);
  transform: translateX(24px);
  opacity: 0;
  animation: battleRerollNewSealEnter 0.7s ease 0.18s both;
}
.battle-reroll__seal-new strong {
  color: var(--reroll-gold);
  text-shadow: 0 0 14px rgba(215, 165, 66, 0.28);
}
.battle-reroll__seal-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--reroll-pink), var(--reroll-gold));
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(215, 165, 66, 0.22);
  animation: battleRerollSealArrow 0.55s ease 0.22s both;
}
@media (max-width: 640px) {
  .battle-reroll__stats--compare .battle-reroll__stat {
    min-height: auto;
  }
  .battle-reroll__stats--compare .battle-reroll__stat strong {
    font-size: 28px;
  }
  .battle-reroll__seal-change {
    grid-template-columns: 1fr;
  }
  .battle-reroll__seal-arrow {
    margin: 0 auto;
    transform: rotate(90deg);
  }
}

@keyframes battleRerollCompareStat {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes battleRerollDiffPop {
  0% {
    opacity: 0;
    transform: scale(0.65);
  }
  70% {
    opacity: 1;
    transform: scale(1.16);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes battleRerollOldSealLeave {
  0% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
  100% {
    opacity: 0.45;
    transform: translateX(-12px);
    filter: blur(0.4px);
  }
}
@keyframes battleRerollNewSealEnter {
  0% {
    opacity: 0;
    transform: translateX(24px) scale(0.96);
  }
  70% {
    opacity: 1;
    transform: translateX(-3px) scale(1.03);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
@keyframes battleRerollSealArrow {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.battle-reroll__wallet {
  position: relative;
}
.battle-reroll__wallet-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 32px;
  margin-top: 10px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, rgba(123, 77, 242, 0.95), rgba(93, 58, 190, 0.95));
  box-shadow: 0 10px 24px rgba(123, 77, 242, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.battle-reroll__wallet-buy:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(123, 77, 242, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.battle-reroll__wallet-buy:active {
  transform: scale(0.98);
}

.battle-reroll-exchange {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.battle-reroll-exchange--active {
  display: flex;
}
.battle-reroll-exchange__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.battle-reroll-exchange__box {
  position: relative;
  z-index: 2;
  width: min(420px, 100%);
  padding: 20px;
  border: 1px solid var(--reroll-border);
  border-radius: 24px;
  background: var(--reroll-card);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
}
.battle-reroll-exchange__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--reroll-text);
  background: var(--reroll-soft);
  font-size: 22px;
  font-weight: 900;
}
.battle-reroll-exchange__head {
  text-align: center;
}
.battle-reroll-exchange__head span {
  color: var(--reroll-gold);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.battle-reroll-exchange__head h3 {
  margin: 6px 0 4px;
  font-size: 22px;
  font-weight: 900;
}
.battle-reroll-exchange__head p {
  margin: 0;
  color: var(--reroll-muted);
  font-size: 13px;
  font-weight: 800;
}
.battle-reroll-exchange__values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 18px 0;
}
.battle-reroll-exchange__values div {
  padding: 12px;
  border-radius: 16px;
  background: rgba(123, 77, 242, 0.08);
  text-align: center;
}
.battle-reroll-exchange__values span,
.battle-reroll-exchange__values strong {
  display: block;
}
.battle-reroll-exchange__values span {
  color: var(--reroll-muted);
  font-size: 11px;
  font-weight: 900;
}
.battle-reroll-exchange__values strong {
  margin-top: 4px;
  font-size: 17px;
  font-weight: 900;
}
.battle-reroll-exchange__range {
  width: 100%;
  accent-color: #b99cff;
}
.battle-reroll-exchange__submit {
  width: 100%;
  height: 50px;
  margin-top: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.03em;
  background: linear-gradient(135deg, rgb(123, 77, 242), rgb(91, 57, 188));
  box-shadow: 0 16px 34px rgba(123, 77, 242, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.battle-reroll-exchange__submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 42px rgba(123, 77, 242, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.battle-reroll-exchange__submit:active {
  transform: scale(0.985);
}

.battle-reroll__result-card {
  --potential-color: var(--reroll-muted);
  --potential-soft: rgba(123, 77, 242, .10);
  --potential-glow: rgba(123, 77, 242, .22);
}
.battle-reroll__result-card--common {
  --potential-color: #9aa3ad;
  --potential-soft: rgba(154, 163, 173, .14);
  --potential-glow: rgba(154, 163, 173, .22);
}
.battle-reroll__result-card--rare {
  --potential-color: #4d9cff;
  --potential-soft: rgba(77, 156, 255, .14);
  --potential-glow: rgba(77, 156, 255, .28);
}
.battle-reroll__result-card--epic {
  --potential-color: #a66bff;
  --potential-soft: rgba(166, 107, 255, .16);
  --potential-glow: rgba(166, 107, 255, .32);
}
.battle-reroll__result-card--legendary {
  --potential-color: #f0ad38;
  --potential-soft: rgba(240, 173, 56, .18);
  --potential-glow: rgba(240, 173, 56, .38);
}
.battle-reroll__result-card--mythic {
  --potential-color: #ff5ebc;
  --potential-soft: rgba(255, 94, 188, .18);
  --potential-glow: rgba(255, 94, 188, .42);
}
.battle-reroll__stat {
  background: radial-gradient(circle at 50% 0%, var(--potential-soft), transparent 60%), rgba(255, 255, 255, 0.38);
}
.battle-reroll__stat strong {
  color: var(--potential-color) !important;
  text-shadow: 0 0 12px var(--potential-glow), 0 0 28px var(--potential-glow);
}
.battle-reroll__stat--legendary::after, .battle-reroll__stat--mythic::after {
  content: "";
  position: absolute;
  inset: -40%;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.28), transparent 65%);
  animation: battleRerollPotentialShine 2.5s ease-in-out infinite;
}

@keyframes battleRerollPotentialShine {
  0% {
    transform: translateX(-45%) rotate(8deg);
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  100% {
    transform: translateX(45%) rotate(8deg);
    opacity: 0;
  }
}
.battle-reroll__stat--epic, .battle-reroll__stat--legendary, .battle-reroll__stat--mythic {
  overflow: hidden;
}
.battle-reroll__stat--epic strong, .battle-reroll__stat--legendary strong, .battle-reroll__stat--mythic strong {
  position: relative;
  animation: battleRerollStatGlow 2.4s ease-in-out infinite;
}
.battle-reroll__stat--epic::before, .battle-reroll__stat--legendary::before, .battle-reroll__stat--mythic::before {
  content: "";
  position: absolute;
  inset: -30%;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.7;
  filter: blur(26px);
  animation: battleRerollAura 3.2s ease-in-out infinite;
}
.battle-reroll__stat--epic::before {
  background: rgba(166, 107, 255, 0.22);
}
.battle-reroll__stat--epic strong {
  text-shadow: 0 0 10px rgba(166, 107, 255, 0.45), 0 0 24px rgba(166, 107, 255, 0.28);
}
.battle-reroll__stat--legendary::before {
  background: rgba(240, 173, 56, 0.24);
}
.battle-reroll__stat--legendary strong {
  text-shadow: 0 0 12px rgba(240, 173, 56, 0.55), 0 0 28px rgba(240, 173, 56, 0.36);
}
.battle-reroll__stat--mythic::before {
  background: radial-gradient(circle, rgba(255, 94, 188, 0.24), transparent 70%);
}
.battle-reroll__stat--mythic strong {
  text-shadow: 0 0 14px rgba(255, 94, 188, 0.65), 0 0 34px rgba(255, 94, 188, 0.42);
}

@keyframes battleRerollAura {
  0%, 100% {
    transform: scale(0.92);
    opacity: 0.45;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.9;
  }
}
@keyframes battleRerollStatGlow {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}
.battle-reroll__seal-head {
  display: flex;
  align-items: center;
  gap: 7px;
}
.battle-reroll__seal-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  background: rgba(123, 77, 242, 0.9);
  font-size: 11px;
  font-weight: 900;
}

.battle-reroll-seals {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.battle-reroll-seals--active {
  display: flex;
}
.battle-reroll-seals__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}
.battle-reroll-seals__box {
  position: relative;
  z-index: 2;
  width: min(760px, 100%);
  max-height: 85vh;
  overflow: hidden;
  border-radius: 24px;
  background: var(--reroll-card);
  color: var(--reroll-text);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.battle-reroll-seals__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--reroll-text);
  background: var(--reroll-soft);
  font-size: 22px;
  font-weight: 900;
}
.battle-reroll-seals__head {
  padding: 22px 22px 10px;
}
.battle-reroll-seals__head span {
  color: var(--reroll-gold);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.battle-reroll-seals__head h3 {
  margin: 6px 0 0;
  font-size: 24px;
  font-weight: 900;
}
.battle-reroll-seals__head p {
  margin: 6px 0 0;
  color: var(--reroll-muted);
  font-size: 13px;
  font-weight: 800;
}
.battle-reroll-seals__list {
  max-height: calc(85vh - 110px);
  overflow-y: auto;
  padding: 0 22px 22px;
}
.battle-reroll-seals__item {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(123, 77, 242, 0.07);
}
.battle-reroll-seals__item small {
  display: block;
  margin-top: 6px;
  color: var(--reroll-muted);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 800;
}
.battle-reroll-seals__item p {
  margin: 9px 0 0;
  color: var(--reroll-text);
  font-size: 13px;
  line-height: 1.55;
}
.battle-reroll-seals__item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.battle-reroll-seals__item-top strong {
  font-size: 15px;
  font-weight: 900;
}
.battle-reroll-seals__item-top span {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(123, 77, 242, 0.16);
  color: var(--reroll-muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
@media (max-width: 640px) {
  .battle-reroll-seals__box {
    border-radius: 18px;
  }
  .battle-reroll-seals__head {
    padding: 18px 16px 8px;
  }
  .battle-reroll-seals__head h3 {
    font-size: 20px;
  }
  .battle-reroll-seals__list {
    padding: 0 16px 16px;
  }
}

.battle-reroll-seals {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.battle-reroll-seals--active {
  display: flex;
}
.battle-reroll-seals__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}
.battle-reroll-seals__box {
  position: relative;
  z-index: 2;
  width: min(760px, 100%);
  max-height: 86vh;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  background: var(--reroll-card, #181121);
  color: var(--reroll-text, #fff);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55);
}
.battle-reroll-seals__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--reroll-text, #fff);
  background: var(--reroll-soft, #21182d);
  font-size: 22px;
  line-height: 34px;
  font-weight: 900;
}
.battle-reroll-seals__head {
  padding: 24px 26px 14px;
  background: var(--reroll-card, #181121);
}
.battle-reroll-seals__head span {
  display: block;
  color: var(--reroll-gold, #d7a542);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.battle-reroll-seals__head h3 {
  margin: 7px 0 0;
  color: var(--reroll-text, #fff);
  font-size: 26px;
  line-height: 1.1;
  font-weight: 900;
}
.battle-reroll-seals__head p {
  margin: 8px 0 0;
  color: var(--reroll-muted, #bcaec8);
  font-size: 13px;
  font-weight: 800;
}
.battle-reroll-seals__list {
  max-height: calc(86vh - 120px);
  overflow-y: auto;
  padding: 0 26px 26px;
  background: var(--reroll-card, #181121);
}
.battle-reroll-seals__item {
  margin-top: 12px;
  padding: 15px 16px;
  border: 1px solid var(--reroll-border, rgba(255, 255, 255, 0.1));
  border-radius: 18px;
  background: var(--reroll-soft, #21182d);
}
.battle-reroll-seals__item small {
  display: block;
  margin-top: 7px;
  color: var(--reroll-muted, #bcaec8);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 800;
}
.battle-reroll-seals__item p {
  margin: 10px 0 0;
  color: var(--reroll-text, #fff);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 500;
}
.battle-reroll-seals__item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.battle-reroll-seals__item-top strong {
  color: var(--reroll-text, #fff);
  font-size: 15px;
  line-height: 1.25;
  font-weight: 900;
}
.battle-reroll-seals__item-top span {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  color: #fff;
  background: rgba(123, 77, 242, 0.75);
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
}

.card-inventory-container--battle-reroll .card-filter-list__card::before {
  display: none !important;
  content: none !important;
}

.card-inventory-container--battle-reroll .card-filter-list__parent {
  display: none;
}

.battle-leaderboard {
  --bl-bg: var(--body-bg, #f4f1f7);
  --bl-card: var(--block-bg, #fff);
  --bl-card-2: var(--secondary-bg, #f9f6fc);
  --bl-text: var(--text-color, #241f2d);
  --bl-muted: var(--text-muted, #877d92);
  --bl-border: rgba(75, 57, 100, .12);
  --bl-main: var(--main-color, #7b4df2);
  --bl-pink: #b5658d;
  --bl-soft: rgba(123, 77, 242, .1);
  min-height: 100vh;
  padding: 16px 0 40px;
  color: var(--bl-text);
  background: var(--grey-background);
}
body.dark .battle-leaderboard, .theme-dark .battle-leaderboard, [data-theme=dark] .battle-leaderboard {
  --bl-bg: var(--body-bg, #100f16);
  --bl-card: var(--block-bg, #191620);
  --bl-card-2: var(--secondary-bg, #211d2a);
  --bl-text: var(--text-color, #f6f1fb);
  --bl-muted: var(--text-muted, #aaa1b5);
  --bl-border: rgba(255, 255, 255, .09);
  --bl-main: var(--main-color, #9a7cff);
  --bl-pink: #d07996;
  --bl-soft: rgba(154, 124, 255, .13);
}
.battle-leaderboard__inner {
  width: min(1180px, 100% - 28px);
  margin: 0 auto;
}
.battle-leaderboard__hero, .battle-leaderboard__table, .battle-leaderboard__empty {
  border: 1px solid var(--bl-border);
  border-radius: 24px;
  background: linear-gradient(145deg, var(--bl-card), var(--bl-card-2));
  box-shadow: 0 18px 42px rgba(35, 25, 50, 0.08);
}
.battle-leaderboard__hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  margin-bottom: 16px;
}
.battle-leaderboard__hero span {
  display: block;
  margin-bottom: 5px;
  color: var(--bl-main);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.battle-leaderboard__hero h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.1;
  font-weight: 900;
}
.battle-leaderboard__hero p {
  margin: 7px 0 0;
  color: var(--bl-muted);
  font-size: 14px;
  font-weight: 700;
}
.battle-leaderboard__back {
  display: inline-flex;
  margin-bottom: 12px;
  color: var(--bl-muted);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.battle-leaderboard__back:hover {
  color: var(--bl-main);
}
.battle-leaderboard__hero-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(135deg, var(--bl-pink), var(--bl-main));
  box-shadow: 0 18px 34px rgba(123, 77, 242, 0.24);
  font-size: 18px;
  font-weight: 900;
}
.battle-leaderboard__podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.battle-leaderboard__podium-card {
  position: relative;
  overflow: hidden;
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 18px;
  border: 1px solid var(--bl-border);
  border-radius: 24px;
  color: var(--bl-text);
  background: linear-gradient(145deg, var(--bl-card), var(--bl-card-2));
  text-decoration: none;
  box-shadow: 0 16px 36px rgba(35, 25, 50, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.battle-leaderboard__podium-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px rgba(35, 25, 50, 0.14);
}
.battle-leaderboard__podium-card:before {
  content: "";
  position: absolute;
  inset: -80px -80px auto auto;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(123, 77, 242, 0.18), transparent 70%);
}
.battle-leaderboard__podium-card--place-1 {
  transform: translateY(-8px);
  background: linear-gradient(135deg, rgba(123, 77, 242, 0.16), rgba(181, 101, 141, 0.11)), linear-gradient(145deg, var(--bl-card), var(--bl-card-2));
}
.battle-leaderboard__podium-card strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--bl-text);
  font-size: 16px;
  font-weight: 900;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.battle-leaderboard__podium-card span {
  color: var(--bl-muted);
  font-size: 12px;
  font-weight: 800;
}
.battle-leaderboard__podium-card em {
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--bl-main);
  background: var(--bl-soft);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}
.battle-leaderboard__crown {
  position: relative;
  z-index: 1;
  font-size: 24px;
}
.battle-leaderboard__podium-avatar, .battle-leaderboard__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--bl-card);
  color: var(--bl-main);
  font-weight: 900;
}
.battle-leaderboard__podium-avatar img, .battle-leaderboard__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.battle-leaderboard__podium-avatar {
  position: relative;
  z-index: 1;
  width: 74px;
  height: 74px;
  border: 3px solid rgba(123, 77, 242, 0.28);
  font-size: 28px;
}
.battle-leaderboard__table {
  overflow: hidden;
  padding: 8px;
}
.battle-leaderboard__table-head, .battle-leaderboard__row {
  display: grid;
  grid-template-columns: 58px minmax(180px, 1.4fr) minmax(140px, 1fr) 80px 70px 70px 80px;
  gap: 10px;
  align-items: center;
}
.battle-leaderboard__table-head {
  padding: 10px 12px;
  color: var(--bl-muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.battle-leaderboard__row {
  min-width: 0;
  padding: 11px 12px;
  border-radius: 16px;
  color: var(--bl-text);
  text-decoration: none;
  transition: background 0.18s ease, transform 0.18s ease;
}
.battle-leaderboard__row:hover {
  transform: translateX(2px);
  background: var(--bl-soft);
}
.battle-leaderboard__row--top {
  background: rgba(123, 77, 242, 0.06);
}
.battle-leaderboard__row > div {
  min-width: 0;
  font-size: 13px;
  font-weight: 800;
}
.battle-leaderboard__place {
  color: var(--bl-main);
  font-weight: 900 !important;
}
.battle-leaderboard__user {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.battle-leaderboard__user strong,
.battle-leaderboard__user small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.battle-leaderboard__user strong {
  font-size: 13px;
  font-weight: 900;
}
.battle-leaderboard__user small {
  margin-top: 2px;
  color: var(--bl-muted);
  font-size: 11px;
  font-weight: 800;
}
.battle-leaderboard__avatar {
  width: 42px;
  height: 42px;
  border: 2px solid rgba(123, 77, 242, 0.22);
  font-size: 17px;
}
.battle-leaderboard__rank strong,
.battle-leaderboard__rank small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.battle-leaderboard__rank strong {
  font-size: 13px;
  font-weight: 900;
}
.battle-leaderboard__rank small {
  margin-top: 2px;
  color: var(--bl-main);
  font-size: 11px;
  font-weight: 900;
}
.battle-leaderboard__empty {
  padding: 20px;
  color: var(--bl-muted);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}
@media (max-width: 900px) {
  .battle-leaderboard__hero {
    align-items: flex-start;
    flex-direction: column;
  }
  .battle-leaderboard__hero-badge {
    width: 100%;
    height: 54px;
    border-radius: 18px;
  }
  .battle-leaderboard__podium {
    grid-template-columns: 1fr;
  }
  .battle-leaderboard__podium-card--place-1 {
    transform: none;
  }
  .battle-leaderboard__table-head {
    display: none;
  }
  .battle-leaderboard__row {
    position: relative;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px;
  }
  .battle-leaderboard__row > div {
    min-width: 0;
    font-size: 12px;
  }
  .battle-leaderboard__place {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 12px;
    color: var(--bl-main);
    background: rgba(123, 77, 242, 0.12);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(123, 77, 242, 0.12);
  }
  .battle-leaderboard__user {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding-right: 46px;
  }
  .battle-leaderboard__user strong,
  .battle-leaderboard__user small {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .battle-leaderboard__user strong {
    font-size: 14px;
    font-weight: 900;
  }
  .battle-leaderboard__user small {
    margin-top: 2px;
    color: var(--bl-muted);
    font-size: 11px;
    font-weight: 800;
  }
  .battle-leaderboard__rank {
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--bl-soft);
  }
  .battle-leaderboard__rank strong,
  .battle-leaderboard__rank small {
    display: block;
  }
  .battle-leaderboard__rank strong {
    font-size: 14px;
    font-weight: 900;
  }
  .battle-leaderboard__rank small {
    margin-top: 3px;
    color: var(--bl-main);
    font-size: 12px;
    font-weight: 900;
  }
  .battle-leaderboard__row > div:nth-child(4), .battle-leaderboard__row > div:nth-child(5), .battle-leaderboard__row > div:nth-child(6), .battle-leaderboard__row > div:nth-child(7) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 30px;
    padding: 7px 10px;
    border-radius: 12px;
    background: var(--bl-soft);
    color: var(--bl-text);
    font-size: 11px;
    font-weight: 900;
  }
  .battle-leaderboard__row > div:nth-child(4)::before, .battle-leaderboard__row > div:nth-child(5)::before, .battle-leaderboard__row > div:nth-child(6)::before, .battle-leaderboard__row > div:nth-child(7)::before {
    margin-right: 4px;
    color: var(--bl-muted);
  }
  .battle-leaderboard__row > div:nth-child(4)::before {
    content: "Победы:";
  }
  .battle-leaderboard__row > div:nth-child(5)::before {
    content: "WR:";
  }
  .battle-leaderboard__row > div:nth-child(6)::before {
    content: "Серия:";
  }
  .battle-leaderboard__row > div:nth-child(7)::before {
    content: "Неделя:";
  }
}

.battle-decks {
  --deck-bg: var(--body-bg, #f4f1f8);
  --deck-card: var(--block-bg, #fff);
  --deck-soft: var(--secondary-bg, #f8f5fb);
  --deck-text: var(--text-color, #21172d);
  --deck-muted: var(--text-muted, #85768f);
  --deck-border: rgba(83, 55, 112, .14);
  --deck-primary: var(--main-color, #7b4df2);
  --deck-shadow: rgba(37, 20, 58, .08);
  --awakening-muted: var(--text-muted, #85768f);
  padding: 14px 0 30px;
  color: var(--deck-text);
  background: var(--deck-bg);
}
body.dark .battle-decks, .theme-dark .battle-decks, [data-theme=dark] .battle-decks {
  --deck-bg: var(--body-bg, #0f0b16);
  --deck-card: var(--block-bg, #181121);
  --deck-soft: var(--secondary-bg, #21182d);
  --deck-text: var(--text-color, #fff7ff);
  --deck-muted: var(--text-muted, #bcaec8);
  --deck-border: rgba(255, 255, 255, .10);
  --deck-shadow: rgba(0, 0, 0, .25);
}
.battle-decks__inner {
  width: min(1180px, 100% - 24px);
  margin: 0 auto;
}
.battle-decks__top, .battle-decks__panel {
  border: 1px solid var(--deck-border);
  border-radius: 16px;
  background: var(--deck-card);
  box-shadow: 0 12px 30px var(--deck-shadow);
}
.battle-decks__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 14px;
}
.battle-decks__eyebrow, .battle-decks__head span {
  display: block;
  margin-bottom: 3px;
  color: var(--deck-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.battle-decks__title {
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 700;
}
.battle-decks__layout {
  display: grid;
  grid-template-columns: 260px 320px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.battle-decks__panel {
  padding: 12px;
}
.battle-decks__panel--inventory {
  min-width: 0;
}
.battle-decks__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.battle-decks__head strong {
  font-size: 14px;
  font-weight: 700;
}
.battle-decks__list {
  display: grid;
  gap: 8px;
}
.battle-decks__deck {
  padding: 9px;
  border: 1px solid var(--deck-border);
  border-radius: 13px;
  background: var(--deck-soft);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.battle-decks__deck--active {
  border-color: rgba(123, 77, 242, 0.42);
}
.battle-decks__deck--editing {
  transform: translateY(-1px);
  border-color: rgba(123, 77, 242, 0.65);
}
.battle-decks__deck-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  color: var(--deck-text);
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.battle-decks__deck-main strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.battle-decks__deck-main span {
  flex: 0 0 auto;
  color: var(--deck-muted);
  font-size: 11px;
  font-weight: 600;
}
.battle-decks__mini {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin-top: 8px;
}
.battle-decks__mini-card {
  overflow: hidden;
  aspect-ratio: 74/102;
  border-radius: 8px;
  background: rgba(123, 77, 242, 0.08);
}
.battle-decks__mini-card img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.battle-decks__deck-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-top: 8px;
}
.battle-decks__deck-actions button {
  min-height: 28px;
  border: 0;
  border-radius: 9px;
  color: var(--deck-text);
  background: rgba(123, 77, 242, 0.09);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}
.battle-decks__deck-actions button:hover {
  background: rgba(123, 77, 242, 0.15);
}
.battle-decks__slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.battle-decks__slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 74/102;
  border: 1px dashed rgba(123, 77, 242, 0.32);
  border-radius: 12px;
  background: var(--deck-soft);
  color: var(--deck-muted);
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
}
.battle-decks__slot img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.battle-decks__slot button {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
  line-height: 1;
}
.battle-decks__slot--filled {
  border-style: solid;
  border-color: rgba(123, 77, 242, 0.4);
}
.battle-decks__editor-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.battle-decks__button {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
.battle-decks__button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.battle-decks__button--primary {
  color: #fff;
  background: var(--deck-primary);
}
.battle-decks__button--ghost {
  color: var(--deck-text);
  background: rgba(123, 77, 242, 0.1);
}
.battle-decks .battle-decks-card--selected {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 0 0 2px rgba(123, 77, 242, 0.65), 0 10px 22px rgba(123, 77, 242, 0.18) !important;
  z-index: 3;
}
@media (max-width: 1100px) {
  .battle-decks__layout {
    grid-template-columns: 1fr 1fr;
  }
  .battle-decks__panel--inventory {
    grid-column: 1/-1;
  }
}
@media (max-width: 700px) {
  .battle-decks__inner {
    width: min(100% - 16px, 1180px);
  }
  .battle-decks__top {
    align-items: stretch;
    flex-direction: column;
  }
  .battle-decks__layout {
    grid-template-columns: 1fr;
  }
  .battle-decks__slots {
    grid-template-columns: repeat(2, 1fr);
  }
}
.battle-decks__deck {
  position: relative;
}
.battle-decks__deck::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  border: 2px solid var(--deck-primary);
  transition: opacity 0.18s ease;
}
.battle-decks__deck--editing {
  background: linear-gradient(135deg, rgba(123, 77, 242, 0.14), var(--deck-soft));
  box-shadow: 0 0 0 1px rgba(123, 77, 242, 0.32), 0 14px 28px rgba(123, 77, 242, 0.14);
}
.battle-decks__deck--editing::before {
  opacity: 1;
}
.battle-decks__deck--active {
  border-color: rgba(72, 194, 128, 0.55);
}
.battle-decks__deck--active .battle-decks__deck-status em {
  color: #48c280;
}
.battle-decks__deck-info {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.battle-decks__deck-status {
  display: block;
}
.battle-decks__deck-status em {
  font-style: normal;
  color: var(--deck-muted);
  font-size: 10px;
  font-weight: 700;
}
.battle-decks__deck-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 24px;
  border-radius: 999px;
  background: rgba(123, 77, 242, 0.12);
  color: var(--deck-primary) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}
.battle-decks__mini-card {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(123, 77, 242, 0.26);
  color: var(--deck-muted);
  font-size: 11px;
  font-weight: 800;
}
.battle-decks__mini-card--filled {
  border-style: solid;
}
.battle-decks__deck-actions {
  grid-template-columns: 1fr 1fr;
}
.battle-decks__deck-actions button:first-child {
  grid-column: 1/-1;
  background: rgba(123, 77, 242, 0.16);
  color: var(--deck-primary);
}
.battle-decks__deck-actions button:disabled {
  opacity: 0.7;
  cursor: default;
  color: #48c280;
  background: rgba(72, 194, 128, 0.12);
}
.battle-decks__empty {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 230px;
  padding: 18px;
  border: 1px dashed rgba(123, 77, 242, 0.35);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(123, 77, 242, 0.1), transparent);
  text-align: center;
}
.battle-decks__empty strong {
  font-size: 16px;
}
.battle-decks__empty p {
  max-width: 230px;
  margin: 0;
  color: var(--deck-muted);
  font-size: 12px;
  line-height: 1.45;
}
.battle-decks__empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: #fff;
  background: var(--deck-primary);
  box-shadow: 0 10px 22px rgba(123, 77, 242, 0.25);
}

.card-inventory-container--battle-decks .card-filter-list__card, .card-inventory-container--battle-reroll .card-filter-list__card {
  overflow: visible;
}
.card-inventory-container--battle-decks .card-filter-list__battle-stats, .card-inventory-container--battle-reroll .card-filter-list__battle-stats {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  z-index: 6;
}
.card-inventory-container--battle-decks .card-filter-list__battle-stat, .card-inventory-container--battle-reroll .card-filter-list__battle-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 3px 2px;
  border-radius: 8px;
  background: var(--block-bg);
  border: 1px solid rgba(123, 77, 242, 0.16);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.card-inventory-container--battle-decks .card-filter-list__battle-stat b, .card-inventory-container--battle-reroll .card-filter-list__battle-stat b {
  color: var(--text-muted);
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
}
.card-inventory-container--battle-decks .card-filter-list__battle-stat span, .card-inventory-container--battle-reroll .card-filter-list__battle-stat span {
  margin-top: 2px;
  color: var(--text-color);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.card-inventory-container--battle-reroll .card-filter-list__items,
.card-inventory-container--battle-decks .card-filter-list__items {
  row-gap: 78px;
}
.card-inventory-container--battle-reroll .card-filter-list__card,
.card-inventory-container--battle-decks .card-filter-list__card {
  position: relative;
  overflow: visible;
}
.card-inventory-container--battle-reroll .card-filter-list__battle-box,
.card-inventory-container--battle-decks .card-filter-list__battle-box {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 5;
  display: grid;
  gap: 4px;
  pointer-events: none;
}
.card-inventory-container--battle-reroll .card-filter-list__battle-seal-line,
.card-inventory-container--battle-decks .card-filter-list__battle-seal-line {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 22px;
  padding: 0 7px;
  border: 1px solid rgba(77, 138, 255, 0.55);
  border-radius: 999px;
  color: #6ba8ff;
  background: rgba(19, 28, 46, 0.86);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
}
.card-inventory-container--battle-reroll .card-filter-list__battle-seal-line span,
.card-inventory-container--battle-decks .card-filter-list__battle-seal-line span {
  flex: 0 0 auto;
  margin-right: 4px;
  font-size: 11px;
  line-height: 1;
}
.card-inventory-container--battle-reroll .card-filter-list__battle-seal-line b,
.card-inventory-container--battle-decks .card-filter-list__battle-seal-line b {
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.card-inventory-container--battle-reroll .card-filter-list__battle-stats-line,
.card-inventory-container--battle-decks .card-filter-list__battle-stats-line {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}
.card-inventory-container--battle-reroll .card-filter-list__battle-stats-line div,
.card-inventory-container--battle-decks .card-filter-list__battle-stats-line div {
  min-width: 0;
  padding: 5px 2px;
  border: 1px solid rgba(157, 127, 255, 0.22);
  border-radius: 10px;
  background: rgba(247, 244, 255, 0.94);
  text-align: center;
  box-shadow: 0 4px 10px rgba(49, 30, 84, 0.07);
}
.card-inventory-container--battle-reroll .card-filter-list__battle-stats-line span,
.card-inventory-container--battle-reroll .card-filter-list__battle-stats-line strong,
.card-inventory-container--battle-decks .card-filter-list__battle-stats-line span,
.card-inventory-container--battle-decks .card-filter-list__battle-stats-line strong {
  display: block;
  line-height: 1;
  white-space: nowrap;
}
.card-inventory-container--battle-reroll .card-filter-list__battle-stats-line span,
.card-inventory-container--battle-decks .card-filter-list__battle-stats-line span {
  margin-bottom: 3px;
  color: #514361;
  font-size: 9px;
  font-weight: 600;
}
.card-inventory-container--battle-reroll .card-filter-list__battle-stats-line strong,
.card-inventory-container--battle-decks .card-filter-list__battle-stats-line strong {
  overflow: hidden;
  color: #241a33;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.05em;
  text-overflow: clip;
}

.profile-status-modal {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.profile-status-modal__icon {
  width: 120px;
  margin: 0 auto;
}
.profile-status-modal__name {
  color: var(--main-text-color);
  font-weight: 600;
  margin: 20px 0;
  font-size: 25px;
}
.profile-status-modal__description {
  color: var(--main-text-color);
  margin-bottom: 10px;
  line-height: 25px;
}

.status__title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 8px;
}
.status__subtitle {
  color: var(--secondary-text-color);
  font-size: 13px;
  line-height: 18px;
}
.status__list {
  display: flex;
  margin-top: 22px;
}
.status__role {
  padding: 4px 15px;
  font-size: 13px;
  border: 1px solid var(--light-bg);
  box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.06), 0 0 2px 0 rgba(0, 0, 0, 0.06);
  border-radius: var(--main-border-radius);
  background: var(--light-bg);
  margin-right: 20px;
  flex-shrink: 0;
  cursor: pointer;
}
.status__role--active {
  background: var(--purple-btn-bg);
  color: white;
}
.status__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
  margin-right: 20px;
  opacity: 0.5;
  cursor: pointer;
  transition: all 0.2s;
}
.status__item:hover {
  opacity: 1;
}
.status__item--active {
  opacity: 1;
}
.status__item--active .status__image {
  position: relative;
  background-color: var(--light-bg);
}
.status__item--active .status__image img {
  border-radius: 6px;
}
.status__item--active .status__image::before {
  content: "\e876";
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
  color: white;
  background-color: var(--green-color);
  font-size: 17px;
  padding: 1px;
  position: absolute;
  right: -1px;
  bottom: 0;
  border-radius: 50%;
}
.status__item--unavailable .status__image {
  position: relative;
  background-color: var(--light-bg);
}
.status__item--unavailable .status__image::before {
  content: "\e897";
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
  color: var(--light-bg);
  background-color: var(--dark-bg);
  font-size: 17px;
  padding: 1px;
  position: absolute;
  right: -1px;
  bottom: 0;
  border-radius: 50%;
}
.status__image {
  width: 62px;
  height: 62px;
  margin-bottom: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--light-bg);
  box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.06), 0 0 2px 0 rgba(0, 0, 0, 0.06);
}
.status__image img {
  width: 32px !important;
  height: 32px;
  -o-object-fit: contain;
     object-fit: contain;
}
.status__name {
  font-size: 14px;
  color: var(--main-text-color);
  text-align: center;
  overflow-wrap: anywhere;
  line-height: 20px;
}

#modal-comment-status {
  z-index: 99999;
}

#modal-edit-decor::before {
  background: rgba(0, 0, 0, 0.05);
}

.main-profile--mobile [data-modal-trigger=modal-edit-decor] {
  margin-left: 10px;
}

.edit-decor__content {
  margin: 10px 0;
  display: flex;
  overflow-x: auto;
  padding-bottom: 10px;
}
.edit-decor__content-item {
  margin-right: 10px;
  width: 100px;
  flex-shrink: 0;
  border: 3px solid transparent;
  cursor: pointer;
  position: relative;
}
.edit-decor__content-item[data-purchased="0"]::before {
  content: "\e897";
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
  color: var(--light-bg);
  background-color: var(--dark-bg);
  font-size: 17px;
  padding: 3px;
  position: absolute;
  right: -5px;
  bottom: -5px;
  border-radius: 50%;
  color: white;
}
.edit-decor__content-item img {
  border-radius: 10px;
}
.edit-decor__content-item--active {
  border: 3px solid var(--purple-btn-bg);
  border-radius: 14px;
}
.edit-decor__content-item--cover {
  width: 200px;
  height: 70px;
}
.edit-decor__content-item--cover img {
  -o-object-fit: cover;
     object-fit: cover;
}
.edit-decor__content-item--skin {
  width: 150px;
  height: 60px;
}
.edit-decor__content-item--skin div {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.profile-skin {
  --title-color: hsla(0,0%,100%,.77) !important;
  --main-text-color: hsla(0,0%,100%,.77) !important;
  --icons-color: hsla(0,0%,100%,.77) !important;
  --secondary-text-color:hsla(0,0%,100%,.6) !important;
  --dark-bg: rgba(14, 13, 32, 0.4) !important;
  --main-border-radius: 6px !important;
  --grey-background: #121212 !important;
  --main-purple-color: #8b00ff !important;
  --secondary-purple-color: #bf94ff !important;
  --purple-btn-bg: #772ce8 !important;
  --light-bg: rgba(0, 0, 0, 0.1) !important;
  --medium-bg: rgba(0, 0, 0, 0.2) !important;
  --border-color: hsla(0,0%,59%,.3) !important;
  --rating-bg-green: rgba(89,89,89,.05) !important;
  --rating-bg-red: rgba(89,89,89,.05) !important;
  --bg-inverse: #fff !important;
  --seconday-bg-color: rgb(0 0 0 / 15%) !important;
  --chapters-hover: rgb(144 150 155 / 10%) !important;
  --indicator-border: #121212 !important;
  --checkbox-color: #1b1b1b !important;
  --chapter-visited: #000 !important;
  --notification-not-read-color: #261f2d !important;
  --dark-grey-bg: rgba(0, 0, 0, 0.2) !important;
  --profile-skin-background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(148.71deg, rgb(58, 123, 161) 5.64%, rgb(127, 126, 185) 26.38%, rgb(127, 126, 185) 49.92%, rgb(58, 123, 161) 73.12%);
}
.profile-skin .manga-cards__info {
  /*background: rgba(0, 0, 0, 0.90) !important;*/
  background: linear-gradient(var(--profile-skin-background-deg), var(--profile-skin-background-1), var(--profile-skin-background-2)) !important;
}
.profile-skin .header__link-sub,
.profile-skin #toast-container > div {
  background: var(--profile-skin-background) !important;
}
.profile-skin .profile__user-activity-bar {
  background: var(--medium-bg) !important;
}
.profile-skin--1 {
  --profile-skin-background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(148.71deg, rgb(58, 123, 161) 5.64%, rgb(127, 126, 185) 26.38%, rgb(127, 126, 185) 49.92%, rgb(58, 123, 161) 73.12%);
}
.profile-skin--2 {
  --profile-skin-background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(48.17deg, rgb(83, 72, 202) 11.21%, rgb(20, 7, 48) 61.92%);
}
.profile-skin--3 {
  --profile-skin-background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(rgb(102, 80, 105) 12.84%, rgb(145, 163, 209) 85.99%);
}
.profile-skin--4 {
  --profile-skin-background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(162.27deg, rgb(20, 34, 21) 11.2%, rgb(45, 77, 57) 29.93%, rgb(69, 76, 50) 48.64%, rgb(90, 124, 88) 67.85%, rgb(169, 142, 75) 83.54%);
  --main-purple-color: #388249 !important;
  --secondary-purple-color: #388249 !important;
  --purple-btn-bg: #162c16 !important;
}
.profile-skin--5 {
  --profile-skin-background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(180.14deg, rgb(52, 79, 104) 8.5%, rgba(238, 59, 87, 0.72) 94.28%);
}
.profile-skin--6 {
  --profile-skin-background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(154.19deg, rgb(159, 65, 117) 8.62%, rgb(196, 143, 100) 48.07%, rgb(166, 149, 61) 76.04%);
}
.profile-skin--7 {
  --profile-skin-background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(141.68deg, rgb(72, 40, 140) 27.57%, rgb(219, 128, 75) 71.25%) ;
}
.profile-skin--8 {
  --profile-skin-background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(38.99deg, rgb(231, 219, 208) 12.92%, rgb(223, 208, 178) 32.92%, rgb(224, 214, 163) 52.11%);
  --main-purple-color: #4c4838 !important;
  --secondary-purple-color: #dcd3ae !important;
  --purple-btn-bg: #4c4838 !important;
}
.profile-skin--9 {
  --profile-skin-background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(179.52deg, rgb(164, 192, 247) 7.08%, rgb(169, 228, 232) 34.94%, rgb(176, 226, 184) 65.12%, rgb(207, 223, 162) 96.23%);
  --main-purple-color: #98a7c1 !important;
  --secondary-purple-color: #98a7c1 !important;
  --purple-btn-bg: #98a7c1 !important;
}
.profile-skin--10 {
  --profile-skin-background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(rgb(243, 180, 54) 31.1%, rgb(238, 133, 88) 67.09%);
  --main-purple-color: #b3852d !important;
  --secondary-purple-color: #b3852d !important;
  --purple-btn-bg: #b3852d !important;
}
.profile-skin--11 {
  --profile-skin-background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(180.14deg, rgb(244, 171, 185) 8.5%, rgb(177, 194, 252) 94.28%);
  --main-purple-color: #a3727d !important;
  --secondary-purple-color: #e1adb9 !important;
  --purple-btn-bg: #68484f !important;
}
.profile-skin--12 {
  --profile-skin-background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(69.98deg, rgb(133, 118, 100) 14.14%, rgb(91, 68, 33) 60.35%);
  --main-purple-color: #b3852d !important;
  --secondary-purple-color: #b3852d !important;
  --purple-btn-bg: #b3852d !important;
}
.profile-skin--13 {
  --profile-skin-background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(179.14deg, rgb(100, 121, 98) 1.91%, rgb(88, 133, 117) 48.99%, rgb(106, 132, 130) 96.35%);
  --main-purple-color: #5e896b !important;
  --secondary-purple-color: #5e896b !important;
  --purple-btn-bg: #5e896b !important;
}
.profile-skin--14 {
  --profile-skin-background: linear-gradient(rgb(0 0 0 / 64%), rgba(0, 0, 0, 0.5)), linear-gradient(179.14deg, rgb(105 110 113) 1.91%, rgb(105 110 113) 48.99%, rgb(33 31 48) 96.35%);
  --main-purple-color: #787878 !important;
  --secondary-purple-color: #918d98 !important;
  --purple-btn-bg: #4d4c50 !important;
}
.profile-skin--14 .profile__user-activity-bar {
  background-color: #707070 !important;
}
.profile-skin--15 {
  --profile-skin-background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(64.92deg, rgb(0, 0, 0) 0%, rgb(149, 9, 9) 100%);
  --main-purple-color: #c61a1a !important;
  --secondary-purple-color: #ce5a5a !important;
  --purple-btn-bg: #a41212 !important;
}
.profile-skin--16 {
  --profile-skin-background: linear-gradient(rgb(195 54 104), rgb(120 36 120 / 50%)), linear-gradient(179.14deg, rgb(20 56 78) 1.91%, rgb(139 29 68) 48.99%, rgb(42 117 122) 96.35%);
  --main-purple-color: #ff5494 !important;
  --secondary-purple-color: #f086ae !important;
  --purple-btn-bg: #ff5494 !important;
}
.profile-skin--17 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(40, 100, 62), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(175, 111, 37), rgb(79 121 92 / 76%) 600px), radial-gradient(at right bottom, rgb(40, 100, 62), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(175, 111, 37), rgb(0 0 0 / 16%) 600px);
  --main-purple-color: #bea331 !important;
  --secondary-purple-color: #8BC34A !important;
  --purple-btn-bg: #bea331 !important;
}
.profile-skin--18 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(80 40 100), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(66 156 193), rgb(94 79 121 / 76%) 600px), radial-gradient(at right bottom, rgb(94 45 147), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(37 155 175), rgb(0 0 0 / 16%) 600px);
  --main-purple-color: #c9abdede !important;
  --secondary-purple-color: #f4e1ff !important;
  --purple-btn-bg: #7480c7 !important;
  --border-color: hsla(0,0%,59%,.4) !important;
}
.profile-skin--19 {
  --profile-skin-background: linear-gradient(to left, #355c7d, #6c5b7b, #c06c84);
  --main-purple-color: #e8d2f8 !important;
  --secondary-purple-color: #e8d2f8 !important;
  --purple-btn-bg: #9e5f73 !important;
}
.profile-skin--20 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(52 10 10), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(141 11 11), rgb(56 5 9) 600px), radial-gradient(at right bottom, rgb(110 47 51), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(91 7 7), rgb(0 0 0 / 16%) 600px);
  --main-purple-color: #b01f1f !important;
  --secondary-purple-color: #c73131 !important;
  --purple-btn-bg: #b52525 !important;
}
.profile-skin--21 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(58 19 20), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(7 86 91), rgb(56 5 9) 600px), radial-gradient(at right bottom, rgb(110 47 51), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(7 86 91), rgb(0 0 0 / 16%) 600px);
  --main-purple-color: #357b81 !important;
  --secondary-purple-color: #b8b8b8 !important;
  --purple-btn-bg: #165358 !important;
}
.profile-skin--22 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(183 29 88), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(55 19 98), rgb(104 42 70) 600px), radial-gradient(at right bottom, rgb(104 12 47), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(43 11 80), rgb(0 0 0 / 16%) 600px);
  --main-purple-color: #ad1d57 !important;
  --secondary-purple-color: #ffb8e0 !important;
  --purple-btn-bg: #561658 !important;
}
.profile-skin--23 {
  --profile-skin-background: linear-gradient(to left, #280422, #000000);
  --main-purple-color: #561658 !important;
  --secondary-purple-color: #ffb8e0 !important;
  --purple-btn-bg: #561658 !important;
}
.profile-skin--23 .profile__user-activity-bar--active {
  animation: fillAnimationBar 1s ease-in-out forwards;
  transform-origin: left;
}
.profile-skin--23 .profile__title {
  box-shadow: 0 0 2px 0px #fff, inset 0 0 2px #fff, 0px 0px 3px 2px #f13292, inset 0 0 10px 1px #f13292, 0 0 3px #f13292, inset 0 0 4px #f13292;
  padding: 6px 10px;
  font-size: 18px;
  margin-bottom: 30px;
  margin-top: 30px;
  color: #ddbed2;
  text-shadow: 0 0 6px rgba(229, 171, 200, 0.6117647059);
  background: linear-gradient(90deg, rgba(87, 89, 123, 0) 0%, rgba(149, 1, 169, 0.19) 90%);
}
.profile-skin--23 .mobile-profile__name::after,
.profile-skin--23 .mobile-profile__name::before,
.profile-skin--23 .profile__name::after,
.profile-skin--23 .profile__name::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  content: attr(data-name);
}
.profile-skin--23 .mobile-profile__name::after,
.profile-skin--23 .profile__name::after {
  color: #ff00c1;
  animation: glitch-effect 3s infinite;
}
.profile-skin--23 .mobile-profile__name::before,
.profile-skin--23 .profile__name::before {
  color: #3498db;
  animation: glitch-effect 2s infinite;
}
.profile-skin--24 {
  --profile-skin-background: #f8ef02;
  --main-text-color: hsla(0, 0%, 0%, 0.77) !important;
  --secondary-text-color: hsla(0, 0%, 0%, 0.6) !important;
  --title-color: hsla(0, 0%, 0%, 0.77) !important;
  --icons-color: hsla(0, 0%, 0%, 0.77) !important;
  --main-purple-color: #333 !important;
  --secondary-purple-color: #484748 !important;
  --purple-btn-bg: #333 !important;
}
.profile-skin--24 .modal__content {
  --title-color: hsla(0,0%,100%,.77);
  --main-text-color: hsla(0,0%,100%,.77);
  --icons-color: hsla(0,0%,100%,.77);
  --secondary-text-color:hsla(0,0%,100%,.6);
}
.profile-skin--24 .profile__title {
  position: relative;
  margin-bottom: 35px;
}
.profile-skin--24 .profile__title::before {
  content: " ";
  width: 100%;
  height: 6px;
  display: block;
  background-color: black;
  -webkit-clip-path: polygon(0 0, 0 100%, 10% 100%, calc(10% + 4px) 2px, 100% 2px, 100% 0);
          clip-path: polygon(0 0, 0 100%, 10% 100%, calc(10% + 4px) 2px, 100% 2px, 100% 0);
  position: absolute;
  bottom: -14px;
}
.profile-skin--24 .profile__activity-item:nth-child(1) .profile__activity-image {
  animation: cyber-glitch-0 5s linear infinite;
}
.profile-skin--24 .profile__activity-item:nth-child(2) .profile__activity-image {
  animation: cyber-glitch-1 4s linear infinite;
}
.profile-skin--24 .comments__rating-number-wrapper .value {
  background: #333;
}
.profile-skin--24 .comments__actions-btn .icon {
  color: #00ffd2;
}
.profile-skin--24 .comments__send-form textarea::-moz-placeholder {
  color: var(--secondary-text-color);
}
.profile-skin--24 .comments__send-form textarea::placeholder {
  color: var(--secondary-text-color);
}
.profile-skin--24 .achievements__item {
  margin-right: 20px;
}
.profile-skin--24 .comments .comments__send-form {
  border-radius: 0;
}
.profile-skin--24 .comments .comments__actions-btn {
  border-radius: 0;
  background: #333;
}
.profile-skin--24 .achievements__image {
  padding: 10px;
  background: #333;
  border-right: 3px solid #00ffd2;
}
.profile-skin--24 .achievements__image img {
  filter: grayscale(0.5);
}
.profile-skin--24 .profile__user-activity-bar,
.profile-skin--24 .profile__user-activity-bar--active,
.profile-skin--24 .profile__activity-bar,
.profile-skin--24 .profile__activity-bar--fill {
  -webkit-clip-path: polygon(0px 0px, 0px calc(100% - 0px), 20px 100%, 100% 100%, 100% 20px, calc(100% - 20px) 0px);
          clip-path: polygon(0px 0px, 0px calc(100% - 0px), 20px 100%, 100% 100%, 100% 20px, calc(100% - 20px) 0px);
  border-radius: 0;
}
.profile-skin--24 .profile__activity-bar {
  background: rgba(0, 0, 0, 0.3411764706);
}
.profile-skin--24 .profile__activity-bar--fill {
  background: #000000;
}
.profile-skin--24 .profile__about {
  padding: 5px 10px;
  background: #333;
  color: #00ffd2;
  -webkit-clip-path: polygon(0 0, 0 100%, calc(100% - 20px) 100%, 100% calc(100% - 20px), 100% 0);
          clip-path: polygon(0 0, 0 100%, calc(100% - 20px) 100%, 100% calc(100% - 20px), 100% 0);
}
.profile-skin--24 .profile__activity-image {
  padding: 7px;
}
.profile-skin--24 .profile__activity-image img {
  border-radius: 0;
}
.profile-skin--24 .profile__activity-item {
  background: #333;
  border-radius: 0;
}
.profile-skin--24 .profile__activity-percent {
  color: #00ffd2;
}
.profile-skin--24 .profile__activity-name {
  color: white;
}
.profile-skin--24 .chapter-history__icon {
  color: #00ffd2;
  background: #333;
  border-radius: 0;
  -webkit-clip-path: polygon(0 0, 0 100%, calc(100% - 10px) 100%, 100% calc(100% - 10px), 100% 0);
          clip-path: polygon(0 0, 0 100%, calc(100% - 10px) 100%, 100% calc(100% - 10px), 100% 0);
}
.profile-skin--24 .profile__friends-item {
  -webkit-clip-path: polygon(0 0, 0 100%, calc(100% - 10px) 100%, 100% calc(100% - 10px), 100% 0);
          clip-path: polygon(0 0, 0 100%, calc(100% - 10px) 100%, 100% calc(100% - 10px), 100% 0);
  background: #333;
  border-radius: 0;
}
.profile-skin--24 .profile__friends-name {
  color: #00ffd2;
}
.profile-skin--24 .profile__friends-time {
  color: white;
}
.profile-skin--24 .profile__cut {
  border: none;
}
.profile-skin--24 .profile__gift-item {
  background: #333;
  padding: 6px;
}
.profile-skin--24 .profile__name,
.profile-skin--24 .mobile-profile__name {
  animation-name: h1glitched;
  animation-duration: 1.53s;
  animation-iteration-count: infinite;
  animation-direction: reverse;
  animation-timing-function: linear;
}
.profile-skin--24 .profile__name::after,
.profile-skin--24 .mobile-profile__name::after {
  content: "_";
  animation-name: hxafter;
  animation-duration: 0.9s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.profile-skin--25 {
  --profile-skin-background: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
  --seconday-bg-color: rgba(0, 0, 0, 0.08) !important;
  --border-color: rgba(255, 255, 255, 0.55) !important;
  --main-purple-color: #ffffff !important;
  --secondary-purple-color: #d4e8ff !important;
  --main-text-color: hsl(0deg 0% 100%) !important;
  --secondary-text-color: hsl(0deg 0% 100% / 60%) !important;
  --title-color: hsla(0, 0%, 0%, 0.77) !important;
  --icons-color: hsla(0, 0%, 0%, 0.77) !important;
  text-shadow: 1px 1px 0px rgba(2, 0, 127, 0.4088235294);
  --purple-btn-bg: rgba(255, 255, 255, 0.1) !important;
  --medium-bg: rgba(255, 255, 255, 0.1) !important;
  --title-color: #fff !important;
}
.profile-skin--25 .mobile-profile__controls .button, .profile-skin--25 .mobile-profile__controls button {
  border: 1px solid var(--border-color);
  border-radius: 8px;
}
.profile-skin--25 .mobile-profile__controls .friends-controls.friends-controls--mobile button {
  border: 1px solid var(--border-color);
  border-radius: 8px;
}
.profile-skin--25 .profile__name,
.profile-skin--25 .mobile-profile__name {
  background-image: linear-gradient(-225deg, #5393cb 0%, #3a90c1 29%, #4ff3f7 67%, #7ab3f4 100%);
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  font-weight: bold;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  animation: u-nikcname-animbg 2.5s ease-in infinite;
  text-shadow: none;
}
.profile-skin--25 .comments__actions-btn {
  color: white !important;
}
.profile-skin--25 .profile__gift-item {
  -webkit-backdrop-filter: blur(21px);
          backdrop-filter: blur(21px);
  padding: 5px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.55);
}
.profile-skin--25 .mobile-profile__stat {
  -webkit-backdrop-filter: blur(21px);
          backdrop-filter: blur(21px);
  padding: 5px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.05);
  border-left: 1px solid rgba(255, 255, 255, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.55);
}
.profile-skin--25 .profile__user-activity-bar, .profile-skin--25 .profile__activity-bar {
  height: 10px;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.05);
  border-left: 1px solid rgba(255, 255, 255, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.55);
}
.profile-skin--25 .profile__user-activity-bar--active, .profile-skin--25 .profile__activity-bar--active {
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
}
.profile-skin--25 .chapter-history__icon, .profile-skin--25 .profile__about {
  -webkit-backdrop-filter: blur(21px);
          backdrop-filter: blur(21px);
  padding: 5px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.05);
  border-left: 1px solid rgba(255, 255, 255, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.55);
}
.profile-skin--25 .profile__about {
  padding: 5px 10px;
}
.profile-skin--25 .profile__friends-item {
  -webkit-backdrop-filter: blur(21px);
          backdrop-filter: blur(21px);
  padding: 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.55);
}
.profile-skin--25 .profile__friends-avatar img {
  border-radius: 9px;
}
.profile-skin--25 .profile__activity-item {
  -webkit-backdrop-filter: blur(21px);
          backdrop-filter: blur(21px);
  padding: 5px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.55);
}
.profile-skin--25 .achievements__image {
  -webkit-backdrop-filter: blur(21px);
          backdrop-filter: blur(21px);
  padding: 5px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.55);
}
.profile-skin--25 .achievements__item {
  margin-right: 15px;
}
.profile-skin--25 .comments .comments__send-form {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.05);
  border-left: 1px solid rgba(255, 255, 255, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.55);
}
.profile-skin--25 .comments .comments__send-form textarea::-moz-placeholder {
  color: var(--main-text-color);
}
.profile-skin--25 .comments .comments__send-form textarea::placeholder {
  color: var(--main-text-color);
}
.profile-skin--25 .profile__activity-image img {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: top;
  object-position: top;
  padding: 7px;
}
.profile-skin--25 .profile__cuts {
  display: none;
}
.profile-skin--26 {
  --profile-skin-background: #e6e7ee;
  --main-text-color: hsla(0, 0%, 0%, 0.77) !important;
  --secondary-text-color: hsla(0, 0%, 0%, 0.6) !important;
  --title-color: hsla(0, 0%, 0%, 0.77) !important;
  --icons-color: hsla(0, 0%, 0%, 0.77) !important;
  --main-purple-color: #333 !important;
  --secondary-purple-color: #484748 !important;
  --purple-btn-bg: #333 !important;
}
.profile-skin--26 .modal__content {
  --title-color: hsla(0,0%,100%,.77);
  --main-text-color: hsla(0,0%,100%,.77);
  --icons-color: hsla(0,0%,100%,.77);
  --secondary-text-color:hsla(0,0%,100%,.6);
}
.profile-skin--26 .comments .comments__send-form {
  border-radius: 20px;
  padding: 14px 18px !important;
  box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff !important;
  border: 0.0625rem solid #d1d9e6 !important;
  background: #e6e7ee !important;
}
.profile-skin--26 .profile__friends-item {
  box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff !important;
  border: 0.0625rem solid #d1d9e6 !important;
  background: #e6e7ee !important;
  padding: 10px 15px;
  border-radius: 20px;
}
.profile-skin--26 .profile__friends-avatar img {
  border-radius: 12px;
}
.profile-skin--26 .profile__gift-item {
  box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff !important;
  border: 0.0625rem solid #d1d9e6 !important;
  background: #e6e7ee !important;
  padding: 5px;
  border-radius: 20px;
}
.profile-skin--26 .profile__about p {
  box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff !important;
  border: 0.0625rem solid #d1d9e6 !important;
  background: #e6e7ee !important;
  padding: 15px;
  border-radius: 20px;
}
.profile-skin--26 .profile__title a {
  box-shadow: 3px 3px 6px #b8b9be, -3px -3px 6px #fff;
  border: 0.0625rem solid transparent;
  padding: 2px 12px;
  border-radius: 15px;
  transition: all 0.2s ease;
}
.profile-skin--26 .profile__title a:hover {
  box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;
  background-color: transparent;
  border-color: #d1d9e6;
}
.profile-skin--26 .achievements__image {
  box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff !important;
  border: 0.0625rem solid #d1d9e6 !important;
  background: #e6e7ee !important;
  padding: 15px;
  border-radius: 20px;
}
.profile-skin--26.profile-skin .profile__user-activity-bar {
  box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;
  background: #e6e7ee !important;
}
.profile-skin--26 .chapter-history__icon {
  color: #31344b;
  background-color: #e6e7ee;
  border-color: #d1d9e6;
  box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;
}
.profile-skin--26 .profile__activity-item {
  box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff !important;
  border: 0.0625rem solid #d1d9e6 !important;
  background: #e6e7ee !important;
  padding: 15px;
  border-radius: 20px;
  width: 206px;
  margin-bottom: 20px;
}
.profile-skin--26 .profile__activity-image {
  height: 88px;
}
.profile-skin--26 .profile__activity-image img {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.profile-skin--26 .profile__activity-bar {
  box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;
  background: #e6e7ee !important;
}
.profile-skin--26 .profile__cut {
  display: none;
}
.profile-skin--26 .mobile-profile__controls {
  margin-bottom: 30px;
}
.profile-skin--26 .mobile-profile__controls a, .profile-skin--26 .mobile-profile__controls button {
  box-shadow: 3px 3px 6px #b8b9be, -3px -3px 6px #fff;
  border: 0.0625rem solid transparent;
  border-radius: 15px;
  transition: all 0.2s ease;
  background: transparent !important;
  color: var(--main-text-color) !important;
}
.profile-skin--26 .mobile-profile__controls a:hover, .profile-skin--26 .mobile-profile__controls button:hover {
  box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;
  background-color: transparent;
  border-color: #d1d9e6;
}
.profile-skin--26 .comments__actions-btn {
  color: var(--main-text-color) !important;
  background: transparent;
  box-shadow: 3px 3px 6px #b8b9be, -3px -3px 6px #fff;
  border: 0.0625rem solid transparent;
}
.profile-skin--26 .comments__actions-btn:hover {
  box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;
  background-color: transparent;
  border-color: #d1d9e6;
}
.profile-skin--26 .button--primary {
  box-shadow: 3px 3px 6px #b8b9be, -3px -3px 6px #fff;
  border: 0.0625rem solid transparent;
  border-radius: 15px;
  transition: all 0.2s ease;
  background: transparent !important;
  color: var(--main-text-color) !important;
}
.profile-skin--26 .button--primary:hover {
  box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;
  background-color: transparent;
  border-color: #d1d9e6;
}
.profile-skin--27 {
  --profile-skin-background: #131419;
  --profile-skin-box-inner: inset 2px 2px 5px rgba(0,0,0,0.8), inset -3px -3px 7px rgb(112 160 163 / 10%) !important;
  --profile-skin-box-out: 3px 3px 6px rgba(0,0,0,0.8), -3px -3px 6px rgb(112 160 163 / 10%) !important;
  --profile-skin-border-out: #0c0c0c;
  --secondary-purple-color: #16a8b7 !important;
  --purple-btn-bg: #16a8b7 !important;
  --main-purple-color: #16a8b7 !important;
}
.profile-skin--27 .modal__content {
  --title-color: hsla(0,0%,100%,.77);
  --main-text-color: hsla(0,0%,100%,.77);
  --icons-color: hsla(0,0%,100%,.77);
  --secondary-text-color:hsla(0,0%,100%,.6);
}
.profile-skin--27 .comments .comments__send-form {
  border-radius: 20px;
  padding: 14px 18px !important;
  box-shadow: var(--profile-skin-box-inner);
  border: 0.0625rem solid var(--profile-skin-border-out) !important;
  background: var(--profile-skin-background) !important;
}
.profile-skin--27 .profile__friends-item {
  box-shadow: var(--profile-skin-box-inner);
  border: 0.0625rem solid var(--profile-skin-border-out) !important;
  background: var(--profile-skin-background) !important;
  padding: 10px 15px;
  border-radius: 20px;
}
.profile-skin--27 .profile__friends-avatar img {
  border-radius: 12px;
}
.profile-skin--27 .profile__gift-item {
  box-shadow: var(--profile-skin-box-inner);
  border: 0.0625rem solid var(--profile-skin-border-out) !important;
  background: var(--profile-skin-background) !important;
  padding: 5px;
  border-radius: 20px;
}
.profile-skin--27 .profile__about p {
  box-shadow: var(--profile-skin-box-inner);
  border: 0.0625rem solid var(--profile-skin-border-out) !important;
  background: var(--profile-skin-background) !important;
  padding: 15px;
  border-radius: 20px;
}
.profile-skin--27 .profile__title a {
  box-shadow: var(--profile-skin-box-out);
  border: 0.0625rem solid transparent;
  padding: 2px 12px;
  border-radius: 15px;
  transition: all 0.2s ease;
}
.profile-skin--27 .profile__title a:hover {
  box-shadow: var(--profile-skin-box-inner);
  background-color: transparent;
  border-color: var(--profile-skin-border-out);
}
.profile-skin--27 .achievements__image {
  box-shadow: var(--profile-skin-box-inner);
  border: 0.0625rem solid var(--profile-skin-border-out) !important;
  background: var(--profile-skin-background) !important;
  padding: 15px;
  border-radius: 20px;
}
.profile-skin--27.profile-skin .profile__user-activity-bar {
  box-shadow: var(--profile-skin-box-inner);
  background: var(--profile-skin-background) !important;
}
.profile-skin--27 .chapter-history__icon {
  color: #c8c8c8;
  background-color: var(--profile-skin-background);
  border-color: var(--profile-skin-border-out);
  box-shadow: var(--profile-skin-box-inner);
}
.profile-skin--27 .profile__activity-item {
  box-shadow: var(--profile-skin-box-inner);
  border: 0.0625rem solid var(--profile-skin-border-out) !important;
  background: var(--profile-skin-background) !important;
  padding: 15px;
  border-radius: 20px;
  width: 206px;
  margin-bottom: 20px;
}
.profile-skin--27 .profile__activity-image {
  height: 88px;
}
.profile-skin--27 .profile__activity-image img {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.profile-skin--27 .profile__activity-bar {
  box-shadow: var(--profile-skin-box-inner);
  background: var(--profile-skin-background) !important;
}
.profile-skin--27 .profile__cut {
  display: none;
}
.profile-skin--27 .mobile-profile__controls {
  margin-bottom: 30px;
}
.profile-skin--27 .mobile-profile__controls a, .profile-skin--27 .mobile-profile__controls button {
  box-shadow: var(--profile-skin-box-out);
  border: 0.0625rem solid transparent;
  border-radius: 15px;
  transition: all 0.2s ease;
  background: transparent !important;
  color: var(--main-text-color) !important;
}
.profile-skin--27 .mobile-profile__controls a:hover, .profile-skin--27 .mobile-profile__controls button:hover {
  box-shadow: var(--profile-skin-box-inner);
  background-color: transparent;
  border-color: var(--profile-skin-border-out);
}
.profile-skin--27 .comments__actions-btn {
  color: var(--main-text-color) !important;
  background: transparent;
  box-shadow: var(--profile-skin-box-out);
  border: 0.0625rem solid transparent;
}
.profile-skin--27 .comments__actions-btn:hover {
  box-shadow: var(--profile-skin-box-inner);
  background-color: transparent;
  border-color: var(--profile-skin-border-out);
}
.profile-skin--27 .button--primary {
  box-shadow: var(--profile-skin-box-out);
  border: 0.0625rem solid transparent;
  border-radius: 15px;
  transition: all 0.2s ease;
  background: transparent !important;
  color: var(--main-text-color) !important;
}
.profile-skin--27 .button--primary:hover {
  box-shadow: var(--profile-skin-box-inner);
  background-color: transparent;
  border-color: var(--profile-skin-border-out);
}
.profile-skin--28 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(39 39 43), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(38 35 49), rgb(89 86 118) 600px), radial-gradient(at right bottom, rgb(59 56 85), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(95 91 129), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #9485aa70 !important;
  --secondary-purple-color: #aca6b3 !important;
  --main-purple-color: #aca6b3 !important;
}
.profile-skin--28 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--28 .header {
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
}
.profile-skin--28 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--28 .comments__actions-btn {
  color: white !important;
}
.profile-skin--28 .profile__activity-bar, .profile-skin--28 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--28 .profile__cut {
  display: none;
}
.profile-skin--28.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--28.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--28.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--28.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--28.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--28 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0.1) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--29 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(147 59 92), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(87 38 66), rgb(104 42 70) 600px), radial-gradient(at right bottom, rgb(104 12 47), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(161 53 84), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #f364ab26 !important;
  --secondary-purple-color: #ffffff !important;
  --main-purple-color: #ff6c899c !important;
  --border-color: hsl(342.19deg 100% 80.98% / 21%) !important;
}
.profile-skin--29 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--29 .header {
  -webkit-backdrop-filter: blur(25px) !important;
          backdrop-filter: blur(25px) !important;
}
.profile-skin--29 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--29 .comments__actions-btn {
  color: white !important;
}
.profile-skin--29 .profile__activity-bar, .profile-skin--29 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--29 .profile__cut {
  display: none;
}
.profile-skin--29.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--29.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--29.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.profile-skin--29.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(25px);
          backdrop-filter: blur(25px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--29.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--29 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--30 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(9 17 100), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(186 27 148), rgb(24 53 127) 600px), radial-gradient(at right bottom, rgb(208 30 146), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(85 68 161), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #b764f326 !important;
  --secondary-purple-color: #c7a9f6 !important;
  --main-purple-color: #b46cff96 !important;
  --border-color: hsl(294.44deg 89.03% 75.35% / 21%) !important;
}
.profile-skin--30 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--30 .header {
  -webkit-backdrop-filter: blur(25px) !important;
          backdrop-filter: blur(25px) !important;
}
.profile-skin--30 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--30 .comments__actions-btn {
  color: white !important;
}
.profile-skin--30 .profile__activity-bar, .profile-skin--30 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--30 .profile__cut {
  display: none;
}
.profile-skin--30.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--30.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--30.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
.profile-skin--30.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--30.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--30 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--31 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(108 86 160), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(26 30 71), rgb(24 53 127) 600px), radial-gradient(at right bottom, rgb(139 113 180), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(85 68 161), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #b764f326 !important;
  --secondary-purple-color: #c7a9f6 !important;
  --main-purple-color: #916bdc !important;
  --border-color: hsl(294.44deg 89.03% 75.35% / 21%) !important;
}
.profile-skin--31 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--31 .header {
  -webkit-backdrop-filter: blur(25px) !important;
          backdrop-filter: blur(25px) !important;
}
.profile-skin--31 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--31 .comments__actions-btn {
  color: white !important;
}
.profile-skin--31 .profile__activity-bar, .profile-skin--31 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--31 .profile__cut {
  display: none;
}
.profile-skin--31.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--31.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--31.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
.profile-skin--31.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--31.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--31 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--32 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(3 5 13), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(26 30 71), rgb(32 9 66) 600px), radial-gradient(at right bottom, rgb(139 113 180), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(85 68 161), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #7646d55c !important;
  --secondary-purple-color: #8d6cc2 !important;
  --main-purple-color: #7646d5 !important;
  --border-color: hsl(294.44deg 89.03% 75.35% / 21%) !important;
}
.profile-skin--32 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--32 .header {
  -webkit-backdrop-filter: blur(25px) !important;
          backdrop-filter: blur(25px) !important;
}
.profile-skin--32 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--32 .comments__actions-btn {
  color: white !important;
}
.profile-skin--32 .profile__activity-bar, .profile-skin--32 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--32 .profile__cut {
  display: none;
}
.profile-skin--32.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--32.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--32.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
.profile-skin--32.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--32.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--32 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--33 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(22 63 60), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(9 26 26), rgb(7 19 20) 600px), radial-gradient(at right bottom, rgb(13 41 38), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(12 36 35), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #112623ab !important;
  --secondary-purple-color: #79a29f !important;
  --main-purple-color: #135c57 !important;
  --border-color: hsl(164.19deg 34.85% 61.16% / 21%) !important;
}
.profile-skin--33 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--33 .header {
  -webkit-backdrop-filter: blur(25px) !important;
          backdrop-filter: blur(25px) !important;
}
.profile-skin--33 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--33 .comments__actions-btn {
  color: white !important;
}
.profile-skin--33 .profile__activity-bar, .profile-skin--33 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--33 .profile__cut {
  display: none;
}
.profile-skin--33.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--33.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--33.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
.profile-skin--33.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--33.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--33 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--34 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(198 121 45), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(139 88 40), rgb(0 0 0) 600px), radial-gradient(at right bottom, rgb(193 128 56), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(147 86 20), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #e2812826 !important;
  --secondary-purple-color: #ffffff !important;
  --main-purple-color: #c6721f !important;
  --border-color: hsl(35.53deg 70.34% 57.26% / 21%) !important;
}
.profile-skin--34 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--34 .header {
  -webkit-backdrop-filter: blur(25px) !important;
          backdrop-filter: blur(25px) !important;
}
.profile-skin--34 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--34 .comments__actions-btn {
  color: white !important;
}
.profile-skin--34 .profile__activity-bar, .profile-skin--34 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--34 .profile__cut {
  display: none;
}
.profile-skin--34.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--34.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--34.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
.profile-skin--34.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--34.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--34 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--35 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(66 91 192), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(59 87 189), rgb(0 0 0) 600px), radial-gradient(at right bottom, rgb(66 96 193), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(58 85 189), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #283de259 !important;
  --secondary-purple-color: #ffffff !important;
  --main-purple-color: #7890f6ad !important;
  --border-color: hsl(226.61deg 42.32% 50.34% / 38%) !important;
}
.profile-skin--35 .comments__send-form textarea::-moz-placeholder {
  color: #ddd;
}
.profile-skin--35 .comments__send-form textarea::placeholder {
  color: #ddd;
}
.profile-skin--35 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--35 .header {
  -webkit-backdrop-filter: blur(25px) !important;
          backdrop-filter: blur(25px) !important;
}
.profile-skin--35 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--35 .comments__actions-btn {
  color: white !important;
}
.profile-skin--35 .profile__activity-bar, .profile-skin--35 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--35 .profile__cut {
  display: none;
}
.profile-skin--35.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--35.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--35.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
.profile-skin--35.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--35.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--35 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--36 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(163 49 5), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(197 110 19), rgb(0 0 0) 600px), radial-gradient(at right bottom, rgb(215 136 55), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(182 56 4), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #e2282859 !important;
  --secondary-purple-color: #ee713ad6 !important;
  --main-purple-color: #ff7437ad !important;
  --border-color: hsl(21.66deg 77.16% 52.9% / 46%) !important;
}
.profile-skin--36 .comments__send-form textarea::-moz-placeholder {
  color: #ddd;
}
.profile-skin--36 .comments__send-form textarea::placeholder {
  color: #ddd;
}
.profile-skin--36 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--36 .header {
  -webkit-backdrop-filter: blur(25px) !important;
          backdrop-filter: blur(25px) !important;
}
.profile-skin--36 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--36 .comments__actions-btn {
  color: white !important;
}
.profile-skin--36 .profile__activity-bar, .profile-skin--36 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--36 .profile__cut {
  display: none;
}
.profile-skin--36.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--36.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--36.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
.profile-skin--36.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--36.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--36 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--37 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(20 46 69), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(21 47 73), rgb(0 0 0) 600px), radial-gradient(at right bottom, rgb(36 36 66), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(36 36 66), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #2630635e !important;
  --secondary-purple-color: #7476a7d6 !important;
  --main-purple-color: #324564 !important;
  --border-color: hsl(214.58deg 48.69% 17.17%) !important;
}
.profile-skin--37 .comments__send-form textarea::-moz-placeholder {
  color: #ddd;
}
.profile-skin--37 .comments__send-form textarea::placeholder {
  color: #ddd;
}
.profile-skin--37 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--37 .header {
  -webkit-backdrop-filter: blur(25px) !important;
          backdrop-filter: blur(25px) !important;
}
.profile-skin--37 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--37 .comments__actions-btn {
  color: white !important;
}
.profile-skin--37 .profile__activity-bar, .profile-skin--37 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--37 .profile__cut {
  display: none;
}
.profile-skin--37.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--37.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--37.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
.profile-skin--37.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--37.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--37 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--38 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(228 233 244), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(232 236 248), rgb(0 0 0) 600px), radial-gradient(at right bottom, rgb(230 234 246), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(229 234 245), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #6565655e !important;
  --secondary-purple-color: #9c9fa6 !important;
  --main-purple-color: #84868b !important;
  --border-color: hsl(214.58deg 21.03% 88.43%) !important;
}
.profile-skin--38 .comments__send-form textarea::-moz-placeholder {
  color: #ddd;
}
.profile-skin--38 .comments__send-form textarea::placeholder {
  color: #ddd;
}
.profile-skin--38 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--38 .header {
  -webkit-backdrop-filter: blur(25px) !important;
          backdrop-filter: blur(25px) !important;
}
.profile-skin--38 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--38 .comments__actions-btn {
  color: white !important;
}
.profile-skin--38 .profile__activity-bar, .profile-skin--38 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--38 .profile__cut {
  display: none;
}
.profile-skin--38.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--38.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--38.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
.profile-skin--38.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--38.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--38 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--39 {
  --profile-skin-background: black;
  --main-purple-color: #787878 !important;
  --secondary-purple-color: #918d98 !important;
  --purple-btn-bg: #4d4c50 !important;
}
.profile-skin--39 .profile__user-activity-bar {
  background-color: #707070 !important;
}
.profile-skin--40 {
  --profile-skin-background: linear-gradient(to left, #231ba4, #000000);
  --main-purple-color: #212f88 !important;
  --secondary-purple-color: #8891d9 !important;
  --purple-btn-bg: #212f88 !important;
}
.profile-skin--40 .profile__user-activity-bar--active {
  animation: fillAnimationBar 1s ease-in-out forwards;
  transform-origin: left;
}
.profile-skin--40 .profile__title {
  box-shadow: 0 0 2px 0px #fff, inset 0 0 2px #fff, 0px 0px 3px 2px #3032c9, inset 0 0 10px 1px #222ac0, 0 0 3px #f13292, inset 0 0 4px #f13292;
  padding: 6px 10px;
  font-size: 18px;
  margin-bottom: 30px;
  margin-top: 30px;
  color: #bec2dd;
  text-shadow: 0 0 6px #bec2dd;
  background: linear-gradient(90deg, rgba(87, 89, 123, 0) 0%, rgba(37, 40, 189, 0.19) 90%);
}
.profile-skin--40 .mobile-profile__name::after,
.profile-skin--40 .mobile-profile__name::before,
.profile-skin--40 .profile__name::after,
.profile-skin--40 .profile__name::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  content: attr(data-name);
}
.profile-skin--40 .mobile-profile__name::after,
.profile-skin--40 .profile__name::after {
  color: #473bcc;
  animation: glitch-effect 3s infinite;
}
.profile-skin--40 .mobile-profile__name::before,
.profile-skin--40 .profile__name::before {
  color: #470462;
  animation: glitch-effect 2s infinite;
}
.profile-skin--41 {
  --profile-skin-background: linear-gradient(to left, #a4261b, #000000);
  --main-purple-color: #981a1a !important;
  --secondary-purple-color: #e5383e !important;
  --purple-btn-bg: #981a1a !important;
}
.profile-skin--41 .profile__user-activity-bar--active {
  animation: fillAnimationBar 1s ease-in-out forwards;
  transform-origin: left;
}
.profile-skin--41 .profile__title {
  box-shadow: 0 0 2px 0px #fff, inset 0 0 2px #fff, 0px 0px 3px 2px #c93030, inset 0 0 10px 1px #c50f0f, 0 0 3px #f13292, inset 0 0 4px #f13292;
  padding: 6px 10px;
  font-size: 18px;
  margin-bottom: 30px;
  margin-top: 30px;
  color: #d39e9e;
  text-shadow: 0 0 6px #d39e9e;
  background: linear-gradient(90deg, rgba(87, 89, 123, 0) 0%, rgba(103, 6, 8, 0.19) 90%);
}
.profile-skin--41 .mobile-profile__name::after,
.profile-skin--41 .mobile-profile__name::before,
.profile-skin--41 .profile__name::after,
.profile-skin--41 .profile__name::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  content: attr(data-name);
}
.profile-skin--41 .mobile-profile__name::after,
.profile-skin--41 .profile__name::after {
  color: #b00d0d;
  animation: glitch-effect 3s infinite;
}
.profile-skin--41 .mobile-profile__name::before,
.profile-skin--41 .profile__name::before {
  color: #e3c6c6;
  animation: glitch-effect 2s infinite;
}
.profile-skin--42 {
  --profile-skin-background: linear-gradient(to left, #139663, #000000);
  --main-purple-color: #07946a !important;
  --secondary-purple-color: #52b097 !important;
  --purple-btn-bg: #07946a !important;
}
.profile-skin--42 .profile__user-activity-bar--active {
  animation: fillAnimationBar 1s ease-in-out forwards;
  transform-origin: left;
}
.profile-skin--42 .profile__title {
  box-shadow: 0 0 2px 0px #fff, inset 0 0 2px #fff, 0px 0px 3px 2px #21be87, inset 0 0 10px 1px #0b8649, 0 0 3px #f13292, inset 0 0 4px #f13292;
  padding: 6px 10px;
  font-size: 18px;
  margin-bottom: 30px;
  margin-top: 30px;
  color: #beddbf;
  text-shadow: 0 0 6px #beddbf;
  background: linear-gradient(90deg, rgba(87, 89, 123, 0) 0%, rgba(23, 164, 95, 0.19) 90%);
}
.profile-skin--42 .mobile-profile__name::after,
.profile-skin--42 .mobile-profile__name::before,
.profile-skin--42 .profile__name::after,
.profile-skin--42 .profile__name::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  content: attr(data-name);
}
.profile-skin--42 .mobile-profile__name::after,
.profile-skin--42 .profile__name::after {
  color: #22b00d;
  animation: glitch-effect 3s infinite;
}
.profile-skin--42 .mobile-profile__name::before,
.profile-skin--42 .profile__name::before {
  color: #c6e3cb;
  animation: glitch-effect 2s infinite;
}
.profile-skin--43 {
  --profile-skin-background: linear-gradient(to left, #d3650c, #000000);
  --main-purple-color: #cb5a13 !important;
  --secondary-purple-color: #d3512d !important;
  --purple-btn-bg: #cb5a13 !important;
}
.profile-skin--43 .profile__user-activity-bar--active {
  animation: fillAnimationBar 1s ease-in-out forwards;
  transform-origin: left;
}
.profile-skin--43 .profile__title {
  box-shadow: 0 0 2px 0px #fff, inset 0 0 2px #fff, 0px 0px 3px 2px #c95913, inset 0 0 10px 1px #d1502d, 0 0 3px #f13292, inset 0 0 4px #f13292;
  padding: 6px 10px;
  font-size: 18px;
  margin-bottom: 30px;
  margin-top: 30px;
  color: #ddcbbe;
  text-shadow: 0 0 6px #ddc7be;
  background: linear-gradient(90deg, rgba(87, 89, 123, 0) 0%, rgba(164, 61, 23, 0.19) 90%);
}
.profile-skin--43 .mobile-profile__name::after,
.profile-skin--43 .mobile-profile__name::before,
.profile-skin--43 .profile__name::after,
.profile-skin--43 .profile__name::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  content: attr(data-name);
}
.profile-skin--43 .mobile-profile__name::after,
.profile-skin--43 .profile__name::after {
  color: #b0380d;
  animation: glitch-effect 3s infinite;
}
.profile-skin--43 .mobile-profile__name::before,
.profile-skin--43 .profile__name::before {
  color: #e3cec6;
  animation: glitch-effect 2s infinite;
}
.profile-skin--44 {
  --profile-skin-background-1: #a4261b;
  --profile-skin-background-2: #000000;
  --profile-skin-background-deg: 270deg;
  --profile-skin-background: linear-gradient(var(--profile-skin-background-deg), var(--profile-skin-background-1), var(--profile-skin-background-2));
  --main-purple-color: #981a1a !important;
  --secondary-purple-color: #e5383e !important;
  --purple-btn-bg: #981a1a !important;
  --title-shadow-color: #d39e9e;
}
.profile-skin--44 .profile__user-activity-bar--active {
  animation: fillAnimationBar 1s ease-in-out forwards;
  transform-origin: left;
}
.profile-skin--44 .profile__background {
  margin-bottom: 0;
}
.profile-skin--44 .profile__title {
  box-shadow: 0 0 2px 0px #fff, inset 0 0 2px #fff, 0px 0px 3px 2px var(--title-shadow-color), inset 0 0 10px 1px var(--title-shadow-color), 0 0 3px var(--title-shadow-color), inset 0 0 4px var(--title-shadow-color);
  padding: 6px 10px;
  font-size: 18px;
  margin-bottom: 30px;
  margin-top: 30px;
  color: var(--title-shadow-color);
  text-shadow: 0 0 6px var(--title-shadow-color);
}
.profile-skin--44 .mobile-profile__name::after,
.profile-skin--44 .mobile-profile__name::before,
.profile-skin--44 .profile__name::after,
.profile-skin--44 .profile__name::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  content: attr(data-name);
}
.profile-skin--44 .mobile-profile__name::after,
.profile-skin--44 .profile__name::after {
  color: var(--main-purple-color);
  animation: glitch-effect 3s infinite;
}
.profile-skin--44 .mobile-profile__name::before,
.profile-skin--44 .profile__name::before {
  color: var(--purple-btn-bg);
  animation: glitch-effect 2s infinite;
}
.profile-skin--title-border .profile__title {
  box-shadow: unset !important;
  background: unset !important;
  text-shadow: unset !important;
  margin-top: 20px;
}
.profile-skin--font-tektur {
  font-family: "Tektur", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
.profile-skin--font-ponomar {
  font-family: "Ponomar", system-ui;
  font-weight: 400;
  font-style: normal;
}
.profile-skin--font-press-start {
  font-family: "Press Start 2P", system-ui;
  font-weight: 400;
  font-style: normal;
}
.profile-skin--font-marck-script {
  font-family: "Marck Script", cursive;
  font-weight: 400;
  font-style: normal;
}
.profile-skin--font-rubik-pixels {
  font-family: "Rubik Pixels", system-ui;
  font-weight: 400;
  font-style: normal;
}
.profile-skin--font-pacifico {
  font-family: "Pacifico", system-ui;
  font-weight: 400;
  font-style: normal;
}
.profile-skin--font-caveat {
  font-family: "Caveat", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.profile-skin--font-amatic-sc {
  font-family: "Amatic SC", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.profile-skin--video-28 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(39 39 43), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(38 35 49), rgb(89 86 118) 600px), radial-gradient(at right bottom, rgb(59 56 85), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(95 91 129), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #9485aa70 !important;
  --secondary-purple-color: #aca6b3 !important;
  --main-purple-color: #aca6b3 !important;
}
.profile-skin--video-28 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--video-28 .header {
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
}
.profile-skin--video-28 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--video-28 .profile__activity-bar, .profile-skin--video-28 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--video-28 .profile__cut {
  display: none;
}
.profile-skin--video-28.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--video-28.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--video-28.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-28.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--video-28.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-28 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0.1) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--video-29 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(39 39 43), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(38 35 49), rgb(89 86 118) 600px), radial-gradient(at right bottom, rgb(59 56 85), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(95 91 129), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #9485aa70 !important;
  --secondary-purple-color: #aca6b3 !important;
  --main-purple-color: #aca6b3 !important;
}
.profile-skin--video-29 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--video-29 .header {
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
}
.profile-skin--video-29 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--video-29 .profile__activity-bar, .profile-skin--video-29 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--video-29 .profile__cut {
  display: none;
}
.profile-skin--video-29.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--video-29.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--video-29.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-29.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--video-29.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-29 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0.1) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--video-30 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(39 39 43), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(38 35 49), rgb(89 86 118) 600px), radial-gradient(at right bottom, rgb(59 56 85), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(95 91 129), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #9485aa70 !important;
  --secondary-purple-color: #aca6b3 !important;
  --main-purple-color: #aca6b3 !important;
}
.profile-skin--video-30 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--video-30 .header {
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
}
.profile-skin--video-30 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--video-30 .profile__activity-bar, .profile-skin--video-30 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--video-30 .profile__cut {
  display: none;
}
.profile-skin--video-30.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--video-30.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--video-30.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-30.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--video-30.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-30 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0.1) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--video-90 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(39 39 43), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(38 35 49), rgb(89 86 118) 600px), radial-gradient(at right bottom, rgb(59 56 85), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(95 91 129), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #9485aa70 !important;
  --secondary-purple-color: #aca6b3 !important;
  --main-purple-color: #aca6b3 !important;
}
.profile-skin--video-90 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--video-90 .header {
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
}
.profile-skin--video-90 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--video-90 .profile__activity-bar, .profile-skin--video-90 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--video-90 .profile__cut {
  display: none;
}
.profile-skin--video-90.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--video-90.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--video-90.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-90.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--video-90.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-90 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0.1) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--video-91 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(39 39 43), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(38 35 49), rgb(89 86 118) 600px), radial-gradient(at right bottom, rgb(59 56 85), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(95 91 129), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #9485aa70 !important;
  --secondary-purple-color: #aca6b3 !important;
  --main-purple-color: #aca6b3 !important;
}
.profile-skin--video-91 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--video-91 .header {
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
}
.profile-skin--video-91 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--video-91 .profile__activity-bar, .profile-skin--video-91 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--video-91 .profile__cut {
  display: none;
}
.profile-skin--video-91.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--video-91.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--video-91.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-91.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--video-91.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-91 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0.1) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--video-92 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(39 39 43), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(38 35 49), rgb(89 86 118) 600px), radial-gradient(at right bottom, rgb(59 56 85), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(95 91 129), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #9485aa70 !important;
  --secondary-purple-color: #aca6b3 !important;
  --main-purple-color: #aca6b3 !important;
}
.profile-skin--video-92 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--video-92 .header {
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
}
.profile-skin--video-92 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--video-92 .profile__activity-bar, .profile-skin--video-92 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--video-92 .profile__cut {
  display: none;
}
.profile-skin--video-92.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--video-92.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--video-92.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-92.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--video-92.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-92 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0.1) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--video-93 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(39 39 43), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(38 35 49), rgb(89 86 118) 600px), radial-gradient(at right bottom, rgb(59 56 85), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(95 91 129), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #9485aa70 !important;
  --secondary-purple-color: #aca6b3 !important;
  --main-purple-color: #aca6b3 !important;
}
.profile-skin--video-93 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--video-93 .header {
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
}
.profile-skin--video-93 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--video-93 .profile__activity-bar, .profile-skin--video-93 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--video-93 .profile__cut {
  display: none;
}
.profile-skin--video-93.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--video-93.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--video-93.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-93.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--video-93.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-93 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0.1) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--video-94 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(39 39 43), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(38 35 49), rgb(89 86 118) 600px), radial-gradient(at right bottom, rgb(59 56 85), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(95 91 129), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #9485aa70 !important;
  --secondary-purple-color: #aca6b3 !important;
  --main-purple-color: #aca6b3 !important;
}
.profile-skin--video-94 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--video-94 .header {
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
}
.profile-skin--video-94 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--video-94 .profile__activity-bar, .profile-skin--video-94 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--video-94 .profile__cut {
  display: none;
}
.profile-skin--video-94.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--video-94.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--video-94.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-94.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--video-94.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-94 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0.1) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--video-95 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(39 39 43), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(38 35 49), rgb(89 86 118) 600px), radial-gradient(at right bottom, rgb(59 56 85), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(95 91 129), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #9485aa70 !important;
  --secondary-purple-color: #aca6b3 !important;
  --main-purple-color: #aca6b3 !important;
}
.profile-skin--video-95 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--video-95 .header {
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
}
.profile-skin--video-95 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--video-95 .profile__activity-bar, .profile-skin--video-95 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--video-95 .profile__cut {
  display: none;
}
.profile-skin--video-95.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--video-95.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--video-95.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-95.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--video-95.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-95 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0.1) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--video-96 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(39 39 43), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(38 35 49), rgb(89 86 118) 600px), radial-gradient(at right bottom, rgb(59 56 85), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(95 91 129), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #9485aa70 !important;
  --secondary-purple-color: #aca6b3 !important;
  --main-purple-color: #aca6b3 !important;
}
.profile-skin--video-96 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--video-96 .header {
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
}
.profile-skin--video-96 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--video-96 .profile__activity-bar, .profile-skin--video-96 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--video-96 .profile__cut {
  display: none;
}
.profile-skin--video-96.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--video-96.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--video-96.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-96.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--video-96.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-96 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0.1) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--video-97 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(39 39 43), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(38 35 49), rgb(89 86 118) 600px), radial-gradient(at right bottom, rgb(59 56 85), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(95 91 129), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #9485aa70 !important;
  --secondary-purple-color: #aca6b3 !important;
  --main-purple-color: #aca6b3 !important;
}
.profile-skin--video-97 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--video-97 .header {
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
}
.profile-skin--video-97 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--video-97 .profile__activity-bar, .profile-skin--video-97 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--video-97 .profile__cut {
  display: none;
}
.profile-skin--video-97.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--video-97.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--video-97.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-97.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--video-97.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-97 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0.1) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--video-98 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(39 39 43), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(38 35 49), rgb(89 86 118) 600px), radial-gradient(at right bottom, rgb(59 56 85), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(95 91 129), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #9485aa70 !important;
  --secondary-purple-color: #aca6b3 !important;
  --main-purple-color: #aca6b3 !important;
}
.profile-skin--video-98 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--video-98 .header {
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
}
.profile-skin--video-98 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--video-98 .profile__activity-bar, .profile-skin--video-98 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--video-98 .profile__cut {
  display: none;
}
.profile-skin--video-98.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--video-98.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--video-98.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-98.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--video-98.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-98 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0.1) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--video-99 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(39 39 43), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(38 35 49), rgb(89 86 118) 600px), radial-gradient(at right bottom, rgb(59 56 85), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(95 91 129), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #9485aa70 !important;
  --secondary-purple-color: #aca6b3 !important;
  --main-purple-color: #aca6b3 !important;
}
.profile-skin--video-99 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--video-99 .header {
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
}
.profile-skin--video-99 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--video-99 .profile__activity-bar, .profile-skin--video-99 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--video-99 .profile__cut {
  display: none;
}
.profile-skin--video-99.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--video-99.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--video-99.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-99.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--video-99.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-99 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0.1) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--video-100 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(39 39 43), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(38 35 49), rgb(89 86 118) 600px), radial-gradient(at right bottom, rgb(59 56 85), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(95 91 129), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #9485aa70 !important;
  --secondary-purple-color: #aca6b3 !important;
  --main-purple-color: #aca6b3 !important;
}
.profile-skin--video-100 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--video-100 .header {
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
}
.profile-skin--video-100 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--video-100 .profile__activity-bar, .profile-skin--video-100 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--video-100 .profile__cut {
  display: none;
}
.profile-skin--video-100.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--video-100.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--video-100.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-100.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--video-100.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-100 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0.1) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--video-101 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(39 39 43), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(38 35 49), rgb(89 86 118) 600px), radial-gradient(at right bottom, rgb(59 56 85), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(95 91 129), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #9485aa70 !important;
  --secondary-purple-color: #aca6b3 !important;
  --main-purple-color: #aca6b3 !important;
}
.profile-skin--video-101 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--video-101 .header {
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
}
.profile-skin--video-101 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--video-101 .profile__activity-bar, .profile-skin--video-101 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--video-101 .profile__cut {
  display: none;
}
.profile-skin--video-101.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--video-101.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--video-101.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-101.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--video-101.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-101 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0.1) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--video-102 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(39 39 43), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(38 35 49), rgb(89 86 118) 600px), radial-gradient(at right bottom, rgb(59 56 85), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(95 91 129), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #9485aa70 !important;
  --secondary-purple-color: #aca6b3 !important;
  --main-purple-color: #aca6b3 !important;
}
.profile-skin--video-102 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--video-102 .header {
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
}
.profile-skin--video-102 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--video-102 .profile__activity-bar, .profile-skin--video-102 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--video-102 .profile__cut {
  display: none;
}
.profile-skin--video-102.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--video-102.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--video-102.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-102.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--video-102.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-102 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0.1) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--glass-background.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
  backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--glass-background.body-pc .main .profile__header {
  margin-top: 15px;
}
.profile-skin--glass-background.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.profile-skin .tippy-box[data-theme=dropdown],
.profile-skin .tippy-box[data-theme=sticker-list],
.profile-skin .header__mobile-menu {
  background: var(--profile-skin-background);
}
.profile-skin .modal__content {
  -webkit-backdrop-filter: blur(20px) !important;
          backdrop-filter: blur(20px) !important;
}
.profile-skin .comments .comments__actions-btn--spoiler {
  color: white;
}
.profile-skin .comments__rating-number--grey {
  color: #cfcfcf;
}
.profile-skin textarea::-moz-placeholder {
  color: #b4b4b4;
}
.profile-skin textarea::placeholder {
  color: #b4b4b4;
}
.profile-skin.body-mobile {
  background: var(--profile-skin-background);
}
.profile-skin.body-mobile .header {
  background: unset;
}
.profile-skin.body-mobile .mobile-profile__wrapper {
  background: var(--profile-skin-background);
}
.profile-skin.body-mobile .main {
  padding-bottom: 0;
}
.profile-skin.body-mobile .mobile-profile__wrapper {
  margin-bottom: 0;
}
.profile-skin.body-mobile .footer {
  display: none;
}
.profile-skin.body-pc {
  background: var(--profile-skin-background);
}
.profile-skin.body-pc .header {
  background: rgba(0, 0, 0, 0.1) !important;
}
.profile-skin.body-pc .main {
  background: unset;
}

.profile-skin .rating-info {
  background: var(--profile-skin-background);
}

.profile-skin-video {
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.profile-skin-video video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@keyframes glitch-effect {
  0% {
    left: -2px;
    top: -2px;
  }
  25% {
    left: 2px;
    top: 0px;
  }
  50% {
    left: -1px;
    top: 2px;
  }
  75% {
    left: 1px;
    top: -1px;
  }
  100% {
    left: 0px;
    top: -2px;
  }
}
@keyframes fillAnimationBar {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes cyber-glitch-0 {
  0% {
    filter: blur(0) brightness(100%) contrast(100%);
  }
  2% {
    filter: blur(0.05rem) brightness(120%) contrast(120%);
  }
  4% {
    filter: blur(0.1rem) brightness(150%) contrast(150%);
  }
  6% {
    filter: blur(0.2rem) brightness(170%) contrast(170%);
  }
  8% {
    filter: blur(0) brightness(100%) contrast(100%);
  }
  10% {
    filter: blur(0) brightness(100%) contrast(100%);
  }
  60% {
    filter: blur(0) brightness(100%) contrast(100%);
  }
  62% {
    filter: blur(0.05rem) brightness(60%) contrast(100%);
  }
  64% {
    filter: blur(0.1rem) brightness(40%) contrast(100%);
  }
  66% {
    filter: blur(0) brightness(100%) contrast(100%);
  }
  68% {
    filter: blur(0.05rem) brightness(60%) contrast(100%);
  }
  70% {
    filter: blur(0.1rem) brightness(40%) contrast(100%);
  }
  72% {
    filter: blur(0) brightness(100%) contrast(100%);
  }
  100% {
    filter: blur(0) brightness(100%) contrast(100%);
  }
}
@keyframes cyber-glitch-1 {
  0% {
    transform: translate(0, 0) skew(0deg);
    filter: invert(0);
  }
  1% {
    transform: translate(0, 0) skew(-3deg);
    filter: invert(0);
  }
  2% {
    transform: translate(0, 0) skew(3deg);
    filter: invert(0);
  }
  3% {
    transform: translate(0, 0) skew(0deg);
    filter: invert(0);
  }
  60% {
    transform: translate(0, 0) skew(0deg);
    filter: invert(0);
  }
  61% {
    transform: translate(0, 0) skew(-3deg);
    filter: invert(0.2);
  }
  62% {
    transform: translate(0, 0) skew(0deg);
    filter: invert(0.2);
  }
  63% {
    transform: translate(0, 0) skew(3deg);
    filter: invert(0.8);
  }
  64% {
    transform: translate(0, 0) skew(0deg);
    filter: invert(0.2);
  }
  65% {
    transform: translate(0, 0) skew(0deg);
    filter: invert(0);
  }
}
@keyframes cyber-glitch-3 {
  0% {
    visibility: visible;
  }
  49% {
    visibility: visible;
  }
  50% {
    visibility: hidden;
  }
  100% {
    visibility: hidden;
  }
}
@keyframes cyber-glitch-4 {
  0% {
    visibility: visible;
  }
  1% {
    visibility: hidden;
  }
  2% {
    visibility: hidden;
  }
  3% {
    visibility: visible;
  }
  20% {
    visibility: visible;
  }
  21% {
    visibility: hidden;
  }
  24% {
    visibility: hidden;
  }
  25% {
    visibility: visible;
  }
  40% {
    visibility: visible;
  }
  41% {
    visibility: hidden;
  }
  42% {
    visibility: hidden;
  }
  43% {
    visibility: visible;
  }
  44% {
    visibility: visible;
  }
  45% {
    visibility: hidden;
  }
  46% {
    visibility: hidden;
  }
  47% {
    visibility: visible;
  }
  60% {
    visibility: visible;
  }
  61% {
    visibility: hidden;
  }
  64% {
    visibility: hidden;
  }
  65% {
    visibility: visible;
  }
  70% {
    visibility: visible;
  }
  71% {
    visibility: hidden;
  }
  72% {
    visibility: hidden;
  }
  73% {
    visibility: visible;
  }
  100% {
    visibility: visible;
  }
}
@keyframes h1glitched {
  0% {
    transform: skew(-20deg);
    left: -4px;
  }
  10% {
    transform: skew(-20deg);
    left: -4px;
  }
  11% {
    transform: skew(0deg);
    left: 2px;
  }
  50% {
    transform: skew(0deg);
  }
  51% {
    transform: skew(10deg);
  }
  59% {
    transform: skew(10deg);
  }
  60% {
    transform: skew(0deg);
  }
  100% {
    transform: skew(0deg);
  }
}
@keyframes hxafter {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  51% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes u-nikcname-animbg {
  100% {
    background-position: 200% center;
  }
}
.chat-arena {
  height: 100%;
  width: 100%;
}
.chat-arena__color {
  background: linear-gradient(90deg, #de554a, #d94494 30%, #7834e3 75%, #2852e8) !important;
  width: 25px !important;
  height: 25px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px !important;
  border-radius: 50% !important;
  color: white !important;
  margin-left: 10px !important;
}
.chat-arena__controls {
  display: flex;
  padding: 10px 15px;
  align-items: center;
  border-radius: var(--main-border-radius);
  background: var(--dark-grey-bg);
  z-index: 2;
  position: absolute;
  right: 1%;
  transition: width 0.3s;
}
.chat-arena__controls--opened {
  width: 98%;
}
.chat-arena__controls--opened button {
  display: block;
}
.chat-arena__controls--closed {
  width: unset;
}
.chat-arena__controls--closed button {
  display: none;
}
.chat-arena__controls-toggle {
  margin-left: auto;
  cursor: pointer;
}
.chat-arena__controls button {
  margin-right: 10px;
}
@media screen and (max-width: 330px) {
  .chat-arena__controls button {
    font-size: 12px;
  }
}
.chat-arena__controls button:last-of-type {
  margin-right: 0;
}
.chat-arena__text-msg {
  overflow: hidden;
  display: inline-flex;
}
.chat-arena__wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.chat-arena__messages {
  display: flex;
  flex: 1 auto;
  flex-basis: 100%;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
  padding: 0 15px;
}
.chat-arena__reply {
  margin-bottom: 10px;
  font-weight: 500;
  align-items: center;
}
.chat-arena__reply i:first-of-type {
  font-size: 20px;
  color: var(--icons-color);
  margin-right: 5px;
}
.chat-arena__reply-cansel-btn {
  margin-left: auto;
  font-size: 20px;
  color: var(--icons-color);
}
.chat-arena__highlight {
  display: block;
  margin-bottom: 10px;
  background: var(--purple-btn-bg);
  color: white;
  padding: 15px 20px;
  border-radius: 6px;
  position: relative;
  text-align: center;
}
.chat-arena__highlight-title {
  font-weight: 600;
  margin-bottom: 10px;
  font-size: 18px;
}
.chat-arena__highlight-title span {
  background: white;
  color: var(--purple-btn-bg);
  padding: 3px 5px;
  border-radius: 3px;
  margin-left: 5px;
  display: block;
  margin-top: 10px;
}
@media screen and (max-width: 360px) {
  .chat-arena__highlight-text {
    font-size: 14px;
  }
}
.chat-arena__highlight-cansel-btn {
  position: absolute;
  right: 10px;
}
.chat-arena__message {
  margin: 10px 0;
  position: relative;
}
.chat-arena__message--with-reply .chat-arena__reply-to span {
  background: #772ce8;
  color: white;
  padding: 1px 5px;
  border-radius: 3px;
}
.chat-arena__message--active {
  background-color: #ffe8e8;
  transition: background-color 1s ease-out;
}
.chat-arena__message button {
  display: none;
  padding: 0px 10px;
}
.chat-arena__message:hover button {
  display: inline-block;
}
.chat-arena__user {
  display: inline-block;
  position: relative;
}
.chat-arena__user .modal-chat__place {
  width: 17px;
  height: 17px;
  margin-right: 5px;
  font-size: 13px;
  border: none;
  box-shadow: none;
}
.chat-arena__user--color-0 {
  color: rgb(210, 105, 30);
}
.chat-arena__user--color-1 {
  color: rgb(255, 69, 0);
}
.chat-arena__user--color-2 {
  color: rgb(255, 0, 0);
}
.chat-arena__user--color-3 {
  color: rgb(0, 255, 127);
}
.chat-arena__user--color-4 {
  color: rgb(138, 43, 226);
}
.chat-arena__user--color-5 {
  color: rgb(255, 105, 180);
}
.chat-arena__user--color-6 {
  color: rgb(30, 144, 255);
}
.chat-arena__user--color-7 {
  color: rgb(95, 158, 160);
}
.chat-arena__user--color-8 {
  color: rgb(218, 165, 32);
}
.chat-arena__user--color-9 {
  color: rgb(154, 205, 50);
}
.chat-arena__user-avatar {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  margin-right: 5px;
  display: inline-flex;
  vertical-align: sub;
  position: relative;
}
.chat-arena__user-name {
  font-weight: 500;
  margin-right: 5px;
  display: inline-block;
}
.chat-arena__user-name span {
  background: var(--purple-btn-bg);
  color: white;
  font-size: 13px;
  width: 17px;
  height: 17px;
  display: inline-flex;
  margin: 0 5px;
  border-radius: 50%;
  font-weight: 600;
  justify-content: center;
  align-items: center;
}
.chat-arena__user-name strong {
  margin-left: 5px;
}
.chat-arena__footer {
  margin-top: auto;
  width: 100%;
  position: relative;
  padding: 10px 15px;
}
.chat-arena__reply {
  display: none;
}
.chat-arena__highlight {
  display: none;
}
.chat-arena__get-coins-btn {
  position: relative;
  display: flex;
  width: 50px;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
}
.chat-arena__get-coins-btn .diamond {
  margin-right: 0;
}
.chat-arena__coin-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: rgba(119, 44, 232, 0.28);
  border-radius: 6px;
}
.chat-arena__reply-to {
  font-size: 14px;
  margin-bottom: 5px;
  color: var(--secondary-text-color);
  margin-top: -5px;
  cursor: pointer;
  overflow: hidden;
}
.chat-arena__form {
  display: flex;
  width: 100%;
  position: relative;
}
.chat-arena__highlight-btn {
  position: absolute;
  right: 55px;
  top: 10px;
  font-size: 20px;
  color: var(--icons-color);
}
.chat-arena__send-msg-btn {
  background: var(--purple-btn-bg);
  color: white;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  margin-left: 5px;
  padding: 5px 10px;
}
.chat-arena__textarea {
  background: var(--seconday-bg-color);
  border-radius: 6px;
  resize: none;
  overflow-x: hidden;
  padding: 0 10px;
  line-height: 20px;
  height: 25px;
  padding-top: 5px;
  padding-right: 25px;
  outline: none;
  border: 5px solid transparent;
  box-sizing: content-box;
  width: 100%;
}
.chat-arena__textarea::-moz-placeholder {
  font-size: 15px;
}
.chat-arena__textarea::placeholder {
  font-size: 15px;
}
.chat-arena__textarea:active {
  border: 5px solid var(--secondary-purple-color);
}
.chat-arena__textarea:focus {
  border: 5px solid var(--secondary-purple-color);
}
.chat-arena__textarea:focus-visible {
  border: 5px solid var(--secondary-purple-color);
}

.chat-arena__message[data-highlighted=true] .chat-arena__text-msg {
  background: var(--purple-btn-bg);
  padding: 1px 9px 3px 9px;
  color: white;
  border-radius: 3px;
}

html.h-chat-arena {
  height: 100%;
  overflow: hidden;
  position: fixed;
  min-height: 100vh;
}
html.h-chat-arena #back-to-top {
  display: none !important;
}
html.h-chat-arena .footer {
  display: none;
}
html.h-chat-arena body {
  min-height: auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  display: flex;
  flex-flow: column;
}
html.h-chat-arena body > .wrapper {
  min-height: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
html.h-chat-arena body > .wrapper > .main {
  height: calc(100% - 70px);
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  padding-bottom: 0;
}
html.h-chat-arena body > .wrapper > .main > .container {
  flex-grow: 1;
  height: 100%;
  width: 100%;
  display: flex;
}
@media screen and (max-width: 990px) {
  html.h-chat-arena body > .wrapper > .main > .container {
    padding: 0;
  }
}
html.h-chat-arena .chat-arena-frame {
  display: flex;
  width: 100%;
  flex-direction: column;
  flex-grow: 1;
}
html.h-chat-arena .chat-arena-box {
  height: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
html.h-chat-arena .chat-arena-inner {
  height: 100%;
  flex: 1 1 auto;
}

.modal-chat__item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding: 4px 5px;
  border-radius: 8px;
}
.modal-chat__item:last-of-type {
  margin-bottom: 0;
}
.modal-chat__place {
  color: white;
  font-weight: bold;
  border-radius: 50%;
  position: relative;
  width: 25px;
  height: 25px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 2px solid var(--light-bg);
  box-shadow: 0 0 0 2px var(--border-color);
  margin-right: 10px;
}
.modal-chat__place--level-1 {
  background-color: #f9c74f;
}
.modal-chat__place--level-2 {
  background-color: #f9904f;
}
.modal-chat__place--level-3 {
  background-color: #b95d5d;
}
.modal-chat__avatar {
  width: 25px;
  height: 25px;
  margin-right: 10px;
  flex-shrink: 0;
}
.modal-chat__avatar img {
  border-radius: 50%;
}
.modal-chat__name {
  font-weight: 600;
  color: var(--secondary-text-color);
  max-width: 110px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.modal-chat__score {
  font-weight: 600;
  color: var(--secondary-text-color);
  margin-left: auto;
}

.modal-chat__place--level-1 {
  background-color: #b28312;
}

.modal-chat__place--level-2 {
  background-color: #ba8b19;
}

.modal-chat__place--level-3 {
  background-color: #c29220;
}

.modal-chat__place--level-4 {
  background-color: #ca9a26;
}

.modal-chat__place--level-5 {
  background-color: #d2a12d;
}

.modal-chat__place--level-6 {
  background-color: #d9a934;
}

.modal-chat__place--level-7 {
  background-color: #e1b03b;
}

.modal-chat__place--level-8 {
  background-color: #e9b841;
}

.modal-chat__place--level-9 {
  background-color: #f1bf48;
}

.modal-chat__place--level-10 {
  background-color: #f9c74f;
}

.modal-chat__place--level-11 {
  background-color: green;
}

.modal-chat__place--level-12 {
  background-color: #048804;
}

.modal-chat__place--level-13 {
  background-color: #078f07;
}

.modal-chat__place--level-14 {
  background-color: #0b970b;
}

.modal-chat__place--level-15 {
  background-color: #0e9e0e;
}

.modal-chat__place--level-16 {
  background-color: #12a612;
}

.modal-chat__place--level-17 {
  background-color: #15ad15;
}

.modal-chat__place--level-18 {
  background-color: #19b519;
}

.modal-chat__place--level-19 {
  background-color: #1cbc1c;
}

.modal-chat__place--level-20 {
  background-color: #20c420;
}

.modal-chat__place--level-21 {
  background-color: #02315e;
}

.modal-chat__place--level-22 {
  background-color: #073867;
}

.modal-chat__place--level-23 {
  background-color: #0c3f70;
}

.modal-chat__place--level-24 {
  background-color: #114679;
}

.modal-chat__place--level-25 {
  background-color: #164d82;
}

.modal-chat__place--level-26 {
  background-color: #1b548b;
}

.modal-chat__place--level-27 {
  background-color: #205b94;
}

.modal-chat__place--level-28 {
  background-color: #25629d;
}

.modal-chat__place--level-29 {
  background-color: #2a69a6;
}

.modal-chat__place--level-30 {
  background-color: #2f70af;
}

.modal-chat__place--level-31 {
  background-color: #e0ab9a;
}

.modal-chat__place--level-32 {
  background-color: #e2a798;
}

.modal-chat__place--level-33 {
  background-color: #e3a495;
}

.modal-chat__place--level-34 {
  background-color: #e5a093;
}

.modal-chat__place--level-35 {
  background-color: #e79c90;
}

.modal-chat__place--level-36 {
  background-color: #e8998e;
}

.modal-chat__place--level-37 {
  background-color: #ea958b;
}

.modal-chat__place--level-38 {
  background-color: #ec9189;
}

.modal-chat__place--level-39 {
  background-color: #ed8e86;
}

.modal-chat__place--level-40 {
  background-color: #ef8a84;
}

.modal-chat__place--level-41 {
  background-color: #3d348f;
}

.modal-chat__place--level-42 {
  background-color: #423391;
}

.modal-chat__place--level-43 {
  background-color: #483393;
}

.modal-chat__place--level-44 {
  background-color: #4d3295;
}

.modal-chat__place--level-45 {
  background-color: #533197;
}

.modal-chat__place--level-46 {
  background-color: #583199;
}

.modal-chat__place--level-47 {
  background-color: #5e309b;
}

.modal-chat__place--level-48 {
  background-color: #632f9d;
}

.modal-chat__place--level-49 {
  background-color: #692f9f;
}

.modal-chat__place--level-50 {
  background-color: #6e2ea1;
}

.modal-chat__place--level-51 {
  background-color: #a23254;
}

.modal-chat__place--level-52 {
  background-color: #a22d4b;
}

.modal-chat__place--level-53 {
  background-color: #a22843;
}

.modal-chat__place--level-54 {
  background-color: #a2243a;
}

.modal-chat__place--level-55 {
  background-color: #a21f32;
}

.modal-chat__place--level-56 {
  background-color: #a11a29;
}

.modal-chat__place--level-57 {
  background-color: #a11521;
}

.modal-chat__place--level-58 {
  background-color: #a11118;
}

.modal-chat__place--level-59 {
  background-color: #a10c10;
}

.modal-chat__place--level-60 {
  background-color: #a10707;
}

.gift__more {
  margin-top: 12px;
  position: absolute;
  bottom: -35px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 50;
}
.gift__list {
  display: flex;
  padding-top: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 -10px;
  max-height: 300px;
}
.gift__item {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 85px;
  flex: 1 0 auto;
  max-width: 25%;
  margin: 0 10px 20px;
  border-radius: 8px;
  transition: transform 0.3s;
  cursor: pointer;
}
.gift__price {
  display: flex;
  align-items: center;
  font-weight: 600;
}
.gift__price .diamond {
  margin-right: 5px;
}
.gift__image {
  margin-bottom: 10px;
}
.gift__warning {
  margin-top: 10px;
  font-size: 13px;
  color: var(--secondary-text-color);
}
.gift__warning span {
  font-weight: 600;
}
.gift__form {
  display: none;
  justify-content: center;
}
.gift__form-image {
  width: 100%;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
}
.gift__form-image img {
  width: 150px;
  height: 150px;
}
.gift__form textarea {
  resize: unset;
  width: 100%;
}
.gift__form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gift__form-footer .switch {
  margin-bottom: 0;
  margin-right: 45px;
}

.gift-placeholder {
  display: flex;
  flex-direction: column;
  width: 85px;
  flex: 1 0 auto;
  max-width: 25%;
  margin: 0 10px 20px;
  position: relative;
}

.gift .gift__back {
  display: none;
}

.gift-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.gift-list .profile__gift-item {
  margin-bottom: 15px;
}

.favourite-list {
  display: flex;
}
.favourite-list__item {
  width: 118px;
  margin-right: 10px;
  position: relative;
}
.favourite-list__image {
  display: block;
  width: 100%;
  padding-top: 140%;
  background-size: cover !important;
  background-position: 50% !important;
  margin-bottom: 10px;
  border-radius: var(--main-border-radius);
  background-color: var(--light-bg);
}
.favourite-list__effect {
  position: absolute;
  bottom: 0;
}

.review-type {
  display: flex;
  margin-bottom: 25px;
  margin-top: 25px;
}
.review-type__item {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: var(--main-border-radius);
  transition: all 0.3s;
  cursor: pointer;
  min-width: 0;
}
@media screen and (max-width: 900px) {
  .review-type__item:not(.review-type__item--active) span {
    display: none;
  }
}
.review-type__item--active {
  background: var(--medium-bg);
  flex-grow: 1;
}
.review-type__item--positive i {
  color: var(--green-color);
}
.review-type__item--negative i {
  color: var(--red-color);
}
.review-type__item--neutral i {
  color: var(--icons-color);
}
.review-type__item i {
  margin-right: 5px;
  font-size: 18px;
}
.review-type__item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-item {
  margin-bottom: 30px;
}
.review-item__header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.review-item__status {
  width: 4px;
  height: 24px;
  border-radius: 3px;
  margin-right: 10px;
}
.review-item__status--positive {
  background: var(--green-color);
}
.review-item__status--negative {
  background: var(--red-color);
}
.review-item__status--neutral {
  background: var(--icons-color);
}
.review-item__author {
  display: flex;
  align-items: center;
  margin-right: 10px;
}
.review-item__date {
  color: var(--secondary-text-color);
  font-size: 13px;
}
.review-item__avatar {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}
.review-item__avatar img {
  border-radius: var(--main-border-radius);
}
.review-item__name {
  font-weight: 500;
  font-size: 17px;
}
.review-item__title {
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 20px;
}
.review-item__text {
  line-height: 24px;
  font-size: 15px;
  word-wrap: break-word;
  word-break: break-word;
  margin-bottom: 5px;
}
.review-item__footer {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  margin-top: 10px;
}
.review-item__like {
  background: none !important;
}
.review-item__rating {
  font-size: 17px;
}
.review-item__rating span {
  font-weight: 500;
}
.review-item__rating--green span {
  color: var(--green-color);
}
.review-item__rating--red span {
  color: var(--red-color);
}
.review-item__rating--grey span {
  color: #333;
}
.review-item__stats {
  margin-left: auto;
  display: flex;
}
.review-item__stats-item {
  display: flex;
  margin-right: 10px;
  align-items: center;
  color: var(--secondary-text-color);
}
.review-item__stats-item:last-of-type {
  margin-right: 0;
}
.review-item__stats-item i {
  margin-right: 5px;
}
.review-item__stats-item span {
  color: var(--secondary-text-color);
  font-size: 13px;
}

.review-create {
  display: flex;
  justify-content: center;
}
.review-create__form input {
  width: 100%;
}
.review-create .form {
  width: 500px;
}
.review-create .form__field::-moz-placeholder {
  color: var(--secondary-text-color);
}
.review-create .form__field::placeholder {
  color: var(--secondary-text-color);
}
.review-create .form__title {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}
.review-create__rules {
  font-size: 14px;
  margin-bottom: 15px;
}
.review-create__rules-item {
  margin-bottom: 5px;
}
.review-create textarea {
  resize: none;
  height: 150px;
}
.review-create__types {
  display: flex;
  margin-bottom: 20px;
}
.review-create__type {
  width: 33.3%;
  display: flex;
  justify-content: center;
  padding: 5px 10px;
  border-radius: var(--main-border-radius);
  cursor: pointer;
}
.review-create__type--active:nth-of-type(1) {
  color: var(--green-color);
  background: rgba(0, 153, 51, 0.0509803922);
}
.review-create__type--active:nth-of-type(2) {
  color: var(--red-color);
  background: rgba(252, 54, 59, 0.0588235294);
}
.review-create__type--active:nth-of-type(3) {
  color: var(--icons-color);
  background: var(--medium-bg);
}
.review-create__rating {
  padding: 0 0 22px 0;
  display: flex;
  justify-content: space-between;
}
.review-create__star {
  background-image: url(/assets/star.svg);
  width: 24px;
  height: 22px;
  cursor: pointer;
}
.review-create__star--active {
  background-image: url(/assets/star-filled.svg);
}
.review-create__star:not(.review-create__star--active) {
  filter: var(--invert);
}
.review-create__success {
  display: none;
  text-align: center;
  background: var(--medium-bg);
  width: 500px;
  line-height: 22px;
  font-size: 15px;
  word-wrap: break-word;
  word-break: break-word;
  padding: 20px;
}
.review-create__success div {
  margin-bottom: 15px;
}

.personalized {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 30px;
}
.personalized__field {
  display: block;
}
.personalized__inner .tabs__nav {
  justify-content: center;
}
.personalized__inner .tabs__content {
  max-width: 600px;
}
.personalized__wrapper {
  display: flex;
  flex-direction: column;
}
.personalized__avatar-container {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 25px auto;
}
.personalized__avatar-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.personalized textarea {
  overflow: auto;
  background: var(--medium-bg);
  border: none;
  width: 100%;
  height: 150px;
  padding: 15px;
  margin-bottom: 10px;
  margin-top: 25px;
  border-radius: var(--main-border-radius);
  outline: none;
  transition: all 0.2s;
  resize: none;
}
.personalized textarea:focus, .personalized textarea:active {
  background: var(--light-bg);
}
.personalized__title {
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 10px;
}
.personalized__desc {
  margin-bottom: 25px;
}
.personalized__item {
  margin-bottom: 10px;
  font-size: 15px;
}
.personalized__item span {
  color: var(--secondary-text-color);
  font-size: 16px;
  margin-right: 5px;
  font-weight: 500;
}

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

.cropper-container {
  max-height: 100%;
}

.personalized__cover-image {
  max-width: 100%;
  max-height: 100vh;
  display: none;
}

.personalized__cover-container {
  height: 138px;
}

.personalized-shop {
  margin-top: 22px;
  margin-bottom: 34px;
}

.personalized-shop__inner {
  width: 100%;
  max-width: 760px;
}

.personalized-shop__hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
  padding: 20px;
  border-radius: 24px;
  background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.1), transparent 34%), linear-gradient(135deg, var(--light-bg), var(--medium-bg));
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.personalized-shop__eyebrow {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--secondary-text-color);
  font-size: 12px;
  font-weight: 600;
}

.personalized-shop__title {
  font-size: 24px;
  line-height: 1.15;
  font-weight: 800;
  color: var(--main-text-color);
}

.personalized-shop__text {
  max-width: 560px;
  margin-top: 8px;
  color: var(--secondary-text-color);
  font-size: 14px;
  line-height: 1.5;
}

.personalized-shop__tabs {
  margin-top: 16px;
}

.personalized-shop__nav {
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.personalized-shop__content {
  max-width: none !important;
}

.personalized-panel {
  padding: 18px;
  border-radius: 24px;
  background: var(--medium-bg);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
}

.personalized-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 6px;
}

.personalized-panel__desc {
  margin-top: 5px;
  color: var(--secondary-text-color);
  font-size: 14px;
  line-height: 1.45;
}

.personalized-panel__price {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--main-text-color);
  font-size: 14px;
  font-weight: 800;
}

.personalized-panel__note {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--secondary-text-color);
  font-size: 13px;
  line-height: 1.45;
}

.personalized-panel__input {
  margin-top: 12px;
}

.personalized-shop .personalized__wrapper {
  display: flex;
  flex-direction: column;
}

.personalized-shop .personalized__title {
  text-align: left;
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 800;
}

.personalized-shop textarea {
  height: 105px;
  margin-top: 10px;
  margin-bottom: 0;
  padding: 13px 14px;
  border-radius: 16px;
  background: var(--light-bg);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.personalized-shop .form__upload {
  width: 100%;
  margin-top: 12px;
}

.personalized-shop .button {
  width: 100%;
  min-height: 44px;
  margin-top: 14px;
}

.personalized-requests {
  margin-bottom: 16px;
  padding: 15px;
  border-radius: 24px;
  background: var(--medium-bg);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.personalized-requests__title {
  font-size: 18px;
  font-weight: 800;
  color: var(--main-text-color);
}

.personalized-requests__subtitle {
  margin-top: 4px;
  color: var(--secondary-text-color);
  font-size: 13px;
  line-height: 1.4;
}

.personalized-requests__list {
  display: grid;
  gap: 10px;
  margin-top: 13px;
}

.personalized-requests__empty {
  padding: 14px;
  border-radius: 18px;
  background: var(--light-bg);
  color: var(--secondary-text-color);
  font-size: 14px;
  text-align: center;
}

.personalized-request {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 18px;
  background: var(--light-bg);
  border: 1px solid rgba(255, 255, 255, 0.055);
}

.personalized-request__image {
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: 15px;
  background: var(--medium-bg);
}

.personalized-request__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.personalized-request__body {
  min-width: 0;
}

.personalized-request__name {
  color: var(--main-text-color);
  font-size: 14px;
  font-weight: 800;
}

.personalized-request__meta {
  margin-top: 3px;
  color: var(--secondary-text-color);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.personalized-request__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.personalized-request__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: 0.18s;
}

.personalized-request__action--preview {
  background: var(--main-color);
  color: #fff;
}

.personalized-request__action--cancel {
  background: rgba(255, 255, 255, 0.07);
  color: var(--secondary-text-color);
}

.personalized-request__action--cancel:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--main-text-color);
}

.personalized-request--new {
  animation: personalizedRequestNew 0.45s ease;
}

@keyframes personalizedRequestNew {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.form__upload-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .personalized-shop__hero {
    padding: 16px;
    border-radius: 20px;
  }
  .personalized-shop__title {
    font-size: 21px;
  }
  .personalized-panel {
    padding: 14px;
    border-radius: 20px;
  }
  .personalized-panel__header {
    flex-direction: column;
    gap: 10px;
  }
  .personalized-request {
    grid-template-columns: 52px minmax(0, 1fr);
  }
  .personalized-request__image {
    width: 52px;
    height: 52px;
  }
  .personalized-request__actions {
    grid-column: 1/-1;
    width: 100%;
  }
  .personalized-request__action {
    flex: 1;
  }
}
.personalized-request__action--preview,
.personalized-upload-preview__btn {
  background: var(--main-color);
  color: var(--purple-btn-bg);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.personalized-request__action--preview:hover,
.personalized-upload-preview__btn:hover {
  color: var(--purple-btn-bg);
  filter: brightness(1.05);
}

.personalized-upload-preview {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--light-bg);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.personalized-upload-preview.is-visible {
  display: flex;
}

.personalized-upload-preview__text {
  color: var(--main-text-color);
  font-size: 13px;
  font-weight: 700;
}

.personalized-upload-preview__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.bp {
  position: relative;
}
.bp__main {
  margin-top: 2em;
  display: flex;
  position: relative;
  padding-bottom: 0.5em;
  direction: ltr;
}
.bp__main::before {
  content: "ОПЫТ";
  position: absolute;
  top: 2px;
}
.bp__num {
  display: flex;
  justify-content: flex-end;
  border-bottom: 0.5em solid rgba(204, 173, 255, 0.44);
  line-height: 1.5em;
  margin: 0 4px;
  margin-bottom: 0.5em;
}
.bp__rows {
  border-bottom: 0.5em solid rgba(204, 173, 255, 0.44);
  line-height: 1.5em;
  margin: 0 4px;
  margin-bottom: 0.5em;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}
.bp__rows .bp__rows1 {
  background-color: rgba(255, 255, 255, 0.06);
}
.bp__rows .bp__rows2 {
  background-color: rgba(0, 0, 0, 0.2);
}
.bp__rows .bp__rows1, .bp__rows .bp__rows2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
  font-size: 60px;
  position: relative;
  width: 96px;
  height: 108px;
}
.bp__rows .bp__rows1::after, .bp__rows .bp__rows2::after {
  content: "10";
  font-size: 10px;
  font-weight: 700;
  line-height: 12px;
  background-color: #ccc;
  color: #000;
  text-align: center;
  position: absolute;
  border-radius: 3px;
  right: 0;
  bottom: 1px;
  padding: 2px 3px;
}

.main-battle-pass {
  background: rgba(89, 64, 158, 0.8509803922) !important;
  color: white;
}
.main-battle-pass .secondary-title {
  color: white;
}

.pro-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 360px;
  margin: 0 auto;
}
.pro-form__balance {
  width: 100%;
  text-align: center;
}
.pro-form__balance-title {
  margin: 30px 0 10px;
}
.pro-form__title {
  margin-bottom: 30px !important;
}
.pro-form__title span {
  background-image: linear-gradient(72.98deg, #7c54ee 0%, #9c42d6 25%, #772ce8 100%);
  color: #fff;
  text-transform: uppercase;
  font-size: 26px;
  font-weight: 700;
  line-height: 15px;
  border-radius: 13px;
  padding: 3px 7px;
}
.pro-form__desc {
  font-size: 15px;
  text-align: center;
  margin-bottom: 30px;
}
.pro-form__header, .pro-form__body, .pro-form__select-user {
  background: var(--light-bg);
  margin-bottom: 15px;
  padding: 15px 20px;
  width: 100%;
  border-radius: 15px;
}
.pro-form__variant {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  cursor: pointer;
}
.pro-form__variant:first-of-type .pro-form__variant-name {
  margin-bottom: 0;
}
.pro-form__variant:last-of-type {
  margin-bottom: 0;
}
.pro-form__variant:last-of-type .pro-form__variant-wrapper {
  padding-bottom: 0;
}
.pro-form__variant:last-of-type .pro-form__variant-name {
  margin-bottom: 0;
}
.pro-form__variant-discount span {
  color: var(--secondary-text-color);
  font-size: 14px;
  text-decoration: line-through;
}
.pro-form__variant--active .pro-form__variant-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--purple-btn-bg);
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.pro-form__variant-button {
  width: 17px;
  height: 17px;
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  margin-right: 15px;
  padding: 1px;
  position: relative;
  flex-shrink: 0;
}
.pro-form__variant-wrapper {
  padding-bottom: 10px;
}
.pro-form__variant-price {
  margin-left: auto;
  flex-shrink: 0;
}
.pro-form__variant-name {
  margin-bottom: 5px;
}
.pro-form__select-user {
  display: none;
}
.pro-form__select-user-title {
  font-size: 16px;
  margin-bottom: 10px;
}
.pro-form__select-user-input {
  width: 100%;
}
.pro-form__select-user-item {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.pro-form__select-user-item img {
  width: 35px;
  height: 35px;
  margin-right: 8px;
  border-radius: 5px;
}
.pro-form__gift-to {
  color: var(--secondary-text-color);
  font-size: 13px;
}
.pro-form__body-item {
  display: flex;
  margin-bottom: 15px;
}
.pro-form__body-item-name {
  font-weight: 400;
  margin-bottom: 5px;
  font-size: 16px;
}
.pro-form__body-item-desc {
  font-size: 14px;
  color: var(--secondary-text-color);
}
.pro-form__body-item-icon {
  color: var(--main-purple-color);
  font-size: 23px;
  flex-shrink: 0;
  margin-right: 15px;
}

.new-feed {
  display: flex;
  justify-content: center;
}
.new-feed__list {
  width: 600px;
}
.new-feed__image {
  margin-top: 14px;
  height: 183px;
  background-size: cover;
  background-position: center;
  border-radius: 15px;
  display: block;
}
.new-feed__footer {
  display: flex;
  align-items: center;
  margin-top: 14px;
  justify-content: space-between;
  font-size: 15px;
}
.new-feed__footer .button {
  height: 34px !important;
  display: flex;
  align-items: center;
}
.new-feed__footer i {
  font-size: 20px;
  margin-right: 5px;
  margin-top: 3px;
}
.new-feed__footer-left {
  display: flex;
}
.new-feed__footer-left div, .new-feed__footer-left a {
  margin-right: 10px;
}
.new-feed__footer-left div:last-of-type, .new-feed__footer-left a:last-of-type {
  margin-right: 0;
}
.new-feed__footer-right {
  display: flex;
  align-items: center;
}
.new-feed__item {
  background: var(--light-bg);
  border-radius: 15px;
  padding: 25px;
  margin-bottom: 15px;
  transition: all 0.3s;
}
@media screen and (max-width: 340px) {
  .new-feed__item {
    padding: 20px 10px;
  }
}
.new-feed__item--reveal {
  animation: fadeIn 1s ease-in-out;
}
.new-feed__item--review .new-feed__text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
}
.new-feed__item--review .new-feed__button:last-of-type i {
  margin-right: 0;
  color: var(--green-color);
}
.new-feed__item--user .new-feed__button i {
  margin-right: 0;
}
.new-feed__item-rating {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 30px;
  font-weight: 700;
}
.new-feed__item-rating--green {
  color: var(--green-color);
}
.new-feed__title {
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: 500;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 800px) {
  .new-feed__title {
    font-size: 18px;
  }
}
.new-feed__title a {
  color: var(--purple-btn-bg);
}
.new-feed__comment-header {
  display: flex;
  margin-bottom: 10px;
}
.new-feed__text {
  font-size: 15px;
  line-height: 20px;
  margin-bottom: 5px;
  overflow: hidden;
  word-break: break-word;
}
.new-feed__reply-btn {
  font-size: 15px;
  color: var(--purple-btn-bg);
}
.new-feed__date {
  color: var(--secondary-text-color);
  font-size: 13px;
  margin-top: 3px;
}
.new-feed__avatar {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  margin-right: 10px;
  position: relative;
}
.new-feed__avatar img {
  border-radius: 3px;
}
.new-feed__profile {
  position: relative;
}
.new-feed__profile-background {
  height: 183px;
}
.new-feed__profile-rank {
  font-size: 15px;
  margin-top: 10px;
  text-align: center;
}
.new-feed__profile-background-image {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.new-feed__profile-wrapper {
  background: var(--light-bg);
  border-radius: 32px 32px 0 0;
  padding: 50px 10px 30px;
  position: relative;
  z-index: 5;
  border-bottom: 1px solid var(--border-color);
  margin-top: -30px;
  text-align: center;
}
.new-feed__profile-wrapper::before {
  content: "1";
  position: absolute;
  bottom: -13px;
  background: var(--light-bg);
  width: 40px;
  height: 25px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
.new-feed__profile-avatar {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 75px;
  height: 75px;
  box-shadow: 0 5px 12px -4px rgba(34, 60, 80, 0.3490196078);
}
.new-feed__profile-avatar img {
  border-radius: var(--main-border-radius);
}
.new-feed__profile-name {
  font-weight: 600;
  font-size: 24px;
  margin-top: 5px;
  text-align: center;
  position: relative;
}
.new-feed__profile-online {
  font-size: 13px;
  margin-top: 7px;
  color: var(--secondary-text-color);
  text-align: center;
}
.new-feed__profiles {
  display: flex;
  justify-content: space-between;
}
.new-feed__profiles .new-feed__item {
  width: 32%;
}
@media screen and (max-width: 920px) {
  .new-feed__profiles .new-feed__item {
    width: 48%;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.manga-cards {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}
.manga-cards__search {
  display: none;
}
.manga-cards__search-input {
  width: 100%;
}
.manga-cards__collections {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 20px;
}
@media screen and (max-width: 900px) {
  .manga-cards__collections {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 600px) {
  .manga-cards__collections {
    grid-template-columns: repeat(1, 1fr);
  }
}
.manga-cards__collection {
  background: var(--light-bg);
  padding: 15px 35px 15px 15px;
  border-radius: 18px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0), 0 2px 2px rgba(0, 0, 0, 0.12);
}
.manga-cards__collection-images {
  display: flex;
}
.manga-cards__collection-images img {
  border-radius: 7px;
}
.manga-cards__collection-user {
  display: flex;
  align-items: center;
}
.manga-cards__collection-image {
  display: block;
  margin-right: -18px;
  border-radius: 6px;
  max-width: 120px;
}
.manga-cards__collection-image:nth-of-type(1) {
  margin-right: -27px;
}
.manga-cards__collection-image:nth-of-type(2) {
  transform: scale(1.1);
}
.manga-cards__collection-image:nth-of-type(3) {
  transform: scale(1.2);
  z-index: 5;
}
.manga-cards__collection-image:nth-of-type(4) {
  transform: scale(1.1);
  z-index: 4;
}
.manga-cards__collection-image:nth-of-type(5) {
  margin-left: -7px;
}
.manga-cards__collection-name {
  font-size: 20px;
  font-weight: 600;
  margin-top: 10px;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-word;
  overflow-wrap: break-word;
  width: 300px;
}
.manga-cards__collection-desc {
  color: var(--secondary-text-color);
  font-size: 14px;
  margin-bottom: 20px;
}
.manga-cards__collection-like {
  margin-left: auto;
}
.manga-cards__collection-info {
  margin-top: 30px;
  display: flex;
}
.manga-cards__collection-info span {
  font-size: 14px;
  display: flex;
  align-items: center;
  margin-right: 15px;
}
.manga-cards__collection-info span:last-of-type {
  margin-right: 0;
}
.manga-cards__collection-info span i {
  font-size: 23px;
  color: var(--icons-color);
  margin-right: 3px;
}
.manga-cards__collection-count {
  display: flex;
  align-items: center;
}
.manga-cards__collection-count i {
  margin-right: 5px;
  font-size: 20px;
}
.manga-cards__collection-date {
  font-size: 14px;
}
.manga-cards__collection-creator {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}
.manga-cards__collection-creator span {
  display: flex;
  font-size: 14px;
}
.manga-cards__collection-creator span i {
  font-size: 18px;
  color: var(--icons-color);
  margin-right: 3px;
}
.manga-cards__collection-creator-avatar {
  width: 25px;
  height: 25px;
  margin-right: 10px;
}
.manga-cards__collection-creator-avatar img {
  border-radius: 50%;
}
.manga-cards__count {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  overflow-x: auto;
}
.manga-cards__count-wrapper {
  display: flex;
  overflow-x: auto;
}
.manga-cards__count-item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background: var(--light-bg);
  border-radius: 20px;
  width: 300px;
  margin-right: 20px;
  justify-content: space-between;
  flex-shrink: 0;
}
.manga-cards__count-item:last-of-type {
  margin-right: 0;
}
.manga-cards__count-item:nth-of-type(1) .manga-cards__count-rank {
  background: linear-gradient(45deg, #286595, #1c2935, #365b9d);
}
.manga-cards__count-item:nth-of-type(1) .manga-cards__count-bar--filled {
  background: linear-gradient(45deg, #286595, #1c2935, #365b9d);
}
.manga-cards__count-item:nth-of-type(2) .manga-cards__count-rank {
  background: linear-gradient(45deg, #dc115a, #FF7EBE, #f0b6d2);
}
.manga-cards__count-item:nth-of-type(2) .manga-cards__count-bar--filled {
  background: linear-gradient(220deg, #dc115a, #FF7EBE, #f0b6d2);
}
.manga-cards__count-item:nth-of-type(3) .manga-cards__count-rank {
  background: linear-gradient(-120deg, #D62121, #C72C2C, #3a1111);
}
.manga-cards__count-item:nth-of-type(3) .manga-cards__count-bar--filled {
  background: linear-gradient(-120deg, #D62121, #C72C2C, #3a1111);
}
.manga-cards__count-bar {
  height: 10px;
  width: 100%;
  background: var(--medium-bg);
  border-radius: 4px;
}
.manga-cards__count-bar--filled {
  height: 10px;
  border-radius: 4px;
}
.manga-cards__count-rank {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  color: white;
  font-size: 16px;
  font-weight: 500;
  flex-shrink: 0;
  margin-right: 10px;
}
.manga-cards__count-rank:nth-child(2) {
  background: linear-gradient(45deg, #dc115a, #FF7EBE, #f0b6d2);
}
.manga-cards__count-rank:nth-child(3) {
  background: linear-gradient(-120deg, #D62121, #C72C2C, #3a1111);
}
.manga-cards__count-progress {
  font-size: 13px;
  color: var(--secondary-text-color);
  flex-shrink: 0;
  margin-left: 14px;
}
.manga-cards--full-page .manga-cards__item-wrapper {
  width: 11.1111%;
}
@media screen and (max-width: 1200px) {
  .manga-cards--full-page .manga-cards__item-wrapper {
    width: 16.6666%;
  }
}
@media screen and (max-width: 1050px) {
  .manga-cards--full-page .manga-cards__item-wrapper {
    width: 20%;
  }
}
@media screen and (max-width: 850px) {
  .manga-cards--full-page .manga-cards__item-wrapper {
    width: 25%;
  }
}
@media screen and (max-width: 650px) {
  .manga-cards--full-page .manga-cards__item-wrapper {
    width: 33.3333%;
  }
}
@media screen and (max-width: 374px) {
  .manga-cards--full-page .manga-cards__item-wrapper {
    width: 50%;
  }
}
.manga-cards__text {
  margin-bottom: 15px;
}
.manga-cards__controls {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}
.manga-cards__controls .button {
  display: flex;
  align-items: center;
}
.manga-cards__report-btn {
  font-size: 21px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}
.manga-cards__report {
  display: none;
}
.manga-cards__item {
  position: relative;
  background: var(--light-bg);
  padding: 10px;
  border-radius: 16px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0), 0 2px 2px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}
.manga-cards__item[data-level="7"]::after {
  content: "";
  position: absolute;
  top: 5%;
  right: 5%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/7.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="8"]::after {
  content: "";
  position: absolute;
  top: 5%;
  right: 5%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/8.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="9"]::after {
  content: "";
  position: absolute;
  top: 5%;
  right: 5%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/9.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="10"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/10.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="11"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/11.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="12"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/12.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="13"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/13.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="14"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/14.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="15"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/15.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="16"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/16.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="17"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/17.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="18"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/18.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="19"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/19.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="20"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/20.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="21"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/21.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="22"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/22.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="23"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/23.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="24"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/24.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="25"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/25.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="26"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/26.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="27"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/27.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="28"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/28.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="29"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/29.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="30"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/30.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="31"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/31.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="32"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/32.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="33"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/33.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="34"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/34.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="35"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/35.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="36"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/36.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="37"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/37.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="38"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/38.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="39"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/39.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="40"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/40.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="41"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/41.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="42"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/42.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="43"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/43.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="44"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/44.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="45"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/45.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="46"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/46.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="47"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/47.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="48"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/48.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="49"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/49.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="50"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/50.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="51"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/51.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="52"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/52.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="53"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/53.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="54"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/54.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="55"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/55.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="56"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/56.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="57"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/57.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="58"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/58.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="59"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/59.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="60"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/60.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="61"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/61.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="62"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/62.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="63"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/63.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="64"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/64.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="65"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/65.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="66"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/66.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="67"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/67.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="68"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/68.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="69"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/69.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="70"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/70.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="71"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/71.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="72"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/72.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="73"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/73.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="74"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/74.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="75"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/75.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="76"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/76.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="77"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/77.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="78"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/78.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="79"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/79.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="80"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/80.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="81"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/81.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="82"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/82.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="83"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/83.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="84"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/84.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="85"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/85.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="86"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/86.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="87"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/87.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="88"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/88.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="89"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/89.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="90"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/90.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="91"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/91.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="92"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/92.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="93"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/93.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="94"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/94.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="95"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/95.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="96"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/96.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="97"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/97.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="98"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/98.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="99"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/99.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item[data-level="100"]::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 15%;
  height: 15%;
  background-image: url("/assets/cards/numbers/100.png?1");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.manga-cards__item video {
  display: block;
  width: 100%;
  background-size: cover;
  background-position: 50%;
  border-radius: 10px !important;
  background-color: var(--light-bg);
}
.manga-cards__item-wrapper {
  width: 24.5%;
  height: auto;
  margin-bottom: 7px;
  padding: 0px 3.5px;
  position: relative;
}
@media screen and (max-width: 850px) {
  .manga-cards__item-wrapper {
    width: 25%;
  }
}
@media screen and (max-width: 650px) {
  .manga-cards__item-wrapper {
    width: 33.3333%;
  }
}
@media screen and (max-width: 374px) {
  .manga-cards__item-wrapper {
    width: 50%;
  }
}
.manga-cards__item-wrapper--exists .manga-cards__item {
  border-bottom: 3px solid #772ce8;
}
.manga-cards__item-wrapper--available-animation::after {
  content: "A+";
  position: absolute;
  top: 15px;
  right: 19px;
  color: white;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 3px;
  background: var(--green-color);
  border: 1px solid white;
}
.manga-cards__item-wrapper--available-animation[data-rank=X]::after {
  background: #4984b2;
}
.manga-cards__item-wrapper--available-animation[data-rank=S]::after {
  background: #f54972;
}
.manga-cards__item-wrapper--available-animation[data-rank=A]::after {
  background: var(--red-color);
}
.manga-cards__item-wrapper--available-animation[data-rank=P]::after {
  background: #005db6;
}
.manga-cards__item-wrapper--available-animation[data-rank=G]::after {
  background: var(--green-color);
}
.manga-cards__item-wrapper--available-animation[data-rank=B]::after {
  background: #eb5d9b;
}
.manga-cards__item-wrapper--available-animation[data-rank=C]::after {
  background: #df9300;
}
.manga-cards__item-wrapper--available-animation[data-rank=D]::after {
  background: #718b99;
}
.manga-cards__item-wrapper--available-animation[data-rank=E]::after {
  background: #985e4b;
}
.manga-cards__item-wrapper--available-animation[data-rank=H]::after {
  background: #484c49;
}
.manga-cards__image {
  display: block;
  position: relative;
  width: 100%;
  padding-top: 150%;
  background-size: cover;
  background-position: 50%;
  border-radius: 8px;
  background-color: var(--light-bg);
}
.manga-cards__image[data-level=""]::after {
  content: none;
}
.manga-cards__modal {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  flex-direction: column;
  align-items: center;
}
.manga-cards__container {
  background-color: var(--light-bg);
  overflow: hidden;
  position: relative;
  width: 100%;
  border-radius: 16px;
}
.manga-cards__header {
  background-size: cover;
  filter: blur(5px) saturate(150%);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: scale(1.1);
  width: 100%;
  background-position: center;
  max-height: 280px;
}
.manga-cards__header--modal-video video {
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  height: 400px;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}
.manga-cards__wrapper {
  position: relative;
  top: 15px;
}
.manga-cards__wrapper video {
  margin: 0 auto;
  max-width: 225px;
  border-radius: 16px;
  box-shadow: 0 5px 12px -4px rgba(34, 60, 80, 0.3490196078);
  overflow: hidden;
  position: relative;
  z-index: 10;
  display: block;
}
.manga-cards__placeholder {
  margin: 0 auto;
  max-width: 180px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  z-index: 10;
  perspective: 1000px;
  transform-style: preserve-3d;
  animation: sway 4s ease-in-out infinite;
}
.manga-cards__info {
  background: var(--light-bg);
  z-index: 2;
  position: relative;
  border-radius: 32px 32px 0 0;
  padding: 50px 30px;
  text-align: center;
  margin-top: -30px;
  opacity: 1 !important;
}
.manga-cards__name {
  font-size: 25px;
  font-weight: 600;
  margin-bottom: 10px;
}
.manga-cards__link {
  margin-bottom: 10px;
  display: block;
  text-decoration: underline;
}

@keyframes sway {
  0%, 100% {
    transform: rotateY(-10deg) rotateX(-5deg);
  }
  25% {
    transform: rotateY(5deg) rotateX(-5deg);
  }
  50% {
    transform: rotateY(10deg) rotateX(5deg);
  }
  75% {
    transform: rotateY(-5deg) rotateX(5deg);
  }
}
#modal-cards .modal__body {
  padding: 0;
}
#modal-cards .modal__content {
  background: transparent;
}
#modal-cards .modal__edit {
  cursor: pointer;
  position: absolute;
  top: 15px;
  left: 12px;
  z-index: 40;
  height: 24px;
  width: 24px;
  padding: 6px;
  color: var(--main-text-color);
  background: var(--medium-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
}

.card-create {
  margin: 0 auto;
  max-width: 310px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.card-create__wrapper {
  position: relative;
  margin: 15px 0 30px;
}
.card-create__wrapper canvas {
  border-radius: 18px;
}
.card-create__text {
  width: 100%;
  height: 150px;
  padding: 15px 78px 15px 20px;
  border: 1px solid transparent;
  background: var(--medium-bg);
  border-radius: 10px;
  resize: none;
  color: var(--main-text-color);
  outline: none;
}
.card-create__text:active, .card-create__text:focus {
  border: 1px solid var(--main-purple-color);
}
.card-create__replace {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card-create__replace-image {
  width: 170px;
  margin-top: 15px;
}
.card-create__replace-image img {
  border-radius: 9px;
}
.card-create__button--load-img, .card-create__button--load-file {
  margin-bottom: 17px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card-create__button--load-img i, .card-create__button--load-file i {
  font-size: 20px;
  margin-right: 5px;
}
.card-create__notify {
  margin-bottom: 15px;
  text-align: center;
}
.card-create__info-footer {
  display: flex;
  justify-content: space-between;
}
.card-create__info-footer button {
  margin-left: 10px;
}
.card-create__info-footer button i {
  font-size: 18px;
}
.card-create__image {
  width: 100%;
  height: 360px;
  visibility: hidden;
}
.card-create__frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}
.card-create__finish {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.card-create__input-name {
  border: none;
  background: var(--medium-bg);
  width: 100%;
  padding: 15px 78px 15px 20px;
  border-radius: 10px;
  outline: none;
  font-size: 15px;
  color: var(--main-text-color);
}
.card-create__input-title, .card-create__fzq, .card-create__static-id-input {
  border: none;
  background: var(--medium-bg);
  width: 100%;
  padding: 15px 78px 15px 20px;
  border-radius: 10px;
  outline: none;
  font-size: 15px;
  color: var(--main-text-color);
}
.card-create__input-controls {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translate(0, -50%);
  display: flex;
}
.card-create__input-controls button {
  font-size: 20px;
  background: var(--light-bg);
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
  line-height: 25px;
}
.card-create__input-controls button:last-of-type {
  margin-right: 0;
}
.card-create__field[data-type=name] {
  position: relative;
}
.card-create__footer {
  position: absolute;
  text-align: center;
  bottom: 12px;
  width: 100%;
  color: white;
  z-index: 4;
  pointer-events: none;
  padding-bottom: 9px;
}
.card-create__form {
  position: relative;
  width: 240px;
  margin: 15px 0 30px;
}
.card-create__name {
  font-size: 29px;
  margin-bottom: 9px;
  padding: 0 10px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.5px;
}
.card-create__title {
  font-size: 14px;
  padding: 0 9px;
  line-height: 13px;
  font-weight: 400;
  letter-spacing: -0.2px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.card-create__field {
  margin-bottom: 17px;
}
.card-create__field-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
}
.card-create__rang-list {
  background: var(--medium-bg);
  padding: 10px;
  border-radius: 10px;
}
.card-create__rang-item {
  display: flex;
  cursor: pointer;
  margin-bottom: 10px;
  align-items: center;
}
.card-create__rang-item--active {
  color: var(--purple-btn-bg);
}
.card-create__rang-item:last-of-type {
  margin-right: 0;
  margin-bottom: 0;
}
.card-create__rang-item[data-rank=E] .card-create__rang-icon {
  background: #613324;
  color: white;
}
.card-create__rang-item[data-rank=D] .card-create__rang-icon {
  background: #718b99;
  color: white;
}
.card-create__rang-item[data-rank=C] .card-create__rang-icon {
  background: #df9300;
  color: white;
}
.card-create__rang-item[data-rank=B] .card-create__rang-icon {
  background: #eb5d9b;
  color: white;
}
.card-create__rang-item[data-rank=G] .card-create__rang-icon {
  background: #004e2f;
  color: white;
}
.card-create__rang-item[data-rank=P] .card-create__rang-icon {
  background: #005db6;
  color: white;
}
.card-create__rang-item[data-rank=A] .card-create__rang-icon {
  background: #9b0a05;
  color: white;
}
.card-create__rang-item[data-rank=S] .card-create__rang-icon {
  background: #f54972;
  color: white;
}
.card-create__rang-icon {
  margin-right: 10px;
  width: 25px;
  height: 25px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.card-create__rang-icon[data-rang=E] {
  background: #4c4c4c;
  color: white;
}
.card-create__rang-icon[data-rang=D] {
  background: #338ffb;
  color: white;
}
.card-create__rang-icon[data-rang=C] {
  background: #fd7f85;
  color: white;
}
.card-create__rang-icon[data-rang=B] {
  background: #60d566;
  color: white;
}
.card-create__rang-icon[data-rang=A] {
  background: #7a41f7;
  color: white;
}
.card-create__rang-icon[data-rang=S] {
  background: #39caa6;
  color: white;
}
.card-create__rang-text {
  font-size: 15px;
}
.card-create__loader {
  width: 48px;
  height: 48px;
  border: 5px solid #464646;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation-loader 1s linear infinite;
  position: absolute;
  left: calc(50% - 24px);
  top: calc(50% - 24px);
  transform: translate(-50%, -50%);
}
.card-create__pages {
  background: var(--medium-bg);
  color: var(--main-text-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-radius: 21px;
}
.card-create__button {
  background: white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
}
.card-create__button span {
  font-size: 14px;
}
.card-create__settings {
  width: 310px;
}

@keyframes rotation-loader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.cropper-bg {
  transform: scale(0.97);
}

.cropper-view-box {
  outline: none !important;
}

.cropper-center {
  display: none !important;
}

#result {
  width: 240px;
  height: 360px;
}

.card-notification {
  bottom: 70px;
  right: -100%;
  width: 60px;
  height: 40px;
  border-radius: 8px;
  z-index: 999;
  position: fixed;
  box-sizing: border-box;
  text-align: center;
  -webkit-box-sizing: border-box;
  background: var(--light-bg);
  animation: slideInCard 1.5s forwards;
  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
.card-notification__wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-notification__image {
  width: 32px;
  margin-top: 3px;
}
.card-notification__image img {
  animation: wiggle 1s ease-in-out 2;
}
@media screen and (max-width: 900px) {
  .card-notification {
    right: 0;
    border-radius: 8px 0 0 8px;
  }
}

.modal-gift-card img {
  width: 200px;
}

#modal-gift-card .modal__body {
  padding: 0;
}

@keyframes slideInCard {
  from {
    right: -100%;
  }
  to {
    right: 25px;
  }
}
@media screen and (max-width: 900px) {
  @keyframes slideInCard {
    from {
      right: -100%;
    }
    to {
      right: 0;
    }
  }
}
@keyframes slideInCardLeft {
  from {
    left: -100%;
  }
  to {
    left: 30px;
  }
}
@media screen and (max-width: 900px) {
  @keyframes slideInCardLeft {
    from {
      left: -100%;
    }
    to {
      left: 5px;
    }
  }
}
@keyframes wiggle {
  0% {
    transform: rotate(10deg);
  }
  25% {
    transform: rotate(-10deg) translateY(-15px);
  }
  50% {
    transform: rotate(20deg);
  }
  75% {
    transform: rotate(-5deg);
    transform: rotate(-10deg) translateY(-5px);
  }
  100% {
    transform: rotate(0deg);
  }
}
.remelt, .card-upgrade, .card-split {
  display: flex;
  justify-content: center;
}
.remelt__rank-list, .card-upgrade__rank-list, .card-split__rank-list {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}
.remelt__rank-item, .card-upgrade__rank-item, .card-split__rank-item {
  padding: 6px 11px;
  margin-right: 10px;
  cursor: pointer;
  background: var(--medium-bg);
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.2s;
}
@media screen and (max-width: 460px) {
  .remelt__rank-item, .card-upgrade__rank-item, .card-split__rank-item {
    padding: 5px 10px;
    margin-right: 7px;
  }
}
@media screen and (max-width: 355px) {
  .remelt__rank-item, .card-upgrade__rank-item, .card-split__rank-item {
    padding: 4px 9px;
    font-size: 13px;
  }
}
.remelt__rank-item:hover, .card-upgrade__rank-item:hover, .card-split__rank-item:hover {
  opacity: 0.8;
}
.remelt__rank-item:last-of-type, .card-upgrade__rank-item:last-of-type, .card-split__rank-item:last-of-type {
  margin-right: 0;
}
.remelt__rank-item--active, .card-upgrade__rank-item--active, .card-split__rank-item--active {
  background: var(--purple-btn-bg);
  color: white;
}
.remelt__header, .card-upgrade__header, .card-split__header {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}
.remelt__title, .card-upgrade__title, .card-split__title {
  font-size: 30px;
  margin-bottom: 10px;
}
.remelt__text, .card-upgrade__text, .card-split__text {
  background: var(--dark-grey-bg);
  border-radius: 15px;
  padding: 15px;
  line-height: 21px;
  font-size: 15px;
}
.remelt__text--counter, .card-upgrade__text--counter, .card-split__text--counter {
  display: flex;
  padding-top: 10px;
  color: var(--main-purple-color);
  font-weight: 600;
}
.remelt__inventory, .card-upgrade__inventory, .card-split__inventory {
  padding: 10px;
  background: var(--dark-grey-bg);
  border-radius: 15px;
  margin-bottom: 20px;
}
.remelt__inventory-list, .card-upgrade__inventory-list, .card-split__inventory-list {
  display: grid;
  overflow-y: auto;
  max-height: 320px;
  grid-template-columns: repeat(7, 1fr);
  gap: 15px;
  padding: 5px;
}
@media screen and (max-width: 900px) {
  .remelt__inventory-list, .card-upgrade__inventory-list, .card-split__inventory-list {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media screen and (max-width: 600px) {
  .remelt__inventory-list, .card-upgrade__inventory-list, .card-split__inventory-list {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (max-width: 480px) {
  .remelt__inventory-list, .card-upgrade__inventory-list, .card-split__inventory-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.remelt__inventory-item, .card-upgrade__inventory-item, .card-split__inventory-item {
  position: relative;
  background: var(--light-bg);
  border-radius: 6px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s;
}
.remelt__inventory-item--available-animation::before, .card-upgrade__inventory-item--available-animation::before, .card-split__inventory-item--available-animation::before {
  content: "A+";
  position: absolute;
  top: 3px;
  right: 3px;
  color: white;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 3px;
  border: 1px solid white;
}
.remelt__inventory-item--available-animation[data-rank=X]::before, .card-upgrade__inventory-item--available-animation[data-rank=X]::before, .card-split__inventory-item--available-animation[data-rank=X]::before {
  background: #4984b2;
}
.remelt__inventory-item--available-animation[data-rank=S]::before, .card-upgrade__inventory-item--available-animation[data-rank=S]::before, .card-split__inventory-item--available-animation[data-rank=S]::before {
  background: #f54972;
}
.remelt__inventory-item--available-animation[data-rank=A]::before, .card-upgrade__inventory-item--available-animation[data-rank=A]::before, .card-split__inventory-item--available-animation[data-rank=A]::before {
  background: var(--red-color);
}
.remelt__inventory-item--available-animation[data-rank=P]::before, .card-upgrade__inventory-item--available-animation[data-rank=P]::before, .card-split__inventory-item--available-animation[data-rank=P]::before {
  background: #005db6;
}
.remelt__inventory-item--available-animation[data-rank=G]::before, .card-upgrade__inventory-item--available-animation[data-rank=G]::before, .card-split__inventory-item--available-animation[data-rank=G]::before {
  background: var(--green-color);
}
.remelt__inventory-item--available-animation[data-rank=B]::before, .card-upgrade__inventory-item--available-animation[data-rank=B]::before, .card-split__inventory-item--available-animation[data-rank=B]::before {
  background: #eb5d9b;
}
.remelt__inventory-item--available-animation[data-rank=C]::before, .card-upgrade__inventory-item--available-animation[data-rank=C]::before, .card-split__inventory-item--available-animation[data-rank=C]::before {
  background: #df9300;
}
.remelt__inventory-item--available-animation[data-rank=D]::before, .card-upgrade__inventory-item--available-animation[data-rank=D]::before, .card-split__inventory-item--available-animation[data-rank=D]::before {
  background: #718b99;
}
.remelt__inventory-item--available-animation[data-rank=E]::before, .card-upgrade__inventory-item--available-animation[data-rank=E]::before, .card-split__inventory-item--available-animation[data-rank=E]::before {
  background: #985e4b;
}
.remelt__inventory-item--available-animation[data-rank=H]::before, .card-upgrade__inventory-item--available-animation[data-rank=H]::before, .card-split__inventory-item--available-animation[data-rank=H]::before {
  background: #484c49;
}
.remelt__inventory-item:not(.remelt__inventory-item--not-available):hover, .card-upgrade__inventory-item:not(.remelt__inventory-item--not-available):hover, .card-split__inventory-item:not(.remelt__inventory-item--not-available):hover {
  transform: scale(1.04);
}
.remelt__inventory-item--not-available img, .remelt__inventory-item--lock img, .card-upgrade__inventory-item--not-available img, .card-upgrade__inventory-item--lock img, .card-split__inventory-item--not-available img, .card-split__inventory-item--lock img {
  filter: grayscale(1);
}
.remelt__inventory-item--not-available::before, .remelt__inventory-item--lock::before, .card-upgrade__inventory-item--not-available::before, .card-upgrade__inventory-item--lock::before, .card-split__inventory-item--not-available::before, .card-split__inventory-item--lock::before {
  content: "\e897";
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  background: var(--light-bg);
  z-index: 2;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--border-color);
  filter: grayscale(1);
}
.remelt__wrapper, .card-upgrade__wrapper, .card-split__wrapper {
  background: var(--dark-grey-bg);
  border-radius: 16px;
  padding: 10px;
  margin-bottom: 20px;
}
.remelt__inner, .card-upgrade__inner, .card-split__inner {
  width: 800px;
  overflow: hidden;
}
.remelt__result .ease-out::before, .card-upgrade__result .ease-out::before, .card-split__result .ease-out::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background-image: conic-gradient(rgb(226, 187, 38) 20deg, transparent 120deg);
  border-radius: 5px;
  animation-name: rotate;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}
.remelt__result .ease-out::after, .card-upgrade__result .ease-out::after, .card-split__result .ease-out::after {
  content: "\e8e8";
  position: absolute;
  width: 135px;
  height: 184px;
  background: var(--light-bg);
  color: var(--border-color);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 70px;
  border-radius: 10px;
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
}
.remelt__result[data-rank=D] .ease-out::before, .card-upgrade__result[data-rank=D] .ease-out::before, .card-split__result[data-rank=D] .ease-out::before {
  background-image: conic-gradient(rgb(82, 121, 139) 20deg, transparent 120deg) !important;
}
.remelt__result[data-rank=C] .ease-out::before, .card-upgrade__result[data-rank=C] .ease-out::before, .card-split__result[data-rank=C] .ease-out::before {
  background-image: conic-gradient(rgb(231, 173, 0) 20deg, transparent 120deg) !important;
}
.remelt__result[data-rank=B] .ease-out::before, .card-upgrade__result[data-rank=B] .ease-out::before, .card-split__result[data-rank=B] .ease-out::before {
  background-image: conic-gradient(rgb(169, 78, 135) 20deg, transparent 120deg) !important;
}
.remelt__result[data-rank=G] .ease-out::before, .card-upgrade__result[data-rank=G] .ease-out::before, .card-split__result[data-rank=G] .ease-out::before {
  background-image: conic-gradient(rgb(0, 78, 47) 20deg, transparent 120deg) !important;
}
.remelt__result[data-rank=P] .ease-out::before, .card-upgrade__result[data-rank=P] .ease-out::before, .card-split__result[data-rank=P] .ease-out::before {
  background-image: conic-gradient(rgb(0, 93, 182) 20deg, transparent 120deg) !important;
}
.remelt__result[data-rank=A] .ease-out::before, .card-upgrade__result[data-rank=A] .ease-out::before, .card-split__result[data-rank=A] .ease-out::before {
  background-image: conic-gradient(rgb(174, 0, 0) 20deg, transparent 120deg) !important;
}
.remelt__result[data-rank=S] .ease-out::before, .card-upgrade__result[data-rank=S] .ease-out::before, .card-split__result[data-rank=S] .ease-out::before {
  background-image: conic-gradient(rgb(196, 84, 111) 20deg, transparent 120deg) !important;
}
.remelt__row, .card-upgrade__row, .card-split__row {
  display: flex;
  margin: 15px;
}
.remelt__row:first-of-type, .card-upgrade__row:first-of-type, .card-split__row:first-of-type {
  justify-content: center;
}
.remelt__row:nth-of-type(2), .card-upgrade__row:nth-of-type(2), .card-split__row:nth-of-type(2) {
  justify-content: center;
  margin: 30px 0;
}
.remelt__row:nth-of-type(2) .remelt__item, .remelt__row:nth-of-type(2) .card-upgrade__item, .card-upgrade__row:nth-of-type(2) .remelt__item, .card-upgrade__row:nth-of-type(2) .card-upgrade__item, .card-split__row:nth-of-type(2) .remelt__item, .card-split__row:nth-of-type(2) .card-upgrade__item {
  width: 150px;
  height: 200px;
}
.remelt__row:nth-of-type(2) .remelt__item--not-available img, .remelt__row:nth-of-type(2) .remelt__item--lock img, .remelt__row:nth-of-type(2) .card-upgrade__item--not-available img, .remelt__row:nth-of-type(2) .card-upgrade__item--lock img, .card-upgrade__row:nth-of-type(2) .remelt__item--not-available img, .card-upgrade__row:nth-of-type(2) .remelt__item--lock img, .card-upgrade__row:nth-of-type(2) .card-upgrade__item--not-available img, .card-upgrade__row:nth-of-type(2) .card-upgrade__item--lock img, .card-split__row:nth-of-type(2) .remelt__item--not-available img, .card-split__row:nth-of-type(2) .remelt__item--lock img, .card-split__row:nth-of-type(2) .card-upgrade__item--not-available img, .card-split__row:nth-of-type(2) .card-upgrade__item--lock img {
  filter: grayscale(1);
}
.remelt__row:nth-of-type(2) .remelt__item--not-available::before, .remelt__row:nth-of-type(2) .remelt__item--lock::before, .remelt__row:nth-of-type(2) .card-upgrade__item--not-available::before, .remelt__row:nth-of-type(2) .card-upgrade__item--lock::before, .card-upgrade__row:nth-of-type(2) .remelt__item--not-available::before, .card-upgrade__row:nth-of-type(2) .remelt__item--lock::before, .card-upgrade__row:nth-of-type(2) .card-upgrade__item--not-available::before, .card-upgrade__row:nth-of-type(2) .card-upgrade__item--lock::before, .card-split__row:nth-of-type(2) .remelt__item--not-available::before, .card-split__row:nth-of-type(2) .remelt__item--lock::before, .card-split__row:nth-of-type(2) .card-upgrade__item--not-available::before, .card-split__row:nth-of-type(2) .card-upgrade__item--lock::before {
  content: "\e897";
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  background: var(--light-bg);
  z-index: 2;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--border-color);
}
.remelt__row:nth-of-type(2) .remelt__item span, .remelt__row:nth-of-type(2) .card-upgrade__item span, .card-upgrade__row:nth-of-type(2) .remelt__item span, .card-upgrade__row:nth-of-type(2) .card-upgrade__item span, .card-split__row:nth-of-type(2) .remelt__item span, .card-split__row:nth-of-type(2) .card-upgrade__item span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
}
.remelt__row:last-of-type, .card-upgrade__row:last-of-type, .card-split__row:last-of-type {
  justify-content: space-around;
}
.remelt__item, .card-upgrade__item, .card-split__item {
  width: 100px;
  height: 150px;
  background: var(--light-bg);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--border-color);
  font-weight: 100;
  position: relative;
  overflow: hidden;
  transition: 0.2s;
}
.remelt__item span, .card-upgrade__item span, .card-split__item span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  position: relative;
  z-index: 0;
}
.remelt__item img, .card-upgrade__item img, .card-split__item img {
  z-index: 3;
  cursor: pointer;
}

.ease-out::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background-image: conic-gradient(rgb(213, 214, 214) 20deg, transparent 120deg);
  border-radius: 5px;
  animation-name: rotate;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}
.ease-out::after {
  content: "\e7fe";
  position: absolute;
  width: 87px;
  height: 139px;
  background: var(--light-bg);
  color: var(--border-color);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 35px;
  border-radius: 10px;
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
.lootbox {
  display: flex;
  justify-content: center;
}
.lootbox__block {
  background: var(--light-bg);
  border-radius: 12px;
  padding: 10px;
  font-size: 15px;
  margin-top: 25px;
}
.lootbox__block .lootbox__show-realtime-btn {
  margin-left: auto;
  font-size: 15px;
  margin-right: 10px;
  cursor: pointer;
}
.lootbox__realtime-list {
  display: none;
  margin-top: 10px;
}
.lootbox__prize {
  background: var(--light-bg);
  border-radius: 12px;
  padding: 10px;
  font-size: 15px;
  margin-top: 25px;
}
.lootbox__prize-desc {
  margin-left: auto;
}
.lootbox__prize-wrapper {
  display: flex;
  flex-direction: column;
}
.lootbox__prize-avatar {
  flex-shrink: 0;
  margin-right: 5px;
  margin-left: 5px;
  border-radius: 50%;
  width: 25px;
}
.lootbox__prize-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.lootbox__prize-img {
  width: 55px;
  margin-right: 12px;
  flex-shrink: 0;
}
.lootbox__prize-img img {
  border-radius: 4px;
}
.lootbox__discount {
  background-image: linear-gradient(to right, #67097c, #d745b6, #844e8e, #8413c5, #7c0971);
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-name: gradients-halloween-btn;
  padding: 15px;
  border-radius: 16px;
  color: white;
  font-weight: 600;
  font-size: 17px;
  transition: all 0.2s;
  background-size: 600%;
}
.lootbox__inner {
  width: 600px;
  overflow: hidden;
}
.lootbox__title {
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 15px;
}
.lootbox__header {
  background: var(--dark-grey-bg);
  border-radius: 14px;
  padding: 35px;
  padding-top: 60px;
  height: 302px;
  margin-bottom: 25px;
  position: relative;
}
.lootbox__text {
  position: absolute;
  background: var(--light-bg);
  padding: 20px;
  z-index: 6;
  text-align: center;
  font-weight: 500;
  font-size: 24px;
  left: 0;
  bottom: 0;
  width: 100%;
  border-radius: 0 0 14px 14px;
}
.lootbox__bonus {
  background: var(--light-bg);
  border-radius: 12px;
  padding: 10px;
  font-size: 15px;
  margin-top: 25px;
}
.lootbox__bonus div:nth-of-type(2) {
  margin-bottom: 5px;
}
.lootbox__bonus div:nth-of-type(3) {
  margin-bottom: 5px;
}
.lootbox__bonus span {
  color: var(--main-purple-color);
}
.lootbox__description {
  background: var(--light-bg);
  border-radius: 12px;
  padding: 10px;
}
.lootbox__description-title {
  margin-bottom: 15px;
  font-size: 20px;
}
.lootbox__description-title span {
  color: var(--main-purple-color);
}
.lootbox__description-text {
  font-size: 15px;
  line-height: 20px;
}
.lootbox__description-text span {
  color: var(--main-purple-color);
}
.lootbox__row {
  display: flex;
  flex-direction: column;
  margin-top: 15px;
}
.lootbox__list {
  display: flex;
  justify-content: space-between;
  padding-bottom: 16px;
}
.lootbox__list--3 .lootbox__card {
  width: 31%;
}
.lootbox__list--4 .lootbox__card {
  width: 24%;
}
.lootbox__card {
  cursor: pointer;
  position: relative;
  /*
  &[data-anim]::after {
      content: "A+";
      position: absolute;
      top: -6px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--main-purple-color);
      color: white;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      padding: 3px;
  }

  &[data-anim][data-rank="X"]::after { background: #4984b2; }
  &[data-anim][data-rank="S"]::after { background: #f54972; }
  &[data-anim][data-rank="A"]::after { background: var(--red-color); }
  &[data-anim][data-rank="P"]::after { background: #005db6; }
  &[data-anim][data-rank="G"]::after { background: var(--green-color); }
  &[data-anim][data-rank="B"]::after { background: #eb5d9b; }
  &[data-anim][data-rank="C"]::after { background: #df9300; }
  &[data-anim][data-rank="D"]::after { background: #718b99; }
  &[data-anim][data-rank="E"]::after { background: #985e4b; }
  &[data-anim][data-rank="H"]::after { background: #484c49; }
   */
}
.lootbox__card img {
  border-radius: 11px;
}
@media screen and (max-width: 580px) {
  .lootbox__card img {
    border-radius: 10px;
  }
}
@media screen and (max-width: 480px) {
  .lootbox__card img {
    border-radius: 8px;
  }
}
.lootbox__card[data-level="1"] .lootbox__card-level::after {
  content: "";
  position: absolute;
  top: 1%;
  right: 2%;
  width: 13%;
  height: 13%;
  background-image: url(/assets/cards/numbers/1.png?1);
  background-size: contain;
  background-repeat: no-repeat;
}
.lootbox__card[data-level="2"] .lootbox__card-level::after {
  content: "";
  position: absolute;
  top: 1%;
  right: 2%;
  width: 13%;
  height: 13%;
  background-image: url(/assets/cards/numbers/2.png?1);
  background-size: contain;
  background-repeat: no-repeat;
}
.lootbox__middle {
  border-radius: 10px;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  margin: 15px 0;
}
.lootbox__middle-item {
  border: 1px solid transparent;
  padding: 9px;
  width: 31%;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s;
  cursor: pointer;
  background: var(--light-bg);
}
.lootbox__middle-item:hover {
  background: var(--dark-grey-bg);
}
.lootbox__middle-item--active {
  border: 1px solid var(--main-purple-color);
}
.lootbox__middle-price {
  display: flex;
  align-items: center;
}
.lootbox__middle-count {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 5px;
}
.lootbox__middle button {
  margin-right: 10px;
}
.lootbox__middle button:last-of-type {
  margin-right: 0;
}
.lootbox__images {
  position: relative;
  height: 170px;
  margin-top: auto;
}
.lootbox__image {
  bottom: -50px;
  width: 140px;
  left: 50%;
  margin-left: -70px;
  position: absolute;
  display: block;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 6px;
  background-color: var(--light-bg);
}
.lootbox__image:nth-of-type(1) {
  transform: rotate(-18deg) translate(-59px, -47px);
  box-shadow: none;
  z-index: 1;
}
.lootbox__image:nth-of-type(2) {
  z-index: 5;
  transform: translate(0, -39px);
}
.lootbox__image:nth-of-type(3) {
  transform: rotate(18deg) translate(59px, -47px);
  z-index: 1;
}
.lootbox__image:nth-of-type(4) {
  transform: rotate(-34deg) translate(-105px, -68px);
}
.lootbox__image:nth-of-type(5) {
  transform: rotate(34deg) translate(105px, -68px);
}
.lootbox__wrapper {
  position: relative;
  max-width: 100%;
  border-radius: 6px;
  overflow: hidden;
}

#modal-card-rules .modal__inner {
  max-width: 96vw;
}
#modal-card-rules ul {
  padding-left: 20px;
}
#modal-card-rules ul li {
  padding: 5px 0;
  line-height: 20px;
}
#modal-card-rules .card-rules-task-button {
  display: flex;
  align-items: center;
}
#modal-card-rules .card-rules-task-button i {
  font-size: 20px;
  margin-right: 5px;
}
#modal-card-rules .card-rules-queue {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
#modal-card-rules .card-rules-queue strong {
  margin-left: 5px;
}
#modal-card-rules .card-rules-queue::before {
  content: "\e5ca";
  background: var(--green-color);
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 10px;
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
  color: white;
  font-size: 18px;
  flex-shrink: 0;
}
#modal-card-rules .card-rules-queue--lock::before {
  background: var(--red-color);
  content: "\e5cd";
}

.my-card-task {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.my-card-task__item {
  width: 45%;
  margin-bottom: 15px;
  position: relative;
}
.my-card-task__item video {
  width: 100%;
  height: 100%;
  display: block;
}
.my-card-task__item button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--red-color);
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings__inner {
  width: 800px;
  overflow: hidden;
}
.settings__inner .secondary-title {
  margin-top: 0;
}

.showcase-inventory {
  padding: 10px;
  background: var(--dark-grey-bg);
  border-radius: 15px;
  margin-bottom: 20px;
}
.showcase-inventory__list {
  display: grid;
  overflow-y: auto;
  min-height: 150px;
  max-height: 350px;
  grid-template-columns: repeat(7, 1fr);
  gap: 15px;
  padding: 5px;
}
@media screen and (max-width: 900px) {
  .showcase-inventory__list {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media screen and (max-width: 600px) {
  .showcase-inventory__list {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (max-width: 480px) {
  .showcase-inventory__list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.showcase-inventory__item {
  background: var(--light-bg);
  border-radius: 6px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s;
}

.showcase {
  padding: 10px;
  background: var(--dark-grey-bg);
  border-radius: 15px;
  margin-bottom: 20px;
  overflow: hidden;
}
.showcase__list {
  display: flex;
  overflow-x: auto;
}
.showcase__item {
  width: 100px;
  height: 150px;
  background: var(--light-bg);
  border-radius: 8px;
  margin-right: 15px;
  flex-shrink: 0;
  position: relative;
}
.showcase__item img {
  z-index: 2;
  cursor: pointer;
}
.showcase__item:last-of-type {
  margin-right: 0;
}
.showcase__item:before {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  content: attr(data-number);
  font-size: 30px;
  color: var(--secondary-text-color);
}

.lock-card-btn {
  position: absolute !important;
  right: -1px;
  top: 4px;
  background: var(--dark-grey-bg);
  padding: 3px 4px;
  border-radius: 50%;
  z-index: 4;
  font-size: 18px;
  color: var(--icons-color);
  border: 1px solid var(--border-color);
  display: none;
}

.lock-card-btn .icon-lock {
  color: var(--red-color);
}

.lock-card-mode-btn {
  cursor: pointer;
  padding: 5px;
  transition: all 0.3s;
  display: flex;
  align-items: center;
}
.lock-card-mode-btn i {
  font-size: 16px;
  margin-right: 5px;
}
.lock-card-mode-btn:hover {
  background: var(--purple-btn-bg);
  color: white;
}

.cards-moderate__text {
  width: 300px;
  margin-top: 10px;
}
.cards-moderate__text textarea {
  width: 100%;
  min-height: 150px;
}
.cards-moderate__replace img {
  border-radius: 14px;
}
.cards-moderate__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 230px;
  margin: 0 auto;
}
.cards-moderate__item form {
  margin-top: 10px;
}
.cards-moderate__item form,
.cards-moderate__item button {
  width: 100%;
}
.cards-moderate__button {
  color: white !important;
}
.cards-moderate__button--accept {
  background: var(--green-color) !important;
}
.cards-moderate__button--reject {
  margin-top: 10px;
  background: var(--red-color) !important;
}
.cards-moderate .secondary-title a {
  color: var(--main-purple-color);
}
.cards-moderate__image {
  width: 200px;
  margin-bottom: 20px;
}
.cards-moderate__image video {
  border-radius: 16px;
}
.cards-moderate__image img {
  border-radius: 16px;
}
.cards-moderate__manga-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 20px;
  margin-bottom: 60px;
  justify-content: center;
}
.cards-moderate__manga-item {
  width: 130px;
  height: auto;
  margin-bottom: 38px;
}
.cards-moderate__manga-item img {
  height: auto;
}
.cards-moderate__replace span {
  display: block;
  text-align: center;
  margin-bottom: 10px;
}

.lock-card-user::after {
  content: "\e897";
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
  position: absolute;
  right: 7px;
  top: 4px;
  background: var(--light-bg);
  color: var(--main-text-color);
  width: 20px;
  height: 20px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  border-radius: 50%;
}

.card-report {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card-report__item {
  display: flex;
  padding: 10px;
  background: var(--light-bg);
  border-radius: 10px;
  margin-bottom: 10px;
  width: 360px;
}
@media screen and (max-width: 360px) {
  .card-report__item {
    width: 310px;
  }
}
.card-report__item a {
  color: var(--main-purple-color);
  font-weight: 500;
  margin-right: 10px;
}
.card-report__date {
  font-size: 14px;
  color: var(--secondary-text-color);
  margin-bottom: 10px;
}
.card-report__wrapper {
  display: flex;
  flex-direction: column;
}
.card-report__delete-btn {
  background: var(--red-color);
  color: white;
  text-align: center;
  display: inline-flex;
  padding: 5px;
  margin-top: 10px;
  width: 72px;
  border-radius: 10px;
  cursor: pointer;
}
.card-report__title {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-manga-list__add-btn {
  background: var(--medium-bg);
  font-size: 14px;
  padding: 10px 15px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.card-manga-list__add-btn i {
  font-size: 22px;
}

.cards-progress {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background: var(--medium-bg);
  border-radius: 10px;
  margin-bottom: 15px;
  justify-content: space-between;
  flex-shrink: 0;
}
.cards-progress__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  color: white;
  font-size: 20px;
  font-weight: 500;
  flex-shrink: 0;
  margin-right: 10px;
  background: linear-gradient(45deg, #672895, #3c2141, #4c2577);
}
.cards-progress__count-bar {
  height: 10px;
  width: 100%;
  background: var(--light-bg);
  border-radius: 4px;
}
.cards-progress__count-bar--filled {
  background: linear-gradient(45deg, #672895, #3c2141, #4c2577);
  height: 10px;
  border-radius: 4px;
}
.cards-progress__number {
  font-size: 13px;
  color: var(--secondary-text-color);
  flex-shrink: 0;
  margin-left: 14px;
}

.deck-owners {
  padding: 10px 15px;
  background: var(--medium-bg);
  border-radius: 10px;
  margin-bottom: 15px;
}
.deck-owners__list {
  display: flex;
  margin-left: 1px;
  align-items: center;
  overflow-x: auto;
  padding: 4px 3px;
}
.deck-owners__list::-webkit-scrollbar {
  width: 8px;
  height: 5px;
}
.deck-owners__item {
  display: inline-block;
  width: 35px;
  height: 35px;
  margin-right: -0.5em !important;
  transition: all 0.2s;
  flex-shrink: 0;
}
.deck-owners__item:hover {
  z-index: 4;
  transform: scale(1.1);
}
.deck-owners__item img {
  border-radius: 50%;
  filter: grayscale(1);
}
.deck-owners__item--full {
  position: relative;
  --border-width: 2px;
  z-index: 3;
}
.deck-owners__item--full img {
  filter: unset;
}
.deck-owners__item--full::after {
  position: absolute;
  content: "";
  top: calc(-1 * var(--border-width));
  left: calc(-1 * var(--border-width));
  z-index: -1;
  width: calc(100% + var(--border-width) * 2);
  height: calc(100% + var(--border-width) * 2);
  border-radius: 50%;
  background: linear-gradient(60deg, hsl(224deg, 85%, 66%), hsl(269deg, 85%, 66%), hsl(314deg, 85%, 66%), hsl(359deg, 85%, 66%), hsl(44deg, 85%, 66%));
  background-size: 300% 300%;
  background-position: 0 50%;
  animation: moveGradient 4s alternate infinite;
}
@keyframes moveGradient {
  50% {
    background-position: 100% 50%;
  }
}
.deck-owners__more {
  margin-left: 16px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}
.deck-owners__empty {
  font-size: 14px;
  line-height: 20px;
}
.deck-owners__title {
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: 400;
}

.card-rules-text {
  font-size: 14px;
  color: var(--secondary-text-color);
  margin-bottom: 15px;
}

@keyframes bounceX {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(0.9);
  }
  70% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.lootbox__card[data-rank=X] {
  animation: bounceX 1s ease;
}

.open-link-card {
  cursor: pointer;
  border-bottom: 1px dashed var(--purple-btn-bg);
}

.remelt__inventory-item--lock {
  display: none !important;
}

.tag-requests__image {
  width: 200px;
  margin-bottom: 15px;
}
.tag-requests__name {
  font-weight: 600;
  margin-bottom: 10px;
}
.tag-requests__list {
  margin-bottom: 10px;
}
.tag-requests__list-item {
  margin-right: 5px;
}
.tag-requests__list-item:last-of-type {
  margin-right: 0;
}
.tag-requests .button:first-of-type {
  color: var(--red-color) !important;
}
.tag-requests .button:last-of-type {
  color: var(--green-color) !important;
}

.card-show {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -15px;
}
.card-show__placeholder {
  margin: 0 auto;
  max-width: 225px;
  border-radius: 16px;
  overflow: hidden;
  display: block;
  position: relative;
  z-index: 10;
  perspective: 1000px;
  transform-style: preserve-3d;
  animation: sway 4s ease-in-out infinite;
}
.card-show__event-frame-btn {
  position: absolute;
  top: 28px;
  left: 14px;
  z-index: 10;
  width: 30px;
  height: 30px;
  background: var(--dark-grey-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
}
.card-show__inner {
  overflow: hidden;
}
.card-show__load {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--secondary-text-color);
  margin: 15px 0;
}
.card-show__load i {
  margin-left: 5px;
  margin-top: 4px;
}
.card-show__container {
  background-color: var(--light-bg);
  overflow: hidden;
  position: relative;
  width: 100%;
}
.card-show__animated {
  filter: blur(0px) !important;
}
.card-show__header {
  background-size: cover;
  filter: blur(8px) saturate(100%);
  left: 0;
  position: absolute;
  top: 0;
  transform: scale(1.1);
  width: 100%;
  height: 400px;
  background-position: center;
}
.card-show__header video {
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  height: 400px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.card-show__wrapper {
  padding: 0 4rem 1rem;
  position: relative;
  top: 50px;
}
.card-show__wrapper video {
  margin: 0 auto;
  max-width: 225px;
  border-radius: 16px;
  box-shadow: 0 5px 12px -4px rgba(34, 60, 80, 0.3490196078);
  overflow: hidden;
  position: relative;
  z-index: 10;
  display: block;
}
.card-show__image {
  margin: 0 auto;
  max-width: 225px;
  border-radius: 16px;
  box-shadow: 0 5px 12px -4px rgba(34, 60, 80, 0.3490196078);
  overflow: hidden;
  position: relative;
  z-index: 10;
}
.card-show__image[data-level]:not([data-level="0"])::after {
  content: "+" attr(data-level);
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(216, 28, 28, 0.568627451);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 12px;
}
.card-show__image[data-level=""]::after {
  content: none;
}
.card-show__name-wrapper {
  background: var(--light-bg);
  border-radius: 32px 32px 0 0;
  padding: 50px 1rem 25px;
  position: inherit;
  z-index: 2;
  border: 1px solid var(--border-color);
}
.card-show__name {
  font-size: 30px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  color: var(--main-text-color);
  margin-bottom: 15px;
  text-align: center;
}
.card-show .tags {
  justify-content: center;
}
.card-show__controls {
  display: flex;
  justify-content: center;
}
.card-show__controls button {
  display: flex;
  align-items: center;
  font-size: 12px;
  padding: 10px 10px;
  border: 1px solid var(--border-color);
  border-radius: 25px;
}
.card-show__controls button i {
  margin-right: 2px;
}
.card-show__owners {
  display: grid;
  justify-items: center;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  -moz-column-gap: 25px;
  gap: 12px;
  margin: 10px 0;
}
@media screen and (max-width: 388px) {
  .card-show__owners {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  }
}
.card-show__owner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
  border-radius: 10px;
  padding: 6px;
  border: 1px solid var(--border-color);
}
@media screen and (max-width: 335px) {
  .card-show__owner {
    width: 90px;
  }
}
.card-show__owner-wrapper {
  margin-bottom: 30px;
}
.card-show__owner--online {
  border: 1px solid var(--green-color) !important;
}
.card-show__owner-icon {
  position: absolute;
  top: -1px;
  left: -26px;
  background: var(--dark-grey-bg);
  border-radius: 50%;
  font-size: 13px;
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-show__owner-icon--trade-lock {
  color: red;
}
.card-show__owner-icon--block {
  color: grey;
}
.card-show__owner-status {
  position: absolute;
  top: 4px;
  left: 4px;
  background: var(--green-color);
  border-radius: 50%;
  height: 10px;
  width: 10px;
  border: 1px solid var(--light-bg);
  display: none;
}
.card-show__owner-image {
  position: relative;
  margin-bottom: 5px;
  width: 36px;
}
.card-show__owner-image img {
  border-radius: 50%;
}
.card-show__owner-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 500;
  font-size: 15px;
}

.cards--container {
  max-width: 800px;
  margin: 0 auto;
}

.card-tag-form__select {
  display: block !important;
  width: 100%;
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  padding: 10px;
  border-radius: 10px;
  outline: none;
  color: var(--main-text-color);
}

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

.card-inventory-container--trade-receiver .card-filter-form__decks-btn {
  display: none;
}

.card-inventory-container--trade-receiver .card-filter-form__decks {
  display: none !important;
}

.card-filter-form__decks {
  display: none;
  margin-bottom: 15px;
  max-height: 100px;
  overflow-y: auto;
}
.card-filter-form__decks-item {
  margin-bottom: 5px;
  cursor: pointer;
  padding: 10px;
  border-radius: var(--main-border-radius);
  font-size: 13px;
  border: 1px solid var(--border-color);
}
.card-filter-form__controls {
  position: relative;
}
.card-filter-form__controls-list {
  flex-shrink: 0;
  margin-right: 6px;
}
.card-filter-form input {
  width: 100%;
}
.card-filter-form__search-btn {
  position: absolute;
  top: 10px;
  right: 11px;
  font-size: 16px;
  background: var(--purple-btn-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  border-radius: 4px;
  padding: 2px;
}
.card-filter-form__wrapper {
  display: flex;
  justify-content: center;
}
.card-filter-form__menu {
  display: flex;
  margin-bottom: 15px;
  overflow: auto;
}
.card-filter-form__rank, .card-filter-form__lock, .card-filter-form__enchant, .card-filter-form__battle, .card-filter-form__cnt-btn {
  padding: 5px 9px;
  margin-right: 6px;
  font-size: 14px;
  border-radius: 5px;
}
.card-filter-form__ranks, .card-filter-form__lock-status {
  flex-shrink: 0;
}
.card-filter-form__lock:last-of-type {
  margin-right: 0;
}
.card-filter-form__btn--active {
  background: var(--purple-btn-bg);
  color: white;
}

.card-filter-list {
  padding: 10px;
  background: var(--dark-grey-bg);
  border-radius: 15px;
}
.card-filter-list--loading {
  position: relative;
  min-height: 100px;
}
.card-filter-list--loading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  margin-left: -20px;
  border-radius: 50%;
  border: 4px solid #ddd;
  border-top-color: #6b26a6;
  animation: spin-lo 1s linear infinite;
  z-index: 30;
}
.card-filter-list--loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.16);
  z-index: 1;
  border-radius: 15px;
}
.card-filter-list__items {
  display: grid;
  overflow-y: auto;
  min-height: 150px;
  max-height: 350px;
  grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
  gap: 15px;
  padding: 5px;
}
@media screen and (max-width: 400px) {
  .card-filter-list__items {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  }
}
.card-filter-list__parent {
  position: relative;
}
.card-filter-list__exp {
  width: 100%;
  height: 5px;
  background: hsla(0deg, 0%, 55%, 0.2);
  border-radius: 10px;
  position: absolute;
  top: 2px;
}
.card-filter-list__exp--fill {
  position: absolute;
  height: 5px;
  border-radius: 10px;
  transition: width 0.3s ease;
}
.card-filter-list__card {
  background: var(--light-bg);
  border-radius: 6px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s;
}
.card-filter-list__card video {
  display: block;
  width: 100%;
  background-size: cover;
  background-position: 50%;
  border-radius: 10px !important;
  background-color: var(--light-bg);
}
.card-filter-list__card--lock {
  position: absolute;
  bottom: 4px;
  left: 5px;
  background: var(--dark-grey-bg);
  border-radius: 50%;
  font-size: 13px;
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: red;
}
.card-filter-list__card--need {
  transition: all 0.3s;
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: rgba(0, 153, 51, 0.7019607843);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card-filter-list__card[data-in-trade="1"] img {
  filter: grayscale(1);
}
.card-filter-list__card[data-has="1"] {
  border-bottom: 3px solid #772ce8;
}
.card-filter-list__card[data-in-trade="1"]::after {
  content: "\e897";
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  background: var(--light-bg) !important;
  z-index: 2;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--border-color);
}
.card-filter-list__card[data-level]:not([data-level="0"][data-exp="0"])::before {
  content: attr(data-level);
  position: absolute;
  bottom: -12px;
  left: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 10px;
  font-weight: 600;
  border: 1px solid var(--light-bg);
  z-index: 1;
}
.card-filter-list__card[data-level=""]::after {
  content: none;
}
.card-filter-list__card--exists {
  filter: grayscale(1);
  cursor: default;
}
.card-filter-list__card--available-animation::after {
  content: "A+";
  position: absolute;
  top: 3%;
  right: 4%;
  color: white;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 3px;
  background: var(--green-color);
  border: 1px solid white;
}
.card-filter-list__card--available-animation[data-rank=X]::after {
  background: #4984b2;
}
.card-filter-list__card--available-animation[data-rank=S]::after {
  background: #f54972;
}
.card-filter-list__card--available-animation[data-rank=A]::after {
  background: var(--red-color);
}
.card-filter-list__card--available-animation[data-rank=P]::after {
  background: #005db6;
}
.card-filter-list__card--available-animation[data-rank=G]::after {
  background: var(--green-color);
}
.card-filter-list__card--available-animation[data-rank=B]::after {
  background: #eb5d9b;
}
.card-filter-list__card--available-animation[data-rank=C]::after {
  background: #df9300;
}
.card-filter-list__card--available-animation[data-rank=D]::after {
  background: #718b99;
}
.card-filter-list__card--available-animation[data-rank=E]::after {
  background: #985e4b;
}
.card-filter-list__card--available-animation[data-rank=H]::after {
  background: #484c49;
}
.card-filter-list__card img {
  border-radius: 6px;
}
.card-filter-list__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 15px 0;
}
.card-filter-list__pagination-item {
  margin: 0 10px;
  font-size: 14px;
}

@keyframes spin-lo {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.timeline {
  display: none;
  justify-content: center;
}
.timeline__list {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-left: 20px;
  padding-left: 20px;
  border-left: 2px solid var(--border-color);
  margin-bottom: 20px;
}
.timeline__author {
  display: block;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  max-width: 220px;
}
.timeline__date {
  font-size: 14px;
  color: var(--secondary-text-color);
  margin-bottom: 7px;
}
.timeline__item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
}
.timeline__item:last-of-type {
  margin-bottom: 0;
}
.timeline__marker {
  width: 10px;
  height: 10px;
  background-color: var(--main-purple-color);
  border-radius: 50%;
  position: absolute;
  left: -26px;
  top: 50%;
  transform: translateY(-50%);
}
.timeline__content {
  background: var(--light-bg);
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
}
.timeline__content img {
  width: 200px;
}

.user-mangas__list {
  display: flex;
  justify-content: center;
}
.user-mangas__inner {
  width: 800px;
  overflow: hidden;
}
.user-mangas__progress {
  padding: 10px 15px;
  background: var(--light-bg);
  border-radius: 10px;
  margin-bottom: 15px;
}
.user-mangas__progress-header {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 7px;
}
.user-mangas__progress-footer {
  margin-top: 7px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.user-mangas__progress-footer div:first-of-type {
  color: var(--secondary-text-color);
}
.user-mangas__progress-bar {
  height: 10px;
  width: 100%;
  background: var(--medium-bg);
  border-radius: 4px;
}
.user-mangas__progress-bar--filled {
  background: linear-gradient(45deg, #672895, #3c2141, #4c2577);
  height: 10px;
  border-radius: 4px;
}
.user-mangas__progress-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  flex-shrink: 0;
  margin-right: 10px;
  background: linear-gradient(45deg, #672895, #3c2141, #4c2577);
}

.user-manga {
  background: var(--light-bg);
  padding: 15px;
  border-radius: 18px;
  margin-bottom: 15px;
}
.user-manga__controls {
  display: flex;
  margin-top: 15px;
}
.user-manga__controls button:first-of-type {
  margin-right: 10px;
}
.user-manga__button {
  display: flex;
  align-items: center;
  font-size: 14px;
  padding: 10px 15px;
  border: 1px solid var(--border-color);
  border-radius: 25px;
  transition: all 0.2s;
}
.user-manga__button:hover {
  border: 1px solid var(--main-purple-color);
}
.user-manga__offer-card-btn--active {
  border: 1px solid var(--main-purple-color);
  color: var(--main-purple-color);
}
.user-manga__result-offer {
  margin-top: 15px;
}
.user-manga__title {
  font-size: 21px;
  font-weight: 600;
}
.user-manga__card-count {
  font-size: 14px;
  color: var(--secondary-text-color);
  margin-top: 12px;
}
.user-manga__progress {
  width: 100%;
  height: 6px;
  background-color: var(--medium-bg);
  border-radius: var(--main-border-radius);
  position: relative;
  margin: 14px 0;
}
.user-manga__progress--fill {
  position: absolute;
  background: var(--purple-btn-bg);
  height: 6px;
  top: -1px;
  left: -1px;
  border-radius: var(--main-border-radius);
}
.user-manga__cards-list {
  display: flex;
}
.user-manga__cards-image {
  width: 100px;
  margin-right: 10px;
  display: block;
}

.card-offer-remove-btn {
  position: absolute !important;
  right: 5px;
  top: 4px;
  background: var(--dark-grey-bg);
  border-radius: 50%;
  z-index: 1;
  font-size: 18px;
  color: var(--icons-color);
  border: 1px solid var(--border-color);
  text-align: center;
  vertical-align: middle;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.manga-card--mini-info .manga-cards__link {
  display: none;
}

.card-split {
  --split-rank-color: 139, 0, 255;
  --split-rank-color-2: 119, 44, 232;
  --split-rank-soft: rgba(var(--split-rank-color), .08);
  --split-rank-glow: rgba(var(--split-rank-color), .34);
  display: flex;
  justify-content: center;
}
.card-split--rank-s {
  --split-rank-color: 255, 35, 122;
  --split-rank-color-2: 255, 112, 188;
}
.card-split--rank-a {
  --split-rank-color: 255, 49, 58;
  --split-rank-color-2: 255, 119, 80;
}
.card-split--rank-p {
  --split-rank-color: 41, 116, 255;
  --split-rank-color-2: 89, 196, 255;
}
.card-split--rank-g {
  --split-rank-color: 17, 176, 92;
  --split-rank-color-2: 112, 232, 151;
}
.card-split--rank-b {
  --split-rank-color: 255, 64, 150;
  --split-rank-color-2: 32, 24, 38;
}
.card-split--rank-c {
  --split-rank-color: 255, 186, 45;
  --split-rank-color-2: 255, 214, 92;
}
.card-split--rank-d {
  --split-rank-color: 54, 166, 232;
  --split-rank-color-2: 104, 214, 255;
}
.card-split--rank-e {
  --split-rank-color: 146, 90, 47;
  --split-rank-color-2: 221, 153, 91;
}
.card-split--rank-x, .card-split--rank-v, .card-split--rank-q, .card-split--rank-l, .card-split--rank-k, .card-split--rank-h, .card-split--rank-n {
  --split-rank-color: 139, 0, 255;
  --split-rank-color-2: 255, 255, 255;
}
.card-split__inner {
  width: 800px;
  max-width: 100%;
  overflow: hidden;
}
.card-split__header {
  margin-bottom: 16px;
}
.card-split__info {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 170px;
  gap: 14px;
  padding: 16px;
  background: var(--medium-bg);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.045);
  overflow: hidden;
}
.card-split__info:before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 0 10px 10px 0;
  background: var(--main-purple-color);
  opacity: 0.9;
}
.card-split__info-main {
  position: relative;
  z-index: 1;
  padding-left: 10px;
}
.card-split__eyebrow {
  display: inline-flex;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: 7px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(139, 0, 255, 0.1);
  color: var(--main-purple-color);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.card-split__info-title {
  color: var(--title-color);
  font-size: 19px;
  line-height: 1.25;
  font-weight: 850;
  margin-bottom: 6px;
}
.card-split__info-desc {
  max-width: 530px;
  color: var(--secondary-text-color);
  font-size: 14px;
  line-height: 1.45;
}
.card-split__info-desc a {
  color: var(--main-purple-color);
  text-decoration: none;
}
.card-split__info-desc strong {
  font-weight: 850;
}
.card-split__limit {
  position: relative;
  z-index: 1;
  min-height: 112px;
  padding: 14px 12px;
  border-radius: 16px;
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.055);
}
.card-split__limit-label {
  margin-bottom: 5px;
  color: var(--secondary-text-color);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.card-split__text--counter {
  margin: 0;
  color: var(--main-purple-color);
  font-weight: 900;
}
.card-split__counter {
  font-size: 26px;
  line-height: 1;
}
.card-split__counter span {
  display: inline-block;
  min-width: 18px;
}
.card-split__limit-caption {
  margin-top: 6px;
  color: var(--secondary-text-color);
  font-size: 12px;
  line-height: 1.2;
}
.card-split__wrapper {
  position: relative;
  min-height: 230px;
  background: var(--medium-bg);
  border: 1px solid var(--border-color);
  border-radius: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 28px 0;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.card-split__wrapper:before {
  content: "";
  position: absolute;
  width: 270px;
  height: 270px;
  border-radius: 50%;
  border: 1px solid rgba(var(--split-rank-color), 0.18);
  opacity: 0;
  pointer-events: none;
  animation: cardSplitRotate 18s linear infinite;
  transition: opacity 0.25s ease;
}
.card-split__wrapper:after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(var(--split-rank-color), 0.12);
  filter: blur(38px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.card-split__wrapper--breaking {
  border-color: rgba(var(--split-rank-color), 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 18px 44px rgba(0, 0, 0, 0.08), 0 0 34px rgba(var(--split-rank-color), 0.16);
}
.card-split__wrapper--breaking .card-split__card {
  animation: cardSplitBreak 0.45s ease-in-out;
}
.card-split__wrapper--breaking .card-split__glow {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.15);
}
.card-split--rank-s .card-split__wrapper, .card-split--rank-a .card-split__wrapper, .card-split--rank-p .card-split__wrapper, .card-split--rank-g .card-split__wrapper, .card-split--rank-b .card-split__wrapper, .card-split--rank-c .card-split__wrapper, .card-split--rank-d .card-split__wrapper, .card-split--rank-e .card-split__wrapper, .card-split--rank-x .card-split__wrapper, .card-split--rank-v .card-split__wrapper, .card-split--rank-q .card-split__wrapper, .card-split--rank-l .card-split__wrapper, .card-split--rank-k .card-split__wrapper, .card-split--rank-h .card-split__wrapper, .card-split--rank-n .card-split__wrapper {
  border-color: rgba(var(--split-rank-color), 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 16px 38px rgba(0, 0, 0, 0.06), 0 0 28px rgba(var(--split-rank-color), 0.08);
}
.card-split--rank-s .card-split__wrapper:before, .card-split--rank-s .card-split__wrapper:after, .card-split--rank-a .card-split__wrapper:before, .card-split--rank-a .card-split__wrapper:after, .card-split--rank-p .card-split__wrapper:before, .card-split--rank-p .card-split__wrapper:after, .card-split--rank-g .card-split__wrapper:before, .card-split--rank-g .card-split__wrapper:after, .card-split--rank-b .card-split__wrapper:before, .card-split--rank-b .card-split__wrapper:after, .card-split--rank-c .card-split__wrapper:before, .card-split--rank-c .card-split__wrapper:after, .card-split--rank-d .card-split__wrapper:before, .card-split--rank-d .card-split__wrapper:after, .card-split--rank-e .card-split__wrapper:before, .card-split--rank-e .card-split__wrapper:after, .card-split--rank-x .card-split__wrapper:before, .card-split--rank-x .card-split__wrapper:after, .card-split--rank-v .card-split__wrapper:before, .card-split--rank-v .card-split__wrapper:after, .card-split--rank-q .card-split__wrapper:before, .card-split--rank-q .card-split__wrapper:after, .card-split--rank-l .card-split__wrapper:before, .card-split--rank-l .card-split__wrapper:after, .card-split--rank-k .card-split__wrapper:before, .card-split--rank-k .card-split__wrapper:after, .card-split--rank-h .card-split__wrapper:before, .card-split--rank-h .card-split__wrapper:after, .card-split--rank-n .card-split__wrapper:before, .card-split--rank-n .card-split__wrapper:after {
  opacity: 1;
}
.card-split__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220px;
  height: 220px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(var(--split-rank-color), 0.32), transparent 64%);
  opacity: 0;
  transition: 0.35s ease;
  pointer-events: none;
}
.card-split__slot {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card-split__slot-label {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secondary-text-color);
}
.card-split__card {
  position: relative;
  width: 112px;
  height: 168px;
  cursor: pointer;
  border-radius: 10px;
  transition: 0.25s ease;
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.2));
}
.card-split__card img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
  display: block;
}
.card-split__card:hover {
  transform: translateY(-4px) scale(1.03);
}
.card-split__card:before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(var(--split-rank-color), 0.8), rgba(var(--split-rank-color-2), 0.42), rgba(var(--split-rank-color), 0.8));
  opacity: 0.7;
  z-index: -1;
  filter: blur(10px);
  animation: cardSplitAuraPulse 2.2s ease-in-out infinite;
}
.card-split__card:after {
  content: "×";
  position: absolute;
  right: -9px;
  top: -9px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--red-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(252, 54, 59, 0.35);
}
.card-split__card--selected {
  animation: cardSplitSelect 0.28s ease;
}
.card-split__card--placeholder {
  position: relative;
  width: 112px;
  height: 168px;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 34px;
  color: var(--icons-color);
  background: var(--light-bg);
  border: 2px dashed var(--border-color);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.07);
  z-index: 2;
}
.card-split__card--placeholder:before {
  content: "+";
  font-size: 42px;
  font-weight: 500;
  color: rgba(var(--split-rank-color), 0.42);
}
.card-split__card--placeholder i {
  display: none;
}
.card-split__rewards {
  position: relative;
  background: var(--medium-bg);
  border: 1px solid var(--border-color);
  border-radius: 22px;
  display: none;
  justify-content: center;
  gap: 16px;
  padding: 22px 0;
  margin: 18px 0;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.055);
}
.card-split__rewards--show {
  animation: cardSplitRewards 0.35s ease;
}
.card-split__reward-card {
  position: relative;
  width: 112px;
  height: 168px;
  animation: cardSplitRewardIn 0.45s ease both;
}
.card-split__reward-card img {
  width: 112px;
  height: 168px;
  -o-object-fit: cover;
     object-fit: cover;
  margin-right: 0;
  border-radius: 10px;
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.18), 0 0 18px rgba(var(--split-rank-color), 0.16);
}
.card-split__reward-card:nth-child(2) {
  animation-delay: 0.08s;
}
.card-split__start-btn {
  position: relative;
  border-radius: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  overflow: hidden;
  margin-bottom: 25px !important;
  background: linear-gradient(135deg, rgb(var(--split-rank-color)), rgb(var(--split-rank-color-2))) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-split__start-btn:hover {
  transform: translateY(-1px);
}
.card-split__start-btn:before {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg);
  animation: cardSplitShine 2.8s infinite;
}

body.dark .card-split__info, body.dark .card-split__wrapper, body.dark .card-split__rewards {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
}
body.dark .card-split__info-title {
  color: rgba(255, 255, 255, 0.86);
}
body.dark .card-split__info-desc, body.dark .card-split__limit-label, body.dark .card-split__limit-caption {
  color: rgba(255, 255, 255, 0.58);
}
body.dark .card-split__limit {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
body.dark .card-split__eyebrow {
  background: rgba(139, 0, 255, 0.16);
}
body.dark .card-split__wrapper--breaking {
  border-color: rgba(var(--split-rank-color), 0.3);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), 0 0 42px rgba(var(--split-rank-color), 0.18);
}
body.dark .card-split--rank-s .card-split__wrapper, body.dark .card-split--rank-a .card-split__wrapper, body.dark .card-split--rank-p .card-split__wrapper, body.dark .card-split--rank-g .card-split__wrapper, body.dark .card-split--rank-b .card-split__wrapper, body.dark .card-split--rank-c .card-split__wrapper, body.dark .card-split--rank-d .card-split__wrapper, body.dark .card-split--rank-e .card-split__wrapper, body.dark .card-split--rank-x .card-split__wrapper, body.dark .card-split--rank-v .card-split__wrapper, body.dark .card-split--rank-q .card-split__wrapper, body.dark .card-split--rank-l .card-split__wrapper, body.dark .card-split--rank-k .card-split__wrapper, body.dark .card-split--rank-h .card-split__wrapper, body.dark .card-split--rank-n .card-split__wrapper {
  border-color: rgba(var(--split-rank-color), 0.22);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25), 0 0 34px rgba(var(--split-rank-color), 0.12);
}
body.dark .card-split__card {
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.42)) drop-shadow(0 0 18px rgba(var(--split-rank-color), 0.24));
}
body.dark .card-split__card--placeholder {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.45);
}
body.dark .card-split__card--placeholder:before {
  color: rgba(255, 255, 255, 0.42);
}
body.dark .card-split__slot-label {
  color: rgba(255, 255, 255, 0.58);
}

@keyframes cardSplitSelect {
  0% {
    transform: scale(0.88);
    opacity: 0.3;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes cardSplitBreak {
  0%, 100% {
    transform: translateX(0) scale(1);
    filter: brightness(1);
  }
  25% {
    transform: translateX(-5px) rotate(-2deg) scale(1.04);
    filter: brightness(1.28);
  }
  55% {
    transform: translateX(5px) rotate(2deg) scale(1.08);
    filter: brightness(1.5);
  }
}
@keyframes cardSplitRewards {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes cardSplitRewardIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.9);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
@keyframes cardSplitShine {
  0% {
    left: -80%;
  }
  45%, 100% {
    left: 130%;
  }
}
@keyframes cardSplitRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes cardSplitAuraPulse {
  0%, 100% {
    opacity: 0.42;
    transform: scale(0.96);
  }
  50% {
    opacity: 0.86;
    transform: scale(1.04);
  }
}
@media (max-width: 768px) {
  .card-split__info {
    grid-template-columns: 1fr;
    padding: 14px;
    border-radius: 18px;
  }
  .card-split__info:before {
    top: 12px;
    bottom: 12px;
  }
  .card-split__info-main {
    padding-left: 8px;
  }
  .card-split__info-title {
    font-size: 17px;
  }
  .card-split__info-desc {
    font-size: 13px;
  }
  .card-split__limit {
    min-height: auto;
    padding: 12px;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
  }
  .card-split__limit-label {
    margin-bottom: 0;
  }
  .card-split__limit-caption {
    margin-top: 0;
  }
  .card-split__counter {
    font-size: 22px;
    white-space: nowrap;
  }
  .card-split__wrapper {
    min-height: 210px;
    border-radius: 18px;
  }
  .card-split__card, .card-split__card--placeholder, .card-split__reward-card, .card-split__reward-card img {
    width: 96px;
    height: 144px;
  }
  .card-split__rewards {
    gap: 12px;
    padding: 18px 0;
  }
}
@keyframes cardSplitSelect {
  0% {
    transform: scale(0.88);
    opacity: 0.3;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes cardSplitBreak {
  0%, 100% {
    transform: translateX(0) scale(1);
    filter: brightness(1);
  }
  25% {
    transform: translateX(-5px) rotate(-2deg) scale(1.04);
    filter: brightness(1.28);
  }
  55% {
    transform: translateX(5px) rotate(2deg) scale(1.08);
    filter: brightness(1.5);
  }
}
@keyframes cardSplitRewards {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes cardSplitRewardIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.9);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
@keyframes cardSplitShine {
  0% {
    left: -80%;
  }
  45%, 100% {
    left: 130%;
  }
}
@keyframes cardSplitRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes cardSplitAuraPulse {
  0%, 100% {
    opacity: 0.42;
    transform: scale(0.96);
  }
  50% {
    opacity: 0.86;
    transform: scale(1.04);
  }
}
@media (max-width: 768px) {
  .card-split__text {
    padding: 16px;
    font-size: 14px;
  }
  .card-split__wrapper {
    min-height: 210px;
    border-radius: 18px;
  }
  .card-split__card, .card-split__card--placeholder, .card-split__reward-card, .card-split__reward-card img {
    width: 96px;
    height: 144px;
  }
  .card-split__rewards {
    gap: 12px;
    padding: 18px 0;
  }
}
body.dark .card-split__text, body.dark .card-split__wrapper, body.dark .card-split__rewards {
  background: radial-gradient(circle at top left, rgba(139, 0, 255, 0.18), transparent 36%), rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
}
body.dark .card-split__wrapper {
  background: radial-gradient(circle at center, rgba(139, 0, 255, 0.24), transparent 35%), rgba(255, 255, 255, 0.045);
}
body.dark .card-split__card--placeholder {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(139, 0, 255, 0.35);
  color: rgba(255, 255, 255, 0.45);
}
body.dark .card-split__slot-label, body.dark .card-split__hint {
  color: rgba(255, 255, 255, 0.58);
}

@keyframes cardSplitSelect {
  0% {
    transform: scale(0.88);
    opacity: 0.3;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes cardSplitBreak {
  0%, 100% {
    transform: translateX(0) scale(1);
    filter: brightness(1);
  }
  25% {
    transform: translateX(-5px) rotate(-2deg) scale(1.04);
    filter: brightness(1.35);
  }
  55% {
    transform: translateX(5px) rotate(2deg) scale(1.08);
    filter: brightness(1.6);
  }
}
@keyframes cardSplitRewards {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes cardSplitRewardIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.9);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
@keyframes cardSplitShine {
  0% {
    left: -80%;
  }
  45%, 100% {
    left: 130%;
  }
}
@keyframes cardSplitRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 768px) {
  .card-split__text {
    padding: 16px;
    font-size: 14px;
  }
  .card-split__wrapper {
    min-height: 210px;
    border-radius: 18px;
  }
  .card-split__card, .card-split__card--placeholder, .card-split__reward-card, .card-split__reward-card img {
    width: 96px;
    height: 144px;
  }
  .card-split__rewards {
    gap: 12px;
    padding: 18px 0;
  }
}
.card-show__halloween video {
  position: absolute;
  background-size: cover;
  left: 0;
  top: 0; /* transform: scale(1.1); */
  background-position: center;
  width: 100%;
  height: 400px;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}

.card-show {
  /* если есть аудио — опускаем ниже */
}
.card-show__back {
  position: absolute;
  top: 22px;
  left: 14px;
  z-index: 10;
  background: var(--dark-grey-bg);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  padding: 4px 7px;
  cursor: pointer;
  color: var(--main-text-color);
}
.card-show__back i {
  font-size: 16px;
  margin-top: 2px;
}
.card-show__up-enable {
  position: absolute;
  top: 28px;
  left: 14px;
  z-index: 10;
  width: 30px;
  height: 30px;
  background: var(--dark-grey-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
}
.card-show__up-enable i {
  color: var(--green-color);
}
.card-show__drop-closed {
  position: absolute;
  top: 28px;
  left: 14px;
  z-index: 10;
  width: 30px;
  height: 30px;
  background: var(--dark-grey-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
}
.card-show__drop-closed--auc i {
  color: #980808 !important;
}
.card-show__drop-closed i {
  color: #aeae03;
}
.card-show__has-anim {
  position: absolute;
  top: 28px;
  left: 14px;
  z-index: 10;
  width: 30px;
  height: 30px;
  background: var(--dark-grey-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
}
.card-show__has-anim i {
  color: #d10945;
}
.card-show__audio-play {
  position: absolute;
  top: 28px;
  right: 14px;
  z-index: 100;
  width: 30px;
  height: 30px;
  background: var(--dark-grey-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
}
@media screen and (max-width: 340px) {
  .card-show__audio-play {
    width: 25px;
    height: 25px;
    font-size: 18px;
  }
}
.card-show__owned-count-icon {
  position: absolute;
  top: 28px;
  right: 14px;
  z-index: 2;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  background: var(--dark-grey-bg);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  cursor: default;
  transition: transform 0.2s ease;
}
.card-show__owned-count-icon:hover {
  transform: scale(1.05);
}
.card-show__owned-count-icon span {
  line-height: 1;
}
.card-show__owned-count-icon i {
  font-size: 16px;
}
@media screen and (max-width: 340px) {
  .card-show__owned-count-icon {
    height: 25px;
    font-size: 11px;
  }
  .card-show__owned-count-icon i {
    font-size: 14px;
  }
}
.card-show__audio-play + .card-show__owned-count-icon {
  top: 64px;
}

.manga-cards__mass-controls {
  text-align: center;
  display: none;
}

.card-show__image {
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transition: transform 0.4s;
}

.card-show__up-enable + .card-show__drop-closed {
  top: 68px;
}

.card-show__up-enable + .card-show__has-anim {
  top: 68px;
}

.card-show__up-enable + .card-show__drop-closed + .card-show__has-anim {
  top: 108px;
}

.card-filter-list__card[data-rank=E] .card-filter-list__exp--fill,
.card-filter-list__card[data-rank=E][data-level]::before {
  background: linear-gradient(to right, #512619, #5c2f1f);
}

.card-filter-list__card[data-rank=D] .card-filter-list__exp--fill,
.card-filter-list__card[data-rank=D][data-level]::before {
  background: linear-gradient(to right, #86959e, #225267);
}

.card-filter-list__card[data-rank=C] .card-filter-list__exp--fill,
.card-filter-list__card[data-rank=C][data-level]::before {
  background: linear-gradient(to right, #935d12, #e3ae00);
}

.card-filter-list__card[data-rank=B] .card-filter-list__exp--fill,
.card-filter-list__card[data-rank=B][data-level]::before {
  background: linear-gradient(to right, #44055d, #77229d);
}

.card-filter-list__card[data-rank=G] .card-filter-list__exp--fill,
.card-filter-list__card[data-rank=G][data-level]::before {
  background: linear-gradient(to right, #145406, #298519);
}

.card-filter-list__card[data-rank=P] .card-filter-list__exp--fill,
.card-filter-list__card[data-rank=P][data-level]::before {
  background: linear-gradient(to right, #081567, #102698);
}

.card-filter-list__card[data-rank=A] .card-filter-list__exp--fill,
.card-filter-list__card[data-rank=A][data-level]::before {
  background: linear-gradient(to right, #640909, #a91414);
}

.card-filter-list__card[data-rank=S] .card-filter-list__exp--fill,
.card-filter-list__card[data-rank=S][data-level]::before {
  background: linear-gradient(to right, #e57f95, #be4260);
}

.card-filter-list__card[data-rank=X] .card-filter-list__exp--fill,
.card-filter-list__card[data-rank=X][data-level]::before {
  background: linear-gradient(45deg, #286595, #1c2935, #365b9d);
}

.card-filter-list__card[data-rank=H] .card-filter-list__exp--fill,
.card-filter-list__card[data-rank=H][data-level]::before {
  background: linear-gradient(45deg, #251919, #56151f, #880e1a);
}

.card-filter-list__card[data-rank=N] .card-filter-list__exp--fill,
.card-filter-list__card[data-rank=N][data-level]::before {
  background: linear-gradient(to right, #7c2432, #b91616);
}

.card-filter-list__card[data-rank=V] .card-filter-list__exp--fill,
.card-filter-list__card[data-rank=V][data-level]::before {
  background: linear-gradient(to right, #8b6ef2, #927dfb);
}

.card-filter-list__card[data-rank=L] .card-filter-list__exp--fill,
.card-filter-list__card[data-rank=L][data-level]::before {
  background: linear-gradient(to right, #347dc6, #add4f7);
}

/* Блок: drop-progress */
.drop-progress {
  --muted: #6c7382;
  --stroke: #e9ecf1;
  --accent: #7b5cff;
  --accent-2: #35c1ff;
  --radius: 14px;
  padding: 16px;
  background: var(--light-bg);
  border-radius: var(--radius);
  /* сетка 4 колонок на десктопе */
  /* состояния */
  /*   &__item--locked {
         .drop-progress__img { filter: grayscale(100%) brightness(.85) contrast(.95); }
         .drop-progress__name { opacity: .8; }
         .drop-progress__card::after {
             content: "🔒"; position: absolute; right: 6px; top: 6px; font-size: 13px;
         }
     }*/
  /* адаптив */
}
.drop-progress__section + .drop-progress__section {
  margin-top: 28px;
}
.drop-progress__header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 25px;
}
@media (max-width: 620px) {
  .drop-progress__header {
    flex-direction: column;
    margin-bottom: 15px;
  }
}
.drop-progress__title {
  font-size: 18px;
  font-weight: 700;
}
.drop-progress__hint {
  font-size: 12px;
  color: var(--muted);
}
.drop-progress__grid {
  --cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(120px, 1fr));
  gap: 14px;
}
.drop-progress__item {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 10px;
  background: var(--medium-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  width: 125px;
  margin-right: 15px;
}
.drop-progress__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(22, 23, 26, 0.08);
}
.drop-progress__card {
  position: relative;
  width: 74px;
  height: 102px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}
.drop-progress__img {
  width: 100%;
  height: 100%;
  display: block;
}
.drop-progress__rarity {
  position: absolute;
  left: 6px;
  top: 6px;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  padding: 4px 6px;
  border-radius: 6px;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.drop-progress__rarity--r {
  background: linear-gradient(135deg, #ff9b2f, #ffc94a);
}
.drop-progress__rarity--sr {
  background: linear-gradient(135deg, #7b5cff, #35c1ff);
}
.drop-progress__rarity--ssr {
  background: linear-gradient(135deg, #ff4da0, #a64dff);
}
.drop-progress__rarity--sssr {
  background: linear-gradient(135deg, #6dcb81, #35cb97);
}
.drop-progress__meta {
  width: 100%;
  margin-top: 10px;
  text-align: center;
}
.drop-progress__name {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}
.drop-progress__packs {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}
.drop-progress__packs-value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text);
}
.drop-progress__bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: #eef1f6;
}
.drop-progress__bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: inherit;
  transition: width 0.35s ease;
}
@media (max-width: 620px) {
  .drop-progress__grid {
    --cols: 2;
  }
}

/* badge рядом с названием */
.manga-cards__info .manga-cards__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-weight: 800;
  font-size: 12px;
  color: #4f46e5;
  background: #eef2ff;
  border: 1px solid #e1e7ff;
  vertical-align: middle;
}

/* контейнер для наград */
.manga-cards__info .manga-cards__rewards {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  justify-content: center;
}

/* чип награды (алмазы/пыль) */
.manga-cards__info .manga-cards__reward {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 9999px;
  font-weight: 800;
  font-size: 12px;
  background: #f6f7fb;
  border: 1px solid #e6e9f2;
  color: #0f172a;
}

/* (опционально) если разведёшь на разные классы */
.manga-cards__info .manga-cards__reward--diamond {
  color: #fff;
  background: linear-gradient(90deg, #7c3aed, #22d3ee);
  border-color: transparent;
}

.manga-cards__info .manga-cards__reward--dust {
  background: #eef2ff;
  border-color: #e1e7ff;
  color: #475569;
}

.lock-card-modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lock-card-modal-btn i {
  margin-right: 5px;
}

.card-show__container .card-anim-frame {
  z-index: 10;
}

.card-anim-frame {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.manga-cards__collection-image {
  position: relative;
}

.showcase__item video {
  width: 100%;
  height: 98%;
  border-radius: var(--main-border-radius);
  cursor: pointer;
  z-index: 2;
  position: relative;
}

.manga-cards__dup-count {
  position: absolute;
  top: 3px;
  left: 3px;
  background: #139811;
  border-radius: 50%;
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  z-index: 5;
  color: white;
}

.card-offer-panel {
  display: flex;
  justify-content: center;
  margin: 18px 0 22px;
}

.card-offer-panel__inner {
  width: 100%;
  max-width: 980px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.03);
}

body.dark .card-offer-panel__inner,
.theme-dark .card-offer-panel__inner {
  background: rgba(255, 255, 255, 0.06);
}

.card-offer-panel__left {
  flex: 1;
  min-width: 280px;
}

.card-offer-panel__status {
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-start;
}

.card-offer-panel__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  opacity: 0.85;
  background: rgba(0, 0, 0, 0.04);
}

body.dark .card-offer-panel__badge,
.theme-dark .card-offer-panel__badge {
  background: rgba(255, 255, 255, 0.08);
}

.card-offer-panel__badge--active {
  background: rgba(117, 71, 255, 0.14);
  opacity: 1;
}

.card-offer-panel__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #5ad06a;
  box-shadow: 0 0 0 3px rgba(90, 208, 106, 0.12);
}

.card-offer-panel__hint {
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.6;
}

.card-offer-panel__right {
  min-width: 240px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.card-offer-panel__filters-title {
  font-size: 12px;
  opacity: 0.6;
}

.card-offer-panel__filters {
  display: flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
}

body.dark .card-offer-panel__filters,
.theme-dark .card-offer-panel__filters {
  background: rgba(255, 255, 255, 0.08);
}

.card-offer-panel__filter {
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
  opacity: 0.8;
  text-decoration: none;
  transition: 0.15s ease;
}

.card-offer-panel__filter:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.card-offer-panel__filter--active {
  opacity: 1;
  background: rgba(117, 71, 255, 0.16);
}

/* Mobile */
@media (max-width: 760px) {
  .card-offer-panel__inner {
    flex-direction: column;
    align-items: stretch;
  }
  .card-offer-panel__right {
    align-items: flex-start;
  }
  .card-offer-panel__filters {
    width: 100%;
    justify-content: space-between;
  }
  .card-offer-panel__filter {
    flex: 1;
  }
}
/* Плавное появление бейджа */
.card-offer-panel__badge {
  transform: scale(0.98);
  opacity: 0.92;
}

.card-offer-panel__badge--pop {
  animation: cardOfferPop 0.22s ease-out both;
}

@keyframes cardOfferPop {
  from {
    transform: scale(0.92);
    opacity: 0.2;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
/* Подсветка новой строки в списке */
.profile__friends-item--flash {
  animation: cardOfferFlash 0.6s ease-out both;
}

@keyframes cardOfferFlash {
  0% {
    box-shadow: 0 0 0 0 rgba(117, 71, 255, 0);
    transform: translateY(-2px);
  }
  40% {
    box-shadow: 0 0 0 6px rgba(117, 71, 255, 0.14);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(117, 71, 255, 0);
    transform: translateY(0);
  }
}
.card-manga-list__add-btn--with-clear {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.card-manga-list__icons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-manga-list__clear-mini {
  border: 0;
  background: var(--border-color);
  border-radius: 12px;
  padding: 2px 8px;
  cursor: pointer;
  color: var(--main-text-color);
}

.card-manga-list__clear-mini:hover {
  background: rgba(255, 90, 90, 0.1);
  color: #ff5a5a;
}

.lootbox__card {
  position: relative;
}

.lootbox__card-count {
  position: absolute;
  top: 6px;
  right: 15px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.65);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  border-radius: 8px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  z-index: 5;
}
.lootbox__card-count i {
  font-size: 16px;
}

.drop-progress__card video {
  width: 100%;
  height: 100%;
}

.lootbox__card-count-text {
  line-height: 1;
}

.lootbox__card {
  position: relative;
}

.lootbox__card-meta {
  position: absolute;
  top: 5px;
  right: 6px;
  z-index: 3;
  pointer-events: none;
}
.lootbox__card-meta span {
  display: flex;
  align-items: center;
}
.lootbox__card-meta .icon {
  font-size: 14px;
  margin-right: 5px;
}

.lootbox__card-pill {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
  white-space: nowrap;
}

.lootbox__card-sep {
  opacity: 0.55;
  margin: 0 4px; /* маленькое расстояние */
}

/* мобилки: ещё компактнее */
@media (max-width: 480px) {
  .lootbox__card-meta {
    top: 5px;
    right: 5px;
  }
  .lootbox__card-pill {
    font-size: 9px;
    padding: 3px 5px;
  }
  .lootbox__card-sep {
    margin: 0 3px;
  }
}
.manga-cards__copy {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: 14px auto 16px;
  padding: 7px 12px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--medium-bg);
  border: 1px solid var(--border-color);
  color: var(--main-text-color);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.manga-cards__copy::before {
  display: none;
}
.manga-cards__copy:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}
.manga-cards__copy-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.manga-cards__copy-label {
  font-size: 9px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--secondary-text-color);
  white-space: nowrap;
}
.manga-cards__copy-title {
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  color: var(--secondary-text-color);
  white-space: nowrap;
}
.manga-cards__copy-number {
  font-size: 18px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--title-color);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.manga-cards__copy-num {
  display: inline-block;
}
.manga-cards__copy--animated {
  animation: mangaCardsCopyAppear 0.45s ease;
}
.manga-cards__copy--animated .manga-cards__copy-num {
  min-width: 78px;
}
.manga-cards__copy--revealed {
  animation: mangaCardsCopyReveal 0.7s ease;
}
.manga-cards__copy--common {
  border-color: var(--border-color);
}
.manga-cards__copy--origin {
  border-color: rgba(255, 179, 64, 0.45);
}
.manga-cards__copy--origin .manga-cards__copy-title {
  color: #b87400;
}
.manga-cards__copy--early {
  border-color: rgba(119, 44, 232, 0.25);
}
.manga-cards__copy--early .manga-cards__copy-title {
  color: var(--main-purple-color);
}
.manga-cards__copy--rare {
  border-color: rgba(60, 135, 255, 0.25);
}
.manga-cards__copy--rare .manga-cards__copy-title {
  color: #2f6fd6;
}
.manga-cards__copy--mirror {
  border-color: rgba(140, 140, 255, 0.35);
}
.manga-cards__copy--mirror .manga-cards__copy-title {
  color: #7a74ff;
}
.manga-cards__copy--chain {
  border-color: rgba(0, 153, 120, 0.35);
}
.manga-cards__copy--chain .manga-cards__copy-title {
  color: #009978;
}
.manga-cards__copy--reverse {
  border-color: rgba(120, 120, 120, 0.35);
}
.manga-cards__copy--reverse .manga-cards__copy-title {
  color: #666;
}
.manga-cards__copy--palindrome {
  border-color: rgba(200, 100, 255, 0.35);
}
.manga-cards__copy--palindrome .manga-cards__copy-title {
  color: #b45cff;
}
.manga-cards__copy--lucky {
  border-color: rgba(255, 195, 45, 0.45);
}
.manga-cards__copy--lucky .manga-cards__copy-title {
  color: #e6a500;
}
.manga-cards__copy--lost {
  border-color: rgba(255, 90, 90, 0.35);
}
.manga-cards__copy--lost .manga-cards__copy-title {
  color: #ff5a5a;
}
.manga-cards__copy--milestone {
  border-color: rgba(255, 170, 50, 0.45);
}
.manga-cards__copy--milestone .manga-cards__copy-title {
  color: #c98200;
}
@media screen and (max-width: 420px) {
  .manga-cards__copy {
    flex-direction: column;
    gap: 5px;
    padding: 8px 12px;
    margin: 12px auto 14px;
  }
  .manga-cards__copy-top {
    gap: 6px;
  }
  .manga-cards__copy-number {
    font-size: 17px;
  }
  .manga-cards__copy-title {
    font-size: 10px;
  }
}

body.dark .manga-cards__copy {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.82);
}
body.dark .manga-cards__copy:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}
body.dark .manga-cards__copy-number {
  color: #fff;
}
body.dark .manga-cards__copy-label, body.dark .manga-cards__copy-title {
  color: rgba(255, 255, 255, 0.55);
}
body.dark .manga-cards__copy--origin {
  border-color: rgba(255, 179, 64, 0.42);
}
body.dark .manga-cards__copy--origin .manga-cards__copy-title {
  color: #ffbd59;
}
body.dark .manga-cards__copy--early {
  border-color: rgba(185, 140, 255, 0.32);
}
body.dark .manga-cards__copy--early .manga-cards__copy-title {
  color: #b98cff;
}
body.dark .manga-cards__copy--rare {
  border-color: rgba(117, 170, 255, 0.32);
}
body.dark .manga-cards__copy--rare .manga-cards__copy-title {
  color: #75aaff;
}
body.dark .manga-cards__copy--mirror {
  border-color: rgba(154, 149, 255, 0.36);
}
body.dark .manga-cards__copy--mirror .manga-cards__copy-title {
  color: #9a95ff;
}
body.dark .manga-cards__copy--chain {
  border-color: rgba(52, 210, 163, 0.34);
}
body.dark .manga-cards__copy--chain .manga-cards__copy-title {
  color: #34d2a3;
}
body.dark .manga-cards__copy--reverse {
  border-color: rgba(170, 170, 170, 0.3);
}
body.dark .manga-cards__copy--reverse .manga-cards__copy-title {
  color: #aaa;
}
body.dark .manga-cards__copy--palindrome {
  border-color: rgba(207, 143, 255, 0.35);
}
body.dark .manga-cards__copy--palindrome .manga-cards__copy-title {
  color: #cf8fff;
}
body.dark .manga-cards__copy--lucky {
  border-color: rgba(255, 211, 106, 0.42);
}
body.dark .manga-cards__copy--lucky .manga-cards__copy-title {
  color: #ffd36a;
}
body.dark .manga-cards__copy--lost {
  border-color: rgba(255, 122, 122, 0.34);
}
body.dark .manga-cards__copy--lost .manga-cards__copy-title {
  color: #ff7a7a;
}
body.dark .manga-cards__copy--milestone {
  border-color: rgba(255, 193, 77, 0.42);
}
body.dark .manga-cards__copy--milestone .manga-cards__copy-title {
  color: #ffc14d;
}

@keyframes mangaCardsCopyAppear {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes mangaCardsCopyReveal {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  38% {
    transform: scale(1.06);
    filter: brightness(1.35);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}
.card-split__reward-card {
  position: relative;
  display: inline-block;
}
.card-split__reward-card img {
  display: block;
}
.card-split__reward-card .lock-card-btn {
  position: absolute;
  top: -4px;
  right: 6px;
  z-index: 2;
  font-size: 13px;
  cursor: pointer;
}

.card-toggle-comments-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--main-border-radius);
  background: var(--medium-bg);
  color: var(--main-text-color);
  font-size: 13px;
  cursor: pointer;
  border: 1px solid var(--border-color);
  transition: all 0.2s ease;
}
.card-toggle-comments-btn i {
  font-size: 12px;
  color: var(--icons-color);
}
.card-toggle-comments-btn:hover {
  background: rgba(139, 0, 255, 0.06);
  border-color: rgba(139, 0, 255, 0.25);
  color: var(--main-purple-color);
}
.card-toggle-comments-btn:hover i {
  color: var(--main-purple-color);
}
.card-toggle-comments-btn--closed {
  background: rgba(252, 54, 59, 0.08);
  border-color: rgba(252, 54, 59, 0.2);
  color: var(--red-color);
}
.card-toggle-comments-btn--closed i {
  color: var(--red-color);
}
.card-toggle-comments-btn--closed:hover {
  background: rgba(252, 54, 59, 0.15);
}

.card-show__owner {
  position: relative;
  overflow: visible;
}
.card-show__copy-corner {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 6;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(139, 0, 255, 0.22);
  color: var(--main-purple-color);
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  box-shadow: 0 0 0 3px rgba(139, 0, 255, 0.06);
  animation: cardShowCopySoftGlow 2.4s ease-in-out infinite;
  pointer-events: none;
}
.card-show__copy-corner.manga-cards__copy--origin {
  background: rgba(255, 249, 236, 0.98);
  border-color: rgba(218, 161, 24, 0.35);
  color: #a96d00;
  box-shadow: 0 0 0 3px rgba(218, 161, 24, 0.09);
}
.card-show__copy-corner.manga-cards__copy--early {
  background: rgba(248, 244, 255, 0.98);
  border-color: rgba(139, 0, 255, 0.3);
  color: var(--main-purple-color);
}
.card-show__copy-corner.manga-cards__copy--rare {
  background: rgba(241, 247, 255, 0.98);
  border-color: rgba(47, 111, 214, 0.28);
  color: #2f6fd6;
  box-shadow: 0 0 0 3px rgba(47, 111, 214, 0.07);
}
.card-show__copy-corner.manga-cards__copy--mirror, .card-show__copy-corner.manga-cards__copy--palindrome {
  background: rgba(246, 245, 255, 0.98);
  border-color: rgba(122, 116, 255, 0.3);
  color: #6b63e8;
  box-shadow: 0 0 0 3px rgba(122, 116, 255, 0.07);
}
.card-show__copy-corner.manga-cards__copy--chain {
  background: rgba(240, 253, 249, 0.98);
  border-color: rgba(0, 153, 120, 0.25);
  color: #008f70;
  box-shadow: 0 0 0 3px rgba(0, 153, 120, 0.07);
}
.card-show__copy-corner.manga-cards__copy--reverse {
  background: rgba(248, 248, 248, 0.98);
  border-color: rgba(120, 120, 120, 0.24);
  color: #666;
  box-shadow: 0 0 0 3px rgba(120, 120, 120, 0.06);
}
.card-show__copy-corner.manga-cards__copy--lucky {
  background: rgba(247, 255, 245, 0.98);
  border-color: rgba(0, 153, 85, 0.25);
  color: #00884c;
  box-shadow: 0 0 0 3px rgba(0, 153, 85, 0.07);
}
.card-show__copy-corner.manga-cards__copy--milestone {
  background: rgba(255, 249, 236, 0.98);
  border-color: rgba(218, 161, 24, 0.32);
  color: #a96d00;
  box-shadow: 0 0 0 3px rgba(218, 161, 24, 0.08);
}
.card-show__copy-corner.manga-cards__copy--lost {
  background: rgba(255, 246, 246, 0.98);
  border-color: rgba(255, 90, 90, 0.25);
  color: #d94545;
  box-shadow: 0 0 0 3px rgba(255, 90, 90, 0.07);
}

body.dark .card-show__owner:has(.card-show__copy-corner) {
  border-color: rgba(185, 140, 255, 0.22);
}
body.dark .card-show__copy-corner {
  background: rgba(31, 29, 45, 0.96);
  border-color: rgba(185, 140, 255, 0.26);
  color: #c7a7ff;
  box-shadow: 0 0 0 3px rgba(185, 140, 255, 0.08);
}
body.dark .card-show__copy-corner.manga-cards__copy--origin, body.dark .card-show__copy-corner.manga-cards__copy--milestone {
  background: rgba(45, 37, 24, 0.96);
  border-color: rgba(255, 193, 77, 0.3);
  color: #ffd36a;
  box-shadow: 0 0 0 3px rgba(255, 193, 77, 0.08);
}
body.dark .card-show__copy-corner.manga-cards__copy--rare {
  background: rgba(25, 34, 52, 0.96);
  border-color: rgba(117, 170, 255, 0.28);
  color: #8fbaff;
}
body.dark .card-show__copy-corner.manga-cards__copy--mirror, body.dark .card-show__copy-corner.manga-cards__copy--palindrome {
  background: rgba(32, 31, 55, 0.96);
  border-color: rgba(154, 149, 255, 0.3);
  color: #aaa4ff;
}
body.dark .card-show__copy-corner.manga-cards__copy--chain {
  background: rgba(21, 45, 39, 0.96);
  border-color: rgba(52, 210, 163, 0.28);
  color: #5be0b8;
}
body.dark .card-show__copy-corner.manga-cards__copy--reverse {
  background: rgba(38, 38, 42, 0.96);
  border-color: rgba(170, 170, 170, 0.24);
  color: #cfcfcf;
}
body.dark .card-show__copy-corner.manga-cards__copy--lucky {
  background: rgba(22, 44, 31, 0.96);
  border-color: rgba(80, 220, 140, 0.28);
  color: #79e7a6;
}
body.dark .card-show__copy-corner.manga-cards__copy--lost {
  background: rgba(52, 25, 28, 0.96);
  border-color: rgba(255, 122, 122, 0.28);
  color: #ff9b9b;
}

@keyframes cardShowCopySoftGlow {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.06);
    filter: brightness(1.08);
  }
}
.card-filter-list__card {
  position: relative;
}
.card-filter-list__copy-dot {
  position: absolute;
  left: 6px;
  bottom: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  z-index: 7;
  opacity: 0.9;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.card-filter-list__copy-dot--origin {
  background: #ffb84c;
  box-shadow: 0 0 6px rgba(255, 184, 76, 0.6);
}
.card-filter-list__copy-dot--early {
  background: #8b00ff;
}
.card-filter-list__copy-dot--mirror {
  background: #7a74ff;
}
.card-filter-list__copy-dot--palindrome {
  background: #b45cff;
}
.card-filter-list__copy-dot--lucky {
  background: #00c853;
  box-shadow: 0 0 6px rgba(0, 200, 83, 0.5);
}
.card-filter-list__copy-dot--milestone {
  background: #ff9800;
}

body.dark .card-filter-list__copy-dot {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.trade__main-item {
  position: relative;
}

.card-copy-number {
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 8;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

body.dark .card-copy-number {
  color: rgba(255, 255, 255, 0.95);
}

.card-copy-number {
  opacity: 0.8;
}
.trade__main-item:hover .card-copy-number {
  opacity: 1;
}

.trade__main-item {
  position: relative;
}

.card-copy-ribbon {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(20, 20, 28, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  opacity: 0.85;
  pointer-events: none;
  transition: all 0.2s ease;
}

.trade__main-item:hover .card-copy-ribbon {
  opacity: 1;
  transform: translateX(-50%) translateY(-1px);
}

.card-copy-ribbon--origin {
  background: rgba(255, 190, 90, 0.8);
  color: #1f1600;
}

.card-copy-ribbon--early {
  background: rgba(139, 0, 255, 0.18);
  border-color: rgba(139, 0, 255, 0.3);
  color: #d0b3ff;
}

.card-copy-ribbon--mirror {
  background: rgba(120, 120, 255, 0.18);
  border-color: rgba(120, 120, 255, 0.3);
  color: #c6c2ff;
}

.card-copy-ribbon--palindrome {
  background: rgba(180, 90, 255, 0.18);
  border-color: rgba(180, 90, 255, 0.3);
  color: #debaff;
}

.card-copy-ribbon--lucky {
  background: rgba(0, 200, 100, 0.18);
  border-color: rgba(0, 200, 100, 0.3);
  color: #8df0c2;
}

.card-copy-ribbon--milestone {
  background: rgba(255, 170, 60, 0.18);
  border-color: rgba(255, 170, 60, 0.3);
  color: #ffd8a0;
}

body.dark .card-copy-ribbon {
  background: rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.08);
}

.card-users-sort {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 14px 0 25px;
  flex-wrap: wrap;
}
.card-users-sort__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--secondary-text-color);
}
.card-users-sort__items {
  display: flex;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: var(--medium-bg);
}
.card-users-sort__item {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--secondary-text-color);
  text-decoration: none;
  transition: 0.18s ease;
}
.card-users-sort__item:hover {
  color: var(--main-purple-color);
  background: rgba(139, 0, 255, 0.06);
}
.card-users-sort__item--active {
  color: #fff;
  background: var(--purple-btn-bg);
  box-shadow: 0 4px 10px rgba(119, 44, 232, 0.25);
}

/* DARK THEME */
body.dark .card-users-sort__items {
  background: rgba(255, 255, 255, 0.04);
}
body.dark .card-users-sort__item {
  color: rgba(255, 255, 255, 0.7);
}
body.dark .card-users-sort__item:hover {
  color: #caa6ff;
  background: rgba(139, 0, 255, 0.15);
}
body.dark .card-users-sort__item--active {
  background: linear-gradient(135deg, #8b00ff, #5a1dbf);
  box-shadow: 0 4px 12px rgba(139, 0, 255, 0.35);
}

.card-upgrade__inventory-item {
  position: relative;
}

.card-upgrade__inventory-exp-parent {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: -7px;
  z-index: 2;
}

.card-upgrade__inventory-exp {
  width: 100%;
  height: 4px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.card-upgrade__inventory-exp-fill {
  height: 100%;
  border-radius: inherit;
}

.card-upgrade__inventory-item[data-level]:not([data-level="0"][data-exp="0"])::before {
  content: attr(data-level);
  position: absolute;
  bottom: -12px;
  left: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 10px;
  font-weight: 600;
  border: 1px solid var(--light-bg);
  z-index: 3;
}

.card-upgrade__inventory-item[data-rank=E] .card-upgrade__inventory-exp-fill,
.card-upgrade__inventory-item[data-rank=E][data-level]::before {
  background: linear-gradient(to right, #512619, #5c2f1f);
}

.card-upgrade__inventory-item[data-rank=D] .card-upgrade__inventory-exp-fill,
.card-upgrade__inventory-item[data-rank=D][data-level]::before {
  background: linear-gradient(to right, #86959e, #225267);
}

.card-upgrade__inventory-item[data-rank=C] .card-upgrade__inventory-exp-fill,
.card-upgrade__inventory-item[data-rank=C][data-level]::before {
  background: linear-gradient(to right, #935d12, #e3ae00);
}

.card-upgrade__inventory-item[data-rank=B] .card-upgrade__inventory-exp-fill,
.card-upgrade__inventory-item[data-rank=B][data-level]::before {
  background: linear-gradient(to right, #44055d, #77229d);
}

.card-upgrade__inventory-item[data-rank=G] .card-upgrade__inventory-exp-fill,
.card-upgrade__inventory-item[data-rank=G][data-level]::before {
  background: linear-gradient(to right, #145406, #298519);
}

.card-upgrade__inventory-item[data-rank=P] .card-upgrade__inventory-exp-fill,
.card-upgrade__inventory-item[data-rank=P][data-level]::before {
  background: linear-gradient(to right, #081567, #102698);
}

.card-upgrade__inventory-item[data-rank=A] .card-upgrade__inventory-exp-fill,
.card-upgrade__inventory-item[data-rank=A][data-level]::before {
  background: linear-gradient(to right, #640909, #a91414);
}

.card-upgrade__inventory-item[data-rank=S] .card-upgrade__inventory-exp-fill,
.card-upgrade__inventory-item[data-rank=S][data-level]::before {
  background: linear-gradient(to right, #e57f95, #be4260);
}

.card-upgrade__inventory-item[data-rank=X] .card-upgrade__inventory-exp-fill,
.card-upgrade__inventory-item[data-rank=X][data-level]::before {
  background: linear-gradient(45deg, #286595, #1c2935, #365b9d);
}

.card-upgrade__inventory-item[data-rank=H] .card-upgrade__inventory-exp-fill,
.card-upgrade__inventory-item[data-rank=H][data-level]::before {
  background: linear-gradient(45deg, #251919, #56151f, #880e1a);
}

.card-upgrade__inventory-item[data-rank=N] .card-upgrade__inventory-exp-fill,
.card-upgrade__inventory-item[data-rank=N][data-level]::before {
  background: linear-gradient(to right, #7c2432, #b91616);
}

.card-upgrade__inventory-item[data-rank=V] .card-upgrade__inventory-exp-fill,
.card-upgrade__inventory-item[data-rank=V][data-level]::before {
  background: linear-gradient(to right, #8b6ef2, #927dfb);
}

.card-upgrade__inventory-item[data-rank=L] .card-upgrade__inventory-exp-fill,
.card-upgrade__inventory-item[data-rank=L][data-level]::before {
  background: linear-gradient(to right, #347dc6, #add4f7);
}

.card-show__social {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.card-show__social-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.card-show__social-action {
  min-width: 42px;
  height: 42px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--light-bg, #fff);
  color: var(--main-text-color);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  transition: 0.22s ease;
}
.card-show__social-action:hover {
  transform: translateY(-2px);
  border-color: rgba(119, 44, 232, 0.35);
  color: var(--purple-btn-bg);
  box-shadow: 0 10px 24px rgba(119, 44, 232, 0.12);
}
.card-show__tag-list {
  max-width: 720px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.card-show__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.035);
  color: var(--main-text-color);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  transition: 0.2s ease;
}
.card-show__tag:hover {
  background: rgba(119, 44, 232, 0.09);
  color: var(--purple-btn-bg);
}
.card-show__tag-delete {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: rgba(252, 54, 59, 0.12);
  color: #fc363b;
  cursor: pointer;
}

.card-show__tag--hidden {
  display: none;
}

.card-show__social-action.modal-card-fav span {
  font-size: 14px;
}

.card-love {
  position: relative;
  min-width: 245px;
  height: 48px;
  display: inline-grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 13px;
  padding: 0 16px 0 18px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 48, 56, 0.11), rgba(119, 44, 232, 0.09)), var(--light-bg, #fff);
  color: var(--main-text-color);
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
  transition: 0.22s ease;
}
.card-love::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-120%);
  transition: 0.55s ease;
}
.card-love:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(255, 48, 56, 0.13);
}
.card-love:hover::before {
  transform: translateX(120%);
}
.card-love__label {
  position: relative;
  font-size: 13px;
  font-weight: 700;
  color: var(--main-text-color);
  text-align: left;
  white-space: nowrap;
}
.card-love__hearts {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3px;
}
.card-love__heart {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 48, 56, 0.22);
  transition: 0.22s ease;
}
.card-love__heart svg {
  width: 100%;
  height: 100%;
  display: block;
}
.card-love__heart--active {
  color: #ff3040;
  filter: drop-shadow(0 0 8px rgba(255, 48, 56, 0.45));
}
.card-love__heart--disabled {
  opacity: 0.2;
  filter: grayscale(1);
}
.card-love__heart--pop {
  animation: card-love-pop 0.48s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.card-love__count {
  position: relative;
  min-width: 34px;
  height: 28px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--light-bg);
  color: #ff3038;
  font-size: 13px;
  font-weight: 900;
}
.card-love--shake {
  animation: card-love-shake 0.38s ease;
}

@keyframes card-love-pop {
  0% {
    transform: scale(0.6) rotate(-14deg);
  }
  55% {
    transform: scale(1.45) rotate(9deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}
@keyframes card-love-shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-3px);
  }
  55% {
    transform: translateX(3px);
  }
  75% {
    transform: translateX(-1px);
  }
}
@media (max-width: 640px) {
  .card-love {
    min-width: 220px;
    height: 46px;
    grid-template-columns: auto auto auto;
  }
  .card-love__label {
    display: none;
  }
}
.card-love {
  width: auto;
  min-width: 245px;
  max-width: 100%;
}

.card-love__count {
  min-width: 34px;
  height: 28px;
  padding: 0 10px;
}

@media (max-width: 640px) {
  .card-love {
    min-width: 0;
    width: auto;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 14px;
    border-radius: 999px;
  }
  .card-love__label {
    display: none;
  }
  .card-love__hearts {
    gap: 6px;
  }
  .card-love__heart {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
  }
  .card-love__count {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 14px;
    line-height: 1;
    background: var(--light-bg);
  }
}
.card-love-wrap {
  position: relative;
  display: inline-flex;
  justify-content: center;
}

.card-love-gift {
  --gift-bg: rgba(255, 255, 255, .96);
  --gift-card: rgba(255, 255, 255, .62);
  --gift-text: #202026;
  --gift-muted: rgba(32, 32, 38, .62);
  --gift-border: rgba(32, 32, 38, .1);
  --gift-line: rgba(32, 32, 38, .1);
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  z-index: 1000;
  width: 420px;
  max-width: calc(100vw - 24px);
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 30px;
  background: radial-gradient(circle at 8% 0%, rgba(255, 48, 64, 0.14), transparent 34%), radial-gradient(circle at 96% 0%, rgba(138, 61, 244, 0.14), transparent 32%), var(--gift-bg);
  color: var(--gift-text);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.18);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 10px) scale(0.97);
  transition: 0.22s ease;
}
.card-love-gift--show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}
.card-love-gift__close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(32, 32, 38, 0.055);
  color: var(--gift-text);
  cursor: pointer;
  transition: 0.18s ease;
}
.card-love-gift__close::before, .card-love-gift__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
}
.card-love-gift__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.card-love-gift__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.card-love-gift__close:hover {
  transform: rotate(90deg);
  background: rgba(32, 32, 38, 0.09);
}
.card-love-gift__head {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 16px;
  padding-right: 52px;
}
.card-love-gift__icon {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: linear-gradient(135deg, #ff3154, #8b3df4);
  color: #fff;
  box-shadow: 0 14px 30px rgba(255, 49, 84, 0.22);
}
.card-love-gift__icon svg {
  width: 32px;
  height: 32px;
}
.card-love-gift__title {
  font-size: 22px;
  line-height: 1.15;
  font-weight: 900;
  margin-bottom: 8px;
}
.card-love-gift__text {
  max-width: 300px;
  color: var(--gift-muted);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 600;
}
.card-love-gift__plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}
.card-love-gift__plan {
  min-width: 0;
  height: 112px;
  padding: 12px 8px;
  border: 1px solid var(--gift-border);
  border-radius: 18px;
  background: var(--gift-card);
  color: var(--gift-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  cursor: pointer;
  transition: 0.18s ease;
}
.card-love-gift__plan:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 49, 84, 0.26);
  box-shadow: 0 14px 28px rgba(138, 61, 244, 0.11);
}
.card-love-gift__plan:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.card-love-gift__plan-heart {
  width: 28px;
  height: 28px;
  color: #ff3154;
}
.card-love-gift__plan-title {
  font-size: 15px;
  line-height: 1;
  font-weight: 900;
}
.card-love-gift__plan-price {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gift-muted);
  font-size: 15px;
  font-weight: 900;
}
.card-love-gift__plan-price svg {
  width: 16px;
  height: 16px;
  color: #9b51ff;
}
.card-love-gift__or {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 22px 0 16px;
  color: var(--gift-muted);
  font-size: 13px;
  font-weight: 800;
}
.card-love-gift__or span {
  height: 1px;
  background: var(--gift-line);
}
.card-love-gift__custom {
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: 12px;
}
.card-love-gift__input {
  height: 48px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border: 1px solid var(--gift-border);
  border-radius: 18px;
  background: var(--gift-card);
  color: #9b51ff;
}
.card-love-gift__input svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
.card-love-gift__input input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--gift-text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
}
.card-love-gift__input input::-moz-placeholder {
  color: var(--gift-muted);
}
.card-love-gift__input input::placeholder {
  color: var(--gift-muted);
}
.card-love-gift__send {
  height: 48px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, #ff3154, #8b3df4);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(138, 61, 244, 0.2);
  transition: 0.18s ease;
}
.card-love-gift__send:hover {
  transform: translateY(-2px);
}
.card-love-gift__send:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.card-love-gift__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  color: var(--gift-muted);
  font-size: 13px;
  font-weight: 700;
}
.card-love-gift__note svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

body.dark .card-love-gift,
html.dark .card-love-gift,
.theme-dark .card-love-gift,
body[data-theme=dark] .card-love-gift {
  --gift-bg: rgba(24, 27, 32, .96);
  --gift-card: rgba(255, 255, 255, .045);
  --gift-text: #f7f4ff;
  --gift-muted: rgba(247, 244, 255, .58);
  --gift-border: rgba(255, 255, 255, .1);
  --gift-line: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
}
body.dark .card-love-gift__close,
html.dark .card-love-gift__close,
.theme-dark .card-love-gift__close,
body[data-theme=dark] .card-love-gift__close {
  background: rgba(255, 255, 255, 0.07);
}
body.dark .card-love-gift__close:hover,
html.dark .card-love-gift__close:hover,
.theme-dark .card-love-gift__close:hover,
body[data-theme=dark] .card-love-gift__close:hover {
  background: rgba(255, 255, 255, 0.12);
}
body.dark .card-love-gift__plan:hover,
html.dark .card-love-gift__plan:hover,
.theme-dark .card-love-gift__plan:hover,
body[data-theme=dark] .card-love-gift__plan:hover {
  border-color: rgba(255, 49, 84, 0.35);
  background: rgba(255, 255, 255, 0.075);
}

@media (max-width: 640px) {
  .card-love-wrap {
    position: static;
  }
  .card-love-gift {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    top: auto;
    width: auto;
    max-width: none;
    padding: 18px;
    border-radius: 26px;
    transform: translateY(18px) scale(0.98);
  }
  .card-love-gift--show {
    transform: translateY(0) scale(1);
  }
  .card-love-gift::before {
    display: none;
  }
  .card-love-gift__close {
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
  }
  .card-love-gift__head {
    grid-template-columns: 48px 1fr;
    gap: 13px;
    padding-right: 42px;
  }
  .card-love-gift__icon {
    width: 48px;
    height: 48px;
    border-radius: 17px;
  }
  .card-love-gift__icon svg {
    width: 27px;
    height: 27px;
  }
  .card-love-gift__title {
    font-size: 19px;
    margin-bottom: 6px;
  }
  .card-love-gift__text {
    font-size: 13px;
    line-height: 1.4;
  }
  .card-love-gift__plans {
    margin-top: 18px;
    gap: 8px;
  }
  .card-love-gift__plan {
    height: 92px;
    border-radius: 17px;
    gap: 6px;
  }
  .card-love-gift__plan-heart {
    width: 23px;
    height: 23px;
  }
  .card-love-gift__plan-title {
    font-size: 13px;
  }
  .card-love-gift__plan-price {
    font-size: 13px;
  }
  .card-love-gift__plan-price svg {
    width: 14px;
    height: 14px;
  }
  .card-love-gift__or {
    margin: 17px 0 12px;
  }
  .card-love-gift__custom {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .card-love-gift__input, .card-love-gift__send {
    height: 46px;
    border-radius: 16px;
  }
  .card-love-gift__note {
    margin-top: 14px;
    font-size: 12px;
    text-align: center;
  }
}
.card-anim-stats {
  width: 100%;
  max-width: 520px;
  margin: 18px auto 26px;
  padding: 16px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 48, 64, 0.08), rgba(138, 61, 244, 0.08)), var(--light-bg);
  border: 1px solid rgba(138, 61, 244, 0.12);
}
.card-anim-stats__title {
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 900;
  color: var(--main-text-color);
}
.card-anim-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.card-anim-stats__item {
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.62);
}
.card-anim-stats__label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted-text-color, #777);
}
.card-anim-stats__value {
  display: block;
  font-size: 18px;
  line-height: 1;
  font-weight: 950;
  color: #ff3040;
}
.card-anim-stats__item--accent {
  background: linear-gradient(135deg, #ff3040, #8b3df4);
}
.card-anim-stats__item--accent .card-anim-stats__label,
.card-anim-stats__item--accent .card-anim-stats__value {
  color: #fff;
}
.card-anim-stats__note {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted-text-color, #777);
}

body.dark .card-anim-stats,
html.dark .card-anim-stats,
.theme-dark .card-anim-stats,
body[data-theme=dark] .card-anim-stats {
  background: linear-gradient(135deg, rgba(255, 48, 64, 0.12), rgba(138, 61, 244, 0.12)), rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
body.dark .card-anim-stats__item,
html.dark .card-anim-stats__item,
.theme-dark .card-anim-stats__item,
body[data-theme=dark] .card-anim-stats__item {
  background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 640px) {
  .card-anim-stats {
    max-width: none;
    margin: 14px auto 22px;
    padding: 13px;
    border-radius: 18px;
  }
  .card-anim-stats__grid {
    grid-template-columns: 1fr;
  }
}
.card-love-gift-overlay {
  position: fixed;
  inset: 0;
  z-index: 999998;
  background: rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: 0.18s ease;
}
.card-love-gift-overlay--show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.card-love-gift {
  --gift-bg: rgba(255, 255, 255, .97);
  --gift-card: rgba(255, 255, 255, .72);
  --gift-text: #202026;
  --gift-muted: rgba(32, 32, 38, .6);
  --gift-border: rgba(32, 32, 38, .1);
  --gift-line: rgba(32, 32, 38, .1);
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 999999;
  width: 420px;
  max-width: calc(100vw - 24px);
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 30px;
  background: radial-gradient(circle at 8% 0%, rgba(255, 48, 64, 0.14), transparent 34%), radial-gradient(circle at 96% 0%, rgba(138, 61, 244, 0.14), transparent 32%), var(--gift-bg);
  color: var(--gift-text);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.22);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.96);
  transition: 0.22s ease;
}
.card-love-gift--show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.card-love-gift__close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(32, 32, 38, 0.055);
  color: var(--gift-text);
  font-size: 0;
  cursor: pointer;
  transition: 0.18s ease;
}
.card-love-gift__close::before, .card-love-gift__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17px;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
}
.card-love-gift__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.card-love-gift__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.card-love-gift__close:hover {
  background: rgba(32, 32, 38, 0.09);
  transform: rotate(90deg);
}
.card-love-gift__head {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 15px;
  padding-right: 50px;
}
.card-love-gift__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: linear-gradient(135deg, #ff3154, #8b3df4);
  color: #fff;
  box-shadow: 0 14px 30px rgba(255, 49, 84, 0.22);
}
.card-love-gift__icon svg {
  width: 31px;
  height: 31px;
  display: block;
}
.card-love-gift__title {
  margin-bottom: 7px;
  font-size: 21px;
  line-height: 1.15;
  font-weight: 900;
  color: var(--gift-text);
}
.card-love-gift__text {
  max-width: 300px;
  color: var(--gift-muted);
  font-size: 14px;
  line-height: 1.42;
  font-weight: 600;
}
.card-love-gift__plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}
.card-love-gift__plan {
  min-width: 0;
  height: 104px;
  padding: 12px 8px;
  border: 1px solid var(--gift-border);
  border-radius: 18px;
  background: var(--gift-card);
  color: var(--gift-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: inherit;
  cursor: pointer;
  transition: 0.18s ease;
}
.card-love-gift__plan:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 49, 84, 0.26);
  box-shadow: 0 14px 28px rgba(138, 61, 244, 0.11);
}
.card-love-gift__plan:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.card-love-gift__plan span {
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
}
.card-love-gift__plan b {
  font-size: 16px;
  line-height: 1;
  font-weight: 950;
}
.card-love-gift__plan-heart {
  width: 26px;
  height: 26px;
  color: #ff3154;
}
.card-love-gift__or {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 20px 0 14px;
  color: var(--gift-muted);
  font-size: 13px;
  font-weight: 800;
}
.card-love-gift__or span {
  height: 1px;
  background: var(--gift-line);
}
.card-love-gift__or b {
  font-weight: 800;
}
.card-love-gift__custom {
  display: grid;
  grid-template-columns: 1fr 145px;
  gap: 12px;
}
.card-love-gift__custom button {
  height: 48px;
  border: 0;
  border-radius: 18px;
  padding: 0 18px;
  background: linear-gradient(135deg, #ff3154, #8b3df4);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(138, 61, 244, 0.2);
  transition: 0.18s ease;
}
.card-love-gift__custom button:hover {
  transform: translateY(-2px);
}
.card-love-gift__custom button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.card-love-gift__note {
  margin-top: 16px;
  color: var(--gift-muted);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

body.dark .card-love-gift,
html.dark .card-love-gift,
.theme-dark .card-love-gift,
body[data-theme=dark] .card-love-gift {
  --gift-bg: rgba(24, 27, 32, .97);
  --gift-card: rgba(255, 255, 255, .055);
  --gift-text: #f7f4ff;
  --gift-muted: rgba(247, 244, 255, .6);
  --gift-border: rgba(255, 255, 255, .1);
  --gift-line: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.46);
}
body.dark .card-love-gift__close,
html.dark .card-love-gift__close,
.theme-dark .card-love-gift__close,
body[data-theme=dark] .card-love-gift__close {
  background: rgba(255, 255, 255, 0.07);
}
body.dark .card-love-gift__close:hover,
html.dark .card-love-gift__close:hover,
.theme-dark .card-love-gift__close:hover,
body[data-theme=dark] .card-love-gift__close:hover {
  background: rgba(255, 255, 255, 0.12);
}
body.dark .card-love-gift__plan:hover,
html.dark .card-love-gift__plan:hover,
.theme-dark .card-love-gift__plan:hover,
body[data-theme=dark] .card-love-gift__plan:hover {
  border-color: rgba(255, 49, 84, 0.35);
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 640px) {
  .card-love-gift {
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 12px;
    width: auto;
    max-width: none;
    padding: 18px;
    border-radius: 26px;
    transform: translateY(18px) scale(0.98);
  }
  .card-love-gift--show {
    transform: translateY(0) scale(1);
  }
  .card-love-gift__close {
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
  }
  .card-love-gift__head {
    grid-template-columns: 46px 1fr;
    gap: 12px;
    padding-right: 40px;
  }
  .card-love-gift__icon {
    width: 46px;
    height: 46px;
    border-radius: 17px;
  }
  .card-love-gift__icon svg {
    width: 26px;
    height: 26px;
  }
  .card-love-gift__title {
    font-size: 18px;
    margin-bottom: 5px;
  }
  .card-love-gift__text {
    font-size: 12px;
    line-height: 1.35;
  }
  .card-love-gift__plans {
    margin-top: 17px;
    gap: 8px;
  }
  .card-love-gift__plan {
    height: 88px;
    border-radius: 17px;
    gap: 6px;
  }
  .card-love-gift__plan span {
    font-size: 12px;
  }
  .card-love-gift__plan b {
    font-size: 14px;
  }
  .card-love-gift__plan-heart {
    width: 22px;
    height: 22px;
  }
  .card-love-gift__or {
    margin: 16px 0 12px;
  }
  .card-love-gift__custom {
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .card-love-gift__custom input, .card-love-gift__custom button {
    height: 45px;
    border-radius: 16px;
    font-size: 14px;
  }
  .card-love-gift__note {
    margin-top: 13px;
    font-size: 12px;
  }
}
.card-love-gift__plan-price {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.card-love-gift__plan-price svg {
  width: 15px;
  height: 15px;
  color: #9b51ff;
  flex: 0 0 15px;
}

.card-love-gift__input {
  width: 100%;
  min-width: 0;
  height: 48px;
  border: 1px solid var(--gift-border);
  border-radius: 18px;
  padding: 0 15px;
  background: var(--gift-card);
  color: #9b51ff;
  display: flex;
  align-items: center;
  gap: 9px;
  box-sizing: border-box;
}
.card-love-gift__input svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
.card-love-gift__input input {
  width: 100%;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: var(--gift-text);
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
}
.card-love-gift__input input::-moz-placeholder {
  color: var(--gift-muted);
}
.card-love-gift__input input::placeholder {
  color: var(--gift-muted);
}
.card-love-gift__input:focus-within {
  border-color: rgba(255, 49, 84, 0.32);
  box-shadow: 0 0 0 4px rgba(255, 49, 84, 0.08);
}

.card-actions-panel {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 18px;
  flex-wrap: wrap;
}

.card-actions-panel__btn {
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 12px;
  background: var(--bg-secondary, #fff);
  color: var(--text-color, #242424);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  transition: 0.18s ease;
}

.card-actions-panel__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.08);
}

.card-actions-panel__btn .icon {
  font-size: 14px;
}

.card-actions-panel__btn--comments {
  background: var(--purple-btn-bg);
  color: white;
}
.card-actions-panel__btn--comments i {
  color: white;
}

.card-actions-panel__btn--accent {
  border-color: transparent;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #fff;
}

.card-actions-panel__btn--danger {
  border-color: rgba(239, 68, 68, 0.22);
  background: rgba(239, 68, 68, 0.08);
  color: #dc2626;
}

.card-toggle-comments-btn--closed {
  border-color: rgba(34, 197, 94, 0.25);
  background: rgba(34, 197, 94, 0.09);
  color: #16a34a;
}

@media (max-width: 575px) {
  .card-actions-panel {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-top: 10px;
    scrollbar-width: none;
  }
  .card-actions-panel::-webkit-scrollbar {
    display: none;
  }
  .card-actions-panel__btn {
    height: 34px;
    padding: 0 11px;
    border-radius: 10px;
    font-size: 12px;
    flex: 0 0 auto;
  }
  .card-actions-panel__btn .icon {
    font-size: 12px;
  }
}
.card-filter-form__battle-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.card-filter-form__battle-left {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}
.card-filter-form__battle-right {
  flex: 1 1 auto;
  min-width: 0;
}
.card-filter-form__battle-sort {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(130, 90, 255, 0.14);
  border-radius: 10px;
  background: rgba(130, 90, 255, 0.05);
  cursor: pointer;
  transition: 0.15s ease;
}
.card-filter-form__battle-sort svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  color: var(--text-color);
  opacity: 0.82;
}
.card-filter-form__battle-sort:hover {
  background: rgba(130, 90, 255, 0.1);
}
.card-filter-form__battle-sort.card-filter-form__btn--active {
  background: linear-gradient(135deg, #7c3aed, #9f4cff);
  border-color: transparent;
}
.card-filter-form__battle-sort.card-filter-form__btn--active svg {
  color: #fff;
  opacity: 1;
}
.card-filter-form__battle-seal {
  display: block !important;
  width: 100%;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(130, 90, 255, 0.14);
  background: rgba(130, 90, 255, 0.05);
  padding: 0 34px 0 12px;
  color: var(--text-color);
  font-size: 12px;
  font-weight: 600;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
}

@media (max-width: 520px) {
  .card-filter-form__battle-panel {
    gap: 7px;
  }
  .card-filter-form__battle-sort {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
  .card-filter-form__battle-sort svg {
    width: 16px;
    height: 16px;
  }
  .card-filter-form__battle-seal {
    height: 34px;
    border-radius: 10px;
    font-size: 12px;
  }
}
.lootbox-event-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 16px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--light-bg);
}
.lootbox-event-banner__icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--medium-bg);
  color: var(--main-purple-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  flex-shrink: 0;
}
.lootbox-event-banner__content {
  min-width: 0;
}
.lootbox-event-banner__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 3px;
  color: var(--main-text-color);
}
.lootbox-event-banner__text {
  font-size: 14px;
  line-height: 1.35;
  color: var(--secondary-text-color);
}
.lootbox-event-banner__text b {
  color: var(--main-purple-color);
  font-weight: 800;
}

@media screen and (max-width: 600px) {
  .lootbox-event-banner {
    padding: 12px;
    border-radius: 16px;
    gap: 10px;
  }
  .lootbox-event-banner__icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 14px;
  }
  .lootbox-event-banner__title {
    font-size: 15px;
  }
  .lootbox-event-banner__text {
    font-size: 13px;
  }
}
.trade {
  display: flex;
  justify-content: center;
}
.trade__notification {
  background: var(--dark-grey-bg);
  padding: 15px;
  border-radius: 15px;
  margin-bottom: 15px;
  line-height: 22px;
}
.trade__notification-title {
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  justify-content: center;
}
.trade__notification-title::before {
  content: "!";
  background: var(--red-color);
  margin-right: 5px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  color: white;
}
.trade__notification-text {
  font-size: 15px;
}
.trade__block {
  font-size: 14px;
  margin-bottom: 15px;
}
.trade__thanks {
  display: flex;
  align-items: center;
}
.trade__thanks-avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  flex-shrink: 0;
}
.trade__thanks-avatar img {
  border-radius: 50%;
}
.trade__thanks-text {
  background: var(--medium-bg);
  border-radius: var(--main-border-radius);
  padding: 10px 20px;
  width: 100%;
}
.trade__search {
  position: relative;
}
.trade__search::before {
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
  content: "\e8b6";
  position: absolute;
  right: 6px;
  top: 35%;
  transform: translate(-50%, -50%);
  font-size: 20px;
}
.trade__search-input {
  width: 100%;
}
.trade__pages {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  align-items: center;
}
.trade__paginate {
  margin: 0 15px;
  font-size: 15px;
  color: var(--secondary-text-color);
}
.trade__rank-menu {
  display: flex;
  margin-bottom: 15px;
  overflow: auto;
  padding: 10px 0;
}
.trade__rank-wrapper {
  display: flex;
  justify-content: center;
}
.trade__rank {
  flex-shrink: 0;
}
.trade__rank-button, .trade__type-card-button, .trade__anim-card-button, .trade__anim-part-card-button {
  padding: 6px 11px;
  margin-right: 10px;
  cursor: pointer;
  background: var(--medium-bg);
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.2s;
}
@media screen and (max-width: 460px) {
  .trade__rank-button, .trade__type-card-button, .trade__anim-card-button, .trade__anim-part-card-button {
    padding: 5px 8px;
    margin-right: 7px;
    font-size: 14px;
  }
}
@media screen and (max-width: 355px) {
  .trade__rank-button, .trade__type-card-button, .trade__anim-card-button, .trade__anim-part-card-button {
    padding: 5px 7px;
    font-size: 13px;
  }
}
.trade__rank-button:hover, .trade__type-card-button:hover, .trade__anim-card-button:hover, .trade__anim-part-card-button:hover {
  opacity: 0.8;
}
.trade__rank-button:last-of-type, .trade__type-card-button:last-of-type, .trade__anim-card-button:last-of-type, .trade__anim-part-card-button:last-of-type {
  margin-right: 0;
}
.trade__rank-button--active, .trade__type-card-button--active, .trade__anim-card-button--active, .trade__anim-part-card-button--active {
  background: var(--purple-btn-bg);
  color: white;
}
.trade__status {
  background: var(--dark-grey-bg);
  padding: 10px 10px;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.trade__status i {
  color: white;
  background: var(--red-color);
  padding: 4px;
  border-radius: 50%;
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
}
.trade__status--accepted i {
  background: var(--green-color);
}
.trade__inventory {
  padding: 15px;
  background: var(--dark-grey-bg);
  border-radius: 15px;
  margin-bottom: 20px;
}
.trade__inventory-list {
  display: grid;
  overflow-y: auto;
  min-height: 150px;
  max-height: 320px;
  grid-template-columns: repeat(7, 1fr);
  gap: 15px;
  padding: 5px;
}
@media screen and (max-width: 900px) {
  .trade__inventory-list {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media screen and (max-width: 600px) {
  .trade__inventory-list {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (max-width: 480px) {
  .trade__inventory-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.trade__inventory-item {
  background: var(--light-bg);
  border-radius: 6px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s;
}
.trade__inventory-item[data-level]::after {
  content: "+" attr(data-level);
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(216, 28, 28, 0.568627451);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 12px;
}
.trade__inventory-item[data-level=""]::after {
  content: none;
}
.trade__inventory-item--available-animation .trade__inventory-item--exptra::before {
  content: "A+";
  position: absolute;
  top: 6px;
  right: -5px;
  background: var(--main-purple-color);
  color: white;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px;
}
.trade__inventory-item--not-need-card::after, .trade__inventory-item--need-card::after {
  transition: all 0.3s;
  content: "\f854";
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: rgba(0, 153, 51, 0.7019607843);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.trade__inventory-item:not(.trade__inventory-item--not-available):hover {
  transform: scale(1.04);
}
.trade__inventory-item--creator-has {
  border-bottom: 3px solid #772ce8;
}
.trade__inventory-item--not-available img, .trade__inventory-item--lock img {
  filter: grayscale(1);
}
.trade__inventory-item--not-available::before, .trade__inventory-item--lock::before {
  content: "\e897";
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  background: var(--light-bg);
  z-index: 2;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--border-color);
}
.trade__inner {
  width: 800px;
  overflow: hidden;
}
.trade__controls {
  display: flex;
  justify-content: space-between;
}
.trade__controls button {
  flex-basis: 100%;
}
.trade__controls button:nth-child(2) {
  margin-left: 10px;
}
.trade__list {
  margin-bottom: 20px;
}
.trade__list-name {
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: break-word;
  max-width: 250px;
}
.trade__list-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding: 20px 10px;
  width: 100%;
  transition: all 0.3s;
  border-radius: 9px;
  overflow: hidden;
}
@media screen and (max-width: 350px) {
  .trade__list-item {
    padding: 20px 5px;
  }
}
.trade__list-item:hover {
  background: var(--light-bg);
}
.trade__list-item:last-of-type {
  margin-bottom: 0;
}
.trade__list-image {
  width: 35px;
  height: 35px;
  margin-right: 10px;
  flex-shrink: 0;
}
.trade__list-image img {
  border-radius: 50%;
}
.trade__list-header {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--secondary-text-color);
  margin-bottom: 5px;
}
.trade__list-header i {
  margin-right: 5px;
}
.trade__list-info {
  width: 100%;
}
.trade__list-date {
  margin-left: auto;
}
.trade__header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.trade__header span {
  flex-shrink: 0;
}
.trade__header-avatar {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  position: relative;
}
@media screen and (max-width: 380px) {
  .trade__header-avatar {
    width: 40px;
    height: 40px;
  }
}
.trade__header-avatar img {
  border-radius: 6px;
}
.trade__header-tag {
  font-weight: 600;
  margin-right: 5px;
}
.trade__header-name {
  font-size: 20px;
  margin-right: 6px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.trade__header-name span {
  color: var(--green-color);
  font-size: 15px;
  margin-left: 5px;
}
@media screen and (max-width: 380px) {
  .trade__header-name {
    font-size: 17px;
  }
}
.trade__main {
  background: var(--dark-grey-bg);
  padding: 15px;
  border-radius: 15px;
  margin-bottom: 20px;
  overflow: hidden;
}
.trade__main-user {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.trade__main-avatar {
  width: 35px;
  height: 35px;
  margin-right: 10px;
  position: relative;
}
.trade__main-avatar img {
  border-radius: 4px;
}
.trade__main-coins {
  margin-left: auto;
}
.trade__main-coins input {
  border: 1px solid transparent;
  font-size: 13px;
  max-width: 41px;
  border-radius: 3px;
  padding: 1px 5px;
  outline: none;
}
.trade__main-coins input:active, .trade__main-coins input:focus {
  border: 1px solid var(--purple-btn-bg);
}
.trade__main-items {
  display: grid;
  overflow-y: auto;
  min-height: 150px;
  max-height: 340px;
  grid-template-columns: repeat(7, 1fr);
  gap: 15px;
  padding: 5px;
}
@media screen and (max-width: 900px) {
  .trade__main-items {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media screen and (max-width: 600px) {
  .trade__main-items {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (max-width: 480px) {
  .trade__main-items {
    grid-template-columns: repeat(3, 1fr);
  }
}
.trade__main-items .lock-card-btn {
  right: 5px;
  top: 6px;
  font-size: 15px;
}
.trade__main-item {
  background: var(--light-bg);
  border-radius: 6px;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
}
.trade__main-item img {
  border-radius: 6px;
}
.trade__main-item--particle-anim::after {
  content: "A+";
  position: absolute;
  top: 5px;
  right: -7px;
  background: var(--main-purple-color);
  color: white;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px;
}
.trade__main-divider {
  width: 100%;
  height: 1px;
  background-color: var(--border-color);
  margin: 30px 0;
  position: relative;
}
.trade__main-divider:before {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  content: "\e028";
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
  background: var(--dark-grey-bg);
  width: 50px;
  height: 30px;
  font-size: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--icons-color);
}
.trade .card-filter-form__lock-status {
  display: none;
}

.history {
  display: flex;
  justify-content: center;
}
.history__inner {
  width: 600px;
  overflow: hidden;
}
.history__item {
  background: var(--light-bg);
  padding: 15px;
  border-radius: 10px;
  width: 100%;
  margin-bottom: 15px;
}
.history__item:last-of-type {
  margin-bottom: 0;
}
.history__item-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
}
.history__date {
  font-size: 14px;
  color: var(--secondary-text-color);
  flex-shrink: 0;
  margin-left: 10px;
}
.history__name {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.history__name a {
  font-weight: 500;
  color: var(--main-purple-color);
  max-width: 350px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
@media screen and (max-width: 480px) {
  .history__name a {
    max-width: 250px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}
@media screen and (max-width: 360px) {
  .history__name a {
    max-width: 150px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}
@media screen and (max-width: 330px) {
  .history__name a {
    max-width: 100px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}
.history__body {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  overflow: auto;
}
.history__body:last-of-type {
  margin-bottom: 0;
}
.history__body::before {
  content: "+";
  height: 35px;
  width: 35px;
  background: var(--medium-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  border-radius: 50%;
  font-size: 25px;
  font-weight: 500;
  line-height: 8px;
  flex-shrink: 0;
}
.history__body--gained::before {
  content: "+";
  color: var(--green-color);
}
.history__body--lost::before {
  content: "-";
  color: var(--red-color);
}
.history__body-item {
  width: 75px;
  margin-right: 10px;
  flex-shrink: 0;
}
.history__body-item img {
  border-radius: 4px;
}
.history__stats {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
  flex-wrap: wrap;
}
.history__stats-item {
  font-size: 13px;
  line-height: 1;
  padding: 8px 12px;
  border-radius: 20px;
  background: var(--medium-bg);
  color: var(--main-text-color);
}
.history__stats-item--gained {
  color: var(--green-color);
}
.history__stats-item--lost {
  color: var(--red-color);
}

.trade__header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.trade__viewed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.2px;
  line-height: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
  color: rgba(0, 0, 0, 0.65);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  animation: tradeViewedPop 0.22s ease-out;
}

.trade__viewed--yes {
  background: rgba(46, 204, 113, 0.12);
  border-color: rgba(46, 204, 113, 0.35);
  color: rgba(20, 120, 70, 0.95);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06), 0 0 0 3px rgba(46, 204, 113, 0.08);
}

.trade__viewed--no {
  background: var(--dark-grey-bg);
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--main-text-color);
}

.trade__viewed--pulse {
  animation: tradeViewedPop 0.22s ease-out, tradeViewedPulse 1.15s ease-in-out 1;
}

@keyframes tradeViewedPop {
  from {
    transform: translateY(-2px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes tradeViewedPulse {
  0% {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
  }
  35% {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06), 0 0 0 6px rgba(0, 0, 0, 0.06);
  }
  70% {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06), 0 0 0 2px rgba(0, 0, 0, 0.03);
  }
  100% {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
  }
}
.trade__list-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trade__list-date {
  margin-left: auto;
}

.trade__list-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 9px;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.03);
}

.trade__list-dot--yes {
  background: rgb(46, 204, 113);
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.12);
}

.trade__list-dot--no {
  background: var(--secondary-text-color);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.trade__list-dot--new {
  background: rgb(88, 101, 242);
  box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.14);
  animation: tradeDotPulse 1.2s ease-in-out infinite;
}

@keyframes tradeDotPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.18);
    opacity: 0.85;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.history-header {
  max-width: 760px;
  margin: 0 auto 28px;
  text-align: center;
}
.history-header__title {
  font-size: 34px;
  font-weight: 700;
  color: var(--title-color);
  margin-bottom: 18px;
}
.history-header__title span {
  color: var(--main-purple-color);
}
.history-header__nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.history-header__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  color: var(--secondary-text-color);
  font-size: 15px;
  transition: all 0.2s ease;
}
.history-header__nav-link:hover, .history-header__nav-link--active {
  color: var(--main-purple-color);
  border-color: rgba(139, 0, 255, 0.25);
  box-shadow: 0 6px 16px rgba(139, 0, 255, 0.08);
  transform: translateY(-1px);
}

.suggestion-block--history {
  background: var(--light-bg);
  border-radius: var(--secondary-border-radius);
  padding: 18px;
  margin-bottom: 24px;
}

.suggestion-block__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.suggestion-block__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--title-color);
}

.suggestion-block__tabs {
  display: flex;
  padding: 4px;
  border-radius: 999px;
  background: var(--medium-bg);
}

.suggestion-block__tabs-item {
  border: 0;
  background: transparent;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--secondary-text-color);
  font-size: 14px;
  transition: all 0.2s ease;
}
.suggestion-block__tabs-item:hover, .suggestion-block__tabs-item.tabs__item--active {
  background: var(--light-bg);
  color: var(--main-purple-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.suggestion-block__form {
  margin-bottom: 14px;
}

@media screen and (max-width: 600px) {
  .history-header__title {
    font-size: 24px;
  }
  .history-header__nav {
    flex-direction: column;
  }
  .history-header__nav-link {
    justify-content: center;
    width: 100%;
  }
  .suggestion-block__top {
    flex-direction: column;
    align-items: stretch;
  }
  .suggestion-block__tabs {
    width: 100%;
  }
  .suggestion-block__tabs-item {
    flex: 1;
  }
}
.news {
  display: flex;
  justify-content: center;
}
.news--comments {
  margin-top: 30px;
}
.news__inner {
  width: 100%;
  background: var(--light-bg);
  box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  padding-bottom: 10px;
}
.news__image {
  margin-bottom: 20px;
  height: 330px;
}
.news__image img {
  border-radius: 16px 16px 0 0;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
}
.news__wrapper {
  padding: 15px 20px;
}
@media screen and (max-width: 420px) {
  .news__wrapper {
    padding: 10px 15px;
  }
}
.news__title {
  font-size: 30px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 20px;
}
@media screen and (max-width: 420px) {
  .news__title {
    font-size: 25px;
  }
}
.news__text {
  line-height: 24px;
  font-size: 15px;
}
.news__stat {
  display: flex;
  justify-content: space-between;
}
.news__stat div {
  font-size: 15px;
  display: flex;
  align-items: center;
  padding: 5px;
}
.news__stat div i {
  margin-right: 5px;
  font-size: 20px;
  margin-top: 1px;
  color: var(--icons-color);
}

.deck {
  display: flex;
  justify-content: center;
}
.deck video {
  display: block;
  width: 100%;
  background-size: cover;
  background-position: 50%;
  border-radius: 10px !important;
  background-color: var(--light-bg);
}
.deck__inner {
  width: 800px;
}
.deck__header-line {
  display: flex;
  justify-content: space-between;
}
.deck__status {
  font-size: 13px;
  margin-bottom: 10px;
  color: var(--secondary-text-color);
}
.deck__search-input {
  width: 100%;
}
.deck__controls {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.deck__increase-price {
  flex-shrink: 0;
  background-color: var(--medium-bg);
  padding: 9px 10px;
  font-weight: 400;
  letter-spacing: 0.5px;
  font-size: 14px;
  text-align: center;
  border-radius: 8px 0 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary-text-color);
}
.deck__increase-price .diamond {
  margin-left: 5px;
}
.deck__increase-btn {
  display: flex;
  align-items: center;
  border-radius: 0 8px 8px 0 !important;
}
.deck__increase-btn span {
  font-weight: 500;
  background: var(--light-bg);
  padding: 5px 9px;
  border-radius: 6px;
  margin-right: 3px;
}
.deck__increase-btn .diamond {
  margin-top: 2px;
  margin-right: 0;
}
.deck__warning {
  font-size: 14px;
  text-align: center;
  background: rgba(119, 44, 232, 0.7490196078);
  padding: 10px;
  border-radius: 8px;
  font-weight: 600;
  color: white;
}
.deck__inventory, .deck__showcase {
  padding: 10px;
  background: var(--light-bg);
  border-radius: 15px;
  margin-bottom: 20px;
}
.deck__inventory-list, .deck__showcase-list {
  display: grid;
  overflow-y: auto;
  min-height: 150px;
  max-height: 320px;
  grid-template-columns: repeat(7, 1fr);
  gap: 15px;
  padding: 5px;
}
@media screen and (max-width: 900px) {
  .deck__inventory-list, .deck__showcase-list {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media screen and (max-width: 600px) {
  .deck__inventory-list, .deck__showcase-list {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (max-width: 480px) {
  .deck__inventory-list, .deck__showcase-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.deck__inventory-item, .deck__showcase-item {
  background: var(--light-bg);
  border-radius: 6px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s;
  background: var(--dark-grey-bg);
  aspect-ratio: 9/13;
}
.deck__inventory-item img, .deck__showcase-item img {
  border-radius: 6px;
}
.deck__inventory-item::before, .deck__showcase-item::before {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  content: attr(data-number);
  font-size: 30px;
  color: var(--secondary-text-color);
}
.deck__like-btn span {
  font-size: 14px;
  margin-left: 3px;
}
.deck__create-name input {
  width: 100%;
  border: none;
  outline: none;
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 15px;
  background: var(--light-bg);
  color: var(--main-text-color);
}
.deck__header {
  background: var(--light-bg);
  border-radius: 18px;
  padding: 15px;
  margin-bottom: 20px;
}
.deck__title {
  font-size: 25px;
  font-weight: 600;
  text-align: center;
}
.deck__desc {
  font-size: 15px;
  line-height: 20px;
  margin-bottom: 10px;
}
.deck__creator {
  display: flex;
  justify-content: center;
  align-items: center;
}
.deck__creator button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 8px;
}
.deck__creator button i {
  font-size: 18px;
}
.deck__creator a {
  margin-left: 7px;
  margin-right: 7px;
}
.deck__creator-wrapper {
  display: flex;
  align-items: center;
  margin-right: 25px;
}
.deck__creator-image {
  width: 35px;
  height: 35px;
  margin-right: 10px;
}
.deck__creator-image img {
  border-radius: 50%;
}
.deck__stat {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 20px;
}
.deck__stat-item {
  width: 33.3%;
  text-align: center;
}
.deck__stat-item div:first-of-type {
  font-size: 16px;
  font-weight: 600;
}
.deck__stat-item div:last-of-type {
  font-size: 12px;
  color: var(--secondary-text-color);
}
.deck__item {
  cursor: pointer;
  position: relative;
}
.deck__item img {
  border-radius: 6px;
}
.deck__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 10px;
  border-radius: 13px;
  background: var(--light-bg);
}
@media screen and (max-width: 600px) {
  .deck__list {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (max-width: 480px) {
  .deck__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.profile-cards__deck-btn {
  display: inline-flex;
  margin-bottom: 20px;
}
.profile-cards__deck-btn i {
  font-size: 17px;
  margin-right: 5px;
}
.profile-cards__deck-btn:first-of-type {
  margin-right: 10px;
}

.manga-cards__collections.owl-carousel {
  margin-top: 30px;
}
.manga-cards__collections.owl-carousel .manga-cards__collection {
  box-shadow: none !important;
}
.manga-cards__collections.owl-carousel .manga-cards__collection-name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}
.manga-cards__collections.owl-carousel .manga-cards__collection-info span:nth-of-type(2) {
  display: none;
}

.shake-card {
  animation: shake-card 0.6s ease;
}

@keyframes shake-card {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-7px, -3px);
  }
  50% {
    transform: translate(7px, 0);
  }
  75% {
    transform: translate(-7px, -3px);
  }
  100% {
    transform: translate(0, 0);
  }
}
.manga-cards__collections video {
  border-radius: 7px;
  display: block;
  width: 100%;
  background-size: cover;
}

.deck-selector {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7098039216);
  color: White;
  padding: 15px;
  z-index: 99;
  border-radius: 16px;
  overflow-y: auto;
}
.deck-selector__btn {
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.deck-selector__btn--active {
  color: #34a70e;
}

.manga-cards__item,
.deck-selector,
.deck-selector__btn {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.deck__create-description textarea {
  width: 100%;
  border: none;
  outline: none;
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 15px;
  background: var(--light-bg);
  color: var(--main-text-color);
  resize: vertical;
  min-height: 140px;
  line-height: 1.5;
}
.deck__create-description textarea::-moz-placeholder {
  color: var(--secondary-text-color);
}
.deck__create-description textarea::placeholder {
  color: var(--secondary-text-color);
}

.deck__desc {
  max-width: 100%;
  margin: 14px auto 18px;
  color: var(--secondary-text-color);
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
  word-break: break-word;
  white-space: normal;
}

.deck__header {
  background: var(--light-bg);
  border-radius: 22px;
  padding: 28px;
  margin-bottom: 22px;
}
.deck__header-top {
  max-width: 720px;
  margin: 0 auto 24px;
  text-align: center;
}
.deck__title {
  margin: 0;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--main-text-color);
  word-break: break-word;
}
.deck__desc {
  margin-top: 14px;
  color: var(--secondary-text-color);
  font-size: 15px;
  line-height: 1.65;
  text-align: center;
  word-break: break-word;
}
.deck__stat {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 0 24px;
}
.deck__stat-item {
  width: auto;
  padding: 14px 10px;
  border-radius: 16px;
  background: var(--medium-bg);
  text-align: center;
}
.deck__stat-item strong {
  display: block;
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
  color: var(--main-text-color);
  margin-bottom: 6px;
}
.deck__stat-item span {
  font-size: 13px;
  color: var(--secondary-text-color);
}
.deck__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.deck__creator-wrapper {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 7px 12px 7px 7px;
  border-radius: 999px;
  background: var(--medium-bg);
  color: var(--main-text-color);
}
.deck__creator-image {
  width: 42px;
  height: 42px;
  margin-right: 10px;
}
.deck__creator-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}
.deck__creator-name {
  font-size: 17px;
  font-weight: 600;
}
.deck__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.deck__action-btn {
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 600px) {
  .deck__header {
    padding: 20px 14px;
    border-radius: 18px;
  }
  .deck__title {
    font-size: 26px;
  }
  .deck__desc {
    font-size: 14px;
    text-align: left;
  }
  .deck__stat {
    gap: 8px;
  }
  .deck__stat-item {
    padding: 12px 6px;
  }
  .deck__stat-item strong {
    font-size: 20px;
  }
  .deck__stat-item span {
    font-size: 12px;
  }
}
.deck-modern {
  background: var(--light-bg);
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 18px;
}
.deck-modern__top {
  max-width: 700px;
  margin: 0 auto 18px;
  text-align: center;
}
.deck-modern__title {
  margin: 0;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--main-text-color);
  word-break: break-word;
}
.deck-modern__desc {
  margin-top: 10px;
  color: var(--secondary-text-color);
  font-size: 14px;
  line-height: 1.55;
  word-break: break-word;
}
.deck-modern__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.deck-modern__stat {
  background: var(--medium-bg);
  border-radius: 14px;
  padding: 12px 10px;
  text-align: center;
}
.deck-modern__stat strong {
  display: block;
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  color: var(--main-text-color);
  margin-bottom: 4px;
}
.deck-modern__stat span {
  color: var(--secondary-text-color);
  font-size: 12px;
}
.deck-modern__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.deck-modern__user {
  display: inline-flex;
  align-items: center;
  background: var(--medium-bg);
  border-radius: 999px;
  padding: 6px 12px 6px 6px;
  color: var(--main-text-color);
  text-decoration: none;
}
.deck-modern__user img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  margin-right: 10px;
}
.deck-modern__user span {
  font-size: 15px;
  font-weight: 600;
}
.deck-modern__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.deck-modern__action {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 12px;
  background: var(--medium-bg);
  color: var(--main-text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.2s;
}
.deck-modern__action:hover {
  transform: translateY(-1px);
}
.deck-modern__action i {
  font-size: 15px;
}

@media screen and (max-width: 700px) {
  .deck-modern {
    padding: 14px;
  }
  .deck-modern__title {
    font-size: 22px;
  }
  .deck-modern__desc {
    text-align: left;
    font-size: 13px;
  }
  .deck-modern__stats {
    gap: 6px;
  }
  .deck-modern__stat {
    padding: 10px 6px;
  }
  .deck-modern__stat strong {
    font-size: 18px;
  }
  .deck-modern__stat span {
    font-size: 11px;
  }
  .deck-modern__user {
    width: 100%;
    justify-content: center;
  }
}
.faq {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding-top: 24px;
}
@media screen and (max-width: 700px) {
  .faq {
    grid-template-columns: repeat(1, 1fr);
  }
}
.faq__title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 4px;
}
.faq__text {
  font-size: 15px;
  line-height: 20px;
  color: var(--secondary-text-color);
}
.faq__section:nth-of-type(1) .faq__image {
  background: #b966ff;
}
.faq__section:nth-of-type(2) .faq__image {
  background: #cc66ff;
}
.faq__section:nth-of-type(3) .faq__image {
  background: #6633cc;
}
.faq__section:nth-of-type(3) .faq__image img {
  fill: white;
}
.faq__image {
  border-radius: 10px;
  padding: 36px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.faq__image img {
  width: 170px;
}
@media screen and (max-width: 800px) {
  .faq__image img {
    width: 150px;
  }
}

.accordion {
  margin: 0 auto;
}
@media screen and (max-width: 800px) {
  .accordion {
    width: 100%;
  }
}
.accordion__item {
  margin-top: 20px;
}
.accordion__header {
  background-color: var(--notification-not-read-color);
  padding: 15px;
  cursor: pointer;
  font-weight: 500;
  border-radius: 10px;
  color: var(--secondary-purple-color);
}
.accordion__content {
  display: none;
  padding: 15px;
}

.faq-description {
  color: var(--secondary-text-color);
  margin-bottom: 24px;
  font-size: 1rem;
}

.club, .alliance {
  display: flex;
  justify-content: center;
}
.club__reward-warning, .alliance__reward-warning {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(252, 54, 59, 0.08);
  border: 1px solid rgba(252, 54, 59, 0.25);
}
.club__reward-warning-icon, .alliance__reward-warning-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--red-color);
  color: #fff;
  font-weight: 800;
}
.club__reward-warning-title, .alliance__reward-warning-title {
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--main-text-color);
}
.club__reward-warning-text, .alliance__reward-warning-text {
  font-size: 13px;
  line-height: 18px;
  color: var(--secondary-text-color);
}
.club__relations-item, .alliance__relations-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.club__relations-item:last-of-type, .alliance__relations-item:last-of-type {
  margin-bottom: 0;
}
.club__relations-image, .alliance__relations-image {
  margin-right: 7px;
  width: 35px;
  height: 35px;
  border-radius: 2px solid var(--red-color);
}
.club__relations-image img, .alliance__relations-image img {
  border-radius: 50%;
}
.club__relations-points, .alliance__relations-points {
  margin-left: auto;
}
.club__relations-points--war, .alliance__relations-points--war {
  border-bottom: 2px solid var(--red-color);
}
.club__relations-points--def, .alliance__relations-points--def {
  border-bottom: 2px solid #4683d9;
}
.club__cancel, .alliance__cancel {
  width: 100% !important;
  background: var(--dark-grey-bg) !important;
  color: var(--main-text-color) !important;
  margin-right: 0 !important;
}
.club__actions, .alliance__actions {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.club__actions div, .alliance__actions div {
  width: 49%;
  text-align: center;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: var(--main-border-radius);
  cursor: pointer;
}
.club__actions div img, .alliance__actions div img {
  width: 23px;
  margin-right: 10px;
}
.club__actions div:first-of-type, .alliance__actions div:first-of-type {
  background-color: #fc363b;
  margin-right: 10px;
}
.club__actions div:last-of-type, .alliance__actions div:last-of-type {
  background-color: #4683d9;
}
.club__rewards, .alliance__rewards {
  display: flex;
  overflow-x: auto;
  padding-bottom: 15px;
}
.club__rewards::-webkit-scrollbar, .alliance__rewards::-webkit-scrollbar {
  width: 8px;
  height: 5px;
}
.club__rewards-item-wrapper, .alliance__rewards-item-wrapper {
  background-color: var(--medium-bg);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin: 15px;
  margin-bottom: 10px;
  position: relative;
}
.club__rewards-item-image, .alliance__rewards-item-image {
  background-repeat: no-repeat;
  width: 83px;
  height: 81px;
  background-position: center;
  background-size: cover;
  padding: 10px;
  background-size: 70%;
}
.club__rewards-item-image--Coins, .alliance__rewards-item-image--Coins {
  background-image: url('data:image/svg+xml,<svg width="64px" height="64px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--emojione" preserveAspectRatio="xMidYMid meet"><path fill="%239450e0" d="M41 4H23L2 20.1L32 60l30-39.9z"></path><g fill="%23c28fef"><path d="M32 60l12.5-39.9H18.8z"></path><path d="M9.5 9.5L2 20.1h16.8L23 4z"></path><path d="M54.5 9.5L41 4l3.5 16.1H62z"></path></g></svg>');
}
.club__rewards-item-image--Scroll_e, .alliance__rewards-item-image--Scroll_e {
  background-image: url("/assets/cards/scrolls/E.png");
}
.club__rewards-item-image--Scroll_c, .alliance__rewards-item-image--Scroll_c {
  background-image: url("/assets/cards/scrolls/C.png");
}
.club__rewards-item-image--Scroll_d, .alliance__rewards-item-image--Scroll_d {
  background-image: url("/assets/cards/scrolls/D.png");
}
.club__rewards-item-image--Scroll_g, .alliance__rewards-item-image--Scroll_g {
  background-image: url("/assets/cards/scrolls/G.png");
}
.club__rewards-item-image--Scroll_p, .alliance__rewards-item-image--Scroll_p {
  background-image: url("/assets/cards/scrolls/P.png");
}
.club__rewards-item-image--Scroll_b, .alliance__rewards-item-image--Scroll_b {
  background-image: url("/assets/cards/scrolls/B.png");
}
.club__rewards-item-image--Scroll_a, .alliance__rewards-item-image--Scroll_a {
  background-image: url("/assets/cards/scrolls/A.png");
}
.club__rewards-item-image--Scroll_s, .alliance__rewards-item-image--Scroll_s {
  background-image: url("/assets/cards/scrolls/S.png");
}
.club__rewards-item-image--Scroll_x, .alliance__rewards-item-image--Scroll_x {
  background-image: url("/assets/cards/scrolls/X.png");
}
.club__rewards-item-image--Card_s, .alliance__rewards-item-image--Card_s {
  background-image: url("/assets/card_pack.png");
}
.club__rewards-item-image--Card_s::after, .alliance__rewards-item-image--Card_s::after {
  content: "S";
  position: absolute;
  bottom: 15px;
  right: 11px;
  background: #f54972;
  padding: 2px 4px;
  color: white;
  border-radius: 6px;
  border: 1px sol var(--border-color);
  font-size: 12px;
  font-weight: 700;
}
.club__rewards-item-image--Card_a, .alliance__rewards-item-image--Card_a {
  background-image: url("/assets/card_pack.png");
}
.club__rewards-item-image--Card_a::after, .alliance__rewards-item-image--Card_a::after {
  content: "A";
  position: absolute;
  bottom: 15px;
  right: 11px;
  background: #9b0a05;
  padding: 2px 4px;
  color: white;
  border-radius: 6px;
  border: 1px sol var(--border-color);
  font-size: 12px;
  font-weight: 700;
}
.club__rewards-item-image--Card_p, .alliance__rewards-item-image--Card_p {
  background-image: url("/assets/card_pack.png");
}
.club__rewards-item-image--Card_p::after, .alliance__rewards-item-image--Card_p::after {
  content: "P";
  position: absolute;
  bottom: 15px;
  right: 11px;
  background: #005db6;
  padding: 2px 4px;
  color: white;
  border-radius: 6px;
  border: 1px sol var(--border-color);
  font-size: 12px;
  font-weight: 700;
}
.club__rewards-item-image--Card_g, .alliance__rewards-item-image--Card_g {
  background-image: url("/assets/card_pack.png");
}
.club__rewards-item-image--Card_g::after, .alliance__rewards-item-image--Card_g::after {
  content: "G";
  position: absolute;
  bottom: 15px;
  right: 11px;
  background: #004e2f;
  padding: 2px 4px;
  color: white;
  border-radius: 6px;
  border: 1px sol var(--border-color);
  font-size: 12px;
  font-weight: 700;
}
.club__rewards-item-image--Card_b, .alliance__rewards-item-image--Card_b {
  background-image: url("/assets/card_pack.png");
}
.club__rewards-item-image--Card_b::after, .alliance__rewards-item-image--Card_b::after {
  content: "B";
  position: absolute;
  bottom: 15px;
  right: 11px;
  background: #eb5d9b;
  padding: 2px 4px;
  color: white;
  border-radius: 6px;
  border: 1px sol var(--border-color);
  font-size: 12px;
  font-weight: 700;
}
.club__rewards-item-image--Card_c, .alliance__rewards-item-image--Card_c {
  background-image: url("/assets/card_pack.png");
}
.club__rewards-item-image--Card_c::after, .alliance__rewards-item-image--Card_c::after {
  content: "C";
  position: absolute;
  bottom: 15px;
  right: 11px;
  background: #df9300;
  padding: 2px 4px;
  color: white;
  border-radius: 6px;
  border: 1px sol var(--border-color);
  font-size: 12px;
  font-weight: 700;
}
.club__rewards-item-exp, .alliance__rewards-item-exp {
  background: var(--dark-grey-bg);
  text-align: center;
  height: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.club__rewards-item-exp span, .alliance__rewards-item-exp span {
  background: var(--dark-grey-bg);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  color: var(--main-text-color);
  font-weight: 500;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-color);
  -webkit-clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0% 50%);
          clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0% 50%);
}
.club__rewards-item:first-of-type .club__rewards-item-exp span, .alliance__rewards-item:first-of-type .club__rewards-item-exp span {
  background: var(--main-purple-color);
  color: white;
  border: 1px solid transparent;
}
.club__inner, .alliance__inner {
  width: 800px;
  overflow: hidden;
}
.club__header, .alliance__header {
  position: relative;
  background: var(--light-bg);
  border-radius: 14px;
}
.club__title, .alliance__title {
  font-weight: 500;
  margin-bottom: 15px;
  font-size: 20px;
  text-decoration: underline;
  cursor: pointer;
}
.club__title:hover, .alliance__title:hover {
  color: var(--main-purple-color);
}
.club__show-all-btn, .alliance__show-all-btn {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 15px 0;
  color: var(--secondary-text-color);
  font-size: 15px;
  cursor: pointer;
}
.club__show-all-btn i, .alliance__show-all-btn i {
  margin-left: 5px;
  margin-top: 4px;
}
.club__cover, .alliance__cover {
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  height: 326px;
}
.club__cover-wrapper, .alliance__cover-wrapper {
  position: relative;
  height: 100%;
  background: var(--light-bg);
}
.club__cover-image, .alliance__cover-image {
  height: 303px;
  background-position: bottom center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 3;
  position: relative;
  padding-bottom: 40%;
}
.club__controls, .alliance__controls {
  display: flex;
}
@media screen and (max-width: 600px) {
  .club__controls, .alliance__controls {
    flex-direction: column;
  }
}
.club__controls .button, .alliance__controls .button {
  margin-left: 10px;
  width: 100%;
}
@media screen and (max-width: 600px) {
  .club__controls .button, .alliance__controls .button {
    margin-left: 0;
    margin-bottom: 10px;
  }
}
.club__controls .button:first-of-type, .alliance__controls .button:first-of-type {
  margin-left: 0;
}
.club__info, .alliance__info {
  position: relative;
  margin-top: -20px;
  padding: 58px 16px 12px 16px;
}
.club__logo, .alliance__logo {
  position: absolute;
  top: 0;
  left: 16px;
  transform: translateY(-50%);
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 4px solid var(--light-bg);
  z-index: 4;
}
.club__logo img, .alliance__logo img {
  border-radius: inherit;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.club__name, .alliance__name {
  font-size: 25px;
  font-weight: 500;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.club__name img, .alliance__name img {
  width: 25px;
  margin-left: 5px;
}
.club__count, .alliance__count {
  font-size: 14px;
  color: var(--secondary-text-color);
  margin-bottom: 10px;
}
.club__middle, .club__block, .alliance__middle, .alliance__block {
  margin-top: 10px;
  position: relative;
  background: var(--light-bg);
  border-radius: 14px;
  padding: 12px 16px 12px 16px;
}
.club__block--border, .alliance__block--border {
  border: 2px solid var(--purple-btn-bg);
}
.club__bonus-modal-item, .alliance__bonus-modal-item {
  display: flex;
  align-items: center;
}
.club__bonus-modal-item::before, .alliance__bonus-modal-item::before {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  width: 20px;
  background: var(--medium-bg);
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 10px;
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
}
.club__bonus--not-achieved, .alliance__bonus--not-achieved {
  color: var(--secondary-text-color);
}
.club__bonus--not-achieved::before, .alliance__bonus--not-achieved::before {
  content: "\e15b";
  color: var(--red-color);
}
.club__bonus--achieved::before, .alliance__bonus--achieved::before {
  content: "\e5ca";
  color: var(--green-color);
}
.club__bonus-item, .alliance__bonus-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.club__bonus-item:last-of-type, .alliance__bonus-item:last-of-type {
  margin-bottom: 0;
}
.club__bonus-item[data-lvl="1"] .club__bonus-icon, .alliance__bonus-item[data-lvl="1"] .club__bonus-icon {
  background: #4cd863;
}
.club__bonus-item[data-lvl="2"] .club__bonus-icon, .alliance__bonus-item[data-lvl="2"] .club__bonus-icon {
  background: #007aff;
}
.club__bonus-item[data-lvl="3"] .club__bonus-icon, .alliance__bonus-item[data-lvl="3"] .club__bonus-icon {
  background: #ff9501;
}
.club__bonus-item[data-lvl="4"] .club__bonus-icon, .alliance__bonus-item[data-lvl="4"] .club__bonus-icon {
  background: #E0908D;
}
.club__bonus-item[data-lvl="5"] .club__bonus-icon, .alliance__bonus-item[data-lvl="5"] .club__bonus-icon {
  background: #C7495C;
}
.club__bonus-item[data-lvl="6"] .club__bonus-icon, .alliance__bonus-item[data-lvl="6"] .club__bonus-icon {
  background: #e6435c;
}
.club__bonus-icon, .alliance__bonus-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  border-radius: 4px;
  color: white;
  font-size: 18px;
  margin-right: 10px;
}
.club__level-header, .alliance__level-header {
  font-size: 13px;
  display: flex;
  justify-content: space-between;
}
.club__level-header div, .alliance__level-header div {
  display: flex;
}
.club__level-header div span, .alliance__level-header div span {
  margin: 0 5px;
}
.club__level-header div div:last-of-type, .alliance__level-header div div:last-of-type {
  color: var(--secondary-text-color);
}
.club__level-footer, .alliance__level-footer {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.club__level-footer div:first-of-type, .alliance__level-footer div:first-of-type {
  color: var(--secondary-text-color);
}
.club__level-bar, .alliance__level-bar {
  width: 100%;
  height: 6px;
  background-color: var(--medium-bg);
  border-radius: var(--main-border-radius);
  margin: 8px 0;
  position: relative;
}
.club__level-bar--fill, .alliance__level-bar--fill {
  position: absolute;
  background: var(--purple-btn-bg);
  height: 6px;
  top: -1px;
  left: -1px;
  border-radius: var(--main-border-radius);
}
.club__description, .alliance__description {
  font-size: 15px;
  line-height: 22px;
  display: -webkit-box;
  align-items: center;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 4.5em; /* регулируйте высоту в зависимости от строки */
}
.club__description--pinned, .alliance__description--pinned {
  height: auto;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
  text-overflow: unset;
}
.club__description-read-button, .alliance__description-read-button {
  font-size: 15px;
  color: var(--main-purple-color);
  margin: 5px 0;
  display: none;
  cursor: pointer;
}
.club__description.club__description-show, .alliance__description.club__description-show {
  -webkit-line-clamp: unset;
  height: auto;
}
.club__description.club__description-show + .club__description-read-button, .alliance__description.club__description-show + .club__description-read-button {
  display: none;
}
.club__description.club__description-show + .club__description-read-button, .alliance__description.club__description-show + .club__description-read-button {
  display: block;
}
.club__members, .alliance__members {
  display: grid;
  justify-items: center;
  grid-template-columns: repeat(5, 1fr);
  -moz-column-gap: 25px;
       column-gap: 25px;
  row-gap: 15px;
  margin: 10px 0;
}
@media screen and (max-width: 680px) {
  .club__members, .alliance__members {
    grid-template-columns: repeat(4, 1fr);
    -moz-column-gap: 20px;
         column-gap: 20px;
  }
}
@media screen and (max-width: 540px) {
  .club__members, .alliance__members {
    -moz-column-gap: 10px;
         column-gap: 10px;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 360px) {
  .club__members, .alliance__members {
    -moz-column-gap: 10px;
         column-gap: 10px;
    grid-template-columns: repeat(2, 1fr);
  }
}
.club__member, .alliance__member {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
  margin-bottom: 10px;
}
@media screen and (max-width: 380px) {
  .club__member, .alliance__member {
    width: 80px;
  }
}
.club__member--online, .alliance__member--online {
  position: relative;
}
.club__member--online::after, .alliance__member--online::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 9px;
  width: 10px;
  height: 10px;
  background: var(--green-color);
  border-radius: 50%;
  border: 2px solid var(--light-bg);
}
.club__member-image, .alliance__member-image {
  position: relative;
  margin-bottom: 5px;
  width: 90px;
}
@media screen and (max-width: 540px) {
  .club__member-image, .alliance__member-image {
    width: 70px;
  }
}
.club__member-image img, .alliance__member-image img {
  border-radius: 50%;
}
.club__member-crown, .alliance__member-crown {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 25px;
}
.club__member-icon, .alliance__member-icon {
  position: absolute;
  top: -15px;
  left: 5%;
  transform: translateX(-50%);
}
.club__member-contribution, .alliance__member-contribution {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--main-purple-color);
  color: white;
  font-size: 12px;
  border-radius: 5px;
  padding: 2px 5px;
  border: 1px solid var(--border-color);
}
.club__member-name, .alliance__member-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 500;
}
@media screen and (max-width: 540px) {
  .club__member-name, .alliance__member-name {
    font-size: 14px;
  }
}
.club__member-name div:first-of-type, .alliance__member-name div:first-of-type {
  width: 20px;
  margin-right: 5px;
}
.club__member-status, .alliance__member-status {
  font-size: 14px;
  color: var(--secondary-text-color);
  text-align: center;
}
@media screen and (max-width: 540px) {
  .club__member-status, .alliance__member-status {
    font-size: 13px;
  }
}

.club-list {
  display: flex;
  justify-content: center;
}
.club-list__inner {
  width: 800px;
  min-width: 0;
}
.club-list__controls {
  display: flex;
  margin-bottom: 20px;
  width: 100%;
}
.club-list__controls form {
  width: 100%;
}
.club-list__controls .form__field {
  width: 100%;
  margin-bottom: 0;
}
.club-list__controls .button {
  flex-shrink: 0;
  margin-left: 10px;
}
.club-list__wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 15px;
  margin: 10px 0;
}
.club-list__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
  background: var(--light-bg);
  border-radius: 14px;
  width: 30%;
  padding: 20px;
  position: relative;
}
.club-list__item--active::before {
  position: absolute;
  top: 10px;
  left: 15px;
  background: var(--purple-btn-bg);
  color: white;
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border-radius: 50%;
  content: "1";
}
@media screen and (max-width: 540px) {
  .club-list__item {
    width: 47%;
    padding: 15px;
  }
}
.club-list__avatar {
  position: relative;
  margin-bottom: 10px;
  width: 110px;
  height: 110px;
}
@media screen and (max-width: 400px) {
  .club-list__avatar {
    width: 70px;
    height: 70px;
  }
}
.club-list__avatar img {
  border-radius: 50%;
}
.club-list__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  font-size: 20px;
  max-width: 150px;
}
@media screen and (max-width: 400px) {
  .club-list__name {
    font-size: 16px;
    max-width: 130px;
  }
}
.club-list__level {
  color: var(--secondary-text-color);
  font-size: 14px;
  margin-bottom: 10px;
}
@media screen and (max-width: 400px) {
  .club-list__level {
    font-size: 13px;
  }
}
.club-list__members {
  font-size: 14px;
  color: var(--main-text-color);
}
@media screen and (max-width: 400px) {
  .club-list__members {
    font-size: 13px;
  }
}

.club-request__name {
  margin-bottom: 10px;
  font-size: 15px;
  display: block;
}
.club-request__status {
  font-size: 14px;
  color: var(--secondary-text-color);
}
.club-request__avatar {
  margin-right: 10px;
  width: 25px;
  height: 25px;
  flex-shrink: 0;
}
.club-request__avatar img {
  border-radius: 50%;
}
.club-request__controls {
  margin-left: auto;
  display: flex;
}
@media screen and (max-width: 380px) {
  .club-request__controls {
    margin-top: 15px;
    margin-left: unset;
  }
}
.club-request__controls .button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-right: 10px;
}
.club-request__controls .button:first-of-type {
  color: var(--red-color);
}
.club-request__controls .button:last-of-type {
  margin-right: 0;
}
.club-request__controls .button:last-of-type {
  color: var(--green-color);
}
.club-request__item {
  display: flex;
  align-items: center;
  background: var(--light-bg);
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
}
@media screen and (max-width: 380px) {
  .club-request__item {
    flex-direction: column;
  }
}
.club-request__item:last-of-type {
  margin-bottom: 0;
}

.club-boost__top {
  background: var(--light-bg);
  border-radius: 10px;
  padding: 15px;
}
.club-boost__top-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.club-boost__top-item--hidden {
  display: none;
}
.club-boost__top-position {
  margin-right: 15px;
}
.club-boost__top-avatar {
  width: 35px;
  height: 35px;
  margin-right: 15px;
}
.club-boost__top-avatar img {
  border-radius: 50%;
}
.club-boost__top-name {
  font-weight: 500;
}
.club-boost__top-contribution {
  margin-left: auto;
  font-size: 14px;
  color: var(--secondary-text-color);
}
.club-boost__image {
  width: 150px;
  flex-shrink: 0;
  margin-bottom: 15px;
}
.club-boost__change {
  display: none;
}
.club-boost__inner {
  display: flex;
  background: var(--light-bg);
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 20px;
  align-items: center;
  flex-direction: column;
  position: relative;
}
.club-boost__inner-align-left {
  align-items: start;
}
.club-boost__inner--replace {
  align-items: stretch;
  padding: 18px;
}
.club-boost__replace-btn {
  background: var(--purple-btn-bg);
  color: white;
  width: 42px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 0;
  flex-shrink: 0;
  transition: 0.2s;
}
.club-boost__replace-btn:hover {
  opacity: 0.95;
  transform: rotate(90deg);
}
.club-boost__text {
  margin-bottom: 10px;
}
.club-boost__rules {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.club-boost__rules li::before {
  content: "";
  margin-right: 10px;
  vertical-align: middle;
  width: 2px;
  height: 20px;
  background: var(--purple-btn-bg);
}
.club-boost__rules li {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.club-boost__rules li:last-of-type {
  margin-bottom: 0;
}
.club-boost__avatar {
  width: 25px;
  height: 25px;
  margin-right: 5px;
  display: block;
}
.club-boost__avatar img {
  border-radius: 50%;
}
.club-boost__owners-list {
  margin: 15px 0;
  display: flex;
}
.club-boost__replace {
  width: 100%;
}
.club-boost__replace-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 15px;
}
.club-boost__replace-title {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: var(--title-color);
}
.club-boost__replace-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 600px) {
  .club-boost__replace-stats {
    grid-template-columns: 1fr;
  }
}
.club-boost__replace-item {
  background: var(--chapters-hover);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 10px 16px;
}
.club-boost__replace-item--paid .club-boost__replace-count {
  color: var(--purple-btn-bg);
}
.club-boost__replace-label {
  font-size: 13px;
  line-height: 18px;
  color: var(--secondary-text-color);
  margin-bottom: 6px;
}
.club-boost__replace-value {
  display: flex;
  align-items: end;
  gap: 8px;
}
.club-boost__replace-value small {
  font-size: 13px;
  color: var(--secondary-text-color);
  line-height: 18px;
}
.club-boost__replace-count {
  font-size: 26px;
  line-height: 28px;
  font-weight: 800;
  color: var(--title-color);
}
.club-boost__replace-note {
  font-size: 13px;
  line-height: 18px;
  color: var(--secondary-text-color);
  margin-bottom: 14px;
}
.club-boost__buy-btn {
  min-height: 42px;
  border-radius: 8px;
  padding: 0 16px;
  background: var(--medium-bg);
  color: var(--title-color);
  font-weight: 600;
  width: 100%;
}
.club-boost__buy-btn:hover {
  background: var(--chapters-hover);
}
.club-boost__action {
  border-radius: 36px;
  padding: 6px !important;
  display: flex;
  align-items: center;
  width: 100%;
  background: var(--chapters-hover);
}
.club-boost__action a {
  font-weight: 600;
}
.club-boost__action-logo {
  background: var(--red-color);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
}
.club-boost__action-logo img {
  width: 35px;
  height: 35px;
}
.club-boost__action-logo--def {
  background: #4683d9 !important;
}
.club-boost__action-info {
  display: flex;
  align-items: center;
  margin-left: -13px;
}
.club-boost__action-wrapper {
  margin-left: 10px;
}
.club-boost__action-name {
  font-weight: 500;
  font-size: 17px;
}
.club-boost__action-exp {
  font-size: 14px;
  color: var(--secondary-text-color);
}
.club-boost__action-points {
  height: 35px;
  width: 35px;
  background: var(--red-color);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 900;
  margin-left: auto;
}
.club-boost__action-points--def {
  background: #4683d9 !important;
}
.club-boost__action-avatar {
  width: 38px;
  height: 38px;
}
.club-boost__action-avatar img {
  border-radius: 50%;
}

body.dark .club-boost__replace-item {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
body.dark .club-boost__buy-btn {
  background: rgba(255, 255, 255, 0.06);
  color: var(--white-color);
}
body.dark .club-boost__buy-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.club-create {
  display: flex;
  justify-content: center;
}
.club-create .form {
  width: 500px;
}

.club-card-notify {
  position: fixed;
  bottom: 11px;
  padding: 15px;
  z-index: 1200;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  background: var(--light-bg);
  display: flex;
  align-items: center;
}
.club-card-notify img {
  width: 25px;
  height: auto;
  margin-right: 10px;
  border-radius: var(--main-border-radius);
}

.club-history {
  margin-top: 30px;
}
.club-history__card-name {
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 10px;
  text-align: center;
}
.club-history__user-name {
  font-weight: 500;
  font-size: 18px;
}
.club-history__item {
  display: flex;
  flex-direction: column;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
}
.club-history__avatar {
  margin-right: 5px;
}
.club-history__avatar img {
  border-radius: 50%;
  width: 25px;
  height: 25px;
}
.club-history__name {
  font-weight: 500;
}
.club-history__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.club-history__row:first-of-type {
  margin-bottom: 15px;
}
.club-history__card {
  width: 50px;
  position: relative;
}
.club-history__card-label {
  position: absolute;
  top: -4px;
  right: -6px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
}
.club-history__card-label img {
  width: 15px;
  height: 15px;
}
.club-history__card-label--def {
  background: #4683d9;
}
.club-history__card-label--war {
  background: var(--red-color);
}
.club-history__card img {
  border-radius: var(--main-border-radius);
}
.club-history__date {
  margin-left: auto;
  font-size: 14px;
  color: var(--secondary-text-color);
}

.club-top-list {
  display: flex;
  margin-bottom: 35px;
}
.club-top-list__item {
  position: relative;
  width: 285px;
  height: 120px;
  margin-right: 22px;
  background-position: center;
  background-size: cover;
  border-radius: 16px;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.16);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.club-top-list__item:hover {
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
}
.club-top-list__item[data-place="1"] {
  box-shadow: 0 18px 45px rgba(234, 204, 127, 0.32);
}
.club-top-list__item[data-place="2"] {
  box-shadow: 0 18px 45px rgba(180, 190, 210, 0.25);
}
.club-top-list__item[data-place="3"] {
  box-shadow: 0 18px 45px rgba(190, 120, 70, 0.23);
}
.club-top-list__item[data-place="122"] .club-top-list__place {
  visibility: hidden;
}
.club-top-list__item--updated {
  animation: clubTopPulse 0.75s ease;
}
.club-top-list__item--place-up {
  animation: clubTopPlaceUp 0.85s ease;
}
.club-top-list__item--place-down {
  animation: clubTopPlaceDown 0.85s ease;
}
.club-top-list__inner {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 13px 16px;
}
.club-top-list__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.32) 55%, rgba(0, 0, 0, 0.55)), radial-gradient(circle at 90% 10%, rgba(139, 0, 255, 0.35), transparent 38%);
  border-radius: 16px;
}
.club-top-list__shine {
  position: absolute;
  top: -50%;
  left: -70%;
  z-index: 2;
  width: 60%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: rotate(18deg);
  opacity: 0;
  pointer-events: none;
}
.club-top-list__item--updated .club-top-list__shine {
  animation: clubTopShine 0.75s ease;
}
.club-top-list__content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.club-top-list__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.club-top-list__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
}
.club-top-list__place {
  display: flex;
  align-items: center;
  font-size: 22px;
  line-height: 1;
  font-weight: 800;
  background: linear-gradient(160deg, #ffe69b 16%, #c59c42 64%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.club-top-list__place img {
  width: 28px !important;
  margin-right: 5px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}
.club-top-list__badge {
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(139, 0, 255, 0.9);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(139, 0, 255, 0.35);
  white-space: nowrap;
}
.club-top-list__name {
  display: -webkit-box;
  max-width: 210px;
  margin-top: auto;
  margin-bottom: 7px;
  overflow: hidden;
  color: #fff;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.15;
  text-decoration: none;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.club-top-list__count {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
}
.club-top-list__count strong {
  color: #fff;
  font-size: 17px;
  font-weight: 800;
}
.club-top-list__gain {
  display: none;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0, 153, 51, 0.92);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(0, 153, 51, 0.25);
  white-space: nowrap;
}
.club-top-list__move {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 5;
  padding: 5px 9px;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  animation: clubTopMoveBadge 1.4s ease forwards;
  pointer-events: none;
}
.club-top-list__move--up {
  background: rgba(0, 153, 51, 0.95);
  box-shadow: 0 8px 20px rgba(0, 153, 51, 0.35);
}
.club-top-list__move--down {
  background: rgba(252, 54, 59, 0.95);
  box-shadow: 0 8px 20px rgba(252, 54, 59, 0.35);
}

.club-boost-feed {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9999;
  width: 320px;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
}
.club-boost-feed__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(22, 20, 32, 0.96), rgba(45, 31, 72, 0.96));
  color: #fff;
  transform: translateX(30px) translateY(8px) scale(0.96);
  opacity: 0;
  transition: 0.3s ease;
  overflow: hidden;
}
.club-boost-feed__item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(139, 0, 255, 0.35), transparent 45%);
  pointer-events: none;
}
.club-boost-feed__item--show {
  transform: translateX(0) translateY(0) scale(1);
  opacity: 1;
}
.club-boost-feed__cover {
  position: relative;
  z-index: 2;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.club-boost-feed__content {
  position: relative;
  z-index: 2;
  min-width: 0;
  flex: 1;
}
.club-boost-feed__title {
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.club-boost-feed__text {
  margin-top: 2px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.68);
}
.club-boost-feed__exp {
  position: relative;
  z-index: 2;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(0, 153, 51, 0.95);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(0, 153, 51, 0.35);
  white-space: nowrap;
}

@keyframes clubTopPulse {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.035);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes clubTopShine {
  0% {
    left: -70%;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    left: 120%;
    opacity: 0;
  }
}
@keyframes clubTopMoveBadge {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.9);
  }
  20% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  75% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
}
@keyframes clubTopPlaceUp {
  0% {
    transform: translateY(0);
  }
  35% {
    transform: translateY(-8px) scale(1.04);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes clubTopPlaceDown {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  35% {
    transform: translateY(6px) scale(0.98);
    opacity: 0.75;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@media (max-width: 768px) {
  .club-top-list {
    margin-bottom: 25px;
  }
  .club-top-list__item {
    width: 250px;
    height: 112px;
    margin-right: 14px;
  }
  .club-top-list__inner {
    padding: 12px 14px;
  }
  .club-top-list__name {
    max-width: 185px;
    font-size: 18px;
  }
  .club-top-list__place {
    font-size: 20px;
  }
  .club-top-list__place img {
    width: 25px !important;
  }
  .club-boost-feed {
    right: 12px;
    left: 12px;
    bottom: 14px;
    width: auto;
  }
  .club-boost-feed__item {
    padding: 9px 10px;
    border-radius: 14px;
  }
}
.club-cards__item {
  width: 120px;
  margin-right: 12px;
  display: block;
}

.alliance-editor {
  padding: 20px;
  max-width: 900px;
  margin: 0 auto;
}
.alliance-editor .alliance-editor__form .form__field {
  max-width: 100%;
}
.alliance-editor__title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 30px;
  text-align: center;
}
.alliance-editor__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}
.alliance-editor__card {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 20px;
  text-align: center;
}
.alliance-editor__label {
  font-size: 20px;
  margin-bottom: 15px;
  font-weight: 500;
}
.alliance-editor__preview {
  width: 100%;
  max-height: 200px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 8px;
  margin-bottom: 15px;
}
.alliance-editor__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.alliance-editor__file {
  font-size: 14px;
}

.alliance-boost__block {
  background: var(--medium-bg);
  padding: 10px;
  border-radius: var(--main-border-radius);
  font-size: 13px;
}
.alliance-boost__title {
  font-size: 22px;
  margin-bottom: 10px;
}
.alliance-boost__change-manga-btn {
  position: absolute !important;
  top: 23px;
  right: 15px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px !important;
  padding: 3px 6px !important;
  font-size: 16px !important;
}
.alliance-boost__card {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  background: var(--dark-grey-bg);
  padding: 15px 10px;
  border-radius: 10px;
  flex-direction: column;
  text-align: center;
}
.alliance-boost__card-image {
  width: 65px;
  margin-bottom: 10px;
}
.alliance-boost__card-image img {
  border-radius: var(--main-border-radius);
}
.alliance-boost__card-controls {
  margin-top: 20px;
}
.alliance-boost__card-exp {
  background: #706677;
  color: white;
  display: inline-flex;
  padding: 3px 8px;
  border-radius: var(--main-border-radius);
  font-size: 13px;
  margin-top: 7px;
}
.alliance-boost__card-exp span {
  margin-right: 5px;
}
.alliance-boost__buttons {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 500px) {
  .alliance-boost__buttons {
    flex-direction: column;
  }
}
.alliance-boost__buttons button {
  width: 49%;
  font-size: 14px;
}
@media screen and (max-width: 500px) {
  .alliance-boost__buttons button {
    width: 100%;
  }
  .alliance-boost__buttons button:first-of-type {
    margin-bottom: 15px;
  }
}

.alliance__bonus-item .alliance__bonus-icon {
  color: #fff;
}
.alliance__bonus-item[data-lvl="1"] .alliance__bonus-icon {
  background-color: #28b463;
}
.alliance__bonus-item[data-lvl="2"] .alliance__bonus-icon {
  background-color: #2e86de;
}
.alliance__bonus-item[data-lvl="3"] .alliance__bonus-icon {
  background-color: #f39c12;
}
.alliance__bonus-item[data-lvl="4"] .alliance__bonus-icon {
  background-color: #bdc3c7;
}
.alliance__bonus-item[data-lvl="5"] .alliance__bonus-icon {
  background-color: #a93226;
}
.alliance__bonus-item[data-lvl="6"] .alliance__bonus-icon {
  background-color: #c2185b;
}
.alliance__bonus-item[data-lvl="7"] .alliance__bonus-icon {
  background-color: #7d3c98;
}

.club__rewards-item-image {
  position: relative;
}

.club__rewards-item-count {
  position: absolute;
  bottom: 15px;
  right: 21px;
  background: var(--light-bg);
  padding: 2px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.alliance-gift {
  background: var(--light-bg);
  color: var(--main-text-color);
  border-radius: 18px;
  padding: 14px 14px 12px;
  box-shadow: 0 10px 26px rgba(20, 20, 40, 0.06);
  border: 1px solid rgba(120, 70, 255, 0.1);
  overflow: hidden;
}

.alliance-gift__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.alliance-gift__title {
  font-weight: 800;
  font-size: 18px;
  line-height: 1.15;
  color: var(--main-text-color);
}

.alliance-gift__subtitle {
  margin-top: 6px;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.25;
  color: var(--secondary-text-color);
}

.alliance-gift__badge {
  flex: 0 0 auto;
  padding: 8px 10px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 12px;
  color: #5b2bff;
  background: rgba(120, 70, 255, 0.1);
  border: 1px solid rgba(120, 70, 255, 0.18);
}

.alliance-gift__progress {
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(120, 70, 255, 0.08), rgba(120, 70, 255, 0.03));
  border: 1px solid rgba(120, 70, 255, 0.1);
}

.alliance-gift__progress-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 10px;
}

.alliance-gift__progress-text {
  font-size: 13px;
  color: var(--main-text-color);
}

.alliance-gift__progress-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--main-text-color);
  white-space: nowrap;
}

.alliance-gift__bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(20, 20, 39, 0.08);
  overflow: hidden;
}

.alliance-gift__bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #6f39ff, #a56bff);
  box-shadow: 0 6px 18px rgba(120, 70, 255, 0.25);
}

.alliance-gift__hint {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.25;
  color: var(--main-text-color);
}

.alliance-gift__actions {
  margin-top: 12px;
}

.alliance-gift__btn {
  width: 100%;
  border: none;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  color: white;
  background: linear-gradient(90deg, #6f39ff, #a56bff);
  box-shadow: 0 12px 24px rgba(120, 70, 255, 0.24);
  transition: transform 0.12s ease, filter 0.12s ease;
}

.alliance-gift__btn:active {
  transform: scale(0.99);
  filter: brightness(0.98);
}

.alliance-gift__btn--disabled {
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.75);
  background: linear-gradient(90deg, rgba(120, 70, 255, 0.55), rgba(165, 107, 255, 0.45));
  box-shadow: none;
}

.alliance-gift__loot {
  margin-top: 12px;
}

.alliance-gift__loot-title {
  font-size: 13px;
  font-weight: 800;
  color: rgba(20, 20, 39, 0.8);
  margin-bottom: 10px;
}

.alliance-gift__loot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.alliance-gift__loot-item {
  border-radius: 14px;
  padding: 10px 10px;
  border: 1px solid rgba(20, 20, 39, 0.08);
  background: rgba(20, 20, 39, 0.02);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.alliance-gift__loot-item span {
  font-size: 13px;
  font-weight: 800;
  color: rgba(20, 20, 39, 0.78);
}

.alliance-gift__loot-item small {
  font-size: 12px;
  color: rgba(20, 20, 39, 0.52);
}

.alliance-gift__footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(20, 20, 39, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.alliance-gift__footer-left {
  font-size: 12px;
  color: rgba(20, 20, 39, 0.65);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.alliance-gift__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #6f39ff;
  box-shadow: 0 0 0 4px rgba(120, 70, 255, 0.12);
}

.alliance-gift__history {
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  color: #6f39ff;
}

.alliance-gift-container {
  margin-top: 10px;
}

.reward-toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 99999;
  width: calc(100% - 24px);
  max-width: 520px;
}

.reward-toast__card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 12px 12px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(20, 20, 40, 0.18);
  border: 1px solid rgba(120, 70, 255, 0.14);
  display: flex;
  gap: 12px;
  align-items: center;
  transform: translateY(18px);
  opacity: 0;
}

.reward-toast__glow {
  position: absolute;
  inset: -40px;
  background: radial-gradient(circle at 30% 20%, rgba(120, 70, 255, 0.18), transparent 55%);
  pointer-events: none;
}

.reward-toast__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: rgba(120, 70, 255, 0.1);
  border: 1px solid rgba(120, 70, 255, 0.18);
  position: relative;
}

.reward-toast__content {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.reward-toast__title {
  font-weight: 900;
  font-size: 14px;
  color: #15152a;
  line-height: 1.15;
}

.reward-toast__text {
  margin-top: 4px;
  font-size: 13px;
  color: rgba(20, 20, 39, 0.7);
  line-height: 1.25;
}

.reward-toast__text b {
  color: #6f39ff;
}

.reward-toast__close {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(20, 20, 39, 0.55);
  background: rgba(20, 20, 39, 0.04);
  border: 1px solid rgba(20, 20, 39, 0.06);
}

.reward-toast--show .reward-toast__card {
  animation: rewardToastIn 0.22s ease forwards;
}

.reward-toast--hide .reward-toast__card {
  animation: rewardToastOut 0.2s ease forwards;
}

@keyframes rewardToastIn {
  from {
    transform: translateY(18px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes rewardToastOut {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(18px);
    opacity: 0;
  }
}
.club-pack-roulette {
  --roulette-card-width: 140px;
  --roulette-card-height: 196px;
  --roulette-gap: 14px;
  position: relative;
  width: 100%;
  margin: 10px auto;
  padding: 14px;
  background: var(--light-bg);
  border-radius: 24px;
}
.club-pack-roulette__launcher {
  margin-bottom: 14px;
  border-radius: 22px;
  background: var(--light-bg);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.club-pack-roulette__launcher:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.08);
}
.club-pack-roulette__launcher.is-shake {
  animation: club-pack-roulette-shake 0.35s ease;
}
.club-pack-roulette__launcher--empty {
  background: var(--grey-background);
}
.club-pack-roulette__launcher-inner {
  min-height: 84px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.club-pack-roulette__launcher-left {
  min-width: 0;
  flex: 1 1 auto;
}
.club-pack-roulette__launcher-right {
  flex: 0 0 auto;
  text-align: right;
  min-width: 110px;
}
.club-pack-roulette__launcher-title {
  font-size: 18px;
  line-height: 1.15;
  font-weight: 800;
  color: var(--title-color);
}
.club-pack-roulette__launcher-subtitle {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--secondary-text-color);
}
.club-pack-roulette__launcher-label {
  font-size: 13px;
  line-height: 1.2;
  color: var(--secondary-text-color);
}
.club-pack-roulette__launcher-value {
  margin-top: 4px;
  font-size: 38px;
  line-height: 1;
  font-weight: 800;
  color: var(--main-purple-color);
}
.club-pack-roulette__launcher-empty-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--rating-bg-red);
  color: var(--red-color);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.club-pack-roulette__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s ease;
}
.club-pack-roulette.is-open .club-pack-roulette__panel {
  max-height: 1200px;
}
.club-pack-roulette__header {
  text-align: center;
  margin-bottom: 12px;
  padding-top: 4px;
}
.club-pack-roulette__title {
  font-size: 24px;
  line-height: 1.15;
  font-weight: 800;
  color: var(--title-color);
}
.club-pack-roulette__subtitle {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--secondary-text-color);
}
.club-pack-roulette__board {
  position: relative;
}
.club-pack-roulette__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 220px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 0, 255, 0.1) 0%, rgba(139, 0, 255, 0.04) 40%, transparent 72%);
  pointer-events: none;
  z-index: 1;
}
.club-pack-roulette__flash {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px;
  height: 180px;
  transform: translate(-50%, -50%) scale(0.3);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(139, 0, 255, 0.22) 35%, rgba(139, 0, 255, 0) 78%);
  opacity: 0;
  pointer-events: none;
  z-index: 6;
}
.club-pack-roulette__flash.is-animated {
  animation: club-pack-roulette-flash 0.75s ease-out;
}
.club-pack-roulette__sparks {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 260px;
  height: 260px;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  z-index: 6;
}
.club-pack-roulette__sparks::before, .club-pack-roulette__sparks::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0%, rgba(139, 0, 255, 0.85) 0 3px, transparent 4px), radial-gradient(circle at 100% 50%, rgba(139, 0, 255, 0.7) 0 3px, transparent 4px), radial-gradient(circle at 50% 100%, rgba(139, 0, 255, 0.85) 0 3px, transparent 4px), radial-gradient(circle at 0% 50%, rgba(139, 0, 255, 0.7) 0 3px, transparent 4px), radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.95) 0 2px, transparent 3px), radial-gradient(circle at 80% 22%, rgba(255, 255, 255, 0.95) 0 2px, transparent 3px), radial-gradient(circle at 22% 80%, rgba(255, 255, 255, 0.95) 0 2px, transparent 3px), radial-gradient(circle at 78% 78%, rgba(255, 255, 255, 0.95) 0 2px, transparent 3px);
}
.club-pack-roulette__sparks.is-animated {
  animation: club-pack-roulette-sparks 0.95s ease-out;
}
.club-pack-roulette__viewport {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 16px 0;
  background: var(--light-bg);
  z-index: 2;
}
.club-pack-roulette__track {
  display: flex;
  align-items: center;
  gap: var(--roulette-gap);
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.club-pack-roulette__item {
  width: var(--roulette-card-width);
  flex: 0 0 var(--roulette-card-width);
  transition: transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
  opacity: 0.82;
  filter: saturate(0.94);
}
.club-pack-roulette__item.is-active {
  transform: scale(1.05);
  opacity: 1;
}
.club-pack-roulette__item.is-winning {
  animation: club-pack-roulette-winning-card 1.1s ease-in-out infinite alternate;
}
.club-pack-roulette__item.is-finished {
  animation: club-pack-roulette-finished-card 0.85s ease-out;
}
.club-pack-roulette__item-image {
  display: block;
  padding: 5px;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 18px;
  background: var(--dark-grey-bg);
}
.club-pack-roulette__item-rank, .club-pack-roulette__item-name, .club-pack-roulette__item-overlay {
  display: none !important;
}
.club-pack-roulette__shade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 110px;
  z-index: 3;
  pointer-events: none;
}
.club-pack-roulette__shade--left {
  left: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.84) 38%, rgba(255, 255, 255, 0) 100%);
}
.club-pack-roulette__shade--right {
  right: 0;
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.84) 38%, rgba(255, 255, 255, 0) 100%);
}
.club-pack-roulette__center-line {
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 50%;
  width: 4px;
  transform: translateX(-50%);
  border-radius: 999px;
  z-index: 4;
  background: linear-gradient(180deg, rgba(139, 0, 255, 0) 0%, rgba(139, 0, 255, 0.95) 18%, rgba(139, 0, 255, 0.95) 82%, rgba(139, 0, 255, 0) 100%);
  box-shadow: 0 0 18px rgba(139, 0, 255, 0.35);
}
.club-pack-roulette__center-line::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 12px;
  height: 12px;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 2px;
  background: var(--main-purple-color);
  box-shadow: 0 0 14px rgba(139, 0, 255, 0.35);
}
.club-pack-roulette__footer {
  margin-top: 16px;
  text-align: center;
}
.club-pack-roulette__button {
  min-width: 260px;
  max-width: 100%;
  height: 42px;
  padding: 0 22px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #7a2cff 0%, #963cff 100%);
  color: var(--white-color);
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 12px 26px rgba(139, 0, 255, 0.18);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.club-pack-roulette__button:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(139, 0, 255, 0.22);
}
.club-pack-roulette__button:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}
.club-pack-roulette.is-empty .club-pack-roulette__button {
  opacity: 0.55;
  pointer-events: none;
}
.club-pack-roulette__modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.club-pack-roulette__modal.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.club-pack-roulette__modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.club-pack-roulette__modal-window {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% - 24px);
  max-width: 360px;
  transform: translate(-50%, -50%) scale(0.92);
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  border-radius: 22px;
  padding: 18px 16px 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25);
  text-align: center;
  transition: transform 0.3s ease;
  z-index: 2;
}
.club-pack-roulette__modal.is-visible .club-pack-roulette__modal-window {
  transform: translate(-50%, -50%) scale(1);
}
.club-pack-roulette__modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--medium-bg);
  color: var(--title-color);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.club-pack-roulette__modal-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(139, 0, 255, 0.08);
  color: var(--main-purple-color);
  font-size: 12px;
  font-weight: 800;
}
.club-pack-roulette__modal-card {
  width: 180px;
  height: 252px;
  margin: 14px auto 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.7);
}
.club-pack-roulette__modal-card img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.club-pack-roulette__modal-name {
  margin-top: 14px;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 800;
  color: var(--title-color);
}
.club-pack-roulette__modal-rank {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--secondary-text-color);
}
@media (max-width: 768px) {
  .club-pack-roulette {
    --roulette-card-width: 112px;
    --roulette-card-height: 158px;
    --roulette-gap: 10px;
    padding: 12px;
    border-radius: 18px;
  }
  .club-pack-roulette__launcher-inner {
    min-height: 72px;
    padding: 12px 14px;
    gap: 10px;
  }
  .club-pack-roulette__launcher-title {
    font-size: 15px;
  }
  .club-pack-roulette__launcher-subtitle {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.25;
  }
  .club-pack-roulette__launcher-right {
    min-width: 88px;
  }
  .club-pack-roulette__launcher-label {
    font-size: 11px;
  }
  .club-pack-roulette__launcher-value {
    font-size: 28px;
  }
  .club-pack-roulette__title {
    font-size: 18px;
  }
  .club-pack-roulette__subtitle {
    font-size: 12px;
    line-height: 1.25;
  }
  .club-pack-roulette__viewport {
    border-radius: 18px;
    padding: 12px 0;
  }
  .club-pack-roulette__shade {
    width: 64px;
  }
  .club-pack-roulette__center-line {
    width: 3px;
  }
  .club-pack-roulette__button {
    width: 100%;
    min-width: 0;
    height: 48px;
    border-radius: 14px;
    font-size: 15px;
  }
  .club-pack-roulette__modal-window {
    max-width: 320px;
    padding: 16px 14px 14px;
  }
  .club-pack-roulette__modal-card {
    width: 150px;
    height: 210px;
  }
  .club-pack-roulette__modal-name {
    font-size: 17px;
  }
  .club-pack-roulette__modal-rank {
    font-size: 13px;
  }
}
@media (max-width: 420px) {
  .club-pack-roulette__launcher-inner {
    align-items: flex-start;
  }
  .club-pack-roulette__launcher-title {
    font-size: 14px;
  }
  .club-pack-roulette__launcher-subtitle {
    font-size: 11px;
    max-width: 135px;
  }
  .club-pack-roulette__launcher-right {
    min-width: 82px;
  }
  .club-pack-roulette__launcher-value {
    font-size: 24px;
  }
  .club-pack-roulette__title {
    font-size: 17px;
  }
  .club-pack-roulette__subtitle {
    font-size: 11px;
  }
  .club-pack-roulette__shade {
    width: 52px;
  }
}

body.club-pack-roulette-modal-open {
  overflow: hidden;
}

@keyframes club-pack-roulette-shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  50% {
    transform: translateX(4px);
  }
  75% {
    transform: translateX(-4px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes club-pack-roulette-flash {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
  }
  35% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.5);
  }
}
@keyframes club-pack-roulette-sparks {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4) rotate(0deg);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.2) rotate(24deg);
  }
}
@keyframes club-pack-roulette-winning-card {
  0% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1.09);
  }
}
@keyframes club-pack-roulette-finished-card {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1.05);
  }
}
body.dark .club-pack-roulette__viewport {
  background: radial-gradient(circle at center, rgba(139, 0, 255, 0.08) 0%, rgba(139, 0, 255, 0.03) 38%, transparent 70%), linear-gradient(180deg, #181818 0%, #121212 100%);
}
body.dark .club-pack-roulette__shade--left {
  background: linear-gradient(90deg, rgba(18, 18, 18, 0.96) 0%, rgba(18, 18, 18, 0.82) 38%, rgba(18, 18, 18, 0) 100%);
}
body.dark .club-pack-roulette__shade--right {
  background: linear-gradient(270deg, rgba(18, 18, 18, 0.96) 0%, rgba(18, 18, 18, 0.82) 38%, rgba(18, 18, 18, 0) 100%);
}

.club-pack-roulette__top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.club-pack-roulette__history-button {
  height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: var(--purple-btn-bg);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease;
}

.club-pack-roulette__history-button:hover {
  opacity: 0.9;
}

.club-pack-roulette__history-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.club-pack-roulette__history-modal--active {
  display: block;
}

.club-pack-roulette__history-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.club-pack-roulette__history-window {
  position: relative;
  z-index: 2;
  width: calc(100% - 20px);
  max-width: 760px;
  max-height: 80vh;
  margin: 40px auto 0;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
}

.club-pack-roulette__history-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.club-pack-roulette__history-title {
  padding: 20px 24px;
  font-size: 22px;
  font-weight: 700;
  border-bottom: 1px solid var(--border-color);
}

.club-pack-roulette__history-list {
  padding: 0 24px 24px;
  max-height: calc(80vh - 80px);
  overflow-y: auto;
}

.club-pack-roulette__history-item {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr 70px 130px;
  gap: 12px;
  align-items: center;
  min-height: 56px;
  border-bottom: 1px solid var(--border-color);
}

.club-pack-roulette__history-user,
.club-pack-roulette__history-card,
.club-pack-roulette__history-rank,
.club-pack-roulette__history-date {
  padding: 10px 0;
}

.club-pack-roulette__history-user a,
.club-pack-roulette__history-card a {
  color: var(--main-text-color);
  text-decoration: none;
}

.club-pack-roulette__history-user a:hover,
.club-pack-roulette__history-card a:hover {
  color: var(--purple-btn-bg);
}

.club-pack-roulette__history-rank {
  text-align: center;
  font-weight: 700;
}

.club-pack-roulette__history-date {
  text-align: right;
  color: var(--secondary-text-color);
  font-size: 13px;
}

.club-pack-roulette__history-empty {
  padding: 24px 0;
  text-align: center;
  color: var(--secondary-text-color);
}

.club-pack-roulette__body-lock {
  overflow: hidden;
}

@media (max-width: 768px) {
  .club-pack-roulette__history-window {
    margin-top: 20px;
    max-height: calc(100vh - 40px);
  }
  .club-pack-roulette__history-list {
    max-height: calc(100vh - 120px);
    padding: 0 16px 16px;
  }
  .club-pack-roulette__history-title {
    padding: 18px 16px;
    font-size: 18px;
  }
  .club-pack-roulette__history-item {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 10px 0;
  }
  .club-pack-roulette__history-user,
  .club-pack-roulette__history-card,
  .club-pack-roulette__history-rank,
  .club-pack-roulette__history-date {
    padding: 3px 0;
    text-align: left;
  }
}
.club-pack-roulette__history-button {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(119, 44, 232, 0.18);
  background: rgba(119, 44, 232, 0.06);
  color: var(--purple-btn-bg);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s ease;
}

.club-pack-roulette__history-button:hover {
  background: rgba(119, 44, 232, 0.12);
  border-color: rgba(119, 44, 232, 0.25);
}

.club-pack-roulette__history-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.club-pack-roulette__history-modal--active {
  display: block;
}

.club-pack-roulette__history-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.club-pack-roulette__history-window {
  position: relative;
  z-index: 2;
  width: 640px;
  max-width: calc(100% - 20px);
  margin: 70px auto;
  background: var(--light-bg);
  border-radius: var(--secondary-border-radius);
  border: 1px solid var(--border-color);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
}

.club-pack-roulette__history-title {
  padding: 18px 22px;
  font-size: 20px;
  font-weight: 700;
  color: var(--title-color);
  border-bottom: 1px solid var(--border-color);
}

.club-pack-roulette__history-list {
  max-height: 420px;
  overflow-y: auto;
  padding: 8px 22px 16px;
}

.club-pack-roulette__history-item {
  display: grid;
  grid-template-columns: 1.2fr 1.5fr 60px 100px;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 14px;
  color: var(--main-text-color);
}

.club-pack-roulette__history-user a,
.club-pack-roulette__history-card a {
  text-decoration: none;
  color: var(--main-text-color);
}

.club-pack-roulette__history-user a:hover,
.club-pack-roulette__history-card a:hover {
  color: var(--purple-btn-bg);
}

.club-pack-roulette__history-rank {
  text-align: center;
  font-weight: 700;
}

.club-pack-roulette__history-date {
  text-align: right;
  font-size: 12px;
  color: var(--secondary-text-color);
}

.club-pack-roulette__history-empty {
  padding: 18px 0;
  text-align: center;
  color: var(--secondary-text-color);
}

.club-pack-roulette__history-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--medium-bg);
  color: var(--main-text-color);
  font-size: 18px;
  cursor: pointer;
}

.club-pack-roulette__history-close:hover {
  background: var(--seconday-bg-color);
}

.club-pack-roulette__body-lock {
  overflow: hidden;
}

.club-edit-page {
  padding: 0 0 40px;
}
.club-edit-page__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  color: var(--main-purple-color);
  text-decoration: none;
  font-size: 16px;
  line-height: 1.2;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.club-edit-page__back:hover {
  opacity: 0.8;
  color: var(--main-purple-color);
}
.club-edit-page__back i {
  font-size: 13px;
}
.club-edit-page__card {
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  border-radius: 30px;
  overflow: hidden;
}
.club-edit-page__header {
  padding: 32px 24px 24px;
  background: radial-gradient(circle at top right, rgba(139, 0, 255, 0.08), transparent 32%), linear-gradient(180deg, #fff 0%, #faf8fc 100%);
  border-bottom: 1px solid var(--border-color);
}
.club-edit-page__title {
  margin-bottom: 22px;
  color: var(--title-color);
}
.club-edit-page__requirements {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.club-edit-page__requirement {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 18px;
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  color: var(--main-text-color);
  font-size: 15px;
  line-height: 1.3;
  text-align: center;
}
.club-edit-page__requirement strong {
  display: inline-block;
  margin-left: 6px;
  font-weight: 700;
  color: var(--title-color);
}
.club-edit-page__notice {
  margin: 12px auto 0;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  padding: 10px 14px;
  background: var(--notification-not-read-color);
  border: 1px solid rgba(139, 0, 255, 0.1);
  border-radius: 12px;
  color: var(--main-purple-color);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}
.club-edit-page__form-wrap {
  padding: 24px;
}
.club-edit-page__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.club-edit-page__section {
  padding: 24px;
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  border-radius: 24px;
}
.club-edit-page__section-title {
  margin-bottom: 18px;
  color: var(--title-color);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
}
.club-edit-page__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.club-edit-page__grid + .club-edit-page__grid {
  margin-top: 16px;
}
.club-edit-page .form__title {
  margin-bottom: 10px;
  color: var(--secondary-text-color);
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
}
.club-edit-page .form__field {
  width: 100%;
  height: 56px;
  padding: 0 18px;
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  color: var(--main-text-color);
  font-size: 16px;
  line-height: 1.2;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.club-edit-page .form__field::-moz-placeholder {
  color: var(--secondary-text-color);
}
.club-edit-page .form__field::placeholder {
  color: var(--secondary-text-color);
}
.club-edit-page .form__field:focus {
  outline: none;
  border-color: rgba(139, 0, 255, 0.28);
  box-shadow: 0 0 0 4px rgba(139, 0, 255, 0.06);
}
.club-edit-page textarea.form__field {
  min-height: 120px;
  height: auto;
  padding: 16px 18px;
  resize: vertical;
  line-height: 1.45;
}
.club-edit-page .form__upload {
  width: 100%;
}
.club-edit-page .form__upload + .form__upload {
  margin-top: 14px;
}
.club-edit-page .form__upload-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.club-edit-page .form__upload-label {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.club-edit-page .form__upload-label:hover {
  border-color: rgba(139, 0, 255, 0.2);
  box-shadow: 0 8px 20px rgba(139, 0, 255, 0.05);
}
.club-edit-page .form__upload-button {
  flex: 0 0 220px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 20px;
  background: linear-gradient(180deg, #8438ee 0%, #6f2ce8 100%);
  border-radius: 12px;
  color: var(--white-color);
  font-size: 16px;
  line-height: 1;
  font-weight: 600;
  text-align: center;
  box-sizing: border-box;
}
.club-edit-page .form__upload-name {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--title-color);
  font-size: 15px;
  line-height: 1.3;
  word-break: break-word;
}
.club-edit-page__select {
  width: 100%;
  height: 56px;
  padding: 0 46px 0 18px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--light-bg);
  background-image: none;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  color: var(--main-text-color);
  font-size: 16px;
  line-height: 1.2;
  box-sizing: border-box;
  cursor: pointer;
}
.club-edit-page__select:focus {
  outline: none;
  border-color: rgba(139, 0, 255, 0.28);
  box-shadow: 0 0 0 4px rgba(139, 0, 255, 0.06);
}
.club-edit-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 2px;
}
.club-edit-page__btn-main, .club-edit-page__btn-delete, .club-edit-page__btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  height: 52px;
  padding: 0 22px;
  border-radius: 14px;
  font-size: 16px;
  line-height: 1;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  margin: 0 !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.club-edit-page__btn-main.button, .club-edit-page__btn-delete.button, .club-edit-page__btn-secondary.button {
  min-height: unset;
}
.club-edit-page__btn-main {
  background: linear-gradient(180deg, #8438ee 0%, #6f2ce8 100%);
  color: var(--white-color);
  border: 1px solid transparent;
}
.club-edit-page__btn-main:hover {
  color: var(--white-color);
  transform: translateY(-1px);
}
.club-edit-page__btn-delete {
  background: var(--medium-bg);
  color: var(--title-color);
  border: 1px solid transparent;
}
.club-edit-page__btn-delete:hover {
  color: var(--title-color);
  background: var(--dark-grey-bg);
}
.club-edit-page__btn-secondary {
  background: var(--medium-bg);
  color: var(--title-color);
  border: 1px solid transparent;
}
.club-edit-page__btn-secondary:hover {
  color: var(--title-color);
  background: var(--dark-grey-bg);
}
@media (max-width: 900px) {
  .club-edit-page__card {
    border-radius: 24px;
  }
  .club-edit-page__header {
    padding: 24px 18px 18px;
  }
  .club-edit-page__title {
    margin-bottom: 18px;
  }
  .club-edit-page__requirements {
    gap: 10px;
  }
  .club-edit-page__requirement {
    width: 100%;
    min-height: 44px;
    font-size: 14px;
    padding: 10px 14px;
    border-radius: 14px;
  }
  .club-edit-page__form-wrap {
    padding: 18px;
  }
  .club-edit-page__section {
    padding: 18px;
    border-radius: 20px;
  }
  .club-edit-page__section-title {
    margin-bottom: 16px;
    font-size: 20px;
  }
  .club-edit-page__grid {
    grid-template-columns: 1fr;
  }
  .club-edit-page .form__field, .club-edit-page__select {
    height: 54px;
    font-size: 15px;
  }
  .club-edit-page .form__upload-button {
    flex: 0 0 190px;
    height: 46px;
    font-size: 15px;
  }
  .club-edit-page .form__upload-name {
    font-size: 14px;
  }
  .club-edit-page__btn-main, .club-edit-page__btn-delete, .club-edit-page__btn-secondary {
    min-width: 160px;
    height: 48px;
    font-size: 15px;
  }
}
@media (max-width: 640px) {
  .club-edit-page {
    padding-bottom: 24px;
  }
  .club-edit-page__back {
    margin-bottom: 12px;
    font-size: 14px;
  }
  .club-edit-page__card {
    border-radius: 18px;
  }
  .club-edit-page__header {
    padding: 20px 14px 16px;
  }
  .club-edit-page__title {
    margin-bottom: 16px;
  }
  .club-edit-page__requirements {
    gap: 8px;
  }
  .club-edit-page__requirement {
    min-height: 42px;
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 12px;
  }
  .club-edit-page__requirement strong {
    margin-left: 4px;
  }
  .club-edit-page__notice {
    margin-top: 10px;
    padding: 9px 11px;
    font-size: 13px;
    border-radius: 10px;
  }
  .club-edit-page__form-wrap {
    padding: 14px;
  }
  .club-edit-page__form {
    gap: 14px;
  }
  .club-edit-page__section {
    padding: 14px;
    border-radius: 16px;
  }
  .club-edit-page__section-title {
    margin-bottom: 14px;
    font-size: 18px;
  }
  .club-edit-page .form__title {
    font-size: 13px;
    margin-bottom: 8px;
  }
  .club-edit-page .form__field, .club-edit-page__select {
    height: 50px;
    padding-left: 14px;
    padding-right: 14px;
    font-size: 14px;
    border-radius: 14px;
  }
  .club-edit-page__select {
    padding-right: 40px;
  }
  .club-edit-page textarea.form__field {
    min-height: 96px;
    padding: 14px;
  }
  .club-edit-page .form__upload-label {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
  }
  .club-edit-page .form__upload-button {
    flex: 0 0 auto;
    width: 100%;
    height: 44px;
    font-size: 15px;
    border-radius: 10px;
  }
  .club-edit-page .form__upload-name {
    width: 100%;
    font-size: 14px;
  }
  .club-edit-page__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .club-edit-page__btn-main, .club-edit-page__btn-delete, .club-edit-page__btn-secondary {
    width: 100%;
    min-width: 100%;
    height: 48px;
    padding: 0 16px;
    font-size: 15px;
    border-radius: 12px;
  }
}

body.dark .club-edit-page__back {
  color: #b88cff;
}
body.dark .club-edit-page__back:hover {
  color: #c79cff;
}
body.dark .club-edit-page__card {
  background: #1e1e1f;
  border-color: rgba(255, 255, 255, 0.08);
}
body.dark .club-edit-page__header {
  background: radial-gradient(circle at top right, rgba(139, 0, 255, 0.18), transparent 34%), linear-gradient(180deg, #242226 0%, #1d1c20 100%);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.dark .club-edit-page__section {
  background: #1f1f21;
  border-color: rgba(255, 255, 255, 0.08);
}
body.dark .club-edit-page__title, body.dark .club-edit-page__section-title,
body.dark .club-edit-page .form__upload-name {
  color: #fff;
}
body.dark .club-edit-page__requirement {
  background: #26262a;
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.86);
}
body.dark .club-edit-page__requirement strong {
  color: #fff;
}
body.dark .club-edit-page__notice {
  background: rgba(139, 0, 255, 0.12);
  border-color: rgba(139, 0, 255, 0.18);
  color: #d6b6ff;
}
body.dark .club-edit-page .form__title {
  color: rgba(255, 255, 255, 0.65);
}
body.dark .club-edit-page .form__field, body.dark .club-edit-page__select,
body.dark .club-edit-page .form__upload-label {
  background: #26262a;
  border-color: rgba(255, 255, 255, 0.08);
  color: #fff;
}
body.dark .club-edit-page .form__field::-moz-placeholder {
  color: rgba(255, 255, 255, 0.45);
}
body.dark .club-edit-page .form__field::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
body.dark .club-edit-page__grid > div::after {
  border-right-color: rgba(255, 255, 255, 0.7);
  border-bottom-color: rgba(255, 255, 255, 0.7);
}
body.dark .club-edit-page__btn-delete, body.dark .club-edit-page__btn-secondary {
  background: #26262a;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.08);
}
body.dark .club-edit-page__btn-delete:hover, body.dark .club-edit-page__btn-secondary:hover {
  background: #303036;
  color: #fff;
}

.club-join-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3000;
}
.club-join-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}
.club-join-modal__dialog {
  position: relative;
  width: 420px;
  max-width: calc(100% - 30px);
  margin: 120px auto;
  background: var(--light-bg);
  border-radius: var(--main-border-radius);
  padding: 25px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
  animation: clubModalAppear 0.2s ease;
}
.club-join-modal__header {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 15px;
}
.club-join-modal__avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.club-join-modal__label {
  font-size: 12px;
  color: var(--secondary-text-color);
}
.club-join-modal__name {
  font-weight: 600;
  font-size: 16px;
  color: var(--title-color);
}
.club-join-modal__message {
  margin: 15px 0 20px;
  line-height: 1.5;
  font-size: 14px;
  color: var(--main-text-color);
  white-space: pre-line;
}
.club-join-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@keyframes clubModalAppear {
  from {
    transform: translateY(10px) scale(0.97);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
.club-boost__auto {
  color: var(--green-color);
  font-weight: 600;
}

.club-boost__manual {
  color: var(--secondary-text-color);
}

.club-boost-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: var(--secondary-border-radius);
  background: var(--light-bg);
  border: 1px solid var(--border-color);
}
.club-boost-list__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--medium-bg);
  transition: 0.2s ease;
}
.club-boost-list__item:hover {
  background: rgba(0, 0, 0, 0.04);
}
.club-boost-list__position {
  flex: 0 0 34px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--title-color);
  text-align: center;
}
.club-boost-list__poster {
  flex: 0 0 56px;
  width: 56px;
  border-radius: 5px;
  overflow: hidden;
  display: block;
}
.club-boost-list__avatar {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
}
.club-boost-list__avatar img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}
.club-boost-list__main {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.club-boost-list__name {
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  font-size: 18px;
  font-weight: 700;
  color: var(--title-color);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.club-boost-list__name:hover {
  color: var(--main-purple-color);
}
.club-boost-list__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  font-size: 14px;
  color: var(--secondary-text-color);
}
.club-boost-list__card {
  font-weight: 500;
  color: var(--main-text-color);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.club-boost-list__date {
  white-space: nowrap;
}
.club-boost-list__type {
  margin-left: auto;
}
.club-boost-list__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.club-boost-list__badge--auto {
  color: var(--green-color);
  background: rgba(0, 153, 51, 0.1);
}
.club-boost-list__badge--manual {
  color: var(--secondary-text-color);
  background: rgba(0, 0, 0, 0.06);
}
.club-boost-list__empty {
  padding: 20px 10px;
  text-align: center;
  color: var(--secondary-text-color);
  font-size: 14px;
}

body.dark .club-boost-list {
  background: #1f1f1f;
  border-color: rgba(255, 255, 255, 0.08);
}
body.dark .club-boost-list__item {
  background: rgba(255, 255, 255, 0.04);
}
body.dark .club-boost-list__item:hover {
  background: rgba(255, 255, 255, 0.06);
}
body.dark .club-boost-list__position, body.dark .club-boost-list__name {
  color: #fff;
}
body.dark .club-boost-list__meta {
  color: rgba(255, 255, 255, 0.65);
}
body.dark .club-boost-list__card {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
body.dark .club-boost-list__badge--manual {
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.08);
}
body.dark .club-boost-list__badge--auto {
  background: rgba(0, 153, 51, 0.18);
}
body.dark .club-boost-list__empty {
  color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 700px) {
  .club-boost-list {
    padding: 10px;
    gap: 8px;
  }
  .club-boost-list__item {
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
  }
  .club-boost-list__position {
    flex: 0 0 24px;
    font-size: 20px;
    margin-top: 4px;
  }
  .club-boost-list__avatar {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
  }
  .club-boost-list__name {
    font-size: 15px;
  }
  .club-boost-list__meta {
    gap: 8px;
    font-size: 13px;
  }
  .club-boost-list__card {
    max-width: 100%;
    font-size: 13px;
  }
}
.club-autoboost {
  margin-top: 20px;
  background: var(--light-bg);
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 20px;
  align-items: center;
  flex-direction: column;
  position: relative;
}
.club-autoboost__header {
  margin-bottom: 14px;
}
.club-autoboost__title {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--title-color);
}
.club-autoboost__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--secondary-text-color);
  max-width: 560px;
}
.club-autoboost__row {
  margin-top: 14px;
}
.club-autoboost__limit-block {
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--medium-bg);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.club-autoboost__limit-label {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--main-text-color);
}
.club-autoboost__limit-wrapper {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.club-autoboost__limit-input {
  width: 92px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--light-bg);
  color: var(--main-text-color);
  font-size: 15px;
  font-weight: 600;
  outline: none;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.club-autoboost__limit-input:focus {
  border-color: var(--main-purple-color);
  box-shadow: 0 0 0 3px rgba(139, 0, 255, 0.1);
}
.club-autoboost__limit-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.club-autoboost__limit-input::-webkit-outer-spin-button, .club-autoboost__limit-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.club-autoboost__limit-input[type=number] {
  -moz-appearance: textfield;
}
.club-autoboost__limit-used {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  background: var(--light-bg);
  font-size: 13px;
  line-height: 1;
  color: var(--secondary-text-color);
}
.club-autoboost__limit-used span {
  color: var(--main-purple-color);
  font-size: 14px;
  font-weight: 700;
}
.club-autoboost__hint {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--secondary-text-color);
}
.club-autoboost__progress {
  margin-top: 12px;
}
.club-autoboost__progress-line {
  position: relative;
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.07);
}
.club-autoboost__progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--purple-btn-bg), var(--main-purple-color));
  transition: width 0.25s ease;
}
.club-autoboost__progress-text {
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--secondary-text-color);
}
.club-autoboost--disabled .club-autoboost__limit-block {
  opacity: 0.6;
}
.club-autoboost--disabled .club-autoboost__progress-fill {
  opacity: 0.5;
}

.club-autoboost-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.club-autoboost-toggle__input {
  display: none;
}
.club-autoboost-toggle__switch {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: #d8d8dd;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.club-autoboost-toggle__switch:before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--white-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: transform 0.25s ease;
}
.club-autoboost-toggle__input:checked + .club-autoboost-toggle__switch {
  background: linear-gradient(90deg, var(--purple-btn-bg), var(--main-purple-color));
  box-shadow: 0 6px 18px rgba(139, 0, 255, 0.18);
}
.club-autoboost-toggle__input:checked + .club-autoboost-toggle__switch:before {
  transform: translateX(20px);
}
.club-autoboost-toggle__text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--main-text-color);
}

body.dark .club-autoboost__title {
  color: var(--white-color);
}
body.dark .club-autoboost__desc, body.dark .club-autoboost__hint, body.dark .club-autoboost__progress-text {
  color: rgba(255, 255, 255, 0.68);
}
body.dark .club-autoboost__limit-block {
  background: rgba(255, 255, 255, 0.05);
}
body.dark .club-autoboost__limit-label {
  color: rgba(255, 255, 255, 0.9);
}
body.dark .club-autoboost__limit-input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--white-color);
}
body.dark .club-autoboost__limit-input:focus {
  border-color: var(--main-purple-color);
  box-shadow: 0 0 0 3px rgba(139, 0, 255, 0.16);
}
body.dark .club-autoboost__limit-used {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.68);
}
body.dark .club-autoboost__limit-used span {
  color: #c88cff;
}
body.dark .club-autoboost__progress-line {
  background: rgba(255, 255, 255, 0.08);
}
body.dark .club-autoboost-toggle__switch {
  background: rgba(255, 255, 255, 0.18);
}
body.dark .club-autoboost-toggle__text {
  color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 768px) {
  .club-autoboost {
    margin-top: 16px;
    padding-top: 16px;
  }
  .club-autoboost__title {
    font-size: 17px;
  }
  .club-autoboost__desc {
    font-size: 12px;
  }
  .club-autoboost__limit-block {
    padding: 12px;
    border-radius: 12px;
  }
  .club-autoboost__limit-wrapper {
    gap: 10px;
  }
  .club-autoboost__limit-input {
    width: 84px;
    height: 38px;
    font-size: 14px;
  }
  .club-autoboost__limit-used {
    min-height: 38px;
    padding: 0 12px;
  }
  .club-autoboost-toggle {
    align-items: flex-start;
  }
  .club-autoboost-toggle__text {
    font-size: 13px;
    line-height: 1.45;
  }
}
@media (max-width: 480px) {
  .club-autoboost__limit-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }
  .club-autoboost__limit-input {
    width: 100%;
    max-width: 120px;
  }
  .club-autoboost__limit-used {
    width: 100%;
    justify-content: space-between;
  }
}
.club-boost-buy {
  margin-top: 20px;
  margin-bottom: 20px;
}
.club-boost-buy__toggle {
  width: 100%;
  min-height: 46px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
}
.club-boost-buy__toggle i {
  font-size: 12px;
  transition: transform 0.2s ease;
}
.club-boost-buy.is-open .club-boost-buy__toggle i {
  transform: rotate(180deg);
}
.club-boost-buy.is-open .club-boost-buy__dropdown {
  display: block;
}
.club-boost-buy__dropdown {
  display: none;
  margin-top: 10px;
}
.club-boost-buy__box {
  background: var(--light-bg);
  border-radius: 14px;
  padding: 18px;
}
.club-boost-buy__head {
  margin-bottom: 16px;
}
.club-boost-buy__title {
  font-size: 18px;
  line-height: 30px;
  font-weight: 600;
  color: var(--title-color);
  margin-bottom: 8px;
}
.club-boost-buy__desc {
  font-size: 15px;
  line-height: 22px;
  color: var(--secondary-text-color);
}
.club-boost-buy__rules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
@media (max-width: 900px) {
  .club-boost-buy__rules {
    grid-template-columns: 1fr;
  }
}
.club-boost-buy__rule {
  background: var(--medium-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 14px 16px;
}
.club-boost-buy__rule-ranks {
  display: block;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: var(--title-color);
  margin-bottom: 4px;
}
.club-boost-buy__rule-value {
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: var(--purple-btn-bg);
  font-weight: 600;
}
.club-boost-buy__summary {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
@media (max-width: 700px) {
  .club-boost-buy__summary {
    flex-direction: column;
  }
}
.club-boost-buy__summary-item {
  flex: 1;
  background: var(--medium-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.club-boost-buy__summary-item span {
  font-size: 14px;
  color: var(--secondary-text-color);
}
.club-boost-buy__summary-item strong {
  font-size: 24px;
  line-height: 24px;
  font-weight: 600;
  color: var(--title-color);
}
.club-boost-buy__selected-wrap {
  margin-bottom: 16px;
}
.club-boost-buy__subtitle {
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: var(--title-color);
  margin-bottom: 10px;
}
.club-boost-buy__empty {
  background: var(--medium-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 20px;
  color: var(--secondary-text-color);
}
.club-boost-buy__selected {
  display: none;
  flex-direction: column;
  gap: 10px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}
.club-boost-buy__selected::-webkit-scrollbar {
  width: 6px;
}
.club-boost-buy__selected::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.16);
  border-radius: 20px;
}
.club-boost-buy__selected-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--medium-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 10px 12px;
}
.club-boost-buy__selected-image {
  width: 56px;
  flex-shrink: 0;
}
.club-boost-buy__selected-image img {
  width: 100%;
  display: block;
  border-radius: 8px;
}
.club-boost-buy__selected-info {
  min-width: 0;
  flex: 1;
}
.club-boost-buy__selected-rank {
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  color: var(--title-color);
  margin-bottom: 2px;
}
.club-boost-buy__selected-points {
  font-size: 14px;
  line-height: 18px;
  color: var(--purple-btn-bg);
  font-weight: 600;
}
.club-boost-buy__selected-remove {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--secondary-text-color);
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: 0.2s;
}
.club-boost-buy__selected-remove:hover {
  color: var(--title-color);
  transform: scale(1.08);
}
.club-boost-buy__inventory {
  margin-bottom: 16px;
}
.club-boost-buy__inventory .card-filter-list {
  max-height: 420px;
  overflow-y: auto;
  padding-right: 6px;
}
.club-boost-buy__inventory .card-filter-list::-webkit-scrollbar {
  width: 6px;
}
.club-boost-buy__inventory .card-filter-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.16);
  border-radius: 20px;
}
.club-boost-buy__actions {
  display: flex;
  gap: 10px;
}
@media (max-width: 700px) {
  .club-boost-buy__actions {
    flex-direction: column;
  }
}
.club-boost-buy__clear-btn, .club-boost-buy__submit-btn {
  flex: 1;
  min-height: 44px;
  border-radius: 10px;
}
.club-boost-buy__clear-btn {
  background: var(--medium-bg);
  border: 1px solid var(--border-color);
  color: var(--title-color);
}
.club-boost-buy__clear-btn:hover {
  background: var(--chapters-hover);
}
.club-boost-buy__submit-btn[disabled] {
  opacity: 0.6;
  pointer-events: none;
}
.club-boost-buy__card--selected,
.club-boost-buy .card-filter-list__card.club-boost-buy__card--selected {
  box-shadow: 0 0 0 2px var(--purple-btn-bg);
  border-radius: 8px;
}

body.dark .club-boost-buy__selected::-webkit-scrollbar-thumb, body.dark .club-boost-buy__inventory .card-filter-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
}

.card-page__club {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 15px;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--medium-bg);
  border-radius: 14px;
  text-decoration: none;
  transition: 0.2s ease;
}
.card-page__club:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.14);
}
.card-page__club-logo {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--light-bg);
  border: 1px solid var(--border-color);
}
.card-page__club-logo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.card-page__club-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.card-page__club-label {
  font-size: 12px;
  line-height: 1.2;
  color: var(--secondary-text-color);
}
.card-page__club-name {
  font-size: 15px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--title-color);
  word-break: break-word;
}

@media (max-width: 767px) {
  .card-page__club {
    margin-top: 12px;
    padding: 9px 12px;
    gap: 8px;
  }
  .card-page__club-logo {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }
  .card-page__club-name {
    font-size: 14px;
  }
}
.club-personal-bonus {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--light-bg);
}

.club-personal-bonus--active {
  border-color: rgba(126, 87, 255, 0.35);
}

.club-personal-bonus__top {
  display: flex;
  gap: 10px;
  align-items: center;
}

.club-personal-bonus__icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: rgba(126, 87, 255, 0.12);
  font-size: 18px;
}

.club-personal-bonus__info {
  flex: 1;
  min-width: 0;
}

.club-personal-bonus__badge {
  display: inline-flex;
  margin-bottom: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(126, 87, 255, 0.12);
  color: var(--main-purple-color);
  font-size: 11px;
  font-weight: 700;
}

.club-personal-bonus__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--main-text-color);
}

.club-personal-bonus__text {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--secondary-text-color);
}

.club-personal-bonus__text b {
  color: var(--main-purple-color);
  font-weight: 700;
}

.club-personal-bonus__progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.club-personal-bonus__progress-line {
  flex: 1;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(126, 87, 255, 0.12);
}

.club-personal-bonus__progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--main-purple-color), #ffc94d);
  transition: width 0.35s ease;
}

.club-personal-bonus__counter {
  min-width: 58px;
  text-align: right;
  font-size: 12px;
  font-weight: 800;
  color: var(--secondary-text-color);
}

.club-request__auto-boost {
  display: inline-flex;
  align-items: center;
  margin-top: 5px;
  padding: 4px 8px;
  border-radius: 20px;
  background: rgba(111, 57, 255, 0.1);
  color: var(--main-purple-color);
  font-size: 12px;
  font-weight: 600;
}
.club-request__auto-boost i {
  margin-right: 4px;
  font-size: 14px;
}

:root {
  --tomoe-size: calc(200px / 6.5);
}

.sharingan {
  width: 200px;
  height: 200px;
  border: 6.6666666667px solid #000;
  border-radius: 50%;
  background: hsl(0deg, 100%, 36%);
  box-shadow: 0 0 30px 2px #000 inset;
  position: fixed;
  top: 24%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 52;
  cursor: pointer;
  animation: fadeInIris 3s;
}

.pupil {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  background: #000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 100px 10px #000;
}

.iris {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
  border: 1px solid #000;
  border-radius: 50%;
}

.tomoes {
  height: 100%;
  width: 100%;
  animation: rotateIris 3.4s infinite;
}

.tomoe-area {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.tomoe {
  width: 30.7692307692px;
  height: 30.7692307692px;
  position: absolute;
  background-color: #000;
  border-radius: 50%;
  left: 50%;
  top: -16.6%;
  transform: translate(-50%);
}

.tomoe::before {
  content: "";
  position: absolute;
  top: -30.3%;
  left: 3.1%;
  width: calc(var(--tomoe-size) * 1.51);
  height: calc(var(--tomoe-size) * 1.69);
  border-radius: 50%;
  border-top: calc(var(--tomoe-size) / 2.6) solid #000;
  border-left: calc(var(--tomoe-size) / 9.7) solid transparent;
  transform: rotate(-35deg);
}

.tomoe-area:first-child {
  transform: translate(-50%, -50%);
}

.tomoe-area:nth-child(2) {
  transform: translate(-50%, -50%) rotate(120deg);
}

.tomoe-area:nth-child(3) {
  transform: translate(-50%, -50%) rotate(-120deg);
}

@keyframes rotateIris {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes fadeInIris {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.animator-rating {
  --animator-accent: #6d28d9;
  --animator-accent-2: #2563eb;
  --animator-deep: #17142a;
  --animator-card: #ffffff;
  --animator-soft: rgba(109, 40, 217, .08);
  --animator-border: rgba(23, 20, 42, .1);
  --animator-text: #201f2b;
  --animator-muted: rgba(32, 31, 43, .62);
  max-width: 1180px;
  margin: 0 auto 45px;
  padding: 0 15px;
}
.animator-rating__hero {
  position: relative;
  min-height: 285px;
  overflow: hidden;
  border-radius: 0 0 38px 38px;
  background: #111;
}
.animator-rating__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.animator-rating__hero-shadow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 15%, rgba(109, 40, 217, 0.45), transparent 34%), linear-gradient(180deg, rgba(10, 8, 22, 0.24), rgba(10, 8, 22, 0.82));
}
.animator-rating__hero-content {
  position: relative;
  z-index: 2;
  max-width: 680px;
  margin: 0 auto;
  padding: 72px 20px 105px;
  text-align: center;
  color: #fff;
}
.animator-rating__label {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: 0.82;
}
.animator-rating__title {
  margin: 0;
  font-size: 48px;
  font-weight: 900;
  line-height: 1.05;
  color: #fff;
}
.animator-rating__subtitle {
  max-width: 560px;
  margin: 15px auto 0;
  font-size: 15px;
  line-height: 1.55;
  opacity: 0.92;
}
.animator-rating__content {
  position: relative;
  z-index: 3;
  margin-top: -58px;
  padding: 28px;
  border-radius: 34px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid var(--animator-border);
  box-shadow: 0 20px 60px rgba(23, 20, 42, 0.16);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}
.animator-rating__tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 26px;
}
.animator-rating__tab {
  display: inline-flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  padding: 12px 20px;
  border-radius: 999px;
  background: rgba(109, 40, 217, 0.075);
  color: var(--animator-muted);
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  transition: 0.2s;
}
.animator-rating__tab:hover {
  color: var(--animator-accent);
}
.animator-rating__tab--active {
  color: #fff;
  background: linear-gradient(135deg, var(--animator-deep), var(--animator-accent), var(--animator-accent-2));
  box-shadow: 0 10px 24px rgba(109, 40, 217, 0.26);
}
.animator-rating__info-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.9fr;
  gap: 16px;
  margin-bottom: 18px;
}
.animator-rating__info-card {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border-radius: 26px;
  border: 1px solid rgba(109, 40, 217, 0.14);
  background: radial-gradient(circle at 100% 0, rgba(37, 99, 235, 0.12), transparent 34%), linear-gradient(135deg, rgba(109, 40, 217, 0.075), rgba(23, 20, 42, 0.035)), #fff;
}
.animator-rating__info-card--status {
  background: radial-gradient(circle at 100% 0, rgba(109, 40, 217, 0.16), transparent 34%), linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(109, 40, 217, 0.07)), #fff;
}
.animator-rating__info-title {
  margin-bottom: 8px;
  color: var(--animator-text);
  font-size: 19px;
  font-weight: 900;
}
.animator-rating__info-text {
  color: var(--animator-muted);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 600;
}
.animator-rating__bonus-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.animator-rating__bonus-item {
  padding: 13px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(23, 20, 42, 0.08);
}
.animator-rating__bonus-item strong {
  display: block;
  color: var(--animator-accent);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}
.animator-rating__bonus-item span {
  display: block;
  margin-top: 6px;
  color: var(--animator-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}
.animator-rating__note {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(37, 99, 235, 0.08);
  color: #1e3a8a;
  font-size: 13px;
  font-weight: 800;
}
.animator-rating__status-badge {
  display: inline-flex;
  margin-top: 18px;
  padding: 10px 14px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--animator-deep), var(--animator-accent), var(--animator-accent-2));
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(109, 40, 217, 0.26);
}
.animator-rating__rank-card {
  margin-bottom: 18px;
  padding: 20px;
  border-radius: 26px;
  background: #fff;
  border: 1px solid var(--animator-border);
}
.animator-rating__rank-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.animator-rating__rank-title {
  color: var(--animator-text);
  font-size: 19px;
  font-weight: 900;
}
.animator-rating__rank-subtitle {
  margin-top: 4px;
  color: var(--animator-muted);
  font-size: 13px;
  font-weight: 700;
}
.animator-rating__rank-list {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 8px;
}
.animator-rating__rank-item {
  padding: 12px 6px;
  border-radius: 16px;
  text-align: center;
  background: rgba(23, 20, 42, 0.035);
  border: 1px solid rgba(23, 20, 42, 0.08);
}
.animator-rating__rank-item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, var(--animator-deep), var(--animator-accent));
  font-weight: 900;
}
.animator-rating__rank-item strong {
  display: block;
  color: var(--animator-text);
  font-size: 15px;
  font-weight: 900;
}
.animator-rating__rank-item small {
  display: block;
  margin-top: 2px;
  color: var(--animator-muted);
  font-size: 11px;
  font-weight: 700;
}
.animator-rating__weekly {
  margin-bottom: 32px;
  padding: 20px;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.08), rgba(37, 99, 235, 0.07)), #fff;
  border: 1px solid rgba(109, 40, 217, 0.14);
}
.animator-rating__weekly-title {
  margin-bottom: 15px;
  color: var(--animator-text);
  font-size: 19px;
  font-weight: 900;
  text-align: center;
}
.animator-rating__weekly-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.animator-rating__weekly-item {
  padding: 15px 10px;
  border-radius: 19px;
  text-align: center;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(23, 20, 42, 0.08);
}
.animator-rating__weekly-item span {
  display: block;
  margin-bottom: 6px;
  color: var(--animator-muted);
  font-size: 12px;
  font-weight: 900;
}
.animator-rating__weekly-item strong {
  display: block;
  color: var(--animator-text);
  font-size: 21px;
  font-weight: 900;
}
.animator-rating__weekly-item small {
  display: block;
  margin-top: 2px;
  color: var(--animator-muted);
  font-size: 12px;
  font-weight: 700;
}
.animator-rating__weekly-item--gold {
  box-shadow: inset 0 0 0 2px rgba(109, 40, 217, 0.32);
}
.animator-rating__weekly-item--silver {
  box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.28);
}
.animator-rating__weekly-item--bronze {
  box-shadow: inset 0 0 0 2px rgba(23, 20, 42, 0.24);
}
.animator-rating__podium {
  display: grid;
  grid-template-columns: 1fr 1.18fr 1fr;
  align-items: end;
  gap: 18px;
  max-width: 780px;
  margin: 0 auto 34px;
}
.animator-rating__winner {
  position: relative;
  display: block;
  padding: 22px 16px;
  border-radius: 28px;
  text-align: center;
  color: var(--animator-text);
  text-decoration: none;
  background: linear-gradient(180deg, #fff, #fafafa);
  border: 1px solid var(--animator-border);
  box-shadow: 0 14px 35px rgba(23, 20, 42, 0.08);
  transition: 0.2s;
}
.animator-rating__winner:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 45px rgba(23, 20, 42, 0.14);
}
.animator-rating__winner--place-1 {
  min-height: 285px;
  border-color: rgba(109, 40, 217, 0.35);
  box-shadow: 0 20px 55px rgba(109, 40, 217, 0.18);
}
.animator-rating__place {
  position: absolute;
  top: 14px;
  left: 14px;
  color: var(--animator-muted);
  font-size: 13px;
  font-weight: 900;
}
.animator-rating__avatar {
  position: relative;
  width: 108px;
  height: 108px;
  margin: 14px auto 14px;
  padding: 4px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--animator-accent), var(--animator-accent-2), var(--animator-deep));
}
.animator-rating__avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  -o-object-fit: cover;
     object-fit: cover;
  border: 4px solid #fff;
}
.animator-rating__winner--place-1 .animator-rating__avatar {
  width: 138px;
  height: 138px;
}
.animator-rating__medal {
  position: absolute;
  left: 50%;
  bottom: -16px;
  width: 42px;
  height: 42px;
  transform: translateX(-50%);
}
.animator-rating__medal img {
  width: 100%;
  height: 100%;
  border: 0;
}
.animator-rating__winner-name {
  margin-top: 22px;
  color: var(--animator-text);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
}
.animator-rating__winner-stats {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
  color: var(--animator-muted);
  font-size: 14px;
  font-weight: 800;
}
.animator-rating__winner-prize {
  display: inline-flex;
  margin-top: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--animator-accent);
  background: rgba(109, 40, 217, 0.08);
  font-size: 13px;
  font-weight: 900;
}
.animator-rating__list {
  display: grid;
  gap: 10px;
}
.animator-rating__row {
  display: grid;
  grid-template-columns: 42px 48px 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 20px;
  color: var(--animator-text);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--animator-border);
  transition: 0.2s;
}
.animator-rating__row:hover {
  transform: translateX(4px);
  border-color: rgba(109, 40, 217, 0.28);
  box-shadow: 0 10px 30px rgba(23, 20, 42, 0.1);
}
.animator-rating__row-place {
  color: var(--animator-muted);
  font-size: 18px;
  font-weight: 900;
  text-align: center;
}
.animator-rating__row-avatar {
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 15px;
  background: rgba(23, 20, 42, 0.045);
}
.animator-rating__row-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.animator-rating__row-name {
  color: var(--animator-text);
  font-size: 16px;
  font-weight: 900;
}
.animator-rating__row-cards {
  margin-top: 2px;
  color: var(--animator-muted);
  font-size: 13px;
  font-weight: 700;
}
.animator-rating__row-prize {
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(109, 40, 217, 0.08);
  color: var(--animator-accent);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}
.animator-rating__row-likes {
  min-width: 72px;
  color: var(--animator-muted);
  font-weight: 900;
  text-align: right;
}
.animator-rating__row-likes .icon {
  margin-left: 4px;
}
.animator-rating__empty {
  padding: 35px 20px;
  border-radius: 24px;
  text-align: center;
  color: var(--animator-muted);
  background: rgba(23, 20, 42, 0.04);
  font-weight: 800;
}

body.dark .animator-rating {
  --animator-accent: #a78bfa;
  --animator-accent-2: #60a5fa;
  --animator-deep: #0f1020;
  --animator-card: #17182a;
  --animator-soft: rgba(167, 139, 250, .1);
  --animator-border: rgba(255, 255, 255, .09);
  --animator-text: rgba(255, 255, 255, .92);
  --animator-muted: rgba(255, 255, 255, .62);
}
body.dark .animator-rating__content {
  background: rgba(18, 19, 34, 0.96);
  border-color: var(--animator-border);
  box-shadow: 0 20px 65px rgba(0, 0, 0, 0.36);
}
body.dark .animator-rating__tab {
  background: rgba(255, 255, 255, 0.06);
  color: var(--animator-muted);
}
body.dark .animator-rating__tab:hover {
  color: var(--animator-accent);
}
body.dark .animator-rating__tab--active, body.dark .animator-rating__status-badge {
  color: #fff;
  background: linear-gradient(135deg, #312e81, #6d28d9, #2563eb);
  box-shadow: 0 10px 28px rgba(109, 40, 217, 0.34);
}
body.dark .animator-rating__info-card, body.dark .animator-rating__info-card--status, body.dark .animator-rating__rank-card, body.dark .animator-rating__weekly, body.dark .animator-rating__winner, body.dark .animator-rating__row {
  background: radial-gradient(circle at 100% 0, rgba(167, 139, 250, 0.08), transparent 32%), #17182a;
  border-color: var(--animator-border);
}
body.dark .animator-rating__info-title, body.dark .animator-rating__rank-title, body.dark .animator-rating__weekly-title, body.dark .animator-rating__winner-name, body.dark .animator-rating__row-name, body.dark .animator-rating__weekly-item strong, body.dark .animator-rating__rank-item strong {
  color: var(--animator-text);
}
body.dark .animator-rating__info-text, body.dark .animator-rating__rank-subtitle, body.dark .animator-rating__row-cards, body.dark .animator-rating__row-likes, body.dark .animator-rating__winner-stats, body.dark .animator-rating__weekly-item span, body.dark .animator-rating__weekly-item small, body.dark .animator-rating__place, body.dark .animator-rating__row-place, body.dark .animator-rating__bonus-item span, body.dark .animator-rating__rank-item small {
  color: var(--animator-muted);
}
body.dark .animator-rating__bonus-item, body.dark .animator-rating__weekly-item, body.dark .animator-rating__rank-item {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.08);
}
body.dark .animator-rating__bonus-item strong {
  color: var(--animator-accent);
}
body.dark .animator-rating__note {
  background: rgba(96, 165, 250, 0.1);
  color: #bfdbfe;
}
body.dark .animator-rating__rank-item span {
  color: #fff;
  background: linear-gradient(135deg, #312e81, #6d28d9);
}
body.dark .animator-rating__avatar {
  background: linear-gradient(135deg, #6d28d9, #2563eb, #111827);
}
body.dark .animator-rating__avatar img {
  border-color: #17182a;
}
body.dark .animator-rating__winner-prize, body.dark .animator-rating__row-prize {
  color: #ddd6fe;
  background: rgba(167, 139, 250, 0.11);
}
body.dark .animator-rating__row:hover {
  border-color: rgba(167, 139, 250, 0.28);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
}
body.dark .animator-rating__empty {
  background: rgba(255, 255, 255, 0.045);
  color: var(--animator-muted);
}

@media (max-width: 900px) {
  .animator-rating__info-grid {
    grid-template-columns: 1fr;
  }
  .animator-rating__rank-list {
    grid-template-columns: repeat(5, 1fr);
  }
  .animator-rating__weekly-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .animator-rating {
    padding: 0;
  }
  .animator-rating__hero {
    min-height: 235px;
    border-radius: 0 0 28px 28px;
  }
  .animator-rating__hero-content {
    padding: 58px 18px 90px;
  }
  .animator-rating__title {
    font-size: 34px;
  }
  .animator-rating__subtitle {
    font-size: 14px;
  }
  .animator-rating__content {
    margin: -48px 10px 0;
    padding: 18px;
    border-radius: 26px;
  }
  .animator-rating__tabs {
    gap: 8px;
  }
  .animator-rating__tab {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    font-size: 14px;
  }
  .animator-rating__bonus-list {
    grid-template-columns: 1fr;
  }
  .animator-rating__rank-list {
    grid-template-columns: repeat(3, 1fr);
  }
  .animator-rating__podium {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 4px 2px 12px;
    margin-bottom: 20px;
  }
  .animator-rating__winner {
    min-width: 210px;
  }
  .animator-rating__winner--place-1 {
    order: -1;
    min-height: auto;
  }
  .animator-rating__row {
    grid-template-columns: 28px 44px 1fr auto;
    gap: 10px;
    padding: 11px 10px;
  }
  .animator-rating__row-prize {
    display: none;
  }
  .animator-rating__row-likes {
    min-width: auto;
    font-size: 14px;
  }
}
.moderation-comment__item {
  background: var(--light-bg);
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 20px;
  border: 1px solid var(--border-color);
}
.moderation-comment__title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 15px;
}
.moderation-comment__title a {
  color: var(--purple-btn-bg);
}
.moderation-comment__type {
  margin-bottom: 10px;
}
.moderation-comment__text {
  margin-bottom: 10px;
}
.moderation-comment__text a {
  color: var(--main-purple-color);
}
.moderation-comment__controls {
  display: flex;
  margin-bottom: 10px;
}
.moderation-comment__controls button:first-of-type {
  margin-right: 10px;
}

.moder-inner {
  width: 600px;
  overflow: hidden;
}

.moder-main {
  display: flex;
  justify-content: center;
}

.moder-link {
  display: flex;
  justify-content: end;
  margin-bottom: 10px;
  align-items: center;
}

.tabs__moder {
  padding-top: 8px;
}
.tabs__moder .tabs__item {
  border: 1px solid var(--main-text-color);
  border-radius: var(--main-border-radius);
  position: relative;
  padding: 10px 32px;
  background: var(--grey-background);
}

.moder__info-count {
  position: absolute;
  top: -7px;
  right: -6px;
  border: 1px solid var(--main-text-color);
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  background: var(--grey-background);
}
.moder__info-count:after {
  content: "";
  filter: blur(1px);
}

.radio-player {
  position: fixed;
  display: inline-block;
  cursor: pointer;
  right: 20px;
  bottom: 20px;
  z-index: 999;
}

.radio-player__image {
  width: 70px;
}

.radio-player__note {
  position: absolute;
  bottom: 10px;
  font-size: 17px;
  opacity: 0;
}

.radio-player__note--left {
  left: 15%;
}

.radio-player__note--right {
  right: 15%;
}

.radio-player--play .radio-player__image {
  animation: radio-player__sway 1s ease-in-out infinite;
}

.radio-player--play .radio-player__note {
  animation: radio-player__float 3s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}

.radio-player__note:nth-child(1) {
  animation-delay: 0s;
}

.radio-player__note:nth-child(2) {
  animation-delay: 1s;
}

.radio-player__note:nth-child(3) {
  animation-delay: 0.5s;
}

.radio-player__note:nth-child(4) {
  animation-delay: 1.5s;
}

@keyframes radio-player__float {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translateY(-50px);
    opacity: 1;
  }
  100% {
    transform: translateY(-80px);
    opacity: 0;
  }
}
@keyframes radio-player__sway {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(2deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.deadpool-gift {
  position: fixed;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  z-index: 1000;
  --end-x: 0px;
  --end-y: 0px;
}

@keyframes move-to-header {
  0% {
    transform: translate(0, 0);
    opacity: 1; /* Полностью видимы */
  }
  70% {
    opacity: 1; /* Видимы до 90% времени анимации */
  }
  100% {
    transform: translate(calc(var(--end-x) - 50px), calc(var(--end-y) - 50px));
    opacity: 0; /* Исчезают в последние 10% времени анимации */
  }
}
.deadpool__close {
  position: absolute;
  top: -30px;
  right: -15px;
  font-size: 30px;
  line-height: 30px;
  background: #fe0000;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 7px solid black;
  padding-bottom: 6px;
}

.deadpool {
  width: 424px;
  height: 381px;
  position: fixed;
  top: 50%;
  margin: 0 auto;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  cursor: pointer;
  z-index: 100;
}

/* Голова */
.deadpool__head {
  position: absolute;
  width: 261px;
  height: 242px;
  border: 18px solid #000;
  border-radius: 60px;
  left: 50%;
  margin-left: -130px;
  background-color: #fe0000;
  box-shadow: inset 30px 0 0 rgba(0, 0, 0, 0.3);
  z-index: 9;
  top: -500px; /* Начальное положение для анимации */
  animation: head-move 1s forwards;
}

@keyframes head-move {
  to {
    top: 0;
  }
}
.deadpool__head::after,
.deadpool__head::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  background-color: #fd4744;
}

.deadpool__head::after {
  width: 30px;
  height: 30px;
  right: 64px;
  top: 20px;
}

.deadpool__head::before {
  width: 60px;
  height: 60px;
  right: 14px;
  top: 40px;
}

/* Глаза */
.deadpool__eye {
  position: absolute;
  background-color: #000;
  border-radius: 100%;
  width: 68px;
  height: 84px;
  overflow: hidden;
  bottom: 20px;
}

.deadpool__eye--right {
  right: 10px;
  transform: rotate(45deg);
}

.deadpool__eye--right::before,
.deadpool__eye--right::after {
  content: "";
  position: absolute;
}

.deadpool__eye--right::before {
  width: 100%;
  height: 100%;
  background-color: #fe0000;
  transform: rotate(17deg);
  top: -15px;
  right: 39px;
  z-index: 99;
}

.deadpool__eye--right::after {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: #fff;
  left: 12px;
  top: 33px;
}

.deadpool__eye--left {
  left: 10px;
  transform: rotate(-45deg);
}

.deadpool__eye--left::before,
.deadpool__eye--left::after {
  content: "";
  position: absolute;
}

.deadpool__eye--left::before {
  width: 100%;
  height: 100%;
  background-color: #fe0000;
  transform: rotate(-17deg);
  top: -15px;
  left: 39px;
  z-index: 99;
}

.deadpool__eye--left::after {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: #fff;
  right: 12px;
  top: 33px;
}

/* Тело */
.deadpool__body {
  width: 166px;
  height: 122px;
  position: absolute;
  border: 18px solid #000;
  border-top: 0;
  bottom: -800px; /* Начальное положение для анимации */
  left: 50%;
  margin-left: -83px;
  border-bottom-right-radius: 60px;
  border-bottom-left-radius: 60px;
  background-color: #191b1a;
  z-index: 9;
  animation: body-move 1s forwards 0.2s;
}

@keyframes body-move {
  to {
    bottom: 19px;
  }
}
.deadpool__body::after,
.deadpool__body::before {
  content: "";
  position: absolute;
  width: 42px;
  height: 34px;
  background-color: #fe0000;
  border-radius: 10px;
  top: 5px;
}

.deadpool__body::before {
  left: 20px;
}

.deadpool__body::after {
  right: 20px;
}

/* Руки */
.deadpool__arm {
  position: absolute;
  border-radius: 50%;
  border: 18px solid #000;
  width: 106px;
  height: 106px;
  top: -1500px; /* Начальное положение для анимации */
  background-color: #333333;
  box-shadow: inset 20px 0 0 rgba(0, 0, 0, 0.3);
  z-index: 9;
}

.deadpool__arm::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: inherit;
  top: 10px;
  right: 10px;
}

.deadpool__arm--left {
  left: -1500px; /* Начальное положение для анимации */
  animation: arm-left-move 1s forwards 0.3s;
}

@keyframes arm-left-move {
  to {
    top: -33px;
    left: -90px;
  }
}
.deadpool__arm--right {
  right: -1500px; /* Начальное положение для анимации */
  animation: arm-right-move 1s forwards 0.3s;
}

@keyframes arm-right-move {
  to {
    top: -33px;
    right: -90px;
  }
}
/* Штаны */
.deadpool__pants {
  background-color: #fe0000;
  position: absolute;
  width: 100%;
  height: 50%;
  bottom: 0;
  border-bottom-right-radius: 40px;
  border-bottom-left-radius: 40px;
  box-shadow: inset 20px 0 0 rgba(0, 0, 0, 0.3);
}

/* Пояс */
.deadpool__belt {
  border: 10px solid #000;
  position: absolute;
  bottom: 33px;
  width: 100%;
  z-index: 9;
}

.deadpool__buckle {
  width: 40px;
  height: 40px;
  position: absolute;
  background-color: #fe0000;
  border-radius: 50%;
  border: 6px solid #000;
  left: 50%;
  margin-left: -16px;
  top: -20px;
}

.deadpool__buckle::after,
.deadpool__buckle::before {
  content: "";
  position: absolute;
}

.deadpool__buckle::before {
  width: 24px;
  height: 24px;
  border: 6px solid #000;
  border-radius: 50%;
  background-color: #fff;
  left: 2px;
  top: 2px;
}

.deadpool__buckle::after {
  width: 6px;
  height: 17px;
  background-color: #000;
  top: 5px;
  left: 11px;
}

/* Бомбы */
.deadpool__bombs {
  position: absolute;
}

.deadpool__bombs::after,
.deadpool__bombs::before {
  content: "";
  position: absolute;
  background-color: #333;
  border: 6px solid #000;
  border-radius: 5px;
  width: 24px;
  height: 38px;
  z-index: 99;
  top: 2000px; /* Начальное положение для анимации */
  animation: bombs-move 1s forwards 0.6s;
}

@keyframes bombs-move {
  to {
    top: -19px;
  }
}
.deadpool__bombs--left {
  left: -8px;
}

.deadpool__bombs--left::before {
  left: 25px;
}

.deadpool__bombs--right {
  right: 7px;
}

.deadpool__bombs--right::before {
  right: 1px;
}

/* Мечи */
.deadpool__sword {
  width: 22px;
  height: 60%;
  background-color: #000;
  position: absolute;
  border-radius: 5px;
  top: 100px;
}

.deadpool__sword::after {
  content: "";
  position: absolute;
  width: 48px;
  height: 14px;
  background-color: #000;
  left: -13px;
  top: 49px;
  border-radius: 5px;
}

.deadpool__sword--left {
  left: 2000px; /* Начальное положение для анимации */
  transform: rotate(900deg);
  animation: sword-left-move 1s forwards 0.6s;
}

@keyframes sword-left-move {
  to {
    left: 88px;
    transform: rotate(-45deg);
  }
}
.deadpool__sword--right {
  right: 2000px; /* Начальное положение для анимации */
  transform: rotate(-900deg);
  animation: sword-right-move 1s forwards 0.8s;
}

@keyframes sword-right-move {
  to {
    right: 88px;
    transform: rotate(45deg);
  }
}
/* Тень */
.deadpool__shadow {
  width: 100%;
  height: 20px;
  position: absolute;
  bottom: -50px;
  background-color: rgba(0, 0, 0, 0.27);
  border-radius: 50%;
}

/* Удаляем hover эффекты и переходы */
.bomte-face__container {
  position: fixed;
  bottom: -100px;
  right: -100px;
  transform: translate(50%, 50%);
  opacity: 0;
  width: 80px;
  height: 120px; /* Высота иконки + место для знаков вопроса */
  z-index: 111;
}

.bomte-face__icon {
  width: 80px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.bomte-face__question-mark {
  position: absolute;
  font-size: 30px;
  font-weight: bold;
  color: black;
  opacity: 0;
  font-family: "Exo 2", sans-serif;
}

/* Анимация кивания вперед */
@keyframes nodYes {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(20deg);
  } /* Наклон вперед */
  100% {
    transform: rotate(0deg);
  } /* Возврат в исходное положение */
}
.global-event-banner {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%) translateY(20px);
  z-index: 999999;
  width: calc(100% - 24px);
  max-width: 470px;
  opacity: 0;
  transition: 0.25s;
  pointer-events: none;
}
.global-event-banner--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.global-event-banner__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.12);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}
.global-event-banner__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--medium-bg);
  color: var(--main-purple-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  flex-shrink: 0;
}
.global-event-banner__content {
  flex: 1;
  min-width: 0;
}
.global-event-banner__title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 2px;
  color: var(--main-text-color);
}
.global-event-banner__text {
  font-size: 13px;
  line-height: 1.35;
  color: var(--secondary-text-color);
}
.global-event-banner__close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--medium-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: 0.2s;
}
.global-event-banner__close:hover {
  opacity: 1;
}
@media screen and (max-width: 600px) {
  .global-event-banner {
    bottom: 12px;
    width: calc(100% - 16px);
  }
  .global-event-banner__inner {
    padding: 12px;
    gap: 10px;
    border-radius: 16px;
  }
  .global-event-banner__icon {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }
  .global-event-banner__title {
    font-size: 14px;
  }
  .global-event-banner__text {
    font-size: 12px;
  }
  .global-event-banner__close {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
}

.blacksmith-wrapper {
  position: relative;
  height: 400px;
  width: 400px;
  transform: scale(0.7);
  /* /.blacksmith */
  /*/////////////////// animation */
}
.blacksmith-wrapper .text {
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  font-size: 5em;
  margin: 0;
  opacity: 0.3;
  text-align: center;
  top: 50px;
  width: 80%;
}
.blacksmith-wrapper .container {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 400px;
  width: 400px;
}
.blacksmith-wrapper .container .bg {
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  background-color: rgba(255, 86, 86, 0.2);
  border-radius: 50%;
  bottom: -5px;
  height: 450px;
  width: 450px;
}
.blacksmith-wrapper .container .bg:after {
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  background-color: rgba(255, 86, 86, 0.2);
  border-radius: 50%;
  bottom: 0;
  content: "";
  height: 350px;
  width: 350px;
}
.blacksmith-wrapper .arm-left {
  position: absolute;
  background-color: #ca906f;
  border-radius: 80px;
  height: 160px;
  left: 40px;
  top: 190px;
  transform: rotate(30deg);
  width: 60px;
}
.blacksmith-wrapper .arm-left:after {
  position: absolute;
  background-color: #ca906f;
  border-radius: 50%;
  content: "";
  height: 80px;
  left: -10px;
  top: -40px;
  width: 80px;
}
.blacksmith-wrapper .blacksmith {
  position: absolute;
  bottom: 0;
  height: 300px;
  left: 50%;
  transform-origin: center;
  transform: translateX(-50%) rotate(0);
  width: 300px;
}
.blacksmith-wrapper .blacksmith .shape {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #eab08c;
  border-radius: 50%;
  height: 250px;
  overflow: hidden;
  width: 250px;
}
.blacksmith-wrapper .blacksmith .shape:after {
  content: "";
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #777a7a;
  border-radius: 50%;
  height: 200%;
  top: 130%;
  width: 200%;
}
.blacksmith-wrapper .blacksmith .shape .dress {
  position: absolute;
  background-color: #777a7a;
  height: 100px;
  top: 0;
  width: 20px;
}
.blacksmith-wrapper .blacksmith .shape .dress:after, .blacksmith-wrapper .blacksmith .shape .dress:before {
  position: absolute;
  border: 5px solid #a0a0a0;
  box-sizing: border-box;
  border-radius: 50%;
  content: "";
  height: 30px;
  left: -5px;
  top: 75px;
  width: 30px;
  z-index: 1;
}
.blacksmith-wrapper .blacksmith .shape .dress:nth-child(1) {
  left: 50px;
}
.blacksmith-wrapper .blacksmith .shape .dress:nth-child(2) {
  right: 50px;
}
.blacksmith-wrapper .blacksmith .head {
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  background-color: #13242c;
  border-radius: 50px;
  height: 200px;
  top: -20px;
  width: 90px;
}
.blacksmith-wrapper .blacksmith .head:after, .blacksmith-wrapper .blacksmith .head:before {
  content: "";
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  background-color: #13242C;
  border-radius: 10px;
  height: 20px;
  transform-origin: bottom;
  top: -10px;
  width: 7px;
}
.blacksmith-wrapper .blacksmith .head:after {
  transform: rotate(20deg);
}
.blacksmith-wrapper .blacksmith .head:before {
  transform: rotate(-20deg);
}
.blacksmith-wrapper .blacksmith .head .eye {
  position: absolute;
  background-color: #777a7a;
  box-shadow: 28px 0px 0px #777a7a;
  border-radius: 50%;
  height: 30px;
  left: 10px;
  top: 50px;
  width: 30px;
}
.blacksmith-wrapper .blacksmith .head .eye:after, .blacksmith-wrapper .blacksmith .head .eye:before {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 5px solid #a0a0a0;
  border-radius: 50%;
  box-sizing: border-box;
  content: "";
  height: 100%;
  width: 100%;
}
.blacksmith-wrapper .blacksmith .head .eye:before {
  left: 43px;
}
.blacksmith-wrapper .blacksmith .head .moustache {
  position: absolute;
  background-color: #777a7a;
  height: 30px;
  top: 70px;
  width: 35px;
}
.blacksmith-wrapper .blacksmith .head .moustache:nth-child(1) {
  border-radius: 0 60%;
  left: 40px;
}
.blacksmith-wrapper .blacksmith .head .moustache:nth-child(2) {
  border-radius: 60% 0;
  left: 5px;
}
.blacksmith-wrapper .blacksmith .arm-right {
  position: absolute;
  background-color: #eab08c;
  border-radius: 50px;
  height: 170px;
  left: 230px;
  top: 60px;
  transform-origin: 30px 30px;
  transform: rotate(160deg);
  width: 60px;
}
.blacksmith-wrapper .blacksmith .arm-right:after {
  position: absolute;
  background-color: #eab08c;
  border-radius: 50%;
  content: "";
  height: 80px;
  left: -10px;
  width: 80px;
}
.blacksmith-wrapper .blacksmith .arm-right .hammer {
  position: absolute;
  background-color: #444444;
  border-radius: 50% 0 0 0;
  height: 60px;
  left: -50px;
  top: 140px;
  transform: rotate(-30deg);
  width: 50px;
  z-index: 1;
}
.blacksmith-wrapper .blacksmith .arm-right .hammer:after {
  content: "";
  position: absolute;
  background-color: #666666;
  border-radius: 10px;
  height: 10px;
  left: -5px;
  top: 52px;
  width: 60px;
}
.blacksmith-wrapper .blacksmith .arm-right .hammer:before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #666666;
  border-radius: 0 10px 10px 0;
  height: 10px;
  left: 100%;
  width: 30px;
}
.blacksmith-wrapper .anvil {
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  background-color: #444444;
  bottom: 25px;
  height: 50px;
  width: 120px;
}
.blacksmith-wrapper .anvil:after {
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  content: "";
  border-color: transparent transparent #444 transparent;
  border-style: solid;
  border-width: 0 50px 60px 50px;
  bottom: -25px;
  height: 0;
  width: 0;
}
.blacksmith-wrapper .anvil:before {
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  background-color: #666666;
  content: "";
  border-radius: 10px;
  height: 10px;
  width: 140px;
}
.blacksmith-wrapper .sword {
  position: absolute;
  background-color: silver;
  bottom: 75px;
  height: 15px;
  left: 40px;
  width: 200px;
}
.blacksmith-wrapper .sword:after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(19, 36, 44, 0.15);
  border-radius: 5px;
  content: "";
  height: 5px;
  left: 20px;
  width: 170px;
}
.blacksmith-wrapper .sword .handle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #444444;
  border-radius: 10px;
  height: 30px;
  width: 10px;
}
.blacksmith-wrapper .sword .handle:after {
  position: absolute;
  background-color: rgba(255, 86, 86, 0.9);
  border-radius: 10px 0 0 10px;
  content: "";
  height: 15px;
  left: 80px;
  top: 8px;
  width: 120px;
}
.blacksmith-wrapper .sword .handle:before {
  position: absolute;
  border-color: transparent transparent transparent #ff5656;
  border-style: solid;
  border-width: 7.5px 0 7.5px 15px;
  content: "";
  height: 0;
  left: 200px;
  opacity: 0.9;
  top: 8px;
  width: 0;
}
.blacksmith-wrapper .fire-box {
  position: absolute;
  height: 100px;
  left: 130px;
  overflow: hidden;
  top: 225px;
  width: 140px;
}
.blacksmith-wrapper .fire-box .fire {
  position: absolute;
  background-color: #ff5656;
  border-radius: 20px;
  box-shadow: 0 -5px 30px #ffb256;
  height: 100px;
  width: 30px;
}
.blacksmith-wrapper .fire-box .fire:after {
  content: "";
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  background-color: #ffb256;
  border-radius: 10px 10px 0 0;
  height: 70px;
  top: 10px;
  width: 15px;
}
.blacksmith-wrapper .fire-box .fire:nth-child(1) {
  left: 10px;
}
.blacksmith-wrapper .fire-box .fire:nth-child(2) {
  left: 40px;
}
.blacksmith-wrapper .fire-box .fire:nth-child(3) {
  left: 70px;
}
.blacksmith-wrapper .fire-box .fire:nth-child(4) {
  left: 100px;
}
.blacksmith-wrapper .blacksmith {
  animation: blacksmith-anima 1.5s infinite cubic-bezier(0.59, 0.01, 0.99, 0.22);
}
@keyframes blacksmith-anima {
  0% {
    transform: translateX(-50%) rotate(0);
  }
  50% {
    transform: translateX(-50%) rotate(-10deg);
  }
}
.blacksmith-wrapper .arm-right {
  animation: arm-anima 1.5s infinite cubic-bezier(0.59, 0.01, 0.99, 0.22);
}
@keyframes arm-anima {
  0% {
    transform: rotate(160deg);
  }
  50% {
    transform: rotate(30deg);
  }
  60% {
    transform: rotate(30deg);
  }
  80% {
    transform: rotate(30deg);
  }
  100% {
    transform: rotate(160deg);
  }
}
.blacksmith-wrapper .arm-left:after {
  animation: arm-left-anima 1.5s infinite cubic-bezier(0.59, 0.01, 0.99, 0.22);
}
@keyframes arm-left-anima {
  0% {
    top: -40px;
  }
  50% {
    top: -10px;
  }
}
.blacksmith-wrapper .fire {
  animation: fire-anima 1.5s infinite cubic-bezier(0.59, 0.01, 0.99, 0.22);
}
@keyframes fire-anima {
  0% {
    top: 130px;
  }
  50% {
    top: 130px;
  }
  52% {
    top: 30px;
  }
  70% {
    top: 30px;
  }
  90% {
    top: 130px;
  }
  100% {
    top: 130px;
  }
}
.blacksmith-wrapper .fire:nth-child(2) {
  animation-delay: 0.05s;
}
.blacksmith-wrapper .fire:nth-child(3) {
  animation-delay: 0.08s;
}

.header .logo {
  position: relative;
}

.spider-group {
  width: 40px;
  height: 80px;
  top: 0px;
  transform: scale(0.9);
  position: absolute;
  z-index: 20;
}
.spider-group * {
  position: absolute;
}
.spider-group *:before, .spider-group *:after {
  position: absolute;
  content: "";
}

.spider-group .thread {
  width: 1px;
  height: 50px;
  top: -4px;
  right: 0;
  background-color: #feffff;
}

.spider-group .spider {
  border-radius: 50%;
  width: 22px;
  height: 22px;
  top: 35px;
  right: -11px;
  background-color: #ee8228;
  animation: spider 5s ease infinite;
  background: linear-gradient(to right, #ee8228 0%, #ee8228 50%, #d26911 50%, #d26911 100%);
}

.spider-group .spider:before {
  border-radius: 50%;
  width: 16px;
  height: 16px;
  top: -8px;
  right: 3px;
  background-color: #ee8228;
  background: linear-gradient(to right, #ee8228 0%, #ee8228 50%, #d26911 50%, #d26911 100%);
}

.spider-group .spider:after {
  background-color: #fdf0e5;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  left: 2px;
  top: 5px;
  opacity: 0.3;
}

.spider-group .spider .spider-leg {
  width: 7px;
  height: 3px;
  right: -5px;
  top: 8px;
  background-color: #d26911;
  border-radius: 1px;
}

.spider-group .spider .spider-leg::after {
  width: 7px;
  height: 3px;
  transform: rotate(50deg);
  background-color: #d26911;
  border-radius: 1px;
  right: -5px;
  top: 2px;
}

.spider-group .spider .spider-leg:nth-child(2) {
  top: 1px;
  right: -4px;
  transform: rotate(-25deg);
}

.spider-group .spider .spider-leg:nth-child(3) {
  top: 15px;
  right: -4px;
  transform: rotate(25deg);
}

.spider-group .spider .spider-leg:nth-child(4),
.spider-group .spider .spider-leg:nth-child(5),
.spider-group .spider .spider-leg:nth-child(6) {
  background-color: #ee8228;
  transform: scaleX(-1);
  right: 21px;
}

.spider-group .spider .spider-leg:nth-child(4):after,
.spider-group .spider .spider-leg:nth-child(5):after,
.spider-group .spider .spider-leg:nth-child(6):after {
  background-color: #ee8228;
}

.spider-group .spider .spider-leg:nth-child(5) {
  transform: scaleX(-1) rotate(-25deg);
  top: 1px;
  right: 18px;
}

.spider-group .spider .spider-leg:nth-child(6) {
  transform: scaleX(-1) rotate(35deg);
  top: 15px;
  right: 20px;
}
@keyframes spider {
  50% {
    transform: translateY(20px);
  }
}
@keyframes spider-shadow {
  50% {
    transform: scale(1.1, 1.1) translateX(12px) translateY(20px);
  }
}
.candle {
  width: 30px;
  height: 30px;
  background-color: #ee8228;
}
.candle-reflection {
  width: 8px;
  height: 24px;
  background-color: #fdf0e5;
  opacity: 0.4;
  border-radius: 6px;
  left: 0px;
  bottom: 5px;
}
.candle-reflection::before, .candle-reflection::after {
  content: "";
  position: absolute;
}
.candle::before {
  z-index: -1;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  bottom: 40px;
  left: -10px;
  background-color: #f5b987;
  opacity: 0.2;
}
.candle::after {
  width: 50%;
  height: 100%;
  right: 0;
  background-color: #d16d1b;
}
.candle-wax {
  background-color: #f9d4b6;
  border-radius: 6px;
  width: 120%;
  left: -10%;
  height: 10px;
  top: -10px;
  z-index: 2;
}
.candle-wax::before {
  width: 8px;
  height: 12px;
  background-color: #f9d4b6;
  border-radius: 6px;
  right: 10px;
  top: 5px;
}
.candle-wax::after {
  width: 8px;
  height: 20px;
  background-color: #f9d4b6;
  border-radius: 6px;
  left: 3px;
  top: 5px;
}

.wax-reflection {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: #fdf0e5;
  opacity: 0.8;
  left: 3px;
  top: 20px;
  z-index: 4;
}
.wax-reflection::before, .wax-reflection::after {
  content: "";
  position: absolute;
}
.wax-reflection-top::before, .wax-reflection-top::after {
  content: "";
  position: absolute;
}

.flame {
  width: 24px;
  height: 24px;
  bottom: 150%;
  left: 3px;
  animation: flicker 15s linear infinite;
}
.flame::before, .flame::after {
  content: "";
  position: absolute;
}
.flame-in {
  width: 100%;
  height: 100%;
  background-color: #ee8228;
  border-radius: 0 50% 50%;
  transform: rotate(45deg);
  animation: flame 2s linear infinite;
}
.flame-in::before {
  border-radius: 0 50% 50%;
  background-color: #f5b987;
  height: 70%;
  width: 70%;
  bottom: 0%;
  left: 30%;
}
.flame-in::after {
  content: "";
  position: absolute;
}

.pumpkins {
  bottom: 0;
  height: 100px;
  width: 100%;
}
.pumpkins * {
  position: absolute;
}
.pumpkins *:before, .pumpkins *:after {
  position: absolute;
  content: "";
}

.pumpkin {
  bottom: 0;
  left: 20px;
  background: #c54c17;
  width: 80px;
  height: 60px;
  border-radius: 50px;
  z-index: 2;
}

.pumpkin:before {
  background-color: #ee8228;
  border-radius: 40px;
  width: 50%;
  height: 100%;
  left: 25%;
}

.pumpkin:after {
  width: 50%;
  height: 100%;
  left: 0;
  background-color: rgba(160, 32, 3, 0.4);
  border-radius: 50px 0 0 50px;
}

.pumpkin .top {
  width: 30px;
  height: 30px;
  border: 10px solid #329399;
  border-radius: 0px 50px 0 0;
  border-bottom: 0;
  border-left: 0;
  z-index: -1;
  top: -20px;
  left: 25px;
}

.pumpkin:nth-child(3) {
  left: 60%;
  transform: scale(0.7);
  transform-origin: bottom center;
}

.pumpkin:nth-child(2) {
  left: 60px;
  transform: scale(0.5);
  transform-origin: bottom center;
}
@keyframes flame {
  50% {
    transform: scale(0.9) rotate(45deg);
  }
}
.container-halloween-enter {
  display: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(28, 28, 28, 0.9098039216);
  z-index: 9999999;
}

.container-halloween-enter__text {
  font-family: "Underdog", cursive;
  font-size: 5rem;
  font-weight: 600;
  color: #FF4500;
  opacity: 0;
  position: relative;
}
.container-halloween-enter__text--new-year {
  color: #ffffff !important;
}

.container-halloween-enter__text-start {
  position: absolute;
  font-size: 2rem;
  text-align: center;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  bottom: -45px;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.container-halloween-enter__text--fall {
  animation: pumpkin--fall 1.8s ease forwards;
}

.container-halloween-enter__pumpkin {
  width: 50px;
  height: 50px;
  background: url("/assets/pumpkin.png") no-repeat center center/contain;
  margin: 0 20px;
  opacity: 0;
}
.container-halloween-enter__pumpkin--new-year {
  background: url("/assets/new-year/balls/2.png") no-repeat center center/contain !important;
}

.container-halloween-enter__pumpkin--fall {
  animation: pumpkin--fall 1.8s ease 1s forwards;
}

@keyframes pumpkin--fall {
  0% {
    transform: translateY(-150%);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@media (max-width: 768px) {
  .container-halloween-enter__text {
    font-size: 3rem;
  }
  .container-halloween-enter__pumpkin {
    width: 30px;
    height: 30px;
    margin: 0 10px;
  }
}
@keyframes halloween-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.container-halloween-enter__blink {
  animation: halloween-blink 0.5s ease-in-out 3;
}

.halloween-pack-body .footer {
  display: none;
}

.halloween-pack-body .card-show__header {
  filter: unset;
  transform: unset;
}
.halloween-pack-body .card-show__wrapper {
  height: 300px;
}
.halloween-pack-body .card-show__wrapper .halloween-pumpkin-scary {
  position: absolute;
  bottom: 47px;
  left: 30px;
  z-index: 11;
}
.halloween-pack-body .card-show__container {
  border-radius: 0 0 32px 32px;
}
.halloween-pack-body .card-show__name-wrapper {
  border-radius: 32px;
  padding-top: 25px;
}

.halloween-pack__number {
  width: 20px;
  height: 20px;
  background: #cd7111;
  border-radius: 50%;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  font-weight: 500;
}
.halloween-pack__title {
  font-size: 36px;
  text-align: center;
  font-weight: 500;
  margin-bottom: 30px;
  color: #FF9800;
  background: -webkit-linear-gradient(left, #FF9800, #ff6f07, #FF9800);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 2px 3px #000000) drop-shadow(0px 0px 10px #ff6f07);
}
@media screen and (max-width: 420px) {
  .halloween-pack__title {
    font-size: 32px;
  }
}
@media screen and (max-width: 360px) {
  .halloween-pack__title {
    font-size: 29px;
  }
}
.halloween-pack__sweets {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  background: var(--dark-grey-bg);
  border-radius: 27px;
  font-size: 16px;
  padding: 10px 15px;
  border: 1px solid var(--border-color);
}
.halloween-pack__sweets img {
  width: 22px;
  height: 22px;
  margin-left: 10px;
}
.halloween-pack__subtitle {
  font-size: 24px;
  margin-bottom: 10px;
  text-align: center;
  font-weight: 500;
}
.halloween-pack__text {
  line-height: 23px;
  margin-bottom: 30px;
  font-size: 15px;
}
.halloween-pack__p {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.halloween-pack__history {
  margin-bottom: 30px;
  display: flex;
}
.halloween-pack__history .manga-cards__item-wrapper {
  width: 180px;
  padding: 0 !important;
  margin-right: 10px;
}
.halloween-pack__button {
  font-size: 16px;
  padding: 10px 15px;
  border: 1px solid var(--border-color);
  border-radius: 25px;
  align-items: center;
  background-image: linear-gradient(to right, #7c3609, #562b1d, #232020, #c53d13, #7c3609);
  background-size: 600%;
  background-position: 0 0;
  box-shadow: inset 0 0 5em rgba(0, 0, 0, 0.5);
  display: flex;
  height: 100%;
  justify-content: center;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-name: gradients-halloween-btn;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 30px;
}
.halloween-pack__button img {
  width: 22px;
  height: 22px;
  margin-left: 10px;
  margin-right: 4px;
}
.halloween-pack__button:hover {
  transform: scale(1.02);
}

@keyframes gradients-halloween-btn {
  0% {
    background-position: 0 0;
  }
  25% {
    background-position: 50% 0;
  }
  50% {
    background-position: 90% 0;
  }
  60% {
    background-position: 60%;
  }
  75% {
    background-position: 40%;
  }
  100% {
    background-position: 0 0;
  }
}
.halloween-pumpkin-scary {
  width: 70px;
}
.halloween-pumpkin-scary--animation-trigger {
  cursor: pointer;
}

.halloween-boo {
  display: none;
  opacity: 0;
  pointer-events: none;
}

.halloween-boo-active {
  display: block;
  transform: rotate(-15deg);
  position: fixed;
  top: 0;
  left: 0;
  color: #fff;
  font-size: 10vw;
  animation: halloween-boo 1s 1;
  z-index: 9999;
}

.halloween-st0 {
  fill: #ac4500;
}

.halloween-st1 {
  fill: #663114;
}

.halloween-st2 {
  fill: #000000;
}

.halloween-st3 {
  fill: #B58D54;
}

.halloween-st4 {
  fill: #38320A;
}

.halloween-flicker-main .halloween-st2 {
  animation: halloween-flicker-main 5s infinite;
}

.halloween-flicker-main .halloween-st3 {
  animation: halloween-flicker-secondary 5s infinite;
}

.halloween-surprise-animation {
  animation: halloween-pumpkin-pop 0.2s both 1;
}

@keyframes halloween-flicker-main {
  0%, 19% {
    fill: rgb(255, 179, 66);
  }
  21% {
    fill: rgb(255, 211, 141);
  }
  45% {
    fill: rgb(188, 132, 49);
  }
  60%, 65% {
    fill: rgb(255, 179, 66);
  }
  70% {
    fill: rgb(255, 211, 141);
  }
  85%, 100% {
    fill: rgb(255, 179, 66);
  }
}
@keyframes halloween-flicker-secondary {
  0%, 19% {
    fill: rgb(232, 138, 6);
  }
  21% {
    fill: rgb(224, 159, 54);
  }
  45% {
    fill: rgb(135, 97, 21);
  }
  60%, 65% {
    fill: rgb(232, 138, 6);
  }
  70% {
    fill: rgb(224, 159, 54);
  }
  85%, 100% {
    fill: rgb(232, 138, 6);
  }
}
@keyframes halloween-pumpkin-pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.8) rotate(5deg);
  }
  100% {
    transform: scale(1.2);
  }
}
@keyframes halloween-boo {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0.4;
  }
  50% {
    transform: scale(1.8) rotate(5deg);
  }
  100% {
    transform: scale(1.6) rotate(5deg);
    opacity: 0;
  }
}
.halloween-slide-in {
  animation: halloween-slideIn 1s ease-in-out;
}

@keyframes halloween-slideIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.halloween-teams {
  margin: 30px auto 50px;
  display: flex;
}
.halloween-teams--title {
  font-size: 26px;
  cursor: pointer;
}
.halloween-teams--title div:first-of-type {
  margin-bottom: 3px;
}
.halloween-teams--title div:last-of-type {
  font-size: 13px;
  color: orange;
}
.halloween-teams__item {
  display: flex;
  align-items: center;
  background-color: black;
  margin-right: 15px;
  padding: 15px 12px;
  border-radius: 10px;
  width: 345px;
}
.halloween-teams__logo {
  width: 66px;
  flex-shrink: 0;
  margin-right: 15px;
}
.halloween-teams__info {
  display: flex;
  flex-direction: column;
  width: 135px;
}
.halloween-teams__name {
  font-size: 21px;
  font-weight: 500;
  color: white;
}
.halloween-teams__title {
  font-size: 13px;
  color: #e3e3e3;
  margin: 7px 0;
}
.halloween-teams__bar {
  width: 100%;
  height: 8px;
  background-color: var(--dark-grey-bg);
  border-radius: 10px;
}
.halloween-teams__bar--fill {
  border-radius: 10px;
  height: 8px;
  background-color: var(--purple-btn-bg);
}
.halloween-teams__candy {
  flex-shrink: 0;
  color: orange;
  margin-left: auto;
  font-weight: 600;
  font-size: 20px;
  display: flex;
  align-items: center;
}
.halloween-teams__candy img {
  width: 22px !important;
  margin-left: 5px;
}

.helloween-gift-candy {
  position: fixed;
  top: -50px;
  width: 50px;
  height: 50px;
  background-image: url("/assets/halloween/candy1.png");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 1;
  cursor: pointer;
  animation: helloween-gift-candy--fall 5s linear forwards, helloween-gift-candy--spin 5s linear infinite;
  z-index: 999;
}

.helloween-gift-candy--point-text {
  position: fixed;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  opacity: 1;
  animation: helloween-gift-candy--rise 2s ease-out forwards;
  z-index: 999;
}

@keyframes helloween-gift-candy--fall {
  0% {
    top: -50px;
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    top: 100vh;
    opacity: 0;
  }
}
@keyframes helloween-gift-candy--spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes helloween-gift-candy--collect {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5) translateY(-150px);
    opacity: 0;
  }
}
@keyframes helloween-gift-candy--rise {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-30px);
    opacity: 0;
  }
}
.helloween-gift-pumpkin {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  background-image: url("/assets/pumpkin.png");
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
  animation: helloween-gift-pumpkin--grow 2s ease-out forwards;
  z-index: 999;
}

@keyframes helloween-gift-pumpkin--grow {
  0% {
    transform: translateX(-50%) scale(0);
    bottom: -100px;
    opacity: 0;
  }
  100% {
    transform: translateX(-50%) scale(1);
    bottom: 0;
    opacity: 1;
  }
}
@keyframes helloween-gift-pumpkin--shake {
  0% {
    transform: translateX(-50%);
  }
  25% {
    transform: translateX(calc(-50% - 10px));
  }
  50% {
    transform: translateX(calc(-50% + 10px));
  }
  75% {
    transform: translateX(calc(-50% - 5px));
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes helloween-gift-pumpkin--rotate {
  0% {
    transform: translateX(-50%) rotate(0deg);
  }
  50% {
    transform: translateX(-50%) rotate(15deg);
  }
  100% {
    transform: translateX(-50%) rotate(-15deg);
  }
}
@keyframes helloween-gift-pumpkin--bounce {
  0% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, -10px);
  }
  100% {
    transform: translate(-50%, 0);
  }
}
@keyframes helloween-gift-pumpkin--diagonal-rise-left {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(-100px, -200px);
    opacity: 0;
  }
}
@keyframes helloween-gift-pumpkin--diagonal-rise-center {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(0, -200px);
    opacity: 0;
  }
}
@keyframes helloween-gift-pumpkin--diagonal-rise-right {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(100px, -200px);
    opacity: 0;
  }
}
@keyframes helloween-gift-pumpkin--text-rise {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-50px);
    opacity: 0;
  }
}
.helloween-gift-pumpkin--candy {
  position: absolute;
  width: 30px;
  height: 30px;
  background-image: url("/assets/halloween/candy1.png");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 999;
}

.helloween-gift-pumpkin--text {
  position: absolute;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  opacity: 1;
  animation: halloween-gift-pumpkin--text-rise 1.8s ease-out forwards;
  z-index: 999;
}

.halloween-leaderboard__title {
  margin-bottom: 30px !important;
  color: #FF9800;
  background: -webkit-linear-gradient(left, #FF9800, #FFC107, #FF9800);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 2px 3px #000000) drop-shadow(0px 0px 10px #FF9800);
}
.halloween-leaderboard__tabs {
  display: flex;
  overflow-x: auto;
  justify-content: center;
  margin-bottom: 30px;
}
.halloween-leaderboard__tabs-item {
  margin-right: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  font-size: 15px;
}
@media (max-width: 345px) {
  .halloween-leaderboard__tabs-item {
    font-size: 14px;
    margin-right: 20px;
  }
}
.halloween-leaderboard__tabs-item--active {
  font-weight: 500;
  color: orange;
}
.halloween-leaderboard__tabs-item:last-of-type {
  margin-right: 0;
}
.halloween-leaderboard__tabs-item img {
  width: 37px;
  height: 37px;
  margin-bottom: 5px;
}
@media (max-width: 345px) {
  .halloween-leaderboard__tabs-item img {
    width: 29px;
    height: 29px;
  }
}
.halloween-leaderboard__item {
  display: flex;
  padding: 10px 10px;
  align-items: center;
  margin-bottom: 10px;
}
.halloween-leaderboard__item[data-team="1"] .halloween-leaderboard__frame {
  top: 1px;
}
.halloween-leaderboard__item[data-team="2"] .halloween-leaderboard__frame {
  left: -2px;
}
.halloween-leaderboard__item[data-team="3"] .halloween-leaderboard__frame {
  top: -2px;
}
.halloween-leaderboard__item[data-team="4"] .halloween-leaderboard__frame {
  left: -1px;
}
.halloween-leaderboard__header {
  position: relative;
}
.halloween-leaderboard__header-img {
  height: 215px;
  -o-object-fit: cover;
     object-fit: cover;
  border-top-right-radius: 16px;
  border-top-left-radius: 16px;
}
.halloween-leaderboard__avatar {
  width: 50px;
  position: relative;
  margin-right: 15px;
}
.halloween-leaderboard__avatar img {
  border-radius: 50%;
}
.halloween-leaderboard__frame {
  position: absolute;
  border-radius: 0 !important;
  transform: scale(1.26);
}
.halloween-leaderboard__candy {
  margin-left: auto;
  color: orange;
  font-size: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.halloween-leaderboard__candy img {
  width: 22px;
  margin-left: 7px;
}
.halloween-leaderboard__wrapper {
  padding: 24px;
}
.halloween-leaderboard__name {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
}

#halloween-leaderboard-modal .modal__body {
  padding: 0;
}

.halloween-game {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.halloween-game__text {
  line-height: 23px;
  font-size: 15px;
  margin-bottom: 15px;
}
.halloween-game__leaderboard {
  width: 100%;
  border-radius: 10px;
  background: var(--dark-grey-bg);
}
.halloween-game__leaderboard-item {
  display: flex;
  align-items: center;
  padding: 15px;
  width: 100%;
  border-bottom: 1px solid var(--border-color);
}
.halloween-game__leaderboard-item:last-of-type {
  border-bottom: none;
}
.halloween-game__leaderboard-item img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin-right: 15px;
}
.halloween-game__leaderboard-name {
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100px;
}
.halloween-game__leaderboard-time {
  color: var(--secondary-text-color);
  margin-left: auto;
}
.halloween-game__leaderboard-place {
  margin-right: 10px;
}
.halloween-game__grid {
  display: grid;
  grid-template-columns: repeat(5, 60px);
  gap: 5px;
  margin: 20px 0;
}
@media screen and (max-width: 340px) {
  .halloween-game__grid {
    grid-template-columns: repeat(5, 55px);
  }
}
.halloween-game__controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 15px;
}
.halloween-game button {
  padding: 10px 20px;
  background-color: #ff8c00;
  border: none;
  cursor: pointer;
  font-size: 1em;
  color: white;
  border-radius: 5px;
  transition: background-color 0.3s;
}
.halloween-game__cell {
  width: 60px;
  height: 60px;
  background-color: #444;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 340px) {
  .halloween-game__cell {
    width: 55px;
    height: 55px;
  }
}
.halloween-game__cell.active {
  background-color: #ff8c00;
  transform: scale(1.03);
  box-shadow: 0 0 10px #ff8c00;
}
.halloween-game__cell.active img {
  display: block;
}
.halloween-game__cell img {
  width: 40px;
  height: 40px;
  display: none;
}

.menu__item--halloween {
  transition: all 0.2s;
}
.menu__item--halloween:hover {
  background: #ec8f1e !important;
  color: var(--main-text-color) !important;
}
.menu__item--halloween img {
  width: 20px;
}

.halloween-pack-body .manga-cards__link,
.halloween-pack-body .manga-cards__text,
.halloween-pack-body .manga-cards__report {
  display: none;
}

.halloween-frame-manga {
  position: absolute;
  z-index: 10;
  margin: 0 auto;
  max-width: 250px;
  display: block;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.halloween-frame-manga-pc {
  position: absolute;
  z-index: 10;
  margin: 0 auto;
  max-width: 250px;
  display: block;
  left: 0;
  top: 0;
  -o-object-fit: unset !important;
     object-fit: unset !important;
}

.halloween-pack__button-coins {
  font-size: 16px;
  padding: 10px 15px;
  border: 1px solid var(--border-color);
  border-radius: 25px;
  align-items: center;
  background-image: linear-gradient(to right, #7c3609, #562b1d, #232020, #c53d13, #7c3609);
  background-size: 600%;
  background-position: 0 0;
  box-shadow: inset 0 0 5em rgba(0, 0, 0, 0.5);
  display: flex;
  height: 100%;
  justify-content: center;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-name: gradients-halloween-btn;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 30px;
}

.halloween-pack__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.halloween-pack__cards img {
  margin-bottom: 15px;
}

.halloween-pack__card-image {
  width: 24%;
}
@media screen and (max-width: 390px) {
  .halloween-pack__card-image {
    width: 33%;
  }
}

.ads-market {
  max-width: 1100px;
  margin: 0 auto;
  padding: 6px 0;
}
.ads-market__top {
  margin: 12px 0 14px;
  border-radius: 16px;
  padding: 14px;
  background: var(--light-bg);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}
.ads-market__top-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 10px;
}
.ads-market__top-title {
  font-weight: 900;
}
.ads-market__top-subtitle {
  font-size: 12px;
  opacity: 0.75;
}
.ads-market__top-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ads-market__top-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.ads-market__top-left {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.ads-market__top-rank {
  font-weight: 900;
  border-radius: 10px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.06);
}
.ads-market__top-type {
  font-weight: 900;
}
.ads-market__top-meta {
  font-size: 12px;
  opacity: 0.75;
}
.ads-market__top-price {
  font-weight: 900;
}
.ads-market__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 900;
  margin-left: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.ads-market__badge--top {
  background: rgba(255, 190, 50, 0.16);
}
.ads-market__subtitle {
  margin: 10px 0 14px;
  opacity: 0.8;
  line-height: 1.35;
}
.ads-market__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 14px;
}
@media (max-width: 960px) {
  .ads-market__grid {
    grid-template-columns: 1fr;
  }
}
.ads-market__panel {
  border-radius: 16px;
  padding: 14px;
  background: var(--light-bg);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}
.ads-market__panel-title {
  font-weight: 800;
  margin-bottom: 10px;
}
.ads-market__field {
  margin-top: 12px;
}
.ads-market__label {
  font-weight: 700;
  margin-bottom: 6px;
}
.ads-market__mini {
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.75;
  line-height: 1.25;
}
.ads-market__type {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ads-market__type-btn {
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: transparent;
  cursor: pointer;
  font-weight: 800;
}
.ads-market__type-btn.is-active {
  background: rgba(0, 0, 0, 0.06);
}
.ads-market__target {
  margin-top: 6px;
}
.ads-market__target-card {
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px dashed rgba(0, 0, 0, 0.18);
}
.ads-market__target-title {
  font-weight: 900;
}
.ads-market__target-meta {
  font-size: 12px;
  opacity: 0.75;
  margin-top: 2px;
}
.ads-market__select, .ads-market__input {
  width: 100%;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: transparent;
  outline: none;
}
.ads-market__actions {
  margin-top: 12px;
}
.ads-market__btn {
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: transparent;
  cursor: pointer;
  font-weight: 800;
}
.ads-market__btn--primary {
  border: none;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
}
.ads-market__btn--ghost {
  opacity: 0.9;
}
.ads-market__btn--danger {
  border: none;
  background: rgba(220, 60, 60, 0.12);
}
.ads-market__btn--success {
  border: none;
  background: rgba(60, 180, 120, 0.14);
}
.ads-market__preview {
  margin-top: 10px;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.ads-market__preview-title {
  font-weight: 900;
  margin-bottom: 6px;
}
.ads-market__preview-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.ads-market__pill {
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.06);
  font-weight: 900;
}
.ads-market__preview-price {
  font-weight: 900;
}
.ads-market__preview-state {
  opacity: 0.8;
}
.ads-market__hint {
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  opacity: 0.85;
}
.ads-market__hint--warn {
  background: rgba(220, 160, 20, 0.1);
}
.ads-market__empty {
  opacity: 0.75;
  line-height: 1.35;
  padding: 10px 0;
}
.ads-market__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ads-market__item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.ads-market__item-type {
  font-weight: 900;
}
.ads-market__item-meta {
  font-size: 12px;
  opacity: 0.75;
  margin-top: 2px;
}
.ads-market__dot {
  margin: 0 6px;
  opacity: 0.5;
}
.ads-market__item-right {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.ads-market__item-price {
  font-weight: 900;
}
.ads-market__footnote {
  margin-top: 10px;
  font-size: 12px;
  opacity: 0.75;
}

.home-promo {
  margin: 16px 0;
}
.home-promo__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.home-promo__title {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.2px;
}
.home-promo__action {
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  opacity: 0.8;
}
.home-promo__action:hover {
  opacity: 1;
}
.home-promo__grid {
  display: grid;
  /* одна строка */
  grid-auto-flow: column;
  /* ширина карточки */
  grid-auto-columns: minmax(280px, 1fr);
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  /* свайп */
  -webkit-overflow-scrolling: touch;
  /* snap */
  scroll-snap-type: x mandatory;
  /* убираем скроллбар (по желанию) */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.home-promo__grid::-webkit-scrollbar {
  display: none;
}

.home-promo-card {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: var(--light-bg);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  color: inherit;
  padding: 12px;
  min-height: 340px;
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.home-promo-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1);
}
.home-promo-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.home-promo-card__rank {
  font-weight: 900;
  font-size: 12px;
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.06);
  flex: 0 0 auto;
}
.home-promo-card__type {
  font-weight: 900;
  font-size: 12px;
  opacity: 0.9;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-promo-card__price {
  font-weight: 900;
  font-size: 12px;
  opacity: 0.85;
  flex: 0 0 auto;
}
.home-promo-card__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.home-promo-card__content--center {
  align-items: center;
  text-align: center;
}
.home-promo-card__avatar {
  width: 96px;
  height: 96px;
  border-radius: 999px;
  margin: 6px auto 10px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
  flex: 0 0 auto;
}
.home-promo-card__avatar-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.home-promo-card__name {
  font-weight: 900;
  font-size: 18px;
  line-height: 1.15;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}
.home-promo-card__name--big {
  font-size: 16px;
  text-align: left;
  margin-top: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 38px;
  text-align: center;
}
.home-promo-card__name--left {
  text-align: left;
}
.home-promo-card__sub {
  opacity: 0.75;
  font-weight: 700;
  margin-top: 6px;
  font-size: 13px;
}
.home-promo-card__sub--left {
  text-align: left;
}
.home-promo-card__push {
  flex: 1;
}
.home-promo-card__bar {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
  margin-top: 12px;
}
.home-promo-card__bar-fill {
  height: 100%;
  border-radius: 999px;
  background: rgba(120, 70, 255, 0.85);
}
.home-promo-card__pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.home-promo-card__pills--center {
  justify-content: center;
}
.home-promo-card__media {
  margin-top: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 150px;
}
.home-promo-card__user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 6px;
}
.home-promo-card__user-ava {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
  flex: 0 0 auto;
}
.home-promo-card__user-ava-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.home-promo-card__user-info {
  min-width: 0;
}
.home-promo-card__stats {
  margin-top: auto;
  display: flex;
  gap: 14px;
  justify-content: center;
  padding-top: 8px;
}
.home-promo-card__tag {
  text-align: center;
  font-weight: 900;
  margin-top: 10px;
  opacity: 0.95;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* Fan — базовая геометрия */
.home-promo-fan {
  position: relative;
  width: 100%;
  max-width: 320px;
  height: 150px;
  /**
   * FIX: разные смещения под количество картинок
   * 5 карточек — классика
   */
  /**
   * FIX: 4 карточки — чтобы реально было по центру,
   * без “лишнего” места справа/слева
   */
}
.home-promo-fan__item {
  position: absolute;
  top: 6px;
  left: 50%;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.03);
  transform: translateX(-50%);
}
.home-promo-fan__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.home-promo-fan--covers {
  height: 130px;
}
.home-promo-fan--covers .home-promo-fan__item {
  width: 84px;
  height: 118px;
  top: 12px;
}
.home-promo-fan--cards .home-promo-fan__item {
  width: 92px;
  height: 136px;
  top: 6px;
}
.home-promo-fan--5 .home-promo-fan__item--1 {
  transform: translateX(calc(-50% - 96px)) rotate(-12deg) translateY(10px);
}
.home-promo-fan--5 .home-promo-fan__item--2 {
  transform: translateX(calc(-50% - 48px)) rotate(-6deg) translateY(6px);
}
.home-promo-fan--5 .home-promo-fan__item--3 {
  transform: translateX(-50%) rotate(0deg);
}
.home-promo-fan--5 .home-promo-fan__item--4 {
  transform: translateX(calc(-50% + 48px)) rotate(6deg) translateY(6px);
}
.home-promo-fan--5 .home-promo-fan__item--5 {
  transform: translateX(calc(-50% + 96px)) rotate(12deg) translateY(10px);
}
.home-promo-fan--4 .home-promo-fan__item--1 {
  transform: translateX(calc(-50% - 72px)) rotate(-10deg) translateY(9px);
}
.home-promo-fan--4 .home-promo-fan__item--2 {
  transform: translateX(calc(-50% - 24px)) rotate(-4deg) translateY(4px);
}
.home-promo-fan--4 .home-promo-fan__item--3 {
  transform: translateX(calc(-50% + 24px)) rotate(4deg) translateY(4px);
}
.home-promo-fan--4 .home-promo-fan__item--4 {
  transform: translateX(calc(-50% + 72px)) rotate(10deg) translateY(9px);
}

/* pills/stat */
.home-promo-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 14px;
  padding: 8px 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.03);
  font-weight: 900;
}
.home-promo-pill__i {
  opacity: 0.8;
}
.home-promo-pill__v {
  opacity: 0.9;
}

.home-promo-stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  opacity: 0.9;
}
.home-promo-stat__i {
  opacity: 0.75;
}
.home-promo-stat__v {
  opacity: 0.95;
}

.home-promo-fan__item video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* Внутри fan-слота всё должно вести себя как картинка */
.home-promo-fan__item {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.home-promo-fan__img-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

.home-promo-fan__img,
.home-promo-fan__video {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

/* video иногда имеет внутренние отступы/inline поведение — фикс */
.home-promo-fan__video {
  background: rgba(0, 0, 0, 0.04);
}

/* кадр поверх карты (как у тебя) */
.home-promo-fan__item .card-anim-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.home-promo-card {
  scroll-snap-align: start;
}

.moment-create {
  margin: 0 auto;
  max-width: 310px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.moment-create__list {
  display: flex;
  width: 100%;
  margin: 15px 0;
}
.moment-create__list-item {
  position: relative;
  margin-right: 10px;
  width: 65px;
  height: 65px;
}
.moment-create__list-item img {
  border-radius: var(--main-border-radius);
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.moment-create__list-item:last-of-type {
  margin-right: 0;
}
.moment-create__list-number {
  position: absolute;
  top: 5px;
  right: 8px;
  background: var(--dark-bg);
  font-size: 12px;
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: white;
  border-radius: 5px;
}
.moment-create__text {
  width: 100%;
  height: 150px;
  padding: 15px 78px 15px 20px;
  border: 1px solid transparent;
  background: var(--medium-bg);
  border-radius: 10px;
  resize: none;
  color: var(--main-text-color);
  outline: none;
}
.moment-create__text:active, .moment-create__text:focus {
  border: 1px solid var(--main-purple-color);
}
.moment-create__replace {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.moment-create__replace-image {
  width: 150px;
  margin-top: 15px;
}
.moment-create__button--load-img {
  margin-bottom: 17px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.moment-create__button--load-img i {
  font-size: 20px;
  margin-right: 5px;
}
.moment-create__notify {
  margin-bottom: 15px;
  text-align: center;
}
.moment-create__info-footer {
  display: flex;
  justify-content: space-between;
}
.moment-create__info-footer button {
  margin-left: 10px;
}
.moment-create__info-footer button i {
  font-size: 18px;
}
.moment-create__image {
  width: 100%;
  height: 300px;
  visibility: hidden;
}
.moment-create__frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}
.moment-create__finish {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.moment-create__input-name {
  border: none;
  background: var(--medium-bg);
  width: 100%;
  padding: 15px 78px 15px 20px;
  border-radius: 10px;
  outline: none;
  font-size: 15px;
  color: var(--main-text-color);
}
.moment-create__input-title {
  border: none;
  background: var(--medium-bg);
  width: 100%;
  padding: 15px 78px 15px 20px;
  border-radius: 10px;
  outline: none;
  font-size: 15px;
  color: var(--main-text-color);
}
.moment-create__input-controls {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translate(0, -50%);
  display: flex;
}
.moment-create__input-controls button {
  font-size: 20px;
  background: var(--light-bg);
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
  line-height: 25px;
}
.moment-create__input-controls button:last-of-type {
  margin-right: 0;
}
.moment-create__field[data-type=name] {
  position: relative;
}
.moment-create__footer {
  position: absolute;
  text-align: center;
  bottom: 12px;
  width: 100%;
  color: white;
  z-index: 4;
  pointer-events: none;
  padding-bottom: 9px;
}
.moment-create__form {
  position: relative;
  width: 300px;
  margin: 15px 0 30px;
}
.moment-create__name {
  font-size: 29px;
  margin-bottom: 9px;
  padding: 0 10px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.5px;
}
.moment-create__title {
  font-size: 14px;
  padding: 0 9px;
  line-height: 13px;
  font-weight: 400;
  letter-spacing: -0.2px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.moment-create__field {
  margin-bottom: 17px;
}
.moment-create__field-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
}
.moment-create__rang-list {
  background: var(--medium-bg);
  padding: 10px;
  border-radius: 10px;
}
.moment-create__rang-item {
  display: flex;
  cursor: pointer;
  margin-bottom: 10px;
  align-items: center;
}
.moment-create__rang-item--active {
  color: var(--purple-btn-bg);
}
.moment-create__rang-item:last-of-type {
  margin-right: 0;
}
.moment-create__rang-item[data-rank=E] .moment-create__rang-icon {
  background: #613324;
  color: white;
}
.moment-create__rang-item[data-rank=D] .moment-create__rang-icon {
  background: #718b99;
  color: white;
}
.moment-create__rang-item[data-rank=C] .moment-create__rang-icon {
  background: #df9300;
  color: white;
}
.moment-create__rang-item[data-rank=B] .moment-create__rang-icon {
  background: #eb5d9b;
  color: white;
}
.moment-create__rang-item[data-rank=G] .moment-create__rang-icon {
  background: #004e2f;
  color: white;
}
.moment-create__rang-item[data-rank=P] .moment-create__rang-icon {
  background: #005db6;
  color: white;
}
.moment-create__rang-item[data-rank=A] .moment-create__rang-icon {
  background: #9b0a05;
  color: white;
}
.moment-create__rang-item[data-rank=S] .moment-create__rang-icon {
  background: #f54972;
  color: white;
}
.moment-create__rang-icon {
  margin-right: 10px;
  width: 25px;
  height: 25px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.moment-create__rang-icon[data-rang=E] {
  background: #4c4c4c;
  color: white;
}
.moment-create__rang-icon[data-rang=D] {
  background: #338ffb;
  color: white;
}
.moment-create__rang-icon[data-rang=C] {
  background: #fd7f85;
  color: white;
}
.moment-create__rang-icon[data-rang=B] {
  background: #60d566;
  color: white;
}
.moment-create__rang-icon[data-rang=A] {
  background: #7a41f7;
  color: white;
}
.moment-create__rang-icon[data-rang=S] {
  background: #39caa6;
  color: white;
}
.moment-create__rang-text {
  font-size: 15px;
}
.moment-create__loader {
  width: 48px;
  height: 48px;
  border: 5px solid #464646;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation-loader 1s linear infinite;
  position: absolute;
  left: calc(50% - 24px);
  top: calc(50% - 24px);
  transform: translate(-50%, -50%);
}
.moment-create__pages {
  background: var(--medium-bg);
  color: var(--main-text-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-radius: 21px;
}
.moment-create__button {
  background: white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
}
.moment-create__button span {
  font-size: 14px;
}
.moment-create__settings {
  width: 310px;
}

.moments-inner {
  max-width: 800px;
  margin: 0 auto;
}
.moments-list {
  gap: 3px;
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /*    @media screen and (max-width:  760px) {
          grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
      }
      @media screen and (max-width:  640px) {
          grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
      }
      @media screen and (max-width:  440px) {
          grid-template-columns: repeat(auto-fill,minmax(100px,1fr));
      }*/
}
.moments-list__item {
  position: relative;
  width: 32.5%;
  transition: all 0.2s;
}
.moments-list__item img {
  border-radius: var(--main-border-radius);
}
.moments-list__item:hover {
  transform: scale(1.01);
}
.moments-list__icon {
  position: absolute;
  top: 10px;
  right: 11px;
  color: white;
}

.page--moment .page__header-poster img {
  max-width: 300px !important;
  max-height: 300px;
  box-shadow: unset;
}
.page--moment .page__header {
  transform: scale(1.08);
}
.page--moment .page__content {
  padding-top: 65px;
}
.page--moment .page__header-poster {
  height: unset;
}

.moment-show__frame-btn {
  background: rgba(166, 166, 166, 0.44);
  color: white;
  position: absolute;
  top: 50%;
  width: 30px;
  height: 30px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.moment-show__poster-inner {
  position: relative;
  max-width: 300px;
  margin: 0 auto;
}
.moment-show__left-btn {
  left: -10px;
}
.moment-show__right-btn {
  right: -10px;
}

.ny-slide {
  position: relative;
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  gap: 30px;
  padding: 30px 16px;
  font-family: Inter;
  min-height: 100dvh;
}
.ny-slide__loading {
  text-align: center;
  margin-top: 15px;
  background: #7d3ce0;
  padding: 15px;
  color: #fefefe;
  border-radius: 16px;
  line-height: 22px;
}

@media (min-width: 390px) {
  .ny-slide {
    justify-content: space-evenly;
  }
}
@media (max-width: 431px) {
  .ny-slide {
    padding: 20px 16px;
    gap: 0px;
  }
}
@media (max-width: 380px) {
  .ny-slide {
    gap: 20px;
  }
}
.ny-slide__title {
  display: block;
  width: auto;
  border-radius: 48px;
  box-shadow: 0px 4px 116.5px 0px rgba(0, 0, 0, 0.7), 0px -6px 33.9px 0px rgb(245, 0, 0), 12px 7px 19.3px 0px rgb(167, 0, 0);
  background: rgb(218, 0, 0);
  padding: 13px 26px;
  color: rgb(255, 255, 255);
  font-size: 24px;
  font-weight: 700;
  line-height: 120.833333%;
  text-transform: uppercase;
  margin-inline: auto;
}

@media (max-width: 600px) {
  .ny-slide__title {
    font-size: 4vw;
  }
}
@media (max-width: 431px) {
  .ny-slide__title {
    margin-bottom: 20px;
  }
}
.ny-slide__body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ny-slide__rank {
  font-weight: 600;
  font-size: 32px;
  color: #fff;
  text-align: center;
  margin-bottom: 30px;
}

@media (max-width: 600px) {
  .ny-slide__rank {
    font-size: 5vw;
  }
}
@media (max-width: 380px) {
  .ny-slide__rank {
    margin-bottom: 10px;
  }
}
.ny-slide__rank span {
  display: block;
  font-weight: 800;
  font-size: 100px;
  line-height: 1;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .ny-slide__rank span {
    font-size: 15vw;
  }
}
.ny-slide__image {
  max-width: 66%;
  margin-left: auto;
}

.ny-slide__image img {
  width: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  height: auto;
}

@media (min-width: 432px) {
  .ny-slide__image {
    min-width: 77%;
  }
}
.ny-slide__footer-descr {
  color: rgb(255, 255, 255);
  font-family: Inter;
  font-size: 45px;
  font-weight: 700;
  line-height: 126%;
  text-align: center;
  margin-bottom: 29px;
}

@media (max-width: 600px) {
  .ny-slide__footer-descr {
    font-size: 7.5vw;
  }
}
.ny-slide__footer-text {
  color: rgb(255, 255, 255);
  font-family: Inter;
  font-size: 27px;
  font-weight: 400;
  line-height: 126%;
  text-align: center;
}

@media (max-width: 600px) {
  .ny-slide__footer-text {
    font-size: 4.5vw;
  }
}
.ny-slide-1 {
  background: url("/assets/year-finals/slide-bg-1.png") center/cover no-repeat;
}

.ny-slide-2 {
  background: url("/assets/year-finals/slide-bg-2.png") center/cover no-repeat;
}

.ny-slide-3 {
  background: url("/assets/year-finals/slide-bg-3.png") center/cover no-repeat;
}

.ny-slide-4 {
  background: url("/assets/year-finals/slide-bg-4.png") center/cover no-repeat;
}

.ny-slide-5 {
  background: url("/assets/year-finals/slide-bg-5.png") center/cover no-repeat;
}

.ny-slide-6 {
  background: url("/assets/year-finals/slide-bg-6.png") center/cover no-repeat;
}

.star {
  position: absolute;
  aspect-ratio: 1/1;
}

.star svg {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  transition: all 0.3s ease 0s;
}

.star-1 {
  width: 50px;
  width: clamp(30px, 6vw, 50px);
  top: 14%;
  right: 10%;
  animation: rotating 20s linear 0s infinite;
}

.star-2 {
  width: clamp(40px, 12vw, 80px);
  top: 40%;
  left: 20%;
  animation: rotating 20s linear 0s infinite;
  scale: -1 1;
}

.star-3 {
  width: clamp(40px, 12vw, 80px);
  top: 70%;
  left: 50%;
  transform: translateX(-50%);
  animation: rotating 20s linear 0s infinite;
}

@keyframes rotating {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(-360deg) scale(0.6);
  }
}
.ny-slide-2 .ny-slide__rank {
  color: rgb(69, 54, 100);
}

.ny-slide-2 .ny-slide__rank p {
  font-size: 58px;
  line-height: 1;
}

@media (max-width: 600px) {
  .ny-slide-2 .ny-slide__rank p {
    font-size: 11vw;
  }
}
.ny-slide-2 .ny-slide__title {
  border-radius: 48px;
  box-shadow: 0px 4px 116.5px 0px rgba(0, 0, 0, 0.7), 0px -23px 33.9px 0px rgb(233, 187, 225), 12px 7px 19.3px 0px rgb(155, 102, 208);
  background: linear-gradient(180deg, rgb(226, 178, 218), rgb(167, 123, 210) 100%);
}

.ny-slide-2 .ny-slide__image {
  margin-inline: auto;
  width: 100%;
  max-width: 100%;
  margin-top: -60px;
}

.ny-slide-2 .ny-slide__footer-descr {
  color: rgb(69, 54, 100);
}

.ny-slide-2 .ny-slide__footer-descr span {
  display: block;
  font-size: 100px;
  font-weight: 800;
  line-height: 1;
}

@media (max-width: 600px) {
  .ny-slide-2 .ny-slide__footer-descr span {
    font-size: 16vw;
  }
}
.ny-slide-2 .ny-slide__footer-text {
  color: rgb(69, 54, 100);
}

.ny-slide-2 .rank-value b {
  display: block;
}

.ny-slide-3 .ny-slide__title {
  border-radius: 48px;
  box-shadow: 0px 4px 116.5px 0px rgba(0, 0, 0, 0.7), 0px -6px 40.3px 0px rgb(86, 166, 241), 12px 7px 19.3px 0px rgb(48, 64, 181);
  background: linear-gradient(-3.04deg, rgb(48, 63, 180) 39.966%, rgb(86, 165, 240) 84.035%);
}

.ny-slide-3 .ny-slide__rank {
  color: #fff;
}

.ny-slide-3 .ny-slide__rank span {
  font-size: 58px;
  margin-top: 10px;
  line-height: 1;
}

@media (max-width: 600px) {
  .ny-slide-3 .ny-slide__rank span {
    font-size: 10vw;
  }
}
.ny-slide-3 .ny-slide__image {
  margin-inline: auto;
  width: 100%;
  max-width: 100%;
  margin-top: -40px;
  opacity: 0.7;
}

.ny-slide-3 .ny-slide__footer-descr {
  margin-top: -130px;
  z-index: 2;
  position: relative;
  font-size: 32px;
  line-height: 1;
  z-index: 2;
}

.ny-slide-3 .ny-slide__footer-descr::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  filter: blur(198.3px);
  background: rgb(80, 70, 211);
  width: 100%;
  height: 100%;
  z-index: -1;
}

@media (max-width: 600px) {
  .ny-slide-3 .ny-slide__footer-descr {
    font-size: 6vw;
  }
}
.ny-slide-3 .ny-slide__footer-descr span {
  display: block;
  font-size: 100px;
  margin-top: 20px;
  line-height: 0.8;
  font-weight: 800;
}

.ny-slide-3 .ny-slide__footer-descr span b {
  display: block;
  font-weight: 800;
}

@media (max-width: 600px) {
  .ny-slide-3 .ny-slide__footer-descr span {
    font-size: 16vw;
  }
}
.ny-slide-3 .star-2 {
  top: 31%;
  left: 12%;
}

.ny-slide-3 .star-3 {
  left: 80%;
}

.ny-slide-4 .star-2 {
  top: 30%;
  left: 10%;
}

.ny-slide-4 .ny-slide__title {
  border-radius: 48px;
  box-shadow: 0px 4px 116.5px 0px rgba(0, 0, 0, 0.7), 0px -23px 33.9px 0px rgb(226, 192, 181), 12px 7px 19.3px 0px rgb(211, 85, 50);
  background: linear-gradient(178.28deg, rgb(228, 174, 166) 28.876%, rgb(206, 64, 22) 69.426%);
}

.ny-slide-4 .ny-slide__rank {
  color: rgb(134, 85, 85);
}

.ny-slide-4 .ny-slide__footer-descr {
  color: rgb(134, 85, 85);
  margin-top: -60px;
}

.ny-slide-4 .ny-slide__footer-descr .rank-value {
  font-size: 100px;
  line-height: 1;
}

@media (max-width: 600px) {
  .ny-slide-4 .ny-slide__footer-descr .rank-value {
    font-size: 16vw;
  }
}
.ny-slide-4 .ny-slide__footer-text {
  color: rgb(134, 85, 85);
}

.ny-slide-4 .ny-slide__image {
  max-width: 100%;
  margin-inline: auto;
}

.ny-slide-4 .ny-slide__footer-descr span {
  display: block;
}

.ny-slide-4 .ny-slide__footer-descr span b {
  display: block;
}

.ny-slide-5 {
  overflow-x: hidden;
}

.ny-slide-5 .ny-slide__title {
  box-shadow: 0px 4px 116.5px 0px rgba(0, 0, 0, 0.7), 0px -6px 40.3px 0px rgb(3, 103, 110), 12px 7px 19.3px 0px rgb(3, 49, 53);
  background: linear-gradient(-3.04deg, rgb(2, 46, 49) 44.39%, rgb(12, 91, 103) 80.859%);
}

.ny-slide-5 .ny-slide__rank p {
  font-size: 58px;
}

@media (max-width: 600px) {
  .ny-slide-5 .ny-slide__rank p {
    font-size: 9.5vw;
  }
}
.ny-slide-5 .ny-slide__image {
  margin-top: -30px;
  max-width: 100%;
  position: relative;
}

.ny-slide-5 .ny-slide__image::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  filter: blur(112.6px);
  background: rgb(0, 0, 0);
  z-index: 2;
  transform: translateX(-50%);
}

.ny-slide-5 .ny-slide__footer-descr {
  margin-top: -30px;
  font-size: 30px;
  font-weight: 600;
  position: relative;
  z-index: 2;
}

.ny-slide-5 .ny-slide__footer-descr span {
  display: block;
  font-size: 100px;
  line-height: 1;
}

@media (max-width: 600px) {
  .ny-slide-5 .ny-slide__footer-descr span {
    font-size: 16vw;
  }
}
.ny-slide-5 .ny-slide__footer-descr span b {
  display: block;
}

@media (max-width: 600px) {
  .ny-slide-5 .ny-slide__footer-descr {
    font-size: 5vw;
  }
}
.ny-slide-5 .star-2 {
  top: 52%;
  left: 10%;
}

.ny-slide-5 .star-3 {
  top: 73%;
  left: 78%;
}

.ny-slide-6 {
  justify-content: start;
}

.ny-slide-6 .ny-slide__title {
  margin-bottom: 60px;
  box-shadow: 0px 4px 116.5px 0px rgba(0, 0, 0, 0.7), 0px -6px 33.9px 0px #0c8249, 12px 7px 19.3px 0px #06522d;
  background: #076136;
}

@media (max-width: 390px) {
  .ny-slide-6 .ny-slide__title {
    margin-bottom: 20px;
  }
}
.ny-slide-6 .ny-slide__body {
  display: flex;
  flex-direction: column;
  justify-content: start;
  gap: 40px;
}

.ny-slide-6 .ny-slide__row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.ny-slide-6 .ny-slide__row-img {
  flex: 0 0 190px;
  width: 190px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
  border: 10px solid rgba(4, 69, 71, 0.5411764706);
}

@media (max-width: 600px) {
  .ny-slide-6 .ny-slide__row-img {
    flex: 0 0 33%;
    width: 100%;
  }
}
.ny-slide-6 .ny-slide__row-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.ny-slide-6 .ny-slide__row-text {
  color: #fff;
  font-size: 25px;
  line-height: 1;
  font-weight: 600;
}

.ny-slide-6 .ny-slide__row-text span {
  display: block;
  font-size: 32px;
  font-weight: 800;
}

@media (max-width: 600px) {
  .ny-slide-6 .ny-slide__row-text {
    font-size: 4.2vw;
  }
  .ny-slide-6 .ny-slide__row-text span {
    font-size: 5.3vw;
  }
}
.ny-slide-6 .ny-slide__row:last-child .ny-slide__row-text span {
  margin-bottom: 8px;
}

.ny-slide-6 .ny-slide__footer {
  margin: auto;
}

.ny-slide {
  display: none;
  border-radius: 20px;
}
.ny-slide-button {
  font-size: 14px;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 25px;
  width: 100px;
}
.ny-slide-button:first-of-type {
  margin-right: 10px;
}

.ny-slide-1 {
  display: flex;
}

.page__content-stats {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding: 25px 0 !important;
}

.new-year-pack {
  /* &__open-donat-btn {
       background-image: linear-gradient(to right, #b20e0e, #fd4b68, #771010, #a02231, #b20e0e);
   }*/
}
.new-year-pack__free-card-btn {
  background-image: linear-gradient(to right, #246cd9, #4b98fd, #19a1c9, #1c779f, #b20e0e);
}
@media screen and (max-width: 560px) {
  .new-year-pack__new-controls {
    flex-direction: column;
  }
}
.new-year-pack__new-controls-btn {
  font-size: 16px;
  padding: 10px 15px;
  border: 1px solid var(--border-color);
  border-radius: 25px;
  align-items: center;
  background-size: 600%;
  background-position: 0 0;
  display: flex;
  width: 100%;
  justify-content: center;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-name: gradients-new-year-btn;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 30px;
}
@media screen and (max-width: 560px) {
  .new-year-pack__new-controls-btn {
    width: 100%;
    margin-bottom: 15px;
  }
  .new-year-pack__new-controls-btn:last-of-type {
    margin-bottom: 0;
  }
}
.new-year-pack__number {
  border-radius: 50%;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 500;
  width: 30px;
}
.new-year-pack__p {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  line-height: 19px;
}
.new-year-pack__text {
  line-height: 23px;
  margin-bottom: 30px;
  font-size: 15px;
}
.new-year-pack__title {
  font-size: 36px;
  text-align: center;
  font-weight: 500;
  margin-bottom: 30px;
  color: #e1011d;
  background: -webkit-linear-gradient(#e1011d, #b20e0e, #e1011d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 2px 3px #000000) drop-shadow(0px 0px 10px #b10e0e);
}
@media screen and (max-width: 420px) {
  .new-year-pack__title {
    font-size: 32px;
  }
}
@media screen and (max-width: 360px) {
  .new-year-pack__title {
    font-size: 29px;
  }
}
.new-year-pack__button {
  font-size: 16px;
  padding: 10px 15px;
  border: 1px solid var(--border-color);
  border-radius: 25px;
  align-items: center;
  background-image: linear-gradient(to right, #b20e0e, #fd4b68, #771010, #a02231, #b20e0e);
  background-size: 600%;
  background-position: 0 0;
  /*box-shadow: inset 0 0 5em rgba(0,0,0,.5);*/
  display: flex;
  height: 100%;
  justify-content: center;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-name: gradients-new-year-btn;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 20px;
}
.new-year-pack__button img {
  width: 22px;
  height: 22px;
  margin-left: 10px;
  margin-right: 4px;
}
.new-year-pack__button:hover {
  transform: scale(1.02);
}

@keyframes gradients-new-year-btn {
  0% {
    background-position: 0 0;
  }
  25% {
    background-position: 50% 0;
  }
  50% {
    background-position: 90% 0;
  }
  60% {
    background-position: 60%;
  }
  75% {
    background-position: 40%;
  }
  100% {
    background-position: 0 0;
  }
}
.new-year-gift-ball {
  position: fixed;
  top: -50px;
  width: 50px;
  height: 50px;
  background-image: url("/assets/new-year/balls/1.png");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 1;
  cursor: pointer;
  animation: new-year-gift-ball--fall 5s linear forwards, new-year-gift-ball--spin 5s linear infinite;
  z-index: 999;
}
.new-year-gift-ball--1 {
  background-image: url("/assets/new-year/balls/1.png") !important;
}
.new-year-gift-ball--2 {
  background-image: url("/assets/new-year/balls/2.png") !important;
}
.new-year-gift-ball--3 {
  background-image: url("/assets/new-year/balls/3.png") !important;
}
.new-year-gift-ball--4 {
  background-image: url("/assets/new-year/balls/4.png") !important;
}

.new-year-gift-ball--point-text {
  position: fixed;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  opacity: 1;
  animation: new-year-gift-ball--rise 2s ease-out forwards;
  z-index: 999;
}

@keyframes new-year-gift-ball--fall {
  0% {
    top: -50px;
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    top: 100vh;
    opacity: 0;
  }
}
@keyframes new-year-gift-ball--spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes new-year-gift-ball--collect {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5) translateY(-150px);
    opacity: 0;
  }
}
@keyframes new-year-gift-ball--rise {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-30px);
    opacity: 0;
  }
}
.new-year-bag {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  background-image: url("/assets/new-year/gift.png");
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
  animation: new-year-bag--grow 2s ease-out forwards;
  z-index: 999;
}

@keyframes new-year-bag--grow {
  0% {
    transform: translateX(-50%) scale(0);
    bottom: -100px;
    opacity: 0;
  }
  100% {
    transform: translateX(-50%) scale(1);
    bottom: 0;
    opacity: 1;
  }
}
@keyframes new-year-bag--shake {
  0% {
    transform: translateX(-50%);
  }
  25% {
    transform: translateX(calc(-50% - 10px));
  }
  50% {
    transform: translateX(calc(-50% + 10px));
  }
  75% {
    transform: translateX(calc(-50% - 5px));
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes new-year-bag--rotate {
  0% {
    transform: translateX(-50%) rotate(0deg);
  }
  50% {
    transform: translateX(-50%) rotate(15deg);
  }
  100% {
    transform: translateX(-50%) rotate(-15deg);
  }
}
@keyframes new-year-bag--bounce {
  0% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, -10px);
  }
  100% {
    transform: translate(-50%, 0);
  }
}
@keyframes new-year-bag--diagonal-rise-left {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(-100px, -200px);
    opacity: 0;
  }
}
@keyframes new-year-bag--diagonal-rise-center {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(0, -200px);
    opacity: 0;
  }
}
@keyframes new-year-bag--diagonal-rise-right {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(100px, -200px);
    opacity: 0;
  }
}
@keyframes new-year-bag--text-rise {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-50px);
    opacity: 0;
  }
}
.new-year-bag--candy {
  position: absolute;
  width: 30px;
  height: 30px;
  background-image: url("/assets/new-year/balls/4.png");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 999;
}

.new-year-bag--text {
  position: absolute;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  opacity: 1;
  animation: new-year-bag--text-rise 1.8s ease-out forwards;
  z-index: 999;
}

.new-year-pack__music.card-show__audio-play {
  top: -20px;
}

.menu__item--new-year {
  transition: all 0.2s;
}
.menu__item--new-year:hover {
  background: rgba(173, 25, 215, 0.6) !important;
  color: var(--main-text-color) !important;
}
.menu__item--new-year img {
  width: 20px;
}

.snow-element {
  position: fixed;
  background: #fff;
  border-radius: 50%;
  animation-name: falling;
  animation-timing-function: linear;
}

@keyframes falling {
  0% {
    top: -100px;
  }
  100% {
    top: 100vh;
    transform: translateX(-100vh);
  }
}
.new-year-pack__button-coins {
  background-image: linear-gradient(to right, #b20e0e, #fd4b68, #771010, #a02231, #b20e0e);
  font-size: 16px;
  padding: 10px 15px;
  border: 1px solid var(--border-color);
  border-radius: 25px;
  align-items: center;
  background-size: 600%;
  background-position: 0 0;
  display: flex;
  width: 100%;
  justify-content: center;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-name: gradients-new-year-btn;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 30px;
}
@media screen and (max-width: 560px) {
  .new-year-pack__button-coins {
    width: 100%;
    margin-bottom: 15px;
  }
  .new-year-pack__button-coins:last-of-type {
    margin-bottom: 0;
  }
}

.ny-button {
  position: relative;
  padding: 14px 10px;
  font-size: 19px;
  font-weight: 600;
  color: white;
  background-image: linear-gradient(to right, #7232a9, #814cb0, #8856b4, #8c5eb4, #5a1b97);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  overflow: hidden;
  /*box-shadow: 0 0 5px #ff4d4d;*/
  transition: transform 0.2s, box-shadow 0.2s;
  width: 49%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ny-button img {
  width: 22px;
  height: 22px;
  margin-left: 10px;
  margin-right: 4px;
}
@media screen and (max-width: 560px) {
  .ny-button {
    width: 100%;
    margin-bottom: 15px;
    padding: 10px 10px;
    font-size: 17px;
  }
}

/* Ховер эффект */
.ny-button:hover {
  transform: scale(1.01);
}

/* Снежинки */
/*.snow {
    position: absolute;
    top: -10px;
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.8;

    !* вместо просто 'animation: fall linear infinite;' *!
    animation-name: fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: var(--snow-duration, 4s); !* дефолтно 4s *!
}

@keyframes fall {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateY(60px) translateX(var(--shift, 0px));
        opacity: 0;
    }
}*/
.snow-treasure {
  padding: 25px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* ЗАГОЛОВОК */
.snow-treasure__title {
  font-family: "Exo 2", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
  color: #c489fa;
  text-shadow: 0 0 6px rgb(107, 38, 166), 0 0 18px rgb(176, 84, 222), 0 0 40px rgb(140, 94, 180);
  /* лёгкое «дыхание» свечения */
  animation: snowTreasure-pulse 2.6s ease-in-out infinite;
}

/* ГИРЛЯНДА */
.snow-treasure__garland {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 0 auto;
}

.snow-treasure__garland--top {
  margin-bottom: 18px;
  animation: snowTreasure-swing 5s ease-in-out infinite alternate;
}

.snow-treasure__garland--bottom {
  margin-top: 18px;
  transform: scaleX(1.05);
  animation: snowTreasure-swing 5s ease-in-out infinite alternate-reverse;
}

/* «Провод» для лампочек */
.snow-treasure__garland::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  height: 2px;
  background: radial-gradient(circle, #333 0%, #111 60%, transparent 100%);
  opacity: 0.7;
}

.snow-treasure__garland {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin: 12px 0;
}

/* Базовый "цветочек" вместо лампочки */
.snow-treasure__bulb {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  position: relative;
  transform-origin: 50% 30%;
  background: radial-gradient(circle at 55% 45%, #f4e9ff 0, #c89cff 35%, #8a4ed6 70%, #4b1e7a 100%) !important;
  box-shadow: 0 0 10px rgba(140, 80, 210, 0.45), 0 0 18px rgba(110, 50, 170, 0.35) !important;
  animation: springPetalFloat 2.6s ease-in-out infinite alternate;
}

/* убираем "патрон" лампочки */
.snow-treasure__bulb::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.9) 0 16%, transparent 17% 100%), radial-gradient(circle at 50% 0%, rgba(255, 210, 235, 0.95) 0 22%, transparent 23% 100%), radial-gradient(circle at 86% 32%, rgba(255, 210, 235, 0.95) 0 22%, transparent 23% 100%), radial-gradient(circle at 72% 84%, rgba(255, 210, 235, 0.95) 0 22%, transparent 23% 100%), radial-gradient(circle at 28% 84%, rgba(255, 210, 235, 0.95) 0 22%, transparent 23% 100%), radial-gradient(circle at 14% 32%, rgba(255, 210, 235, 0.95) 0 22%, transparent 23% 100%);
  filter: drop-shadow(0 0 6px rgba(255, 150, 205, 0.35));
  opacity: 0.95;
}

/* маленькая "сердцевинка" */
.snow-treasure__bulb::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff4d6 0, #ffd27a 45%, #b68a2a 100%) !important;
  box-shadow: 0 0 6px rgba(255, 210, 90, 0.6);
}

/* фиолетовый */
.snow-treasure .snow-treasure__bulb:nth-child(3n+1) {
  background: radial-gradient(circle at 55% 45%, #f3e6ff 0, #b57dff 35%, #7a3ed4 70%, #3c166a 100%) !important;
}

/* сиреневый */
.snow-treasure .snow-treasure__bulb:nth-child(3n+2) {
  background: radial-gradient(circle at 55% 45%, #efe4ff 0, #a772ff 35%, #6d3ed1 70%, #32135f 100%) !important;
}

/* сливовый */
.snow-treasure .snow-treasure__bulb:nth-child(3n+3) {
  background: radial-gradient(circle at 55% 45%, #f5eaff 0, #b86cff 35%, #7b34d0 70%, #2e0f56 100%) !important;
}

/* индивидуальные задержки — как у тебя было, только под "порхание" */
.snow-treasure__bulb:nth-child(odd) {
  animation-delay: 0.15s;
}

.snow-treasure__bulb:nth-child(3n+1) {
  animation-delay: 0.35s;
}

.snow-treasure__bulb:nth-child(4n+2) {
  animation-delay: 0.6s;
}

/* чуть разный наклон, чтобы не было строя */
.snow-treasure__bulb:nth-child(2n) {
  transform: rotate(-3deg);
}

.snow-treasure__bulb:nth-child(3n) {
  transform: rotate(2deg);
}

/* анимация "порхание + мерцание" */
@keyframes springPetalFloat {
  0% {
    transform: translateY(0) rotate(-2deg) scale(0.96);
    filter: brightness(0.95);
    opacity: 0.65;
  }
  50% {
    opacity: 1;
    filter: brightness(1.05);
  }
  100% {
    transform: translateY(2px) rotate(2deg) scale(1);
    filter: brightness(1);
    opacity: 0.85;
  }
}
/* мобилки: чуть меньше и плотнее */
@media (max-width: 576px) {
  .snow-treasure__garland {
    gap: 8px;
  }
  .snow-treasure__bulb {
    width: 16px;
    height: 16px;
  }
  .snow-treasure__bulb::after {
    width: 3px;
    height: 3px;
  }
}
@media screen and (max-width: 560px) {
  .ny-controls {
    flex-direction: column;
  }
}

.market-show__lots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 16px;
}
.market-show__lot-user, .market-show__lot-price {
  display: flex;
  align-items: center;
  padding: 5px;
  background: var(--medium-bg);
  margin-right: 10px;
  border-radius: var(--main-border-radius);
}
.market-show__lot-user img, .market-show__lot-price img {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  margin-right: 7px;
}
.market-show__lot-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}
.market-show__item {
  display: flex;
  justify-content: center;
  text-align: center;
  background: var(--medium-bg);
  border-radius: var(--main-border-radius);
}
.market-show__item-content {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 7px;
}
.market-show__item-price {
  margin-right: 15px;
  font-size: 14px;
}
.market-show__item-avatar {
  width: 35px;
  height: 35px;
  margin-right: 10px;
}
.market-show__item-avatar img {
  border-radius: 50%;
}
.market-show__item-name {
  font-weight: 500;
}
.market-show__item-wrapper {
  display: flex;
  margin-left: auto;
  align-items: center;
}
.market-show__user {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  width: 100%;
}
.market-show__user-avatar {
  width: 35px;
}
.market-show__user-avatar img {
  border-radius: 50%;
}
.market-show__user-name {
  width: 90px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  margin: 9px 0;
}
.market-show__user-info {
  display: flex;
  width: 100%;
  justify-content: center;
  border-radius: 6px;
}
.market-show__user-cards {
  font-size: 15px;
  display: flex;
  align-items: center;
  padding: 5px 10px;
  background: var(--light-bg);
  border-radius: var(--main-border-radius);
  font-weight: 500;
  width: 100%;
  justify-content: center;
}
.market-show__user-cards span {
  margin-right: 5px;
}
.market-show__user-cards-rank {
  text-align: center;
}
.market-show__user-cards-list {
  display: flex;
  width: 100%;
}

.market-list__history {
  background: var(--medium-bg);
  padding: 10px;
  border-radius: var(--main-border-radius);
  margin-bottom: 15px;
}
.market-list__history-cards {
  display: flex;
  overflow: auto;
}
.market-list__history-cards-item {
  width: 50px;
  margin-right: 7px;
  flex-shrink: 0;
}
.market-list__history-divider {
  margin: 0px 15px;
  color: var(--icons-color);
  font-size: 23px;
}
.market-list__history-header {
  display: flex;
  align-items: center;
}
.market-list__history-avatar {
  width: 35px;
}
.market-list__history-avatar img {
  border-radius: 50%;
}
.market-list__inner {
  max-width: 800px;
  margin: 0 auto;
}
.market-list__inner .tabs__item {
  margin-right: 16px;
}
.market-list__inner .tabs__item:last-of-type {
  margin-right: 0;
}
.market-list__description {
  background: var(--light-bg);
  border-radius: 10px;
  padding: 12px 16px 12px 16px;
  font-size: 15px;
  margin-bottom: 10px;
}
.market-list__description div {
  line-height: 23px;
}
.market-list__search input {
  border: none !important;
  border-radius: 10px;
  padding: 12px 16px 12px 16px;
}
.market-list__title .secondary-title {
  margin: 0;
}
.market-list__cards {
  justify-content: space-between;
}
.market-list__cards--all .market-list__cards-button {
  display: flex;
  align-items: center;
  transition: all 0.2s;
}
.market-list__cards--all .market-list__cards-button i {
  margin-right: 3px;
  font-size: 16px;
}
.market-list__cards--all .market-list__cards-button:first-of-type {
  width: 100%;
  margin-right: 6px;
}
.market-list__cards--all .market-list__cards-button:first-of-type:hover {
  background: var(--dark-grey-bg);
}
.market-list__cards--all .market-list__cards-button:last-of-type {
  flex-shrink: 0;
  min-width: 0;
  width: auto;
  min-width: 30%;
  cursor: default;
}
.market-list__cards--all .market-list__cards-button:last-of-type:hover {
  background: var(--medium-bg);
}
.market-list__cards-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.market-list__cards-footer button {
  transition: all 0.2s;
  width: 30%;
}
.market-list__cards-footer button:hover {
  background: var(--dark-grey-bg);
}
.market-list__cards-footer button:first-of-type {
  width: 67%;
}
.market-list__cards-button {
  display: flex;
  justify-content: center;
  text-align: center;
  width: 100%;
  padding: 8px 5px;
  background: var(--medium-bg);
  margin-top: 12px;
  font-size: 14px;
  border-radius: 5px;
}
.market-list__cards-wrapper {
  display: flex;
  align-items: center;
}
.market-list__cards-close {
  margin-left: auto;
  background: var(--medium-bg);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.market-list__cards-name {
  font-size: 14px;
}
.market-list__cards-avatar {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.market-list__cards-avatar img {
  border-radius: 50%;
}

.market-list__cards.manga-cards {
  margin: 0 !important;
}

.card-market__controls {
  display: flex;
  justify-content: end;
  margin-bottom: 20px;
}
.card-market__controls div {
  padding: 3px;
  background: var(--medium-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  cursor: pointer;
}
.card-market__controls div:first-of-type {
  margin-right: 7px;
}
.card-market__controls i {
  font-size: 20px;
  color: var(--icons-color);
}

.market-create {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.market-create:last-of-type {
  margin-bottom: 0 !important;
}
.market-create .form__field {
  margin-bottom: 0;
}
.market-create__field {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}
.market-create__field .market-create__input {
  width: 100%;
  padding-right: 20px;
}
.market-create__field .market-create__label {
  position: absolute;
  right: 10px;
  color: white;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 23px;
  width: 23px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
.market-create__field .market-create__label--X {
  background: linear-gradient(45deg, #286595, #1c2935, #365b9d);
}
.market-create__field .market-create__label--S {
  background: linear-gradient(45deg, #dc115a, #FF7EBE, #f0b6d2);
}
.market-create__field .market-create__label--A {
  background: linear-gradient(-120deg, #D62121, #C72C2C, #3a1111);
}
.market-create__field .market-create__label--P {
  background: linear-gradient(-120deg, #1b3dcc, #2c81c7, #131a34);
}
.market-create__field .market-create__label--G {
  background: linear-gradient(-120deg, #209609, #30771c, #172a11);
}
.market-create__field .market-create__label--B {
  background: linear-gradient(-120deg, #680a83, #4e0f79, #1d112a);
}
.market-create__field .market-create__label--C {
  background: linear-gradient(-120deg, #c4a616, #7e661c, #422f0e);
}
.market-create__field .market-create__label--D {
  background: linear-gradient(-120deg, #aba08e, #858379, #2f2d2d);
}
.market-create__field .market-create__label--E {
  background: linear-gradient(-120deg, #443004, #342c0e, #2f2718);
}
.market-create__field .market-create__label--H {
  background: linear-gradient(-120deg, #1d1d1b, #961111, #0e0e0d);
}
.market-create__field .market-create__label--N {
  background: linear-gradient(-120deg, #fd0702, #b62525, #307a14);
}
.market-create__field .market-create__label--V {
  background: linear-gradient(-120deg, #8b6ef2, #8b6ef1, #958bf2);
}
.market-create__button {
  margin-top: 20px;
  width: 100%;
}

.card-pool {
  padding: 10px;
  background: var(--dark-grey-bg);
  border-radius: 15px;
  margin-bottom: 20px;
}
.card-pool__stats {
  display: flex;
  margin-bottom: 15px;
  align-items: center;
}
.card-pool__stats-title {
  margin-right: 5px;
}
.card-pool__stats-number {
  color: var(--secondary-text-color);
  font-size: 0.85em;
}
.card-pool__stats-number-max {
  color: var(--secondary-text-color);
  font-size: 0.85em;
}
.card-pool__container {
  display: grid;
  overflow-y: auto;
  min-height: 150px;
  max-height: 320px;
  grid-template-columns: repeat(7, 1fr);
  gap: 15px;
  padding: 5px;
}
.card-pool__item {
  background: var(--light-bg);
  border-radius: 6px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s;
  background: var(--dark-grey-bg);
  aspect-ratio: 9/13;
}

@media screen and (max-width: 650px) {
  .market-list__cards .manga-cards__item-wrapper {
    width: 50%;
  }
}

.market-history-title {
  padding: 10px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  color: var(--main-text-color);
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.market-history-title i {
  margin-right: 5px;
}

.market-item {
  box-shadow: none !important;
  border-radius: 8px !important;
}

.manga-cards__item-wrapper[data-has="1"] .market-item {
  box-shadow: 0 1px 1px rgba(194, 14, 196, 0), 0 2px 2px rgba(175, 0, 234, 0.32) !important;
}

.history--markets .history__item--market {
  margin-bottom: 20px;
}
.history--markets .history__actions {
  margin: 10px 0 14px;
}
.history--markets .history__load-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--light-bg);
  color: var(--main-text-color);
  cursor: pointer;
  transition: 0.2s ease;
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
}
.history--markets .history__load-btn:hover {
  border-color: var(--purple-btn-bg);
  color: var(--purple-btn-bg);
}
.history--markets .history__load-btn.is-loaded {
  opacity: 0.7;
  cursor: default;
}
.history--markets .history__body-item {
  display: block;
  flex: 0 0 auto;
}
.history--markets .history__card-image {
  display: block;
  width: 74px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 6px;
  background: var(--light-bg);
}
.history--markets .history__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.history--markets .history__stats-item {
  font-size: 14px;
  line-height: 1.3;
}
.history--markets .history__stats-item--gained {
  color: var(--green-color);
}
.history--markets .history__stats-item--lost {
  color: var(--red-color);
}

.market-search {
  --market-search-bg: var(--block-bg-color, #fff);
  --market-search-inner: var(--input-bg-color, rgba(0, 0, 0, .04));
  --market-search-border: rgba(0, 0, 0, .08);
  --market-search-text: var(--text-color, #222);
  --market-search-muted: var(--text-color-opacity, rgba(34, 34, 34, .55));
  width: 100%;
  margin: 0px 0 15px;
}
body.dark .market-search, .dark .market-search, [data-theme=dark] .market-search {
  --market-search-bg: #1b1b1f;
  --market-search-inner: #25252b;
  --market-search-border: rgba(255, 255, 255, .1);
  --market-search-text: rgba(255, 255, 255, .88);
  --market-search-muted: rgba(255, 255, 255, .5);
}
.market-search__main {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 46px;
  padding: 5px;
  border-radius: 14px;
  background: var(--market-search-bg);
  border: 1px solid var(--market-search-border);
}
.market-search__input {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--market-search-text);
  font-size: 15px;
}
.market-search__input::-moz-placeholder {
  color: var(--market-search-muted);
}
.market-search__input::placeholder {
  color: var(--market-search-muted);
}
.market-search__filter-btn, .market-search__submit {
  flex-shrink: 0;
  height: 36px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
.market-search__filter-btn {
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--market-search-inner);
  color: var(--market-search-text);
}
.market-search__filter-btn svg {
  width: 17px;
  height: 17px;
}
.market-search__filter-btn:hover, .market-search__filter-btn--active {
  background: rgba(123, 44, 255, 0.22);
  color: var(--primary, #7b2cff);
}
.market-search__submit {
  padding: 0 16px;
  background: var(--primary, #7b2cff);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.market-search__price {
  display: none;
  align-items: center;
  gap: 6px;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin-top: 8px;
  margin-left: auto;
  padding: 6px;
  border-radius: 13px;
  background: var(--market-search-bg);
  border: 1px solid var(--market-search-border);
}
.market-search__price--open {
  display: flex;
}
.market-search__price-label {
  padding: 0 6px;
  color: var(--market-search-text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.market-search__select, .market-search__price-input {
  display: block;
  height: 34px;
  border: 1px solid var(--market-search-border);
  outline: none;
  border-radius: 10px;
  background: var(--market-search-inner);
  color: var(--market-search-text);
  font-size: 14px;
}
.market-search__select {
  width: 74px;
  padding: 0 8px;
}
.market-search__price-input {
  width: 84px;
  padding: 0 10px;
}
.market-search__price-input::-moz-placeholder {
  color: var(--market-search-muted);
}
.market-search__price-input::placeholder {
  color: var(--market-search-muted);
}
.market-search__reset {
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  background: rgba(255, 80, 80, 0.14);
  color: #ff6b6b;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
@media (max-width: 768px) {
  .market-search {
    margin: 14px 0 18px;
  }
  .market-search__submit {
    padding: 0 12px;
    font-size: 13px;
  }
  .market-search__price {
    width: 100%;
    margin-left: 0;
  }
  .market-search__price-label {
    display: none;
  }
  .market-search__select, .market-search__price-input, .market-search__reset {
    flex: 1;
    width: auto;
    min-width: 0;
  }
}
@media (max-width: 420px) {
  .market-search__main {
    height: 44px;
  }
  .market-search__submit {
    display: none;
  }
}

.market-list__cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
  justify-content: unset !important;
  align-items: start !important;
}

.market-list__cards .manga-cards__item-wrapper {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: unset !important;
}

.market-list__cards .manga-cards__item {
  width: 100% !important;
  height: 100% !important;
}

.market-list__cards .manga-cards__image {
  width: 100% !important;
  aspect-ratio: 180/260;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-radius: 14px !important;
}

.market-list__cards .market-list__cards-footer {
  display: flex !important;
  gap: 8px !important;
  margin-top: 8px !important;
}

.market-list__cards .market-list__cards-button {
  flex: 1 1 0 !important;
  height: 38px !important;
  border-radius: 10px !important;
}
.market-list__cards .market-list__cards-button i {
  font-size: 17px;
  line-height: 21px;
}

@media (max-width: 500px) {
  .market-list__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}
@media (max-width: 380px) {
  .market-list__cards {
    gap: 8px !important;
  }
  .market-list__cards .market-list__cards-footer {
    gap: 6px !important;
  }
  .market-list__cards .market-list__cards-button {
    font-size: 13px !important;
    height: 34px !important;
  }
}
.event-pack {
  /*&__button, {
      font-size: 16px;
      padding: 10px 15px;
      border: 1px solid var(--border-color);
      border-radius: 25px;
      align-items: center;
      background-image: linear-gradient(to right, #b20e0e, #fd4b68, #771010, #a02231, #b20e0e);
      background-size: 600%;
      background-position: 0 0;
      !*box-shadow: inset 0 0 5em rgba(0,0,0,.5);*!
      display: flex;
      height: 100%;
      justify-content: center;
      animation-duration: 20s;
      animation-iteration-count: infinite;
      animation-name: gradients-event-btn;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      margin-bottom: 20px;
      img {
          width: 22px;
          height: 22px;
          margin-left: 10px;
          margin-right: 4px;
      }
      &:hover {
          transform: scale(1.02);
      }
  }*/
}
.event-pack__free-card-btn {
  background-image: linear-gradient(to right, #246cd9, #4b98fd, #19a1c9, #1c779f, #b20e0e);
}
.event-pack__open-donat-btn {
  background-image: linear-gradient(to right, #7232a9, #814cb0, #8856b4, #8c5eb4, #5a1b97);
}
@media screen and (max-width: 560px) {
  .event-pack__new-controls {
    flex-direction: column;
  }
}
.event-pack__new-controls-btn {
  font-size: 16px;
  padding: 10px 15px;
  border: 1px solid var(--border-color);
  border-radius: 25px;
  align-items: center;
  background-size: 600%;
  background-position: 0 0;
  display: flex;
  width: 100%;
  justify-content: center;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-name: gradients-event-btn;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 30px;
}
@media screen and (max-width: 560px) {
  .event-pack__new-controls-btn {
    width: 100%;
    margin-bottom: 15px;
  }
  .event-pack__new-controls-btn:last-of-type {
    margin-bottom: 0;
  }
}
.event-pack__number {
  width: 26px;
  float: left;
  height: 26px;
  display: grid;
  place-items: center;
  background: rgba(136, 86, 180, 0.28);
  border: 1px solid rgba(110, 34, 147, 0.29);
  color: #9731c9;
  font-weight: 800;
  border-radius: 6px;
  flex-shrink: 0;
  margin-right: 12px;
}
.event-pack__p {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.06);
  margin-bottom: 15px;
}
.event-pack__p:last-of-type {
  margin-bottom: 0;
}
.event-pack__text {
  line-height: 23px;
  margin-bottom: 30px;
  font-size: 15px;
}
.event-pack__title {
  font-size: 36px;
  text-align: center;
  font-weight: 500;
  margin-bottom: 30px;
  color: #e1011d;
  background: -webkit-linear-gradient(left, #e1011d, #b20e0e, #e1011d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 2px 3px #000000) drop-shadow(0px 0px 10px #b10e0e);
}
@media screen and (max-width: 420px) {
  .event-pack__title {
    font-size: 32px;
  }
}
@media screen and (max-width: 360px) {
  .event-pack__title {
    font-size: 29px;
  }
}

@keyframes gradients-event-btn {
  0% {
    background-position: 0 0;
  }
  25% {
    background-position: 50% 0;
  }
  50% {
    background-position: 90% 0;
  }
  60% {
    background-position: 60%;
  }
  75% {
    background-position: 40%;
  }
  100% {
    background-position: 0 0;
  }
}
.event-gift-ball {
  position: fixed;
  bottom: 70px;
  left: -100%;
  width: 50px;
  height: 50px;
  background-image: url("/assets/summer/icons/3.png");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 1;
  cursor: pointer;
  animation: slideInCardLeft 1.5s forwards;
  z-index: 999;
}
.event-gift-ball--1 {
  background-image: url("/assets/summer/icons/3.png") !important;
}
.event-gift-ball--2 {
  background-image: url("/assets/summer/icons/3.png") !important;
}
.event-gift-ball--3 {
  background-image: url("/assets/summer/icons/3.png") !important;
}
.event-gift-ball--4 {
  background-image: url("/assets/summer/icons/3.png") !important;
}

.event-gift-ball--point-text {
  position: fixed;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  opacity: 1;
  animation: event-gift-ball--rise 2s ease-out forwards;
  z-index: 999;
}

@keyframes event-gift-ball--fall {
  0% {
    top: -50px;
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    top: 100vh;
    opacity: 0;
  }
}
@keyframes event-gift-ball--spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes event-gift-ball--collect {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5) translateY(-150px);
    opacity: 0;
  }
}
@keyframes event-gift-ball--rise {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-30px);
    opacity: 0;
  }
}
.event-bag {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  background-image: url("/assets/summer/icons/5.png");
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
  animation: event-bag--grow 2s ease-out forwards;
  z-index: 999;
}

@keyframes event-bag--grow {
  0% {
    transform: translateX(-50%) scale(0);
    bottom: -100px;
    opacity: 0;
  }
  100% {
    transform: translateX(-50%) scale(1);
    bottom: 0;
    opacity: 1;
  }
}
@keyframes event-bag--shake {
  0% {
    transform: translateX(-50%);
  }
  25% {
    transform: translateX(calc(-50% - 10px));
  }
  50% {
    transform: translateX(calc(-50% + 10px));
  }
  75% {
    transform: translateX(calc(-50% - 5px));
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes event-bag--rotate {
  0% {
    transform: translateX(-50%) rotate(0deg);
  }
  50% {
    transform: translateX(-50%) rotate(15deg);
  }
  100% {
    transform: translateX(-50%) rotate(-15deg);
  }
}
@keyframes event-bag--bounce {
  0% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, -10px);
  }
  100% {
    transform: translate(-50%, 0);
  }
}
@keyframes event-bag--diagonal-rise-left {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(-100px, -200px);
    opacity: 0;
  }
}
@keyframes event-bag--diagonal-rise-center {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(0, -200px);
    opacity: 0;
  }
}
@keyframes event-bag--diagonal-rise-right {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(100px, -200px);
    opacity: 0;
  }
}
@keyframes event-bag--text-rise {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-50px);
    opacity: 0;
  }
}
.event-bag--candy {
  position: absolute;
  width: 30px;
  height: 30px;
  background-image: url("/assets/summer/icons/3.png");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 999;
}

.event-bag--text {
  position: absolute;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  opacity: 1;
  animation: event-bag--text-rise 1.8s ease-out forwards;
  z-index: 999;
}

.event-pack__music.card-show__audio-play {
  top: -20px;
}

.menu__item--new-year {
  transition: all 0.2s;
}
.menu__item--new-year:hover {
  background: rgba(173, 25, 215, 0.6) !important;
  color: var(--main-text-color) !important;
}
.menu__item--new-year img {
  width: 20px;
}

.snow-element {
  position: fixed;
  background: #fff;
  border-radius: 50%;
  animation-name: falling;
  animation-timing-function: linear;
}

@keyframes falling {
  0% {
    top: -100px;
  }
  100% {
    top: 100vh;
    transform: translateX(-100vh);
  }
}
.card-show__container--summer {
  /*  .event-pack__button, .event-pack__open-donat-btn {
        background-image: linear-gradient(to right, #b20e0e, #fd4b68, #e91919, #a02231, #b20e0e);
    }*/
}
.card-show__container--summer .card-show__audio-play {
  top: -24px;
  right: 13px;
}
.card-show__container--summer .spring-event-pack__title {
  font-size: 36px;
  text-align: center;
  font-weight: 500;
  margin-bottom: 30px;
  color: #b20e0e;
  background-image: linear-gradient(to right, #b20e0e, #fd4b68, #e91919, #a02231, #b20e0e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 2px 3px #000000) drop-shadow(0px 0px 10px #b20e0e);
}
.card-show__container--summer .comments__change-sort--active {
  border-bottom: 3px solid #b20e0e;
}
.card-show__container--summer .button--primary {
  background: #b20e0e;
}

.spring-event-pack__info {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  background: var(--dark-grey-bg);
  border-radius: 27px;
  font-size: 16px;
  border: 1px solid var(--border-color);
  flex-direction: column;
  padding: 15px 10px;
}
.spring-event-pack__info div:last-of-type {
  font-size: 14px;
  color: var(--secondary-text-color);
}

.snow-treasure--clicked {
  cursor: default;
}

.snow-treasure-toast {
  position: absolute;
  transform: translate(-50%, -100%) scale(0.95);
  opacity: 0;
  pointer-events: none;
  z-index: 99999;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(20, 20, 30, 0.85);
  color: #fff;
  font-size: 13px;
  transition: opacity 0.25s, transform 0.25s;
  white-space: nowrap;
}

.snow-treasure-toast--show {
  opacity: 1;
  transform: translate(-50%, -120%) scale(1);
}

.ny-ball {
  position: absolute;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
  pointer-events: none;
  z-index: 99998;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
}

.ny-ball--go {
  opacity: 1;
  animation: nyBallPop 1.15s ease-out forwards;
}

/* разлёт: два разных направления */
.ny-ball--1.ny-ball--go {
  --dx: -90px;
  --dy: -130px;
  --rot: -220deg;
}

.ny-ball--2.ny-ball--go {
  --dx: 95px;
  --dy: -120px;
  --rot: 240deg;
}

@keyframes nyBallPop {
  0% {
    transform: translate(-50%, -50%) scale(0.35) rotate(0deg);
  }
  15% {
    transform: translate(calc(-50% + var(--dx) * 0.15), calc(-50% + var(--dy) * 0.15)) scale(1.05) rotate(calc(var(--rot) * 0.25));
  }
  100% {
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.75) rotate(var(--rot));
    opacity: 0;
  }
}
/* event-boost.scss
   Полностью готовые стили под страницу /event/boost
   - завязано на твои CSS variables (:root / body.dark)
   - аккуратный воздух, ничего не налеплено
   - не ломает существующую верстку инвентаря, только "подкрашивает" контейнер
*/
.event-boost {
  padding: 18px 0 30px;
  color: var(--main-text-color);
  background: var(--grey-background);
}
.event-boost__container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 16px;
}

/* -------------------- */
/* Helpers / Base cards */
/* -------------------- */
.event-boost-card, .event-boost-hero__main, .event-boost-hero__side {
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--secondary-border-radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.event-boost-card__head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.event-boost-card__head--stack {
  align-items: flex-start;
  flex-direction: column;
  gap: 6px;
}
.event-boost-card__title {
  font-size: 15px;
  font-weight: 900;
  color: var(--title-color);
  line-height: 1.2;
}
.event-boost-card__subtitle {
  font-size: 12px;
  color: var(--secondary-text-color);
  line-height: 1.35;
}
.event-boost-card__content {
  padding: 16px;
}
.event-boost-card--soft {
  background: color-mix(in srgb, var(--light-bg), var(--medium-bg) 35%);
}

.event-boost-pill {
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--medium-bg);
  border: 1px solid var(--border-color);
  color: var(--secondary-text-color);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

/* -------------- */
/* HERO (top area)*/
/* -------------- */
.event-boost-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
@media (min-width: 980px) {
  .event-boost-hero {
    grid-template-columns: 1.35fr 0.85fr;
    align-items: start;
  }
}
.event-boost-hero__main, .event-boost-hero__side {
  padding: 16px;
}
.event-boost-hero__kicker {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary-text-color);
  margin-bottom: 10px;
}
.event-boost-hero__title {
  margin: 0 0 10px;
  font-size: 26px;
  line-height: 1.12;
  font-weight: 900;
  color: var(--title-color);
}
@media (max-width: 420px) {
  .event-boost-hero__title {
    font-size: 23px;
  }
}
.event-boost-hero__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--secondary-text-color);
  margin-bottom: 14px;
}
.event-boost-hero__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}
@media (max-width: 420px) {
  .event-boost-hero__actions {
    gap: 8px;
  }
}

/* Progress */
.event-boost-progress {
  margin-top: 6px;
}
.event-boost-progress__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 10px;
}
.event-boost-progress__numbers {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.event-boost-progress__big {
  font-size: 22px;
  font-weight: 900;
  color: var(--title-color);
}
.event-boost-progress__sep {
  color: var(--secondary-text-color);
}
.event-boost-progress__goal {
  font-size: 14px;
  color: var(--secondary-text-color);
}
.event-boost-progress__percent {
  font-size: 13px;
  font-weight: 900;
  color: var(--secondary-text-color);
  white-space: nowrap;
}
.event-boost-progress__bar {
  height: 12px;
  border-radius: 999px;
  background: var(--medium-bg);
  border: 1px solid var(--border-color);
  overflow: hidden;
}
.event-boost-progress__fill {
  height: 100%;
  width: 0%;
  background: var(--gradient-color);
  border-radius: 999px;
  transition: width 0.35s ease;
}
.event-boost-progress__hint {
  margin-top: 10px;
  font-size: 12px;
  color: var(--secondary-text-color);
}
.event-boost-progress__hint b {
  color: var(--title-color);
}

/* Rewards box */
.event-boost-rewards__title {
  font-weight: 900;
  font-size: 16px;
  color: var(--title-color);
  margin-bottom: 6px;
}
.event-boost-rewards__desc {
  font-size: 12px;
  color: var(--secondary-text-color);
  margin-bottom: 14px;
}
.event-boost-rewards__list {
  display: grid;
  gap: 10px;
}
.event-boost-rewards__note {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
  font-size: 12px;
  color: var(--secondary-text-color);
  line-height: 1.45;
}

.event-boost-reward {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: var(--medium-bg);
  border: 1px solid var(--border-color);
}
.event-boost-reward__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--light-bg), var(--medium-bg) 55%);
  border: 1px solid var(--border-color);
  color: var(--icons-color);
  font-size: 18px;
}
.event-boost-reward__name {
  font-size: 13px;
  font-weight: 900;
  color: var(--title-color);
}
.event-boost-reward__text {
  margin-top: 4px;
  font-size: 12px;
  color: var(--secondary-text-color);
}

/* ------- */
/* Buttons */
/* ------- */
.event-boost-btn {
  border: 0;
  border-radius: var(--main-border-radius);
  padding: 11px 14px;
  font-weight: 900;
  cursor: pointer;
  line-height: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: transform 0.06s ease, opacity 0.15s ease;
}
.event-boost-btn:active {
  transform: translateY(1px);
}
.event-boost-btn--wide {
  width: 100%;
}
.event-boost-btn--primary {
  background: var(--purple-btn-bg);
  color: var(--white-color);
}
.event-boost-btn--ghost {
  background: var(--medium-bg);
  border: 1px solid var(--border-color);
  color: var(--main-text-color);
}
.event-boost-btn--danger {
  background: rgba(252, 54, 59, 0.12);
  border: 1px solid rgba(252, 54, 59, 0.25);
  color: var(--main-text-color);
}
.event-boost-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* ---------------- */
/* Body grid layout */
/* ---------------- */
.event-boost-body {
  margin-top: 8px;
}

.event-boost-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}
@media (min-width: 980px) {
  .event-boost-grid {
    grid-template-columns: 1.25fr 0.75fr;
  }
}

/* Left inventory wrapper
   (не ломаем, только создаем "рамку" вокруг твоего include) */
.event-boost-grid__inventory {
  /* немного воздуха вокруг списков внутри инвентаря (если там tight) */
}
.event-boost-grid__inventory .card-inventory-container--event-boost {
  border-radius: var(--secondary-border-radius);
  background: var(--light-bg);
}
.event-boost-grid__inventory .card-inventory-container--event-boost .card-filter-list {
  padding: 8px;
}

/* Right side spacing */
.event-boost-grid__side {
  display: grid;
  gap: 14px;
}

/* -------- */
/* ALTAR UI */
/* -------- */
.event-boost-altar {
  padding: 12px;
  border-radius: var(--secondary-border-radius);
  background: var(--medium-bg);
  border: 1px dashed var(--border-color);
}

.event-boost-altar__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
@media (max-width: 420px) {
  .event-boost-altar__grid {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (min-width: 980px) {
  .event-boost-altar__grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.event-boost-altar__card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: var(--light-bg);
  transform: translateZ(0);
}
.event-boost-altar__card img {
  width: 100%;
  display: block;
}

.event-boost-altar__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-inverse);
  color: var(--light-bg);
  cursor: pointer;
  line-height: 1;
  font-size: 16px;
  opacity: 0.92;
  filter: var(--invert);
}
.event-boost-altar__remove:active {
  transform: translateY(1px);
}

.event-boost-empty {
  padding: 16px 14px;
  border-radius: var(--secondary-border-radius);
  background: color-mix(in srgb, var(--light-bg), var(--medium-bg) 45%);
  border: 1px solid var(--border-color);
  text-align: center;
}
.event-boost-empty--small {
  padding: 14px;
}
.event-boost-empty__icon {
  font-size: 22px;
  color: var(--icons-color);
  opacity: 0.8;
}
.event-boost-empty__title {
  margin-top: 8px;
  font-weight: 900;
  color: var(--title-color);
}
.event-boost-empty__text {
  margin-top: 6px;
  font-size: 12px;
  color: var(--secondary-text-color);
  line-height: 1.4;
}

/* Summary */
.event-boost-summary {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.event-boost-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--main-border-radius);
  background: var(--medium-bg);
  border: 1px solid var(--border-color);
  font-size: 12px;
  color: var(--main-text-color);
}
.event-boost-summary__row--muted {
  color: var(--secondary-text-color);
}

.event-boost-actions {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.event-boost-legal {
  font-size: 11px;
  color: var(--secondary-text-color);
  line-height: 1.35;
  margin-top: 6px;
}

/* ------------------ */
/* Milestones (50/200/400) */
/* ------------------ */
.event-boost-milestones {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}
.event-boost-milestones__title {
  font-weight: 900;
  color: var(--title-color);
  margin-bottom: 10px;
}
.event-boost-milestones__list {
  display: grid;
  gap: 8px;
}
.event-boost-milestones__note {
  margin-top: 10px;
  font-size: 11px;
  color: var(--secondary-text-color);
}

.event-boost-milestone {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--main-border-radius);
  background: var(--medium-bg);
  border: 1px solid var(--border-color);
}
.event-boost-milestone__name {
  font-weight: 900;
  color: var(--title-color);
  font-size: 13px;
}
.event-boost-milestone__hint {
  font-size: 12px;
  color: var(--secondary-text-color);
  margin-top: 3px;
}
.event-boost-milestone__hint b {
  color: var(--title-color);
}
.event-boost-milestone__status {
  font-weight: 900;
  font-size: 12px;
  color: var(--secondary-text-color);
  white-space: nowrap;
}
.event-boost-milestone--done {
  border-color: rgba(9, 51, 0, 0.18);
  background: var(--rating-bg-green);
}
.event-boost-milestone--done .event-boost-milestone__status {
  color: var(--green-color);
}

/* ----------- */
/* TOP 10 block */
/* ----------- */
.event-boost-top {
  display: grid;
  gap: 8px;
}

.event-boost-top__row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--main-border-radius);
  background: var(--medium-bg);
  border: 1px solid var(--border-color);
}

.event-boost-top__rank {
  font-weight: 900;
  color: var(--secondary-text-color);
}

.event-boost-top__name {
  font-weight: 900;
  font-size: 13px;
  color: var(--title-color);
}

.event-boost-top__meta {
  font-size: 11px;
  color: var(--secondary-text-color);
  margin-top: 2px;
}

.event-boost-top__value {
  font-weight: 900;
  color: var(--main-text-color);
}

/* -------------- */
/* Modal (optional)*/
/* -------------- */
.event-boost-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 999;
}
.event-boost-modal--open {
  display: flex;
}
.event-boost-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.event-boost-modal__card {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--secondary-border-radius);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.event-boost-modal__head {
  padding: 14px 14px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.event-boost-modal__title {
  font-weight: 900;
  color: var(--title-color);
}
.event-boost-modal__close {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--medium-bg);
  border: 1px solid var(--border-color);
  color: var(--main-text-color);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.event-boost-modal__close:active {
  transform: translateY(1px);
}
.event-boost-modal__body {
  padding: 14px;
}
.event-boost-modal__note {
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--main-border-radius);
  border: 1px dashed var(--border-color);
  background: var(--medium-bg);
  font-size: 12px;
  color: var(--secondary-text-color);
}

.event-boost-steps {
  display: grid;
  gap: 10px;
}

.event-boost-step {
  padding: 12px;
  border-radius: var(--main-border-radius);
  background: var(--medium-bg);
  border: 1px solid var(--border-color);
  font-size: 13px;
  color: var(--main-text-color);
}
.event-boost-step b {
  color: var(--title-color);
}

/* ----------------------------- */
/* Optional: micro spacing tweaks */
/* ----------------------------- */
/* если где-то "липко" — можно увеличить общий вертикальный ритм */
.event-boost-hero__main > * + * {
  margin-top: 10px;
}

.event-boost-hero__main .event-boost-progress {
  margin-top: 12px;
}

/* FIX: на этой странице НЕ раздвигаем контент по высоте */
.event-boost {
  /* ничего */
}

/* если .card-show у тебя flex и раздвигает контент */
.card-show {
  justify-content: flex-start !important;
  align-content: flex-start !important;
}

/* на всякий случай: убираем фиксированную высоту, если она стоит */
.main,
.container,
.card-show {
  height: auto !important;
  min-height: 0 !important;
}

/* и чтобы body не давал странный отступ */
.event-boost-hero {
  margin-bottom: 18px !important;
}

.event-boost-body {
  margin-top: 0 !important;
}

.pack__btn--prank {
  width: 100%;
  margin-top: 12px;
  padding: 16px;
  border-radius: 12px;
  border: none;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(45deg, #ff00cc, #8b00ff);
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}

.pack__btn--prank:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(139, 0, 255, 0.35);
}

.pack__btn--prank:active {
  transform: scale(0.97);
}

.pack__btn--prank:disabled {
  opacity: 0.7;
  cursor: default;
}

.prank-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  padding: 20px;
  box-sizing: border-box;
}

.prank-box {
  width: 340px;
  max-width: 100%;
  padding: 30px 25px 35px;
  border-radius: 16px;
  text-align: center;
  background: linear-gradient(180deg, #1f1f2e, #12121a);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  animation: prankAppear 0.4s ease;
  position: relative;
  overflow: hidden;
}

@keyframes prankAppear {
  from {
    opacity: 0;
    transform: scale(0.85) translateY(30px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.prank-card {
  width: 220px;
  margin: 0 auto 18px;
  position: relative;
}

.prank-card img {
  display: block;
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), 0 0 25px rgba(139, 0, 255, 0.25);
  animation: cardAppear 0.6s ease;
}

@keyframes cardAppear {
  from {
    transform: scale(0.85);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.prank-text {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
  color: #fff;
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
  padding: 0 6px;
  box-sizing: border-box;
}

.prank-text small {
  font-size: 14px;
  opacity: 0.75;
  font-weight: 500;
}

.prank-loss {
  color: #ff4d4f;
  font-size: 18px;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(255, 77, 79, 0.35);
  display: inline-block;
}

.prank-close {
  margin-top: 20px;
  padding: 12px 22px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(45deg, #8b00ff, #b347ff);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
  display: none;
}

.prank-close:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(139, 0, 255, 0.45);
}

.prank-close:active {
  transform: scale(0.96);
}

.prank-shake {
  animation: prankShake 0.65s;
}

@keyframes prankShake {
  0% {
    transform: translate(0, 0);
  }
  15% {
    transform: translate(-4px, 2px);
  }
  30% {
    transform: translate(4px, -2px);
  }
  45% {
    transform: translate(-3px, 3px);
  }
  60% {
    transform: translate(3px, -2px);
  }
  75% {
    transform: translate(-2px, 2px);
  }
  100% {
    transform: translate(0, 0);
  }
}
.prank-card-shake {
  animation: prankCardShake 0.65s;
}

@keyframes prankCardShake {
  0% {
    transform: rotate(0deg) scale(1);
  }
  20% {
    transform: rotate(-2deg) scale(1.02);
  }
  40% {
    transform: rotate(2deg) scale(1.02);
  }
  60% {
    transform: rotate(-1.5deg) scale(1.01);
  }
  80% {
    transform: rotate(1deg) scale(1.01);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}
.prank-diamond {
  position: fixed;
  top: -40px;
  font-size: 20px;
  line-height: 1;
  pointer-events: none;
  z-index: 10001;
  animation: diamondFall linear forwards;
}

@keyframes diamondFall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(120vh) rotate(360deg);
    opacity: 0;
  }
}
.prank-glitch {
  animation: glitch 0.35s infinite;
}

@keyframes glitch {
  0% {
    transform: translate(1px, 0);
  }
  20% {
    transform: translate(-1px, 1px);
  }
  40% {
    transform: translate(-2px, -1px);
  }
  60% {
    transform: translate(2px, 1px);
  }
  80% {
    transform: translate(1px, -1px);
  }
  100% {
    transform: translate(0, 0);
  }
}
.event-page {
  --event-bg: #100b07;
  --event-card: rgba(255, 255, 255, .075);
  --event-card-2: rgba(255, 255, 255, .105);
  --event-border: rgba(255, 255, 255, .12);
  --event-text: #fff2d1;
  --event-muted: rgba(255, 242, 209, .66);
  --event-muted-soft: rgba(255, 242, 209, .42);
  --event-accent: #ffd36a;
  --event-accent-2: #ff9f43;
  --event-accent-3: #f35b3d;
  --event-blue: #38bdf8;
  --event-green: #27c59c;
  position: relative;
  overflow: hidden;
  border-radius: 26px 26px 0 0;
  background: radial-gradient(circle at 18% 0%, rgba(255, 159, 67, 0.22), transparent 28%), radial-gradient(circle at 92% 4%, rgba(255, 211, 106, 0.13), transparent 24%), linear-gradient(180deg, #1c1109 0%, var(--event-bg) 48%, #0b0806 100%);
  color: var(--event-text);
}

.event-page--winter {
  --event-bg: #07111f;
  --event-text: #e9f6ff;
  --event-muted: rgba(233, 246, 255, .66);
  --event-muted-soft: rgba(233, 246, 255, .42);
  --event-accent: #bdefff;
  --event-accent-2: #67d8ff;
  --event-accent-3: #668cff;
  --event-blue: #60a5fa;
  --event-green: #7dd3fc;
  background: radial-gradient(circle at 18% 0%, rgba(103, 216, 255, 0.2), transparent 28%), radial-gradient(circle at 92% 4%, rgba(189, 239, 255, 0.16), transparent 24%), linear-gradient(180deg, #0b1b31 0%, var(--event-bg) 48%, #050b14 100%);
}

.event-page__hero {
  position: relative;
  height: 238px;
  overflow: hidden;
  isolation: isolate;
}

.event-page__video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  filter: saturate(1.08) contrast(1.04) brightness(0.88);
  transform: scale(1.025);
}

.event-page__hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10, 7, 5, 0.08) 0%, rgba(10, 7, 5, 0.42) 55%, rgba(16, 11, 7, 0.98) 100%), linear-gradient(90deg, rgba(16, 11, 7, 0.58) 0%, rgba(16, 11, 7, 0.12) 52%, rgba(16, 11, 7, 0.46) 100%);
}

.event-page__sun {
  position: absolute;
  z-index: 2;
  top: 24px;
  right: 42px;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6b8 0%, var(--event-accent) 38%, var(--event-accent-2) 67%, rgba(255, 159, 67, 0) 72%);
  box-shadow: 0 0 22px rgba(255, 211, 106, 0.58), 0 0 56px rgba(255, 159, 67, 0.36);
  opacity: 0.72;
  animation: eventSunPulse 3.8s ease-in-out infinite;
}

.event-page__particle {
  position: absolute;
  z-index: 2;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--event-accent);
  box-shadow: 0 0 18px var(--event-accent);
  opacity: 0.75;
  animation: eventParticleFloat 4.5s ease-in-out infinite;
}

.event-page__particle--1 {
  left: 9%;
  top: 46%;
}

.event-page__particle--2 {
  left: 72%;
  top: 38%;
  animation-delay: 0.8s;
}

.event-page__particle--3 {
  left: 44%;
  top: 23%;
  animation-delay: 1.5s;
}

.event-page__hero-content {
  position: absolute;
  z-index: 3;
  left: 20px;
  right: 20px;
  bottom: 20px;
}

.event-page__tag {
  display: inline-flex;
  align-items: center;
  height: 31px;
  padding: 0 14px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: rgba(14, 10, 7, 0.62);
  border: 1px solid color-mix(in srgb, var(--event-accent) 42%, transparent);
  color: var(--event-accent);
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28);
}

.event-page__hero-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.event-page__title {
  margin: 0;
  font-size: 33px;
  line-height: 0.98;
  font-weight: 900;
  letter-spacing: 0.01em;
  color: #fff2c9;
  text-shadow: 0 2px 0 rgba(75, 39, 7, 0.35), 0 10px 28px rgba(0, 0, 0, 0.58);
}

.event-page__subtitle {
  max-width: 610px;
  margin-top: 8px;
  color: var(--event-muted);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
  text-shadow: 0 6px 18px rgba(0, 0, 0, 0.42);
}

.event-page__date {
  flex: 0 0 auto;
  min-width: 106px;
  height: 40px;
  padding: 0 14px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 244, 214, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

.event-page__content {
  position: relative;
  z-index: 4;
  padding: 0 18px 22px;
  margin-top: -10px;
}

.event-page__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.event-page__stat {
  min-height: 78px;
  padding: 12px 14px;
  border-radius: 19px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.045)), rgba(17, 12, 8, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 34px rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  gap: 12px;
}

.event-page__stat-icon {
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  border-radius: 15px;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.28), transparent 34%), linear-gradient(135deg, color-mix(in srgb, var(--event-accent) 35%, transparent), color-mix(in srgb, var(--event-accent-3) 18%, transparent));
  border: 1px solid color-mix(in srgb, var(--event-accent) 22%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.event-page__stat-icon img {
  width: 27px;
  height: 27px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

.event-page__stat-label {
  color: var(--event-muted);
  font-size: 13px;
  line-height: 1.1;
  font-weight: 800;
}

.event-page__stat-value {
  margin-top: 4px;
  color: var(--event-accent);
  font-size: 25px;
  line-height: 1;
  font-weight: 900;
}

.event-page__stat-note {
  margin-top: 4px;
  color: var(--event-muted-soft);
  font-size: 12px;
  line-height: 1.15;
  font-weight: 700;
}

.event-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.event-page__action {
  position: relative;
  overflow: hidden;
  min-height: 76px;
  padding: 12px 14px;
  border: 0;
  border-radius: 20px;
  color: #fff;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 14px 28px rgba(0, 0, 0, 0.24);
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
  flex: 1 1 260px;
  min-width: 0;
}

.event-page__action::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.11);
  pointer-events: none;
}

.event-page__action:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 18px 34px rgba(0, 0, 0, 0.3);
}

.event-page__action:active {
  transform: translateY(0) scale(0.985);
}

.event-page__action-shine {
  position: absolute;
  top: -40%;
  left: -30%;
  width: 72%;
  height: 180%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  animation: eventButtonShine 4.8s ease-in-out infinite;
  pointer-events: none;
}

.event-page__action--main {
  background: radial-gradient(circle at 18% 22%, rgba(255, 239, 179, 0.28), transparent 30%), linear-gradient(135deg, #ffb34a 0%, #ff7b35 48%, #f1523b 100%);
}

.event-page__action--donate {
  background: radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.22), transparent 30%), linear-gradient(135deg, #9c5cff 0%, #7b2ee6 48%, #5620b9 100%);
}

.event-page__action--coins {
  background: radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.22), transparent 30%), linear-gradient(135deg, #40b8e8 0%, #2196b8 48%, #178f78 100%);
}

.event-page__action-icon {
  position: relative;
  z-index: 1;
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
}

.event-page__action-icon img {
  width: 27px;
  height: 27px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

.event-page__action-text {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.event-page__action-text b {
  display: block;
  font-size: 16px;
  line-height: 1.12;
  font-weight: 900;
}

.event-page__action-text small {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
}

.event-page__cards-result {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 12px;
}

.event-page__cards-result:empty {
  display: none;
}

.event-page__card-image,
.halloween-pack__card-image {
  width: 76px;
  border-radius: 13px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(255, 255, 255, 0.1);
  animation: eventCardAppear 0.36s cubic-bezier(0.2, 0.9, 0.25, 1.2) both;
}

.event-page__box {
  margin-top: 14px;
  padding: 14px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)), rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.event-page__box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 11px;
}

.event-page__box-title {
  color: var(--event-accent);
  font-size: 18px;
  line-height: 1.1;
  font-weight: 900;
}

.event-page__box-subtitle {
  margin-top: 3px;
  color: var(--event-muted);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
}

.event-page__rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.event-page__rule {
  min-height: 70px;
  padding: 11px;
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)), rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.075);
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.event-page__rule:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.095);
  border-color: color-mix(in srgb, var(--event-accent) 22%, transparent);
}

.event-page__rule span {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.36), transparent 34%), linear-gradient(135deg, var(--event-accent) 0%, var(--event-accent-2) 100%);
  color: #261404;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(255, 159, 67, 0.14);
}

.event-page__rule p {
  margin: 0;
  color: rgba(255, 244, 214, 0.78);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
}

.event-page__rule--warning {
  grid-column: 1/-1;
  min-height: auto;
  align-items: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--event-accent-2) 16%, transparent), color-mix(in srgb, var(--event-accent-3) 9%, transparent)), rgba(0, 0, 0, 0.12);
  border-color: color-mix(in srgb, var(--event-accent) 25%, transparent);
}

.event-page__history {
  margin-top: 2px;
}

.event-page .manga-cards__item-wrapper {
  padding: 4px;
}

.event-page .manga-cards__item {
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.07);
  transition: transform 0.18s ease, filter 0.18s ease;
}

.event-page .manga-cards__item:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

.event-lock {
  pointer-events: none;
  opacity: 0.62;
  filter: grayscale(0.12);
}

@keyframes eventSunPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.62;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.85;
  }
}
@keyframes eventParticleFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.45;
  }
  50% {
    transform: translate3d(8px, -14px, 0) scale(1.35);
    opacity: 0.95;
  }
}
@keyframes eventButtonShine {
  0%, 42% {
    transform: translateX(-120%) rotate(18deg);
    opacity: 0;
  }
  52% {
    opacity: 1;
  }
  68%, 100% {
    transform: translateX(260%) rotate(18deg);
    opacity: 0;
  }
}
@keyframes eventCardAppear {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.88) rotate(-2deg);
  }
  70% {
    opacity: 1;
    transform: translateY(-2px) scale(1.03) rotate(1deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0);
  }
}
@media (max-width: 760px) {
  .event-page {
    border-radius: 22px 22px 0 0;
  }
  .event-page__hero {
    height: 218px;
  }
  .event-page__hero-content {
    left: 13px;
    right: 13px;
    bottom: 16px;
  }
  .event-page__tag {
    height: 29px;
    padding: 0 11px;
    margin-bottom: 9px;
    font-size: 11px;
  }
  .event-page__hero-row {
    display: block;
  }
  .event-page__title {
    font-size: 27px;
  }
  .event-page__subtitle {
    max-width: 100%;
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.32;
  }
  .event-page__date {
    width: -moz-fit-content;
    width: fit-content;
    min-width: 0;
    height: 32px;
    margin-top: 10px;
    padding: 0 11px;
    border-radius: 12px;
    font-size: 12px;
  }
  .event-page__sun {
    width: 58px;
    height: 58px;
    top: 20px;
    right: 24px;
  }
  .event-page__content {
    padding: 0 11px 16px;
    margin-top: -10px;
  }
  .event-page__stats {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .event-page__stat {
    min-height: 70px;
    padding: 10px;
    border-radius: 17px;
    gap: 9px;
  }
  .event-page__stat-icon {
    width: 37px;
    height: 37px;
    flex-basis: 37px;
    border-radius: 13px;
    font-size: 19px;
  }
  .event-page__stat-icon img {
    width: 24px;
    height: 24px;
  }
  .event-page__stat-label {
    font-size: 11px;
  }
  .event-page__stat-value {
    font-size: 21px;
  }
  .event-page__stat-note {
    font-size: 10px;
  }
  .event-page__actions {
    gap: 8px;
    margin-top: 10px;
  }
  .event-page__action {
    min-height: 62px;
    flex-basis: 100%;
    padding: 10px 12px;
    border-radius: 17px;
  }
  .event-page__action-icon {
    width: 39px;
    height: 39px;
    flex-basis: 39px;
    border-radius: 14px;
    font-size: 21px;
  }
  .event-page__action-icon img {
    width: 25px;
    height: 25px;
  }
  .event-page__action-text b {
    font-size: 15px;
  }
  .event-page__action-text small {
    font-size: 11px;
  }
  .event-page__box {
    margin-top: 11px;
    padding: 11px;
    border-radius: 19px;
  }
  .event-page__box-title {
    font-size: 16px;
  }
  .event-page__box-subtitle {
    font-size: 11px;
  }
  .event-page__rules {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .event-page__rule {
    min-height: auto;
    padding: 10px;
    border-radius: 15px;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
  }
  .event-page__rule span {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    font-size: 12px;
  }
  .event-page__rule p {
    font-size: 12px;
    line-height: 1.32;
  }
  .event-page__rule--warning {
    grid-column: auto;
  }
  .event-page__card-image,
  .halloween-pack__card-image {
    width: 66px;
    border-radius: 11px;
  }
}
@media (max-width: 380px) {
  .event-page__stats {
    grid-template-columns: 1fr;
  }
  .event-page__hero {
    height: 230px;
  }
}
.event-page__heat {
  position: relative;
  overflow: hidden;
  margin-top: 14px;
  padding: 15px;
  border-radius: 23px;
  background: radial-gradient(circle at 12% 18%, rgba(255, 211, 106, 0.18), transparent 30%), radial-gradient(circle at 88% 10%, rgba(243, 91, 61, 0.18), transparent 28%), linear-gradient(135deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.035)), rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.105);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.event-page__heat-bg {
  position: absolute;
  inset: -60px;
  background: radial-gradient(circle, rgba(255, 176, 64, 0.16) 0 2px, transparent 3px);
  background-size: 34px 34px;
  opacity: 0.45;
  animation: summerHeatBg 12s linear infinite;
  pointer-events: none;
}

.event-page__heat-head,
.event-page__heat-bottom,
.event-page__heat-thermo {
  position: relative;
  z-index: 1;
}

.event-page__heat-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.event-page__heat-title {
  color: var(--event-accent);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.1;
}

.event-page__heat-subtitle {
  margin-top: 4px;
  color: var(--event-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.event-page__heat-help {
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--event-accent);
  font-weight: 900;
  cursor: pointer;
}

.event-page__heat-scale {
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px;
  color: rgba(255, 244, 214, 0.48);
  font-size: 10px;
  font-weight: 900;
}

.event-page__heat-line {
  position: relative;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(255, 255, 255, 0.045)), rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.24);
}

.event-page__heat-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffd36a 0%, #ff9f43 45%, #f35b3d 78%, #ff3b25 100%);
  box-shadow: 0 0 22px rgba(255, 113, 50, 0.38);
  transition: width 0.55s cubic-bezier(0.2, 0.9, 0.25, 1);
}

.event-page__heat-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  animation: summerHeatShine 2.4s ease-in-out infinite;
}

.event-page__heat-glow {
  position: absolute;
  top: 50%;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 244, 180, 0.95), rgba(255, 91, 45, 0.38) 45%, transparent 72%);
  filter: blur(1px);
  animation: summerHeatPulse 1.8s ease-in-out infinite;
}

.event-page__heat-progress {
  margin-top: 9px;
  color: var(--event-muted);
  font-size: 12px;
  font-weight: 800;
}

.event-page__heat-progress b {
  color: var(--event-accent);
  font-size: 16px;
}

.event-page__heat-bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  margin-top: 13px;
}

.event-page__heat-prize {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 11px;
  border-radius: 17px;
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.075);
}

.event-page__heat-prize-icon {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255, 211, 106, 0.24), rgba(243, 91, 61, 0.18));
  border: 1px solid rgba(255, 211, 106, 0.18);
  font-size: 20px;
}

.event-page__heat-prize b {
  display: block;
  color: rgba(255, 244, 214, 0.9);
  font-size: 13px;
  font-weight: 900;
}

.event-page__heat-prize span {
  display: block;
  margin-top: 3px;
  color: var(--event-muted);
  font-size: 12px;
  line-height: 1.28;
  font-weight: 700;
}

.event-page__heat-actions {
  display: grid;
  gap: 8px;
  min-width: 150px;
}

.event-page__heat-btn {
  min-height: 40px;
  padding: 0 13px;
  border: 0;
  border-radius: 15px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.16s ease, filter 0.16s ease, opacity 0.16s ease;
}

.event-page__heat-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.07);
}

.event-page__heat-btn:active {
  transform: scale(0.98);
}

.event-page__heat-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.event-page__heat-btn--burn {
  background: linear-gradient(135deg, #ffb34a, #f35b3d);
  box-shadow: 0 10px 20px rgba(243, 91, 61, 0.2);
}

.event-page__heat-btn--take {
  background: linear-gradient(135deg, #27c59c, #15936f);
}

.summer-heat-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.summer-heat-modal--open {
  display: flex;
}

.summer-heat-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.68);
  -webkit-backdrop-filter: blur(7px);
          backdrop-filter: blur(7px);
}

.summer-heat-modal__card {
  position: relative;
  width: 100%;
  max-width: 390px;
  padding: 24px 18px 18px;
  border-radius: 24px;
  text-align: center;
  background: radial-gradient(circle at 50% -5%, rgba(255, 159, 67, 0.24), transparent 36%), linear-gradient(180deg, #28170d, #120b07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.55);
  animation: summerHeatModalIn 0.28s ease both;
}

.summer-heat-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff2d1;
  font-size: 20px;
  cursor: pointer;
}

.summer-heat-modal__icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 12px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ffd36a, #f35b3d);
  font-size: 34px;
  box-shadow: 0 0 34px rgba(255, 130, 55, 0.32);
  animation: summerHeatPulse 1.8s ease-in-out infinite;
}

.summer-heat-modal__title {
  color: #ffd36a;
  font-size: 22px;
  font-weight: 900;
}

.summer-heat-modal__text {
  margin-top: 8px;
  color: rgba(255, 244, 214, 0.72);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
}

.summer-heat-modal__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 15px;
}

.summer-heat-modal__stats div {
  padding: 12px;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.summer-heat-modal__stats b {
  display: block;
  color: #ffd36a;
  font-size: 20px;
  font-weight: 900;
}

.summer-heat-modal__stats span {
  display: block;
  margin-top: 3px;
  color: rgba(255, 244, 214, 0.58);
  font-size: 11px;
  font-weight: 800;
}

.summer-heat-modal__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  margin-top: 15px;
  border-radius: 16px;
  background: linear-gradient(135deg, #ffb34a, #f35b3d);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
}

@keyframes summerHeatBg {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-34px);
  }
}
@keyframes summerHeatShine {
  0%, 40% {
    transform: translateX(-100%);
    opacity: 0;
  }
  55% {
    opacity: 1;
  }
  100% {
    transform: translateX(120%);
    opacity: 0;
  }
}
@keyframes summerHeatPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0.72;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
  }
}
.summer-heat-modal__icon {
  transform: none;
}

@keyframes summerHeatModalIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (max-width: 760px) {
  .event-page__heat {
    margin-top: 11px;
    padding: 12px;
    border-radius: 20px;
  }
  .event-page__heat-bottom {
    grid-template-columns: 1fr;
  }
  .event-page__heat-actions {
    grid-template-columns: 1fr 1fr;
    min-width: 0;
  }
  .event-page__heat-title {
    font-size: 16px;
  }
  .event-page__heat-prize {
    align-items: flex-start;
  }
}
@media (max-width: 380px) {
  .event-page__heat-actions {
    grid-template-columns: 1fr;
  }
}
.summer-heat-modal__card--inventory {
  max-width: 820px;
  max-height: 92vh;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
}

.summer-heat-modal__head {
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.summer-heat-modal__head .summer-heat-modal__title {
  font-size: 21px;
}

.summer-heat-modal__head .summer-heat-modal__text {
  max-width: 610px;
}

.summer-heat-modal__head .summer-heat-modal__text b {
  color: #ffd36a;
}

.summer-heat-modal__head .summer-heat-modal__close {
  position: static;
  flex: 0 0 36px;
}

.summer-heat-modal__selected {
  margin: 12px 16px 0;
  padding: 11px 13px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px dashed rgba(255, 255, 255, 0.13);
  color: rgba(255, 244, 214, 0.72);
  font-size: 13px;
  font-weight: 800;
}

.summer-heat-modal__selected b {
  color: #ffd36a;
}

.summer-heat-modal__inventory {
  padding: 12px 16px;
  overflow: auto;
  flex: 1;
}

.card-inventory-container--event-heat .card-filter-list__card {
  position: relative;
  cursor: pointer;
  transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease;
}

.card-inventory-container--event-heat .card-filter-list__card:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.card-inventory-container--event-heat .card-filter-list__card.summer-heat-card--selected {
  transform: translateY(-3px) scale(1.035);
  filter: brightness(1.12);
}

.card-inventory-container--event-heat .card-filter-list__card.summer-heat-card--selected::after {
  content: "🔥";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: 11px;
  background: linear-gradient(135deg, #ffd36a, #f35b3d);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 18px rgba(255, 126, 45, 0.45);
  z-index: 3;
  animation: summerHeatSelected 0.9s ease-in-out infinite;
}

.card-inventory-container--event-heat .card-filter-list__card.summer-heat-card--selected img {
  box-shadow: 0 0 0 2px #ffd36a, 0 0 28px rgba(243, 91, 61, 0.45);
}

.summer-heat-modal__footer {
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.summer-heat-modal__burn {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 17px;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.25), transparent 32%), linear-gradient(135deg, #ffb34a, #f35b3d);
  box-shadow: 0 12px 28px rgba(243, 91, 61, 0.22);
  transition: transform 0.16s ease, filter 0.16s ease, opacity 0.16s ease;
}

.summer-heat-modal__burn:hover {
  transform: translateY(-1px);
  filter: brightness(1.07);
}

.summer-heat-modal__burn:active {
  transform: scale(0.985);
}

.summer-heat-modal__burn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  filter: grayscale(0.25);
}

.card-inventory-container--event-heat .card-filter-list__card.summer-heat-card--burning {
  pointer-events: none;
  animation: summerHeatBurnCard 0.55s ease forwards;
}

@keyframes summerHeatSelected {
  0%, 100% {
    transform: scale(1) rotate(-4deg);
  }
  50% {
    transform: scale(1.12) rotate(5deg);
  }
}
@keyframes summerHeatBurnCard {
  0% {
    transform: scale(1) rotate(0);
    opacity: 1;
    filter: brightness(1);
  }
  45% {
    transform: scale(1.08) rotate(2deg);
    opacity: 1;
    filter: brightness(1.6) saturate(1.6);
  }
  100% {
    transform: scale(0.2) rotate(-14deg) translateY(-20px);
    opacity: 0;
    filter: brightness(2) blur(3px);
  }
}
@media (max-width: 760px) {
  .summer-heat-modal {
    align-items: flex-end;
    padding: 0;
  }
  .summer-heat-modal__card--inventory {
    max-width: 100%;
    max-height: 94vh;
    border-radius: 24px 24px 0 0;
  }
  .summer-heat-modal__head {
    padding: 14px 12px;
  }
  .summer-heat-modal__inventory {
    padding: 10px 12px;
  }
  .summer-heat-modal__selected {
    margin: 10px 12px 0;
  }
  .summer-heat-modal__footer {
    padding: 10px 12px 14px;
  }
}
.event-page__history-link {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--event-accent);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s ease;
}
.event-page__history-link:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 211, 106, 0.3);
}

.spring-event-pack__free-card-btn {
  background-image: linear-gradient(to right, #246cd9, #4b98fd, #19a1c9, #1c779f, #246cd9);
}
.spring-event-pack__open-donat-btn {
  background-image: linear-gradient(to right, #7232a9, #814cb0, #8856b4, #8c5eb4, #5a1b97);
  margin-bottom: 20px !important;
}
.spring-event-pack__new-controls {
  margin-bottom: 30px;
}
@media screen and (max-width: 560px) {
  .spring-event-pack__new-controls {
    flex-direction: column;
  }
}
.spring-event-pack__new-controls-btn {
  font-size: 16px;
  padding: 10px 15px;
  border: 1px solid var(--border-color);
  border-radius: 25px;
  align-items: center;
  background-size: 600%;
  background-position: 0 0;
  display: flex;
  width: 100%;
  justify-content: center;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-name: gradients-spring-event--btn;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 30px;
}
@media screen and (max-width: 560px) {
  .spring-event-pack__new-controls-btn {
    width: 100%;
    margin-bottom: 15px;
  }
  .spring-event-pack__new-controls-btn:last-of-type {
    margin-bottom: 0;
  }
}
.spring-event-pack__number {
  border-radius: 50%;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 500;
  width: 30px;
}
.spring-event-pack__p {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  line-height: 19px;
}
.spring-event-pack__text {
  line-height: 23px;
  margin-bottom: 30px;
  font-size: 15px;
}
.spring-event-pack__title {
  font-size: 36px;
  text-align: center;
  font-weight: 500;
  margin-bottom: 30px;
  color: #d37fe1;
  background: -webkit-linear-gradient(left, #b054de, #ac80d2, #b054de);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 2px 3px #000000) drop-shadow(0px 0px 10px #c395ee);
}
@media screen and (max-width: 420px) {
  .spring-event-pack__title {
    font-size: 32px;
  }
}
@media screen and (max-width: 360px) {
  .spring-event-pack__title {
    font-size: 29px;
  }
}
.spring-event-pack__button {
  font-size: 16px;
  padding: 10px 15px;
  border: 1px solid var(--border-color);
  border-radius: 25px;
  align-items: center;
  background-image: linear-gradient(to right, #7232a9, #814cb0, #8856b4, #8c5eb4, #5a1b97);
  background-size: 600%;
  background-position: 0 0;
  /*box-shadow: inset 0 0 5em rgba(0,0,0,.5);*/
  display: flex;
  height: 100%;
  justify-content: center;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-name: gradients-spring-event--btn;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 20px;
}
.spring-event-pack__button img {
  width: 22px;
  height: 22px;
  margin-left: 10px;
  margin-right: 4px;
}
.spring-event-pack__button:hover {
  transform: scale(1.02);
}

@keyframes gradients-spring-event--btn {
  0% {
    background-position: 0 0;
  }
  25% {
    background-position: 50% 0;
  }
  50% {
    background-position: 90% 0;
  }
  60% {
    background-position: 60%;
  }
  75% {
    background-position: 40%;
  }
  100% {
    background-position: 0 0;
  }
}
.spring-event--gift-ball {
  position: fixed;
  top: -50px;
  width: 50px;
  height: 50px;
  background-image: url("/assets/spring-event-/balls/1.png");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 1;
  cursor: pointer;
  animation: spring-event--gift-ball--fall 5s linear forwards, spring-event--gift-ball--spin 5s linear infinite;
  z-index: 999;
}
.spring-event--gift-ball--1 {
  background-image: url("/assets/spring-event-/balls/1.png") !important;
}
.spring-event--gift-ball--2 {
  background-image: url("/assets/spring-event-/balls/2.png") !important;
}
.spring-event--gift-ball--3 {
  background-image: url("/assets/spring-event-/balls/3.png") !important;
}
.spring-event--gift-ball--4 {
  background-image: url("/assets/spring-event-/balls/4.png") !important;
}

.spring-event--gift-ball--point-text {
  position: fixed;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  opacity: 1;
  animation: spring-event--gift-ball--rise 2s ease-out forwards;
  z-index: 999;
}

@keyframes spring-event--gift-ball--fall {
  0% {
    top: -50px;
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    top: 100vh;
    opacity: 0;
  }
}
@keyframes spring-event--gift-ball--spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spring-event--gift-ball--collect {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5) translateY(-150px);
    opacity: 0;
  }
}
@keyframes spring-event--gift-ball--rise {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-30px);
    opacity: 0;
  }
}
.spring-event--bag {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  background-image: url("/assets/spring-event-/gift.png");
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
  animation: spring-event--bag--grow 2s ease-out forwards;
  z-index: 999;
}

@keyframes spring-event--bag--grow {
  0% {
    transform: translateX(-50%) scale(0);
    bottom: -100px;
    opacity: 0;
  }
  100% {
    transform: translateX(-50%) scale(1);
    bottom: 0;
    opacity: 1;
  }
}
@keyframes spring-event--bag--shake {
  0% {
    transform: translateX(-50%);
  }
  25% {
    transform: translateX(calc(-50% - 10px));
  }
  50% {
    transform: translateX(calc(-50% + 10px));
  }
  75% {
    transform: translateX(calc(-50% - 5px));
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes spring-event--bag--rotate {
  0% {
    transform: translateX(-50%) rotate(0deg);
  }
  50% {
    transform: translateX(-50%) rotate(15deg);
  }
  100% {
    transform: translateX(-50%) rotate(-15deg);
  }
}
@keyframes spring-event--bag--bounce {
  0% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, -10px);
  }
  100% {
    transform: translate(-50%, 0);
  }
}
@keyframes spring-event--bag--diagonal-rise-left {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(-100px, -200px);
    opacity: 0;
  }
}
@keyframes spring-event--bag--diagonal-rise-center {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(0, -200px);
    opacity: 0;
  }
}
@keyframes spring-event--bag--diagonal-rise-right {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(100px, -200px);
    opacity: 0;
  }
}
@keyframes spring-event--bag--text-rise {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-50px);
    opacity: 0;
  }
}
.spring-event--bag--candy {
  position: absolute;
  width: 30px;
  height: 30px;
  background-image: url("/assets/spring-event-/balls/4.png");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 999;
}

.spring-event-bag--text {
  position: absolute;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  opacity: 1;
  animation: spring-event--bag--text-rise 1.8s ease-out forwards;
  z-index: 999;
}

.spring-event--pack__music.card-show__audio-play {
  top: -20px;
}

.menu__item--spring-event- {
  transition: all 0.2s;
}
.menu__item--spring-event-:hover {
  background: rgba(215, 25, 25, 0.6) !important;
  color: var(--main-text-color) !important;
}
.menu__item--spring-event- img {
  width: 20px;
}

.snow-element {
  position: fixed;
  background: #fff;
  border-radius: 50%;
  animation-name: falling;
  animation-timing-function: linear;
}

@keyframes falling {
  0% {
    top: -100px;
  }
  100% {
    top: 100vh;
    transform: translateX(-100vh);
  }
}
.spring-event-pack__button-coins {
  background-image: linear-gradient(to right, #7232a9, #814cb0, #8856b4, #8c5eb4, #5a1b97);
  font-size: 16px;
  padding: 10px 15px;
  border: 1px solid var(--border-color);
  border-radius: 25px;
  align-items: center;
  background-size: 600%;
  background-position: 0 0;
  display: flex;
  width: 100%;
  justify-content: center;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-name: gradients-spring-event--btn;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 30px;
}
@media screen and (max-width: 560px) {
  .spring-event-pack__button-coins {
    width: 100%;
    margin-bottom: 15px;
  }
  .spring-event-pack__button-coins:last-of-type {
    margin-bottom: 0;
  }
}

.card-level-up {
  margin: 0 auto;
  position: relative;
}
.card-level-up__i {
  position: absolute;
  top: 10px;
  right: 10px;
  color: white;
  z-index: 9;
  border-radius: 50%;
  background: var(--purple-btn-bg);
  width: 20px;
  height: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-level-up__scroll-btn {
  display: none;
}
.card-level-up__controls {
  display: flex;
  justify-content: center;
}
.card-level-up__controls--scroll-enable .card-level-up__start-btn {
  margin: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.card-level-up__controls--scroll-enable .card-level-up__scroll-btn {
  display: flex;
  align-content: center;
  justify-content: center;
  border-top-left-radius: 0;
  border-left: 3px solid var(--border-color);
  border-bottom-left-radius: 0;
  color: rgb(198, 198, 198);
}
.card-level-up__controls--scroll-enable .card-level-up__scroll-btn i {
  font-size: 16px;
  margin-left: 5px;
}
.card-level-up__controls--scroll-enable .card-level-up__scroll-btn--enable {
  color: white;
}
.card-level-up__controls--scroll-enable .card-level-up__scroll-btn--enable i {
  color: #5eff5e;
}
.card-level-up__wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}
.card-level-up__body {
  display: flex;
  margin-bottom: 20px;
  padding: 20px;
  background: var(--light-bg);
  border-radius: var(--main-border-radius);
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.card-level-up__body img {
  border-radius: var(--main-border-radius);
}
.card-level-up__info {
  font-size: 13px;
  color: var(--secondary-text-color);
  margin-bottom: 10px;
}
.card-level-up__info--step-2 {
  display: none;
}
.card-level-up__start-btn {
  width: auto;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
.card-level-up__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
  text-align: center;
}
.card-level-up__title {
  font-size: 21px;
  font-weight: 500;
  margin-bottom: 6px;
}
.card-level-up__item {
  width: 85px;
  flex-shrink: 0;
}
.card-level-up__item-footer {
  display: none;
  margin-top: 5px;
}
.card-level-up__item-level {
  border: 1px solid var(--border-color);
  width: 30px;
  text-align: center;
  border-radius: var(--main-border-radius);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  height: 20px;
  font-weight: 500;
}
.card-level-up__item-exp {
  border: 1px solid var(--border-color);
  width: 100%;
  text-align: center;
  border-radius: var(--main-border-radius);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
  position: relative;
  height: 20px;
}
.card-level-up__item-exp-text {
  z-index: 10;
  position: relative;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.card-level-up__item-exp-fill {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(131, 29, 217, 0.5019607843);
  width: 0%;
  border-radius: var(--main-border-radius);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  height: 18px;
}
.card-level-up__left {
  margin-bottom: 15px;
}
.card-level-up__bar--fill {
  position: absolute;
  background: rgba(119, 44, 232, 0.1803921569);
  height: 100%;
  top: -1px;
  left: -1px;
  border-radius: var(--main-border-radius);
}

.question-mark {
  position: absolute;
  pointer-events: none;
  font-weight: bold;
  z-index: 99999;
  color: var(--main-text-color) !important;
}

.card-frame {
  display: flex;
  justify-content: center;
}
.card-frame__inner {
  width: 800px;
  overflow: hidden;
}
.card-frame__block {
  margin: 0 auto;
  position: relative;
}
.card-frame__wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.card-frame__body {
  display: flex;
  margin-bottom: 20px;
  padding: 20px;
  background: var(--light-bg);
  border-radius: var(--main-border-radius);
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.card-frame__preview {
  display: flex;
  justify-content: center;
  align-items: center;
}
.card-frame__card {
  width: 96px;
  position: relative;
}
.card-frame__card--frame {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
.card-frame__card img {
  width: 100%;
  display: block;
  border-radius: var(--main-border-radius);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.card-frame__media {
  width: 100%;
  display: block;
  border-radius: var(--main-border-radius);
}
.card-frame__content {
  text-align: center;
}
.card-frame__subtitle {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 4px;
  text-align: center;
}
.card-frame__info {
  font-size: 13px;
  color: var(--secondary-text-color);
  margin: 0;
}
.card-frame__price {
  width: 100%;
  max-width: 420px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: calc(var(--main-border-radius) - 4px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.card-frame__price-label {
  font-size: 13px;
  color: var(--secondary-text-color);
}
.card-frame__price-value {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.card-frame__diamond {
  margin-left: 4px;
}
.card-frame__controls {
  width: 100%;
  max-width: 420px;
}
.card-frame__controls--frames {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.card-frame .card-frame__frame {
  position: relative;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-frame .card-frame__frame-preview {
  position: relative;
  width: 42px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  flex: 0 0 auto;
}
.card-frame .card-frame__frame-preview img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.card-frame .card-frame__frame-preview-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.card-frame .card-frame__frame-check {
  margin-left: auto;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.card-frame .card-frame__frame.is-active .card-frame .card-frame__frame-check {
  opacity: 1;
}
.card-frame__frame-thumb {
  width: 34px;
  height: 46px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.1);
  flex: 0 0 auto;
}
.card-frame__frame-thumb--default {
  border-color: rgba(255, 255, 255, 0.16);
}
.card-frame__frame-thumb--dark {
  background: rgba(0, 0, 0, 0.22);
  border-color: rgba(255, 255, 255, 0.08);
}
.card-frame__frame-title {
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}
.card-frame__frame-check {
  margin-left: auto;
  font-size: 14px;
  font-weight: 800;
  opacity: 0.9;
}
.card-frame__frame-badge {
  margin-left: auto;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--secondary-text-color);
}
.card-frame__footer {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.card-frame__save {
  width: 100%;
  padding: 12px 14px;
  border-radius: calc(var(--main-border-radius) - 4px);
}
.card-frame__hint {
  font-size: 12px;
  color: var(--secondary-text-color);
  text-align: center;
  opacity: 0.9;
}
@media (max-width: 480px) {
  .card-frame__card {
    width: 88px;
  }
  .card-frame__controls--frames {
    grid-template-columns: 1fr;
  }
  .card-frame__body {
    padding: 16px;
  }
}
.card-frame__header {
  display: none;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}
.card-frame__title {
  font-size: 21px;
  font-weight: 500;
  margin-bottom: 13px;
}

.card-level {
  display: flex;
  justify-content: center;
}
.card-level__inner {
  width: 800px;
  overflow: hidden;
}
.card-level__header {
  display: none;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}
.card-level__text {
  background: var(--light-bg);
  border-radius: 15px;
  padding: 15px;
  line-height: 21px;
  width: 100%;
  font-size: 15px;
}
.card-level__text div {
  margin-bottom: 5px;
}

.upgrade-notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background-color: var(--main-purple-color);
  border-radius: 50%;
  display: none;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  background-size: cover;
  background-position: center;
  opacity: 0;
}

.upgrade-notification span {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: #222;
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
}

.card-level-scrolls {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background: var(--light-bg);
  border-radius: var(--main-border-radius);
}
.card-level-scrolls__title {
  font-size: 21px;
  font-weight: 500;
  margin-bottom: 13px;
}
.card-level-scrolls__list {
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.card-level-scrolls__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: var(--main-border-radius);
  max-width: 105px;
}
.card-level-scrolls__item-rank {
  font-weight: 500;
  padding: 2px 4px;
  color: white;
}
.card-level-scrolls__item-count {
  font-size: 12px;
  width: 45px;
  height: 21px;
  border-radius: 10px;
  margin-top: 5px;
  background: var(--light-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--border-color);
  font-weight: 600;
}
.card-level-scrolls__item-count span {
  display: block;
  margin-left: 10px;
  position: relative;
}
.card-level-scrolls__item-count span[data-rank=E] {
  color: #613324;
}
.card-level-scrolls__item-count span[data-rank=D] {
  color: #718b99;
}
.card-level-scrolls__item-count span[data-rank=C] {
  color: #df9300;
}
.card-level-scrolls__item-count span[data-rank=B] {
  color: #eb5d9b;
}
.card-level-scrolls__item-count span[data-rank=G] {
  color: #004e2f;
}
.card-level-scrolls__item-count span[data-rank=P] {
  color: #005db6;
}
.card-level-scrolls__item-count span[data-rank=A] {
  color: #9b0a05;
}
.card-level-scrolls__item-count span[data-rank=S] {
  color: #f54972;
}
.card-level-scrolls__item-count span[data-rank=X] {
  color: #25232c;
}
.card-level-scrolls__item-count span[data-rank=H] {
  color: #000000;
}
.card-level-scrolls__item-count span[data-rank=N] {
  color: #cd5757;
}
.card-level-scrolls__item-count span[data-rank=V] {
  color: #9658e4;
}
.card-level-scrolls__item-count span::before {
  content: "";
  position: absolute;
  top: -3px;
  right: 7px;
  height: 20px;
  width: 1px;
  background: var(--border-color);
  display: block;
  margin-right: 5px;
}
.card-level-scrolls__item__title {
  font-weight: 500;
  font-size: 21px;
  margin-bottom: 20px;
  text-align: center;
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}
.card-level-scrolls .blessed-pulse {
  animation: pulse 1s infinite ease-in-out;
  transform-origin: center;
}

/* Карточка блока */
.scroll-pack {
  background: var(--light-bg);
  margin-bottom: 40px;
  border-radius: 16px;
  padding: 18px 16px;
  margin-top: 24px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
}

.scroll-pack::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: radial-gradient(60% 60% at 70% 10%, rgba(110, 103, 255, 0.08), rgba(255, 255, 255, 0));
  pointer-events: none;
}

/* акцент под "сегодня скидка" */
.scroll-pack--sale-today::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(50% 50% at 10% 10%, rgba(255, 205, 92, 0.1), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.scroll-pack__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.scroll-pack__badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.scroll-pack__label {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(110, 103, 255, 0.1);
  color: #5148ff;
  border-radius: 999px;
  padding: 4px 10px;
  width: -moz-max-content;
  width: max-content;
}

/* новый бейдж */
.scroll-pack__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 4px 10px;
  width: -moz-max-content;
  width: max-content;
  background: rgba(255, 205, 92, 0.16);
  color: rgba(239, 184, 59, 0.95);
}

.scroll-pack__badge--sale::before {
  content: "⚡";
  font-size: 12px;
  line-height: 1;
  transform: translateY(-0.5px);
}

.scroll-pack__title {
  margin: 2px 0 0;
  font-weight: 800;
  line-height: 1.2;
}

.scroll-pack__subtitle {
  opacity: 0.88;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.scroll-pack__dot {
  opacity: 0.55;
}

.scroll-pack__price {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}

.scroll-pack__price-old {
  opacity: 0.55;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(255, 255, 255, 0.35);
}

.scroll-pack__price-new {
  font-weight: 900;
  opacity: 1;
}

/* CTA */
.scroll-pack__cta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.scroll-pack__sale-note {
  opacity: 0.78;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.scroll-pack__buy {
  position: relative;
  overflow: hidden;
}

.scroll-pack__shine {
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.2) 35%, transparent 70%);
  animation: shine 2.2s infinite;
}

@keyframes shine {
  0% {
    transform: translateX(-120%);
  }
  60% {
    transform: translateX(120%);
  }
  100% {
    transform: translateX(120%);
  }
}
.scroll-pack__result {
  margin-top: 16px;
}

.scroll-pack__empty {
  opacity: 0.6;
}

.scroll-drop {
  margin-top: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 12px;
}

.scroll-drop__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.scroll-drop__title {
  font-weight: 700;
}

.scroll-drop__time {
  opacity: 0.6;
  font-size: 12px;
}

.scroll-drop__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(64px, 1fr));
  gap: 10px;
}

@media (max-width: 560px) {
  .scroll-drop__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.scroll-chip {
  position: relative;
  text-align: center;
  border-radius: 12px;
  padding: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: var(--light-bg);
}

.scroll-chip img {
  width: 56px;
  height: 56px;
  display: block;
  margin: 0 auto 6px;
}

.scroll-chip__cap {
  font-size: 12px;
  opacity: 0.85;
}

.scroll-chip--blag {
  box-shadow: 0 0 0 2px rgba(255, 215, 120, 0.6) inset, 0 8px 20px rgba(255, 215, 120, 0.25);
}

.scroll-chip--blag::after {
  content: "благ";
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 10px;
  background: var(--light-bg);
  color: #5a4300;
  border-radius: 999px;
  padding: 2px 6px;
}

/* Итого по рангам */
.scroll-drop__totals {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

.scroll-total {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f7f7fb;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  padding: 6px 10px;
}

.scroll-total img {
  width: 20px;
  height: 20px;
}

.scroll-total__n {
  font-weight: 700;
}

.scroll-total__blag {
  font-size: 12px;
  opacity: 0.8;
}

/* Оверлей пака */
.pack-fx {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

.pack-fx__veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.45));
  -webkit-backdrop-filter: blur(1.5px);
          backdrop-filter: blur(1.5px);
}

.pack-fx__layer {
  position: absolute;
  inset: 0;
}

.pack-fx__scroll {
  position: absolute;
  width: 72px;
  height: 72px;
  will-change: transform, opacity, left, top, width, height;
  opacity: 0;
  transform: scale(0.7);
}

.pack-fx__scroll img {
  width: 100%;
  height: 100%;
  display: block;
}

.pack-fx__scroll[data-blag="1"] {
  filter: drop-shadow(0 0 12px rgba(255, 230, 120, 0.9));
}

.pack-fx__halo {
  position: absolute;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 160, 0.9) 0%, rgba(255, 240, 160, 0.25) 35%, rgba(255, 240, 160, 0) 70%);
  pointer-events: none;
  opacity: 0.9;
  transform: scale(0.6);
  z-index: -1;
}

.card-frame__frame {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  border-radius: calc(var(--main-border-radius) - 4px);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.card-frame__frame:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}

.card-frame__frame.is-active {
  background: rgba(130, 90, 255, 0.14);
  border-color: rgba(130, 90, 255, 0.75);
  box-shadow: 0 0 0 2px rgba(130, 90, 255, 0.1);
}

/* галочка */
.card-frame__frame-check {
  opacity: 0;
  margin-left: auto;
  font-weight: 800;
}

.card-frame__frame.is-active .card-frame__frame-check {
  opacity: 1;
}

.card-inventory-container--frame .card-filter-form__wrapper .card-filter-form__controls-list, .card-inventory-container--frame .card-filter-form__wrapper .card-filter-form__lock-status {
  display: none;
}

.card-level-auto {
  margin-top: 16px;
  margin-bottom: 20px;
  padding: 16px 18px;
  background: var(--light-bg);
  border-radius: var(--secondary-border-radius);
  color: var(--main-text-color);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.card-level-auto__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--title-color);
  margin-bottom: 14px;
}
.card-level-auto__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.card-level-auto__field {
  min-width: 0;
}
.card-level-auto__label {
  font-size: 12px;
  color: var(--secondary-text-color);
  margin-bottom: 6px;
}
.card-level-auto__input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border-radius: var(--main-border-radius);
  border: 1px solid var(--border-color);
  background: var(--medium-bg);
  color: var(--main-text-color);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.card-level-auto__input::-moz-placeholder {
  color: var(--secondary-text-color);
}
.card-level-auto__input::placeholder {
  color: var(--secondary-text-color);
}
.card-level-auto__input:focus {
  border-color: var(--purple-btn-bg);
  box-shadow: 0 0 0 3px rgba(119, 44, 232, 0.12);
  background: var(--light-bg);
}
.card-level-auto__hint {
  margin-top: 10px;
  font-size: 12px;
  color: var(--secondary-text-color);
  line-height: 1.4;
}
.card-level-auto__actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.card-level-auto__stats {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--main-border-radius);
  background: var(--medium-bg);
  border: 1px solid var(--border-color);
  font-size: 13px;
  color: var(--main-text-color);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.card-level-auto__stat b {
  font-weight: 700;
  color: var(--title-color);
}
.card-level-auto__sep {
  color: var(--secondary-text-color);
}
.card-level-auto__log {
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--main-border-radius);
  background: var(--medium-bg);
  border: 1px solid var(--border-color);
  max-height: 220px;
  overflow-y: auto;
}
.card-level-auto__log-line {
  padding: 6px 0;
  font-size: 13px;
  color: var(--main-text-color);
  border-bottom: 1px solid var(--border-color);
}
.card-level-auto__log-line:last-child {
  border-bottom: none;
}
.card-level-auto__log-line b {
  color: var(--title-color);
}

/* блокировка ручной заточки */
.card-level-up__start-btn.is-disabled,
.card-level-up__scroll-btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.2);
}

.card-level-up__lock {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  color: var(--secondary-text-color);
}

.quiz {
  margin-top: 20px;
  text-align: center;
  margin-bottom: 40px;
}
.quiz__header {
  margin-bottom: 15px;
}
.quiz__title {
  margin-bottom: 10px;
  color: var(--secondary-text-color);
}
.quiz__image-img {
  width: 200px;
  border-radius: 10px;
  margin: 0 auto 20px auto;
}
.quiz__bar {
  background: var(--grey-background);
  height: 10px;
  border-radius: var(--main-border-radius);
  width: 100%;
}
.quiz__bar--fill {
  background: var(--purple-btn-bg);
  height: 10px;
  border-radius: var(--main-border-radius);
}
.quiz__bar-time {
  background: var(--grey-background);
  height: 3px;
  border-radius: var(--main-border-radius);
  width: 100%;
  margin-bottom: 5px;
}
.quiz__bar-time-fill {
  background: #c32222;
  height: 3px;
  border-radius: var(--main-border-radius);
}
.quiz__question {
  font-size: 25px;
  font-weight: 500;
  margin-bottom: 20px;
}
.quiz__answer-item {
  margin-bottom: 10px;
}

.quiz-create {
  margin-top: 20px;
}
.quiz-create__field {
  width: 100%;
}
.quiz-create__field input {
  width: 100%;
}

.quiz-preview {
  padding: 15px;
  background: #f9f9f9;
  border-radius: 10px;
  margin-bottom: 20px;
}

.quiz-preview__question {
  font-size: 18px;
  margin-bottom: 10px;
}

.quiz-preview__answers li {
  margin: 5px 0;
}

.quiz__bar--infinite {
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
.btn-back {
  font-family: "Agora", sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 130%;
  color: #12244B;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 126px;
  max-width: 126px;
  min-height: 127px;
  max-height: 127px;
  border-radius: 34.04px;
  background-color: #FFAA6B;
  box-shadow: inset 0px 10px 1.9px 0px #FFEDDD, inset 0px -11px 3.4px 0px rgba(197, 105, 47, 0.78), 0px 10px 29.79px 0px rgba(0, 29, 55, 0.85);
}

.btn-back svg {
  width: 37px;
  height: 42px;
}

.btn-back:hover {
  background-color: #FFCBA4;
}

.btn-back:active {
  background-color: #FFAA6B;
  box-shadow: inset 0px 9px 1.9px 0px #FFEDDD, inset 0px -7px 3.4px 0px rgba(197, 105, 47, 0.78), 0px 10px 29.79px 0px rgba(0, 29, 55, 0.85);
}

.btn-back:active path {
  stroke: #6184A8;
}

.mine-body {
  margin: 0;
  padding: 0;
  font-family: "Slackey", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 130%;
  color: var(--title-color);
  height: 100vh;
  --col-1: #FFFFFF;
  --col-2: #12244B;
}
.mine-body * {
  box-sizing: border-box;
  transition: background-color 0.3s ease, opacity 0.3s ease;
  scroll-behavior: smooth;
}
.mine-body img {
  height: unset;
}

.main-mine {
  display: flex;
  flex-direction: column;
  background-image: url("/assets/mine/back-naruto.jpg?2");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
  height: 100%;
  padding: 47px 90px 86px 60px;
}

.main-mine__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main-mine__header_back,
.main-mine__header_score {
  display: flex;
  align-items: center;
  gap: 37px;
}

.main-mine__header_back-text {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 26.24px;
  color: var(--col-1);
}

.main-mine__header_user-name {
  font-family: "Agora-Regular", sans-serif;
  font-weight: 700;
  font-size: 46px;
  color: var(--col-1);
  text-shadow: 0 0 10px rgba(121, 158, 251, 0.8), 0 0 20px rgba(121, 158, 251, 0.5);
}

.main-mine__header_score {
  gap: 30px;
}

.main-mine__header_score-count {
  font-family: "Slackey", sans-serif;
  font-weight: 400;
  font-size: 53.24px;
  color: var(--col-1);
}

.main-mine__header_score-icon {
  max-width: 115px;
}

.main-mine__game {
  position: relative;
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
  max-width: 691px;
  width: 100%;
}

.main-mine__game-app {
  /* position: relative; */
}

.main-mine__game-tap {
  position: absolute;
  max-width: 379px;
  max-height: 379px;
  bottom: 101px;
  left: -99px;
  display: flex;
  z-index: 1000;
}

.main-mine__game-character--wrapper {
  position: relative;
  width: 611px;
  /* ширина самого большого кадра */
  height: 760px;
  /* подбери под рост персонажа */
  margin: 0 auto;
}

.main-mine__game-character {
  position: absolute;
  display: none;
  max-width: 611px;
  bottom: 47px;
}

.main-mine__game-character.active {
  display: block;
}

.main-mine__game-character-1 {
  right: 53px;
}

.main-mine__game-character-2 {
  right: 34px;
  bottom: 56px;
}

.main-mine__game-character-3 {
  right: 60px;
  bottom: 51px;
}

.main-mine__game-panel {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 27px;
}

.main-mine__game-score {
  font-family: "Slackey", sans-serif;
  font-weight: 400;
  font-size: 38.42px;
  color: var(--col-1);
  text-shadow: 0 0 10px rgba(121, 158, 251, 0.8), 0 0 20px rgba(121, 158, 251, 0.5);
  display: inline-block;
}

.main-mine__game-progress--wrapper {
  position: relative;
}

.main-mine__game-progress {
  position: relative;
  background-color: #4C4C4C;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  width: 489px;
  height: 27px;
  z-index: 1;
  border-radius: 34.04px;
  border: 1.7px solid rgba(255, 255, 255, 0.1490196078);
  box-shadow: inset 0px 8px 1.9px 0px #716E6E, inset 0px -7px 3.4px 0px rgba(221, 221, 221, 0.78), 0px 10px 29.79px 0px rgba(0, 29, 55, 0.85);
  overflow: hidden;
}

.main-mine__game-progress::after,
.main-mine__game-progress-fill::after {
  content: "";
  position: absolute;
  top: -146px;
  left: -7px;
  z-index: -1;
  background-image: url("/assets/mine//i49.png");
  background-size: cover;
  background-repeat: no-repeat;
  height: 303.83px;
  width: 503.83px;
}

.main-mine__game-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  height: 100%;
  width: 75%;
  max-width: 100%;
  border-radius: 34.04px;
  transition: width 0.3s ease-in-out;
  background-color: #FFCE7E;
  box-shadow: inset 0px 6px 1.9px 0px rgb(255, 237, 208), inset 0px -7px 3.4px 0px rgba(169, 96, 23, 0.78), 0px 10px 29.79px 0px rgba(0, 29, 55, 0.85);
  overflow: hidden;
}

.main-mine__game-progress-fill::after {
  opacity: 50%;
}

.main-mine__game-progress--wrapper::after,
.main-mine__game-progress--wrapper::before {
  content: "";
  position: absolute;
  top: -45px;
  z-index: 0;
  background-size: cover;
  background-repeat: no-repeat;
  height: 118px;
  min-width: 149px;
  max-width: 149px;
  width: 100%;
  transition: width 0.3s ease-in-out;
}

.main-mine__game-progress--wrapper::after {
  left: -99px;
  background-image: url("/assets/mine/arrow-left-loader.svg");
}

.main-mine__game-progress--wrapper::before {
  right: -103px;
  background-image: url("/assets/mine/arrow-right-loader.svg");
}

@media (min-width: 3840px) {
  .main-mine {
    zoom: 1.65;
  }
}
@media (min-width: 2560px) {
  .main-mine {
    zoom: 1.45;
  }
}
@media (min-width: 1920px) {
  .main-mine {
    zoom: 1;
  }
}
@media (min-width: 1440px) {
  .main-mine {
    zoom: 0.85;
  }
}
@media (max-width: 1280px) {
  .main-mine {
    zoom: 0.76;
  }
}
@media (max-width: 1024px) and (min-width: 768px) and (max-height: 1366px) and (min-height: 1024px) {
  .main-mine {
    zoom: 1;
  }
  .main-mine__header {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    justify-content: space-between;
    row-gap: 7px;
  }
  .main-mine__header_title--wrapper {
    display: flex;
    justify-content: center;
    grid-column: -1/1;
    grid-row: 2/3;
  }
  .main-mine__header_back-text {
    display: none;
  }
  .main-mine__game {
    margin-bottom: 100px;
  }
}
@media (max-width: 576px) {
  .mine-body {
    touch-action: none;
    /* отключает свайпы, масштаб и т.д. */
    overscroll-behavior: none;
    /* отключает bounce-эффект */
  }
  .main-mine {
    padding: 20px 20px 44px 20px;
    overflow: hidden;
    zoom: 1;
    height: var(--app-height);
  }
  .main-mine__header {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    justify-content: space-between;
    row-gap: 7px;
  }
  .main-mine__header_title--wrapper {
    display: flex;
    justify-content: center;
    grid-column: -1/1;
    grid-row: 2/3;
  }
  .main-mine__header_back-text {
    display: none;
  }
  .btn-back {
    min-width: 60px;
    max-width: 60px;
    min-height: 60px;
    max-height: 60px;
    border-radius: 16.21px;
    box-shadow: inset 0px 4.76px 0.9px 0px #FFEDDD, inset 0px -5.24px 1.62px 0px rgba(197, 105, 47, 0.78), 0px 4.76px 14.18px 0px rgba(0, 29, 55, 0.85);
  }
  .btn-back svg {
    width: 19px;
    height: 16px;
  }
  .main-mine__header_score-count {
    font-size: 28.53px;
  }
  .main-mine__header_score-icon {
    max-width: 47px;
  }
  .main-mine__header_user-name {
    font-size: 30px;
  }
  .main-mine__game-progress {
    width: 240px;
    height: 13px;
  }
  .main-mine__game-progress--wrapper::after,
  .main-mine__game-progress--wrapper::before {
    height: 58.06px;
    min-width: 73.31px;
    max-width: 73.31px;
  }
  .main-mine__game-progress--wrapper::before {
    right: -53px;
    top: -22px;
  }
  .main-mine__game-progress--wrapper::after {
    left: -48px;
    top: -22px;
  }
  .main-mine__game-score {
    font-size: 19px;
  }
  .main-mine__game-panel {
    gap: 13px;
  }
  .main-mine__game-tap {
    position: absolute;
    max-width: 159px;
    max-height: 159px;
    bottom: 101px;
    left: -5px;
  }
  .main-mine__game-character {
    position: absolute;
    display: none;
    max-width: 406px;
    bottom: 47px;
  }
  .main-mine__game-character-1 {
    right: 0;
  }
  .main-mine__game-character-2 {
    right: -10px;
    bottom: 52px;
  }
  .main-mine__game-character-3 {
    right: 3px;
    bottom: 49px;
  }
  .main-mine__game {
    max-width: 340px;
  }
  .main-mine__header_score {
    gap: 15px;
    margin-left: auto;
  }
}
@media (max-width: 320px) {
  /* .main-mine {
      zoom: 0.9;
  } */
  /* .main-mine__header_score-count {
      font-size: 15px;
  } */
}
.main-mine__game-progress-fill {
  transition: width 0.3s ease;
}

#modal-mine-shop .modal__body {
  border-radius: 34.04px;
  background-color: #FFAA6B;
  color: #12244B;
  box-shadow: inset 0px 10px 1.9px 0px #FFEDDD, inset 0px -11px 3.4px 0px rgba(197, 105, 47, 0.78), 0px 10px 29.79px 0px rgba(0, 29, 55, 0.85);
}

#modal-mine-shop .modal__content {
  background: none;
}

.mine-shop {
  color: #08265a;
}
.mine-shop__head {
  text-align: center;
  margin-bottom: 22px;
}
.mine-shop__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(159, 82, 13, 0.14);
  color: #7a3d08;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 8px;
}
.mine-shop__title-main {
  font-size: 32px;
  font-weight: 800;
  color: #151515;
  line-height: 1.1;
}
.mine-shop__subtitle {
  margin-top: 6px;
  font-size: 15px;
  color: rgba(8, 38, 90, 0.75);
}
.mine-shop__balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 16px 18px;
  margin-bottom: 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.18));
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.mine-shop__label {
  font-size: 14px;
  color: rgba(8, 38, 90, 0.65);
  margin-bottom: 3px;
}
.mine-shop__ore {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  font-size: 30px;
  font-weight: 800;
  color: #08265a;
}
.mine-shop__ore small {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 5px;
  opacity: 0.65;
}
.mine-shop__balance-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.35);
  font-size: 28px;
}
.mine-shop__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.mine-shop__card {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow: 0 10px 24px rgba(111, 54, 9, 0.13);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mine-shop__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(111, 54, 9, 0.2);
}
.mine-shop__card--upgrade {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 226, 159, 0.28));
}
.mine-shop__card--power {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 198, 87, 0.34));
}
.mine-shop__card-icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 17px;
  background: rgba(159, 82, 13, 0.16);
  font-size: 28px;
}
.mine-shop__card-title {
  font-size: 18px;
  font-weight: 800;
  color: #151515;
  margin-bottom: 4px;
}
.mine-shop__card-text {
  font-size: 14px;
  color: rgba(8, 38, 90, 0.78);
  line-height: 1.3;
}
.mine-shop__card-result, .mine-shop__price {
  margin-top: 6px;
  font-size: 13px;
  color: #7a3d08;
  font-weight: 700;
}
.mine-shop__max {
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(9, 153, 51, 0.12);
  color: #093;
  font-weight: 800;
  white-space: nowrap;
}
.mine-shop .button--primary {
  border: 0;
  background: linear-gradient(135deg, #a85b10, #7b3a05);
  color: #fff;
  border-radius: 13px;
  padding: 11px 17px;
  font-weight: 800;
  box-shadow: 0 8px 0 rgba(103, 47, 2, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mine-shop .button--primary:hover {
  transform: translateY(-1px);
}
.mine-shop .button--primary:active {
  transform: translateY(3px);
  box-shadow: 0 4px 0 rgba(103, 47, 2, 0.35);
}

@media (max-width: 600px) {
  .mine-shop__title-main {
    font-size: 25px;
  }
  .mine-shop__card {
    grid-template-columns: 44px 1fr;
  }
  .mine-shop__card-icon {
    width: 44px;
    height: 44px;
    font-size: 23px;
  }
  .mine-shop .button--primary, .mine-shop__max {
    grid-column: 1/-1;
    width: 100%;
    text-align: center;
  }
}
.mine-score-plus {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  opacity: 1;
  font-size: 18px;
  color: #7639bf;
  font-weight: bold;
  pointer-events: none;
  z-index: 10;
}

.mine-shop__card--exchange {
  display: block;
  padding: 26px;
}
.mine-shop__exchange-head {
  display: grid;
  grid-template-columns: 78px 1fr;
  align-items: center;
  gap: 22px;
  margin-bottom: 24px;
}
.mine-shop__exchange-head .mine-shop__card-icon {
  width: 78px;
  height: 78px;
  font-size: 36px;
}
.mine-shop__exchange-head .mine-shop__card-title {
  font-size: 36px;
  margin-bottom: 8px;
}
.mine-shop__exchange-head .mine-shop__card-text {
  font-size: 23px;
}
.mine-shop__exchange-total {
  display: grid;
  grid-template-columns: 1fr 160px 1fr;
  align-items: center;
  padding: 28px 34px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  margin-bottom: 26px;
}
.mine-shop__exchange-total-item {
  text-align: center;
}
.mine-shop__exchange-total-item span {
  display: block;
  font-size: 23px;
  font-weight: 700;
  color: rgba(8, 38, 90, 0.68);
}
.mine-shop__exchange-total-item b {
  display: block;
  margin-top: 8px;
  font-size: 44px;
  line-height: 1;
  font-weight: 900;
  color: #08265a;
}
.mine-shop__exchange-total-item small {
  display: block;
  margin-top: 6px;
  font-size: 27px;
  font-weight: 700;
  color: rgba(8, 38, 90, 0.68);
}
.mine-shop__exchange-equal {
  position: relative;
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border-radius: 50%;
  border: 3px solid #a85b10;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #151515;
  font-size: 34px;
  font-weight: 900;
}
.mine-shop__exchange-equal::before {
  right: 67px;
}
.mine-shop__exchange-equal::after {
  left: 67px;
}
.mine-shop__exchange-control {
  display: grid;
  grid-template-columns: 190px 1fr 1px 280px;
  align-items: center;
  gap: 34px;
  margin-bottom: 28px;
}
.mine-shop__exchange-label {
  font-size: 29px;
  color: rgba(8, 38, 90, 0.68);
}
.mine-shop__exchange-slider-side {
  min-width: 0;
}
.mine-shop__exchange-current {
  text-align: right;
  margin-bottom: 16px;
  font-size: 36px;
  line-height: 1;
  font-weight: 900;
  color: #08265a;
}
.mine-shop__exchange-slider {
  width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  outline: none;
  cursor: pointer;
}
.mine-shop__exchange-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #a85b10;
  border: 6px solid #fff;
  box-shadow: 0 5px 13px rgba(0, 0, 0, 0.22);
  cursor: pointer;
}
.mine-shop__exchange-slider::-moz-range-thumb {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #a85b10;
  border: 6px solid #fff;
  box-shadow: 0 5px 13px rgba(0, 0, 0, 0.22);
  cursor: pointer;
}
.mine-shop__exchange-slider:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.mine-shop__exchange-range {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
}
.mine-shop__exchange-range span {
  font-size: 22px;
  font-weight: 700;
  color: rgba(8, 38, 90, 0.58);
}
.mine-shop__exchange-divider {
  width: 1px;
  height: 150px;
  background: rgba(122, 61, 8, 0.22);
}
.mine-shop__card--exchange .mine-shop__ore-change-btn {
  height: 88px;
  border-radius: 18px;
  font-size: 30px;
}
.mine-shop__exchange-available {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 24px;
  border-top: 1px solid rgba(122, 61, 8, 0.18);
  font-size: 28px;
  color: rgba(8, 38, 90, 0.7);
}
.mine-shop__exchange-available > span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #16b73c;
  box-shadow: inset 0 -3px 4px rgba(0, 0, 0, 0.25);
  margin-right: 18px;
}
.mine-shop__exchange-available b {
  color: inherit;
  font-weight: 800;
}
.mine-shop__exchange-available small {
  font-size: inherit;
}

@media (max-width: 600px) {
  .mine-shop__card--exchange {
    padding: 18px;
  }
  .mine-shop__exchange-head {
    grid-template-columns: 54px 1fr;
    gap: 14px;
  }
  .mine-shop__exchange-head .mine-shop__card-icon {
    width: 54px;
    height: 54px;
    font-size: 28px;
  }
  .mine-shop__exchange-head .mine-shop__card-title {
    font-size: 24px;
  }
  .mine-shop__exchange-head .mine-shop__card-text {
    font-size: 15px;
  }
  .mine-shop__exchange-total {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px;
  }
  .mine-shop__exchange-equal {
    display: none;
  }
  .mine-shop__exchange-control {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .mine-shop__exchange-divider {
    display: none;
  }
  .mine-shop__card--exchange .mine-shop__ore-change-btn {
    height: 56px;
    font-size: 20px;
  }
  .mine-shop__exchange-label, .mine-shop__exchange-available {
    font-size: 17px;
  }
  .mine-shop__exchange-total-item b, .mine-shop__exchange-current {
    font-size: 28px;
  }
  .mine-shop__exchange-total-item small {
    font-size: 18px;
  }
  .mine-shop__exchange-range span {
    font-size: 14px;
  }
}
.mine-shop__card--exchange {
  display: block;
  padding: 18px 20px;
}
.mine-shop__exchange-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.mine-shop__exchange-header .mine-shop__card-icon {
  width: 50px;
  height: 50px;
  min-width: 50px;
  font-size: 25px;
  border-radius: 15px;
}
.mine-shop__exchange-header .mine-shop__card-title {
  font-size: 22px;
  line-height: 1.1;
  margin-bottom: 3px;
}
.mine-shop__exchange-header .mine-shop__card-text {
  font-size: 15px;
  line-height: 1.2;
}
.mine-shop__exchange-summary {
  display: grid;
  grid-template-columns: 1fr 42px 1fr;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  margin-bottom: 14px;
}
.mine-shop__exchange-summary-item {
  text-align: center;
  min-width: 0;
}
.mine-shop__exchange-summary-item span {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: rgba(8, 38, 90, 0.65);
  margin-bottom: 4px;
}
.mine-shop__exchange-summary-item b {
  display: block;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 900;
  color: #08265a;
  white-space: nowrap;
}
.mine-shop__exchange-equal {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #a85b10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  font-weight: 900;
  color: #111;
  margin: 0 auto;
}
.mine-shop__exchange-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  align-items: end;
  gap: 16px;
  margin-bottom: 12px;
}
.mine-shop__exchange-slider-block {
  min-width: 0;
}
.mine-shop__exchange-slider-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.mine-shop__exchange-slider-top span {
  font-size: 16px;
  color: rgba(8, 38, 90, 0.68);
}
.mine-shop__exchange-slider-top b {
  font-size: 20px;
  line-height: 1;
  color: #08265a;
  white-space: nowrap;
}
.mine-shop__exchange-slider {
  width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, #c9741f 0%, #b86414 70%, rgba(255, 255, 255, 0.45) 100%);
  outline: none;
}
.mine-shop__exchange-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #a85b10;
  border: 5px solid #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.mine-shop__exchange-slider::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #a85b10;
  border: 5px solid #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.mine-shop__exchange-range {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
}
.mine-shop__exchange-range span {
  font-size: 13px;
  font-weight: 800;
  color: rgba(8, 38, 90, 0.52);
}
.mine-shop__card--exchange .mine-shop__ore-change-btn {
  width: 100%;
  height: 52px;
  border-radius: 15px;
  font-size: 18px;
}
.mine-shop__exchange-available {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-top: 12px;
  border-top: 1px solid rgba(122, 61, 8, 0.16);
  font-size: 14px;
  line-height: 1.25;
  color: rgba(8, 38, 90, 0.72);
}
.mine-shop__exchange-available > span {
  width: 13px;
  height: 13px;
  min-width: 13px;
  border-radius: 50%;
  background: #16b73c;
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.25);
  margin-right: 4px;
}
.mine-shop__exchange-available b {
  font-weight: 900;
  color: inherit;
}
.mine-shop__exchange-available small {
  font-size: inherit;
  color: inherit;
}

@media (max-width: 600px) {
  .mine-shop__card--exchange {
    padding: 14px;
  }
  .mine-shop__exchange-summary {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .mine-shop__exchange-equal {
    display: none;
  }
  .mine-shop__exchange-bottom {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .mine-shop__card--exchange .mine-shop__ore-change-btn {
    height: 48px;
    font-size: 17px;
  }
}
.auction .card-filter-form__wrapper button:not(.card-filter-form__decks-btn) {
  display: none;
}
.auction__title {
  font-size: 22px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.auction__bid {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
.auction__bid-count {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--purple-btn-bg);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 20px;
}
.auction__bidder {
  display: flex;
  align-items: center;
}
.auction__bidder-avatar {
  width: 50px;
  margin-right: 10px;
}
.auction__bidder-avatar img {
  border-radius: 50%;
}
.auction__bidder-name {
  font-weight: 500;
  font-size: 20px;
}
.auction__vote-category {
  display: flex;
  margin-bottom: 30px;
}
.auction__vote-category-item {
  cursor: pointer;
  background: var(--grey-background);
  margin-right: 10px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 31px;
  width: 31px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  background: linear-gradient(45deg, #286595, #1c2935, #365b9d);
}
.auction__vote-category-item[data-rank=X] {
  background: linear-gradient(45deg, #286595, #1c2935, #365b9d);
}
.auction__vote-category-item[data-rank=S] {
  background: linear-gradient(45deg, #dc115a, #FF7EBE, #f0b6d2);
}
.auction__vote-category-item[data-rank=A] {
  background: linear-gradient(-120deg, #D62121, #C72C2C, #3a1111);
}
.auction__vote-category-item[data-rank=P] {
  background: linear-gradient(-120deg, #1b3dcc, #2c81c7, #131a34);
}
.auction__vote-category-item[data-rank=G] {
  background: linear-gradient(-120deg, #209609, #30771c, #172a11);
}
.auction__vote-category-item[data-rank=B] {
  background: linear-gradient(-120deg, #680a83, #4e0f79, #1d112a);
}
.auction__vote-category-item[data-rank=C] {
  background: linear-gradient(-120deg, #c4a616, #7e661c, #422f0e);
}
.auction__vote-category-item[data-rank=D] {
  background: linear-gradient(-120deg, #aba08e, #858379, #2f2d2d);
}
.auction__vote-category-item[data-rank=E] {
  background: linear-gradient(-120deg, #443004, #342c0e, #2f2718);
}
.auction__vote-category-item[data-rank=H] {
  background: linear-gradient(-120deg, #1d1d1b, #961111, #0e0e0d);
}
.auction__vote-category-item[data-rank=N] {
  background: linear-gradient(-120deg, #fd0702, #b62525, #307a14);
}
.auction__vote-category-item[data-rank=V] {
  background: linear-gradient(-120deg, #8b6ef2, #8b6ef1, #958bf2);
}
.auction__vote-card {
  display: flex;
  margin-bottom: 30px;
  overflow-x: auto;
}
.auction__vote-card-item {
  cursor: pointer;
  width: 70px;
  margin-right: 5px;
  flex-shrink: 0;
}
.auction__question {
  color: white;
  z-index: 9;
  border-radius: 50%;
  background: var(--purple-btn-bg);
  width: 20px;
  height: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.card-show__placeholder--auction {
  position: relative;
  max-width: 220px;
  display: block;
  margin: 0 auto;
}
.card-show__placeholder--auction[data-level="1"]::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  width: 20px;
  height: 20px;
  background-image: url("/assets/cards/numbers/1.png");
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 10;
}
.card-show__placeholder--auction[data-level="2"]::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  width: 20px;
  height: 20px;
  background-image: url("/assets/cards/numbers/2.png");
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 10;
}
.card-show__placeholder--auction[data-level="3"]::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  width: 20px;
  height: 20px;
  background-image: url("/assets/cards/numbers/3.png");
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 10;
}
.card-show__placeholder--auction[data-level="4"]::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  width: 20px;
  height: 20px;
  background-image: url("/assets/cards/numbers/4.png");
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 10;
}
.card-show__placeholder--auction[data-level="5"]::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  width: 20px;
  height: 20px;
  background-image: url("/assets/cards/numbers/5.png");
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 10;
}
.card-show__placeholder--auction[data-level="6"]::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  width: 20px;
  height: 20px;
  background-image: url("/assets/cards/numbers/6.png");
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 10;
}
.card-show__placeholder--auction[data-level="7"]::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  width: 20px;
  height: 20px;
  background-image: url("/assets/cards/numbers/7.png");
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 10;
}
.card-show__placeholder--auction[data-level="8"]::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  width: 20px;
  height: 20px;
  background-image: url("/assets/cards/numbers/8.png");
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 10;
}
.card-show__placeholder--auction[data-level="9"]::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  width: 20px;
  height: 20px;
  background-image: url("/assets/cards/numbers/9.png");
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 10;
}
.card-show__placeholder--auction[data-level="10"]::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  width: 20px;
  height: 20px;
  background-image: url("/assets/cards/numbers/10.png");
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 10;
}
.card-show__placeholder--auction[data-level="11"]::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  width: 20px;
  height: 20px;
  background-image: url("/assets/cards/numbers/11.png");
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 10;
}
.card-show__placeholder--auction[data-level="12"]::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  width: 20px;
  height: 20px;
  background-image: url("/assets/cards/numbers/12.png");
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 10;
}
.card-show__placeholder--auction[data-level="13"]::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  width: 20px;
  height: 20px;
  background-image: url("/assets/cards/numbers/13.png");
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 10;
}
.card-show__placeholder--auction[data-level="14"]::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  width: 20px;
  height: 20px;
  background-image: url("/assets/cards/numbers/14.png");
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 10;
}
.card-show__placeholder--auction[data-level="15"]::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  width: 20px;
  height: 20px;
  background-image: url("/assets/cards/numbers/15.png");
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 10;
}

.card-battle-page {
  height: 100dvh;
  overflow: hidden;
}
.card-battle-page .header,
.card-battle-page .footer {
  display: none;
}

.battle-screen {
  width: 100%;
  height: 100dvh;
  padding: 10px 14px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  overflow: hidden;
  color: #fff;
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at top, rgba(124, 76, 255, 0.22), transparent 32%), radial-gradient(circle at bottom, rgba(53, 165, 255, 0.12), transparent 35%), linear-gradient(180deg, #10091f 0%, #101524 54%, #070b14 100%);
}
.battle-screen * {
  box-sizing: border-box;
}
.battle-screen__top {
  width: min(100%, 1320px);
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
}
.battle-screen__label {
  color: rgba(255, 255, 255, 0.48);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
}
.battle-screen__title {
  margin-top: 2px;
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}
.battle-screen__turn {
  padding: 7px 12px;
  border-radius: 999px;
  color: #c5ffdc;
  font-size: 12px;
  font-weight: 900;
  background: rgba(90, 255, 166, 0.13);
  border: 1px solid rgba(90, 255, 166, 0.28);
  white-space: nowrap;
}

.battle-arena {
  width: min(100%, 1180px);
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto minmax(112px, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.battle-side {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 10px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: visible;
}
.battle-side--enemy {
  box-shadow: inset 0 0 32px rgba(255, 77, 112, 0.06);
}
.battle-side--player {
  box-shadow: inset 0 0 32px rgba(92, 255, 164, 0.06);
}
.battle-side__head {
  min-height: 34px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.battle-side__title {
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}
.battle-side__count {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.1);
}
.battle-side__cards {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 148px);
  gap: 10px;
  overflow: visible;
}

.battle-player {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  color: inherit;
  text-decoration: none;
}
.battle-player__row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.battle-player__rank {
  flex: 0 0 auto;
  margin-top: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #ffe78a;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  background: rgba(255, 215, 100, 0.12);
  border: 1px solid rgba(255, 215, 100, 0.24);
  white-space: nowrap;
}
.battle-player__avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.battle-player__info {
  min-width: 0;
  display: grid;
}
.battle-player__label {
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}
.battle-player__name {
  max-width: 150px;
  margin-top: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.battle-card {
  position: relative;
  min-width: 0;
  border-radius: 13px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(7, 10, 22, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transform-origin: center center;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
}
.battle-card--enemy {
  border-color: rgba(255, 77, 112, 0.24);
}
.battle-card--player {
  border-color: rgba(92, 255, 164, 0.24);
}
.battle-card--fx-heal-active {
  z-index: 45;
  border-color: #51f99b !important; /* Делаем рамку ярко-зеленой */
  box-shadow: 0 0 25px rgba(81, 249, 155, 0.75), inset 0 0 15px rgba(81, 249, 155, 0.5) !important;
  transition: border-color 0.1s ease, box-shadow 0.1s ease;
  /* Делаем ауру вокруг карты насыщенной */
}
.battle-card--fx-heal-active::before {
  content: "";
  position: absolute;
  inset: -12px;
  z-index: 8;
  pointer-events: none;
  border-radius: 20px;
  background: radial-gradient(circle at 50% 50%, rgba(81, 249, 155, 0.6), transparent 70%);
  filter: blur(2px);
  animation: battle-card-heal-aura 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.battle-card__image {
  position: relative;
  width: 100%;
  aspect-ratio: 74/109;
  background-size: cover;
  background-position: center;
}
.battle-card__name {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 18px;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  line-height: 0.95;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.battle-card__type {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 7px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 8px;
  font-weight: 800;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}
.battle-card__body {
  padding: 6px;
}
.battle-card__seal {
  margin-bottom: 5px;
  padding: 5px 6px;
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.battle-card__hp {
  position: relative;
  height: 15px;
  margin-bottom: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.battle-card__hp-value {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 9px;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 5px rgba(0, 0, 0, 0.75);
  pointer-events: none;
}
.battle-card__hp span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #51f99b 0%, #ffe568 55%, #ff4f73 100%);
  transition: width 0.28s ease;
}
.battle-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.battle-card__stats span {
  min-width: 0;
  padding: 5px 4px;
  border-radius: 8px;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  background: rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}
.battle-card--attack {
  z-index: 40;
  animation: battle-card-attack 0.46s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}
.battle-card--attack-crit {
  z-index: 50;
  animation: battle-card-attack-crit 0.56s cubic-bezier(0.18, 0.92, 0.18, 1) both;
}
.battle-card--hit {
  animation: battle-card-hit 0.28s ease-out both;
}
.battle-card--hit-crit {
  animation: battle-card-hit-crit 0.34s ease-out both;
}
.battle-card--dead {
  filter: grayscale(1);
  opacity: 0.58;
  transform: rotate(-2deg) translateY(6px);
  pointer-events: none;
}
.battle-card--dead .battle-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(5, 7, 14, 0.52);
}
.battle-card--dead .battle-card__body {
  opacity: 0.65;
}
.battle-card--dead .battle-card__hp span {
  width: 0 !important;
  background: #5f6473;
}
.battle-card--dead::after {
  content: "Повержена";
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 5;
  transform: translate(-50%, -50%) rotate(-8deg);
  padding: 7px 12px;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  background: rgba(18, 20, 30, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.18);
  white-space: nowrap;
}
.battle-card--fx-heal, .battle-card--fx-revive, .battle-card--fx-immortal {
  overflow: visible;
  z-index: 20;
}
.battle-card--fx-heal::before {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: 8;
  pointer-events: none;
  border-radius: 20px;
  background: radial-gradient(circle at 50% 42%, rgba(96, 255, 164, 0.42), transparent 56%), radial-gradient(circle at 50% 80%, rgba(96, 255, 164, 0.24), transparent 48%);
  filter: blur(1px);
  animation: battle-card-heal-aura 0.72s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.battle-card--fx-revive::before {
  content: "";
  position: absolute;
  inset: -12px;
  z-index: 8;
  pointer-events: none;
  border-radius: 22px;
  background: radial-gradient(circle at 50% 50%, rgba(126, 224, 255, 0.56), transparent 48%), conic-gradient(from 180deg, transparent, rgba(126, 224, 255, 0.36), transparent, rgba(177, 151, 255, 0.32), transparent);
  filter: blur(0.5px);
  animation: battle-card-revive-aura 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.battle-card--fx-immortal::before {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: 8;
  pointer-events: none;
  border-radius: 24px;
  background: radial-gradient(circle at 50% 50%, rgba(255, 236, 140, 0.56), transparent 44%), conic-gradient(from 90deg, transparent, rgba(255, 226, 95, 0.62), transparent, rgba(255, 92, 112, 0.42), transparent);
  filter: blur(0.5px);
  animation: battle-card-immortal-aura 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.battle-card--fx-immortal::after {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: 9;
  pointer-events: none;
  border-radius: 18px;
  border: 2px solid rgba(255, 230, 110, 0.78);
  box-shadow: 0 0 18px rgba(255, 230, 110, 0.8), 0 0 42px rgba(255, 113, 78, 0.42);
  animation: battle-card-immortal-ring 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.battle-control {
  width: min(100%, 860px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 240px 220px 240px;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.battle-control__center {
  padding: 14px;
  border-radius: 18px;
  text-align: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.battle-control__round {
  margin-bottom: 6px;
  color: #b197ff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}
.battle-control__text {
  min-height: 32px;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
}
.battle-control__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.battle-control__button {
  border: 0;
  cursor: pointer;
  padding: 8px 9px;
  border-radius: 11px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}
.battle-control__button--speed {
  background: linear-gradient(135deg, #744cff, #b54cff);
}
.battle-control__button--skip {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.battle-buff {
  min-width: 0;
  cursor: pointer;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 25px;
  align-items: center;
  gap: 8px;
  padding: 9px;
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.battle-buff--enemy {
  border-color: rgba(255, 91, 124, 0.26);
}
.battle-buff--player {
  border-color: rgba(95, 255, 169, 0.26);
}
.battle-buff__icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.09);
}
.battle-buff__text {
  min-width: 0;
}
.battle-buff__text span {
  display: block;
  margin-bottom: 3px;
  color: rgba(255, 255, 255, 0.46);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.battle-buff__text b {
  display: block;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.battle-buff__help {
  width: 25px;
  height: 25px;
  border: 0;
  cursor: pointer;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.12);
}

.battle-damage {
  position: absolute;
  left: 50%;
  top: 38%;
  z-index: 80;
  transform: translate3d(-50%, -50%, 0);
  pointer-events: none;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.72), 0 0 10px rgba(255, 70, 100, 0.45);
  will-change: transform, opacity;
  animation: battle-damage-fly 0.58s ease-out forwards;
}
.battle-damage b {
  display: block;
  color: #ff5f7f;
  font-size: 22px;
}
.battle-damage--crit {
  color: #ffe76b;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.8), 0 0 12px rgba(255, 220, 70, 0.75);
  animation: battle-damage-crit-fly 0.64s ease-out forwards;
}
.battle-damage--crit b {
  margin-top: 3px;
  color: #ff416c;
  font-size: 28px;
}

.battle-floating-text {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 90;
  transform: translate3d(-50%, -50%, 0);
  pointer-events: none;
  padding: 6px 12px;
  border-radius: 999px;
  color: #fff;
  font-size: 18px;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  background: rgba(7, 10, 22, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  will-change: transform, opacity, filter;
  animation: battle-floating-text-fly 0.76s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.battle-floating-text--heal {
  color: #baffc9 !important; /* Сочный светлый неон */
  font-size: 24px !important; /* Увеличенный размер цифры */
  font-weight: 1000;
  border-color: rgba(81, 249, 155, 0.6) !important;
  background: rgba(7, 22, 14, 0.85) !important; /* Тёмно-зеленый полупрозрачный фон */
  box-shadow: 0 0 20px rgba(81, 249, 155, 0.6), inset 0 0 12px rgba(81, 249, 155, 0.3) !important;
  text-shadow: 0 0 8px #51f99b, 0 2px 3px rgba(0, 0, 0, 0.85) !important;
  /* Быстрая анимация вылета (0.48с вместо старой затяжной) */
  animation: battle-floating-text-fly 0.48s cubic-bezier(0.11, 0.87, 0.33, 1) forwards;
}
.battle-floating-text--revive {
  color: #8de7ff;
  font-size: 15px;
  letter-spacing: 0.14em;
  border-color: rgba(141, 231, 255, 0.48);
  box-shadow: 0 0 18px rgba(141, 231, 255, 0.5), 0 0 42px rgba(127, 117, 255, 0.22), inset 0 0 18px rgba(141, 231, 255, 0.12);
  text-shadow: 0 0 12px rgba(141, 231, 255, 0.95), 0 2px 0 rgba(0, 0, 0, 0.7);
}
.battle-floating-text--immortal {
  color: #ffe76f;
  font-size: 14px;
  letter-spacing: 0.12em;
  border-color: rgba(255, 231, 111, 0.58);
  background: linear-gradient(135deg, rgba(32, 22, 7, 0.88), rgba(80, 30, 18, 0.72));
  box-shadow: 0 0 16px rgba(255, 231, 111, 0.72), 0 0 46px rgba(255, 102, 70, 0.34), inset 0 0 18px rgba(255, 231, 111, 0.16);
  text-shadow: 0 0 10px rgb(255, 231, 111), 0 0 28px rgba(255, 128, 68, 0.8), 0 2px 0 rgba(0, 0, 0, 0.7);
}

@keyframes battle-card-attack {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  35% {
    transform: translate3d(calc(var(--attack-x) * 1.04), calc(var(--attack-y) * 1.04), 0) scale(1.08);
  }
  48% {
    transform: translate3d(calc(var(--attack-x) * 0.88), calc(var(--attack-y) * 0.88), 0) scale(0.98);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes battle-card-attack-crit {
  0% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0);
  }
  28% {
    transform: translate3d(calc(var(--attack-x) * 1.08), calc(var(--attack-y) * 1.08), 0) scale(1.14) rotate(2deg);
  }
  43% {
    transform: translate3d(calc(var(--attack-x) * 0.86), calc(var(--attack-y) * 0.86), 0) scale(0.96) rotate(-2deg);
  }
  58% {
    transform: translate3d(calc(var(--attack-x) * 0.95), calc(var(--attack-y) * 0.95), 0) scale(1.06) rotate(1deg);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0);
  }
}
@keyframes battle-card-hit {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  25% {
    transform: translate3d(-7px, 0, 0);
  }
  50% {
    transform: translate3d(7px, 0, 0);
  }
  75% {
    transform: translate3d(-3px, 0, 0);
  }
}
@keyframes battle-card-hit-crit {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  20% {
    transform: translate3d(-11px, 0, 0) scale(1.02);
  }
  40% {
    transform: translate3d(11px, 0, 0) scale(1.02);
  }
  60% {
    transform: translate3d(-6px, 0, 0);
  }
  80% {
    transform: translate3d(4px, 0, 0);
  }
}
@keyframes battle-damage-fly {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -30%, 0) scale(0.8);
  }
  18% {
    opacity: 1;
    transform: translate3d(-50%, -60%, 0) scale(1.08);
  }
  100% {
    opacity: 0;
    transform: translate3d(-50%, -105%, 0) scale(0.95);
  }
}
@keyframes battle-damage-crit-fly {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -25%, 0) scale(0.8);
  }
  18% {
    opacity: 1;
    transform: translate3d(-50%, -62%, 0) scale(1.18);
  }
  100% {
    opacity: 0;
    transform: translate3d(-50%, -120%, 0) scale(1);
  }
}
@keyframes battle-floating-text-fly {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 12px, 0) scale(0.68);
    filter: none;
  }
  16% {
    opacity: 1;
    transform: translate3d(-50%, -18px, 0) scale(1.08);
    filter: none;
  }
  70% {
    opacity: 1;
    transform: translate3d(-50%, -52px, 0) scale(1);
    filter: none;
  }
  100% {
    opacity: 0;
    transform: translate3d(-50%, -88px, 0) scale(0.95);
    filter: none;
  }
}
@keyframes battle-card-heal-aura {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  20% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 0;
    transform: scale(1.28);
  }
}
@keyframes battle-card-revive-aura {
  0% {
    opacity: 0;
    transform: scale(0.72) rotate(0deg);
  }
  22% {
    opacity: 1;
    transform: scale(1.04) rotate(90deg);
  }
  100% {
    opacity: 0;
    transform: scale(1.42) rotate(220deg);
  }
}
@keyframes battle-card-immortal-aura {
  0% {
    opacity: 0;
    transform: scale(0.72) rotate(0deg);
  }
  18% {
    opacity: 1;
    transform: scale(1.08) rotate(90deg);
  }
  100% {
    opacity: 0;
    transform: scale(1.5) rotate(260deg);
  }
}
@keyframes battle-card-immortal-ring {
  0% {
    opacity: 0;
    transform: scale(0.72);
  }
  20% {
    opacity: 1;
    transform: scale(1.04);
  }
  100% {
    opacity: 0;
    transform: scale(1.34);
  }
}
@media (max-width: 768px) {
  .battle-screen {
    padding: 6px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .battle-screen__top {
    margin-bottom: 4px;
  }
  .battle-screen__title {
    font-size: 15px;
  }
  .battle-screen__label {
    font-size: 9px;
  }
  .battle-screen__turn {
    padding: 5px 8px;
    font-size: 10px;
  }
  .battle-arena {
    width: 100%;
    grid-template-rows: auto minmax(82px, 1fr) auto;
    gap: 5px;
  }
  .battle-side {
    max-width: none;
    padding: 6px;
    border-radius: 12px;
  }
  .battle-side__head {
    min-height: 26px;
    margin-bottom: 4px;
  }
  .battle-side__title {
    font-size: 11px;
  }
  .battle-side__count {
    padding: 3px 6px;
    font-size: 9px;
  }
  .battle-side__cards {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }
  .battle-player {
    gap: 6px;
  }
  .battle-player__avatar {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
  }
  .battle-player__label {
    font-size: 8px;
  }
  .battle-player__name {
    max-width: 105px;
    margin-top: 2px;
    padding: 3px 7px;
    font-size: 9px;
  }
  .battle-card {
    border-radius: 9px;
  }
  .battle-card__body {
    padding: 4px;
  }
  .battle-card__name {
    left: 5px;
    right: 5px;
    bottom: 14px;
    font-size: 10px;
  }
  .battle-card__type {
    left: 5px;
    right: 5px;
    bottom: 5px;
    font-size: 6px;
  }
  .battle-card__seal {
    margin-bottom: 3px;
    padding: 3px;
    font-size: 7px;
  }
  .battle-card__hp {
    height: 13px;
    margin-bottom: 4px;
  }
  .battle-card__hp-value {
    font-size: 7px;
  }
  .battle-card__stats {
    gap: 3px;
  }
  .battle-card__stats span {
    padding: 3px 1px;
    border-radius: 5px;
    font-size: 7px;
  }
  .battle-card--dead {
    transform: rotate(-2deg) translateY(3px);
  }
  .battle-card--dead::after {
    top: 42%;
    padding: 4px 7px;
    font-size: 7px;
  }
  .battle-floating-text {
    padding: 5px 8px;
    font-size: 12px;
  }
  .battle-floating-text--heal {
    font-size: 15px;
  }
  .battle-floating-text--revive, .battle-floating-text--immortal {
    font-size: 9px;
    letter-spacing: 0.08em;
  }
  .battle-control {
    width: 100%;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "enemy player" "center center";
    gap: 5px;
  }
  .battle-control__center {
    grid-area: center;
    padding: 7px;
    border-radius: 12px;
  }
  .battle-control__round {
    margin-bottom: 3px;
    font-size: 9px;
  }
  .battle-control__text {
    display: none;
  }
  .battle-control__buttons {
    gap: 5px;
  }
  .battle-control__button {
    padding: 7px 6px;
    border-radius: 9px;
    font-size: 9px;
  }
  .battle-buff {
    grid-template-columns: 22px minmax(0, 1fr) 20px;
    gap: 5px;
    padding: 6px;
    border-radius: 10px;
  }
  .battle-buff--enemy {
    grid-area: enemy;
  }
  .battle-buff--player {
    grid-area: player;
  }
  .battle-buff__icon {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    font-size: 11px;
  }
  .battle-buff__text span {
    display: none;
  }
  .battle-buff__text b {
    font-size: 9px;
  }
  .battle-buff__help {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }
  .battle-damage {
    font-size: 10px;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.7), 0 0 8px rgba(255, 70, 100, 0.42);
  }
  .battle-damage b {
    font-size: 15px;
  }
  .battle-damage--crit {
    font-size: 8px;
  }
  .battle-damage--crit b {
    font-size: 18px;
  }
  @keyframes battle-card-hit {
    0%, 100% {
      transform: translate3d(0, 0, 0);
    }
    25% {
      transform: translate3d(-5px, 0, 0);
    }
    50% {
      transform: translate3d(5px, 0, 0);
    }
    75% {
      transform: translate3d(-2px, 0, 0);
    }
  }
  @keyframes battle-card-hit-crit {
    0%, 100% {
      transform: translate3d(0, 0, 0);
    }
    25% {
      transform: translate3d(-8px, 0, 0);
    }
    50% {
      transform: translate3d(8px, 0, 0);
    }
    75% {
      transform: translate3d(-4px, 0, 0);
    }
  }
}
@media (max-width: 390px) {
  .battle-screen {
    padding: 5px;
    padding-bottom: max(7px, env(safe-area-inset-bottom));
  }
  .battle-arena {
    gap: 4px;
  }
  .battle-side {
    padding: 5px;
  }
  .battle-side__cards {
    gap: 3px;
  }
  .battle-card__name {
    font-size: 9px;
  }
  .battle-card__seal {
    font-size: 6px;
  }
  .battle-card__stats span {
    font-size: 6px;
  }
  .battle-buff__text b {
    font-size: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .battle-card,
  .battle-damage,
  .battle-floating-text {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
.battle-center-effect {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: battle-center-effect-wrap 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.battle-center-effect::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(520px, 86vw);
  height: min(520px, 86vw);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.85;
  filter: blur(2px);
  animation: battle-center-effect-aura 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.battle-center-effect span {
  position: relative;
  z-index: 2;
  padding: 16px 28px;
  border-radius: 999px;
  color: #fff;
  font-size: clamp(22px, 5vw, 56px);
  font-weight: 1000;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  background: rgba(7, 10, 22, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  transform: translateZ(0);
  animation: battle-center-effect-text 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.battle-center-effect--revive::before {
  background: radial-gradient(circle, rgba(126, 224, 255, 0.5) 0%, rgba(126, 224, 255, 0.18) 34%, transparent 68%), conic-gradient(from 180deg, transparent, rgba(126, 224, 255, 0.42), transparent, rgba(177, 151, 255, 0.36), transparent);
}
.battle-center-effect--revive span {
  color: #8de7ff;
  border-color: rgba(141, 231, 255, 0.58);
  box-shadow: 0 0 24px rgba(141, 231, 255, 0.55), 0 0 72px rgba(127, 117, 255, 0.34), inset 0 0 22px rgba(141, 231, 255, 0.16);
  text-shadow: 0 0 12px rgb(141, 231, 255), 0 0 34px rgba(127, 117, 255, 0.8), 0 3px 0 rgba(0, 0, 0, 0.75);
}
.battle-center-effect--immortal::before {
  background: radial-gradient(circle, rgba(255, 236, 140, 0.56) 0%, rgba(255, 170, 70, 0.24) 34%, transparent 70%), conic-gradient(from 90deg, transparent, rgba(255, 226, 95, 0.68), transparent, rgba(255, 92, 112, 0.48), transparent);
}
.battle-center-effect--immortal span {
  color: #ffe76f;
  border-color: rgba(255, 231, 111, 0.68);
  background: linear-gradient(135deg, rgba(32, 22, 7, 0.88), rgba(80, 30, 18, 0.76));
  box-shadow: 0 0 22px rgba(255, 231, 111, 0.82), 0 0 78px rgba(255, 102, 70, 0.38), inset 0 0 22px rgba(255, 231, 111, 0.18);
  text-shadow: 0 0 12px rgb(255, 231, 111), 0 0 34px rgba(255, 128, 68, 0.9), 0 3px 0 rgba(0, 0, 0, 0.75);
}

@keyframes battle-center-effect-wrap {
  0% {
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  78% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes battle-center-effect-text {
  0% {
    opacity: 0;
    transform: translate3d(0, 32px, 0) scale(0.72);
    filter: blur(10px);
  }
  16% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.08);
    filter: blur(0);
  }
  68% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -24px, 0) scale(0.92);
    filter: blur(5px);
  }
}
@keyframes battle-center-effect-aura {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.45) rotate(0deg);
  }
  18% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(0.82) rotate(90deg);
  }
  72% {
    opacity: 0.76;
    transform: translate(-50%, -50%) scale(1.04) rotate(210deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.22) rotate(300deg);
  }
}
@media (max-width: 768px) {
  .battle-center-effect span {
    max-width: 92vw;
    padding: 12px 18px;
    font-size: clamp(18px, 7vw, 34px);
    letter-spacing: 0.1em;
    white-space: normal;
  }
}
.battle-info-popup {
  position: fixed;
  z-index: 10030;
  padding: 12px;
  border-radius: 18px;
  color: #fff;
  background: radial-gradient(circle at top left, rgba(124, 76, 255, 0.26), transparent 42%), linear-gradient(180deg, rgba(22, 20, 38, 0.96), rgba(8, 10, 20, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  opacity: 0;
  transform: translate3d(0, 8px, 0) scale(0.96);
  pointer-events: auto;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.battle-info-popup--show {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
.battle-info-popup--buff {
  border-color: rgba(177, 151, 255, 0.28);
}
.battle-info-popup--card {
  border-color: rgba(95, 255, 169, 0.2);
}
.battle-info-popup__close {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.72);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  background: rgba(255, 255, 255, 0.08);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.battle-info-popup__close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  transform: rotate(90deg);
}
.battle-info-popup__head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding-right: 28px;
  margin-bottom: 11px;
}
.battle-info-popup__icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  font-size: 18px;
  background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.24), transparent 38%), linear-gradient(135deg, rgba(116, 76, 255, 0.34), rgba(255, 77, 112, 0.2));
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.battle-info-popup__titles {
  min-width: 0;
}
.battle-info-popup__subtitle {
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.battle-info-popup__title {
  color: #fff;
  font-size: 15px;
  font-weight: 1000;
  line-height: 1.1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.battle-info-popup__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}
.battle-info-popup__stat {
  min-width: 0;
  padding: 8px 7px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.battle-info-popup__stat span {
  display: block;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.46);
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.battle-info-popup__stat b {
  display: block;
  color: #fff;
  font-size: 12px;
  font-weight: 1000;
  line-height: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.battle-info-popup__description {
  padding: 10px;
  border-radius: 13px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.38;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 768px) {
  .battle-info-popup {
    width: calc(100vw - 18px) !important;
    left: 9px !important;
    max-width: none;
    padding: 11px;
    border-radius: 16px;
  }
  .battle-info-popup__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .battle-info-popup__title {
    font-size: 14px;
  }
  .battle-info-popup__description {
    font-size: 11px;
  }
}
.battle-log-modal {
  position: fixed;
  inset: 0;
  z-index: 10040;
}
.battle-log-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(3, 5, 12, 0.72);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.battle-log-modal__box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, 100vw - 24px);
  max-height: min(680px, 100dvh - 36px);
  padding: 16px;
  border-radius: 22px;
  color: #fff;
  background: radial-gradient(circle at top, rgba(116, 76, 255, 0.22), transparent 36%), rgba(12, 15, 28, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  animation: battle-log-modal-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.battle-log-modal__close {
  position: absolute;
  right: 12px;
  top: 10px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
}
.battle-log-modal__title {
  margin-bottom: 12px;
  font-size: 22px;
  font-weight: 1000;
  line-height: 1;
}
.battle-log-modal__list {
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: 7px;
  padding-right: 4px;
}
.battle-log-modal__row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  padding: 9px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.battle-log-modal__row span {
  color: #b197ff;
  font-size: 11px;
  font-weight: 1000;
}
.battle-log-modal__row p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}
.battle-log-modal__empty {
  padding: 18px;
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  background: rgba(255, 255, 255, 0.06);
}
.battle-log-modal__finish {
  margin-top: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  font-size: 13px;
  font-weight: 1000;
  cursor: pointer;
  background: linear-gradient(135deg, #744cff, #b54cff);
}

@keyframes battle-finish-panel-in {
  from {
    opacity: 0;
    transform: translate(-50%, 18px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}
@keyframes battle-log-modal-in {
  from {
    opacity: 0;
    transform: translate(-50%, -46%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
.battle-finish-panel {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 9999;
  width: min(430px, 100vw - 24px);
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  transform: translate(-50%, -50%);
  padding: 20px;
  border-radius: 22px;
  background: radial-gradient(circle at top, rgba(124, 76, 255, 0.16), transparent 42%), rgba(12, 15, 29, 0.96);
  border: 1px solid rgba(122, 255, 191, 0.22);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), 0 0 40px rgba(124, 76, 255, 0.12);
  text-align: center;
  animation: battle-finish-panel-in 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.battle-finish-panel--win {
  border-color: rgba(92, 255, 164, 0.3);
}
.battle-finish-panel--lose {
  border-color: rgba(255, 91, 124, 0.3);
}
.battle-finish-panel__label {
  color: rgba(255, 255, 255, 0.42);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.battle-finish-panel__title {
  margin-top: 10px;
  color: #fff;
  font-size: 30px;
  font-weight: 1000;
  line-height: 0.95;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.battle-finish-panel__rewards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
  text-align: left;
}
.battle-finish-panel__rewards div {
  padding: 10px 11px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.battle-finish-panel__rewards div:first-child {
  grid-column: 1/-1;
  text-align: center;
  background: linear-gradient(135deg, rgba(124, 76, 255, 0.24), rgba(92, 255, 164, 0.1));
}
.battle-finish-panel__rewards span {
  display: block;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}
.battle-finish-panel__rewards b {
  display: block;
  color: #fff;
  font-size: 18px;
  font-weight: 1000;
  line-height: 1.1;
}
.battle-finish-panel__rewards small {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}
.battle-finish-panel__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-top: 18px;
  padding: 0 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #744cff, #b54cff);
  color: #fff;
  font-size: 14px;
  font-weight: 1000;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(116, 76, 255, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.battle-finish-panel__link:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(116, 76, 255, 0.38);
}

@keyframes battle-finish-panel-in {
  from {
    opacity: 0;
    transform: translate(-50%, -46%) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
@media (max-width: 560px) {
  .battle-finish-panel {
    width: calc(100vw - 18px);
    padding: 16px;
    border-radius: 18px;
  }
  .battle-finish-panel__title {
    font-size: 24px;
  }
  .battle-finish-panel__rewards {
    grid-template-columns: 1fr;
  }
  .battle-finish-panel__rewards b {
    font-size: 16px;
  }
  .battle-finish-panel__link {
    width: 100%;
  }
}
.battle-finish-panel__buff {
  grid-column: 1/-1;
  background: linear-gradient(135deg, rgba(255, 214, 102, 0.18), rgba(124, 76, 255, 0.16)) !important;
  border-color: rgba(255, 214, 102, 0.24) !important;
}

.battle-card--fx-dodge {
  z-index: 60;
  animation: battle-card-dodge-slide 0.52s cubic-bezier(0.16, 1, 0.3, 1) both;
  box-shadow: 0 0 22px rgba(74, 255, 194, 0.48), 0 0 46px rgba(116, 76, 255, 0.2);
}
.battle-card--fx-dodge::before {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: 8;
  pointer-events: none;
  border-radius: 20px;
  background: radial-gradient(circle at 50% 50%, rgba(160, 210, 255, 0.34), transparent 58%), linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.34), transparent 48%);
  animation: battle-card-dodge-ghost 0.52s ease-out forwards;
}

@keyframes battle-card-dodge-slide {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  28% {
    transform: translateX(-14px) rotate(-4deg) scale(1.03);
  }
  58% {
    transform: translateX(12px) rotate(3deg) scale(1.02);
  }
  100% {
    transform: translateX(0) rotate(0deg) scale(1);
  }
}
.battle-floating-text--dodge {
  color: #9fffe0 !important;
  font-size: 21px !important;
  font-weight: 1000;
  letter-spacing: 0.12em;
  background: radial-gradient(circle at top, rgba(159, 255, 224, 0.28), transparent 60%), rgba(7, 22, 18, 0.88) !important;
  border-color: rgba(159, 255, 224, 0.65) !important;
  box-shadow: 0 0 18px rgba(74, 255, 194, 0.55), 0 0 42px rgba(116, 76, 255, 0.22), inset 0 0 14px rgba(159, 255, 224, 0.16);
  text-shadow: 0 0 10px rgba(159, 255, 224, 0.95), 0 2px 3px rgba(0, 0, 0, 0.85);
  animation: battle-dodge-text-fly 0.82s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes battle-card-dodge {
  0% {
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
  }
  28% {
    transform: translate3d(18px, -6px, 0) rotate(3deg) scale(0.98);
  }
  52% {
    transform: translate3d(-8px, 3px, 0) rotate(-2deg) scale(1.02);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
  }
}
@keyframes battle-card-dodge-ghost {
  0% {
    opacity: 0;
    transform: translate3d(-12px, 0, 0) scale(0.96);
  }
  28% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate3d(22px, -4px, 0) scale(1.05);
  }
}
@keyframes battle-dodge-text-fly {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(0.65) rotate(-8deg);
    filter: blur(5px);
  }
  35% {
    opacity: 1;
    transform: translate3d(-50%, -78%, 0) scale(1.12) rotate(3deg);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translate3d(-50%, -125%, 0) scale(0.92) rotate(-2deg);
    filter: blur(2px);
  }
}
@media (max-width: 768px) {
  .battle-floating-text--dodge {
    font-size: 10px;
    padding: 4px 8px;
  }
  @keyframes battle-card-dodge {
    0% {
      transform: translate3d(0, 0, 0) rotate(0) scale(1);
    }
    32% {
      transform: translate3d(10px, -4px, 0) rotate(2deg) scale(0.98);
    }
    62% {
      transform: translate3d(-5px, 2px, 0) rotate(-1deg) scale(1.01);
    }
    100% {
      transform: translate3d(0, 0, 0) rotate(0) scale(1);
    }
  }
}
.battle-card--taunt {
  border-color: rgba(255, 196, 87, 0.7);
  overflow: visible;
}
.battle-card--taunt::before {
  content: "";
  position: absolute;
  inset: -7px;
  z-index: 7;
  pointer-events: none;
  border-radius: 18px;
  border: 2px solid rgba(255, 196, 87, 0.55);
  animation: battle-taunt-pulse 1.45s ease-in-out infinite;
}
.battle-card--taunt::after {
  content: "Цель";
  position: absolute;
  left: 50%;
  top: 2px;
  z-index: 8;
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 999px;
  color: #2a1800;
  font-size: 9px;
  font-weight: 1000;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: linear-gradient(135deg, #ffe48a, #ffb84d);
  border: 1px solid rgba(255, 255, 255, 0.35);
  white-space: nowrap;
}
.battle-card--taunt .battle-card__seal {
  background: rgba(255, 184, 77, 0.18);
  color: #ffe7a1;
}
.battle-card--dead.battle-card--taunt::before {
  display: none;
}
.battle-card--dead.battle-card--taunt::after {
  content: "Повержена";
  display: block;
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 10;
  transform: translate(-50%, -50%) rotate(-8deg);
  padding: 7px 12px;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  background: rgba(18, 20, 30, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.18);
  white-space: nowrap;
}

@media (max-width: 768px) {
  .battle-card--dead.battle-card--taunt::after {
    top: 42%;
    padding: 4px 7px;
    font-size: 7px;
  }
}
@keyframes battle-taunt-pulse {
  0%, 100% {
    opacity: 0.45;
    transform: scale(0.98);
  }
  50% {
    opacity: 1;
    transform: scale(1.035);
  }
}
@media (max-width: 768px) {
  .battle-card--taunt::before {
    inset: -4px;
    border-radius: 12px;
    border-width: 1px;
  }
  .battle-card--taunt::after {
    top: 2px;
    padding: 3px 5px;
    font-size: 6px;
  }
}
.battle-card--manual-selected {
  outline: 2px solid #8b5cf6;
  box-shadow: 0 0 24px rgba(139, 92, 246, 0.7);
  transform: translateY(-4px);
}

.pledge {
  display: grid;
  gap: 16px;
}
.pledge__hero {
  position: relative;
  padding: 22px;
  border-radius: calc(20px + 6px);
  background: radial-gradient(100% 140% at 0% 0%, rgba(134, 93, 255, 0.14) 0%, rgba(134, 93, 255, 0) 55%), radial-gradient(120% 120% at 100% 100%, rgba(255, 129, 181, 0.14) 0%, rgba(255, 129, 181, 0) 55%), radial-gradient(120% 120% at 50% 120%, rgba(125, 211, 252, 0.12) 0%, rgba(125, 211, 252, 0) 60%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e9eaf6;
  box-shadow: 0 10px 30px rgba(110, 122, 170, 0.15);
  overflow: hidden;
  isolation: isolate;
}
.pledge__hero .sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.6;
}
.pledge__title {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 8px;
}
.pledge__subtitle {
  color: #6b7280;
  font-size: 15px;
  margin: 0;
  max-width: 64ch;
}
.pledge__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.pledge__badges .badge {
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e9eaf6;
  box-shadow: 0 10px 30px rgba(110, 122, 170, 0.15);
  color: #4b5563;
}
.pledge__badges .badge--primary {
  background: linear-gradient(90deg, #FFE1F0, #E8E4FF);
  color: #3b2a58;
  font-weight: 800;
}
.pledge__summary {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 14px;
  margin-top: 6px;
}
@media (min-width: 720px) {
  .pledge__summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
.pledge__summary .summary-card {
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 16px;
}
.pledge__summary .summary-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 8px 0;
}
.pledge__summary .summary-card__label {
  color: #6b7280;
  font-size: 13px;
}
.pledge__summary .summary-card__value {
  font-weight: 900;
}
.pledge__progress {
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 14px;
}
.pledge__progress-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}
.pledge__progress-head .milestones {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.pledge__progress-head .milestones .milestone {
  flex: 1 1 130px;
  background: #fff9ef;
  border: 1px solid #ffe5b4;
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 8px 16px rgba(255, 191, 61, 0.15);
}
.pledge__progress-head .milestones .milestone__day {
  font-weight: 900;
  color: #b87300;
}
.pledge__progress-head .milestones .milestone__text {
  color: #7a5b1a;
  font-size: 12px;
  margin-top: 4px;
}
.pledge__progress .pledge__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
@media (min-width: 720px) {
  .pledge__progress .pledge__grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
  }
}
.pledge__day {
  position: relative;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  font-weight: 900;
  font-size: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f8ff 100%);
  border: 1px solid #e9eaf6;
  box-shadow: 0 3px 0 #dfe3fb, 0 10px 30px rgba(110, 122, 170, 0.15);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.pledge__day--frozen {
  background: linear-gradient(180deg, #f9fafb, #f5f7ff);
  color: #9ca3af;
  border-color: #e5e7eb;
  box-shadow: none;
  position: relative;
  opacity: 0.85;
}
.pledge__day--frozen::after {
  content: "⏳";
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 14px;
  opacity: 0.75;
}
.pledge__day--claimed {
  border-color: #c9cff9;
  background: linear-gradient(180deg, #F2F4FF, #FFFFFF);
  color: #3b2a58;
}
.pledge__day--claimed::after {
  content: "✓";
  position: absolute;
  left: 10px;
  top: 10px;
  transform: translate(-50%, -50%) scale(0.9);
  width: clamp(15px, 6.5vw, 25px);
  height: clamp(15px, 6.5vw, 25px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 30%, #34d399 0%, #10b981 60%, #059669 100%);
  color: #fff;
  font-weight: 900;
  font-size: clamp(12px, 3.6vw, 16px);
  border: 1px solid rgba(16, 185, 129, 0.55);
  box-shadow: 0 6px 14px rgba(16, 185, 129, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.06);
  animation: claim-pop 0.18s ease-out;
}
@keyframes claim-pop {
  from {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 1;
  }
}
.pledge__day--today {
  outline: 3px solid rgba(255, 129, 181, 0.55);
  outline-offset: 2px;
}
.pledge__day--milestone {
  background: linear-gradient(180deg, #fff8e6, #ffffff);
}
.pledge__day-rank {
  position: absolute;
  left: 8px;
  top: 6px;
  font-weight: 900;
  font-size: 12px;
  color: #b87300;
}
.pledge__cta {
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 14px;
  display: grid;
  gap: 12px;
}
.pledge__cta .cta__row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.button-cnt {
  cursor: pointer;
  border: 0;
  border-radius: 14px;
  padding: 16px;
  font-weight: 900;
  font-size: 16px;
  min-height: 56px;
  background: linear-gradient(90deg, #FFB1D0, #BDAAFF);
  color: white;
  box-shadow: 0 8px 18px rgba(255, 129, 181, 0.28), inset 0 -2px 0 rgba(0, 0, 0, 0.08);
}
.button-cnt--ghost {
  background: #ffffff;
  color: #374151;
  border: 1px solid #e9eaf6;
}
.button-cnt--disabled {
  opacity: 0.77;
  cursor: not-allowed;
  filter: grayscale(0.5);
  box-shadow: none;
  transform: none !important;
}
.button-cnt--danger {
  background: linear-gradient(90deg, #FFC7D4, #FF8EAB);
  color: #55111a;
  box-shadow: 0 8px 18px rgba(255, 118, 136, 0.28), inset 0 -2px 0 rgba(0, 0, 0, 0.08);
}

.pledge__sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(247, 249, 255, 0), rgba(247, 249, 255, 0.95));
  padding: 10px 14px 14px;
  border-top: 1px solid #e9eaf6;
  z-index: 50;
}
.pledge__sticky-inner {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  gap: 10px;
}
.pledge__sticky-inner .button {
  flex: 1;
}

.modal-cnt {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  z-index: 100;
}
.modal-cnt--open {
  display: flex;
}
.modal-cnt__card {
  width: min(520px, 92vw);
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  border-radius: 22px;
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.modal-cnt__title {
  font-size: 18px;
  font-weight: 900;
  margin: 0 0 10px;
}

.drop {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f7f8ff);
  border: 1px solid #e9eaf6;
  box-shadow: 0 10px 30px rgba(110, 122, 170, 0.15);
  margin: 8px 0;
}
.drop__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  font-size: 24px;
  border-radius: 12px;
  background: #fff4fb;
  border: 1px solid #ffe1f0;
}
.drop__main {
  font-weight: 900;
}
.drop__sub {
  color: #6b7280;
  font-size: 13px;
}

.confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.confetti__p {
  position: absolute;
  width: 8px;
  height: 14px;
  background: linear-gradient(180deg, #FF81B5, #865DFF);
  opacity: 0.9;
  transform: translateY(-20px) rotate(0deg);
  animation: fall 1.15s ease forwards;
}

@keyframes fall {
  to {
    transform: translateY(520px) rotate(340deg);
    opacity: 0;
  }
}
.diamond-cnt {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: middle;
  margin: -2px 4px 0;
  background: radial-gradient(circle at 30% 30%, #c0f7ff 0%, #83E0FF 50%, #BDAAFF 100%);
  -webkit-clip-path: polygon(50% 0%, 100% 35%, 80% 100%, 20% 100%, 0% 35%);
          clip-path: polygon(50% 0%, 100% 35%, 80% 100%, 20% 100%, 0% 35%);
}

.hero {
  display: grid;
  gap: 14px;
}
.hero__title {
  font-weight: 900;
  line-height: 1.1;
  margin: 0;
  font-size: clamp(20px, 6vw, 32px);
}
.hero__head {
  display: grid;
  gap: 10px;
}
@media (min-width: 480px) {
  .hero__head {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}
.hero__value {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 8px 10px;
  align-items: end;
}
@media (max-width: 480px) {
  .hero__value {
    grid-template-columns: auto 1fr;
  }
  .hero__value .hero__value-term {
    grid-column: 1/-1;
  }
}
.hero__value-num {
  font-weight: 900;
  line-height: 1;
  font-size: clamp(34px, 12vw, 48px);
  background: linear-gradient(90deg, #865DFF, #FF81B5);
  -webkit-background-clip: text;
  color: transparent;
}
.hero__value-sub {
  color: #6b7280;
  font-size: 14px;
  align-self: center;
}
.hero__value-term {
  color: #6b7280;
  font-size: 14px;
}
.hero__meta {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.hero__price {
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e9eaf6;
  box-shadow: 0 10px 30px rgba(110, 122, 170, 0.15);
  font-weight: 900;
  font-size: 14px;
}
.hero__features {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 420px) {
  .hero__features {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 720px) {
  .hero__features {
    grid-template-columns: repeat(4, 1fr);
  }
}

.feat {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e9eaf6;
  box-shadow: 0 10px 30px rgba(110, 122, 170, 0.15);
}
.feat .feat__icon {
  font-size: 18px;
}
.feat .feat__text {
  font-size: 14px;
  line-height: 1.2;
}

.info-btn {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid #e9eaf6;
  background: #fff;
  box-shadow: 0 10px 30px rgba(110, 122, 170, 0.15);
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.info-list {
  display: grid;
  gap: 8px;
  font-size: 14px;
}

.info-li {
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 10px;
}

/* убираем старый плотный подзаголовок/бейджи, если остались где-то */
.pledge__subtitle, .pledge__badges {
  display: none !important;
}

/* HERO v3 — компактный и «воздушный» */
.hero--v3 {
  display: grid;
  gap: 14px;
}
.hero--v3 .hero-v3__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.hero--v3 .hero-v3__title {
  margin: 0;
  font-weight: 900;
  line-height: 1.1;
  font-size: clamp(20px, 6vw, 32px);
  max-width: 22ch;
}
.hero--v3 .hero-v3__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.hero--v3 .hero-v3__price {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e9eaf6;
  box-shadow: 0 10px 30px rgba(110, 122, 170, 0.15);
  font-weight: 900;
  font-size: 14px;
  white-space: nowrap;
}
.hero--v3 .hero-v3__info {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid #e9eaf6;
  background: #fff;
  box-shadow: 0 10px 30px rgba(110, 122, 170, 0.15);
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.hero--v3 .hero-v3__stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 12px;
}
.hero--v3 .hero-v3__num {
  font-weight: 900;
  line-height: 1;
  font-size: clamp(36px, 12vw, 52px);
  background: linear-gradient(90deg, #865DFF, #FF81B5);
  -webkit-background-clip: text;
  color: transparent;
}
.hero--v3 .hero-v3__label {
  color: #6b7280;
  font-size: 14px;
  white-space: nowrap; /* чтобы не рвало «за 30 дней» */
}
.hero--v3 .hero-v3__chips {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr; /* мобила: одна колонка */
  /* 2 колонки */
  /* 4 на десктопе */
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 420px) {
  .hero--v3 .hero-v3__chips {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 720px) {
  .hero--v3 .hero-v3__chips {
    grid-template-columns: repeat(4, 1fr);
  }
}
.hero--v3 .chip {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e9eaf6;
  box-shadow: 0 10px 30px rgba(110, 122, 170, 0.15);
  font-size: 14px;
  color: #374151;
}
.hero--v3 .chip .chip__ico {
  font-size: 18px;
  line-height: 1;
}
.hero--v3 .hero-v3__cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.hero--v3 .hero-v3__cta .button {
  flex: 1 1 220px;
}

/* убираем старые подписи/бейджи, если ещё остались */
.pledge__subtitle, .pledge__badges {
  display: none !important;
}

/* CTA v2 — одна главная кнопка + строка сервисных элементов */
.cta--v2 {
  display: grid;
  gap: 12px;
}

.cta__primary {
  width: 100%;
}

.cta__row {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.cta__restore {
  flex: 1 1 220px;
}

.status-pill {
  flex: 1 1 220px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e9eaf6;
  box-shadow: 0 10px 30px rgba(110, 122, 170, 0.15);
  font-weight: 800;
  color: #374152;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

@media (min-width: 480px) {
  .status-pill {
    padding: 12px 16px;
  }
}
/* =========================
   DARK THEME (body.dark …)
   ========================= */
body.dark {
  color: var(--main-text-color);
  background: radial-gradient(110% 140% at 0% 0%, rgba(139, 92, 246, 0.22) 0%, rgba(139, 92, 246, 0) 55%), radial-gradient(120% 120% at 100% 100%, rgba(255, 129, 181, 0.2) 0%, rgba(255, 129, 181, 0) 55%), radial-gradient(120% 120% at 50% 120%, rgba(56, 189, 248, 0.18) 0%, rgba(56, 189, 248, 0) 60%), #0b0f16;
}

/* HERO */
body.dark .pledge__hero,
body.dark .hero--v3 {
  border-color: rgba(255, 255, 255, 0.08);
  background: radial-gradient(110% 140% at 0% 0%, rgba(139, 92, 246, 0.4) 0%, rgba(139, 92, 246, 0) 55%), radial-gradient(110% 120% at 100% 0%, rgba(255, 77, 141, 0.38) 0%, rgba(255, 77, 141, 0) 55%), radial-gradient(130% 120% at 100% 100%, rgba(56, 189, 248, 0.32) 0%, rgba(56, 189, 248, 0) 58%), radial-gradient(100% 130% at 0% 100%, rgba(251, 146, 60, 0.3) 0%, rgba(251, 146, 60, 0) 60%), linear-gradient(180deg, #101725 0%, #0b101b 100%);
}

body.dark .hero-v3__title {
  color: #f3f5fb;
}

body.dark .hero-v3__price,
body.dark .hero-v3__info {
  background: #0f1624;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e9edf6;
}

/* CARDS / PANELS */
body.dark .summary-card,
body.dark .pledge__progress,
body.dark .pledge__cta,
body.dark .modal__card,
body.dark .drop,
body.dark .chip,
body.dark .status-pill {
  background: linear-gradient(180deg, #111827 0%, #0e1523 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  color: #e7ecf7;
}

body.dark .summary-card__label,
body.dark .drop__sub,
body.dark .feat .feat__text {
  color: #9aa4b2;
}

/* BUTTONS */
body.dark .button-cnt {
  background: linear-gradient(90deg, #ff8ac2, #a996ff);
  color: #1b0f24;
  box-shadow: 0 10px 22px rgba(172, 139, 255, 0.28), inset 0 -2px 0 rgba(0, 0, 0, 0.25);
}

body.dark .button-cnt--ghost {
  background: #0f1624;
  color: #e8edf7;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark .button-cnt--danger {
  background: linear-gradient(90deg, #ff9ab2, #ff6b8b);
  color: #3a0f16;
}

/* GRID DAYS */
body.dark .pledge__day {
  background: linear-gradient(180deg, #121a2a 0%, #0f1725 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 3px 0 rgba(255, 255, 255, 0.06), 0 10px 30px rgba(0, 0, 0, 0.45);
  color: #e8edf7;
}

body.dark .pledge__day--today {
  outline: 3px solid rgba(255, 129, 181, 0.55);
}

body.dark .pledge__day--milestone {
  background: linear-gradient(180deg, #1a2438, #0f1725);
}

body.dark .pledge__day--milestone::after {
  color: #ffd166;
  text-shadow: none;
}

body.dark .pledge__day--claimed {
  border-color: rgba(99, 255, 191, 0.25);
}

body.dark .pledge__day--claimed::after {
  background: radial-gradient(circle at 30% 30%, #34d399 0%, #10b981 60%, #059669 100%);
  border: 1px solid rgba(16, 185, 129, 0.55);
  color: #fff;
}

body.dark .pledge__day--frozen {
  background: linear-gradient(180deg, #0e1422, #0c121d);
  color: #778196;
  border-color: rgba(255, 255, 255, 0.06);
  opacity: 0.9;
}

body.dark .pledge__day-rank {
  color: #ffd166;
}

/* MODALS */
body.dark .modal-cnt {
  background: rgba(5, 9, 16, 0.65);
}

body.dark .drop__icon {
  background: #161e30;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* INFO/FEATURE chips (если используешь старые классы) */
body.dark .feat {
  background: #0f1624;
  border-color: rgba(255, 255, 255, 0.08);
  color: #e8edf7;
}

/* DIAMOND fallback */
body.dark .diamond-cnt {
  background: radial-gradient(circle at 30% 30%, #6ee7f9 0%, #38bdf8 55%, #a78bfa 100%);
}

/* DARK: сделай вехи насыщеннее */
body.dark .milestone {
  background: radial-gradient(120% 160% at 0% 0%, rgba(255, 209, 102, 0.1) 0%, rgba(255, 209, 102, 0) 60%), linear-gradient(180deg, #121a2a 0%, #0e1523 100%) !important;
  border: 1px solid rgba(255, 209, 102, 0.22) !important;
  box-shadow: 0 8px 18px rgba(255, 209, 102, 0.1), 0 12px 28px rgba(0, 0, 0, 0.55) !important;
}

body.dark .milestone__day {
  color: #ffd166;
}

body.dark .milestone__text {
  color: #d1dae6;
}

/* DARK: плитки дней с вехой — тоже темнее и с янтарным акцентом */
body.dark .pledge__day--milestone {
  background: radial-gradient(120% 140% at 0% 0%, rgba(255, 209, 102, 0.1) 0%, rgba(255, 209, 102, 0) 60%), linear-gradient(180deg, #0f1624 0%, #0b111c 100%);
  border-color: rgba(255, 209, 102, 0.2);
}

body.dark .pledge__day--milestone::after {
  color: #ffd166;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

/* === CONTRACT animations (scoped & prefixed) === */
#contract-root {
  /* 1) Текущий день — поп-ин + пульс (исп. ::before, чтобы не конфликтовать с ::after) */
  /* 2) Плитки дней — мягкий вход + стаггер */
  /* 4) Кнопки — редкий «блик» */
  /* 5) Модалки (.modal-cnt) — появление фона и карточки */
  /* 6) Ряды дропа — аккуратный поп со сдвигом */
  /* 7) Hover-лифт для карточек/чипов (desktop only) */
  /* 8) Respect reduced motion в зоне контракта */
}
#contract-root .pledge__day--today {
  animation: contract-today-pop 0.28s ease-out both;
}
#contract-root .pledge__day--today::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 2px solid rgba(255, 129, 181, 0.65);
  box-shadow: 0 0 0 6px rgba(255, 129, 181, 0.08);
  animation: contract-today-pulse 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes contract-today-pop {
  from {
    transform: scale(0.94);
  }
  to {
    transform: scale(1);
  }
}
@keyframes contract-today-pulse {
  0%, 100% {
    opacity: 0.8;
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(255, 129, 181, 0.08);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
    box-shadow: 0 0 0 10px rgba(255, 129, 181, 0.12);
  }
}
#contract-root .pledge__grid .pledge__day {
  opacity: 0;
  transform: translateY(6px);
  animation: contract-cell-in 0.35s ease-out both;
}
@keyframes contract-cell-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#contract-root .pledge__grid .pledge__day:nth-child(1) {
  animation-delay: 0.015s;
}
#contract-root .pledge__grid .pledge__day:nth-child(2) {
  animation-delay: 0.03s;
}
#contract-root .pledge__grid .pledge__day:nth-child(3) {
  animation-delay: 0.045s;
}
#contract-root .pledge__grid .pledge__day:nth-child(4) {
  animation-delay: 0.06s;
}
#contract-root .pledge__grid .pledge__day:nth-child(5) {
  animation-delay: 0.075s;
}
#contract-root .pledge__grid .pledge__day:nth-child(6) {
  animation-delay: 0.09s;
}
#contract-root .pledge__grid .pledge__day:nth-child(7) {
  animation-delay: 0.105s;
}
#contract-root .pledge__grid .pledge__day:nth-child(8) {
  animation-delay: 0.12s;
}
#contract-root .pledge__grid .pledge__day:nth-child(9) {
  animation-delay: 0.135s;
}
#contract-root .pledge__grid .pledge__day:nth-child(10) {
  animation-delay: 0.15s;
}
#contract-root .pledge__grid .pledge__day:nth-child(11) {
  animation-delay: 0.165s;
}
#contract-root .pledge__grid .pledge__day:nth-child(12) {
  animation-delay: 0.18s;
}
#contract-root .pledge__grid .pledge__day:nth-child(13) {
  animation-delay: 0.195s;
}
#contract-root .pledge__grid .pledge__day:nth-child(14) {
  animation-delay: 0.21s;
}
#contract-root .pledge__grid .pledge__day:nth-child(15) {
  animation-delay: 0.225s;
}
#contract-root .pledge__grid .pledge__day:nth-child(16) {
  animation-delay: 0.24s;
}
#contract-root .pledge__grid .pledge__day:nth-child(17) {
  animation-delay: 0.255s;
}
#contract-root .pledge__grid .pledge__day:nth-child(18) {
  animation-delay: 0.27s;
}
#contract-root .pledge__grid .pledge__day:nth-child(19) {
  animation-delay: 0.285s;
}
#contract-root .pledge__grid .pledge__day:nth-child(20) {
  animation-delay: 0.3s;
}
#contract-root .pledge__grid .pledge__day:nth-child(21) {
  animation-delay: 0.315s;
}
#contract-root .pledge__grid .pledge__day:nth-child(22) {
  animation-delay: 0.33s;
}
#contract-root .pledge__grid .pledge__day:nth-child(23) {
  animation-delay: 0.345s;
}
#contract-root .pledge__grid .pledge__day:nth-child(24) {
  animation-delay: 0.36s;
}
#contract-root .pledge__grid .pledge__day:nth-child(25) {
  animation-delay: 0.375s;
}
#contract-root .pledge__grid .pledge__day:nth-child(26) {
  animation-delay: 0.39s;
}
#contract-root .pledge__grid .pledge__day:nth-child(27) {
  animation-delay: 0.405s;
}
#contract-root .pledge__grid .pledge__day:nth-child(28) {
  animation-delay: 0.42s;
}
#contract-root .pledge__grid .pledge__day:nth-child(29) {
  animation-delay: 0.435s;
}
#contract-root .pledge__grid .pledge__day:nth-child(30) {
  animation-delay: 0.45s;
}
#contract-root .button-cnt::after {
  animation: contract-idle-sheen 7s ease-in-out infinite;
}
#contract-root .button-cnt:active::after {
  animation: none;
}
@keyframes contract-idle-sheen {
  0%, 92% {
    transform: translateX(-120%) skewX(-12deg);
    opacity: 0.45;
  }
  96% {
    transform: translateX(140%) skewX(-12deg);
    opacity: 0.6;
  }
  100% {
    transform: translateX(140%) skewX(-12deg);
    opacity: 0;
  }
}
#contract-root .modal-cnt[aria-hidden=false] {
  animation: contract-backdrop-in 0.18s ease both;
}
#contract-root .modal-cnt[aria-hidden=false] .modal-cnt__card {
  animation: contract-modal-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes contract-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes contract-modal-in {
  from {
    transform: scale(0.96);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
#contract-root #dropList .drop {
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  animation: contract-drop-pop 0.22s ease-out both;
}
@keyframes contract-drop-pop {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
#contract-root #dropList .drop:nth-child(1) {
  animation-delay: 0.02s;
}
#contract-root #dropList .drop:nth-child(2) {
  animation-delay: 0.06s;
}
#contract-root #dropList .drop:nth-child(3) {
  animation-delay: 0.1s;
}
#contract-root #dropList .drop:nth-child(4) {
  animation-delay: 0.14s;
}
@media (hover: hover) {
  #contract-root .chip, #contract-root .feat, #contract-root .summary-card, #contract-root .status-pill {
    transition: transform 0.12s ease, box-shadow 0.12s ease;
  }
  #contract-root .chip:hover, #contract-root .feat:hover, #contract-root .summary-card:hover, #contract-root .status-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(110, 122, 170, 0.18);
  }
}
@media (prefers-reduced-motion: reduce) {
  #contract-root * {
    animation: none !important;
    transition: none !important;
  }
}

/* Плитка CTA «Контракт» в списке пакетов */
.pack-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  text-decoration: none;
  background: #fff;
  border: 1px solid #eceffd;
  color: #0f172a;
  /* Hover только на десктопе */
  /* Мобилка — складываем в колонку */
}
.pack-cta__left {
  min-width: 0;
}
.pack-cta__label {
  font-weight: 800;
  font-size: 14px;
  color: #334155;
  margin-bottom: 8px;
}
.pack-cta__sumline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.pack-cta__num {
  font-weight: 900;
  line-height: 1;
  font-size: clamp(26px, 5.5vw, 34px);
  background: linear-gradient(90deg, #865DFF, #FF81B5);
  -webkit-background-clip: text;
  color: transparent;
}
.pack-cta__sub {
  color: #64748b;
  font-size: 14px;
  white-space: nowrap;
}
.pack-cta__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.pack-cta__chips li {
  font-size: 12.5px;
  color: #334155;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e9eefc;
}
.pack-cta__right {
  display: grid;
  gap: 10px;
  justify-items: end;
}
.pack-cta__price {
  font-weight: 900;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e9eefc;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.03);
  color: #334155;
}
.pack-cta__btn {
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 14px;
  background: linear-gradient(90deg, #ffb1d0, #bdaaff);
  color: white;
  box-shadow: 0 10px 22px rgba(173, 124, 255, 0.18);
}
@media (hover: hover) {
  .pack-cta {
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
  }
  .pack-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(17, 24, 39, 0.1);
    border-color: #dee6ff;
  }
}
@media (max-width: 640px) {
  .pack-cta {
    flex-direction: column;
    align-items: stretch;
  }
  .pack-cta__right {
    justify-items: stretch;
  }
  .pack-cta__price {
    justify-self: start;
  }
  .pack-cta__btn {
    text-align: center;
  }
}

/* Тёмная тема (если есть body.dark) */
body.dark .pack-cta {
  background: #0f1624;
  border-color: rgba(255, 255, 255, 0.08);
  color: #e8edf7;
}
body.dark .pack-cta .pack-cta__label {
  color: #cdd6e4;
}
body.dark .pack-cta .pack-cta__sub {
  color: #9aa4b2;
}
body.dark .pack-cta .pack-cta__chips li {
  background: #0b1220;
  border-color: rgba(255, 255, 255, 0.1);
  color: #e8edf7;
}
body.dark .pack-cta .pack-cta__price {
  background: #0b1220;
  border-color: rgba(255, 255, 255, 0.1);
  color: #e8edf7;
}

/* ===== MOBILE clean-up for .pack-cta ===== */
@media (max-width: 640px) {
  .pack-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 18px 14px;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.08);
  }
  .pack-cta__label {
    font-size: 15px;
    margin: 0;
    color: #374151;
  }
  /* число отдельно, подпись ниже — не ломается на переносах */
  .pack-cta__sumline {
    display: grid;
    gap: 6px;
  }
  .pack-cta__num {
    font-size: 36px; /* clamp на десктопе остаётся */
    line-height: 1;
  }
  .pack-cta__sub {
    display: block;
    font-size: 13.5px;
    color: #6b7280;
    white-space: normal; /* можно переносить */
  }
  /* тонкий разделитель */
  .pack-cta__sumline::after {
    content: "";
    display: block;
    height: 1px;
    background: #eef2ff;
    margin-top: 10px;
  }
  /* чипы → спокойные строки */
  .pack-cta__chips {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 0;
  }
  .pack-cta__chips li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #eef2ff;
    font-size: 14px;
    color: #374151;
  }
  /* цена + кнопка: красиво выровнять и дать дыхание */
  .pack-cta__right {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
  }
  .pack-cta__price {
    justify-self: start;
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 12px;
  }
  .pack-cta__btn {
    grid-column: 1/-1;
    text-align: center;
    padding: 12px 16px;
    border-radius: 14px;
  }
}
/* тёмная тема — мягче фон строк */
@media (max-width: 640px) {
  body.dark .pack-cta__chips li {
    background: #0b1220;
    border-color: rgba(255, 255, 255, 0.08);
    color: #e8edf7;
  }
  body.dark .pack-cta__sumline::after {
    background: rgba(255, 255, 255, 0.08);
  }
}
.modal-contract-gift {
  --line: var(--line, #e2e2e2);
  --bg: var(--bg, #fff);
  --bg-elevated: var(--bg-elevated, #fff);
  --bg-soft: var(--bg-soft, #fafafa);
  --text: var(--text, #111);
  --text-weak: var(--text-weak, #777);
  --hover: var(--hover, #f6f6f6);
  --primary: var(--primary, #7c5cff);
  display: grid;
  gap: 12px;
  color: var(--text);
}
.modal-contract-gift__title {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
}
.modal-contract-gift__field {
  display: grid;
  gap: 8px;
}
.modal-contract-gift__label {
  font-size: 13px;
  color: var(--text-weak);
}
.modal-contract-gift__input-wrap {
  position: relative;
}
.modal-contract-gift__select-input {
  width: 100%;
  padding: 10px 36px 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  outline: none;
}
.modal-contract-gift__select-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.12);
}
.modal-contract-gift__clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  opacity: 0.6;
  cursor: pointer;
}
.modal-contract-gift__select-results {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  max-height: 280px;
  overflow: auto;
  z-index: 50;
}
.modal-contract-gift__select-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  cursor: pointer;
}
.modal-contract-gift__select-item:hover {
  background: var(--hover);
}
.modal-contract-gift__select-item-avatar, .modal-contract-gift__selected-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.modal-contract-gift__select-item-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modal-contract-gift__selected {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--bg-soft);
}
.modal-contract-gift__selected-remove {
  margin-left: auto;
  border: 0;
  background: none;
  font-size: 13px;
  color: var(--primary);
  cursor: pointer;
}
.modal-contract-gift__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}
.modal-contract-gift__hint {
  font-size: 12px;
  color: var(--text-weak);
}
.modal-contract-gift__field {
  position: relative; /* ⬅ теперь дропдаун привязан к полю */
}

/* служебное скрытие */
.body-card-game #back-to-top {
  display: none;
}

.body-card-game .header {
  display: none;
}

.body-card-game .footer {
  display: none;
}

.body-card-game .main {
  background: black;
}

.body-card-game {
  background: black;
}

.body-card-game body {
  background: black;
}

/* каркас */
.body-card-game .wrapper {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.body-card-game .main {
  flex: 1 1 auto;
  padding: 0 !important;
  overflow: hidden;
}

.body-card-game .container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* тема */
.body-card-game {
  --acc:#5b7cfa;
  --acc2:#00c2d1;
  --text:#0f172a;
  --muted:#64748b;
  --br:#d9e2ff;
}

/* сцена и фон стола (добавил узор) */
.body-card-game .cbg {
  position: relative;
  height: 100dvh;
  overflow: hidden;
  --safeTop:56px;
  --safeBot:56px;
  --padY:12px;
  --rowGap:12px;
  --c1:#ff4db3; /* розовый */
  --c2:#4dd9ff; /* голубой */
  --c3:#ffe066; /* жёлтый */
  --c4:#66ffcc; /* мятный */
  --rowH: calc( (100dvh - (var(--safeTop) + var(--safeBot) + var(--padY)*2 + var(--rowGap))) / 2 );
}

.body-card-game .cbg.cbg--neon {
  /* вертикальные поля дорожек */
  --padY: 20px;
  /* палитра тёмных кнопок/панели */
  --btn-bg-top: #111a22;
  --btn-bg-bot: #0b1117;
  --btn-br: #1b3140;
  --btn-text: #e8f3ff;
  --btn-glow: rgba(64,200,255,.22);
  --btn-glow-2: rgba(64,200,255,.35);
}

.body-card-game .cbg.cbg--neon .cbg__lanes {
  padding-top: var(--padY);
  padding-bottom: var(--padY);
}

.body-card-game .cbg.cbg--theme-sunset {
  --c1:#ff7a59;
  --c2:#ff3cac;
  --c3:#ffd36b;
  --c4:#ff8fab;
}

.body-card-game .cbg.cbg--theme-ocean {
  --c1:#00d9ff;
  --c2:#4effc0;
  --c3:#6ea8ff;
  --c4:#9efff5;
}

.body-card-game .cbg.cbg--theme-neon {
  --c1:#ff3df2;
  --c2:#36ffd7;
  --c3:#ffe66d;
  --c4:#8ea2ff;
}

.body-card-game .cbg__board {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /*   background:
         radial-gradient(130% 110% at 0%    0%,  #ffd4ec 0%,  transparent 55%),
         radial-gradient(115% 100% at 100%  0%,  #b9f2ff 0%,  transparent 52%),
         radial-gradient(125% 110% at 100% 100%, #fff3b0 0%,  transparent 55%),
         radial-gradient(120% 105% at 0%   100%, #b9ffd9 0%,  transparent 52%),
         linear-gradient(180deg, #ffffff 0%, #f2f6ff 100%);
     filter: saturate(1.25) contrast(1.08);*/
  background: url("/assets/card-table2.png");
  background-repeat: no-repeat;
  background-size: contain;
}
@media (orientation: landscape) {
  .body-card-game .cbg__board {
    background: url("/assets/card-table3.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
}

/* Анимации */
@keyframes cbgMeshDrift {
  0% {
    transform: translate3d(-2%, -1%, 0) scale(1.06) rotate(-2deg);
  }
  50% {
    transform: translate3d(2%, 1%, 0) scale(1.08) rotate(1deg);
  }
  100% {
    transform: translate3d(4%, -1%, 0) scale(1.07) rotate(3deg);
  }
}
@keyframes cbgAuroraSpin {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1.05);
  }
  50% {
    transform: translate3d(1.5%, -1.5%, 0) rotate(180deg) scale(1.08);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(360deg) scale(1.05);
  }
}
@keyframes cbgBokehDrift {
  0% {
    transform: translate3d(-1%, 0.5%, 0);
  }
  100% {
    transform: translate3d(1%, -0.5%, 0);
  }
}
/* ряды */
.body-card-game .cbg__lanes {
  position: absolute;
  inset: 0;
  padding: var(--padY) 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.body-card-game .cbg__row {
  --gapX:clamp(6px, 2vw, 12px);
  --slots:5;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--gapX);
  pointer-events: auto;
  min-height: 0;
}

.body-card-game .cbg__row--enemy {
  align-items: flex-start;
}

/* индикатор хода справа вертикально */
.body-card-game .cbg-turn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  padding: 10px 8px;
  border: 1px solid var(--br);
  border-radius: 12px;
  background: linear-gradient(180deg, #fff, #eef2ff);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 0.06em;
  font-weight: 700;
}

/* аватары */
.body-card-game .cbg-id {
  position: absolute;
  z-index: 5;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--br);
  border-radius: 999px;
  background: linear-gradient(180deg, #fff, #eef2ff);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08), inset 0 0 18px rgba(91, 124, 250, 0.08);
}

.body-card-game .cbg-id--enemy {
  top: 8px;
  left: 10px;
}

.body-card-game .cbg-id--player {
  bottom: 8px;
  left: 10px;
}

.body-card-game .cbg-id__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid rgba(15, 23, 42, 0.12);
}

.body-card-game .cbg-id__name {
  font-weight: 700;
}

/* карты 2:3 */
.body-card-game .cbg-card {
  aspect-ratio: 2/3;
  width: min((100% - var(--gapX) * (var(--slots) - 1)) / var(--slots), var(--rowH) * 2 / 3);
  max-height: var(--rowH);
  min-width: 0;
  max-width: 165px;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--br);
  background: #fff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.7) inset;
  transform-origin: center bottom;
  transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.2s ease;
  will-change: transform;
  contain: layout paint size; /* границы инвалидации меньше */
  transform: translateZ(0);
}

.body-card-game .cbg__board.cbg-anim-pause::before,
.body-card-game .cbg__board.cbg-anim-pause::after {
  animation-play-state: paused !important;
  opacity: 0.75; /* снижаем их влияние на композицию */
}

.body-card-game .cbg-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(91, 124, 250, 0.22) inset;
}

.body-card-game .cbg-card--enemy {
  filter: saturate(0.95);
}

.body-card-game .cbg-card--dead {
  filter: grayscale(0.3) brightness(0.94);
  transform: rotate(-6deg);
  opacity: 0.75;
}

.body-card-game .cbg-card__art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-image: conic-gradient(from 210deg at 30% 40%, rgba(91, 124, 250, 0.18), transparent 50%), linear-gradient(145deg, rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0.02)), radial-gradient(80px 60px at 60% 30%, rgba(0, 194, 209, 0.2), transparent 60%);
}

/* бейджи поменьше и прямо в УГЛАХ */
.body-card-game .cbg-card__badge {
  --h: 1.7em; /* меньше */
  height: var(--h);
  min-width: calc(var(--h) + 8px);
  padding: 0 0.55em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.82em;
  letter-spacing: 0.01em;
  position: absolute;
  z-index: 2;
  pointer-events: none;
  color: #0f172a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

/* HP — щит, ПРАВЫЙ ВЕРХНИЙ УГОЛ */
.body-card-game .cbg-card__badge--hp {
  right: 0.35rem;
  top: 0.35rem;
  background: radial-gradient(120% 100% at 50% 0%, #ff6f8d, #e04c6a 60%, #b23a52 100%);
  border: 1px solid rgba(176, 45, 74, 0.35);
  -webkit-clip-path: polygon(50% 0%, 92% 18%, 100% 48%, 80% 100%, 20% 100%, 0% 48%, 8% 18%);
          clip-path: polygon(50% 0%, 92% 18%, 100% 48%, 80% 100%, 20% 100%, 0% 48%, 8% 18%);
}

/* ATK — шестигранник, ЛЕВЫЙ НИЖНИЙ УГОЛ */
.body-card-game .cbg-card__badge--atk {
  left: 0.35rem;
  bottom: 0.35rem;
  background: radial-gradient(120% 100% at 50% 0%, #ffd37a, #ffb34d 60%, #e5992f 100%);
  border: 1px solid rgba(176, 93, 20, 0.35);
  -webkit-clip-path: polygon(8% 25%, 50% 0%, 92% 25%, 92% 75%, 50% 100%, 8% 75%);
          clip-path: polygon(8% 25%, 50% 0%, 92% 25%, 92% 75%, 50% 100%, 8% 75%);
}

/* клон при рывке */
.body-card-game .cbg-card--clone {
  position: fixed !important;
  left: 0;
  top: 0;
  z-index: 1200;
  pointer-events: none;
}

.body-card-game .cbg-card--lift {
  transform: translateY(-10px) scale(1.06);
}

.body-card-game .cbg-card--slam {
  transform: translateY(-6px) rotate(2deg) scale(1.12);
}

/* эффекты боя */
.body-card-game .cbg-flytext {
  position: fixed;
  z-index: 1450;
  color: var(--text);
  font-weight: 900;
  pointer-events: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 6px rgba(255, 255, 255, 0.6), 0 0 12px rgba(255, 255, 255, 0.5);
  animation: cbg-flytext-move 700ms ease-out both;
}

@keyframes cbg-flytext-move {
  0% {
    transform: translate(-50%, -6px);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -60px);
    opacity: 0;
  }
}
.body-card-game .cbg-spark {
  position: fixed;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, #fff 0%, rgba(255, 232, 138, 0.95) 35%, rgba(255, 232, 138, 0) 70%);
  box-shadow: 0 0 22px rgba(255, 232, 138, 0.6);
  animation: spark 0.36s ease-out;
  z-index: 1400;
}

@keyframes spark {
  0% {
    transform: scale(0.6);
    opacity: 0.9;
  }
  60% {
    transform: scale(1.6);
    opacity: 0.6;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}
.body-card-game .cbg-slash {
  position: fixed;
  left: 0;
  top: 0;
  width: 180px;
  height: 12px;
  border-radius: 999px;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 1400;
  opacity: 0.95;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 30%, rgba(91, 124, 250, 0.9) 70%, rgba(91, 124, 250, 0) 100%);
  transform-origin: center;
  animation: slash 220ms ease-out forwards;
}

@keyframes slash {
  0% {
    transform: translate(var(--x, 0), var(--y, 0)) translate(-50%, -50%) rotate(var(--a, 0deg)) scaleX(0.6);
    opacity: 0.95;
  }
  100% {
    transform: translate(var(--x, 0), var(--y, 0)) translate(-50%, -50%) rotate(var(--a, 0deg)) scaleX(1.4);
    opacity: 0;
  }
}
@keyframes camShake {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-3px, 1px);
  }
  40% {
    transform: translate(3px, -2px);
  }
  60% {
    transform: translate(-2px, 2px);
  }
  80% {
    transform: translate(2px, -1px);
  }
  100% {
    transform: translate(0, 0);
  }
}
.body-card-game .cbg--shake {
  animation: camShake 0.28s ease;
}

@keyframes camSoft {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-1px, 1px);
  }
  50% {
    transform: translate(1px, -1px);
  }
  75% {
    transform: translate(-1px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
.body-card-game .cbg--shake-soft {
  animation: camSoft 0.22s ease;
}

/* тест-панель и кнопки (полный набор) */
.body-card-game .cbg-tools-toggle {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2000;
  border-radius: 999px;
  border: 1px solid var(--br);
  padding: 10px 12px;
  background: linear-gradient(180deg, #fff, #eef2ff);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.body-card-game .cbg-tools-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}

.body-card-game .cbg-tools-toggle:active {
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
}

.body-card-game .cbg-tools {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(280px, 88vw);
  background: linear-gradient(180deg, #fff, #eef2ff);
  border-left: 1px solid var(--br);
  box-shadow: -8px 0 30px rgba(15, 23, 42, 0.08);
  transform: translateX(100%);
  transition: transform 0.22s ease;
  z-index: 1990;
  display: flex;
  flex-direction: column;
}

.body-card-game .cbg-tools--open {
  transform: none;
}

.body-card-game .cbg-tools__inner {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
}

.body-card-game .cbg-tools__title {
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text);
}

.body-card-game .cbg__button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid var(--br);
  padding: 10px 14px;
  border-radius: 12px;
  background: radial-gradient(150% 120% at 50% -40%, rgba(91, 124, 250, 0.18), transparent 60%), linear-gradient(180deg, #fff, #eef2ff);
  color: var(--text);
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08), inset 0 0 24px rgba(0, 194, 209, 0.06);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.body-card-game .cbg__button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12), inset 0 0 24px rgba(0, 194, 209, 0.12);
  border-color: rgba(91, 124, 250, 0.35);
}

.body-card-game .cbg__button:active {
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1), inset 0 0 24px rgba(0, 194, 209, 0.08);
}

.body-card-game .cbg__button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

/* AOE и Бафф визуалки */
.body-card-game .cbg-aoe {
  position: fixed;
  z-index: 1390;
  pointer-events: none;
  overflow: hidden;
}

.body-card-game .cbg-aoe__wave {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 22%, rgba(91, 124, 250, 0.45) 40%, rgba(91, 124, 250, 0) 60%), radial-gradient(circle at 50% 50%, rgba(0, 194, 209, 0.45) 0%, rgba(0, 194, 209, 0) 60%);
  filter: blur(2px);
  animation: cbg-aoe-wave 420ms ease-out both;
}

@keyframes cbg-aoe-wave {
  0% {
    transform: scale(0.6);
    opacity: 0.9;
  }
  80% {
    opacity: 0.7;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
.body-card-game .cbg-buff-ring {
  position: fixed;
  z-index: 1460;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px rgba(0, 194, 209, 0.85), 0 0 18px rgba(0, 194, 209, 0.75);
  animation: cbg-buff-ring 480ms ease-out both;
}

@keyframes cbg-buff-ring {
  0% {
    transform: scale(0.8);
    opacity: 0.95;
  }
  70% {
    opacity: 0.85;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}
/* Оверлей «поверни телефон» с CSS-иконкой телефона */
.body-card-game .cbg-orientation {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.94);
  color: var(--text);
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2000;
  padding: 20px;
}

.body-card-game .cbg-orientation--show {
  display: flex;
}

.body-card-game .cbg-orientation__box {
  max-width: 520px;
  position: relative;
  padding-top: 140px;
}

.body-card-game .cbg-orientation__box::before,
.body-card-game .cbg-orientation__box::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 20px;
  width: 68px;
  height: 108px; /* одинаковый box для синхронного вращения */
  transform: translateX(-50%); /* базовое центрирование */
  transform-origin: 50% 60%; /* ось вращения у обоих одна */
  animation: phone-rotate 2200ms ease-in-out infinite;
  border-radius: 16px;
}

/* === HEAL FX: луч, кольца, «искорки» и лёгкий пульс карты === */
.body-card-game .cbg-card--heal {
  box-shadow: 0 0 0 2px rgba(72, 255, 188, 0.45) inset, 0 0 36px rgba(72, 255, 188, 0.32);
  animation: healPulse 380ms ease-out;
}

@keyframes healPulse {
  0% {
    transform: translateY(-2px) scale(1.02);
  }
  100% {
    transform: none;
  }
}
.body-card-game .cbg-heal-beam {
  position: fixed;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(160, 255, 220, 0.65) 0%, rgba(160, 255, 220, 0.28) 40%, rgba(160, 255, 220, 0) 70%);
  filter: blur(2px);
  animation: healBeam 520ms ease-out both;
  pointer-events: none;
  z-index: 1450;
}

@keyframes healBeam {
  0% {
    transform: scale(0.7);
    opacity: 0.95;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
.body-card-game .cbg-heal-ring {
  position: fixed;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px rgba(72, 255, 188, 0.9), 0 0 18px rgba(72, 255, 188, 0.75);
  animation: healRing 620ms ease-out both;
  pointer-events: none;
  z-index: 1460;
}

@keyframes healRing {
  0% {
    transform: scale(0.8);
    opacity: 0.95;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}
.body-card-game .cbg-heal-spark {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #a0ffd1 60%, rgba(160, 255, 209, 0) 70%);
  animation: healSpark 600ms ease-out both;
  pointer-events: none;
  z-index: 1460;
}

@keyframes healSpark {
  0% {
    transform: translate(0, 0) scale(0.6);
    opacity: 0.95;
  }
  100% {
    transform: translate(var(--dx, 0px), var(--dy, -30px)) scale(0);
    opacity: 0;
  }
}
/* корпус телефона */
.body-card-game .cbg-orientation__box::before {
  border: 3px solid rgba(15, 23, 42, 0.55);
  background: radial-gradient(80% 60% at 50% 10%, rgba(255, 255, 255, 0.7), transparent 60%), linear-gradient(180deg, #f8fbff, #e9f0ff);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15), inset 0 0 0 2px rgba(255, 255, 255, 0.8);
}

/* динамик — рисуем как маленькую полоску внутри общего box */
.body-card-game .cbg-orientation__box::after {
  background: linear-gradient(rgba(15, 23, 42, 0.35), rgba(15, 23, 42, 0.35)) no-repeat;
  background-size: 26px 4px; /* размер динамика */
  background-position: 50% 8px; /* позиция внутри «телефона» */
  border: none;
  box-shadow: none;
}

@keyframes phone-rotate {
  0%, 20% {
    transform: translateX(-50%) rotate(0deg);
  }
  45%, 55% {
    transform: translateX(-50%) rotate(90deg);
  }
  80%, 100% {
    transform: translateX(-50%) rotate(0deg);
  }
}
/* компактнее при низкой высоте */
@media (orientation: landscape) and (max-height: 480px) {
  .body-card-game .cbg {
    --safeTop:48px;
    --safeBot:48px;
    --rowGap:8px;
  }
  .body-card-game .cbg__row {
    --gapX:6px;
  }
}
/* Кнопка полноэкрана (мобайл) */
.body-card-game .cbg-fsbtn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2100;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--br);
  background: radial-gradient(130% 120% at 50% -40%, rgba(91, 124, 250, 0.18), transparent 60%), linear-gradient(180deg, #fff, #eef2ff);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.body-card-game .cbg-fsbtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}

.body-card-game .cbg-fsbtn:active {
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
}

/* Иконка внутри кнопки */
.body-card-game .cbg-fsbtn svg {
  width: 22px;
  height: 22px;
  display: block;
}

.body-card-game .cbg-fsbtn svg path {
  fill: #0f172a;
  opacity: 0.9;
}

/* Только на мобильных (coarse pointer) */
@media (pointer: fine) {
  .body-card-game .cbg-fsbtn {
    display: none;
  }
}
/* Подсказка «нажми для полноэкрана» */
.body-card-game .cbg-fsbtn__hint {
  position: absolute;
  top: 12px;
  right: 64px;
  z-index: 2100;
  max-width: 240px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--br);
  background: linear-gradient(180deg, #fff, #eef2ff);
  color: #0f172a;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.body-card-game .cbg-fsbtn__hint::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -7px;
  transform: translateY(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: #eef2ff;
  border-right: 1px solid var(--br);
  border-bottom: 1px solid var(--br);
}

.body-card-game .cbg-fsbtn__hint.hide {
  opacity: 0;
  transform: translateY(-6px);
}

/* тоже только на мобильных */
@media (pointer: fine) {
  .body-card-game .cbg-fsbtn__hint {
    display: none;
  }
}
/* НЕОНОВЫЙ СТОЛ (как на скрине) — просто добавь класс .cbg-board-neon на .cbg__board */
.body-card-game .cbg__board.cbg-board-neon {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* тёмный материал + лёгкая «пылинка» — не серый */
  background: radial-gradient(80% 70% at 50% 40%, #0e1b25 0%, transparent 70%), radial-gradient(16px 16px at 20% 30%, rgba(255, 255, 255, 0.04) 0 2px, transparent 3px), radial-gradient(16px 16px at 70% 60%, rgba(255, 255, 255, 0.035) 0 2px, transparent 3px), radial-gradient(16px 16px at 40% 80%, rgba(255, 255, 255, 0.03) 0 2px, transparent 3px), linear-gradient(#0c161e, #0b131a);
  box-shadow: inset 0 0 120px 40px rgba(0, 0, 0, 0.55);
  /* параметры рамки */
  --edge-lite:#7fe0ff;
  --halo: 18px;
  --frame-gap: 18px; /* отступ рамки от краёв */
  --bevel: 32px; /* размер скошенного угла */
  --line-w: 2px; /* толщина «острой» линии */
}

/* внутренняя неоновая рамка (скошенный восьмиугольник) */
.body-card-game .cbg__board.cbg-board-neon::before {
  content: "";
  position: absolute;
  inset: var(--frame-gap);
  -webkit-clip-path: polygon(calc(0% + var(--bevel)) 0%, calc(100% - var(--bevel)) 0%, 100% calc(0% + var(--bevel)), 100% calc(100% - var(--bevel)), calc(100% - var(--bevel)) 100%, calc(0% + var(--bevel)) 100%, 0% calc(100% - var(--bevel)), 0% calc(0% + var(--bevel)));
          clip-path: polygon(calc(0% + var(--bevel)) 0%, calc(100% - var(--bevel)) 0%, 100% calc(0% + var(--bevel)), 100% calc(100% - var(--bevel)), calc(100% - var(--bevel)) 100%, calc(0% + var(--bevel)) 100%, 0% calc(100% - var(--bevel)), 0% calc(0% + var(--bevel)));
  /* резкая линия + мягкий ореол по периметру фигуры (box-shadow уважает clip-path) */
  box-shadow: inset 0 0 0 var(--line-w) var(--edge-lite), inset 0 0 var(--halo) var(--line-w) rgba(57, 195, 255, 0.65), inset 0 0 60px 8px rgba(11, 183, 255, 0.25);
  pointer-events: none;
}

/* яркие верх/низ полосы, как на рефе */
.body-card-game .cbg__board.cbg-board-neon::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(127, 224, 255, 0.95) 0px, rgba(57, 195, 255, 0.85) 2px, rgba(11, 183, 255, 0.3) 8px, transparent 26px) top/100% 26px no-repeat, linear-gradient(to top, rgba(127, 224, 255, 0.95) 0px, rgba(57, 195, 255, 0.85) 2px, rgba(11, 183, 255, 0.3) 8px, transparent 26px) bottom/100% 26px no-repeat;
}

/* === Каменный стол с синей подсветкой === */
.body-card-game .cbg__board.cbg-board-stone {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* глубокий «каменный» фон + лёгкая «пылинка» */
  background: radial-gradient(110% 80% at 50% 40%, #0f1b24 0%, transparent 70%), radial-gradient(14px 14px at 22% 28%, rgba(255, 255, 255, 0.04) 0 2px, transparent 3px), radial-gradient(14px 14px at 68% 60%, rgba(255, 255, 255, 0.035) 0 2px, transparent 3px), radial-gradient(14px 14px at 40% 78%, rgba(255, 255, 255, 0.03) 0 2px, transparent 3px), linear-gradient(#0a1218, #0b1319);
  box-shadow: inset 0 0 160px 60px rgba(0, 0, 0, 0.65);
  --gap: 18px; /* отступ рамки от краёв */
  --bevel: 30px; /* размер скошенных углов */
  --halo: 18px; /* толщина свечения */
  --edge: #66d9ff; /* светлая кайма */
  --glow: rgba(11,183,255,.55);
}

/* внутренняя «каменная» рама — восьмиугольник со свечением по кромке */
.body-card-game .cbg__board.cbg-board-stone::before {
  content: "";
  position: absolute;
  inset: var(--gap);
  /* восьмиугольник со скошенными углами */
  -webkit-clip-path: polygon(calc(0% + var(--bevel)) 0%, calc(100% - var(--bevel)) 0%, 100% calc(0% + var(--bevel)), 100% calc(100% - var(--bevel)), calc(100% - var(--bevel)) 100%, calc(0% + var(--bevel)) 100%, 0% calc(100% - var(--bevel)), 0% calc(0% + var(--bevel)));
          clip-path: polygon(calc(0% + var(--bevel)) 0%, calc(100% - var(--bevel)) 0%, 100% calc(0% + var(--bevel)), 100% calc(100% - var(--bevel)), calc(100% - var(--bevel)) 100%, calc(0% + var(--bevel)) 100%, 0% calc(100% - var(--bevel)), 0% calc(0% + var(--bevel)));
  /* каменная текстура + внутренний градиент к центру */
  background: radial-gradient(120% 100% at 50% 50%, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.3)), repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.03) 0 2px, rgba(255, 255, 255, 0) 2px 6px);
  /* «синяя» кромка: резкая линия + мягкий ореол и лёгкие засветы в углах */
  box-shadow: inset 0 0 0 2px var(--edge), inset 0 0 var(--halo) 2px var(--glow), inset 0 0 60px 10px rgba(11, 183, 255, 0.25); /* подсветка под углами */
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.45));
}

/* верхняя/нижняя «неоновая» полосы как на референсе */
.body-card-game .cbg__board.cbg-board-stone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(127, 224, 255, 0.95) 0px, rgba(57, 195, 255, 0.85) 2px, rgba(11, 183, 255, 0.3) 10px, transparent 30px) top/100% 30px no-repeat, linear-gradient(to top, rgba(127, 224, 255, 0.95) 0px, rgba(57, 195, 255, 0.85) 2px, rgba(11, 183, 255, 0.3) 10px, transparent 30px) bottom/100% 30px no-repeat;
}

/* тонкие «трещины» по камню (деликатно, чтобы не шумело) */
.body-card-game .cbg__board.cbg-board-stone ._cracks {
  display: none;
} /* на всяк. случай, если вставишь эл-т */
.body-card-game .cbg__board.cbg-board-stone {
  /* негромкие линии по центру поля */
  --cr: rgba(0,0,0,.35);
  background-image: radial-gradient(110% 80% at 50% 40%, #0f1b24 0%, transparent 70%), radial-gradient(14px 14px at 22% 28%, rgba(255, 255, 255, 0.04) 0 2px, transparent 3px), radial-gradient(14px 14px at 68% 60%, rgba(255, 255, 255, 0.035) 0 2px, transparent 3px), radial-gradient(14px 14px at 40% 78%, rgba(255, 255, 255, 0.03) 0 2px, transparent 3px), linear-gradient(12deg, transparent 48%, var(--cr) 50%, transparent 52%), linear-gradient(-18deg, transparent 46%, var(--cr) 48%, transparent 50%), linear-gradient(0deg, transparent 49%, rgba(255, 255, 255, 0.05) 50%, transparent 51%), linear-gradient(#0a1218, #0b1319);
  background-blend-mode: normal, normal, normal, normal, overlay, overlay, overlay, normal;
}

/* кнопки — тёмные, с голубым свечением */
.body-card-game .cbg.cbg--neon .cbg__button {
  border: 1px solid var(--btn-br);
  background: radial-gradient(140% 120% at 50% -40%, rgba(64, 200, 255, 0.1), transparent 60%), linear-gradient(180deg, var(--btn-bg-top), var(--btn-bg-bot));
  color: var(--btn-text);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), inset 0 0 24px var(--btn-glow);
  transition: transform 0.12s ease, box-shadow 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.body-card-game .cbg.cbg--neon .cbg__button:hover {
  transform: translateY(-1px);
  border-color: #27506a;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(64, 200, 255, 0.25) inset, inset 0 0 28px var(--btn-glow-2);
}

.body-card-game .cbg.cbg--neon .cbg__button:active {
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), inset 0 0 18px var(--btn-glow);
}

.body-card-game .cbg.cbg--neon .cbg__button:disabled {
  opacity: 0.55;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

/* тумблер панели и сама панель — в тон */
.body-card-game .cbg.cbg--neon .cbg-tools-toggle {
  border: 1px solid var(--btn-br);
  background: linear-gradient(180deg, #0e151c, #0a1016);
  color: var(--btn-text);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
}

.body-card-game .cbg.cbg--neon .cbg-tools {
  background: linear-gradient(180deg, #0d151c, #0a0f14);
  border-left: 1px solid #162632;
  color: var(--btn-text);
}

.body-card-game .cbg.cbg--neon .cbg-tools__title {
  color: #ecf7ff;
}

/* ====== НЕОН-ТЕМА: ники и индикатор хода ====== */
.body-card-game .cbg.cbg--neon {
  /* общая палитра панелек */
  --panel-bg-top: #111a22;
  --panel-bg-bot: #0b1117;
  --panel-br: #1b3140;
  --panel-text: #e8f3ff;
  --panel-glow: rgba(64,200,255,.20);
  /* акценты сторон */
  --accent-player: #63d4ff;
  --accent-enemy: #ff6292;
}

/* общая «плашка» (Ты/Враг) */
.body-card-game .cbg.cbg--neon .cbg-id {
  background: radial-gradient(140% 120% at 50% -40%, rgba(64, 200, 255, 0.1), transparent 60%), linear-gradient(180deg, var(--panel-bg-top), var(--panel-bg-bot));
  border: 1px solid var(--panel-br);
  color: var(--panel-text);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55), inset 0 0 18px var(--panel-glow);
  -webkit-backdrop-filter: saturate(120%);
          backdrop-filter: saturate(120%);
}

/* акцент игрока/врага */
.body-card-game .cbg.cbg--neon .cbg-id--player {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55), 0 0 18px rgba(99, 212, 255, 0.2) inset, 0 0 12px rgba(99, 212, 255, 0.25);
}

.body-card-game .cbg.cbg--neon .cbg-id--enemy {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55), 0 0 18px rgba(255, 98, 146, 0.2) inset, 0 0 12px rgba(255, 98, 146, 0.25);
}

/* аватарки с цветным кантом */
.body-card-game .cbg.cbg--neon .cbg-id--player .cbg-id__avatar {
  border-color: color-mix(in srgb, var(--accent-player) 65%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent-player) 45%, transparent);
}

.body-card-game .cbg.cbg--neon .cbg-id--enemy .cbg-id__avatar {
  border-color: color-mix(in srgb, var(--accent-enemy) 65%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent-enemy) 45%, transparent);
}

/* индикатор текущего хода (справа, вертикальный) */
.body-card-game .cbg.cbg--neon .cbg-turn {
  background: linear-gradient(180deg, var(--panel-bg-top), var(--panel-bg-bot));
  border: 1px solid var(--panel-br);
  color: var(--panel-text);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55), inset 0 0 14px var(--panel-glow);
}

/* мобильные — компактнее (если у тебя уже есть медиаправила, этот блок можно оставить как есть) */
@media (pointer: coarse) {
  .body-card-game .cbg.cbg--neon .cbg-id {
    padding: 6px 8px;
    gap: 6px;
    border-radius: 10px;
  }
  .body-card-game .cbg.cbg--neon .cbg-id__avatar {
    width: 28px;
    height: 28px;
  }
  .body-card-game .cbg.cbg--neon .cbg-id__name {
    font-size: 12px;
  }
  .body-card-game .cbg.cbg--neon .cbg-turn {
    right: 6px;
    padding: 6px 4px;
    border-radius: 10px;
    font-size: 12px;
  }
}
@media (pointer: coarse) and (max-width: 420px) {
  .body-card-game .cbg.cbg--neon .cbg-id__name {
    transform: scale(0.95);
  }
  .body-card-game .cbg.cbg--neon .cbg-turn {
    font-size: 11px;
  }
}
/* 📱 Мобилки: больше места под ряды → крупнее карты */
@media (pointer: coarse) {
  .body-card-game .cbg {
    /* меньше “резервов” сверху/снизу + компактнее поля дорожек */
    --safeTop: max(33px, env(safe-area-inset-top) + 6px);
    --safeBot: max(33px, env(safe-area-inset-bottom) + 6px);
    --padY: 8px;
    --rowGap: 8px;
  }
  /* сами плашки “Ты/Враг” сдвинем ближе к краям, чтобы не перекрывались */
  .body-card-game .cbg .cbg-id--enemy {
    top: 6px;
  }
  .body-card-game .cbg .cbg-id--player {
    bottom: calc(6px + env(safe-area-inset-bottom));
  }
}
/* очень низкие экраны в горизонтали — ещё компактнее safe-зоны */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 480px) {
  .body-card-game .cbg {
    --safeTop: max(33px, env(safe-area-inset-top) + 4px);
    --safeBot: max(33px, env(safe-area-inset-bottom) + 4px);
    --padY: 6px;
    --rowGap: 6px;
  }
}
/* Управление масштабом бейджей через переменную */
.body-card-game .cbg {
  --badgeScale: 1;
}

.body-card-game .cbg-card__badge {
  transform: scale(var(--badgeScale));
}

/* чтобы при масштабировании они оставались в углах */
.body-card-game .cbg-card__badge--hp {
  transform-origin: top right;
}

.body-card-game .cbg-card__badge--atk {
  transform-origin: bottom left;
}

/* 📱 Телефоны/планшеты — делаем бейджи заметно меньше */
@media (pointer: coarse) {
  .body-card-game .cbg {
    --badgeScale: .86;
  }
  /* ещё чуть поджать сами бейджи и их отступы */
  .body-card-game .cbg-card__badge {
    --h: 1.45em; /* было 1.7em */
    font-size: 0.78em; /* цифры помельче */
    padding: 0 0.45em; /* уже */
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  }
  .body-card-game .cbg-card__badge--hp {
    top: 0.25rem;
    right: 0.25rem;
  }
  .body-card-game .cbg-card__badge--atk {
    bottom: 0.25rem;
    left: 0.25rem;
  }
}
/* очень узкие телефоны */
@media (pointer: coarse) and (max-width: 420px) {
  .body-card-game .cbg {
    --badgeScale: .78;
  }
  .body-card-game .cbg-card__badge {
    --h: 1.35em;
    font-size: 0.74em;
  }
  .body-card-game .cbg-card__badge--hp {
    top: 0.2rem;
    right: 0.2rem;
  }
  .body-card-game .cbg-card__badge--atk {
    bottom: 0.2rem;
    left: 0.2rem;
  }
}
/* низкие экраны в горизонтали */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 480px) {
  .body-card-game .cbg {
    --badgeScale: .74;
  }
}
/* видимый выбор своей карты */
.body-card-game .cbg-card--sel {
  outline: 3px solid rgba(99, 212, 255, 0.9);
  box-shadow: 0 0 0 2px rgba(99, 212, 255, 0.35) inset, 0 10px 28px rgba(0, 0, 0, 0.55), 0 0 18px rgba(99, 212, 255, 0.45);
  transform: translateY(-4px) scale(1.04);
}

/* лёгкая вспышка попадания */
.body-card-game .cbg-card--hit {
  animation: cbgHit 0.22s ease-out;
}

@keyframes cbgHit {
  0% {
    filter: brightness(1.15) saturate(1.1);
    transform: translateY(-2px) scale(1.02);
  }
  100% {
    filter: none;
    transform: none;
  }
}
/* оверлей статуса/финиша */
.body-card-game .cbg-overlay {
  position: absolute;
  inset: 0;
  z-index: 2200;
  display: none;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(10, 16, 22, 0.65), rgba(10, 16, 22, 0.85));
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  color: #e8f3ff;
  text-align: center;
  padding: 20px;
}

.body-card-game .cbg-overlay--show {
  display: flex;
}

.body-card-game .cbg-overlay__box {
  max-width: 520px;
  width: 92%;
  border: 1px solid #1b3140;
  border-radius: 14px;
  background: linear-gradient(180deg, #0e151c, #0a1016);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), inset 0 0 24px rgba(64, 200, 255, 0.12);
  padding: 20px;
}

.body-card-game .cbg-overlay__title {
  font-size: 28px;
  font-weight: 900;
  margin: 0 0 6px;
}

.body-card-game .cbg-overlay__sub {
  color: #9fb6c7;
  margin: 0 0 16px;
}

.body-card-game .cbg-overlay__row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.body-card-game .cbg-overlay__btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid #1b3140;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
  background: linear-gradient(180deg, #0e151c, #0a1016);
  color: #e8f3ff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), inset 0 0 24px rgba(64, 200, 255, 0.12);
}

.body-card-game .cbg-overlay__btn--primary {
  border-color: #27506a;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6), inset 0 0 28px rgba(64, 200, 255, 0.18);
}

.body-card-game .cbg-turn-banner {
  position: fixed;
  left: 50%;
  top: 14%;
  transform: translateX(-50%);
  z-index: 2200;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(127, 224, 255, 0.45);
  background: linear-gradient(180deg, #0e151c, #0a1016);
  color: #e8f3ff;
  font-weight: 800;
  font-size: clamp(16px, 3.6vw, 22px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55), inset 0 0 14px rgba(64, 200, 255, 0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.body-card-game .cbg-turn-banner.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* карта уже ходила в текущем ходу активного игрока */
.body-card-game .cbg-card.cbg-card--used {
  filter: grayscale(0.25) brightness(0.92);
  opacity: 0.8;
}

.body-card-game .cbg-card.cbg-card--used::after {
  content: "ход сделан";
  position: absolute;
  inset: auto 6px 6px auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 3px 6px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.85);
  color: #e8f3ff;
  border: 1px solid rgba(91, 124, 250, 0.35);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* ====== Оверлей финиша боя ====== */
.body-card-game .cbg-finished {
  position: fixed;
  inset: 0;
  z-index: 2300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(180deg, rgba(10, 16, 22, 0.65), rgba(10, 16, 22, 0.85));
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.body-card-game .cbg-finished.show {
  display: flex;
}

.body-card-game .cbg-finished__box {
  width: min(520px, 92vw);
  border-radius: 14px;
  border: 1px solid #1b3140;
  background: linear-gradient(180deg, #0e151c, #0a1016);
  color: #e8f3ff;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), inset 0 0 24px rgba(64, 200, 255, 0.12);
  padding: 20px 18px;
  text-align: center;
  transform: translateY(6px) scale(0.98);
  opacity: 0;
  animation: cbgFinishPop 0.28s ease-out forwards;
}

.body-card-game .cbg-finished__title {
  font-size: clamp(22px, 4.6vw, 30px);
  font-weight: 900;
  letter-spacing: 0.02em;
  margin: 0 0 6px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
}

.body-card-game .cbg-finished__reason {
  color: #9fb6c7;
  font-weight: 700;
  margin: 0 0 16px;
}

.body-card-game .cbg-finished__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* кнопки используют твой .cbg__button; слегка усилим их тут */
.body-card-game .cbg-finished .cbg__button {
  min-width: 140px;
}

.body-card-game .cbg-finished .cbg__button--secondary {
  border-color: #1b3140;
  opacity: 0.95;
}

/* неон-акценты (в тон остальной теме) */
.body-card-game .cbg.cbg--neon .cbg-finished__box {
  border: 1px solid #1b3140;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6), inset 0 0 24px rgba(64, 200, 255, 0.14);
}

/* лёгкая анимация появления */
@keyframes cbgFinishPop {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* доступность: меньше движений — без анимаций */
@media (prefers-reduced-motion: reduce) {
  .body-card-game .cbg-finished__box {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
/* супер-узкие экраны */
@media (max-width: 380px) {
  .body-card-game .cbg-finished__actions .cbg__button {
    width: 100%;
  }
}
.cbg-decks-wrap {
  max-width: 1120px;
  margin: 20px auto 36px;
}
.cbg-decks-wrap .card-filter-form__menu {
  display: none;
}

/* ====== Колоды: layout ====== */
.cbg-decks-wrap {
  display: grid;
  grid-template-columns: 1fr minmax(340px, 420px);
  gap: 18px;
  padding: 16px 12px;
}

@media (max-width: 980px) {
  .cbg-decks-wrap {
    grid-template-columns: 1fr;
  }
}
/* Колонки */
.cbg-decks-col--right {
  position: sticky;
  top: 12px;
  align-self: start;
}

/* Карточка-обёртка справа */
.cbg-decks-card {
  border: 1px solid var(--br);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #eef2ff);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  padding: 12px;
}

.cbg-decks-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.cbg-title {
  font-weight: 900;
  font-size: 18px;
}

.cbg-sep {
  height: 1px;
  background: var(--br);
  margin: 10px 0;
}

/* Список колод */
.cbg-decks-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 38vh;
  overflow: auto;
}

.cbg-deck-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--br);
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
}

.cbg-deck-row--active {
  outline: 2px solid rgba(91, 124, 250, 0.35);
}

.cbg-deck-row__name {
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cbg-deck-row__btns {
  display: flex;
  gap: 8px;
}

/* Кнопки/инпуты */
.cbg-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  border: 1px solid var(--br);
  border-radius: 10px;
  padding: 8px 12px;
  background: #fff;
  font-weight: 800;
  transition: transform 0.12s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.cbg-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
}

.cbg-btn--danger {
  border-color: #e99;
  background: #fee;
}

.cbg-btn--ghost {
  background: #f7faff;
}

.cbg-input {
  width: 100%;
  border: 1px solid var(--br);
  border-radius: 10px;
  padding: 8px 12px;
  background: #fff;
  font-weight: 700;
}

.cbg-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 10px 0;
}

.cbg-hint {
  color: #64748b;
  font-size: 12px;
  margin: 8px 0 0;
}

/* Слоты колоды */
.cbg-deck-slots {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(5, 1fr);
  margin: 12px 0;
}

@media (max-width: 980px) {
  .cbg-deck-slots {
    grid-template-columns: repeat(5, minmax(50px, 1fr));
  }
}
@media (max-width: 640px) {
  .cbg-deck-slots {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 420px) {
  .cbg-deck-slots {
    grid-template-columns: repeat(2, 1fr);
  }
}
.cbg-deck-slot {
  position: relative;
  aspect-ratio: 2/3;
  border: 1px solid var(--br);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.cbg-deck-slot--empty {
  background: repeating-linear-gradient(45deg, #f3f6ff, #f3f6ff 8px, #eef2ff 8px, #eef2ff 16px);
}

.cbg-deck-slot__num {
  position: absolute;
  left: 6px;
  top: 6px;
  z-index: 2;
  font-weight: 900;
  font-size: 12px;
  opacity: 0.6;
}

.cbg-deck-slot__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.cbg-deck-slot__remove {
  position: absolute;
  right: 6px;
  top: 6px;
  z-index: 3;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--br);
  background: #fff;
  font-weight: 900;
  cursor: pointer;
  line-height: 1;
}

/* Для карточек инвентаря — курсор-указатель */
.card-inventory-container--cbg-decks .card-filter-list__card {
  cursor: pointer;
}

/* скрывашка */
.cbg-hidden {
  display: none !important;
}

/* пустой стейт */
.cbg-empty {
  border: 1px dashed var(--br);
  border-radius: 12px;
  background: #fff;
  padding: 14px;
  text-align: center;
}

.cbg-empty__title {
  font-weight: 900;
  margin-bottom: 4px;
}

.cbg-empty__sub {
  color: #64748b;
  font-size: 13px;
  margin-bottom: 10px;
}

/* ====== CBG FORGE v4 ====== */
.cgf {
  --gap-lg: 24px;
  --gap-md: 14px;
  --gap-sm: 10px;
  --radius: 18px;
  max-width: 1120px;
  margin: 20px auto 36px;
  display: grid;
  gap: var(--gap-lg);
  /* HERO */
  /* на телефонах уровень/рейтинг по строкам */
  /* desktop */
  /* GRID */
  /* карточки */
  /* статы */
  /* действия с кнопками (в одном экране) */
  /* аффиксы — сетка 3 колонки: иконка | текст+tooltip | значение (две строки) */
  /* прочее */
}
.cgf__inv {
  max-width: 1120px;
  margin: 0 auto 0;
}
.cgf__section {
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.05);
}
.cgf__hero {
  display: grid;
  gap: var(--gap-md);
}
.cgf__poster {
  /*max-width: 270px; justify-self:center;*/
  padding-top: 150%; /*aspect-ratio: 3 / 4;*/
  border-radius: 16px;
  background: center/cover no-repeat;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.07);
}
.cgf__hero-body {
  display: grid;
  gap: 10px;
}
.cgf__name {
  margin: 0;
  font-weight: 900;
  font-size: clamp(22px, 6vw, 32px);
  line-height: 1.18;
  letter-spacing: 0.2px;
}
.cgf__chips {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-sm);
}
@media (min-width: 640px) {
  .cgf__chips {
    grid-template-columns: 1fr 1fr;
  }
}
.cgf__chip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--medium-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  font-weight: 800;
}
.cgf__progress {
  height: 12px;
  background: var(--dark-grey-bg);
  border-radius: 999px;
  overflow: hidden;
}
.cgf__progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #7c4dff, #00c2ff);
}
@media (min-width: 980px) {
  .cgf__hero {
    grid-template-columns: 180px 1fr;
    align-items: center;
  }
  .cgf__poster {
    width: 180px;
  }
}
.cgf__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
}
@media (min-width: 980px) {
  .cgf__grid {
    grid-template-columns: 1.05fr 0.95fr;
  }
}
.cgf__card {
  display: grid;
  gap: var(--gap-md);
}
.cgf__card-title {
  font-weight: 900;
  margin: 0;
}
.cgf__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-md);
}
@media (min-width: 640px) {
  .cgf__stats {
    grid-template-columns: repeat(4, 1fr);
  }
}
.cgf__stat {
  position: relative;
  background: var(--medium-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
}
.cgf__label {
  font-size: 12px;
  color: #666;
  letter-spacing: 0.02em;
}
.cgf__val {
  margin-top: 4px;
  font-size: 20px;
  font-weight: 900;
}
.cgf__base {
  margin-top: 3px;
  font-size: 12px;
  color: #7a7a8a;
}
.cgf__stat--bumped {
  outline: 2px solid #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15);
}
.cgf__delta {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 12px;
  font-weight: 800;
  color: #166534;
  background: #e9f7ef;
  border: 1px solid #c7efd9;
  padding: 2px 6px;
  border-radius: 999px;
  animation: cgf-rise 0.9s ease forwards;
}
@keyframes cgf-rise {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  15% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-8px);
  }
}
.cgf__price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--medium-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 800;
}
.cgf__price-val {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cgf .i {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: -3px;
}
.cgf .i-dm path {
  stroke: #7c4dff;
  fill: none;
  stroke-width: 2;
}
.cgf__actions {
  display: flex;
  gap: 8px;
}
.cgf .cgf-btn {
  flex: 1;
  padding: 12px 12px;
  border: 0;
  border-radius: 12px;
  font-weight: 900;
  cursor: pointer;
}
.cgf .cgf-btn--primary {
  background: #7c4dff;
  color: #fff;
}
.cgf .cgf-btn--danger {
  background: #ffe7e7;
  color: #a40000;
  border: 1px solid #ffd1d1;
}
.cgf .cgf-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.cgf__affixes {
  display: grid;
  gap: 10px;
}
.cgf .af {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  background: var(--medium-bg);
  border: 1px dashed var(--border-color);
  border-radius: 12px;
  padding: 10px 12px;
}
.cgf .af__icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  display: grid;
  place-items: center;
}
.cgf .af__text {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.cgf .af__name {
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.cgf .tip {
  position: relative;
  flex: 0 0 20px;
}
.cgf .tip__btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #eef2ff;
  border: 1px solid #dbe1ff;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #4950ff;
  cursor: pointer;
}
.cgf .tip__bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  max-width: 260px;
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  display: none;
  z-index: 5;
  font-size: 13px;
}
.cgf .tip__arrow {
  position: absolute;
  bottom: -6px;
  left: 10px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-left: 1px solid #e8e8f6;
  border-bottom: 1px solid #e8e8f6;
  transform: rotate(45deg);
}
.cgf .tip.is-open .tip__bubble {
  display: block;
}
.cgf .af__val {
  text-align: right;
}
.cgf .af__v {
  font-weight: 900;
}
.cgf .af__u {
  color: #7a7a8a;
  line-height: 1.1;
}
.cgf__note {
  color: #666;
  font-size: 13px;
  line-height: 1.4;
  background: #f8fafc;
  border: 1px dashed #dde3f1;
  padding: 10px 12px;
  border-radius: 10px;
}
.cgf__empty {
  color: #777;
  padding: 10px 12px;
  background: var(--grey-background);
  border: 1px dashed var(--border-color);
  border-radius: 12px;
}

.cbg-main {
  /* защита от горизонтального скролла страницы */
  overflow-x: hidden;
  /* Палитра */
  --cbg-bg: #ffffff;
  --cbg-bg-soft: #f7f8fb;
  --cbg-surface: #ffffff;
  --cbg-surface-2: #fbfbfe;
  --cbg-shadow: 0 8px 24px rgba(20, 24, 40, 0.06);
  --cbg-text: #232323;
  --cbg-muted: #5f6368;
  --cbg-primary: #8b00ff;
  --cbg-primary-2: #772ce8;
  --cbg-success: #26d07c;
  --cbg-gold: #c89b3c;
  --radius: 14px;
  color: var(--main-text-color);
  /* Header */
  /* Hero */
  /* Cards */
  /* Grid section */
  /* Quests */
  /* ====== Leaderboard ====== */
  /* Мобильная адаптация таблицы: карточки без горизонтального скролла */
  /* News */
  /* Footer */
}
.cbg-main__container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px;
}
.cbg-main__header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.cbg-main__title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cbg-main__title-text {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.2px;
}
.cbg-main__tag {
  font-size: 12px;
  padding: 4px 8px;
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  border-radius: 999px;
}
.cbg-main__balances {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.cbg-main__balance {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  box-shadow: var(--cbg-shadow);
}
.cbg-main__balance-value {
  font-weight: 800;
  letter-spacing: 0.2px;
}
.cbg-main__balance--diamonds .cbg-main__balance-value {
  color: var(--cbg-gold);
}
.cbg-main__icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  /* иконки */
}
.cbg-main__icon--diamond {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23c89b3c" d="M12 3l3.6 3h4.4l-8 15L4 6h4.4L12 3z"/></svg>');
}
.cbg-main__icon--rune {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="%238b00ff"/><stop offset="1" stop-color="%23772ce8"/></linearGradient></defs><path d="M32 6 54 20v24L32 58 10 44V20Z" fill="url(%23g)" stroke="%23a884ff" stroke-width="2"/><path d="M22 40l10-16 10 16" fill="none" stroke="%23111" stroke-opacity=".9" stroke-width="3"/></svg>');
}
.cbg-main__hero {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin: 8px 0 18px;
}
.cbg-main__hero-card {
  background: var(--cbg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--cbg-shadow);
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.cbg-main__cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 520px) {
  .cbg-main__cta {
    grid-template-columns: 1fr;
  }
}
.cbg-main__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* отступ между иконкой и текстом */
  padding: 12px 16px;
  font-weight: 700;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-decoration: none;
  transition: transform 0.08s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  /* иконки внутри кнопок чуть меньше */
}
.cbg-main__button .cbg-main__icon {
  width: 16px;
  height: 16px;
}
.cbg-main__button--primary {
  background: linear-gradient(180deg, var(--cbg-primary), var(--cbg-primary-2));
  color: #fff;
  border-color: rgba(0, 0, 0, 0.03);
}
.cbg-main__button--primary:hover {
  transform: translateY(-1px);
}
.cbg-main__button--primary:active {
  transform: translateY(0);
}
.cbg-main__button--secondary {
  background: var(--dark-grey-bg);
  border-color: var(--border-color);
}
.cbg-main__button--secondary:hover {
  transform: scale(1.02);
}
.cbg-main__button--ghost {
  background: transparent;
  border-color: var(--border-color);
}
.cbg-main__button[aria-disabled=true] {
  opacity: 0.6;
  pointer-events: none;
}
.cbg-main__quick {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 10px;
}
@media (max-width: 620px) {
  .cbg-main__quick {
    grid-template-columns: 1fr;
  }
}
.cbg-main__pill {
  padding: 10px 12px;
  border: 1px dashed var(--border-color);
  border-radius: 12px;
  background: var(--medium-bg);
  text-align: center;
  font-size: 13px;
  text-decoration: none;
}
.cbg-main__pill:hover {
  opacity: 0.9;
}
.cbg-main__card {
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--main-border-radius);
  box-shadow: var(--cbg-shadow);
}
.cbg-main__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color);
}
.cbg-main__card-title {
  font-weight: 800;
}
.cbg-main__card-body {
  padding: 12px 14px;
}
.cbg-main__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 740px) {
  .cbg-main__grid {
    grid-template-columns: 1.5fr 1fr;
  }
}
.cbg-main__quest {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
}
@media (max-width: 520px) {
  .cbg-main__quest {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}
.cbg-main__quest-col {
  display: grid;
  gap: 8px;
}
.cbg-main__quest-name {
  font-size: 14px;
}
.cbg-main__progress {
  height: 8px;
  background: var(--dark-grey-bg);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}
.cbg-main__progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--cbg-success), #5ce1a9);
}
.cbg-main__quests-footer {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cbg-main__timer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--cbg-surface-2);
}
.cbg-main__timer-label {
  color: var(--cbg-muted);
}
.cbg-main__timer-value {
  font-weight: 800;
}
.cbg-main__table-wrap {
  /* на мобильных таблицу превращаем в карточки — без горизонтального скролла */
}
.cbg-main__table {
  width: 100%;
  border-collapse: collapse;
}
.cbg-main__table-head .cbg-main__table-cell {
  color: var(--cbg-muted);
  font-weight: 700;
  font-size: 13px;
}
.cbg-main__table-row:not(:last-child) .cbg-main__table-cell {
  border-bottom: 1px solid var(--border-color);
}
.cbg-main__table-row--self {
  background: linear-gradient(90deg, rgba(139, 0, 255, 0.08), transparent);
}
.cbg-main__table-cell {
  padding: 10px 8px;
  text-align: left;
  font-size: 14px;
}
.cbg-main__table-cell a {
  color: inherit;
  text-decoration: none;
  word-break: break-word; /* длинные ники/ссылки не ломанут ширину */
}
@media (max-width: 560px) {
  .cbg-main__table {
    border: 0;
  }
  .cbg-main__table-head {
    display: none;
  }
  .cbg-main__table-body {
    display: grid;
    gap: 8px;
  }
  .cbg-main__table-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    /* визуально отделяем карточки */
  }
  .cbg-main__table-row:not(.cbg-main__table-row--self) {
    background: var(--cbg-surface-2);
  }
  .cbg-main__table-cell {
    padding: 0;
    border: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* подпись слева (из data-label) */
  }
  .cbg-main__table-cell::before {
    content: attr(data-label);
    color: var(--cbg-muted);
    font-size: 12px;
    margin-right: 12px;
  }
}
.cbg-main__news {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.cbg-main__news-item {
  padding: 8px 10px;
  background: var(--dark-grey-bg);
  border-radius: 10px;
}
.cbg-main__news-title {
  font-weight: 700;
  margin-bottom: 7px;
}
.cbg-main__news-text {
  color: var(--secondary-text-color);
  font-size: 13px;
  line-height: 1.5em;
}
.cbg-main__footer {
  margin: 12px 0 22px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  color: var(--cbg-muted);
  font-size: 12px;
}
.cbg-main__footer-link {
  color: var(--cbg-muted);
  text-decoration: none;
}
.cbg-main__footer-link:hover {
  text-decoration: underline;
}
.cbg-main__footer-dot {
  color: var(--cbg-muted);
}

.card-inventory-container--newyear-gift .card-filter-list__card {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.card-inventory-container--newyear-gift .card-filter-list__card.newyear-gift__inventory-card--selected {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  outline: 2px solid rgba(255, 255, 255, 0.6);
}

.newyear-gift {
  position: relative;
  color: var(--main-text-color);
  font-family: inherit;
  /* layout */
  /* карточка коробки */
  /* блок с пожеланием и кнопкой */
  /* инвентарь */
  /* состояние "подарок готов" */
  /* адаптация для планшетов/десктопа */
}
.newyear-gift__type-badge {
  margin: 10px 0 15px;
  padding: 6px 12px;
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(90deg, #b84cff, #6a00ff);
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(138, 43, 226, 0.4);
  animation: newyearPulse 2.5s infinite ease-in-out;
}
.newyear-gift__bg {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at top, rgba(255, 255, 255, 0.08), transparent 55%), linear-gradient(145deg, #14122c, #30144a 45%, #052331);
  z-index: -2;
}
.newyear-gift__snow-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-size: 200px auto;
  opacity: 0.18;
  z-index: -1;
}
.newyear-gift__snow-layer--front {
  animation: newyear-gift-snow-move 25s linear infinite;
}
.newyear-gift__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 10px;
}
.newyear-gift__header {
  text-align: center;
  margin-bottom: 20px;
}
.newyear-gift__badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.newyear-gift__title {
  font-size: 22px;
  line-height: 1.2;
  margin-bottom: 6px;
}
.newyear-gift__subtitle {
  font-size: 13px;
  opacity: 0.85;
  max-width: 650px;
  margin: 0 auto;
}
.newyear-gift__steps {
  margin-top: 12px;
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  border-radius: 20px;
  background: var(--dark-grey-bg);
  font-size: 13px;
  flex-wrap: nowrap;
}
@media (max-width: 380px) {
  .newyear-gift__steps {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 4px;
  }
}
.newyear-gift__step {
  display: flex;
  align-items: center;
  gap: 4px;
}
.newyear-gift__step-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.newyear-gift__step-text-line {
  white-space: nowrap;
}
.newyear-gift__step--arrow {
  font-size: 13px;
  opacity: 0.7;
}
@media (max-width: 380px) {
  .newyear-gift__step--arrow {
    display: none;
  }
}
.newyear-gift__layout, .newyear-gift__ready {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.newyear-gift__column--left {
  width: 100%;
  margin-top: 4px;
}
.newyear-gift__column--right {
  width: 100%;
}
.newyear-gift__magic-card {
  background: var(--dark-grey-bg);
  border-radius: 16px;
  padding: 14px 14px 16px;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}
.newyear-gift__magic-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.newyear-gift__magic-label {
  font-size: 12px;
  opacity: 0.9;
}
.newyear-gift__magic-counter {
  font-size: 12px;
  opacity: 0.9;
}
.newyear-gift__magic-box {
  position: relative;
  border-radius: 14px;
  padding: 12px 10px 14px;
  background: radial-gradient(circle at top, rgba(255, 255, 255, 0.08), transparent 55%), linear-gradient(145deg, rgba(75, 0, 130, 0.7), rgba(5, 38, 88, 0.9));
  overflow: hidden;
}
.newyear-gift__box-lid {
  position: relative;
  height: 36px;
  border-radius: 10px 10px 16px 16px;
  background: linear-gradient(90deg, #ff4b6e, #ff9354);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.newyear-gift__box-ribbon {
  position: absolute;
  top: -4px;
  bottom: -10px;
  left: 50%;
  width: 10px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
  border-radius: 999px;
}
.newyear-gift__box-tag {
  position: relative;
  z-index: 1;
  padding: 3px 8px;
  border-radius: 999px;
  color: white;
  background: rgba(0, 0, 0, 0.4);
  font-size: 11px;
  white-space: nowrap;
}
.newyear-gift__selected {
  position: relative;
  z-index: 1;
}
.newyear-gift__selected-title {
  font-size: 14px;
  margin-bottom: 12px;
  opacity: 0.95;
  color: white;
  font-weight: 600;
}
.newyear-gift__selected-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 64px;
}
.newyear-gift__selected-empty {
  font-size: 12px;
  opacity: 0.9;
  color: white;
}
.newyear-gift__selected-card {
  width: calc(50% - 3px);
  cursor: pointer;
}
.newyear-gift__selected-card-inner {
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 4px;
  gap: 6px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  transform: translateY(-1px);
  background: rgba(0, 0, 0, 0.15);
}
.newyear-gift__selected-card:active .newyear-gift__selected-card-inner, .newyear-gift__selected-card:hover .newyear-gift__selected-card-inner {
  transform: translateY(-1px);
  background: rgba(0, 0, 0, 0.15);
}
.newyear-gift__selected-card-image-wrap {
  width: 38px;
  border-radius: 6px;
  flex-shrink: 0;
  background: #222;
}
.newyear-gift__selected-card-image {
  width: 100%;
  height: 100%;
  display: block;
}
.newyear-gift__selected-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.newyear-gift__selected-card-rank {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  align-self: flex-start;
}
.newyear-gift__selected-card-title {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
  color: white;
}
.newyear-gift__sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.newyear-gift__sparkles-item {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  top: 10%;
  left: 15%;
  filter: blur(0.5px);
  animation: newyear-gift-sparkle 2.4s ease-in-out infinite;
}
.newyear-gift__sparkles-item:nth-child(2) {
  top: 18%;
  left: 70%;
  animation-delay: 0.6s;
}
.newyear-gift__sparkles-item:nth-child(3) {
  top: 30%;
  left: 40%;
  animation-delay: 1.2s;
}
.newyear-gift__snow-pop-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.newyear-gift__snow-pop {
  position: absolute;
  bottom: 0;
  background-image: url("/img/newyear/snowflake.svg");
  background-size: cover;
  opacity: 0;
  border-radius: 50%;
  animation: newyear-gift-snow-pop 0.8s ease-out forwards;
}
.newyear-gift__block {
  background: var(--dark-grey-bg);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.newyear-gift__block--wishes {
  margin-top: 10px;
}
.newyear-gift__block--inventory {
  margin-top: 4px;
}
.newyear-gift__block-title {
  font-size: 14px;
  margin-bottom: 6px;
}
.newyear-gift__text {
  font-size: 12px;
  opacity: 0.9;
  margin-bottom: 6px;
}
.newyear-gift__textarea {
  width: 100%;
  min-height: 90px;
  border-radius: 10px;
  border: none;
  resize: vertical;
  padding: 8px 10px;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.1);
  color: #fff;
  outline: none;
}
.newyear-gift__actions {
  margin-top: 10px;
}
.newyear-gift__submit {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  background: linear-gradient(90deg, #ff4b6e, #ff9354);
  color: #fff;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.newyear-gift__submit:active {
  transform: translateY(1px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.7);
  filter: brightness(0.95);
}
.newyear-gift__actions-hint {
  margin-top: 10px;
  font-size: 11px;
  opacity: 0.9;
}
.newyear-gift .card-inventory-container--newyear-gift .card-filter-list__card {
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, outline 0.12s ease, opacity 0.12s ease;
}
.newyear-gift .card-inventory-container--newyear-gift .card-filter-list__card.newyear-gift__inventory-card--selected {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 12px rgba(180, 120, 255, 0.55);
  outline: 2px solid rgba(200, 150, 255, 0.7);
  outline-offset: 1px;
}
.newyear-gift__inventory-hint {
  margin-top: 6px;
  font-size: 11px;
  opacity: 0.9;
}
.newyear-gift__timer {
  font-size: 12px;
  opacity: 0.95;
}
.newyear-gift__timer-value {
  font-weight: 600;
  margin-left: 4px;
}
.newyear-gift__stats {
  margin-top: 4px;
  font-size: 11px;
  opacity: 0.9;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.newyear-gift__stats-item::before {
  content: "•";
  margin-right: 3px;
  opacity: 0.8;
}
.newyear-gift__mood {
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.75;
  color: white;
}
.newyear-gift__ready {
  background: radial-gradient(circle at top, rgba(255, 255, 255, 0.08), transparent 55%), linear-gradient(135deg, rgba(79, 0, 130, 0.8), rgba(9, 57, 120, 0.95));
  border-radius: 16px;
  padding: 14px 14px 18px;
  margin-bottom: 20px;
}
.newyear-gift__ready-left {
  margin-bottom: 12px;
}
.newyear-gift__ready-box {
  color: white;
  position: relative;
  padding: 12px 12px 14px;
  border-radius: 14px;
  background: radial-gradient(circle at top, rgba(255, 255, 255, 0.08), transparent 55%), linear-gradient(135deg, rgba(79, 0, 130, 0.8), rgba(9, 57, 120, 0.95));
}
.newyear-gift__ready-label {
  font-size: 11px;
  opacity: 0.9;
  margin-bottom: 4px;
}
.newyear-gift__ready-title {
  font-size: 15px;
  margin-bottom: 8px;
}
.newyear-gift__ready-text {
  font-size: 12px;
  margin-bottom: 6px;
}
.newyear-gift__ready-description {
  opacity: 0.9;
}
.newyear-gift__ready-hint {
  font-size: 11px;
  opacity: 0.9;
  margin-top: 4px;
}
.newyear-gift__cards-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.newyear-gift__card {
  width: calc(50% - 4px);
}
.newyear-gift__card-image {
  width: 100%;
  border-radius: 6px;
  display: block;
}
.newyear-gift__card-placeholder {
  font-size: 11px;
  padding: 12px 6px;
  text-align: center;
  opacity: 0.85;
}
.newyear-gift__card-name {
  font-size: 11px;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 768px) {
  .newyear-gift__title {
    font-size: 26px;
  }
  .newyear-gift__layout, .newyear-gift__ready {
    flex-direction: row;
  }
  .newyear-gift__column--left {
    flex: 0 0 360px;
    max-width: 360px;
  }
  .newyear-gift__column--right {
    flex: 1 1 auto;
    min-width: 0;
  }
  .newyear-gift__ready-left {
    flex: 0 0 360px;
    max-width: 360px;
    margin-bottom: 0;
    margin-right: 16px;
  }
  .newyear-gift__ready-right {
    flex: 1 1 auto;
    min-width: 0;
  }
  .newyear-gift__selected-card {
    width: calc(50% - 3px);
  }
  .newyear-gift__card {
    width: calc(19.333% - 6px);
  }
}
@media (min-width: 1024px) {
  .newyear-gift__title {
    font-size: 28px;
  }
  .newyear-gift__magic-card {
    padding: 16px 16px 18px;
  }
}

/* Анимации */
@keyframes newyear-gift-snow-move {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 200px;
  }
}
@keyframes newyear-gift-sparkle {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  60% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(12px) scale(0.8);
    opacity: 0;
  }
}
@keyframes newyear-gift-snow-pop {
  0% {
    transform: translate(-50%, 10px) scale(0.5);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -40px) scale(1);
    opacity: 0;
  }
}
.newyear-gift__magic-box--wiggle {
  animation: newyear-gift-wiggle 0.4s ease;
}

@keyframes newyear-gift-wiggle {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-2px);
  }
  50% {
    transform: translateX(2px);
  }
  75% {
    transform: translateX(-1px);
  }
  100% {
    transform: translateX(0);
  }
}
.newyear-gift__feed {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.newyear-gift__feed-title {
  font-size: 12px;
  opacity: 0.9;
  margin-bottom: 4px;
}
.newyear-gift__feed-list {
  max-height: 120px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.newyear-gift__feed-item {
  font-size: 11px;
  opacity: 0.9;
  padding: 3px 0;
}

.newyear-gift__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 999;
  color: white;
}
.newyear-gift__overlay--visible {
  opacity: 1;
  pointer-events: auto;
}
.newyear-gift__overlay-inner {
  background: radial-gradient(circle at top, rgba(255, 255, 255, 0.12), transparent 60%), linear-gradient(145deg, #2a1547, #053046);
  border-radius: 16px;
  padding: 18px 20px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
  max-width: 260px;
}
.newyear-gift__overlay-icon {
  font-size: 26px;
  margin-bottom: 6px;
}
.newyear-gift__overlay-title {
  font-size: 15px;
  margin-bottom: 4px;
}
.newyear-gift__overlay-text {
  font-size: 12px;
  opacity: 0.9;
}

@keyframes newyearPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}
.newyear-gift__type-select {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.newyear-gift__type-select-title {
  font-size: 14px;
  margin-bottom: 17px;
}

.newyear-gift__type-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.newyear-gift__type-option {
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: 0.2s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.newyear-gift__type-option:hover:not(.is-disabled) {
  opacity: 0.95;
}

.newyear-gift__type-option.is-active {
  background: linear-gradient(90deg, #b84cff, #6a00ff);
  box-shadow: 0 0 8px rgba(138, 43, 226, 0.5);
  color: #fff;
}

.newyear-gift__type-option.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Оверлей метели на весь экран */
.winter-snowstorm {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
  opacity: 1;
  transition: opacity 1.5s ease;
}

/* Плавное исчезновение */
.winter-snowstorm--fadeout {
  opacity: 0;
}

/* Снежинка — видна на светлой и тёмной теме */
.winter-snowstorm__flake {
  position: absolute;
  top: -10vh;
  color: #ffffff;
  font-weight: 700;
  /* тёмная чёткая окантовка вокруг снежинки */
  -webkit-text-stroke: 0.8px rgba(40, 40, 60, 0.95);
  /* комбинированное свечение + тёмная тень */
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.85), 0 0 10px rgba(200, 180, 255, 0.7), 1px 1px 1px rgba(0, 0, 0, 0.85), -1px -1px 1px rgba(0, 0, 0, 0.85);
  /* дополнительное затемнение для светлых фонов */
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9));
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  will-change: transform, opacity;
  animation-name: winter-snowstorm-fall;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

/* Анимация падения */
@keyframes winter-snowstorm-fall {
  0% {
    transform: translate3d(0, -10vh, 0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translate3d(15px, 50vh, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(-15px, 110vh, 0);
    opacity: 0;
  }
}
/* Адаптация для малых экранов */
@media (max-width: 360px) {
  .winter-snowstorm__flake {
    font-size: 8px !important;
    -webkit-text-stroke: 0.6px rgba(40, 40, 60, 0.9);
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.8), 1px 1px 0 rgba(0, 0, 0, 0.8), -1px -1px 0 rgba(0, 0, 0, 0.8);
  }
}
/* Бейдж внизу экрана */
.winter-visit-badge {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%) translateY(100%);
  padding: 10px 18px;
  border-radius: 999px;
  /* тёмное "стекло", видно и на светлой, и на тёмной теме */
  background: rgba(15, 18, 30, 0.94);
  color: #f9f9ff;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Показать бейдж */
.winter-visit-badge--visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.newyear-gift__ready-receiver {
  margin-bottom: 8px;
  font-weight: 500;
  opacity: 0.85;
}

.newyear-gift__ready-receiver a {
  font-weight: 600;
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

button, hr, input {
  overflow: visible;
}

progress, sub, sup {
  vertical-align: baseline;
}

[type=checkbox], [type=radio], legend {
  box-sizing: border-box;
  padding: 0;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

details, main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
}

code, kbd, pre, samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

b, strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button, select {
  text-transform: none;
}

[type=button], [type=reset], [type=submit], button {
  -webkit-appearance: button;
}

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring {
  outline: ButtonText dotted 1px;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  color: inherit;
  display: table;
  max-width: 100%;
  white-space: normal;
}

textarea {
  overflow: auto;
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

summary {
  display: list-item;
}

[hidden], template {
  display: none;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.icon {
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
}

.icon-search::before {
  content: "\e8b6";
}

.icon-bookmarks::before {
  content: "\e98b";
}

.icon-sun::before {
  content: "\e3ab";
}

.icon-notification::before {
  content: "\e7f7";
}

.icon-profile::before {
  content: "\e853";
}

.icon-add-friend::before {
  content: "\e7fe";
}

.icon-remove-friend::before {
  content: "\ef66";
}

.icon-message::before {
  content: "\e158";
}

.icon-arrow-right::before {
  content: "\e409";
}

.icon-arrow-left::before {
  content: "\e408";
}

.icon-arrow-up {
  font-weight: 400;
  transform: rotate(-90deg);
}

.icon-arrow-up::before {
  content: "\e5e1";
}

.icon-arrow-down {
  font-weight: 400;
  transform: rotate(90deg);
}

.icon-arrow-down::before {
  content: "\e5e1";
}

.icon-expand-less::before {
  content: "\e5ce";
}

.icon-expand-more::before {
  content: "\e5cf";
}

.icon-arrow-reverse::before {
  content: "\ea18";
}

.icon-star::before {
  content: "\e743";
}

.icon-single-star::before {
  content: "\e838";
}

.icon-delete::before {
  content: "\e872";
}

.icon-all-list::before {
  content: "\e54b";
}

.icon-reading::before {
  content: "\e0e0";
}

.icon-will-read::before {
  content: "\e666";
}

.icon-read-already::before {
  content: "\ea19";
}

.icon-abandoned::before {
  content: "\eb80";
}

.icon-comment::before {
  content: "\e0b9";
}

.icon-number-list::before {
  content: "\e242";
}

.icon-heart::before {
  content: "\e87d";
}

.icon-close::before {
  content: "\e5cd";
}

.icon-settings::before {
  content: "\e8b8";
}

.icon-dots::before {
  content: "\e5d3";
}

.icon-lamp::before {
  content: "\e79a";
}

.icon-done::before {
  content: "\e877";
}

.icon-reply::before {
  content: "\e15e";
}

.icon-report::before {
  content: "\e160";
}

.icon-smile::before {
  content: "\e813";
}

.icon-spoiler::before {
  content: "\e86f";
}

.icon-heart-plus::before {
  content: "\f884";
}

.icon-rating::before {
  content: "\e7af";
}

.icon-login::before {
  content: "\ea77";
}

.icon-logout::before {
  content: "\e9ba";
}

.icon-swap-vert::before {
  content: "\e8d5";
}

.icon-eye::before {
  content: "\e8f4";
}

.icon-burger::before {
  content: "\e5d2";
}

.icon-new-arrow-prev {
  transform: rotate(180deg);
}

.icon-new-arrow-prev::before {
  content: "\e8e4";
}

.icon-new-arrow-next::before {
  content: "\e8e4";
}

.icon-home::before {
  content: "\e88a";
}

.icon-catalog::before {
  content: "\ef42";
}

.icon-popular::before {
  content: "\e7af";
}

.icon-collections::before {
  content: "\e1bd";
}

.icon-genres::before {
  content: "\e241";
}

.icon-copy::before {
  content: "\e14f";
}

.icon-link::before {
  content: "\e157";
}

.icon-edit::before {
  content: "\e9a2";
}

.icon-check-circle::before {
  content: "\e86c";
}

.icon-monitoring::before {
  content: "\f190";
}

.icon-wordstat::before {
  content: "\eae2";
  color: var(--red-color);
}

.icon-shop::before {
  content: "\ea12";
}

.icon-arrow-back::before {
  content: "\e5e0";
}

.icon-send::before {
  content: "\e163";
}

.icon-mail::before {
  content: "\e158";
}

.icon-lock::before {
  content: "\e897";
}

.icon-unlock::before {
  content: "\f656";
}

.icon-leaderboard::before {
  content: "\f6a0";
}

.icon-folder::before {
  content: "\e2c7";
}

.icon-add-folder::before {
  content: "\e2cc";
}

.icon-edit-folder::before {
  content: "\f775";
}

.icon-mass-edit-folder::before {
  content: "\f586";
}

.icon-user-add::before {
  content: "\e7fe";
}

.icon-user-del::before {
  content: "\ef66";
}

.icon-user-accept::before {
  content: "\f565";
}

.icon-user-decline::before {
  content: "\f566";
}

.icon-pending::before {
  content: "\ef64";
}

.icon-yuan::before {
  content: "\eaf9";
}

.icon-yen::before {
  content: "\eafb";
}

.icon-korean::before {
  content: "\f75d";
}

.icon-paint::before {
  content: "\e243";
}

.icon-chat::before {
  content: "\e0b7";
}

.icon-drag::before {
  content: "\e25d";
}

.icon-gift::before {
  content: "\ef91";
}

.icon-summon::before {
  content: "\e0e6";
}

.icon-negative::before {
  content: "\e811";
}

.icon-neutral::before {
  content: "\e812";
}

.icon-positive::before {
  content: "\e813";
}

.icon-feather::before {
  content: "\ea3e";
}

.icon-ignore::before {
  content: "\e510";
}

.icon-info::before {
  content: "\e887";
}

.k-arrow-down::before {
  content: "\e313";
}

.icon-photo::before {
  content: "\e43f";
}

.icon-pro::before {
  content: "\e031";
}

.icon-ad-off::before {
  content: "\f7b2";
}

.icon-like-plus::before {
  content: "\f884";
}

.icon-fire::before {
  content: "\ef55";
}

.icon-sms::before {
  content: "\e625";
}

.icon-feed::before {
  content: "\eb81";
}

.icon-loop::before {
  content: "\e028";
}

.icon-cards::before {
  content: "\f5dc";
}

.icon-upload::before {
  content: "\f09b";
}

.icon-thump-up::before {
  content: "\e8dc";
}

.icon-thump-down::before {
  content: "\e8db";
}

.icon-handshake::before {
  content: "\ebcb";
}

.icon-question::before {
  content: "\eb8b";
}

.icon-deck::before {
  content: "\f562";
}

.icon-deck-create::before {
  content: "\f563";
}

.icon-pin::before {
  content: "\e6aa";
}

.icon-done-all::before {
  content: "\e877";
}

.icon-arrow-drop-down::before {
  content: "\e5c5";
}

.icon-arrow-drop-up::before {
  content: "\e5c7";
}

.icon-notification-off::before {
  content: "\e7f6";
}

.icon-book::before {
  content: "\e0e0";
}

.icon-discount::before {
  content: "\f05b";
}

.icon-check::before {
  content: "\e5ca";
}

.icon-diamond::before {
  content: "\ead5";
}

.icon-pack::before {
  content: "\f569";
}

.icon-image::before {
  content: "\e3f4";
}

.icon-group::before {
  content: "\f233";
}

.icon-tag::before {
  content: "\e9ef";
}

.icon-star-half::before {
  content: "\ec45";
}

.icon-gif::before {
  content: "\f40e";
}

.icon-play::before {
  content: "\e1c4";
}

.icon-stop::before {
  content: "\e1a2";
}

.icon-plus::before {
  content: "\e145";
}

.icon-minus::before {
  content: "\e15b";
}

.icon-hammer::before {
  content: "\ea59";
}

.icon-user-group::before {
  content: "\e7f0";
}

.icon-gamepad::before {
  content: "\f135";
}

.icon-game::before {
  content: "\ea28";
}

.icon-chevron-right::before {
  content: "\e5cc";
}

.icon-chevron-left:before {
  content: "\e5cb";
}

.icon-volume:before {
  content: "\e050";
}

.icon-chest:before {
  content: "\e1a1";
}

.icon-calendar:before {
  content: "\e935";
}

.icon-sort-letters:before {
  content: "\e053";
}

.icon-block:before {
  content: "\e14b";
}

.icon-grid::before {
  content: "\e9b0";
}

.icon-scales::before {
  content: "\eb5f";
}

.icon-subscriptions::before {
  content: "\e064";
}

.icon-ads-click::before {
  content: "\e762";
}

.icon-circle-up::before {
  content: "\f182";
}

.icon-warning::before {
  content: "\e002";
}

.icon-puzzle::before {
  content: "\e87b";
}

.icon-auction::before {
  content: "\e90e";
}

.icon-game::before {
  content: "\ea28";
}

.icon-enchant::before {
  content: "\f31e";
}

.icon-trade-need::before {
  content: "\f854";
}

.icon-work::before {
  content: "\eb3f";
}

.icon-scroll::before {
  content: "\f5a0";
}

.icon-boost::before {
  content: "\e80e";
}

.icon-plus-one::before {
  content: "\efa4";
}

:root {
  --ss-primary-color: #5897fb;
  --ss-bg-color: #ffffff;
  --ss-font-color: #4d4d4d;
  --ss-font-placeholder-color: #8d8d8d;
  --ss-disabled-color: #8a8a8a;
  --ss-border-color: #dcdee2;
  --ss-highlight-color: #fffb8c;
  --ss-error-color: #dc3545;
  --ss-main-height: 30px;
  --ss-content-height: 300px;
  --ss-spacing-l: 25px;
  --ss-spacing-m: 10px;
  --ss-spacing-s: 3px;
  --ss-animation-timing: 0.2s;
  --ss-border-radius: 4px;
}

@keyframes ss-valueIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes ss-valueOut {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}
.ss-hide {
  display: none !important;
}

.ss-main {
  display: flex;
  flex-direction: row;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: var(--ss-font-color);
  min-height: var(--ss-main-height);
  width: 100%;
  padding: var(--ss-spacing-s);
  cursor: pointer;
  border: 1px solid var(--ss-border-color);
  border-radius: var(--ss-border-radius);
  background-color: var(--ss-bg-color);
  outline: 0;
  box-sizing: border-box;
  transition: background-color var(--ss-animation-timing);
}

.ss-main.ss-disabled {
  background-color: var(--ss-border-color);
}

.ss-main.ss-disabled .ss-values .ss-disabled {
  color: var(--ss-font-color);
}

.ss-main.ss-open-above {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.ss-main.ss-open-below {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.ss-main .ss-values {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--ss-spacing-m);
  flex: 1 1 100%;
}

.ss-main .ss-values .ss-placeholder {
  display: flex;
  padding: var(--ss-spacing-s) var(--ss-spacing-m) var(--ss-spacing-s) var(--ss-spacing-m);
  margin: auto 0px auto 0px;
  line-height: 1em;
  align-items: center;
  width: 100%;
  color: var(--ss-font-placeholder-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ss-main .ss-values .ss-single {
  display: flex;
  margin: auto 0px auto var(--ss-spacing-s);
}

.ss-main .ss-values .ss-value {
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  background-color: var(--purple-btn-bg);
  border-radius: var(--ss-border-radius);
  animation-name: ss-valueIn;
  animation-duration: var(--ss-animation-timing);
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

.ss-main .ss-values .ss-value.ss-value-out {
  animation-name: ss-valueOut;
  animation-duration: var(--ss-animation-timing);
  animation-timing-function: ease-out;
}

.ss-main .ss-values .ss-value .ss-value-text {
  font-size: 12px;
  color: var(--ss-bg-color);
  line-height: 11px;
  padding: var(--ss-spacing-s) var(--ss-spacing-m);
}

.ss-main .ss-values .ss-value .ss-value-delete {
  display: flex;
  align-items: center;
  height: var(--ss-spacing-l);
  width: var(--ss-spacing-l);
  padding: var(--ss-spacing-s) var(--ss-spacing-m);
  cursor: pointer;
  border-left: solid 1px transparent;
}

.ss-main .ss-values .ss-value .ss-value-delete svg {
  height: var(--ss-spacing-l);
  width: var(--ss-spacing-l);
}

.ss-main .ss-values .ss-value .ss-value-delete svg path {
  fill: none;
  stroke: var(--ss-bg-color);
  stroke-width: 18;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ss-main .ss-deselect {
  display: flex;
  align-self: center;
  justify-content: flex-end;
  flex: 0 1 auto;
  width: 8px;
  height: 8px;
  margin: 0 var(--ss-spacing-m) 0 var(--ss-spacing-m);
}

.ss-main .ss-deselect svg {
  width: 8px;
  height: 8px;
}

.ss-main .ss-deselect svg path {
  fill: none;
  stroke: var(--ss-font-color);
  stroke-width: 20;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ss-main .ss-arrow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 1 auto;
  width: 12px;
  height: 12px;
  margin: auto 5px auto 5px;
}

.ss-main .ss-arrow path {
  fill: none;
  stroke: #685e5e;
  stroke-width: 18;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition-timing-function: ease-out;
  transition: var(--ss-animation-timing);
}

.ss-content {
  position: absolute;
  display: flex;
  height: auto;
  flex-direction: column;
  width: auto;
  max-height: var(--ss-content-height);
  box-sizing: border-box;
  border: solid 1px var(--ss-border-color);
  background-color: var(--ss-bg-color);
  transition: transform var(--ss-animation-timing), opacity var(--ss-animation-timing);
  opacity: 0;
  transform: scaleY(0);
  overflow: hidden;
  z-index: 10000;
}

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

.ss-content.ss-open-above {
  opacity: 1;
  transform: scaleY(1);
  transform-origin: center bottom;
  border-top-left-radius: var(--ss-border-radius);
  border-top-right-radius: var(--ss-border-radius);
}

.ss-content.ss-open-below {
  opacity: 1;
  transform: scaleY(1);
  transform-origin: center top;
  border-bottom-left-radius: var(--ss-border-radius);
  border-bottom-right-radius: var(--ss-border-radius);
}

.ss-content .ss-search {
  flex: 0 1 auto;
  display: flex;
  flex-direction: row;
  padding: var(--ss-spacing-l) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l);
}

.ss-content .ss-search input {
  display: inline-flex;
  font-size: inherit;
  line-height: inherit;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0px;
  padding: var(--ss-spacing-m) var(--ss-spacing-l);
  margin: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--ss-border-radius);
  background-color: var(--light-bg);
  outline: 0;
  text-align: left;
  box-sizing: border-box;
  color: var(--main-text-color);
}

.ss-content .ss-search input::-moz-placeholder {
  color: var(--ss-font-placeholder-color);
  vertical-align: middle;
}

.ss-content .ss-search input::placeholder {
  color: var(--ss-font-placeholder-color);
  vertical-align: middle;
}

.ss-content .ss-search input:focus {
  box-shadow: 0 0 1px var(--main-purple-color);
}

.ss-content .ss-search .ss-addable {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  flex: 0 0 auto;
  height: auto;
  margin: 0 0 0 var(--ss-spacing-m);
  border: 1px solid var(--ss-border-color);
  border-radius: var(--ss-border-radius);
}

.ss-content .ss-search .ss-addable svg {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 1 auto;
  width: 12px;
  height: 12px;
  margin: auto var(--ss-spacing-m) auto var(--ss-spacing-m);
}

.ss-content .ss-search .ss-addable svg path {
  fill: none;
  stroke: var(--ss-font-color);
  stroke-width: 18;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ss-content .ss-list {
  flex: 1 1 auto;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

.ss-content .ss-list .ss-error {
  color: var(--ss-error-color);
  padding: var(--ss-spacing-l);
}

.ss-content .ss-list .ss-searching {
  color: var(--ss-font-color);
  padding: var(--ss-spacing-l);
}

.ss-content .ss-list .ss-optgroup .ss-optgroup-label {
  padding: var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l);
  font-weight: bold;
}

.ss-content .ss-list .ss-optgroup .ss-option {
  padding: var(--ss-spacing-s) var(--ss-spacing-s) var(--ss-spacing-s) calc(var(--ss-spacing-l) * 3);
}

.ss-content .ss-list .ss-optgroup-selectable {
  cursor: pointer;
}

.ss-content .ss-list .ss-optgroup-selectable:hover {
  color: var(--ss-bg-color);
  background-color: var(--ss-primary-color);
}

.ss-content .ss-list .ss-option {
  border-bottom: 1px solid var(--border-color);
  font-size: 14px;
  padding: var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.ss-content .ss-list .ss-option:last-of-type {
  border-bottom: none;
}

.ss-content .ss-list .ss-option:hover, .ss-content .ss-list .ss-option.ss-highlighted {
  background-color: rgba(0, 0, 0, 0.07);
}

.ss-content .ss-list .ss-option.ss-disabled {
  color: var(--ss-disabled-color);
  background-color: var(--medium-bg);
}

.ss-content .ss-list .ss-option:not(.ss-disabled).ss-option-selected {
  color: var(--ss-font-color);
  background-color: var(--ss-highlight-color);
}

.ss-content .ss-list .ss-option .ss-search-highlight {
  background-color: var(--ss-highlight-color);
} /**
 * Owl Carousel v2.3.4
 * Copyright 2013-2018 David Deutsch
 * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
 */
.owl-carousel, .owl-carousel .owl-item {
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.owl-carousel {
  display: none;
  width: 100%;
  z-index: 1;
}

.owl-carousel .owl-stage {
  position: relative;
  touch-action: manipulation;
  -moz-backface-visibility: hidden;
}

.owl-carousel .owl-stage:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.owl-carousel .owl-stage-outer {
  position: relative;
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}

.owl-carousel .owl-item, .owl-carousel .owl-wrapper {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
}

.owl-carousel .owl-item {
  min-height: 1px;
  float: left;
  -webkit-backface-visibility: hidden;
  -webkit-touch-callout: none;
}

.owl-carousel .owl-item img {
  display: block;
  width: 100%;
}

.owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled {
  display: none;
}

.no-js .owl-carousel, .owl-carousel.owl-loaded {
  display: block;
}

.owl-carousel .owl-dot, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-nav .owl-prev {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot {
  background: 0 0;
  color: inherit;
  border: none;
  padding: 0 !important;
  font: inherit;
}

.owl-carousel.owl-loading {
  opacity: 0;
  display: block;
}

.owl-carousel.owl-hidden {
  opacity: 0;
}

.owl-carousel.owl-refresh .owl-item {
  visibility: hidden;
}

.owl-carousel.owl-drag .owl-item {
  touch-action: pan-y;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.owl-carousel.owl-grab {
  cursor: move;
  cursor: grab;
}

.owl-carousel.owl-rtl {
  direction: rtl;
}

.owl-carousel.owl-rtl .owl-item {
  float: right;
}

.owl-carousel .animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.owl-carousel .owl-animated-in {
  z-index: 0;
}

.owl-carousel .owl-animated-out {
  z-index: 1;
}

.owl-carousel .fadeOut {
  animation-name: fadeOut;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.owl-height {
  transition: height 0.5s ease-in-out;
}

.owl-carousel .owl-item .owl-lazy {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.owl-carousel .owl-item .owl-lazy:not([src]), .owl-carousel .owl-item .owl-lazy[src^=""] {
  max-height: 0;
}

.owl-carousel .owl-item img.owl-lazy {
  transform-style: preserve-3d;
}

.owl-carousel .owl-video-wrapper {
  position: relative;
  height: 100%;
  background: #000;
}

.owl-carousel .owl-video-play-icon {
  position: absolute;
  height: 80px;
  width: 80px;
  left: 50%;
  top: 50%;
  margin-left: -40px;
  margin-top: -40px;
  cursor: pointer;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  transition: transform 0.1s ease;
}

.owl-carousel .owl-video-play-icon:hover {
  transform: scale(1.3, 1.3);
}

.owl-carousel .owl-video-playing .owl-video-play-icon, .owl-carousel .owl-video-playing .owl-video-tn {
  display: none;
}

.owl-carousel .owl-video-tn {
  opacity: 0;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: opacity 0.4s ease;
}

.owl-carousel .owl-video-frame {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%;
}

.owl-carousel {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.1s ease;
  -webkit-transition: opacity 0.1s ease;
  overflow: hidden;
}

.owl-carousel.owl-loaded {
  visibility: visible;
  opacity: 1;
}

.cards.owl-carousel {
  flex-wrap: nowrap;
}

/*
 * Note that this is toastr v2.1.3, the "latest" version in url has no more maintenance,
 * please go to https://cdnjs.com/libraries/toastr.js and pick a certain version you want to use,
 * make sure you copy the url from the website since the url may change between versions.
 * */
.toast-title {
  font-weight: 500;
}

.toast-message {
  -ms-word-wrap: break-word;
  word-wrap: break-word;
  margin-left: 10px;
}

.toast-message a,
.toast-message label {
  color: var(--main-purple-color);
}

.toast-message a:hover {
  color: #CCCCCC;
  text-decoration: none;
}

.toast-close-button {
  position: relative;
  right: -0.3em;
  top: -0.3em;
  float: right;
  font-size: 20px;
  font-weight: bold;
  color: #FFFFFF;
  -webkit-text-shadow: 0 1px 0 #ffffff;
  text-shadow: 0 1px 0 #ffffff;
  opacity: 0.8;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  filter: alpha(opacity=80);
  line-height: 1;
}

.toast-close-button:hover,
.toast-close-button:focus {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.4;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  filter: alpha(opacity=40);
}

.rtl .toast-close-button {
  left: -0.3em;
  float: left;
  right: 0.3em;
}

/*Additional properties for button version
 iOS requires the button element instead of an anchor tag.
 If you want the anchor version, it requires `href="#"`.*/
button.toast-close-button {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
}

.toast-top-center {
  top: 0;
  right: 0;
  width: 100%;
}

.toast-bottom-center {
  bottom: 0;
  right: 0;
  width: 100%;
}

.toast-top-full-width {
  top: 0;
  right: 0;
  width: 100%;
}

.toast-bottom-full-width {
  bottom: 0;
  right: 0;
  width: 100%;
}

.toast-top-left {
  top: 12px;
  left: 12px;
}

.toast-top-right {
  bottom: 0;
  right: 50%;
  transform: translate(50%, 0%);
}

.toast-bottom-right {
  right: 12px;
  bottom: 12px;
}

.toast-bottom-left {
  bottom: 12px;
  left: 12px;
}

#toast-container {
  position: fixed;
  z-index: 999999;
  pointer-events: none;
  /*overrides*/
}

#toast-container * {
  box-sizing: border-box;
}

#toast-container > div {
  position: relative;
  pointer-events: auto;
  overflow: hidden;
  margin: 0 0 6px;
  padding: 20px 15px 20px 50px;
  width: 350px;
  border-radius: var(--main-border-radius);
  background-position: 15px center;
  background-repeat: no-repeat;
  color: var(--main-text-color);
  font-size: 15px;
  line-height: 20px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.08);
  background: var(--light-bg);
}

#toast-container > div.rtl {
  direction: rtl;
  padding: 15px 50px 15px 15px;
  background-position: right 15px center;
}

#toast-container > div:hover {
  cursor: pointer;
}

#toast-container.toast-top-center > div,
#toast-container.toast-bottom-center > div {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

#toast-container.toast-top-full-width > div,
#toast-container.toast-bottom-full-width > div {
  width: 96%;
  margin-left: auto;
  margin-right: auto;
}

.toast {
  background-color: #030303;
}
.toast::before {
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: white;
  position: absolute;
  left: 17px;
  top: 50%;
  transform: translate(0%, -50%);
  font-size: 24px;
}

.toast-success::before {
  content: "\e876";
  background: #0abf30;
}

.toast-error::before {
  content: "\e5cd";
  background: #f33950;
}

.toast-info::before {
  content: "\e876";
  background: #35c4fc;
}

.toast-warning::before {
  content: "\e645";
  background: #ffb70a;
}

.toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  background-color: #000000;
  opacity: 0.4;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  filter: alpha(opacity=40);
}

/*Responsive Design*/
@media all and (max-width: 359px) {
  #toast-container > div {
    padding: 12px 8px 12px 50px;
    width: 290px;
  }
  #toast-container > div.rtl {
    padding: 12px 50px 12px 8px;
  }
  #toast-container .toast-close-button {
    right: -0.2em;
    top: -0.2em;
  }
  #toast-container .rtl .toast-close-button {
    left: -0.2em;
    right: 0.2em;
  }
}
@media all and (min-width: 360px) and (max-width: 480px) {
  #toast-container > div {
    padding: 16px 8px 16px 50px;
    width: 340px;
  }
  #toast-container > div.rtl {
    padding: 8px 50px 8px 8px;
  }
  #toast-container .toast-close-button {
    right: -0.2em;
    top: -0.2em;
  }
  #toast-container .rtl .toast-close-button {
    left: -0.2em;
    right: 0.2em;
  }
}
@media all and (min-width: 481px) and (max-width: 768px) {
  #toast-container > div {
    padding: 20px 15px 20px 50px;
    width: 25em;
  }
  #toast-container > div.rtl {
    padding: 20px 50px 20px 15px;
  }
}
/*!
 * Cropper.js v1.6.2
 * https://fengyuanchen.github.io/cropperjs
 *
 * Copyright 2015-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2024-04-21T07:43:02.731Z
 */
.cropper-container {
  -webkit-touch-callout: none;
  direction: ltr;
  font-size: 0;
  line-height: 0;
  position: relative;
  touch-action: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.cropper-container img {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: block;
  height: 100%;
  image-orientation: 0deg;
  max-height: none !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100%;
}

.cropper-canvas, .cropper-crop-box, .cropper-drag-box, .cropper-modal, .cropper-wrap-box {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.cropper-canvas, .cropper-wrap-box {
  overflow: hidden;
}

.cropper-drag-box {
  background-color: #fff;
  opacity: 0;
}

.cropper-modal {
  background-color: #000;
  opacity: 0.5;
}

.cropper-view-box {
  display: block;
  height: 100%;
  outline: 1px solid #39f;
  outline-color: rgba(51, 153, 255, 0.75);
  overflow: hidden;
  width: 100%;
}

.cropper-dashed {
  border: 0 dashed #eee;
  display: block;
  opacity: 0.5;
  position: absolute;
}

.cropper-dashed.dashed-h {
  border-bottom-width: 1px;
  border-top-width: 1px;
  height: 33.33333%;
  left: 0;
  top: 33.33333%;
  width: 100%;
}

.cropper-dashed.dashed-v {
  border-left-width: 1px;
  border-right-width: 1px;
  height: 100%;
  left: 33.33333%;
  top: 0;
  width: 33.33333%;
}

.cropper-center {
  display: block;
  height: 0;
  left: 50%;
  opacity: 0.75;
  position: absolute;
  top: 50%;
  width: 0;
}

.cropper-center:after, .cropper-center:before {
  background-color: #eee;
  content: " ";
  display: block;
  position: absolute;
}

.cropper-center:before {
  height: 1px;
  left: -3px;
  top: 0;
  width: 7px;
}

.cropper-center:after {
  height: 7px;
  left: 0;
  top: -3px;
  width: 1px;
}

.cropper-face, .cropper-line, .cropper-point {
  display: block;
  height: 100%;
  opacity: 0.1;
  position: absolute;
  width: 100%;
}

.cropper-face {
  background-color: #fff;
  left: 0;
  top: 0;
}

.cropper-line {
  background-color: #39f;
}

.cropper-line.line-e {
  cursor: ew-resize;
  right: -3px;
  top: 0;
  width: 5px;
}

.cropper-line.line-n {
  cursor: ns-resize;
  height: 5px;
  left: 0;
  top: -3px;
}

.cropper-line.line-w {
  cursor: ew-resize;
  left: -3px;
  top: 0;
  width: 5px;
}

.cropper-line.line-s {
  bottom: -3px;
  cursor: ns-resize;
  height: 5px;
  left: 0;
}

.cropper-point {
  background-color: #39f;
  height: 5px;
  opacity: 0.75;
  width: 5px;
}

.cropper-point.point-e {
  cursor: ew-resize;
  margin-top: -3px;
  right: -3px;
  top: 50%;
}

.cropper-point.point-n {
  cursor: ns-resize;
  left: 50%;
  margin-left: -3px;
  top: -3px;
}

.cropper-point.point-w {
  cursor: ew-resize;
  left: -3px;
  margin-top: -3px;
  top: 50%;
}

.cropper-point.point-s {
  bottom: -3px;
  cursor: s-resize;
  left: 50%;
  margin-left: -3px;
}

.cropper-point.point-ne {
  cursor: nesw-resize;
  right: -3px;
  top: -3px;
}

.cropper-point.point-nw {
  cursor: nwse-resize;
  left: -3px;
  top: -3px;
}

.cropper-point.point-sw {
  bottom: -3px;
  cursor: nesw-resize;
  left: -3px;
}

.cropper-point.point-se {
  bottom: -3px;
  cursor: nwse-resize;
  height: 20px;
  opacity: 1;
  right: -3px;
  width: 20px;
}

@media (min-width: 768px) {
  .cropper-point.point-se {
    height: 15px;
    width: 15px;
  }
}
@media (min-width: 992px) {
  .cropper-point.point-se {
    height: 10px;
    width: 10px;
  }
}
@media (min-width: 1200px) {
  .cropper-point.point-se {
    height: 5px;
    opacity: 0.75;
    width: 5px;
  }
}
.cropper-point.point-se:before {
  background-color: #39f;
  bottom: -50%;
  content: " ";
  display: block;
  height: 200%;
  opacity: 0;
  position: absolute;
  right: -50%;
  width: 200%;
}

.cropper-invisible {
  opacity: 0;
}

.cropper-bg {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
}

.cropper-hide {
  display: block;
  height: 0;
  position: absolute;
  width: 0;
}

.cropper-hidden {
  display: none !important;
}

.cropper-move {
  cursor: move;
}

.cropper-crop {
  cursor: crosshair;
}

.cropper-disabled .cropper-drag-box, .cropper-disabled .cropper-face, .cropper-disabled .cropper-line, .cropper-disabled .cropper-point {
  cursor: not-allowed;
}

body {
  font-family: "Exo 2", sans-serif;
  height: 100%; /*прижать футер*/
  color: var(--main-text-color);
}

:root {
  --title-color: #232323;
  --icons-color: #5f6368;
  --main-text-color: rgba(0,0,0,.87);
  --secondary-text-color: rgba(0,0,0,.6);
  --dark-bg: rgba(14,13,32,.4);
  --main-border-radius: 8px;
  --grey-background: linear-gradient( 90deg,#fff,#f9f9f9 5%,#f9f9f9 95%,#fff);
  --main-purple-color: #8b00ff;
  --secondary-purple-color: #8b00ff;
  --purple-btn-bg: #772ce8;
  --light-bg: #fff;
  --medium-bg: hsla(0, 0%, 55%, 0.05);
  --red-color: #fc363b;
  --green-color: #093;
  --border-color: rgba(0, 0, 0, 0.09);
  --secondary-border-radius: 15px;
  --white-color: #fff;
  --rating-bg-green: #eefbf3;
  --rating-bg-red: #fff1f1;
  --bg-inverse: #323232;
  --seconday-bg-color: rgba(34,36,38,.1);
  --chapters-hover: rgb(144 150 155 / 10%);
  --chapters-isRead: hsla(0,0%,55%,.01);
  --indicator-border: #f9f9f9;
  --checkbox-color: #f3f3f3;
  --chapter-visited: #772ce8;
  --gradient-color: linear-gradient(90deg,#ff5c4d,#eb469f 30%,#8341ef 75%,#3f68f9);
  --notification-not-read-color: #efe6f6;
  --dark-grey-bg: #ececec;
  --invert: invert(0);
  --test1: red;
}

body.dark {
  --title-color: hsla(0,0%,100%,.77);
  --main-text-color: hsla(0,0%,100%,.77);
  --icons-color: hsla(0,0%,100%,.77);
  --secondary-text-color:hsla(0,0%,100%,.6);
  --dark-bg: rgba(14, 13, 32, 0.4);
  --main-border-radius: 6px;
  --grey-background: #121212;
  --main-purple-color: #8b00ff;
  --secondary-purple-color: #bf94ff;
  --purple-btn-bg: #772ce8;
  --light-bg: #171717;
  --medium-bg: #1b1b1b;
  --border-color: hsla(0,0%,59%,.1);
  --rating-bg-green: rgba(89,89,89,.05);
  --rating-bg-red: rgba(89,89,89,.05);
  --bg-inverse: #fff;
  --seconday-bg-color: #2a2a2a;
  --chapters-hover: rgb(144 150 155 / 10%);
  --indicator-border: #121212;
  --checkbox-color: #1b1b1b;
  --chapter-visited: #000;
  --notification-not-read-color: #261f2d;
  --dark-grey-bg: #202020;
  --invert: invert(1);
}

.wrapper {
  min-height: 100vh; /*прижать футер*/
  display: flex;
  flex-direction: column;
}

@media only screen and (min-width: 993px) {
  .col.l9 {
    width: 80%;
    margin-left: auto;
    left: auto;
    right: auto;
    padding-right: 30px;
  }
  .col.l3 {
    width: 20%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
}
.red-color {
  color: var(--red-color);
}

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

.switch {
  margin-bottom: 20px;
}

.switch-for {
  cursor: pointer;
  font-size: 14px;
  position: relative;
}

.switch-for::after {
  content: "";
  width: 30px;
  height: 8px;
  border-radius: 15px;
  position: absolute;
  top: 6px;
  right: -40px;
  background: var(--medium-bg);
  transition-duration: 300ms;
}

.switch-for::before {
  content: "";
  width: 15px;
  height: 15px;
  background: var(--purple-btn-bg);
  border-radius: 50%;
  position: absolute;
  right: -24px;
  top: 3px;
  z-index: 1;
  transition-duration: 300ms;
}

.switch-input {
  display: none;
}

.switch-input:checked + .switch-for::before {
  transform: translateX(18px);
}

.switch-input:checked + .switch-for::after {
  background: var(--purple-btn-bg);
}

.main-title {
  color: var(--title-color);
  font-weight: 600;
  margin: 15px 0;
  font-size: 30px;
}
@media screen and (max-width: 550px) {
  .main-title {
    font-size: 25px;
  }
}

.secondary-title {
  color: var(--title-color);
  font-weight: 600;
  margin: 15px 0;
  font-size: 1.5em;
}

.small-title {
  color: var(--main-text-color);
  font-weight: 400;
  font-size: 17px;
  margin: 15px 0;
}

.button {
  border: none;
  background: var(--medium-bg);
  border-radius: var(--main-border-radius);
  color: var(--main-text-color);
  padding: 9px 10px;
  cursor: pointer;
  font-weight: 400;
  letter-spacing: 0.5px;
  font-size: 14px;
  text-align: center;
}
.button--white {
  display: flex;
  align-items: center;
  font-size: 14px;
  padding: 10px 15px;
  border: 1px solid var(--border-color);
  border-radius: 25px;
}
.button--left-icon {
  display: flex;
  align-items: center;
}
.button--left-icon i {
  margin-right: 3px;
  font-size: 17px;
}
.button:hover {
  opacity: 0.7;
}
@media screen and (max-width: 900px) {
  .button:hover {
    opacity: 1;
  }
}
.button:active {
  transform: translateY(1px);
}
.button--block {
  width: 100%;
  display: block;
}
.button--primary {
  background-color: var(--purple-btn-bg);
  color: white;
}
.button--primary:hover {
  color: white;
}
.button--disable {
  background-color: var(--dark-grey-bg) !important;
  color: var(--secondary-text-color) !important;
}
.button--disable:hover {
  color: var(--secondary-text-color) !important;
}
.button--danger {
  background-color: var(--red-color);
  color: white;
}
.button--danger:hover {
  color: white;
}
.button--attention {
  background: var(--gradient-color);
  color: white;
}
.button--attention:hover {
  background: linear-gradient(90deg, #fc5546, #ea3b99 30%, #7f3bee 75%, #3964f8);
  color: white;
}
.button--loading {
  color: transparent !important;
  position: relative;
}
.button--loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 4px solid transparent;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: button-loading-spinner 1s ease infinite;
}

@keyframes button-loading-spinner {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(1turn);
  }
}
.button-link {
  font-size: 13px;
}

.logo {
  color: var(--title-color);
  font-size: 2.5em;
  font-weight: bold;
  font-family: "Poppins", sans-serif;
  margin-right: 25px;
  outline: none;
  transition: color 0.4s;
  position: relative;
  /*    &::before {
          content: "";
          position: absolute;
          left: -10px;
          top: 0;
          z-index: 22;
          background-image: url(/assets/new-year/v4.png);
          background-repeat: no-repeat;
          background-size: auto 30px;
          width: 50px;
          height: 30px;
      }*/
}
.logo span {
  color: var(--main-purple-color);
  transition: color 0.4s;
}
.logo:hover span {
  color: var(--main-text-color);
}
@media screen and (max-width: 500px) {
  .logo {
    font-size: 2.2em;
  }
}
@media screen and (max-width: 350px) {
  .logo {
    font-size: 2em;
    margin-right: 10px;
  }
}

.container {
  margin: 0 auto;
  max-width: 1400px;
  padding-left: 10px;
  padding-right: 10px;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}
.cards__footer {
  display: flex;
  color: var(--secondary-text-color);
  font-size: 13px;
}
.cards__footer-volume {
  margin-right: 10px;
}
.cards__rating {
  position: absolute;
  padding: 1px 7px;
  bottom: 10px;
  right: 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  border-radius: 7px;
  transition: all 0.5s;
  z-index: 2;
  display: none;
}
.cards__rating--green {
  background-color: var(--green-color);
}
.cards__rating--red {
  background-color: var(--red-color);
}
.cards__rating--grey {
  background-color: #4a4a4a;
}
@media screen and (max-width: 1200px) {
  .cards--full-page .cards__item {
    width: 16.6666%;
  }
}
@media screen and (max-width: 1050px) {
  .cards--full-page .cards__item {
    width: 20%;
  }
}
@media screen and (max-width: 850px) {
  .cards--full-page .cards__item {
    width: 25%;
  }
}
@media screen and (max-width: 650px) {
  .cards--full-page .cards__item {
    width: 33.3333%;
  }
}
@media screen and (max-width: 374px) {
  .cards--full-page .cards__item {
    width: 50%;
  }
}
.cards__item {
  width: 12.5%;
  height: auto;
  margin-bottom: 25px;
  padding: 0 10px;
  position: relative;
}
.cards__item:hover .cards__img, .cards__item:hover .cards__name {
  opacity: 0.7;
}
.cards__img {
  display: block;
  width: 100%;
  padding-top: 140%;
  background-size: cover;
  background-position: 50%;
  margin-bottom: 10px;
  border-radius: var(--main-border-radius);
  background-color: var(--light-bg);
  position: relative;
}
.cards__name {
  margin-bottom: 5px;
  color: var(--main-text-color);
  font-weight: 500;
  font-size: 15px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cards__info {
  color: var(--secondary-text-color);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cards-detailed {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}
.cards-detailed__inner {
  display: flex;
  background: var(--light-bg);
  border-radius: var(--main-border-radius);
  height: 170px;
}
.cards-detailed__inner:hover {
  background: var(--medium-bg);
}
.cards-detailed__item {
  padding: 0 10px;
  width: 50%;
  margin-bottom: 20px;
}
@media screen and (max-width: 1000px) {
  .cards-detailed__item {
    width: 100%;
  }
}
.cards-detailed__poster {
  width: 120px;
  flex-shrink: 0;
}
.cards-detailed__poster img {
  border-radius: var(--main-border-radius);
}
.cards-detailed__wrapper {
  display: flex;
  align-items: center;
  padding: 0 20px;
}
.cards-detailed__type {
  color: var(--secondary-text-color);
  font-size: 14px;
  margin-bottom: 6px;
}
.cards-detailed__name {
  font-weight: 500;
  font-size: 17px;
  color: var(--main-text-color);
  margin-bottom: 6px;
}
.cards-detailed__genres {
  color: var(--secondary-text-color);
  font-size: 14px;
  margin-bottom: 6px;
}
.cards-detailed__info {
  font-size: 14px;
  color: var(--main-text-color);
}
.cards-detailed__info span {
  color: var(--secondary-text-color);
  margin-left: 5px;
}

.main {
  background: var(--grey-background);
  padding: 15px 0;
  flex: 1 1 auto;
}

.footer {
  padding: 20px 0;
  background: var(--light-bg);
}
.footer__desc {
  font-size: 13px;
  color: var(--main-text-color);
  line-height: 20px;
  letter-spacing: 0.4px;
}
@media screen and (max-width: 640px) {
  .footer__desc {
    text-align: center;
  }
}
.footer__desc-link {
  color: var(--secondary-purple-color);
}
.footer__copyright {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: var(--main-text-color);
}
@media screen and (max-width: 895px) {
  .footer__copyright {
    flex-direction: column;
  }
}
.footer__copyright-name {
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1px;
  margin-right: 20px;
}
@media screen and (max-width: 895px) {
  .footer__copyright-name {
    margin-right: 0;
  }
}
.footer__item {
  margin-left: 20px;
}
.footer__item-tg {
  background: #00a7e3;
  display: flex;
  align-items: center;
  padding: 3px 12px;
  color: white;
  border-radius: 20px;
  transition: opacity 0.3s;
}
@media screen and (max-width: 895px) {
  .footer__item-tg {
    margin-top: 5px;
  }
}
.footer__item-tg:hover {
  color: white;
  opacity: 0.8;
}
.footer__item-tg svg {
  width: 20px;
  margin-right: 5px;
  fill: white;
}
.footer__item:first-of-type {
  margin-left: 0;
}
@media screen and (max-width: 895px) {
  .footer__item {
    padding: 5px 12px;
    margin-left: 0;
  }
}

.manga {
  display: flex;
  padding-top: 20px;
}
.manga__report {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 760px) {
  .manga__report {
    display: none;
  }
}
.manga__report i {
  font-size: 18px;
  margin-right: 5px;
}
@media screen and (max-width: 760px) {
  .manga {
    flex-direction: column;
    padding-top: 0;
  }
}
.manga__translator {
  margin-bottom: 15px;
}
.manga__translator-image {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  flex-shrink: 0;
}
.manga__translator-image img {
  border-radius: 50%;
}
.manga__translator-item {
  display: flex;
  align-items: center;
}
.manga__translator-title {
  font-weight: 400;
  margin-bottom: 10px;
  font-size: 15px;
}
.manga__left {
  flex-shrink: 0;
  width: 260px;
  margin-right: 35px;
}
@media screen and (max-width: 760px) {
  .manga__left {
    margin-right: 0;
    margin: 0 auto;
    margin-bottom: 20px;
  }
}
.manga__poster {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 760px) {
  .manga__poster {
    position: sticky;
    top: 10px;
  }
}
.manga__img {
  width: 260px;
  /*height: 400px;*/
  overflow: hidden; /* чтобы не вылезала за рамки */
  position: relative;
  border-radius: var(--main-border-radius);
  margin-bottom: 10px;
}
.manga__img img {
  width: 100%;
  height: 100%;
  /*object-fit: cover;      !* заполняет контейнер, не растягивая *!*/
  /*image-rendering: auto;  !* сглаживание (по умолчанию) *!
  -webkit-backface-visibility: hidden; !* помогает сглаживанию в Chrome *!
  transform: translateZ(0);            !* форсирует GPU-рендер *!*/
}
.manga__rating {
  font-size: 40px;
  font-weight: 700;
  cursor: pointer;
}
.manga__rating-info {
  flex-shrink: 0;
  margin-left: auto;
  text-align: right;
}
.manga__rating--red {
  color: var(--red-color);
}
.manga__rating--green {
  color: var(--green-color);
}
.manga__rating--grey {
  color: var(--secondary-text-color);
}
.manga__controls {
  display: flex;
  justify-content: space-between;
}
.manga__favourite-btn {
  margin-left: 10px;
  color: var(--secondary-text-color);
  font-size: 18px;
  line-height: 16px;
  height: 34px;
  display: flex;
  align-items: center;
}
.manga__views {
  color: var(--secondary-text-color);
  text-align: right;
  font-size: 13px;
}
.manga__middle {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
}
.manga__middle-wrapper {
  display: flex;
}
.manga__middle-link {
  font-size: 14px;
  color: var(--secondary-text-color);
}
.manga__middle-link:not(:last-child)::after {
  content: "·";
  padding: 0 5px;
}
.manga__name {
  font-size: 30px;
  font-weight: 500;
  margin: 0 5px 10px 0;
  color: var(--main-text-color);
}
.manga__name-alt {
  font-size: 14px;
  color: var(--secondary-text-color);
  margin: 0 0 10px;
  font-weight: 400;
  padding-right: 30px;
  line-height: 22px;
}
.manga__name-alt span:not(:last-of-type)::after {
  content: "/";
  padding: 0 5px;
}
@media screen and (max-width: 550px) {
  .manga__name-alt {
    padding-right: 0;
  }
}
.manga__description {
  margin-top: 20px;
  font-size: 15px;
  line-height: 22px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 20px;
  margin-bottom: 25px;
}
.manga__description .button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
}
.manga__description .button i {
  margin-right: 5px;
  font-size: 20px;
}
.manga__information {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  overflow-x: auto;
}
.manga__information-number {
  width: 15px;
}
@media screen and (max-width: 1060px) {
  .manga__information-table {
    margin-right: 20px;
    padding-bottom: 10px;
  }
  .manga__information-table:last-of-type {
    margin-bottom: 0;
  }
}
.manga__information-table:last-of-type {
  margin-right: 0;
}
.manga__information-table:last-of-type-item:nth-child(1) .manga__information-bar-fill {
  background-color: #b5e48c;
}
.manga__information-table:last-of-type-item:nth-child(2) .manga__information-bar-fill {
  background-color: #B9C79D;
}
.manga__information-table:last-of-type-item:nth-child(3) .manga__information-bar-fill {
  background-color: #EADB7F;
}
.manga__information-table:last-of-type-item:nth-child(4) .manga__information-bar-fill {
  background-color: #fbb851;
}
.manga__information-table:last-of-type-item:nth-child(5) .manga__information-bar-fill {
  background-color: #eb7476;
}
.manga__information i {
  font-size: 18px;
  margin-left: 5px;
}
.manga__information-title {
  font-weight: 400;
  margin-bottom: 15px;
  color: var(--main-text-color);
  font-size: 15px;
}
.manga__information-item {
  display: flex;
  align-items: center;
  color: var(--secondary-text-color);
  margin-bottom: 8px;
  font-size: 0.9em;
}
.manga__information-item:nth-child(1) .manga__information-bar-fill-rating {
  background-color: #b5e48c;
}
.manga__information-item:nth-child(2) .manga__information-bar-fill-rating {
  background-color: #B9C79D;
}
.manga__information-item:nth-child(3) .manga__information-bar-fill-rating {
  background-color: #EADB7F;
}
.manga__information-item:nth-child(4) .manga__information-bar-fill-rating {
  background-color: #fbb851;
}
.manga__information-item:nth-child(5) .manga__information-bar-fill-rating {
  background-color: #eb7476;
}
.manga__information-type {
  margin-right: 5px;
  width: 73px;
}
.manga__information-bar {
  height: 10px;
  background-color: var(--medium-bg);
  width: 250px;
  position: relative;
  margin: 0 10px;
  border-radius: 5px;
}
@media screen and (max-width: 360px) {
  .manga__information-bar {
    width: 200px;
  }
}
.manga__information-bar-fill, .manga__information-bar-fill-rating {
  background-color: var(--purple-btn-bg);
  height: 10px;
  border-radius: 5px;
  position: absolute;
  top: 0;
  left: 0;
}
.manga__information-percent {
  font-weight: 500;
  margin-left: auto;
}

.tags {
  display: flex;
  flex-wrap: wrap;
}
.tags__item {
  flex-shrink: 0;
  font-size: 13px;
  padding: 10px;
  background: var(--medium-bg);
  margin: 0 5px 5px 0;
  border-radius: var(--secondary-border-radius);
}
.tags__item:nth-child(n+6) {
  display: none;
}
.tags__item--warning {
  color: var(--red-color);
}
.tags__item-more {
  font-size: 13px;
  padding: 10px;
  color: var(--main-text-color);
}
.tags__item-more span {
  color: var(--main-purple-color);
}
.tags__item-more:hover {
  color: var(--main-purple-color);
}

.feed {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 750px) {
  .feed {
    flex-direction: column;
  }
}
.feed__left {
  width: 65%;
}
@media screen and (max-width: 750px) {
  .feed__left {
    width: 100%;
  }
}
.feed__right {
  width: 30%;
}
@media screen and (max-width: 750px) {
  .feed__right {
    width: 100%;
  }
}

.view {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.view__controls--friends {
  display: flex;
}
.view__controls--friends .button {
  padding: 9px 10px !important;
  display: flex;
  align-items: center;
}
.view__controls--friends .button i {
  font-size: 18px;
}
.view__controls button {
  padding: 4px;
}
.view__controls button:hover {
  background: var(--medium-bg);
  border-radius: 6px;
}

.grid__small::before {
  content: "\e9b0";
  font-family: "Material Symbols Rounded";
  font-size: 22px;
  font-weight: 300;
  color: var(--icons-color);
}
.grid__big::before {
  content: "\e5c3";
  font-family: "Material Symbols Rounded";
  font-size: 22px;
  color: var(--icons-color);
}

.auth {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 320px;
  margin: 0 auto;
}
@media only screen and (max-width: 350px) {
  .auth {
    justify-content: center;
    width: 300px;
  }
}
.auth__social {
  font-size: 14px;
  color: var(--main-text-color);
  margin-bottom: 16px;
  text-align: center;
}

.form {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.form__upload {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
}
.form__upload-input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.form__upload-label {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: 10px;
  background-color: var(--light-bg);
  cursor: pointer;
}
.form__upload-button {
  background-color: var(--purple-btn-bg);
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  margin-right: 10px;
  font-size: 14px;
  cursor: pointer;
}
.form__upload-name {
  font-size: 14px;
  color: var(--main-text-color);
}
.form__field {
  margin-bottom: 20px;
  border: 1px solid var(--border-color);
  background: var(--light-bg);
  border-radius: var(--main-border-radius);
  padding: 10px 15px;
  outline: var(--main-purple-color);
  color: var(--main-text-color);
}
.form__field--full {
  width: 100%;
}
.form__field:focus, .form__field:active {
  border-color: var(--main-purple-color);
}
.form__field::-moz-placeholder {
  font-size: 14px;
  color: var(--main-text-color);
}
.form__field::placeholder {
  font-size: 14px;
  color: var(--main-text-color);
}
.form__link {
  font-size: 13px;
  color: var(--main-text-color);
  margin-bottom: 20px;
}
.form__hr {
  width: 100%;
  height: 1px;
  border-bottom: 1px dashed var(--border-color);
  margin-bottom: 15px;
}
.form__title {
  margin-bottom: 12px;
}

.social {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 23px;
  margin-bottom: 23px;
  width: 100%;
  position: relative;
  border-bottom: 1px solid var(--border-color);
}
.social::after {
  content: "или";
  position: absolute;
  display: inline-block;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--grey-background);
  padding: 0 15px;
  color: var(--main-text-color);
  font-size: 13px;
}
.social__item {
  color: white;
  height: 40px;
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 13px;
  border-radius: var(--secondary-border-radius);
}
@media only screen and (max-width: 350px) {
  .social__item {
    height: 35px;
    width: 65px;
  }
}
.social__item svg {
  height: 15px;
  width: 15px;
  fill: white;
}
.social__item:last-of-type {
  margin-right: 0;
}
.social__item:hover {
  opacity: 0.7;
  color: white;
}
.social__google {
  background-color: #db4437;
}
.social__discord {
  background-color: #737af4;
}
.social__vk {
  background-color: #1da1f2;
}
.social__yandex {
  background-color: #fc3f1d;
}

/*.search {
    display: flex;
    align-items: center;
    input {
        border: 1px solid transparent;
        background: var(--medium-bg);
        font-size: 15px;
        height: 44px;
        border-radius: var(--main-border-radius);
        margin-right: 10px;
        padding: 0 10px;
        width: 100%;
        outline: var(--main-purple-color);
        color: var(--main-text-color);
        &:focus,
        &:active {
            border-color: var(--main-purple-color);
        }
        &::placeholder {
            font-size: 15px;
            color: var(--secondary-text-color);
        }
    }
    button {
        width: 35px;
        height: 35px;
        font-size: 18px;
        color: var(--white-color);
    }
}*/
.sort-select {
  border: none;
  background-color: unset;
}
.sort-select .ss-single {
  font-size: 15px;
  color: var(--main-text-color);
  cursor: pointer;
  letter-spacing: 0.5px;
  font-weight: 400;
  padding-left: 15px;
}
.sort-select .ss-single::before {
  font-family: "Material Symbols Rounded";
  content: "\e164";
  font-size: 18px;
  position: absolute;
  top: 51%;
  left: 0px;
  transform: translateY(-50%);
  display: block;
  pointer-events: none;
  font-weight: 300;
  color: var(--main-text-color);
}
.sort-select .ss-list {
  margin-top: 7px;
  background-color: var(--light-bg);
  border-radius: var(--main-border-radius);
  border: 1px solid var(--border-color);
}
.sort-select .ss-values {
  flex: 0 1 auto;
}
.sort-select .ss-content .ss-list .ss-option:hover {
  background-color: var(--border-color);
}
.sort-select .ss-arrow {
  width: 9px;
  height: 9px;
  margin: 9px 5px auto 5px;
}

.default-select.ss-main {
  padding: 10px 15px;
  font-size: 14px;
  color: var(--main-text-color);
  border-radius: var(--main-border-radius);
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  margin-bottom: 10px;
}

.default-select.ss-content {
  margin-top: 5px !important;
  border-color: var(--border-color);
  border-radius: var(--main-border-radius);
  background-color: var(--light-bg);
}

.ss-content {
  display: none;
}

.ss-content.ss-open-below,
.ss-content.ss-open-above {
  display: flex;
}

.status-type-popular i {
  color: var(--red-color);
  margin-right: 2px;
}

.status-type-new i {
  color: var(--green-color);
  margin-right: 2px;
}

.dot {
  height: 4px;
  width: 4px;
  background-color: var(--dark-bg);
  border-radius: 50%;
  margin: auto 8px;
}

.list--limit .list__item:nth-child(n+7) {
  display: none;
}
.list__item {
  display: flex;
  margin-bottom: 15px;
  align-items: center;
}
.list__item:last-of-type {
  margin-bottom: 0;
}
.list__img {
  width: 70px;
  height: 90px;
  flex-shrink: 0;
  margin-right: 10px;
  background-color: var(--light-bg);
}
.list__img img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top center;
     object-position: top center;
  border-radius: var(--main-border-radius);
}
.list__img:hover {
  opacity: 0.7;
}
.list__name {
  font-weight: 400;
  font-size: 15px;
  margin-bottom: 6px;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.list__type {
  color: var(--secondary-text-color);
  font-size: 14px;
  margin-bottom: 6px;
}
.list__status {
  font-size: 14px;
  color: var(--secondary-text-color);
}
.list__status--green {
  color: var(--green-color);
}
.list__status--red {
  color: var(--red-color);
}
.list__status--grey {
  color: var(--grey-color);
}
.list__show-all {
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--secondary-text-color);
  display: block;
}
.list__info {
  overflow: hidden;
}

.friends__item {
  display: flex;
  align-items: center;
  margin-right: 20px;
  margin-bottom: 20px;
}
.friends__avatar {
  width: 60px;
  padding-top: 60px;
  background-size: cover;
  border-radius: var(--main-border-radius);
  margin-right: 10px;
}
.friends__name {
  display: block;
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 15px;
}
.friends__time {
  font-size: 13px;
  color: var(--secondary-text-color);
}
.friends__more {
  color: var(--main-text-color);
  font-size: 13px;
  padding: 10px;
  letter-spacing: 0.3px;
}
.friends__more span {
  color: var(--main-purple-color);
}
.friends__more:hover {
  color: var(--main-purple-color);
}

@media screen and (max-width: 375px) {
  .cards.owl-carousel {
    margin: 0 -5px;
  }
}

.owl-carousel .cards__item {
  width: 173px;
  display: block;
}
@media screen and (max-width: 375px) {
  .owl-carousel .cards__item {
    width: 149px;
    padding: 0 5px;
  }
}
@media screen and (max-width: 360px) {
  .owl-carousel .cards__item {
    width: 145px;
    padding: 0 5px;
  }
}
@media screen and (max-width: 330px) {
  .owl-carousel .cards__item {
    width: 140px;
  }
}

.side-menu {
  width: 280px;
  margin-bottom: 20px;
  margin-right: 20px;
}
@media screen and (max-width: 750px) {
  .side-menu {
    display: flex;
    overflow-x: auto;
    width: 100%;
  }
}
.side-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  margin-bottom: 12px;
  padding: 11px 14px;
  border-radius: var(--main-border-radius);
  line-height: 20px;
}
@media screen and (max-width: 750px) {
  .side-menu__item {
    flex-shrink: 0;
    margin-bottom: 20px;
  }
}
.side-menu__item:hover {
  background: var(--medium-bg);
  color: var(--main-text-color);
}
.side-menu__item--active {
  background: var(--medium-bg);
  font-weight: 500;
}
.side-menu__item--active i {
  font-weight: 600;
}
.side-menu__name {
  color: var(--main-text-color);
  display: flex;
  align-items: center;
}
@media screen and (max-width: 750px) {
  .side-menu__name {
    margin-right: 10px;
  }
}
.side-menu__name i {
  margin-right: 10px;
  font-size: 21px;
  color: var(--icons-color);
}

.section-bg {
  position: relative;
  overflow: hidden;
  background: var(--light-bg);
}
.section-bg img {
  width: 100%;
  height: 380px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 20% 20%;
     object-position: 20% 20%;
  display: block;
  -webkit-filter: blur(3px);
}
@media screen and (max-width: 1200px) {
  .section-bg img {
    height: 200px;
    -webkit-filter: unset;
  }
}
.section-bg__content {
  font-size: 15px;
  line-height: 23px;
  padding: 0 10px;
}
@media screen and (min-width: 1200px) {
  .section-bg__content {
    position: absolute;
    top: 50%;
    left: 50%;
    color: white;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 65%;
    padding: 0;
  }
}
.section-bg::after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
}
@media screen and (max-width: 1200px) {
  .section-bg::after {
    display: none;
  }
}

.list-detailed__item {
  margin-bottom: 15px;
}
.list-detailed__name {
  display: block;
  font-size: 18px;
  margin-bottom: 15px;
}
.list-detailed__img {
  width: 120px;
  height: 172px;
  margin-right: 15px;
  flex-shrink: 0;
  display: block;
}
.list-detailed__img img {
  border-radius: var(--main-border-radius);
}
.list-detailed__info {
  font-size: 15px;
  color: var(--secondary-text-color);
  margin-bottom: 5px;
}
.list-detailed__info span {
  margin-right: 10px;
}
.list-detailed__info span:last-of-type {
  margin-right: 0;
}
.list-detailed__wrapper {
  display: flex;
}
.list-detailed__desc {
  font-size: 15px;
  color: var(--main-text-color);
  line-height: 20px;
}

.spoiler {
  display: inline;
  cursor: pointer;
}
.spoiler:hover {
  opacity: 0.7;
}
.spoiler__button {
  display: inline;
  color: var(--secondary-purple-color);
}
.spoiler__content {
  display: none;
  border-bottom: 1px dashed var(--secondary-purple-color);
}

.active-users {
  margin-top: 10px;
  margin-bottom: 20px;
  display: flex;
  height: 70px;
  overflow: hidden;
}
.active-users__item {
  display: flex;
  align-items: center;
  margin-right: 15px;
  padding: 10px 15px;
  background: var(--light-bg);
  border-radius: var(--main-border-radius);
  flex-shrink: 0;
}
.active-users__item:hover .active-users__name {
  color: var(--secondary-purple-color);
}
.active-users__avatar {
  width: 50px;
  height: 50px;
  margin-right: 15px;
  display: block;
  position: relative;
}
.active-users__avatar img {
  border-radius: var(--main-border-radius);
}
.active-users__name {
  display: block;
  font-size: 15px;
  color: var(--main-text-color);
  margin-bottom: 5px;
}
.active-users__chapters {
  font-size: 14px;
  color: var(--secondary-text-color);
}

.favourite-send-btn.active i {
  color: var(--red-color);
}
.favourite-send-btn.active i::before {
  content: "\e87d";
  font-weight: 400;
}

.icon-liked {
  color: var(--red-color);
}

.text {
  font-size: 15px;
  margin: 5px 0;
  color: var(--main-text-color);
}

@media screen and (max-width: 1000px) {
  .phpdebugbar {
    display: none;
  }
}
.back-link {
  display: flex;
  align-items: center;
  font-size: 14px;
}
.back-link i {
  font-size: 20px;
  margin-right: 3px;
}

.next-link {
  display: flex;
  font-size: 14px;
}
.next-link i {
  font-size: 20px;
  margin-left: 3px;
}

.venok {
  position: absolute;
  transform: scale(1.1);
}

.load-more-similar {
  font-size: 14px;
}

.custom-icon {
  font-size: 12px !important;
  font-family: "Exo 2", sans-serif;
  border: 1px solid var(--icons-color) !important;
  padding: 2px;
  border-radius: 3px;
  font-weight: 600;
  color: var(--icons-color);
}

.rounded-frame {
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: 0 !important;
}

.page__wrapper {
  max-width: 800px;
  margin: 0 auto;
}
.page__show {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -15px;
}
.page__container {
  background-color: var(--light-bg);
  overflow: hidden;
  position: relative;
  width: 100%;
}
.page__header {
  background-size: cover;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  height: 400px;
  background-position: center;
}
.page__header--blur {
  filter: blur(8px) saturate(100%);
}
.page__header-poster {
  padding: 0 4rem 1rem;
  position: relative;
  top: 50px;
  height: 300px;
}
.page__header-poster img {
  margin: 0 auto;
  max-width: 225px;
  border-radius: 16px;
  box-shadow: 0 5px 12px -4px rgba(34, 60, 80, 0.3490196078);
  overflow: hidden;
  position: relative;
  z-index: 10;
}
.page__content {
  background: var(--light-bg);
  border-radius: 32px 32px 0 0;
  padding: 25px 1rem 25px;
  position: inherit;
  z-index: 2;
  border: 1px solid var(--border-color);
}
.page__content--dark {
  background: var(--dark-grey-bg) !important;
  border-radius: 14px;
}
.page__content--without-border {
  border: none !important;
}
.page__title {
  font-size: 32px;
  text-align: center;
  font-weight: 600;
}
.page__small-title {
  font-size: 25px;
  text-align: center;
  font-weight: 600;
}

body[data-show-manga-rating="1"] .cards__rating {
  display: block !important;
}

.manga-friends__item {
  display: flex;
  background-color: var(--medium-bg);
  border-radius: 10px;
  width: 250px;
  padding: 10px;
  align-items: center;
}
.manga-friends__avatar {
  width: 35px;
  height: 35px;
  margin-right: 13px;
}
.manga-friends__avatar img {
  border-radius: 5px;
}
.manga-friends__name {
  font-weight: 500;
  margin-bottom: 3px;
}
.manga-friends__chapter {
  font-size: 13px;
  color: var(--secondary-text-color);
}
.manga-friends__score {
  margin-left: auto;
  background: var(--green-color);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border-radius: 505%;
  font-size: 13px;
  font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
  ::-webkit-scrollbar {
    height: 5px;
    width: 5px;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
  }
}