@charset "UTF-8";
.deck-list-header {
  margin-bottom: 24px;
  padding: 20px 24px;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: var(--light-bg);
}
.deck-list-header__back.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 18px;
  font-size: 13px;
}
.deck-list-header__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border-color);
}
.deck-list-header__heading {
  min-width: 0;
}
.deck-list-header__title.secondary-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  line-height: 1.3;
}
.deck-list-header__count {
  padding: 4px 9px;
  border-radius: 8px;
  background: var(--medium-bg);
  color: var(--secondary-text-color);
  font-size: 13px;
  font-weight: 500;
}
.deck-list-header__user {
  display: inline-block;
  margin-top: 5px;
  color: var(--secondary-text-color);
  font-size: 14px;
  overflow-wrap: anywhere;
}
.deck-list-header__description {
  margin: 8px 0 0;
  color: var(--secondary-text-color);
  font-size: 14px;
  line-height: 1.6;
}
.deck-list-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.deck-list-header__button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--medium-bg);
  color: var(--main-text-color);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}
.deck-list-header__button.button .icon {
  font-size: 17px;
}
.deck-list-header__button.button:hover {
  border-color: var(--main-purple-color);
  color: var(--main-purple-color);
  opacity: 1;
}
.deck-list-header a:focus-visible {
  outline: 2px solid var(--main-purple-color);
  outline-offset: 3px;
}
@media (max-width: 900px) {
  .deck-list-header__body {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }
}
@media (max-width: 520px) {
  .deck-list-header {
    padding: 16px;
    border-radius: 14px;
  }
  .deck-list-header__actions {
    width: 100%;
  }
  .deck-list-header__button.button {
    flex: 1 1 auto;
  }
}

.deck-order {
  max-width: 800px;
  margin: 20px auto;
}
.deck-order__list {
  padding: 0;
  list-style: none;
}
.deck-order__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--light-bg);
}
.deck-order__item .button {
  flex-shrink: 0;
  min-width: 40px;
  min-height: 40px;
}
.deck-order__handle {
  padding: 10px;
  cursor: grab;
  touch-action: none;
}
.deck-order__name {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.deck-order__ghost {
  opacity: 0.4;
}
.deck-order button:disabled {
  opacity: 0.4;
  cursor: default;
}
.deck-order button:focus-visible {
  outline: 2px solid var(--main-purple-color);
  outline-offset: 2px;
}

.raffles {
  --raffle-accent: var(--main-purple-color);
}
.raffles h1, .raffles h2, .raffles h3, .raffles p {
  margin: 0;
}
.raffles a:focus-visible {
  outline: 2px solid var(--raffle-accent);
  outline-offset: 4px;
}
.raffles__hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  padding: 40px;
  border: 1px solid var(--border-color);
  border-radius: 24px;
  background: radial-gradient(ellipse at 95% 0, rgba(139, 0, 255, 0.15), transparent 65%), var(--light-bg);
}
.raffles__hero h1 {
  margin: 10px 0 14px;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.1;
}
.raffles__hero p {
  max-width: 620px;
  color: var(--secondary-text-color);
  font-size: 16px;
  line-height: 1.7;
}
.raffles__hero-copy {
  min-width: 0;
}
.raffles__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--secondary-purple-color);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
}
.raffles__hero-art {
  flex: 0 0 180px;
  display: grid;
  justify-items: center;
  gap: 16px;
  color: var(--secondary-purple-color);
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
}
.raffles__hero-art > .icon {
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border-radius: 28px;
  background: rgba(139, 0, 255, 0.1);
  font-size: 64px;
  transform: rotate(-8deg);
}
.raffles__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.raffles__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--light-bg);
  color: var(--main-text-color);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  transition: border-color 0.15s;
}
.raffles__button:hover {
  border-color: var(--raffle-accent);
}
.raffles__button--primary {
  background: var(--raffle-accent);
  border-color: var(--raffle-accent);
  color: #fff;
}
.raffles__button--primary:hover {
  color: #fff;
  filter: brightness(1.1);
}
.raffles__section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.raffles__section-heading h2 {
  margin: 7px 0;
  font-size: 23px;
  line-height: 1.3;
}
.raffles__section-heading p {
  color: var(--secondary-text-color);
  font-size: 14px;
  line-height: 1.6;
}
.raffles__section-heading > .raffles__button {
  flex-shrink: 0;
}
.raffles__daily {
  margin-top: 24px;
  padding: 26px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: var(--light-bg);
}
.raffles__prizes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 16px;
}
.raffles__prize {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--border-color);
  border-radius: 15px;
  background: var(--medium-bg);
  transition: border-color 0.15s;
}
.raffles__prize:hover, .raffles__prize:focus-visible {
  border-color: var(--raffle-accent);
}
.raffles__prize:hover .raffles__prize-open, .raffles__prize:focus-visible .raffles__prize-open {
  background: var(--raffle-accent);
}
.raffles__prize-image {
  position: relative;
  display: block;
  aspect-ratio: 2/3;
  overflow: hidden;
  border-radius: 10px;
  background: #171717 url("/assets/card-placeholder.jpg") center/cover;
}
.raffles__prize-image img, .raffles__prize-image video {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.raffles__prize-open {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(20, 16, 30, 0.85);
  color: #fff;
  font-size: 17px;
}
.raffles__prize-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 12px 5px 7px;
}
.raffles__prize-copy > span {
  margin-top: auto;
  color: var(--secondary-text-color);
  font-size: 11px;
  line-height: 1.5;
}
.raffles__daily-note {
  margin-top: 16px !important;
  color: var(--secondary-text-color);
  font-size: 12px;
  line-height: 1.6;
}
.raffles__players {
  margin-top: 38px;
  scroll-margin-top: 85px;
}
.raffles__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.raffles__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: var(--light-bg);
}
.raffles__card h3 {
  font-size: 17px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.raffles__card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 22px;
}
.raffles__status {
  padding: 5px 9px;
  border-radius: 7px;
  background: rgba(31, 157, 107, 0.1);
  color: #19855c;
  font-size: 11px;
  font-weight: 600;
}
.raffles__status--closed {
  background: var(--medium-bg);
  color: var(--secondary-text-color);
}
.raffles__number {
  color: var(--secondary-text-color);
  font-size: 11px;
}
.raffles__author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  min-width: 0;
}
.raffles__author img {
  flex: 0 0 35px;
  width: 35px;
  height: 35px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}
.raffles__author > span {
  min-width: 0;
}
.raffles__author strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 13px;
}
.raffles__author span span {
  display: block;
  margin-top: 3px;
  color: var(--secondary-text-color);
  font-size: 11px;
}
.raffles__description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  margin-top: 10px !important;
  color: var(--secondary-text-color);
  font-size: 13px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.raffles__card-bottom {
  margin-top: auto;
  padding-top: 24px;
}
.raffles__deadline {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
}
.raffles__deadline time {
  color: var(--secondary-text-color);
  font-size: 11px;
}
.raffles__card-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
  color: var(--secondary-purple-color);
  font-size: 13px;
  font-weight: 600;
}
.raffles__empty {
  grid-column: 1/-1;
  padding: 48px 24px;
  border: 1px dashed var(--border-color);
  border-radius: 18px;
  text-align: center;
}
.raffles__empty > .icon {
  color: var(--secondary-purple-color);
  font-size: 42px;
}
.raffles__empty h3 {
  margin: 16px 0 10px;
  font-size: 20px;
}
.raffles__empty p {
  max-width: 510px;
  margin: auto;
  color: var(--secondary-text-color);
  line-height: 1.7;
}
.raffles__empty .raffles__button {
  margin-top: 18px;
}
.raffles__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}
.raffles__pagination > span {
  color: var(--secondary-text-color);
  font-size: 13px;
}
.raffles__hint {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 28px;
  padding: 18px 22px;
  border-radius: 14px;
  background: var(--light-bg);
  color: var(--secondary-text-color);
  font-size: 13px;
  line-height: 1.7;
}
.raffles__hint > .icon {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--secondary-purple-color);
  font-size: 22px;
}
.raffles__hint strong {
  color: var(--main-text-color);
}
@media (max-width: 1000px) {
  .raffles__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .raffles__section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }
}
@media (max-width: 600px) {
  .raffles__hero {
    padding: 26px 20px;
    border-radius: 18px;
  }
  .raffles__hero p {
    font-size: 14px;
  }
  .raffles__hero-art {
    display: none;
  }
  .raffles__actions {
    flex-direction: column;
  }
  .raffles__daily {
    padding: 20px;
  }
  .raffles__prizes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .raffles__prize {
    padding: 5px;
    border-radius: 12px;
  }
  .raffles__prize-copy {
    padding: 10px 3px 5px;
  }
  .raffles__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .raffles__card {
    padding: 20px;
  }
  .raffles__section-heading h2 {
    font-size: 21px;
  }
  .raffles__hint {
    padding: 16px;
  }
}

.dark .raffles__status:not(.raffles__status--closed) {
  color: #72d6ac;
}

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;
  }
}

.site-banner {
  --banner-accent: var(--secondary-purple-color);
  --banner-tint: rgba(139, 0, 255, .055);
  --banner-line: rgba(139, 0, 255, .15);
  padding-top: 12px;
  background: var(--grey-background);
  flex-shrink: 0;
}
.site-banner[hidden] {
  display: none;
}
.site-banner--warning {
  --banner-accent: #aa6500;
  --banner-tint: rgba(245, 158, 11, .08);
  --banner-line: rgba(245, 158, 11, .23);
}
.site-banner--info {
  --banner-accent: #2474c5;
  --banner-tint: rgba(59, 130, 246, .07);
  --banner-line: rgba(59, 130, 246, .2);
}
.site-banner__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px 6px 10px;
  background: linear-gradient(var(--banner-tint), var(--banner-tint)), var(--light-bg);
  border: 1px solid var(--banner-line);
  border-radius: var(--main-border-radius);
}
.site-banner__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--banner-accent);
  background: var(--banner-tint);
  border-radius: 6px;
}
.site-banner__icon svg {
  width: 22px;
  height: 22px;
}
.site-banner__content {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.site-banner__title {
  color: var(--banner-accent);
  font-weight: 600;
  margin-right: 5px;
}
.site-banner__text {
  color: var(--main-text-color);
  white-space: pre-line;
}
.site-banner__link {
  display: inline-block;
  margin-left: 8px;
  color: var(--banner-accent);
  font-weight: 500;
}
.site-banner__link:hover {
  text-decoration: underline;
}
.site-banner__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--secondary-text-color);
  cursor: pointer;
}
.site-banner__close svg {
  width: 18px;
  height: 18px;
}
.site-banner__close:hover {
  color: var(--banner-accent);
  background: var(--banner-tint);
}
.site-banner__close:focus-visible {
  outline: 2px solid var(--banner-accent);
  outline-offset: 2px;
}
@media screen and (max-width: 600px) {
  .site-banner {
    padding-top: 8px;
  }
  .site-banner__inner {
    gap: 8px;
    padding: 7px 4px 7px 8px;
    align-items: flex-start;
  }
  .site-banner__icon {
    width: 28px;
    height: 28px;
    margin-top: 2px;
  }
  .site-banner__content {
    font-size: 13px;
  }
  .site-banner__close {
    width: 40px;
    height: 40px;
  }
}

.dark .site-banner--warning {
  --banner-accent: #ffc66d;
}

.dark .site-banner--info {
  --banner-accent: #80b9ff;
}

.halloween-quest-banner {
  --hqb-background: linear-gradient(120deg, #fff8ec, #faf2f6 58%, #f7f0fa);
  --hqb-border: #ead8cc;
  --hqb-title: #633541;
  --hqb-copy: #735c70;
  --hqb-muted: #8a6a7a;
  --hqb-count: #7d4351;
  --hqb-track: #e9dce6;
  --hqb-shadow: 0 8px 24px rgba(86, 48, 62, .1);
  position: relative;
  z-index: 30;
  flex-shrink: 0;
  padding: 12px 20px 0;
  margin-bottom: -12px;
  color: var(--hqb-copy);
  font-family: "Exo 2", sans-serif;
  scroll-margin-top: 14px;
}
.halloween-quest-banner[hidden] {
  display: none;
}
.halloween-quest-banner *, .halloween-quest-banner *::before, .halloween-quest-banner *::after {
  box-sizing: border-box;
}
.halloween-quest-banner__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  gap: 18px;
  align-items: center;
  border: 1px solid var(--hqb-border);
  border-radius: var(--secondary-border-radius, 15px);
  background: var(--hqb-background);
  box-shadow: var(--hqb-shadow);
}
.halloween-quest-banner__pumpkin {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  filter: drop-shadow(0 3px 7px rgba(227, 123, 29, 0.18));
}
.halloween-quest-banner__copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.halloween-quest-banner__copy strong {
  color: var(--hqb-title);
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.8px;
  font-weight: 700;
}
.halloween-quest-banner__copy span {
  color: var(--hqb-copy);
  font-size: 13px;
  line-height: 1.5;
}
.halloween-quest-banner__meter {
  width: 210px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--hqb-muted);
}
.halloween-quest-banner__meter > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  white-space: nowrap;
}
.halloween-quest-banner__meter b {
  color: var(--hqb-count);
  font-size: 13px;
  font-weight: 600;
}
.halloween-quest-banner__meter > div {
  height: 6px;
  border-radius: 6px;
  background: var(--hqb-track);
  overflow: hidden;
}
.halloween-quest-banner__meter > div i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #a977c6, #edb26d);
  max-width: 100%;
  transition: width 0.6s;
}
.halloween-quest-banner__meter[hidden] {
  display: none;
}
.halloween-quest-banner__meter-label {
  font-size: 11px;
}
.halloween-quest-banner__button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  min-height: 46px;
  color: #4b2938 !important;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid #e7b16f;
  border-radius: var(--main-border-radius, 8px);
  background: linear-gradient(135deg, #ffd491, #eda663);
  box-shadow: inset 0 1px 0 rgba(255, 250, 230, 0.6), 0 3px 12px rgba(217, 130, 47, 0.12);
}
.halloween-quest-banner__button > span:last-child {
  font-size: 18px;
}
.halloween-quest-banner__button:hover {
  filter: brightness(1.05);
}
.halloween-quest-banner__button:focus-visible {
  outline: 2px solid #b275a0;
  outline-offset: 3px;
}
.halloween-quest-banner--complete {
  --hqb-background: linear-gradient(120deg, #fff7e7, #fff2dc 60%, #f9f0e5);
  --hqb-border: #edd3aa;
}
.halloween-quest-banner--complete .halloween-quest-banner__pumpkin {
  filter: drop-shadow(0 0 9px rgba(238, 132, 38, 0.32));
}
@media (max-width: 900px) {
  .halloween-quest-banner__inner {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 10px 14px;
  }
  .halloween-quest-banner__meter {
    grid-column: 2/-1;
    width: 100%;
  }
  .halloween-quest-banner__button {
    grid-column: 3;
    grid-row: 1;
  }
}
@media (max-width: 600px) {
  .halloween-quest-banner {
    padding: 10px 12px 0;
    margin-bottom: -8px;
  }
  .halloween-quest-banner__inner {
    padding: 12px 14px;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px 12px;
    border-radius: 13px;
  }
  .halloween-quest-banner__pumpkin {
    width: 40px;
    height: 40px;
  }
  .halloween-quest-banner__copy strong {
    font-size: 13px;
    letter-spacing: 0.6px;
  }
  .halloween-quest-banner__copy span {
    font-size: 12px;
  }
  .halloween-quest-banner__meter {
    grid-column: 1/-1;
  }
  .halloween-quest-banner__meter > span {
    margin-bottom: 6px;
  }
  .halloween-quest-banner__meter-label {
    font-size: 12px;
  }
  .halloween-quest-banner__button {
    grid-column: 1/-1;
    grid-row: auto;
    width: 100%;
    min-height: 44px;
    padding: 11px 14px;
    justify-content: space-between;
  }
}
@media (prefers-reduced-motion: reduce) {
  .halloween-quest-banner__meter > div i {
    transition: none;
  }
}

body.dark .halloween-quest-banner {
  --hqb-background: radial-gradient(ellipse at 0 50%, rgba(159, 74, 37, .17), transparent 45%), linear-gradient(120deg, #2c1d35, #23182e 60%, #302137);
  --hqb-border: rgba(222, 162, 107, .29);
  --hqb-title: #ffd095;
  --hqb-copy: #d1bfd9;
  --hqb-muted: #b4a0c3;
  --hqb-count: #efd0a8;
  --hqb-track: #170f23;
  --hqb-shadow: 0 8px 26px rgba(8, 3, 18, .3);
}
body.dark .halloween-quest-banner.halloween-quest-banner--complete {
  --hqb-background: radial-gradient(ellipse at 5% 50%, rgba(190, 113, 29, .2), transparent 55%), linear-gradient(120deg, #32212f, #281d32);
  --hqb-border: rgba(233, 178, 106, .36);
}

.halloween-quest-start-open {
  overflow: hidden;
}

.halloween-quest-start {
  --hqs-gold: #ffcf89;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 66px 36px 42px;
  overflow: auto;
  overscroll-behavior: contain;
  isolation: isolate;
  color: #f7ece2;
  background: #120d20;
  font-family: "Exo 2", system-ui, sans-serif;
  animation: hqs-reveal 0.55s ease-out both;
}
.halloween-quest-start *, .halloween-quest-start *::before, .halloween-quest-start *::after {
  box-sizing: border-box;
}
.halloween-quest-start button, .halloween-quest-start a {
  -webkit-tap-highlight-color: transparent;
}
.halloween-quest-start__sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.halloween-quest-start__landscape {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15, 9, 25, 0.98), rgba(19, 12, 31, 0.77) 34%, rgba(19, 12, 31, 0.1) 70%), linear-gradient(0deg, #160e23, transparent 38%), url("/assets/halloween/quest/quest-hero.webp") 61% center/cover;
  transform-origin: 76% 42%;
  animation: hqs-landscape 18s ease-in-out infinite alternate;
}
.halloween-quest-start__moonlight {
  position: absolute;
  left: 41%;
  top: 5%;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(192, 151, 240, 0.0901960784), transparent 64%);
  animation: hqs-glow 5s ease-in-out infinite alternate;
}
.halloween-quest-start__fog {
  position: absolute;
  bottom: -18%;
  left: -25%;
  width: 150%;
  height: 66%;
  background: radial-gradient(ellipse at 25% 60%, rgba(178, 163, 214, 0.1058823529), transparent 44%), radial-gradient(ellipse at 77% 65%, rgba(165, 120, 186, 0.1333333333), transparent 40%);
  filter: blur(22px);
  animation: hqs-fog 13s ease-in-out infinite alternate;
}
.halloween-quest-start__fog--back {
  bottom: 2%;
  opacity: 0.6;
  animation-delay: -6s;
  animation-duration: 17s;
}
.halloween-quest-start__bat {
  position: absolute;
  width: 80px;
  fill: #120b20;
  filter: drop-shadow(0 0 1px #b899d3);
  animation: hqs-bat 7s ease-in-out infinite;
}
.halloween-quest-start__bat--one {
  right: 34%;
  top: 18%;
}
.halloween-quest-start__bat--two {
  right: 14%;
  top: 26%;
  width: 48px;
  animation-delay: -3s;
}
.halloween-quest-start__candies {
  position: absolute;
  inset: 0;
}
.halloween-quest-start__candies i {
  position: absolute;
  top: -20px;
  left: var(--hqs-x);
  width: 18px;
  height: 12px;
  border-radius: 4px;
  background: var(--hqs-color);
  box-shadow: 0 0 14px var(--hqs-color);
  animation: hqs-candy 3s var(--hqs-delay) cubic-bezier(0.26, 0.4, 0.69, 0.97) both;
}
.halloween-quest-start__candies i::before, .halloween-quest-start__candies i::after {
  content: "";
  position: absolute;
  top: 2px;
  border: 4px solid transparent;
}
.halloween-quest-start__candies i::before {
  left: -8px;
  border-left-color: var(--hqs-color);
}
.halloween-quest-start__candies i::after {
  right: -8px;
  border-right-color: var(--hqs-color);
}
.halloween-quest-start__embers {
  position: absolute;
  inset: 0;
}
.halloween-quest-start__embers i {
  position: absolute;
  bottom: -15px;
  left: var(--hqs-x);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffd8a4;
  box-shadow: 0 0 12px #ffbb74;
  animation: hqs-ember 8s var(--hqs-delay) linear infinite;
}
.halloween-quest-start__close {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  display: grid;
  place-items: center;
  z-index: 2;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(212, 184, 233, 0.2509803922);
  border-radius: 50%;
  color: #ffe7c6;
  background: rgba(24, 14, 37, 0.78);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  cursor: pointer;
  font: 28px/1 system-ui, sans-serif;
}
.halloween-quest-start__content {
  width: 100%;
  max-width: 1200px;
  margin: auto;
}
.halloween-quest-start__content > * {
  max-width: 540px;
  animation: hqs-arrive 0.7s 0.16s ease-out both;
}
.halloween-quest-start__content > :nth-child(n+4) {
  animation-delay: 0.3s;
}
.halloween-quest-start__content > :nth-child(n+6) {
  animation-delay: 0.45s;
}
.halloween-quest-start__eyebrow {
  display: block;
  color: #c6b1d7;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.halloween-quest-start__chapter {
  display: inline-block;
  margin-top: 25px;
  padding: 8px 12px;
  border: 1px solid rgba(203, 176, 131, 0.2588235294);
  border-radius: 8px;
  color: var(--hqs-gold);
  background: rgba(68, 43, 33, 0.1803921569);
  font-size: 13px;
  line-height: 1.4;
}
.halloween-quest-start__title {
  margin: 21px 0 20px;
  color: #fff5e9;
  font-size: clamp(54px, 7.3vw, 94px);
  font-weight: 900;
  line-height: 0.99;
  letter-spacing: -0.055em;
  text-shadow: 0 5px 32px rgba(0, 0, 0, 0.4196078431);
}
.halloween-quest-start__title span {
  color: var(--hqs-gold);
}
.halloween-quest-start__copy {
  margin: 0;
  color: #ddcedd;
  font-size: 16px;
  line-height: 1.65;
}
.halloween-quest-start__quote {
  width: -moz-fit-content;
  width: fit-content;
  margin: 23px 0 25px;
  padding: 13px 18px;
  border-left: 2px solid #c99a65;
  border-radius: 0 10px 10px 0;
  background: linear-gradient(90deg, rgba(33, 21, 39, 0.9019607843), rgba(33, 21, 39, 0.4392156863));
}
.halloween-quest-start__quote span {
  display: block;
  color: var(--hqs-gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.halloween-quest-start__quote p {
  margin: 6px 0 0;
  color: #cfbbd1;
  font-size: 14px;
  font-style: italic;
  line-height: 1.6;
}
.halloween-quest-start__seals {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 27px;
}
.halloween-quest-start__seals > p {
  margin: 0 0 0 5px;
  color: #c9b6cd;
  font-size: 13px;
  line-height: 1.55;
}
.halloween-quest-start__seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 58px;
  height: 75px;
  border: 1px solid rgba(197, 143, 189, 0.3333333333);
  border-radius: 12px;
  color: #e2b779;
  background: linear-gradient(140deg, rgba(84, 48, 90, 0.4705882353), rgba(35, 21, 44, 0.8784313725));
  animation: hqs-seal 3s var(--hqs-seal-delay) ease-in-out infinite;
}
.halloween-quest-start__seal svg {
  width: 22px;
  height: 27px;
}
.halloween-quest-start__seal span {
  font-size: 11px;
  font-weight: 600;
}
.halloween-quest-start__enter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  min-height: 54px;
  padding: 14px 24px;
  border: 1px solid #ffe1aa;
  border-radius: var(--secondary-border-radius, 15px);
  color: #3c2431 !important;
  background: linear-gradient(115deg, #ffdfa8, #f4af68);
  box-shadow: 0 8px 30px rgba(237, 172, 73, 0.1882352941), inset 0 1px 0 rgba(255, 247, 222, 0.6117647059);
  font: 700 15px/1.4 "Exo 2", system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
}
.halloween-quest-start__enter span {
  font-size: 23px;
}
.halloween-quest-start__enter:hover {
  filter: brightness(1.08);
}
.halloween-quest-start__later {
  display: block;
  min-height: 44px;
  margin-top: 7px;
  padding: 9px 0;
  color: #bba5c8;
  font: 13px/1.5 "Exo 2", system-ui, sans-serif;
  cursor: pointer;
}
.halloween-quest-start__close:focus-visible, .halloween-quest-start__enter:focus-visible, .halloween-quest-start__later:focus-visible {
  outline: 2px solid #ffdfa4;
  outline-offset: 5px;
}
@media (min-width: 1500px) {
  .halloween-quest-start__content {
    max-width: 1350px;
  }
}
@media (max-width: 800px) {
  .halloween-quest-start {
    padding: 64px 24px 26px;
    align-items: flex-start;
  }
  .halloween-quest-start__landscape {
    background-position: center, center, 72% center;
  }
  .halloween-quest-start__content > * {
    max-width: 490px;
  }
  .halloween-quest-start__title {
    font-size: 70px;
  }
}
@media (max-width: 600px) {
  .halloween-quest-start {
    padding: 234px 22px max(20px, env(safe-area-inset-bottom));
  }
  .halloween-quest-start__landscape {
    background: linear-gradient(0deg, #160e23, rgba(22, 14, 35, 0.98) 34%, rgba(22, 14, 35, 0.23) 71%, rgba(22, 14, 35, 0.12)), url("/assets/halloween/quest/quest-hero.webp") 81% top/auto 430px no-repeat;
  }
  .halloween-quest-start__moonlight {
    left: 6%;
    top: -20px;
    width: 230px;
    height: 230px;
  }
  .halloween-quest-start__bat--one {
    top: 14%;
    right: 49%;
    width: 54px;
  }
  .halloween-quest-start__bat--two {
    top: 7%;
    right: 24%;
    width: 32px;
  }
  .halloween-quest-start__fog {
    height: 42%;
    opacity: 0.6;
  }
  .halloween-quest-start__eyebrow {
    font-size: 11px;
    letter-spacing: 0.09em;
  }
  .halloween-quest-start__chapter {
    margin-top: 15px;
    padding: 6px 10px;
    font-size: 12px;
  }
  .halloween-quest-start__title {
    margin: 16px 0;
    font-size: clamp(48px, 12.9vw, 74px);
  }
  .halloween-quest-start__copy {
    font-size: 14px;
    line-height: 1.65;
  }
  .halloween-quest-start__copy br {
    display: none;
  }
  .halloween-quest-start__quote {
    margin: 20px 0;
    padding: 11px 14px;
    width: 100%;
  }
  .halloween-quest-start__quote p {
    font-size: 13px;
  }
  .halloween-quest-start__seals {
    gap: 10px;
    margin-bottom: 23px;
  }
  .halloween-quest-start__seals > p {
    font-size: 12px;
    margin-left: 2px;
  }
  .halloween-quest-start__seal {
    width: 48px;
    height: 65px;
    border-radius: 10px;
  }
  .halloween-quest-start__seal svg {
    width: 19px;
    height: 24px;
  }
  .halloween-quest-start__enter {
    display: flex;
    width: 100%;
    min-height: 54px;
    gap: 16px;
    padding: 13px 15px;
    font-size: 14px;
  }
  .halloween-quest-start__later {
    width: 100%;
    text-align: center;
  }
}
@media (max-height: 600px) and (min-width: 601px) {
  .halloween-quest-start {
    padding-top: 56px;
  }
  .halloween-quest-start__title {
    font-size: 62px;
  }
  .halloween-quest-start__chapter {
    margin-top: 14px;
  }
  .halloween-quest-start__quote {
    margin: 16px 0;
  }
}

@keyframes hqs-reveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes hqs-arrive {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes hqs-landscape {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.035);
  }
}
@keyframes hqs-glow {
  from {
    opacity: 0.45;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1.12);
  }
}
@keyframes hqs-fog {
  from {
    transform: translateX(-5%);
  }
  to {
    transform: translateX(8%);
  }
}
@keyframes hqs-bat {
  0%, 100% {
    transform: translate(0, 0) rotate(-13deg);
  }
  50% {
    transform: translate(-20px, -15px) rotate(4deg);
  }
}
@keyframes hqs-candy {
  0% {
    opacity: 0;
    transform: translate(0, -20px) rotate(var(--hqs-angle));
  }
  10% {
    opacity: 0.9;
  }
  80% {
    opacity: 0.65;
  }
  100% {
    opacity: 0;
    transform: translate(8vw, 76vh) rotate(calc(var(--hqs-angle) + 220deg)) scale(0.35);
  }
}
@keyframes hqs-ember {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  15%, 70% {
    opacity: 0.65;
  }
  100% {
    transform: translate(30px, -72vh);
    opacity: 0;
  }
}
@keyframes hqs-seal {
  0%, 100% {
    box-shadow: 0 0 0 rgba(184, 119, 218, 0);
    border-color: rgba(197, 143, 189, 0.3333333333);
  }
  50% {
    box-shadow: 0 0 22px rgba(184, 119, 218, 0.1450980392);
    border-color: rgba(201, 153, 207, 0.5490196078);
  }
}
@media (prefers-reduced-motion: reduce) {
  .halloween-quest-start, .halloween-quest-start *, .halloween-quest-start *::before, .halloween-quest-start *::after {
    animation: none !important;
  }
  .halloween-quest-start__candies, .halloween-quest-start__embers {
    display: none;
  }
}
.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);
}

.simple-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 32px 0 48px;
}

.simple-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  height: 44px;
  padding: 0 22px;
  border-radius: 12px;
  background: #f1f1f4;
  color: #222;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  transition: 0.15s ease;
}

.simple-pagination__btn:hover {
  transform: translateY(-1px);
  background: #e5e5eb;
}

.simple-pagination__btn--primary {
  background: #7c2cff;
  color: #fff;
}

.simple-pagination__btn--primary:hover {
  background: #6b22e8;
}

.simple-pagination__btn--disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

.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;
}

.comments__author {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
}

.comments__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin-top: 3px;
}

.comments__meta .comments__date {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 13px;
  line-height: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/*
 * Реальная высота рамки 22px.
 * Отрицательные вертикальные margin делают её внешнюю высоту 16px:
 * 22 - 3 - 3 = 16.
 * Поэтому рамка больше не увеличивает высоту блока автора.
 */
.comments__ascension-badge {
  position: relative;
  display: block;
  flex: 0 0 50px;
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  padding: 0 !important;
  margin: -3px 0 !important;
  border: 0;
  line-height: 1;
  text-decoration: none;
  isolation: isolate;
}

/* Светлый центр для тёмной темы */
.comments__ascension-badge-center {
  position: absolute;
  z-index: 1;
  top: 31%;
  right: 11%;
  bottom: 29%;
  left: 36%;
  border-radius: 999px;
  /*background: #f4f6ff;*/
  pointer-events: none;
}

.comments__ascension-badge > img {
  position: absolute !important;
  z-index: 2;
  inset: 0;
  display: block !important;
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  pointer-events: none;
}

/* Цифра по центру внутреннего поля */
.comments__ascension-badge > strong {
  position: absolute;
  z-index: 3;
  /* Внутреннее поле рамки смещено вправо из-за кристалла */
  top: calc(50% + 1px);
  left: 57%;
  display: block;
  min-width: 20px;
  padding: 0;
  margin: 0;
  /*color: #17203d !important;*/
  font-size: 8px;
  font-weight: 800;
  line-height: 9px;
  text-align: center;
  white-space: nowrap;
  /* Центрируем и по горизонтали, и по высоте */
  transform: translate(-50%, -50%) !important;
  /*text-shadow:
      0 1px 0 #fff,
      0 0 1px #fff;*/
  color: var(--main-text-color) !important;
  pointer-events: none;
}

/*body.dark .comments__ascension-badge > strong {
    color: #17203d !important;
}*/
@media only screen and (max-width: 700px) {
  .comments__meta {
    gap: 4px;
  }
  .comments__ascension-badge {
    flex-basis: 46px;
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    /* Внешняя высота снова равна 16px */
    margin: -2px 0 !important;
  }
  .comments__ascension-badge > img {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
  }
  .comments__ascension-badge > strong {
    top: calc(50% + 1px);
    min-width: 18px;
    font-size: 7px;
    line-height: 8px;
  }
}
.comments__socket-dom-buffer {
  position: fixed;
  left: -100000px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  contain: strict;
}

.comments__ios-new-notice {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 70px);
  left: 50%;
  z-index: 10000;
  display: none !important;
  align-items: center;
  gap: 10px;
  width: -moz-max-content;
  width: max-content;
  max-width: calc(100vw - 24px);
  padding: 10px 15px 10px 11px;
  color: #fff;
  background: rgba(28, 24, 40, 0.96);
  border: 1px solid rgba(174, 117, 255, 0.28);
  border-radius: 18px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.28), 0 0 16px rgba(139, 83, 220, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -10px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  /*
   * Очень важно: уведомление не должно
   * перехватывать свайп пользователя.
   */
  pointer-events: none;
  will-change: opacity, transform;
}
.comments__ios-new-notice--visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.comments__ios-new-notice-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  color: #d3adff;
  background: rgba(159, 94, 232, 0.16);
  border-radius: 50%;
  animation: comments-new-pulse 1.4s ease-in-out infinite;
}
.comments__ios-new-notice-content {
  min-width: 0;
}
.comments__ios-new-notice-title {
  overflow: hidden;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 17px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.comments__ios-new-notice-text {
  margin-top: 1px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
  line-height: 15px;
  white-space: nowrap;
}

@keyframes comments-new-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}
@media (max-width: 768px) {
  .comments__ios-new-notice {
    top: calc(env(safe-area-inset-top, 0px) + 58px);
    max-width: calc(100vw - 20px);
    padding: 9px 13px 9px 9px;
  }
  .comments__ios-new-notice-icon {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
  }
}
/* =========================================================
   STICKER PICKER — FINAL
   ========================================================= */
.tippy-box[data-theme~=sticker-list] {
  width: auto !important;
  max-width: none !important;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: var(--light-bg);
  color: var(--main-text-color);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.15), 0 3px 10px rgba(0, 0, 0, 0.06);
}

.tippy-box[data-theme~=sticker-list] > .tippy-content {
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
}

/* =========================================================
   MAIN
   ========================================================= */
.sticker-picker {
  width: 620px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--light-bg);
  color: var(--main-text-color);
}

/* =========================================================
   HEADER
   ========================================================= */
.sticker-picker__top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 17px 13px;
  border-bottom: 1px solid var(--border-color);
}

.sticker-picker__heading {
  margin: 0;
  color: var(--main-text-color);
  font-size: 19px;
  line-height: 1.2;
  font-weight: 750;
}

.sticker-picker__subtitle {
  margin-top: 3px;
  color: var(--secondary-text-color);
  font-size: 12px;
  line-height: 1.3;
}

.sticker-picker__close {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--medium-bg);
  color: var(--secondary-text-color);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.sticker-picker__close:hover {
  color: var(--main-text-color);
  transform: scale(1.05);
}

.sticker-picker__close .icon {
  font-size: 19px;
}

/* =========================================================
   TABS
   ========================================================= */
.sticker-picker__tabs {
  min-height: 0;
  display: flex !important;
  flex-direction: column;
  width: 100%;
}

.sticker-picker__content {
  order: 2;
  min-height: 0;
  flex: 1 1 auto;
}

.sticker-picker__content .tabs__page {
  width: 100%;
}

/* =========================================================
   PACK NAV
   ========================================================= */
.sticker__pack {
  order: 1;
  flex: 0 0 auto;
  display: flex !important;
  align-items: stretch !important;
  gap: 6px;
  width: 100%;
  padding: 9px 11px 10px !important;
  margin: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border-bottom: 1px solid var(--border-color);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.sticker__pack::-webkit-scrollbar {
  display: none;
}

.sticker__pack .sticker__pack-item {
  position: relative;
  width: 66px !important;
  min-width: 66px !important;
  max-width: 66px !important;
  min-height: 68px !important;
  height: auto !important;
  flex: 0 0 66px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  padding: 5px 4px 5px !important;
  margin: 0 !important;
  overflow: visible !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: var(--secondary-text-color) !important;
  line-height: normal !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.sticker__pack .sticker__pack-item::before,
.sticker__pack .sticker__pack-item::after {
  display: none !important;
}

.sticker__pack .sticker__pack-item:hover {
  background: var(--medium-bg) !important;
}

.sticker__pack .sticker__pack-item.tabs__item--active {
  border-color: rgba(119, 44, 232, 0.26) !important;
  background: rgba(119, 44, 232, 0.08) !important;
}

.sticker__pack-image {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 9px;
  background: var(--medium-bg);
}

.sticker__pack-image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  -o-object-fit: contain;
     object-fit: contain;
}

.sticker__pack-badge {
  display: block;
  width: 100%;
  height: 13px;
  overflow: hidden;
  color: var(--secondary-text-color);
  font-size: 9px;
  line-height: 13px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sticker__pack-badge--owned {
  color: #2ca66d;
}

.sticker__pack-badge--locked {
  color: var(--secondary-text-color);
}

/* =========================================================
   PACK HEADER
   ========================================================= */
.sticker-picker__pack-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 15px 4px;
}

.sticker-picker__pack-info {
  min-width: 0;
  flex: 1;
}

.sticker__title {
  overflow: hidden;
  margin: 0;
  color: var(--main-text-color);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 750;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sticker-picker__pack-status {
  margin-top: 4px;
  color: var(--secondary-text-color);
  font-size: 11px;
  line-height: 1.35;
}

.sticker-picker__pack-status--owned {
  color: #269b63;
}

.sticker-picker__shop-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 9px;
  background: rgba(119, 44, 232, 0.1);
  color: var(--main-purple-color);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}

.sticker-picker__shop-link:hover {
  background: rgba(119, 44, 232, 0.16);
  color: var(--main-purple-color);
}

/* =========================================================
   STICKER GRID
   ========================================================= */
.sticker__list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 5px 8px !important;
  width: 100%;
  max-height: min(390px, 100vh - 230px) !important;
  padding: 8px 12px 13px !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  justify-content: initial !important;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

.sticker__item {
  position: relative;
  width: 100% !important;
  height: 100px !important;
  min-height: 100px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 5px !important;
  margin: 0 !important;
  overflow: visible !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  background: transparent !important;
  cursor: pointer;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.sticker__item:hover {
  z-index: 3;
  border-color: var(--border-color) !important;
  background: var(--medium-bg) !important;
  transform: translateY(-1px);
}

.sticker__item > img,
.sticker__item > tgs-player {
  display: block !important;
  width: 90px !important;
  height: 90px !important;
  max-width: 100% !important;
  max-height: 100% !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   LOCKED PACK
   ========================================================= */
.sticker__list--lock .sticker__item {
  opacity: 0.72;
}

.sticker__list--lock .sticker__item:hover {
  opacity: 1;
}

.sticker__list--lock .sticker__item::before {
  display: none !important;
}

.sticker__list--lock .sticker__item::after {
  position: absolute !important;
  content: "\e897" !important;
  top: 6px !important;
  right: 6px !important;
  left: auto !important;
  bottom: auto !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(55, 58, 64, 0.72) !important;
  color: #fff !important;
  font-family: "Material Symbols Rounded" !important;
  font-size: 15px !important;
  line-height: 24px !important;
  font-weight: 300 !important;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.13) !important;
  transform: none !important;
  pointer-events: none !important;
}

.sticker__item-shop {
  position: absolute;
  left: 50%;
  bottom: 5px;
  z-index: 5;
  max-width: calc(100% - 10px);
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(24, 25, 29, 0.82);
  color: #fff;
  font-size: 8px;
  line-height: 11px;
  font-weight: 650;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 3px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}

.sticker__list--lock .sticker__item:hover .sticker__item-shop {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* =========================================================
   LOADING
   ========================================================= */
.sticker-picker__loading {
  width: 620px;
  max-width: calc(100vw - 24px);
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--light-bg);
}

.sticker-picker__loading span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--main-purple-color);
  animation: sticker-picker-loading 0.9s ease-in-out infinite;
}

.sticker-picker__loading span:nth-child(2) {
  animation-delay: 0.12s;
}

.sticker-picker__loading span:nth-child(3) {
  animation-delay: 0.24s;
}

@keyframes sticker-picker-loading {
  0%, 100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-5px);
  }
}
.sticker-picker__error {
  width: 620px;
  max-width: calc(100vw - 24px);
  padding: 45px 20px;
  color: var(--secondary-text-color);
  text-align: center;
}

/* =========================================================
   SELECTED STICKER IN FORM
   ========================================================= */
.comments__selected-sticker {
  display: none;
  position: relative;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 3px 0 11px;
  padding: 8px 40px 8px 8px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: var(--medium-bg);
}

.comments__selected-sticker--active {
  display: flex;
}

.comments__selected-sticker-media {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comments__selected-sticker-media img,
.comments__selected-sticker-media tgs-player {
  display: block;
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: contain;
     object-fit: contain;
}

.comments__selected-sticker-info {
  min-width: 0;
  flex: 1;
}

.comments__selected-sticker-title {
  color: var(--main-text-color);
  font-size: 13px;
  line-height: 17px;
  font-weight: 650;
}

.comments__selected-sticker-text {
  margin-top: 2px;
  color: var(--secondary-text-color);
  font-size: 11px;
  line-height: 15px;
}

.comments__selected-sticker-remove {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--light-bg);
  color: var(--secondary-text-color);
  cursor: pointer;
  transform: translateY(-50%);
}

/* =========================================================
   PUBLISHED STICKER
   ========================================================= */
.comments__sticker-wrapper {
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  margin-top: 8px;
}

.comments__sticker-link {
  display: block;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  border-radius: 11px;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}

.comments__sticker-link:hover {
  background: rgba(119, 44, 232, 0.05);
  transform: scale(1.03);
}

.comments__sticker {
  display: block;
  width: 90px !important;
  height: 90px !important;
  margin: 0 !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  cursor: pointer;
}

.comments__sticker--tgs {
  width: 90px !important;
  height: 90px !important;
}

/* =========================================================
   DARK
   ========================================================= */
body.dark .tippy-box[data-theme~=sticker-list] {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.48), 0 3px 12px rgba(0, 0, 0, 0.28);
}

body.dark .sticker-picker,
body.dark .sticker-picker__loading {
  background: var(--light-bg);
}

body.dark .sticker__pack .sticker__pack-item.tabs__item--active {
  border-color: rgba(166, 111, 255, 0.3) !important;
  background: rgba(139, 72, 230, 0.14) !important;
}

body.dark .sticker__pack-image {
  background: rgba(255, 255, 255, 0.04);
}

body.dark .sticker-picker__shop-link {
  background: rgba(154, 91, 240, 0.14);
}

body.dark .sticker-picker__shop-link:hover {
  background: rgba(154, 91, 240, 0.2);
}

body.dark .sticker__list--lock .sticker__item::after {
  background: rgba(12, 13, 16, 0.82) !important;
}

body.dark .comments__selected-sticker {
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark .comments__sticker-link:hover {
  background: rgba(154, 91, 240, 0.08);
}

/* =========================================================
   TABLET
   ========================================================= */
@media screen and (max-width: 700px) {
  .sticker-picker {
    width: 540px;
  }
  .sticker-picker__loading,
  .sticker-picker__error {
    width: 540px;
  }
  .sticker__item {
    height: 92px !important;
    min-height: 92px !important;
  }
  .sticker__item > img,
  .sticker__item > tgs-player {
    width: 82px !important;
    height: 82px !important;
  }
}
/* =========================================================
   MOBILE
   ========================================================= */
@media screen and (max-width: 560px) {
  .tippy-box[data-theme~=sticker-list] {
    border-radius: 14px;
  }
  .sticker-picker {
    width: calc(100vw - 14px);
    max-width: calc(100vw - 14px);
    max-height: calc(100vh - 14px);
  }
  .sticker-picker__top {
    padding: 11px 12px 10px;
  }
  .sticker-picker__heading {
    font-size: 16px;
  }
  .sticker-picker__subtitle {
    font-size: 11px;
  }
  .sticker-picker__close {
    width: 33px;
    height: 33px;
    flex-basis: 33px;
  }
  .sticker__pack {
    gap: 4px;
    padding: 7px 7px 8px !important;
  }
  .sticker__pack .sticker__pack-item {
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    min-height: 62px !important;
    flex-basis: 58px !important;
    padding: 4px 3px !important;
  }
  .sticker__pack-image {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
  .sticker__pack-badge {
    font-size: 8px;
  }
  .sticker-picker__pack-head {
    gap: 9px;
    padding: 10px 10px 3px;
  }
  .sticker__title {
    font-size: 15px;
  }
  .sticker-picker__pack-status {
    font-size: 10px;
  }
  .sticker-picker__shop-link {
    min-height: 30px;
    padding: 6px 8px;
    font-size: 11px;
  }
  .sticker__list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 3px !important;
    max-height: min(380px, 100vh - 205px) !important;
    padding: 6px !important;
  }
  .sticker__item {
    height: 74px !important;
    min-height: 74px !important;
    padding: 3px !important;
    border-radius: 9px !important;
  }
  .sticker__item > img,
  .sticker__item > tgs-player {
    width: 68px !important;
    height: 68px !important;
  }
  .sticker__list--lock .sticker__item::after {
    top: 4px !important;
    right: 4px !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    font-size: 13px !important;
    line-height: 20px !important;
  }
  .sticker__item-shop {
    display: none;
  }
  .comments__selected-sticker {
    gap: 8px;
    padding: 7px 36px 7px 7px;
  }
  .comments__selected-sticker-media {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }
  .comments__selected-sticker-text {
    font-size: 10px;
  }
  .sticker-picker__loading,
  .sticker-picker__error {
    width: calc(100vw - 14px);
    max-width: calc(100vw - 14px);
  }
}
/* =========================================================
   USER MINI PROFILE
   ========================================================= */
.tippy-box[data-theme~=user-mini-profile] {
  width: auto !important;
  max-width: none !important;
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
}

.tippy-box[data-theme~=user-mini-profile] > .tippy-content {
  padding: 0 !important;
}

/* CARD */
.user-mini-profile {
  width: 370px;
  max-width: calc(100vw - 20px);
  padding: 18px;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: var(--light-bg);
  color: var(--main-text-color);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16), 0 3px 10px rgba(0, 0, 0, 0.05);
}

/* =========================================================
   HEADER
   ========================================================= */
.user-mini-profile__header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

/* AVATAR */
.user-mini-profile__avatar {
  position: relative;
  display: block;
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  text-decoration: none;
}

.user-mini-profile__avatar-image {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 64px;
  height: 64px;
  display: block;
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
}

.user-mini-profile__avatar-frame {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 72px;
  height: 72px;
  display: block;
  -o-object-fit: fill;
     object-fit: fill;
  pointer-events: none;
}

/* USER MAIN */
.user-mini-profile__main {
  min-width: 0;
  flex: 1;
}

.user-mini-profile__name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.user-mini-profile__name {
  min-width: 0;
  overflow: hidden;
  color: var(--main-text-color);
  font-size: 19px;
  line-height: 24px;
  font-weight: 750;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none;
}

.user-mini-profile__name:hover {
  color: var(--main-purple-color);
}

/* PRO */
.user-mini-profile__pro {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 7px;
  background: linear-gradient(135deg, #8555ff, #7828ec);
  color: #fff;
  font-size: 10px;
  line-height: 14px;
  font-weight: 800;
}

/* ACTIVITY */
.user-mini-profile__activity {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  color: var(--secondary-text-color);
  font-size: 12px;
  line-height: 16px;
}

.user-mini-profile__activity--online {
  color: #19a85b;
}

.user-mini-profile__online-dot,
.user-mini-profile__offline-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
}

.user-mini-profile__online-dot {
  background: #1ec96b;
}

.user-mini-profile__offline-dot {
  background: #9da3af;
}

/* META */
.user-mini-profile__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}

.user-mini-profile__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 9px;
  background: var(--medium-bg);
  color: var(--secondary-text-color);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

.user-mini-profile__meta-item svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--main-purple-color);
}

.user-mini-profile__gender-symbol {
  color: var(--main-purple-color);
  font-size: 20px;
  line-height: 15px;
  font-weight: 600;
}

.user-mini-profile__meta-item--male .user-mini-profile__gender-symbol {
  color: #3079ee;
}

.user-mini-profile__meta-item--female .user-mini-profile__gender-symbol {
  color: #dc58a9;
}

/* =========================================================
   ABOUT
   ========================================================= */
.user-mini-profile__about {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 14px;
  color: var(--secondary-text-color);
  font-size: 13px;
  line-height: 19px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* =========================================================
   CLUB
   ========================================================= */
.user-mini-profile__club {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(119, 44, 232, 0.065);
  color: inherit;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}

a.user-mini-profile__club:hover {
  background: rgba(119, 44, 232, 0.105);
  transform: translateY(-1px);
}

.user-mini-profile__club--empty {
  opacity: 0.7;
}

.user-mini-profile__club-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 10px;
  background: var(--medium-bg);
}

.user-mini-profile__club-icon img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.user-mini-profile__club-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(119, 44, 232, 0.1);
  color: var(--main-purple-color);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

body.dark .user-mini-profile__club-icon {
  background: rgba(255, 255, 255, 0.05);
}

body.dark .user-mini-profile__club-fallback {
  background: rgba(148, 91, 238, 0.13);
}

.sticker__pack {
  display: flex !important;
  align-items: stretch !important;
  gap: 6px;
  width: 100%;
  padding: 9px 11px 10px !important;
  margin: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  cursor: grab;
}

.sticker__pack:active {
  cursor: grabbing;
}

.sticker__pack::-webkit-scrollbar {
  display: none;
}

.user-mini-profile__club-content {
  min-width: 0;
  flex: 1;
}

.user-mini-profile__club-title {
  overflow: hidden;
  color: var(--main-text-color);
  font-size: 13px;
  line-height: 17px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.user-mini-profile__club-subtitle {
  overflow: hidden;
  margin-top: 1px;
  color: var(--secondary-text-color);
  font-size: 11px;
  line-height: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.user-mini-profile__club-arrow {
  flex: 0 0 auto;
  color: var(--secondary-text-color);
  font-size: 28px;
  line-height: 1;
  font-weight: 300;
}

/* =========================================================
   STATS
   ========================================================= */
.user-mini-profile__stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 7px;
  margin-top: 10px;
}

/* cards + comments */
.user-mini-profile__stat {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 11px;
  background: var(--medium-bg);
}

.user-mini-profile__stat-icon {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--main-purple-color);
}

.user-mini-profile__stat-icon svg {
  width: 25px;
  height: 25px;
}

.user-mini-profile__stat-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.user-mini-profile__stat-content strong {
  overflow: hidden;
  color: var(--main-text-color);
  font-size: 14px;
  line-height: 16px;
  font-weight: 750;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.user-mini-profile__stat-content span {
  margin-top: 2px;
  color: var(--secondary-text-color);
  font-size: 10px;
  line-height: 12px;
  white-space: nowrap;
}

/* =========================================================
   TOWER
   Отдельная строка, поэтому ничего не переносится.
   ========================================================= */
.user-mini-profile__tower {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 6px 10px;
  border-radius: 11px;
  background: rgba(119, 44, 232, 0.07);
}

.user-mini-profile__tower-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--main-purple-color);
}

.user-mini-profile__tower-icon svg {
  width: 22px;
  height: 22px;
}

.user-mini-profile__tower-label {
  margin-left: 6px;
  color: var(--secondary-text-color);
  font-size: 12px;
  white-space: nowrap;
}

.user-mini-profile__tower-value {
  margin-left: auto;
  color: var(--main-text-color);
  font-size: 15px;
  font-weight: 750;
  white-space: nowrap;
}

/* =========================================================
   ACTIONS
   ========================================================= */
.user-mini-profile__actions {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
  gap: 8px;
  margin-top: 12px;
}

.user-mini-profile__button {
  min-width: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 11px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.user-mini-profile__button:hover {
  transform: translateY(-1px);
}

.user-mini-profile__button svg {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
}

.user-mini-profile__button--primary {
  background: linear-gradient(135deg, #8150fa, #7928ed);
  color: #fff;
}

.user-mini-profile__button--primary:hover {
  color: #fff;
}

.user-mini-profile__button--messages {
  border: 1px solid rgba(119, 44, 232, 0.24);
  background: transparent;
  color: var(--main-purple-color);
}

.user-mini-profile__button--messages:hover {
  background: rgba(119, 44, 232, 0.06);
  color: var(--main-purple-color);
}

/* =========================================================
   DARK
   ========================================================= */
body.dark .user-mini-profile {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.46), 0 3px 12px rgba(0, 0, 0, 0.25);
}

body.dark .user-mini-profile__club {
  background: rgba(148, 91, 238, 0.09);
}

body.dark a.user-mini-profile__club:hover {
  background: rgba(148, 91, 238, 0.14);
}

body.dark .user-mini-profile__club-icon {
  background: rgba(148, 91, 238, 0.14);
}

body.dark .user-mini-profile__tower {
  background: rgba(148, 91, 238, 0.09);
}

body.dark .user-mini-profile__button--messages {
  border-color: rgba(157, 103, 247, 0.45);
}

/* =========================================================
   MOBILE
   ========================================================= */
@media screen and (max-width: 480px) {
  .user-mini-profile {
    width: calc(100vw - 18px);
    padding: 14px;
    border-radius: 15px;
  }
  .user-mini-profile__header {
    gap: 11px;
  }
  .user-mini-profile__avatar {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
  }
  .user-mini-profile__avatar-image {
    top: 3px;
    left: 3px;
    width: 58px;
    height: 58px;
  }
  .user-mini-profile__avatar-frame {
    width: 64px;
    height: 64px;
  }
  .user-mini-profile__name {
    font-size: 16px;
    line-height: 20px;
  }
  .user-mini-profile__meta {
    gap: 5px;
    margin-top: 7px;
  }
  .user-mini-profile__meta-item {
    min-height: 27px;
    padding: 4px 7px;
    font-size: 11px;
  }
  .user-mini-profile__about {
    margin-top: 11px;
    font-size: 12px;
    line-height: 17px;
  }
  .user-mini-profile__club {
    margin-top: 11px;
    padding: 8px 9px;
  }
  .user-mini-profile__club-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
  .user-mini-profile__stats {
    margin-top: 8px;
  }
  .user-mini-profile__stat {
    padding: 8px;
  }
  .user-mini-profile__stat-icon {
    width: 23px;
    height: 23px;
    flex-basis: 23px;
  }
  .user-mini-profile__stat-icon svg {
    width: 21px;
    height: 21px;
  }
  .user-mini-profile__stat-content strong {
    font-size: 13px;
  }
  .user-mini-profile__stat-content span {
    font-size: 9px;
  }
  .user-mini-profile__actions {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 9px;
  }
  .user-mini-profile__button {
    min-height: 39px;
    padding: 7px 6px;
    font-size: 11px;
  }
  .user-mini-profile__button svg {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
  }
}
.user-mini-profile-loading {
  width: 370px;
  max-width: calc(100vw - 20px);
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: var(--light-bg);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.15);
}

.user-mini-profile-loading span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--main-purple-color);
  animation: user-mini-profile-loading 0.8s ease-in-out infinite;
}

.user-mini-profile-loading span:nth-child(2) {
  animation-delay: 0.12s;
}

.user-mini-profile-loading span:nth-child(3) {
  animation-delay: 0.24s;
}

@keyframes user-mini-profile-loading {
  0%, 100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-4px);
  }
}
.user-mini-profile-error {
  width: 330px;
  padding: 35px 20px;
  border-radius: 16px;
  background: var(--light-bg);
  color: var(--secondary-text-color);
  text-align: center;
}

.comments__avatar--mini-profile {
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  color: inherit;
  font: inherit;
}

.comments__avatar--mini-profile:focus,
.comments__avatar--mini-profile:active {
  outline: 0;
}

.comments__avatar--mini-profile:hover > img:not(.frame) {
  opacity: 0.9;
}

.user-mini-profile__meta-icon,
.user-mini-profile__gender-icon {
  display: block;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

.user-mini-profile__meta-icon {
  color: var(--main-purple-color);
}

.user-mini-profile__meta-item--male .user-mini-profile__gender-icon {
  color: #3478ed;
}

.user-mini-profile__meta-item--female .user-mini-profile__gender-icon {
  color: #dc58a9;
}

.user-mini-profile__meta-item--unknown .user-mini-profile__gender-icon {
  color: var(--secondary-text-color);
}

/* Башня */
.user-mini-profile__tower {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 7px 11px;
  border-radius: 11px;
  background: rgba(119, 44, 232, 0.07);
}

.user-mini-profile__tower-icon {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--main-purple-color);
}

.user-mini-profile__tower-icon svg {
  display: block;
  width: 23px;
  height: 23px;
}

.user-mini-profile__tower-label {
  margin-left: 7px;
  color: var(--secondary-text-color);
  font-size: 13px;
  line-height: 17px;
  font-weight: 500;
  white-space: nowrap;
}

.user-mini-profile__tower-value {
  margin-left: auto;
  color: var(--main-text-color);
  font-size: 17px;
  line-height: 20px;
  font-weight: 800;
  white-space: nowrap;
}

.user-mini-profile__tower-empty {
  margin-left: auto;
  color: var(--secondary-text-color);
  font-size: 11px;
  white-space: nowrap;
}

.user-mini-profile__button--trade {
  grid-column: 1/-1;
  border: 1px solid rgba(119, 44, 232, 0.18);
  background: rgba(119, 44, 232, 0.07);
  color: var(--main-purple-color);
}

.user-mini-profile__button--trade:hover {
  border-color: rgba(119, 44, 232, 0.3);
  background: rgba(119, 44, 232, 0.12);
  color: var(--main-purple-color);
}

.user-mini-profile__button--trade svg {
  width: 20px;
  height: 20px;
}

body.dark .user-mini-profile__button--trade {
  border-color: rgba(157, 103, 247, 0.24);
  background: rgba(148, 91, 238, 0.1);
}

body.dark .user-mini-profile__button--trade:hover {
  border-color: rgba(157, 103, 247, 0.4);
  background: rgba(148, 91, 238, 0.16);
}

.user-mini-profile__actions {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
  gap: 8px;
  margin-top: 12px;
}

.user-mini-profile__actions > .user-mini-profile__button:only-child {
  grid-column: 1/-1;
}

.user-mini-profile__button--trade {
  grid-column: 1/-1;
  border: 1px solid rgba(119, 44, 232, 0.18);
  background: rgba(119, 44, 232, 0.07);
  color: var(--main-purple-color);
}

.user-mini-profile__button--trade:hover {
  border-color: rgba(119, 44, 232, 0.3);
  background: rgba(119, 44, 232, 0.12);
  color: var(--main-purple-color);
}

body.dark .user-mini-profile__button--trade {
  border-color: rgba(157, 103, 247, 0.24);
  background: rgba(148, 91, 238, 0.1);
}

body.dark .user-mini-profile__button--trade:hover {
  border-color: rgba(157, 103, 247, 0.4);
  background: rgba(148, 91, 238, 0.16);
}

/* PHONE */
@media screen and (max-width: 480px) {
  .user-mini-profile__actions {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .user-mini-profile__button,
  .user-mini-profile__button--trade {
    grid-column: 1;
    width: 100%;
  }
  .user-mini-profile__button {
    min-height: 40px;
    font-size: 12px;
  }
}
/* =========================================================
   MINI PROFILE — MOBILE FIX
   ========================================================= */
@media screen and (max-width: 480px) {
  html:has(body.user-mini-profile-body-lock),
  body.user-mini-profile-body-lock {
    overflow: hidden !important;
    overscroll-behavior: none;
  }
  /*
   * Сам tippy не должен быть шире экрана.
   */
  .tippy-box[data-theme~=user-mini-profile] {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
    margin: 0 !important;
    border-radius: 16px;
    overflow: hidden;
  }
  .tippy-box[data-theme~=user-mini-profile] > .tippy-content {
    width: 100% !important;
    max-height: calc(100dvh - 12px) !important;
    padding: 0 !important;
    overflow: hidden;
  }
  /*
   * Скроллится только сама карточка.
   */
  .user-mini-profile {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 16px);
    padding: 13px;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 15px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  /*
   * Шапку чуть компактнее.
   */
  .user-mini-profile__header {
    gap: 10px;
  }
  .user-mini-profile__avatar {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
  }
  .user-mini-profile__avatar-image {
    top: 3px;
    left: 3px;
    width: 52px;
    height: 52px;
  }
  .user-mini-profile__avatar-frame {
    width: 58px;
    height: 58px;
  }
  .user-mini-profile__name {
    font-size: 16px;
    line-height: 19px;
  }
  .user-mini-profile__pro {
    padding: 2px 6px;
    font-size: 9px;
  }
  /*
   * Возраст / пол
   */
  .user-mini-profile__meta {
    gap: 5px;
    margin-top: 6px;
  }
  .user-mini-profile__meta-item {
    min-height: 26px;
    padding: 4px 7px;
    font-size: 10px;
    line-height: 14px;
  }
  .user-mini-profile__meta-icon,
  .user-mini-profile__gender-icon {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
  }
  /*
   * Описание
   */
  .user-mini-profile__about {
    margin-top: 10px;
    font-size: 12px;
    line-height: 16px;
    -webkit-line-clamp: 2;
  }
  /*
   * Клуб
   */
  .user-mini-profile__club {
    gap: 8px;
    margin-top: 10px;
    padding: 8px;
  }
  .user-mini-profile__club-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 8px;
  }
  .user-mini-profile__club-title {
    font-size: 12px;
    line-height: 15px;
  }
  .user-mini-profile__club-subtitle {
    font-size: 10px;
    line-height: 13px;
  }
  /*
   * Карты + комментарии
   */
  .user-mini-profile__stats {
    gap: 6px;
    margin-top: 8px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }
  .user-mini-profile__stat {
    gap: 6px;
    padding: 7px;
  }
  .user-mini-profile__stat-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
  }
  .user-mini-profile__stat-icon svg {
    width: 20px;
    height: 20px;
  }
  .user-mini-profile__stat-content strong {
    font-size: 12px;
    line-height: 14px;
  }
  .user-mini-profile__stat-content span {
    font-size: 9px;
    line-height: 11px;
  }
  /*
   * Башня
   */
  .user-mini-profile__tower {
    min-height: 34px;
    padding: 5px 8px;
  }
  .user-mini-profile__tower-icon {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }
  .user-mini-profile__tower-icon svg {
    width: 19px;
    height: 19px;
  }
  .user-mini-profile__tower-label {
    margin-left: 5px;
    font-size: 11px;
  }
  .user-mini-profile__tower-value {
    font-size: 14px;
  }
  /*
   * Кнопки одной колонкой.
   */
  .user-mini-profile__actions {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 6px;
    margin-top: 9px;
  }
  .user-mini-profile__button,
  .user-mini-profile__button--trade {
    grid-column: 1 !important;
    width: 100%;
    min-height: 38px;
    padding: 7px 8px;
    font-size: 11px;
  }
  .user-mini-profile__button svg {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
  }
}
.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;
  }
}
.b-manga-reader .header__controls .dropdown__content {
  max-height: calc(100dvh - 70px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.b-manga-reader .header__controls .menu--profile {
  max-height: none;
  overflow: visible;
}

.b-manga-reader .menu--profile > * {
  flex-shrink: 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;
}

.mb-guide {
  --mbg-header-offset: 0px;
  --mbg-anchor-offset: 92px;
  --mbg-bg: #f8f7fb;
  --mbg-surface: #fff;
  --mbg-surface-soft: #f5f2fa;
  --mbg-text: #282334;
  --mbg-muted: #716b7e;
  --mbg-line: #e9e4ef;
  --mbg-accent: #7934d9;
  --mbg-accent-hover: #6426bd;
  --mbg-accent-soft: #f0e8fb;
  --mbg-on-accent: #fff;
  --mbg-hero: #f0e8fb;
  --mbg-hero-end: #e8ddfa;
  --mbg-hero-text: #25183b;
  --mbg-warning: #875311;
  --mbg-warning-bg: #fff8eb;
  --mbg-warning-line: #f0d5a5;
  --mbg-mark: #fce7a4;
  --mbg-shadow: 0 12px 35px rgba(53, 27, 81, .06);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  flex: 1 0 auto;
  color: var(--mbg-text);
  background: var(--mbg-bg);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
}
.mb-guide *, .mb-guide *::before, .mb-guide *::after {
  box-sizing: border-box;
}
.mb-guide [hidden] {
  display: none !important;
}
.mb-guide h1, .mb-guide h2, .mb-guide h3, .mb-guide h4, .mb-guide h5, .mb-guide p, .mb-guide ul, .mb-guide ol {
  margin: 0;
}
.mb-guide a {
  color: inherit;
  text-decoration: none;
}
.mb-guide button, .mb-guide input {
  font: inherit;
  letter-spacing: inherit;
}
.mb-guide button {
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
}
.mb-guide button, .mb-guide summary, .mb-guide a, .mb-guide input {
  -webkit-tap-highlight-color: transparent;
}
.mb-guide button:focus-visible, .mb-guide a:focus-visible, .mb-guide summary:focus-visible, .mb-guide input:focus-visible {
  outline: 3px solid var(--mbg-accent);
  outline-offset: 4px;
}
.mb-guide summary {
  list-style: none;
  cursor: pointer;
}
.mb-guide summary::-webkit-details-marker {
  display: none;
}
.mb-guide summary::marker {
  content: "";
}
.mb-guide summary:focus-visible {
  outline-offset: -4px;
}
.mb-guide ::-moz-selection {
  background: #d7bdf9;
  color: #281343;
}
.mb-guide ::selection {
  background: #d7bdf9;
  color: #281343;
}
.mb-guide .mbg-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
.mb-guide .mbg-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.mb-guide .mbg-shell {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 26px 40px 38px;
}
.mb-guide #mbg-top {
  scroll-margin-top: var(--mbg-header-offset);
}
.mb-guide .mbg-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  font-size: 13px;
  color: var(--mbg-muted);
}
.mb-guide .mbg-breadcrumbs a {
  color: var(--mbg-accent);
}
.mb-guide .mbg-breadcrumbs .mbg-icon {
  width: 12px;
  height: 12px;
  opacity: 0.65;
}
.mb-guide .mbg-hero {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 352px;
  border-radius: 24px;
  color: var(--mbg-hero-text);
  background: linear-gradient(112deg, var(--mbg-hero) 20%, var(--mbg-hero-end));
}
.mb-guide .mbg-hero__content {
  position: relative;
  z-index: 2;
  padding: 38px 0 36px 44px;
}
.mb-guide .mbg-hero h1 {
  font-size: 50px;
  line-height: 1.11;
  font-weight: 750;
  letter-spacing: -1.9px;
  margin: 16px 0 18px;
  color: inherit;
}
.mb-guide .mbg-hero h1 span {
  color: var(--mbg-accent);
}
.mb-guide .mbg-hero__text {
  color: var(--mbg-muted);
  font-size: 16px;
  line-height: 1.65;
}
.mb-guide .mbg-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 25px;
}
.mb-guide .mbg-hero__secondary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  min-height: 44px;
  font-weight: 550;
}
.mb-guide .mbg-hero__secondary .mbg-icon {
  width: 17px;
  height: 17px;
  opacity: 0.6;
}
.mb-guide .mbg-hero__foot {
  font-size: 12px;
  color: var(--mbg-muted);
  margin-top: 20px;
}
.mb-guide .mbg-eyebrow {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: var(--mbg-accent);
}
.mb-guide .mbg-eyebrow span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(135, 71, 207, 0.1);
}
.mb-guide .mbg-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 44px;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: 11px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  transition: background 0.18s, transform 0.18s;
}
.mb-guide .mbg-button--primary {
  color: var(--mbg-on-accent);
  background: #7934d9;
  box-shadow: 0 5px 12px rgba(94, 29, 182, 0.13);
}
.mb-guide .mbg-button--primary:hover {
  color: #fff;
  background: #6825c5;
}
.mb-guide .mbg-button--soft {
  color: var(--mbg-accent);
  background: var(--mbg-accent-soft);
  white-space: nowrap;
}
.mb-guide .mbg-button--soft:hover {
  color: var(--mbg-accent);
  background: var(--mbg-line);
}
.mb-guide .mbg-button .mbg-icon {
  width: 18px;
  height: 18px;
}
.mb-guide .mbg-art {
  position: relative;
  min-width: 0;
  height: 340px;
  margin: auto 26px auto 0;
}
.mb-guide .mbg-art__orbit {
  position: absolute;
  border: 1px solid rgba(124, 80, 179, 0.14);
  border-radius: 50%;
  left: 50%;
  top: 45%;
}
.mb-guide .mbg-art__orbit--one {
  width: 320px;
  height: 320px;
  transform: translate(-50%, -50%);
}
.mb-guide .mbg-art__orbit--two {
  width: 405px;
  height: 405px;
  transform: translate(-50%, -50%);
  border-style: dashed;
  opacity: 0.65;
}
.mb-guide .mbg-art__spark {
  position: absolute;
  color: #9e6dd9;
  z-index: 4;
}
.mb-guide .mbg-art__spark--one {
  font-size: 35px;
  top: 20px;
  right: 47px;
}
.mb-guide .mbg-art__spark--two {
  font-size: 27px;
  bottom: 53px;
  left: 30px;
}
.mb-guide .mbg-art__dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #baa0de;
  top: 75px;
  left: 24px;
}
.mb-guide .mbg-art__label {
  position: absolute;
  z-index: 5;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  border-radius: 12px;
  font-size: 12px;
  white-space: nowrap;
  background: var(--mbg-surface);
  color: var(--mbg-text);
  box-shadow: 0 8px 26px rgba(55, 23, 96, 0.09);
  border: 1px solid rgba(141, 98, 193, 0.14);
}
.mb-guide .mbg-art__label .mbg-icon {
  color: var(--mbg-accent);
  width: 18px;
  height: 18px;
}
.mb-guide .mbg-art-card {
  position: absolute;
  width: 142px;
  height: 208px;
  left: 50%;
  top: 50%;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  color: #fff;
  overflow: hidden;
  box-shadow: 0 12px 25px rgba(47, 21, 89, 0.15);
  transform-origin: center 80%;
}
.mb-guide .mbg-art-card::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  pointer-events: none;
}
.mb-guide .mbg-art-card__rank {
  position: relative;
  z-index: 1;
  display: block;
  font-size: 25px;
  font-weight: 750;
  line-height: 1;
}
.mb-guide .mbg-art-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 18px;
}
.mb-guide .mbg-art-card__top > span:last-child {
  font-size: 24px;
  color: #e4caff;
}
.mb-guide .mbg-art-card__symbol.mbg-icon {
  position: absolute;
  left: 50%;
  top: 43%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  stroke-width: 1;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.25));
}
.mb-guide .mbg-art-card__bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  text-align: center;
  letter-spacing: 2.7px;
  font-size: 8px;
}
.mb-guide .mbg-art-card--back {
  background: linear-gradient(145deg, #8998d3, #414b85);
  transform: translate(-110%, -52%) rotate(-19deg);
}
.mb-guide .mbg-art-card--side {
  background: linear-gradient(150deg, #dcbbd2, #945d9e);
  transform: translate(12%, -57%) rotate(18deg);
}
.mb-guide .mbg-art-card--back > .mbg-art-card__rank, .mb-guide .mbg-art-card--side > .mbg-art-card__rank {
  padding: 15px;
}
.mb-guide .mbg-art-card--front {
  width: 158px;
  height: 226px;
  background: radial-gradient(circle at 50% 37%, #a45bea, transparent 47%), linear-gradient(153deg, #6430a8, #2d124b);
  transform: translate(-50%, -53%) rotate(-5deg);
  z-index: 3;
  box-shadow: 0 16px 32px rgba(60, 24, 109, 0.25);
}
.mb-guide .mbg-art-card--front .mbg-art-card__symbol {
  color: #f4dcff;
  width: 86px;
  height: 86px;
}
.mb-guide .mbg-art-card__ring {
  width: 114px;
  height: 114px;
  border: 1px solid rgba(236, 202, 255, 0.24);
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 43%;
  transform: translate(-50%, -50%);
}
.mb-guide .mbg-art-card__ring::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px dashed rgba(236, 202, 255, 0.25);
  border-radius: 50%;
}
.mb-guide .mbg-art-card__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 19px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 4px;
}
.mb-guide .mbg-art-card__caption > span:first-child {
  font-size: 7px;
  letter-spacing: 2px;
  color: #e1c8f4;
}
.mb-guide .mbg-art-card__caption strong {
  font-size: 14px;
  font-weight: 550;
  letter-spacing: -0.15px;
}
.mb-guide .mbg-art-card__dots {
  font-size: 8px;
  letter-spacing: 5px;
  color: #dcb5fb;
}
.mb-guide .mbg-quick {
  margin-top: 38px;
}
.mb-guide .mbg-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.mb-guide .mbg-kicker {
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 1.4px;
  font-weight: 650;
  color: var(--mbg-muted);
  margin-bottom: 6px;
}
.mb-guide .mbg-section-heading h2 {
  font-size: 25px;
  letter-spacing: -0.6px;
  line-height: 1.3;
  font-weight: 650;
  color: var(--mbg-text);
}
.mb-guide .mbg-section-description {
  font-size: 14px;
  color: var(--mbg-muted);
  margin-top: 7px;
}
.mb-guide .mbg-text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 550;
  color: var(--mbg-accent);
  white-space: nowrap;
  min-height: 44px;
}
.mb-guide .mbg-text-link .mbg-icon {
  width: 17px;
  height: 17px;
}
.mb-guide .mbg-quick__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.mb-guide .mbg-quick-card {
  display: block;
  position: relative;
  padding: 19px 19px 20px;
  border: 1px solid var(--mbg-line);
  border-radius: 15px;
  background: var(--mbg-surface);
  transition: transform 0.18s ease, border-color 0.18s, box-shadow 0.18s;
}
.mb-guide .mbg-quick-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 17px;
}
.mb-guide .mbg-quick-card__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--mbg-accent-soft);
  color: var(--mbg-accent);
}
.mb-guide .mbg-quick-card__number {
  color: var(--mbg-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}
.mb-guide .mbg-quick-card h3 {
  font-size: 17px;
  font-weight: 650;
  margin-bottom: 7px;
  letter-spacing: -0.2px;
  line-height: 1.25;
}
.mb-guide .mbg-quick-card p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--mbg-muted);
  max-width: 90%;
}
.mb-guide .mbg-quick-card__arrow {
  position: absolute;
  right: 16px;
  bottom: 20px;
  opacity: 0;
  color: var(--mbg-accent);
  transition: opacity 0.18s, transform 0.18s;
  transform: translateX(-4px);
}
.mb-guide .mbg-start-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 17px;
  color: var(--mbg-muted);
  font-size: 13px;
  line-height: 1.6;
}
.mb-guide .mbg-start-note > .mbg-icon {
  color: var(--mbg-accent);
  width: 17px;
  height: 17px;
  margin-top: 2px;
}
.mb-guide .mbg-start-note strong {
  color: var(--mbg-text);
  font-weight: 550;
}
.mb-guide .mbg-handbook {
  margin-top: 48px;
}
.mb-guide .mbg-count {
  background: var(--mbg-surface);
  border: 1px solid var(--mbg-line);
  border-radius: 7px;
  font-size: 12px;
  padding: 5px 9px;
  white-space: nowrap;
  color: var(--mbg-muted);
}
.mb-guide .mbg-tools {
  display: flex;
  gap: 10px;
  align-items: center;
  position: sticky;
  z-index: 20;
  top: var(--mbg-header-offset);
  background: var(--mbg-bg);
  padding: 10px 0;
  margin: -10px 0 18px;
}
.mb-guide .mbg-tools::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--mbg-line);
}
.mb-guide .mbg-search {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  gap: 11px;
  min-height: 48px;
  border: 1px solid var(--mbg-line);
  border-radius: 12px;
  padding: 0 12px 0 15px;
  background: var(--mbg-surface);
}
.mb-guide .mbg-search > .mbg-icon {
  color: var(--mbg-muted);
  width: 20px;
  height: 20px;
}
.mb-guide .mbg-search:focus-within {
  border-color: var(--mbg-accent);
  box-shadow: 0 0 0 2px var(--mbg-accent-soft);
}
.mb-guide .mbg-search input {
  display: block;
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0;
  margin: 0;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  color: var(--mbg-text);
  background: transparent;
  outline: 0;
  font-size: 16px;
  line-height: normal;
  -webkit-appearance: none;
}
.mb-guide .mbg-search input::-moz-placeholder {
  color: var(--mbg-muted);
  opacity: 0.9;
}
.mb-guide .mbg-search input::placeholder {
  color: var(--mbg-muted);
  opacity: 0.9;
}
.mb-guide .mbg-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.mb-guide .mbg-search input:focus-visible {
  outline: 0;
}
.mb-guide .mbg-search__clear {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 7px;
  color: var(--mbg-muted);
}
.mb-guide .mbg-toc-button {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--mbg-line);
  border-radius: 12px;
  background: var(--mbg-surface);
  font-size: 13px;
  font-weight: 600;
}
.mb-guide .mbg-layout {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  align-items: start;
  gap: 32px;
}
.mb-guide .mbg-sidebar {
  align-self: stretch;
  min-width: 0;
}
.mb-guide .mbg-sidebar__sticky {
  position: sticky;
  top: calc(var(--mbg-header-offset) + 88px);
  max-height: calc(100vh - var(--mbg-header-offset) - 104px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--mbg-line) transparent;
  padding-right: 8px;
  padding-bottom: 10px;
}
.mb-guide .mbg-nav__group + .mbg-nav__group {
  margin-top: 20px;
}
.mb-guide .mbg-nav__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mbg-muted);
  padding: 0 11px;
  margin-bottom: 8px;
}
.mb-guide .mbg-nav__link {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 9px;
  font-size: 13px;
  line-height: 1.4;
  min-height: 37px;
  color: var(--mbg-muted);
  border: 1px solid transparent;
}
.mb-guide .mbg-nav__number {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  width: 17px;
  flex: 0 0 auto;
  opacity: 0.75;
}
.mb-guide .mbg-nav__link > .mbg-icon {
  width: 13px;
  height: 13px;
  margin-left: auto;
  opacity: 0;
}
.mb-guide .mbg-nav__link[aria-current=location] {
  background: var(--mbg-accent-soft);
  color: var(--mbg-accent);
  font-weight: 600;
}
.mb-guide .mbg-nav__link[aria-current=location] > .mbg-icon {
  opacity: 1;
}
.mb-guide .mbg-progress-card {
  display: block;
  padding: 16px 14px;
  border: 1px solid var(--mbg-line);
  border-radius: 13px;
  background: var(--mbg-surface);
  margin-top: 24px;
}
.mb-guide .mbg-progress-card__heading {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}
.mb-guide .mbg-progress-card__heading > .mbg-icon:first-child {
  color: var(--mbg-accent);
  width: 17px;
  height: 17px;
}
.mb-guide .mbg-progress-card__heading > .mbg-icon:last-child {
  width: 15px;
  height: 15px;
  margin-left: auto;
  color: var(--mbg-muted);
}
.mb-guide .mbg-progress-card p {
  font-size: 11px;
  line-height: 1.6;
  margin-top: 9px;
  color: var(--mbg-muted);
}
.mb-guide .mbg-progress-track {
  height: 4px;
  border-radius: 3px;
  background: var(--mbg-accent-soft);
  display: block;
  margin-top: 11px;
  overflow: hidden;
}
.mb-guide .mbg-progress-track > span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--mbg-accent);
  transition: width 0.2s ease;
}
.mb-guide .mbg-main {
  min-width: 0;
}
.mb-guide .mbg-reading-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--mbg-muted);
}
.mb-guide .mbg-text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 0;
  min-height: 32px;
  border: none;
  background: none;
  color: var(--mbg-accent);
  font-size: 12px;
  font-weight: 550;
  white-space: nowrap;
}
.mb-guide .mbg-text-button .mbg-icon {
  width: 15px;
  height: 15px;
}
.mb-guide .mbg-topic {
  border: 1px solid var(--mbg-line);
  border-radius: 15px;
  background: var(--mbg-surface);
  margin: 0 0 12px;
  scroll-margin-top: var(--mbg-anchor-offset);
  min-width: 0;
}
.mb-guide .mbg-topic[open] {
  border-color: var(--mbg-accent);
  border-color: color-mix(in srgb, var(--mbg-accent) 32%, var(--mbg-line));
  box-shadow: var(--mbg-shadow);
}
.mb-guide .mbg-topic__summary {
  padding: 20px 22px;
  border-radius: 14px;
}
.mb-guide .mbg-topic__summary-layout {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  font: inherit;
}
.mb-guide .mbg-topic__number {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 550;
  color: var(--mbg-muted);
  background: var(--mbg-surface-soft);
  font-variant-numeric: tabular-nums;
}
.mb-guide .mbg-topic__heading {
  display: block;
  flex: 1;
  min-width: 0;
}
.mb-guide .mbg-topic__title {
  display: block;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.3px;
  color: var(--mbg-text);
}
.mb-guide .mbg-topic__description {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--mbg-muted);
  margin-top: 4px;
  line-height: 1.5;
}
.mb-guide .mbg-topic__chevron {
  color: var(--mbg-muted);
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
  margin-left: auto;
}
.mb-guide .mbg-topic[open] > summary .mbg-topic__number {
  color: var(--mbg-accent);
  background: var(--mbg-accent-soft);
}
.mb-guide .mbg-topic[open] > summary .mbg-topic__chevron {
  color: var(--mbg-accent);
  transform: rotate(180deg);
}
.mb-guide .mbg-topic__body {
  padding: 6px 24px 0;
}
.mb-guide .mbg-topic__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 16px 0;
  margin-top: 24px;
  border-top: 1px solid var(--mbg-line);
}
.mb-guide .mbg-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  font-size: 12px;
  color: var(--mbg-accent);
  margin-left: auto;
}
.mb-guide .mbg-next .mbg-icon {
  width: 15px;
  height: 15px;
}
.mb-guide .mbg-prose {
  font-size: 15px;
  line-height: 1.75;
  overflow-wrap: break-word;
  color: var(--mbg-text);
}
.mb-guide .mbg-prose .mbg-subtopic + .mbg-subtopic {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--mbg-line);
}
.mb-guide .mbg-prose .mbg-subtopic[hidden] + .mbg-subtopic {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.mb-guide .mbg-prose h3, .mb-guide .mbg-prose h4 {
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: -0.2px;
  font-weight: 650;
  margin: 0 0 14px;
  color: var(--mbg-text);
}
.mb-guide .mbg-prose h5 {
  font-size: 15px;
  font-weight: 650;
  margin: 22px 0 12px;
}
.mb-guide .mbg-prose p + p, .mb-guide .mbg-prose ul + p, .mb-guide .mbg-prose ol + p, .mb-guide .mbg-prose p + ul, .mb-guide .mbg-prose p + ol {
  margin-top: 14px;
}
.mb-guide .mbg-prose a {
  color: var(--mbg-accent);
  text-decoration: underline;
  text-decoration-color: rgba(145, 100, 197, 0.35);
  text-underline-offset: 3px;
}
.mb-guide .mbg-prose a:hover {
  text-decoration-color: currentColor;
}
.mb-guide .mbg-prose strong {
  font-weight: 650;
}
.mb-guide .mbg-prose ul {
  padding-left: 20px;
  list-style: disc;
}
.mb-guide .mbg-prose ol {
  padding-left: 25px;
  list-style: decimal;
}
.mb-guide .mbg-prose li {
  padding-left: 4px;
  margin-bottom: 9px;
  list-style: inherit;
}
.mb-guide .mbg-prose li:last-child {
  margin-bottom: 0;
}
.mb-guide .mbg-prose li::marker {
  color: var(--mbg-accent);
  font-weight: 650;
  font-size: 0.9em;
}
.mb-guide .mbg-prose li p {
  display: inline;
}
.mb-guide .mbg-prose .mbg-note {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 10px;
  border-left: 3px solid var(--mbg-accent);
  background: var(--mbg-accent-soft);
}
.mb-guide .mbg-prose .mbg-note--warning {
  color: var(--mbg-warning);
  background: var(--mbg-warning-bg);
  border-color: var(--mbg-warning-line);
}
.mb-guide .mbg-prose mark {
  color: inherit;
  background: var(--mbg-mark);
  border-radius: 2px;
  padding: 1px 0;
}
.mb-guide .mbg-table {
  width: 100%;
  margin: 18px 0;
  border: 1px solid var(--mbg-line);
  border-radius: 11px;
  overflow: hidden;
}
.mb-guide .mbg-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}
.mb-guide .mbg-table th, .mb-guide .mbg-table td {
  padding: 11px 13px;
  text-align: left;
  vertical-align: top;
  border: 0;
  border-bottom: 1px solid var(--mbg-line);
}
.mb-guide .mbg-table th {
  background: var(--mbg-surface-soft);
  font-weight: 650;
  font-size: 12px;
  color: var(--mbg-muted);
}
.mb-guide .mbg-table td:first-child {
  font-weight: 550;
}
.mb-guide .mbg-table tr:last-child td {
  border-bottom: 0;
}
.mb-guide .mbg-table .mbg-cell {
  display: block;
  min-width: 0;
}
.mb-guide .mbg-ranks {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  margin: 18px 0;
}
.mb-guide .mbg-rank {
  display: grid;
  place-items: center;
  font-weight: 750;
  font-size: 17px;
  background: var(--mbg-surface-soft);
  border: 1px solid var(--mbg-line);
  border-radius: 9px;
  width: 42px;
  height: 46px;
  color: var(--mbg-accent);
}
.mb-guide .mbg-rank--s {
  background: #fff0d5;
  color: #936212;
  border-color: #f0d9af;
}
.mb-guide .mbg-rank--a {
  background: #fdebf0;
  color: #b3416b;
  border-color: #f5d5df;
}
.mb-guide .mbg-rank--e {
  color: var(--mbg-muted);
}
.mb-guide .mbg-rank-arrow {
  font-size: 17px;
  color: var(--mbg-muted);
  opacity: 0.6;
}
.mb-guide .mbg-faq {
  scroll-margin-top: var(--mbg-anchor-offset);
}
.mb-guide .mbg-faq summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.6;
  padding: 2px 0;
}
.mb-guide .mbg-faq summary .mbg-icon {
  margin-left: auto;
  margin-top: 4px;
  width: 16px;
  height: 16px;
  color: var(--mbg-accent);
}
.mb-guide .mbg-faq[open] summary .mbg-icon {
  transform: rotate(180deg);
}
.mb-guide .mbg-faq__answer {
  color: var(--mbg-muted);
  padding-top: 12px;
}
.mb-guide .mbg-check-hint {
  font-size: 12px;
  color: var(--mbg-muted);
}
.mb-guide .mbg-checklist {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}
.mb-guide .mbg-check {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  position: relative;
  border: 1px solid var(--mbg-line);
  border-radius: 11px;
  padding: 14px;
  cursor: pointer;
  line-height: 1.6;
  color: var(--mbg-text);
}
.mb-guide .mbg-check input {
  position: absolute;
  z-index: 1;
  left: 14px;
  top: 16px;
  width: 24px;
  height: 24px;
  margin: 0;
  opacity: 0;
  scroll-margin-top: var(--mbg-anchor-offset);
}
.mb-guide .mbg-check__box {
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--mbg-line);
  border-radius: 7px;
  margin-top: 2px;
  background: var(--mbg-surface);
  pointer-events: none;
}
.mb-guide .mbg-check__box .mbg-icon {
  opacity: 0;
  width: 19px;
  height: 19px;
}
.mb-guide .mbg-check__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.mb-guide .mbg-check__text strong {
  font-size: 14px;
}
.mb-guide .mbg-check__text > span:last-child {
  font-size: 12px;
  color: var(--mbg-muted);
}
.mb-guide .mbg-check__when {
  font-size: 10px;
  letter-spacing: 0.1px;
  color: var(--mbg-accent);
}
.mb-guide .mbg-check input:checked + .mbg-check__box {
  background: var(--mbg-accent);
  border-color: var(--mbg-accent);
  color: var(--mbg-surface);
}
.mb-guide .mbg-check input:checked + .mbg-check__box .mbg-icon {
  opacity: 1;
}
.mb-guide .mbg-check input:checked ~ .mbg-check__text strong {
  color: var(--mbg-muted);
}
.mb-guide .mbg-check input:focus-visible + .mbg-check__box {
  outline: 3px solid var(--mbg-accent);
  outline-offset: 3px;
}
.mb-guide .mbg-empty {
  padding: 48px 20px;
  text-align: center;
  border: 1px dashed var(--mbg-line);
  border-radius: 15px;
  background: var(--mbg-surface);
}
.mb-guide .mbg-empty > .mbg-icon {
  width: 32px;
  height: 32px;
  margin: 0 auto 15px;
  color: var(--mbg-accent);
}
.mb-guide .mbg-empty h3 {
  font-size: 21px;
  margin-bottom: 8px;
  font-weight: 650;
}
.mb-guide .mbg-empty p {
  font-size: 14px;
  color: var(--mbg-muted);
  max-width: 360px;
  margin: 0 auto 20px;
}
.mb-guide .mbg-outro {
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 25px 0 6px;
  margin-top: 14px;
}
.mb-guide .mbg-outro > .mbg-icon {
  width: 32px;
  height: 32px;
  color: var(--mbg-accent);
}
.mb-guide .mbg-outro h3 {
  font-size: 15px;
  line-height: 1.45;
  font-weight: 600;
  margin-bottom: 6px;
}
.mb-guide .mbg-outro p {
  font-size: 12px;
  line-height: 1.7;
  color: var(--mbg-muted);
}
.mb-guide .mbg-outro .mbg-button {
  font-size: 12px;
  padding: 9px 13px;
}
.mb-guide .mbg-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--mbg-line);
  margin-top: 45px;
  padding-top: 22px;
  font-size: 11px;
  color: var(--mbg-muted);
  line-height: 1.7;
}
.mb-guide .mbg-footer a {
  display: flex;
  gap: 9px;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
  font-size: 12px;
}
.mb-guide .mbg-footer .mbg-icon {
  width: 16px;
  height: 16px;
}
.mb-guide .mbg-menu {
  color: var(--mbg-text);
  background: var(--mbg-surface);
  border: 1px solid var(--mbg-line);
  width: calc(100% - 24px);
  max-width: 480px;
  max-height: 86vh;
  max-height: 86dvh;
  padding: 0 20px 20px;
  border-radius: 20px;
  overscroll-behavior: contain;
  margin: auto auto 12px;
  box-shadow: 0 16px 80px rgba(0, 0, 0, 0.25);
}
.mb-guide .mbg-menu::backdrop {
  background: rgba(15, 10, 24, 0.5);
}
.mb-guide .mbg-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 0 16px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--mbg-line);
  position: sticky;
  top: 0;
  background: var(--mbg-surface);
  z-index: 1;
}
.mb-guide .mbg-menu__header h2 {
  font-size: 22px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.5px;
}
.mb-guide .mbg-menu__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid var(--mbg-line);
  border-radius: 10px;
  background: var(--mbg-surface-soft);
}
.mb-guide .mbg-menu .mbg-nav__link {
  min-height: 44px;
  padding: 10px 11px;
  font-size: 14px;
}
.mb-guide .mbg-menu .mbg-nav__group + .mbg-nav__group {
  margin-top: 18px;
}
.mb-guide .mbg-toast {
  position: fixed;
  z-index: 60;
  bottom: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 18px;
  background: var(--mbg-text);
  color: var(--mbg-surface);
  border-radius: 11px;
  font-size: 13px;
  max-width: calc(100vw - 32px);
  box-shadow: var(--mbg-shadow);
  text-align: center;
  pointer-events: none;
}
@media (hover: hover) {
  .mb-guide .mbg-quick-card:hover {
    border-color: var(--mbg-accent);
    transform: translateY(-3px);
    box-shadow: var(--mbg-shadow);
    color: var(--mbg-text);
  }
  .mb-guide .mbg-quick-card:hover .mbg-quick-card__arrow {
    opacity: 1;
    transform: translateX(0);
  }
  .mb-guide .mbg-nav__link:hover {
    background: var(--mbg-accent-soft);
    color: var(--mbg-accent);
  }
  .mb-guide .mbg-topic__summary:hover {
    background: var(--mbg-surface-soft);
  }
  .mb-guide .mbg-text-button:hover, .mb-guide .mbg-text-link:hover, .mb-guide .mbg-next:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}
@media (max-width: 1100px) {
  .mb-guide .mbg-shell {
    padding-left: 24px;
    padding-right: 24px;
  }
  .mb-guide .mbg-hero__content {
    padding-left: 32px;
  }
  .mb-guide .mbg-hero h1 {
    font-size: 45px;
  }
  .mb-guide .mbg-art {
    margin-right: 10px;
    transform: scale(0.88);
  }
  .mb-guide .mbg-layout {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 24px;
  }
  .mb-guide .mbg-nav__link {
    font-size: 12px;
  }
  .mb-guide .mbg-outro {
    flex-wrap: wrap;
  }
  .mb-guide .mbg-outro > div {
    flex: 1;
  }
  .mb-guide .mbg-outro .mbg-button {
    margin-left: 49px;
  }
}
@media (max-width: 900px) {
  .mb-guide .mbg-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .mb-guide.mbg-ready .mbg-sidebar {
    display: none;
  }
  .mb-guide .mbg-sidebar__sticky {
    position: static;
    max-height: none;
  }
  .mb-guide .mbg-sidebar .mbg-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .mb-guide .mbg-sidebar .mbg-nav__group {
    margin-top: 0;
  }
  .mb-guide .mbg-sidebar .mbg-progress-card {
    display: none;
  }
  .mb-guide .mbg-toc-button {
    display: inline-flex;
  }
  .mb-guide .mbg-hero {
    grid-template-columns: 1.25fr 0.85fr;
  }
  .mb-guide .mbg-hero h1 {
    font-size: 42px;
  }
  .mb-guide .mbg-hero__content {
    padding: 30px 0 30px 30px;
  }
  .mb-guide .mbg-hero__text {
    font-size: 14px;
  }
  .mb-guide .mbg-hero__actions {
    gap: 14px;
  }
  .mb-guide .mbg-hero__secondary {
    font-size: 13px;
  }
  .mb-guide .mbg-art {
    transform: scale(0.75);
    transform-origin: center;
    margin-right: 0;
  }
  .mb-guide .mbg-quick__grid {
    gap: 10px;
  }
  .mb-guide .mbg-quick-card {
    padding: 16px;
  }
  .mb-guide .mbg-quick-card h3 {
    font-size: 15px;
  }
  .mb-guide .mbg-quick-card p {
    font-size: 12px;
  }
}
@media (max-width: 600px) {
  .mb-guide {
    --mbg-anchor-offset: 82px;
  }
  .mb-guide .mbg-shell {
    padding: 18px 16px 28px;
  }
  .mb-guide .mbg-breadcrumbs {
    font-size: 12px;
    gap: 8px;
    margin-bottom: 16px;
  }
  .mb-guide .mbg-hero {
    display: block;
    border-radius: 18px;
    min-height: 0;
  }
  .mb-guide .mbg-hero__content {
    padding: 25px 23px 25px;
  }
  .mb-guide .mbg-eyebrow {
    font-size: 9px;
    letter-spacing: 1.5px;
  }
  .mb-guide .mbg-hero h1 {
    font-size: 37px;
    letter-spacing: -1.35px;
    margin: 15px 0;
    line-height: 1.1;
  }
  .mb-guide .mbg-hero__text {
    font-size: 14px;
    line-height: 1.6;
    max-width: 290px;
  }
  .mb-guide .mbg-hero__actions {
    margin-top: 20px;
    gap: 10px;
  }
  .mb-guide .mbg-hero__actions .mbg-button {
    font-size: 13px;
    gap: 10px;
    padding: 11px 15px;
  }
  .mb-guide .mbg-hero__secondary {
    font-size: 12px;
    gap: 5px;
  }
  .mb-guide .mbg-hero__secondary > .mbg-icon {
    display: none;
  }
  .mb-guide .mbg-hero__foot {
    display: none;
  }
  .mb-guide .mbg-desktop-break {
    display: none;
  }
  .mb-guide .mbg-art {
    position: absolute;
    top: -5px;
    right: -10px;
    width: 250px;
    height: 270px;
    transform: scale(0.57);
    transform-origin: top right;
    margin: 0;
    opacity: 0.13;
    pointer-events: none;
  }
  .mb-guide .mbg-art__orbit, .mb-guide .mbg-art__spark, .mb-guide .mbg-art__dot, .mb-guide .mbg-art__label {
    display: none;
  }
  .mb-guide .mbg-quick {
    margin-top: 28px;
  }
  .mb-guide .mbg-section-heading {
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
  }
  .mb-guide .mbg-section-heading h2 {
    font-size: 22px;
    letter-spacing: -0.5px;
    line-height: 1.3;
  }
  .mb-guide .mbg-kicker {
    font-size: 8px;
    letter-spacing: 1.2px;
  }
  .mb-guide .mbg-quick > .mbg-section-heading {
    flex-wrap: wrap;
  }
  .mb-guide .mbg-quick .mbg-text-link {
    min-height: 28px;
    font-size: 12px;
    margin-top: -5px;
  }
  .mb-guide .mbg-quick__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .mb-guide .mbg-quick-card {
    padding: 14px 14px 16px;
    border-radius: 13px;
  }
  .mb-guide .mbg-quick-card__top {
    margin-bottom: 11px;
  }
  .mb-guide .mbg-quick-card__icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }
  .mb-guide .mbg-quick-card__icon .mbg-icon {
    width: 19px;
    height: 19px;
  }
  .mb-guide .mbg-quick-card h3 {
    font-size: 15px;
    margin-bottom: 5px;
  }
  .mb-guide .mbg-quick-card p {
    font-size: 12px;
    max-width: none;
  }
  .mb-guide .mbg-quick-card__arrow {
    display: none;
  }
  .mb-guide .mbg-start-note {
    font-size: 12px;
    gap: 8px;
    margin-top: 14px;
  }
  .mb-guide .mbg-handbook {
    margin-top: 33px;
  }
  .mb-guide .mbg-section-description {
    font-size: 12px;
    line-height: 1.6;
    max-width: 260px;
  }
  .mb-guide .mbg-count {
    font-size: 10px;
    padding: 4px 7px;
    margin-top: 20px;
  }
  .mb-guide .mbg-tools {
    margin-bottom: 12px;
    gap: 8px;
    padding: 9px 0;
  }
  .mb-guide .mbg-search {
    gap: 8px;
    padding-left: 12px;
    padding-right: 6px;
    border-radius: 10px;
    min-height: 46px;
  }
  .mb-guide .mbg-search input {
    font-size: 16px;
    height: 44px;
  }
  .mb-guide .mbg-search > .mbg-icon {
    width: 18px;
    height: 18px;
  }
  .mb-guide .mbg-toc-button {
    padding: 0;
    height: 46px;
    flex: 0 0 46px;
    width: 46px;
    border-radius: 10px;
  }
  .mb-guide .mbg-toc-button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .mb-guide .mbg-layout {
    gap: 12px;
  }
  .mb-guide .mbg-reading-bar {
    font-size: 10px;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
  }
  .mb-guide .mbg-reading-bar p {
    line-height: 1.5;
    max-width: 55%;
    padding-top: 6px;
  }
  .mb-guide .mbg-reading-bar .mbg-text-button {
    font-size: 11px;
    min-height: 34px;
  }
  .mb-guide .mbg-topic {
    border-radius: 13px;
    margin-bottom: 10px;
  }
  .mb-guide .mbg-topic__summary {
    padding: 17px 14px;
    border-radius: 12px;
  }
  .mb-guide .mbg-topic__summary-layout {
    align-items: flex-start;
    gap: 10px;
  }
  .mb-guide .mbg-topic__number {
    flex-basis: 29px;
    width: 29px;
    height: 31px;
    border-radius: 8px;
    font-size: 11px;
  }
  .mb-guide .mbg-topic__title {
    font-size: 16px;
    letter-spacing: -0.2px;
    padding-top: 1px;
  }
  .mb-guide .mbg-topic__description {
    font-size: 11px;
    margin-top: 4px;
  }
  .mb-guide .mbg-topic__chevron {
    width: 16px;
    height: 16px;
    margin-top: 5px;
  }
  .mb-guide .mbg-topic__body {
    padding: 6px 16px 0;
  }
  .mb-guide .mbg-prose {
    font-size: 14px;
    line-height: 1.75;
  }
  .mb-guide .mbg-prose h3, .mb-guide .mbg-prose h4 {
    font-size: 16px;
    line-height: 1.45;
    margin-bottom: 12px;
  }
  .mb-guide .mbg-prose h5 {
    font-size: 14px;
  }
  .mb-guide .mbg-prose ol {
    padding-left: 20px;
  }
  .mb-guide .mbg-prose li {
    padding-left: 2px;
    margin-bottom: 11px;
  }
  .mb-guide .mbg-prose .mbg-subtopic + .mbg-subtopic {
    margin-top: 22px;
    padding-top: 20px;
  }
  .mb-guide .mbg-prose .mbg-note {
    padding: 12px 13px;
    font-size: 13px;
  }
  .mb-guide .mbg-topic__footer {
    margin-top: 20px;
    padding: 12px 0;
    gap: 4px 15px;
  }
  .mb-guide .mbg-topic__footer .mbg-text-button {
    min-height: 40px;
    font-size: 11px;
  }
  .mb-guide .mbg-next {
    min-height: 40px;
    font-size: 11px;
    line-height: 1.5;
  }
  .mb-guide .mbg-table {
    margin: 16px 0;
    border-radius: 10px;
  }
  .mb-guide .mbg-table table, .mb-guide .mbg-table tbody {
    display: block;
    width: 100%;
  }
  .mb-guide .mbg-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .mb-guide .mbg-table tr {
    display: block;
    border-bottom: 1px solid var(--mbg-line);
    padding: 6px 0;
  }
  .mb-guide .mbg-table tr:last-child {
    border-bottom: 0;
  }
  .mb-guide .mbg-table td {
    display: grid;
    grid-template-columns: minmax(80px, 34%) minmax(0, 1fr);
    gap: 12px;
    padding: 7px 12px;
    border: 0;
    font-size: 12px;
    text-align: left !important;
    font-weight: 400;
  }
  .mb-guide .mbg-table td::before {
    content: attr(data-label);
    color: var(--mbg-muted);
    font-size: 10px;
    font-weight: 500;
    padding-top: 1px;
    line-height: 1.6;
  }
  .mb-guide .mbg-table td:first-child {
    font-weight: 600;
    color: var(--mbg-text);
  }
  .mb-guide .mbg-table tr:nth-child(even) {
    background: var(--mbg-surface-soft);
  }
  .mb-guide .mbg-ranks {
    gap: 3px;
  }
  .mb-guide .mbg-rank {
    width: 28px;
    height: 35px;
    font-size: 14px;
    border-radius: 7px;
  }
  .mb-guide .mbg-rank-arrow {
    font-size: 12px;
  }
  .mb-guide .mbg-check {
    padding: 12px;
    gap: 11px;
  }
  .mb-guide .mbg-check__text strong {
    font-size: 13px;
  }
  .mb-guide .mbg-check input {
    left: 12px;
    top: 14px;
  }
  .mb-guide .mbg-faq summary {
    font-size: 14px;
  }
  .mb-guide .mbg-outro {
    padding: 21px 3px 0;
    gap: 14px;
  }
  .mb-guide .mbg-outro > .mbg-icon {
    width: 26px;
    height: 26px;
    align-self: flex-start;
    margin-top: 4px;
  }
  .mb-guide .mbg-outro h3 {
    font-size: 14px;
  }
  .mb-guide .mbg-outro p {
    font-size: 12px;
  }
  .mb-guide .mbg-outro .mbg-button {
    margin-left: 40px;
    min-height: 42px;
  }
  .mb-guide .mbg-footer {
    margin-top: 30px;
    padding-top: 18px;
    font-size: 10px;
    align-items: flex-start;
    gap: 18px;
  }
  .mb-guide .mbg-footer p {
    max-width: 75%;
  }
  .mb-guide .mbg-footer a {
    font-size: 11px;
    gap: 6px;
  }
  .mb-guide .mbg-menu {
    margin-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    padding-bottom: 20px;
  }
}
@media (max-width: 360px) {
  .mb-guide .mbg-shell {
    padding-left: 12px;
    padding-right: 12px;
  }
  .mb-guide .mbg-hero__content {
    padding: 23px 19px;
  }
  .mb-guide .mbg-hero h1 {
    font-size: 33px;
  }
  .mb-guide .mbg-hero__actions {
    gap: 7px;
  }
  .mb-guide .mbg-hero__actions .mbg-button {
    font-size: 12px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .mb-guide .mbg-hero__secondary {
    font-size: 11px;
  }
  .mb-guide .mbg-section-heading h2 {
    font-size: 20px;
  }
  .mb-guide .mbg-quick-card {
    padding: 12px;
  }
  .mb-guide .mbg-quick-card h3 {
    font-size: 14px;
  }
  .mb-guide .mbg-rank {
    width: 24px;
    height: 32px;
    font-size: 13px;
  }
  .mb-guide .mbg-topic__body {
    padding-left: 13px;
    padding-right: 13px;
  }
  .mb-guide .mbg-table td {
    grid-template-columns: minmax(72px, 33%) minmax(0, 1fr);
    gap: 9px;
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mb-guide *, .mb-guide *::before, .mb-guide *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}
@media print {
  .mb-guide {
    background: #fff;
    color: #111;
    --mbg-muted: #555;
    --mbg-text: #111;
    --mbg-surface: #fff;
    --mbg-surface-soft: #f4f4f4;
    --mbg-line: #ddd;
    --mbg-accent: #542692;
  }
  .mb-guide .mbg-tools, .mb-guide .mbg-sidebar, .mb-guide .mbg-art, .mb-guide .mbg-reading-bar, .mb-guide .mbg-quick, .mb-guide .mbg-topic__footer, .mb-guide .mbg-menu, .mb-guide .mbg-toast, .mb-guide .mbg-hero__actions, .mb-guide .mbg-empty {
    display: none !important;
  }
  .mb-guide .mbg-shell {
    max-width: none;
    padding: 0;
  }
  .mb-guide .mbg-layout {
    display: block;
  }
  .mb-guide .mbg-hero {
    display: block;
    background: #fff;
    min-height: 0;
  }
  .mb-guide .mbg-hero__content {
    padding: 10px 0;
  }
  .mb-guide .mbg-hero h1 {
    font-size: 32px;
  }
  .mb-guide .mbg-topic {
    box-shadow: none;
    border-color: #ddd;
  }
  .mb-guide .mbg-topic__summary {
    -moz-column-break-after: avoid;
         break-after: avoid;
  }
  .mb-guide .mbg-topic__body {
    display: block;
  }
  .mb-guide .mbg-table tr {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }
}

body.dark .mb-guide {
  --mbg-bg: #141217;
  --mbg-surface: #1d1923;
  --mbg-surface-soft: #26202e;
  --mbg-text: #ede8f3;
  --mbg-muted: #aaa1b8;
  --mbg-line: #342c3e;
  --mbg-accent: #c098f6;
  --mbg-accent-hover: #d4b5ff;
  --mbg-accent-soft: #31213f;
  --mbg-hero: #271a35;
  --mbg-hero-end: #39224f;
  --mbg-hero-text: #f4ecff;
  --mbg-warning: #e8c48a;
  --mbg-warning-bg: #31271b;
  --mbg-warning-line: #79613d;
  --mbg-mark: #685121;
  --mbg-shadow: 0 12px 35px rgba(0, 0, 0, .1);
  color-scheme: dark;
}
body.dark .mb-guide .mbg-art__orbit {
  border-color: rgba(190, 150, 236, 0.13);
}
body.dark .mb-guide .mbg-art-card--front {
  border-color: #c997f0;
}
body.dark .mb-guide .mbg-art-card--back {
  background: linear-gradient(145deg, #6374b5, #333965);
}
body.dark .mb-guide .mbg-art-card--side {
  background: linear-gradient(150deg, #b67cad, #603b6b);
}
body.dark .mb-guide .mbg-rank--s {
  background: #3d2e1c;
  border-color: #5d4729;
  color: #e6c37e;
}
body.dark .mb-guide .mbg-rank--a {
  background: #382430;
  border-color: #5c3345;
  color: #e49db8;
}

body.mbg-menu-open {
  overflow: hidden;
}

.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);
}

.market-history {
  --mh-bg-soft: #f8f7fa;
  --mh-bg-elevated: #ffffff;
  --mh-text: #29252f;
  --mh-text-secondary: #706978;
  --mh-text-muted: #96909d;
  --mh-border: #e8e3ec;
  --mh-border-soft: #efebf2;
  --mh-purple: #7628f4;
  --mh-purple-soft: #f4edff;
  --mh-red: #ef4054;
  --mh-red-soft: #fff0f2;
  --mh-chart-grid: #ebe7ef;
  --mh-chart-label: #8e8797;
  --mh-chart-line: #7628f4;
  --mh-chart-point-bg: #ffffff;
  --mh-chart-label-bg: #ffffff;
  --mh-chart-label-border: #e4dbea;
  position: relative;
  width: 100%;
  margin: 36px 0 0;
  padding: 29px 0 2px;
  color: var(--mh-text);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--mh-border);
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
  /*
   |--------------------------------------------------------------------------
   | PERIOD
   |--------------------------------------------------------------------------
   */
  /*
   |--------------------------------------------------------------------------
   | SOURCE
   |--------------------------------------------------------------------------
   */
  /*
   |--------------------------------------------------------------------------
   | CHART
   |--------------------------------------------------------------------------
   */
  /*
   |--------------------------------------------------------------------------
   | LOADING
   |--------------------------------------------------------------------------
   */
  /*
   |--------------------------------------------------------------------------
   | EMPTY
   |--------------------------------------------------------------------------
   */
  /*
   |--------------------------------------------------------------------------
   | TOOLTIP
   |--------------------------------------------------------------------------
   */
  /*
   |--------------------------------------------------------------------------
   | STATS
   |--------------------------------------------------------------------------
   */
  /*
   * На телефоне больше не будет:
   *
   * Последняя прода...
   */
  /*
   |--------------------------------------------------------------------------
   | BOTTOM
   |--------------------------------------------------------------------------
   */
}
.market-history[hidden] {
  display: none !important;
}
.market-history__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 0 18px;
}
.market-history__heading {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 13px;
}
.market-history__heading-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  color: var(--mh-purple);
  background: var(--mh-purple-soft);
  border: 1px solid rgba(118, 40, 244, 0.08);
  border-radius: 14px;
}
.market-history__heading-icon svg {
  width: 23px;
  height: 23px;
}
.market-history__heading-content {
  min-width: 0;
}
.market-history__title {
  color: var(--mh-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.2px;
}
.market-history__subtitle {
  margin-top: 4px;
  color: var(--mh-text-secondary);
  font-size: 13px;
  line-height: 1.3;
}
.market-history__periods {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 4px;
  background: var(--mh-bg-soft);
  border: 1px solid var(--mh-border-soft);
  border-radius: 14px;
}
.market-history__period {
  height: 39px;
  padding: 0 17px;
  color: var(--mh-text-secondary);
  background: transparent;
  border: 0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease;
}
.market-history__period:hover:not(.is-active) {
  color: var(--mh-purple);
  background: rgba(118, 40, 244, 0.05);
}
.market-history__period.is-active {
  color: #fff;
  background: linear-gradient(135deg, #8735ff, #6817e8);
}
.market-history__source-tabs {
  display: flex;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  gap: 2px;
  margin: 0 0 11px;
  padding: 4px;
  background: var(--mh-bg-soft);
  border: 1px solid var(--mh-border-soft);
  border-radius: 11px;
}
.market-history__source {
  height: 31px;
  padding: 0 13px;
  color: var(--mh-text-secondary);
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.market-history__source:hover:not(.is-active) {
  color: var(--mh-purple);
}
.market-history__source.is-active {
  color: var(--mh-purple);
  background: var(--mh-bg-elevated);
  box-shadow: inset 0 0 0 1px rgba(118, 40, 244, 0.13);
}
.market-history__content {
  position: relative;
  min-height: 285px;
  padding: 0;
}
.market-history__chart-container {
  position: relative;
  width: 100%;
  height: 285px;
}
.market-history__chart {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}
.market-history__loading {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--mh-text-secondary);
  font-size: 12px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
.market-history.is-loading .market-history__loading {
  display: flex;
}
.market-history__spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(118, 40, 244, 0.15);
  border-top-color: var(--mh-purple);
  border-radius: 50%;
  animation: marketHistorySpinner 0.7s linear infinite;
}
.market-history__empty {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 25px;
  text-align: center;
}
.market-history.is-empty .market-history__empty {
  display: flex;
}
.market-history.is-empty .market-history__chart-container {
  visibility: hidden;
}
.market-history.is-empty .market-history__stats,
.market-history.is-empty .market-history__bottom {
  opacity: 0.35;
}
.market-history__empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
  margin-bottom: 10px;
  color: var(--mh-purple);
  background: var(--mh-purple-soft);
  border-radius: 13px;
}
.market-history__empty-icon svg {
  width: 21px;
  height: 21px;
}
.market-history__empty-title {
  color: var(--mh-text);
  font-size: 14px;
  font-weight: 700;
}
.market-history__empty-text {
  max-width: 330px;
  margin-top: 4px;
  color: var(--mh-text-muted);
  font-size: 11px;
  line-height: 1.45;
}
.market-history__tooltip {
  position: absolute;
  z-index: 40;
  display: none;
  min-width: 190px;
  padding: 12px 13px;
  color: var(--mh-text);
  background: var(--mh-bg-elevated);
  border: 1px solid var(--mh-border);
  border-radius: 13px;
  box-shadow: 0 12px 30px rgba(30, 20, 42, 0.13);
  box-sizing: border-box;
  pointer-events: none;
}
.market-history__tooltip.is-visible {
  display: block;
}
.market-history__tooltip-date {
  margin-bottom: 5px;
  color: var(--mh-text-muted);
  font-size: 10px;
}
.market-history__tooltip-price {
  color: var(--mh-text);
  font-size: 18px;
  font-weight: 800;
}
.market-history__tooltip-equivalent {
  margin-top: 2px;
  color: var(--mh-purple);
  font-size: 11px;
  font-weight: 600;
}
.market-history__tooltip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 7px;
  color: var(--mh-text-secondary);
  font-size: 11px;
}
.market-history__tooltip-row strong {
  color: var(--mh-text);
  font-weight: 600;
  text-align: right;
}
.market-history__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  padding: 4px 0 0;
}
.market-history__stat {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 76px;
  gap: 10px;
  padding: 12px;
  background: var(--mh-bg-soft);
  border: 1px solid var(--mh-border-soft);
  border-radius: 14px;
  box-sizing: border-box;
  box-shadow: none;
}
.market-history__stat svg {
  width: 18px;
  height: 18px;
}
.market-history__stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  color: var(--mh-purple);
  background: var(--mh-purple-soft);
  border-radius: 11px;
}
.market-history__stat-icon--count {
  color: var(--mh-red);
  background: var(--mh-red-soft);
}
.market-history__stat-content {
  min-width: 0;
}
.market-history__stat-label {
  color: var(--mh-text-secondary);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.15;
  white-space: normal;
}
.market-history__stat-value {
  margin-top: 5px;
  color: var(--mh-purple);
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.2px;
  white-space: nowrap;
}
.market-history__stat-value--small {
  font-size: 14px;
}
.market-history__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 13px 0 3px;
  color: var(--mh-text-muted);
  font-size: 10px;
}
.market-history__bottom-item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.market-history__bottom-item strong {
  color: var(--mh-text-secondary);
  font-weight: 700;
}
.market-history__bottom-divider {
  width: 3px;
  height: 3px;
  background: var(--mh-text-muted);
  border-radius: 50%;
  opacity: 0.45;
}
.market-history__legend {
  display: inline-block;
  width: 7px;
  height: 7px;
  box-sizing: border-box;
}
.market-history__legend--market {
  border: 2px solid var(--mh-purple);
  border-radius: 50%;
}
.market-history__legend--request {
  border: 2px solid var(--mh-purple);
  border-radius: 1px;
  transform: rotate(45deg);
}

/*
 |--------------------------------------------------------------------------
 | DARK
 |--------------------------------------------------------------------------
 */
html[data-theme=dark] .market-history,
html.dark .market-history,
body.dark .market-history,
body.dark-theme .market-history,
body.theme-dark .market-history {
  --mh-bg-soft: #211e26;
  --mh-bg-elevated: #242129;
  --mh-text: #f0ecf3;
  --mh-text-secondary: #aaa2b1;
  --mh-text-muted: #7f7886;
  --mh-border: #312c37;
  --mh-border-soft: #2c2831;
  --mh-purple: #9a61ff;
  --mh-purple-soft:
      rgba(151, 91, 255, .13);
  --mh-red: #ff6271;
  --mh-red-soft:
      rgba(255, 79, 98, .11);
  --mh-chart-grid: #312c37;
  --mh-chart-label: #837b8b;
  --mh-chart-line: #985bff;
  --mh-chart-point-bg: #1b181f;
  --mh-chart-label-bg: #242129;
  --mh-chart-label-border: #3b3543;
  background: transparent;
  box-shadow: none;
}
html[data-theme=dark] .market-history .market-history__loading,
html.dark .market-history .market-history__loading,
body.dark .market-history .market-history__loading,
body.dark-theme .market-history .market-history__loading,
body.theme-dark .market-history .market-history__loading {
  background: rgba(24, 21, 28, 0.75);
}
html[data-theme=dark] .market-history .market-history__source.is-active,
html.dark .market-history .market-history__source.is-active,
body.dark .market-history .market-history__source.is-active,
body.dark-theme .market-history .market-history__source.is-active,
body.theme-dark .market-history .market-history__source.is-active {
  background: #29252f;
}

/*
 |--------------------------------------------------------------------------
 | MOBILE
 |--------------------------------------------------------------------------
 */
@media (max-width: 768px) {
  .market-history {
    width: 100%;
    margin: 27px 0 0;
    padding: 23px 0 2px;
  }
  .market-history__top {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    padding: 0 0 12px;
  }
  .market-history__heading {
    gap: 10px;
  }
  .market-history__heading-icon {
    width: 39px;
    height: 39px;
    flex-basis: 39px;
    border-radius: 12px;
  }
  .market-history__heading-icon svg {
    width: 20px;
    height: 20px;
  }
  .market-history__title {
    font-size: 15px;
  }
  .market-history__subtitle {
    margin-top: 2px;
    font-size: 11px;
  }
  .market-history__periods {
    width: 100%;
  }
  .market-history__period {
    flex: 1;
    height: 35px;
    padding: 0 6px;
    font-size: 11px;
  }
  .market-history__source-tabs {
    overflow-x: auto;
    max-width: 100%;
    margin: 0 0 5px;
    scrollbar-width: none;
  }
  .market-history__source-tabs::-webkit-scrollbar {
    display: none;
  }
  .market-history__source {
    flex: 0 0 auto;
    height: 29px;
    padding: 0 10px;
    font-size: 10px;
  }
  .market-history__content {
    min-height: 230px;
  }
  .market-history__chart-container {
    height: 230px;
  }
  .market-history__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 3px 0 0;
  }
  .market-history__stat {
    min-height: 67px;
    gap: 8px;
    padding: 9px;
    border-radius: 12px;
  }
  .market-history__stat-icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    border-radius: 9px;
  }
  .market-history__stat-icon svg {
    width: 15px;
    height: 15px;
  }
  .market-history__stat-label {
    font-size: 9px;
    line-height: 1.2;
  }
  .market-history__stat-value {
    margin-top: 4px;
    font-size: 16px;
  }
  .market-history__stat-value--small {
    font-size: 12px;
  }
  .market-history__bottom {
    padding: 11px 0 2px;
    font-size: 9px;
  }
  .market-history__tooltip {
    min-width: 170px;
    padding: 10px 11px;
  }
  .market-history__tooltip-price {
    font-size: 16px;
  }
}
@media (max-width: 390px) {
  .market-history__stat {
    padding: 8px;
  }
  .market-history__stat-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }
}
@keyframes marketHistorySpinner {
  to {
    transform: rotate(360deg);
  }
}
.market-sellers {
  --ms-bg: #f8f8f9;
  --ms-bg-hover: #f5f2fa;
  --ms-bg-best: #fbf8ff;
  --ms-border: rgba(32, 27, 39, .07);
  --ms-border-hover: rgba(118, 40, 244, .18);
  --ms-text: #29262e;
  --ms-muted: #8b8591;
  --ms-muted-soft: #aaa4af;
  --ms-purple: #7628f4;
  --ms-purple-soft: #f3ebff;
  --ms-purple-border: rgba(118, 40, 244, .24);
  width: 100%;
  margin: 0;
  padding: 0 0 4px;
  box-sizing: border-box;
  /*
   |--------------------------------------------------------------------------
   | HEADER
   |--------------------------------------------------------------------------
   */
  /*
   |--------------------------------------------------------------------------
   | GRID
   |--------------------------------------------------------------------------
   */
  /*
   |--------------------------------------------------------------------------
   | LOT
   |--------------------------------------------------------------------------
   */
  /*
   |--------------------------------------------------------------------------
   | AVATAR
   |--------------------------------------------------------------------------
   */
  /*
   |--------------------------------------------------------------------------
   | INFO
   |--------------------------------------------------------------------------
   */
  /*
   |--------------------------------------------------------------------------
   | META
   |--------------------------------------------------------------------------
   */
  /*
   * Номер экземпляра специально чуть заметнее,
   * потому что это важная информация лота.
   */
  /*
   |--------------------------------------------------------------------------
   | BEST
   |--------------------------------------------------------------------------
   */
  /*
   |--------------------------------------------------------------------------
   | ENCHANT
   |--------------------------------------------------------------------------
   */
  /*
   |--------------------------------------------------------------------------
   | PRICE
   |--------------------------------------------------------------------------
   */
  /*
   |--------------------------------------------------------------------------
   | ARROW
   |--------------------------------------------------------------------------
   */
  /*
   |--------------------------------------------------------------------------
   | EMPTY
   |--------------------------------------------------------------------------
   */
}
.market-sellers__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.market-sellers__heading {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}
.market-sellers__title {
  color: var(--ms-text);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.25px;
}
.market-sellers__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 25px;
  height: 23px;
  padding: 0 7px;
  color: var(--ms-purple);
  background: var(--ms-purple-soft);
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.market-sellers__header-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ms-muted);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.market-sellers__header-hint svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}
.market-sellers__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}
.market-sellers__item {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 68px;
  gap: 11px;
  padding: 9px 11px;
  color: var(--ms-text);
  background: var(--ms-bg);
  border: 1px solid var(--ms-border);
  border-radius: 14px;
  box-sizing: border-box;
  text-decoration: none;
  box-shadow: none;
  transition: background 0.16s ease, border-color 0.16s ease;
  /*
   * Самая выгодная цена.
   */
}
.market-sellers__item:hover {
  color: var(--ms-text);
  background: var(--ms-bg-hover);
  border-color: var(--ms-border-hover);
  text-decoration: none;
}
.market-sellers__item:hover .market-sellers__open {
  opacity: 1;
  transform: translateX(0);
}
.market-sellers__item--best {
  background: linear-gradient(105deg, rgba(118, 40, 244, 0.075), rgba(118, 40, 244, 0.015) 72%), var(--ms-bg-best);
  border-color: var(--ms-purple-border);
}
.market-sellers__item--best::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: -1px;
  width: 3px;
  background: linear-gradient(180deg, #a05fff, #6817e8);
  border-radius: 0 3px 3px 0;
}
.market-sellers__avatar {
  position: relative;
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
}
.market-sellers__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}
.market-sellers__best-dot {
  position: absolute;
  right: -3px;
  bottom: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  color: #fff;
  background: linear-gradient(135deg, #9a51ff, #6816e8);
  border: 2px solid var(--ms-bg);
  border-radius: 50%;
  box-sizing: border-box;
}
.market-sellers__best-dot svg {
  width: 9px;
  height: 9px;
}
.market-sellers__info {
  min-width: 0;
  flex: 1 1 auto;
}
.market-sellers__name-row {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
}
.market-sellers__name {
  overflow: hidden;
  min-width: 0;
  color: var(--ms-text);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.market-sellers__meta {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 18px;
  gap: 6px;
  margin-top: 4px;
  color: var(--ms-muted);
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}
.market-sellers__copy-number {
  color: var(--ms-muted);
  font-size: 10px;
  font-weight: 550;
}
.market-sellers__best-label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 17px;
  padding: 0 6px;
  color: var(--ms-purple);
  background: var(--ms-purple-soft);
  border-radius: 6px;
  box-sizing: border-box;
  font-size: 8px;
  font-weight: 700;
}
.market-sellers__best-label svg {
  width: 9px;
  height: 9px;
}
.market-sellers__enchant {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 2px;
  height: 20px;
  padding: 0 6px;
  color: var(--ms-purple);
  background: var(--ms-purple-soft);
  border: 1px solid rgba(118, 40, 244, 0.1);
  border-radius: 7px;
  box-sizing: border-box;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.market-sellers__enchant svg {
  width: 9px;
  height: 9px;
}
.market-sellers__price {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  min-width: 59px;
  flex: 0 0 auto;
  gap: 4px;
  margin-left: auto;
  color: var(--ms-purple);
  white-space: nowrap;
}
.market-sellers__price-value {
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.35px;
}
.market-sellers__price-rank {
  font-size: 15px;
  font-weight: 750;
  line-height: 1;
}
.market-sellers__open {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin-left: -3px;
  color: var(--ms-muted-soft);
  opacity: 0.35;
  transform: translateX(-2px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.market-sellers__open svg {
  width: 17px;
  height: 17px;
}
.market-sellers__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 90px;
  padding: 16px;
  color: var(--ms-muted);
  background: var(--ms-bg);
  border: 1px dashed var(--ms-border);
  border-radius: 14px;
}
.market-sellers__empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  color: var(--ms-purple);
  background: var(--ms-purple-soft);
  border-radius: 12px;
}
.market-sellers__empty-icon svg {
  width: 19px;
  height: 19px;
}
.market-sellers__empty-title {
  color: var(--ms-text);
  font-size: 13px;
  font-weight: 650;
}
.market-sellers__empty-text {
  margin-top: 2px;
  font-size: 10px;
}

/*
 |--------------------------------------------------------------------------
 | DARK
 |--------------------------------------------------------------------------
 */
html[data-theme=dark] .market-sellers,
html.dark .market-sellers,
body.dark .market-sellers,
body.dark-theme .market-sellers,
body.theme-dark .market-sellers {
  --ms-bg: #211e25;
  --ms-bg-hover: #28232e;
  --ms-bg-best: #221d2a;
  --ms-border:
      rgba(255, 255, 255, .065);
  --ms-border-hover:
      rgba(154, 97, 255, .25);
  --ms-text: #f0edf3;
  --ms-muted: #8f8797;
  --ms-muted-soft: #696170;
  --ms-purple: #9a61ff;
  --ms-purple-soft:
      rgba(151, 91, 255, .13);
  --ms-purple-border:
      rgba(151, 91, 255, .30);
}
html[data-theme=dark] .market-sellers .market-sellers__best-dot,
html.dark .market-sellers .market-sellers__best-dot,
body.dark .market-sellers .market-sellers__best-dot,
body.dark-theme .market-sellers .market-sellers__best-dot,
body.theme-dark .market-sellers .market-sellers__best-dot {
  border-color: #211e25;
}

/*
 |--------------------------------------------------------------------------
 | MOBILE
 |--------------------------------------------------------------------------
 */
@media (max-width: 600px) {
  .market-sellers {
    /*
     * Просто текст.
     * Никакого select.
     */
    /*
     * На телефоне одна колонка.
     */
    /*
     * На телефоне стрелка не нужна.
     * Вся строка и так кликабельна.
     */
  }
  .market-sellers__header {
    gap: 7px;
    margin-bottom: 13px;
  }
  .market-sellers__title {
    font-size: 17px;
  }
  .market-sellers__count {
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 7px;
    font-size: 9px;
  }
  .market-sellers__header-hint {
    gap: 3px;
    margin-left: auto;
    font-size: 9px;
  }
  .market-sellers__header-hint svg {
    width: 12px;
    height: 12px;
    flex-basis: 12px;
  }
  .market-sellers__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .market-sellers__item {
    min-height: 62px;
    gap: 9px;
    padding: 8px 9px;
    border-radius: 12px;
  }
  .market-sellers__avatar {
    width: 39px;
    height: 39px;
    flex-basis: 39px;
  }
  .market-sellers__best-dot {
    width: 16px;
    height: 16px;
  }
  .market-sellers__name {
    font-size: 12px;
  }
  .market-sellers__meta {
    gap: 5px;
    margin-top: 3px;
    font-size: 9px;
  }
  .market-sellers__copy-number {
    font-size: 9px;
  }
  .market-sellers__best-label {
    height: 15px;
    padding: 0 5px;
    font-size: 7px;
  }
  .market-sellers__enchant {
    height: 19px;
    padding: 0 5px;
    font-size: 9px;
  }
  .market-sellers__price {
    min-width: 50px;
    gap: 3px;
  }
  .market-sellers__price-value {
    font-size: 18px;
  }
  .market-sellers__price-rank {
    font-size: 14px;
  }
  .market-sellers__open {
    display: none;
  }
  .market-sellers__empty {
    min-height: 76px;
    justify-content: flex-start;
    padding: 12px;
  }
}
/*
 |--------------------------------------------------------------------------
 | SMALL MOBILE
 |--------------------------------------------------------------------------
 */
@media (max-width: 370px) {
  .market-sellers__title {
    font-size: 16px;
  }
  .market-sellers__header-hint span {
    display: none;
  }
  .market-sellers__avatar {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
  .market-sellers__item {
    gap: 7px;
  }
  .market-sellers__price-value {
    font-size: 17px;
  }
}
.card-inventory-container--market-sell + .market-history {
  margin-top: 28px;
  margin-bottom: 26px;
}

@media (max-width: 600px) {
  .card-inventory-container--market-sell + .market-history {
    margin-top: 22px;
    margin-bottom: 20px;
  }
}
.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;
}

/* ==========================================================================
   PACK ROULETTE
   Использует ГЛОБАЛЬНЫЕ цвета сайта:
   --light-bg
   --title-color
   --secondary-text-color
   --border-color
   --main-purple-color
   --secondary-purple-color
   --purple-btn-bg

   Тёмная тема уже автоматически приходит через body.dark.
   ========================================================================== */
.pack-roulette {
  --roulette-pointer-x: 50%;
  --pr-bg: var(--light-bg, #fff);
  --pr-bg-soft: var(--medium-bg, rgba(0, 0, 0, .03));
  --pr-text: var(--title-color, #232323);
  --pr-muted: var(--secondary-text-color, rgba(0, 0, 0, .6));
  --pr-border: var(--border-color, rgba(0, 0, 0, .09));
  --pr-purple: var(--main-purple-color, #8b00ff);
  --pr-purple-secondary: var(--secondary-purple-color, #8b00ff);
  --pr-button: var(--purple-btn-bg, #772ce8);
  --pr-gold: #d9a445;
  --pr-gold-light: #f6cc73;
  --pr-overlay: rgba(14, 13, 32, .58);
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

body.dark .pack-roulette {
  --pr-overlay: rgba(0, 0, 0, .72);
}

.pack-roulette--open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.pack-roulette__backdrop {
  position: absolute;
  inset: 0;
  background: var(--pr-overlay);
  /*
   * backdrop-filter здесь специально нет:
   * на больших экранах он заметно нагружал анимацию рулетки.
   */
}

.pack-roulette__sheet {
  position: relative;
  width: min(1420px, 100%);
  padding: 22px 28px 26px;
  border: 1px solid var(--pr-border);
  border-radius: 22px 22px 16px 16px;
  background: var(--pr-bg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pr-bg) 96%, var(--pr-purple) 4%) 0%, var(--pr-bg) 28%, var(--pr-bg) 100%);
  color: var(--pr-text);
  box-shadow: 0 -12px 42px rgba(20, 14, 29, 0.18);
  transform: translate3d(0, 30px, 0);
  transition: transform 0.27s cubic-bezier(0.22, 0.75, 0.22, 1);
  overflow: hidden;
}

body.dark .pack-roulette__sheet {
  box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.42);
}

.pack-roulette--open .pack-roulette__sheet {
  transform: translate3d(0, 0, 0);
}

.pack-roulette__sheet::before {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pr-purple), transparent);
  opacity: 0.65;
}

.pack-roulette__close {
  position: absolute;
  z-index: 30;
  right: 18px;
  top: 16px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--pr-purple) 22%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--pr-purple) 10%, var(--pr-bg));
  color: var(--pr-purple);
  font-size: 28px;
  line-height: 34px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.pack-roulette__close:hover {
  background: color-mix(in srgb, var(--pr-purple) 16%, var(--pr-bg));
  transform: scale(1.04);
}

.pack-roulette--spinning .pack-roulette__close {
  opacity: 0.35;
  cursor: default;
}

.pack-roulette__head {
  margin-bottom: 17px;
  padding: 0 52px;
  text-align: center;
}

.pack-roulette__title {
  color: var(--pr-text);
  font-size: 27px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.pack-roulette__subtitle {
  margin-top: 7px;
  color: var(--pr-muted);
  font-size: 14px;
}

/* ==========================================================================
   ARENA
   ========================================================================== */
.pack-roulette__arena {
  position: relative;
  isolation: isolate;
  margin: 0 -28px;
  padding: 12px 0;
  border-top: 1px solid var(--pr-border);
  border-bottom: 1px solid var(--pr-border);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pr-purple) 4%, transparent) 34%, color-mix(in srgb, var(--pr-purple) 7%, transparent) 50%, color-mix(in srgb, var(--pr-purple) 4%, transparent) 66%, transparent);
  overflow: hidden;
  transition: background 0.25s ease;
}

.pack-roulette__viewport {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 302px;
  overflow: hidden;
}

.pack-roulette__viewport::before,
.pack-roulette__viewport::after {
  content: "";
  position: absolute;
  z-index: 12;
  top: 0;
  bottom: 0;
  width: 92px;
  pointer-events: none;
}

.pack-roulette__viewport::before {
  left: 0;
  background: linear-gradient(90deg, var(--pr-bg) 0%, color-mix(in srgb, var(--pr-bg) 82%, transparent) 34%, transparent 100%);
}

.pack-roulette__viewport::after {
  right: 0;
  background: linear-gradient(-90deg, var(--pr-bg) 0%, color-mix(in srgb, var(--pr-bg) 82%, transparent) 34%, transparent 100%);
}

.pack-roulette__track {
  display: flex;
  align-items: center;
  gap: 16px;
  width: -moz-max-content;
  width: max-content;
  height: 100%;
  padding: 25px 24px;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.pack-roulette__card {
  position: relative;
  flex: 0 0 clamp(126px, 9vw, 158px);
  width: clamp(126px, 9vw, 158px);
  opacity: 0.84;
  transform: scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.pack-roulette__card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 2/3;
  overflow: hidden;
  border: 1px solid var(--pr-border);
  border-radius: 10px;
  background: var(--pr-bg);
  box-shadow: 0 6px 16px rgba(18, 13, 27, 0.1);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

body.dark .pack-roulette__card-image {
  box-shadow: 0 7px 17px rgba(0, 0, 0, 0.23);
}

.pack-roulette__card-image img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
}

/* ==========================================================================
   CENTER LINE / ARROWS
   ========================================================================== */
.pack-roulette__arena::after {
  content: "";
  position: absolute;
  z-index: 7;
  top: 34px;
  bottom: 34px;
  left: var(--roulette-pointer-x, 50%);
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--pr-purple) 35%, transparent) 28%, color-mix(in srgb, var(--pr-purple) 35%, transparent) 72%, transparent);
  opacity: 0.46;
  pointer-events: none;
}

.pack-roulette__pointer {
  position: absolute;
  z-index: 20;
  left: var(--roulette-pointer-x, 50%);
  width: 0;
  height: 0;
  transform: translateX(-50%);
  pointer-events: none;
}

.pack-roulette__pointer--top {
  top: 8px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 15px solid var(--pr-purple);
  filter: drop-shadow(0 2px 5px color-mix(in srgb, var(--pr-purple) 30%, transparent));
}

.pack-roulette__pointer--bottom {
  bottom: 8px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 15px solid var(--pr-purple);
  filter: drop-shadow(0 -2px 5px color-mix(in srgb, var(--pr-purple) 30%, transparent));
}

/*
 * Во время вращения активными указателями являются две стрелки.
 * Центральную линию скрываем, чтобы она не спорила с их плавным сканированием.
 * После остановки линия появляется уже в финальной позиции.
 */
.pack-roulette--spinning .pack-roulette__arena::after {
  opacity: 0;
}

/* ==========================================================================
   PRE-FINISH
   ========================================================================== */
.pack-roulette--anticipation .pack-roulette__arena {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pr-purple) 5%, transparent) 28%, color-mix(in srgb, var(--pr-purple) 13%, transparent) 50%, color-mix(in srgb, var(--pr-purple) 5%, transparent) 72%, transparent);
}

.pack-roulette--anticipation .pack-roulette__pointer {
  animation: packRoulettePointerPulse 0.34s ease-in-out infinite alternate;
}

@keyframes packRoulettePointerPulse {
  from {
    transform: translateX(-50%) scale(1);
  }
  to {
    transform: translateX(-50%) scale(1.15);
  }
}
.pack-roulette__card--near-winner {
  opacity: 0.38 !important;
  transform: translateZ(0) scale(0.88) !important;
}

/* ==========================================================================
   WINNER
   ========================================================================== */
.pack-roulette--winner .pack-roulette__card:not(.pack-roulette__card--winner) {
  opacity: 0.24;
  transform: translateZ(0) scale(0.9);
}

.pack-roulette__card--winner {
  z-index: 24;
  opacity: 1 !important;
  animation: packRouletteWinnerEntrance 0.52s cubic-bezier(0.18, 1.25, 0.32, 1) both;
}

@keyframes packRouletteWinnerEntrance {
  0% {
    transform: translateZ(0) scale(0.96);
  }
  42% {
    transform: translateZ(0) translateY(-5px) scale(1.075);
  }
  70% {
    transform: translateZ(0) translateY(-2px) scale(1.025);
  }
  100% {
    transform: translateZ(0) translateY(-3px) scale(1.045);
  }
}
.pack-roulette__card--winner .pack-roulette__card-image {
  border-color: color-mix(in srgb, var(--pr-gold-light) 85%, var(--pr-purple) 15%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pr-gold) 24%, transparent), 0 8px 19px rgba(20, 12, 29, 0.18);
}

.pack-roulette__card--winner::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -22px;
  border-radius: 24px;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--pr-gold) 22%, transparent) 0%, color-mix(in srgb, var(--pr-purple) 12%, transparent) 42%, transparent 72%);
  opacity: 0.95;
  animation: packRouletteWinnerAura 0.75s ease-out both;
  pointer-events: none;
}

@keyframes packRouletteWinnerAura {
  from {
    opacity: 0;
    transform: scale(0.72);
  }
  40% {
    opacity: 1;
  }
  to {
    opacity: 0.68;
    transform: scale(1);
  }
}
/* ==========================================================================
   IMPACT - only transform/opacity, GPU friendly
   ========================================================================== */
.pack-roulette--impact .pack-roulette__sheet {
  animation: packRouletteSheetImpact 0.34s ease-out;
}

@keyframes packRouletteSheetImpact {
  0% {
    transform: translate3d(0, 0, 0);
  }
  35% {
    transform: translate3d(0, -2px, 0);
  }
  68% {
    transform: translate3d(0, 1px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
.pack-roulette--winner .pack-roulette__pointer--top {
  animation: packRoulettePointerTopHit 0.42s cubic-bezier(0.2, 1.35, 0.3, 1);
}

.pack-roulette--winner .pack-roulette__pointer--bottom {
  animation: packRoulettePointerBottomHit 0.42s cubic-bezier(0.2, 1.35, 0.3, 1);
}

@keyframes packRoulettePointerTopHit {
  0% {
    transform: translateX(-50%) translateY(-5px);
  }
  48% {
    transform: translateX(-50%) translateY(3px) scale(1.22);
  }
  100% {
    transform: translateX(-50%) translateY(0) scale(1);
  }
}
@keyframes packRoulettePointerBottomHit {
  0% {
    transform: translateX(-50%) translateY(5px);
  }
  48% {
    transform: translateX(-50%) translateY(-3px) scale(1.22);
  }
  100% {
    transform: translateX(-50%) translateY(0) scale(1);
  }
}
/* ==========================================================================
   LIGHTWEIGHT WINNER FX
   ========================================================================== */
.pack-roulette__winner-fx {
  position: absolute;
  z-index: 10;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.pack-roulette__winner-flash {
  position: absolute;
  left: var(--roulette-pointer-x, 50%);
  top: 50%;
  width: 190px;
  height: 265px;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  background: radial-gradient(ellipse, rgba(255, 241, 196, 0.68) 0%, rgba(217, 164, 69, 0.25) 34%, color-mix(in srgb, var(--pr-purple) 11%, transparent) 57%, transparent 74%);
}

.pack-roulette__winner-fx--active .pack-roulette__winner-flash {
  animation: packRouletteFlash 0.62s ease-out both;
}

@keyframes packRouletteFlash {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.45);
  }
  24% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.65);
  }
}
.pack-roulette__winner-beam {
  position: absolute;
  left: var(--roulette-pointer-x, 50%);
  top: 5%;
  width: 72px;
  height: 90%;
  opacity: 0;
  transform: translateX(-50%) scaleX(0.25);
  background: linear-gradient(90deg, transparent, rgba(255, 229, 165, 0.22), rgba(255, 239, 200, 0.43), rgba(255, 229, 165, 0.22), transparent);
}

.pack-roulette__winner-fx--active .pack-roulette__winner-beam {
  animation: packRouletteBeam 0.74s ease-out both;
}

@keyframes packRouletteBeam {
  0% {
    opacity: 0;
    transform: translateX(-50%) scaleX(0.2);
  }
  25% {
    opacity: 0.82;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scaleX(1.85);
  }
}
.pack-roulette__winner-ring {
  position: absolute;
  left: var(--roulette-pointer-x, 50%);
  top: 50%;
  width: 94px;
  height: 94px;
  border: 1px solid rgba(233, 184, 91, 0.72);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.45);
}

.pack-roulette__winner-ring--2 {
  border-color: color-mix(in srgb, var(--pr-purple) 55%, transparent);
}

.pack-roulette__winner-fx--active .pack-roulette__winner-ring--1 {
  animation: packRouletteRing 0.68s ease-out both;
}

.pack-roulette__winner-fx--active .pack-roulette__winner-ring--2 {
  animation: packRouletteRing 0.82s ease-out 0.08s both;
}

@keyframes packRouletteRing {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.45);
  }
  18% {
    opacity: 0.82;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3.1);
  }
}
.pack-roulette__winner-particles {
  position: absolute;
  left: var(--roulette-pointer-x, 50%);
  top: 50%;
  width: 1px;
  height: 1px;
}

.pack-roulette__winner-particle {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--particle-size);
  height: var(--particle-size);
  border-radius: 50%;
  opacity: 0;
  background: var(--pr-gold-light);
}

.pack-roulette__winner-particle:nth-child(2n) {
  background: var(--pr-purple-secondary);
}

.pack-roulette__winner-fx--active .pack-roulette__winner-particle {
  animation: packRouletteParticle 0.72s cubic-bezier(0.15, 0.6, 0.22, 1) var(--particle-delay) both;
}

@keyframes packRouletteParticle {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
  15% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--particle-x)), calc(-50% + var(--particle-y))) scale(0.15);
  }
}
/* ==========================================================================
   RESULT / META / ACTION
   ========================================================================== */
.pack-roulette__result {
  height: 0;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: height 0.18s ease, opacity 0.18s ease, margin 0.18s ease;
}

.pack-roulette__result--visible {
  height: 26px;
  margin-top: 11px;
  opacity: 1;
}

.pack-roulette__obtained {
  color: var(--pr-purple);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.11em;
}

.pack-roulette__meta {
  min-height: 23px;
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--pr-muted);
  font-size: 14px;
}

.pack-roulette__meta strong {
  color: var(--pr-purple);
  font-size: 16px;
}

.pack-roulette__meta-separator {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--pr-border);
}

.pack-roulette__dust {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border-radius: 50%;
  vertical-align: -2px;
  background: radial-gradient(circle at 35% 30%, #dcb7ff, var(--pr-purple) 58%, #5d00a9);
  box-shadow: 0 0 7px color-mix(in srgb, var(--pr-purple) 28%, transparent);
}

.pack-roulette__dust--button {
  margin: 0 5px;
}

/*
 * КНОПКА В ЦВЕТАХ САЙТА.
 */
.pack-roulette__action {
  display: block;
  min-width: 320px;
  max-width: 100%;
  margin: 16px auto 0;
  padding: 13px 28px;
  border: 1px solid var(--pr-button);
  border-radius: var(--main-border-radius, 8px);
  background: var(--pr-button);
  color: var(--white-color, #fff);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--pr-button) 20%, transparent);
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease, opacity 0.14s ease;
}

.pack-roulette__action:not(:disabled):hover {
  border-color: var(--pr-purple);
  background: var(--pr-purple);
  transform: translateY(-1px);
}

.pack-roulette__action:not(:disabled):active {
  transform: translateY(0);
}

.pack-roulette__action:disabled {
  opacity: 0.48;
  cursor: default;
}

.pack-roulette__button-spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 7px;
  vertical-align: -1px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: packRouletteSpinner 0.65s linear infinite;
}

@keyframes packRouletteSpinner {
  to {
    transform: rotate(360deg);
  }
}
.pack-roulette__loading-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--pr-purple);
}

.pack-roulette__skeleton {
  flex: 0 0 146px;
  width: 146px;
  aspect-ratio: 2/3;
  border-radius: 10px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--pr-bg) 92%, #aaa 8%) 20%, color-mix(in srgb, var(--pr-purple) 10%, var(--pr-bg)) 40%, color-mix(in srgb, var(--pr-bg) 92%, #aaa 8%) 60%);
  background-size: 220% 100%;
  animation: packRouletteSkeleton 1.05s linear infinite;
}

@keyframes packRouletteSkeleton {
  to {
    background-position: -220% 0;
  }
}
body.pack-roulette-lock {
  overflow: hidden;
}

/* ==========================================================================
   LIMITED PACK — 720px desktop + 360px mobile
   ========================================================================== */
.limited-packs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: 22px;
  container-type: inline-size;
}

.limited-pack-premium,
.limited-pack-premium * {
  font-family: inherit !important;
  box-sizing: border-box;
}

.limited-pack-premium {
  --lp-border: #e6e0ef;
  --lp-card: rgba(255, 255, 255, .78);
  --lp-panel: #faf9fd;
  --lp-text: var(--title-color, #242124);
  --lp-muted: var(--secondary-text-color, #77717f);
  --lp-purple: var(--main-purple-color, #8b00ff);
  --lp-button: var(--purple-btn-bg, #772ce8);
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 44%) minmax(0, 56%) !important;
  width: 100%;
  min-width: 0;
  min-height: 440px;
  overflow: hidden;
  border: 1px solid var(--lp-border);
  border-radius: 22px;
  background: var(--lp-panel);
  box-shadow: 0 10px 30px rgba(70, 47, 108, 0.06);
  color: var(--lp-text);
  isolation: isolate;
}

.limited-pack-premium__visual {
  position: relative;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
  background: #eadfe9;
}

.limited-pack-premium__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 82%, rgba(250, 249, 253, 0.22) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 55%, rgba(61, 38, 82, 0.04));
}

.limited-pack-premium__visual img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
}

.limited-pack-premium__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px 20px 20px;
  background: radial-gradient(circle at 82% 4%, rgba(145, 111, 218, 0.045), transparent 34%), linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(250, 249, 253, 0.99));
}

/* На контейнере 720px билет идет отдельной строкой — ничего не налезает на заголовок. */
.limited-pack-premium__header {
  display: block;
  min-width: 0;
}

.limited-pack-premium__identity {
  min-width: 0;
}

.limited-pack-premium__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  margin: 0;
  color: var(--lp-text);
  font-size: 30px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.limited-pack-premium__leaf {
  flex: 0 0 auto;
  width: 0.68em;
  height: 0.68em;
  color: #d8753f;
  transform: translateY(1px) rotate(8deg);
  filter: drop-shadow(0 2px 3px rgba(185, 88, 43, 0.12));
}

.limited-pack-premium__subtitle {
  margin-top: 7px;
  color: var(--lp-muted);
  font-size: 13px;
  line-height: 1.35;
}

.limited-pack-premium__ticket {
  width: 100%;
  min-width: 0;
  min-height: 54px;
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) auto;
  align-items: center;
  -moz-column-gap: 9px;
       column-gap: 9px;
  margin-top: 14px;
  padding: 9px 13px;
  border: 1px solid #e1daf0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.46);
}

.limited-pack-premium__ticket-icon,
.limited-pack-premium__stat-icon,
.limited-pack-premium__open-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.limited-pack-premium__ticket-icon {
  width: 24px;
  height: 24px;
  color: #8172b3;
}

.limited-pack-premium__ticket-label {
  min-width: 0;
  color: #7e7798;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 500;
}

.limited-pack-premium__ticket-value {
  min-width: 37px;
  padding-left: 12px;
  border-left: 1px solid #e4deed;
  color: var(--lp-text);
  font-size: 23px;
  line-height: 1;
  font-weight: 700;
  text-align: center;
}

.limited-pack-premium__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
  margin-top: 13px;
}

.limited-pack-premium__stat {
  min-width: 0;
  min-height: 92px;
  padding: 12px 10px 11px;
  overflow: hidden;
  border: 1px solid #e7e2ef;
  border-radius: 14px;
  background: var(--lp-card);
  box-shadow: 0 4px 13px rgba(63, 43, 93, 0.028);
}

.limited-pack-premium__stat-head {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}

.limited-pack-premium__stat-icon {
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  color: #8275b2;
}

.limited-pack-premium__stat-label {
  display: block;
  min-width: 0;
  color: #817a99;
  font-size: 12.5px;
  line-height: 1.2;
  font-weight: 500;
  text-align: center;
  white-space: normal;
}

.limited-pack-premium__stat-value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  margin-top: 11px;
  color: var(--lp-text);
  white-space: nowrap;
}

.limited-pack-premium__stat-value strong {
  color: var(--lp-text);
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
}

.limited-pack-premium__stat-value span {
  color: var(--lp-text);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 400;
}

.limited-pack-premium__progress-card {
  margin-top: 12px;
  padding: 13px 14px 12px;
  border: 1px solid #e7e2ef;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.limited-pack-premium__progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--lp-text);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
}

.limited-pack-premium__progress-head > span {
  min-width: 0;
}

.limited-pack-premium__progress-head strong {
  flex: 0 0 auto;
  color: var(--lp-text);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.limited-pack-premium__progress {
  height: 8px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #ebe8f2;
}

.limited-pack-premium__progress-fill {
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #b185f0 0%, #8f61df 100%);
  box-shadow: 0 0 9px rgba(139, 97, 223, 0.18);
  transition: width 0.35s ease;
}

.limited-pack-premium__hint {
  margin-top: 10px;
  color: #8981a2;
  font-size: 12px;
  line-height: 1.35;
}

.limited-pack-premium__hint strong {
  color: #5a4d7e;
  font-weight: 700;
}

/* Ровно та же визуальная масса, что у кнопки "Купить" ниже. */
.limited-pack-premium__open {
  width: 100%;
  height: 40px;
  min-height: 40px;
  margin-top: auto;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--main-border-radius, 8px);
  background: var(--lp-button);
  color: var(--white-color, #fff);
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
  filter: none;
  transition: opacity 0.15s ease;
}

.limited-pack-premium__open:hover,
.limited-pack-premium__open:focus {
  background: var(--lp-button);
  color: var(--white-color, #fff);
  opacity: 0.96;
  transform: none;
  box-shadow: none;
  filter: none;
}

.limited-pack-premium__open:active {
  opacity: 0.9;
  transform: none;
}

.limited-pack-premium__open-icon {
  width: 18px;
  height: 18px;
  color: currentColor;
}

body.dark .limited-pack-premium {
  --lp-border: rgba(187, 164, 226, .16);
  --lp-card: rgba(255, 255, 255, .035);
  --lp-panel: #1c1921;
  --lp-text: var(--title-color, #eee8f6);
  --lp-muted: var(--secondary-text-color, #aaa1bb);
  border-color: var(--lp-border);
  background: #1c1921;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
}

body.dark .limited-pack-premium__visual::after {
  background: linear-gradient(90deg, transparent 82%, rgba(28, 25, 33, 0.24) 100%);
}

body.dark .limited-pack-premium__content {
  background: radial-gradient(circle at 82% 4%, rgba(145, 111, 218, 0.09), transparent 34%), linear-gradient(180deg, rgba(35, 31, 42, 0.96), rgba(28, 25, 33, 0.99));
}

body.dark .limited-pack-premium__title,
body.dark .limited-pack-premium__ticket-value,
body.dark .limited-pack-premium__stat-value strong,
body.dark .limited-pack-premium__stat-value span,
body.dark .limited-pack-premium__progress-head,
body.dark .limited-pack-premium__progress-head strong {
  color: var(--lp-text);
}

body.dark .limited-pack-premium__subtitle,
body.dark .limited-pack-premium__ticket-label,
body.dark .limited-pack-premium__stat-label,
body.dark .limited-pack-premium__hint {
  color: var(--lp-muted);
}

body.dark .limited-pack-premium__ticket,
body.dark .limited-pack-premium__stat,
body.dark .limited-pack-premium__progress-card {
  border-color: rgba(187, 164, 226, 0.14);
  background: rgba(255, 255, 255, 0.025);
  box-shadow: none;
}

body.dark .limited-pack-premium__ticket-value {
  border-left-color: rgba(187, 164, 226, 0.14);
}

body.dark .limited-pack-premium__progress {
  background: rgba(255, 255, 255, 0.08);
}

body.dark .limited-pack-premium__hint strong {
  color: #c7b7ea;
}

/* Широкий контейнер: возвращаем билет вправо от заголовка. */
@container (min-width: 900px) {
  .limited-pack-premium {
    grid-template-columns: minmax(0, 40%) minmax(0, 60%) !important;
    min-height: 455px;
  }
  .limited-pack-premium__content {
    padding: 26px 27px 24px;
  }
  .limited-pack-premium__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    align-items: start;
    gap: 18px;
  }
  .limited-pack-premium__title {
    font-size: 34px;
  }
  .limited-pack-premium__subtitle {
    font-size: 14px;
  }
  .limited-pack-premium__ticket {
    width: 190px;
    min-height: 60px;
    margin-top: 0;
    border-radius: 30px;
  }
  .limited-pack-premium__stats {
    gap: 10px;
    margin-top: 20px;
  }
  .limited-pack-premium__stat {
    min-height: 94px;
    padding: 13px 11px 12px;
  }
  .limited-pack-premium__stat-label {
    font-size: 12.5px;
  }
  .limited-pack-premium__stat-value strong {
    font-size: 20px;
  }
  .limited-pack-premium__stat-value span {
    font-size: 12.5px;
  }
  .limited-pack-premium__open {
    height: 44px;
    min-height: 44px;
    font-size: 15px;
  }
}
/* Мобильная версия ориентируется на ширину самого блока, а не окна браузера. */
@container (max-width: 520px) {
  .limited-packs {
    gap: 14px;
    margin-top: 16px;
  }
  .limited-pack-premium {
    display: block !important;
    min-height: 0;
    border-radius: 19px;
  }
  .limited-pack-premium__visual {
    height: clamp(225px, 70vw, 285px);
    min-height: 0;
    border-radius: 18px 18px 14px 14px;
    background-image: url("/assets/limited-pack-autumn.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  .limited-pack-premium__visual::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: -12px;
    background: inherit;
    filter: blur(9px) saturate(0.9);
    transform: scale(1.045);
    opacity: 0.74;
  }
  .limited-pack-premium__visual::after {
    z-index: 3;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 72%, rgba(245, 240, 249, 0.14));
  }
  .limited-pack-premium__visual img {
    position: relative;
    z-index: 2;
    -o-object-fit: contain;
       object-fit: contain;
    -o-object-position: center;
       object-position: center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
  }
  .limited-pack-premium__content {
    padding: 17px 11px 13px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 249, 253, 0.99));
  }
  .limited-pack-premium__identity {
    text-align: center;
  }
  .limited-pack-premium__title {
    justify-content: center;
    gap: 5px;
    font-size: 26px;
    line-height: 1.08;
  }
  .limited-pack-premium__subtitle {
    margin-top: 6px;
    font-size: 12px;
  }
  .limited-pack-premium__ticket {
    min-height: 54px;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    margin-top: 14px;
    padding: 8px 11px;
    border-radius: 14px;
  }
  .limited-pack-premium__ticket-icon {
    width: 22px;
    height: 22px;
  }
  .limited-pack-premium__ticket-label {
    font-size: 12px;
  }
  .limited-pack-premium__ticket-value {
    min-width: 35px;
    padding-left: 10px;
    font-size: 21px;
  }
  .limited-pack-premium__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 10px;
  }
  .limited-pack-premium__stat {
    min-height: 88px;
    padding: 11px 7px 10px;
    border-radius: 13px;
  }
  /* Два блока на 360px: иконка и подпись в одну строку, без грязных переносов. */
  .limited-pack-premium__stat-head {
    min-height: 20px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .limited-pack-premium__stat-icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
  }
  .limited-pack-premium__stat-label {
    min-height: 0;
    display: block;
    padding: 0;
    font-size: 11.5px;
    line-height: 1.18;
    text-align: left;
  }
  .limited-pack-premium__stat-value {
    gap: 3px;
    margin-top: 12px;
  }
  .limited-pack-premium__stat-value strong {
    font-size: 18px;
  }
  .limited-pack-premium__stat-value span {
    font-size: 11px;
  }
  .limited-pack-premium__progress-card {
    margin-top: 9px;
    padding: 12px 10px 11px;
    border-radius: 13px;
  }
  .limited-pack-premium__progress-head {
    gap: 7px;
    font-size: 12.5px;
    line-height: 1.25;
  }
  .limited-pack-premium__progress-head strong {
    font-size: 12.5px;
  }
  .limited-pack-premium__progress {
    height: 8px;
    margin-top: 9px;
  }
  .limited-pack-premium__hint {
    margin-top: 9px;
    font-size: 11.5px;
  }
  .limited-pack-premium__open {
    height: 40px;
    min-height: 40px;
    margin-top: 10px;
    padding: 0 16px;
    font-size: 15px;
  }
  .limited-pack-premium__open-icon {
    width: 18px;
    height: 18px;
  }
}
/* Fallback для браузеров без container queries на мобильном viewport. */
@media (max-width: 760px) {
  .limited-pack-premium {
    display: block !important;
    min-height: 0;
    border-radius: 19px;
  }
  .limited-pack-premium__visual {
    height: clamp(225px, 70vw, 285px);
    min-height: 0;
    border-radius: 18px 18px 14px 14px;
    background-image: url("/assets/limited-pack-autumn.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  .limited-pack-premium__visual::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: -12px;
    background: inherit;
    filter: blur(9px) saturate(0.9);
    transform: scale(1.045);
    opacity: 0.74;
  }
  .limited-pack-premium__visual::after {
    z-index: 3;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 72%, rgba(245, 240, 249, 0.14));
  }
  .limited-pack-premium__visual img {
    position: relative;
    z-index: 2;
    -o-object-fit: contain;
       object-fit: contain;
    -o-object-position: center;
       object-position: center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
  }
  .limited-pack-premium__content {
    padding: 17px 11px 13px;
  }
  .limited-pack-premium__identity {
    text-align: center;
  }
  .limited-pack-premium__title {
    justify-content: center;
    font-size: 26px;
  }
  .limited-pack-premium__subtitle {
    font-size: 12px;
  }
  .limited-pack-premium__ticket {
    min-height: 54px;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    margin-top: 14px;
    padding: 8px 11px;
  }
  .limited-pack-premium__ticket-icon {
    width: 22px;
    height: 22px;
  }
  .limited-pack-premium__ticket-label {
    font-size: 12px;
  }
  .limited-pack-premium__ticket-value {
    font-size: 21px;
  }
  .limited-pack-premium__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 10px;
  }
  .limited-pack-premium__stat {
    min-height: 88px;
    padding: 11px 7px 10px;
  }
  .limited-pack-premium__stat-head {
    min-height: 20px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .limited-pack-premium__stat-icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
  }
  .limited-pack-premium__stat-label {
    min-height: 0;
    display: block;
    padding: 0;
    font-size: 11.5px;
    line-height: 1.18;
    text-align: left;
  }
  .limited-pack-premium__stat-value {
    gap: 3px;
    margin-top: 12px;
  }
  .limited-pack-premium__stat-value strong {
    font-size: 18px;
  }
  .limited-pack-premium__stat-value span {
    font-size: 11px;
  }
  .limited-pack-premium__progress-card {
    margin-top: 9px;
    padding: 12px 10px 11px;
  }
  .limited-pack-premium__progress-head,
  .limited-pack-premium__progress-head strong {
    font-size: 12.5px;
  }
  .limited-pack-premium__hint {
    font-size: 11.5px;
  }
  .limited-pack-premium__open {
    height: 40px;
    min-height: 40px;
    margin-top: 10px;
    font-size: 15px;
  }
}
/* ==========================================================================
   MOBILE
   ========================================================================== */
@media (max-width: 700px) {
  .pack-roulette {
    padding: 0;
  }
  .pack-roulette__sheet {
    width: 100%;
    padding: 17px 13px max(17px, env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0;
  }
  .pack-roulette__head {
    margin-bottom: 11px;
    padding: 0 40px;
  }
  .pack-roulette__title {
    font-size: 20px;
  }
  .pack-roulette__subtitle {
    margin-top: 4px;
    font-size: 12px;
  }
  .pack-roulette__close {
    right: 10px;
    top: 10px;
    width: 33px;
    height: 33px;
    font-size: 25px;
    line-height: 29px;
  }
  .pack-roulette__arena {
    margin: 0 -13px;
    padding: 8px 0;
  }
  .pack-roulette__viewport {
    height: 222px;
  }
  .pack-roulette__track {
    gap: 9px;
    padding: 19px 13px;
  }
  .pack-roulette__card {
    flex-basis: 105px;
    width: 105px;
  }
  .pack-roulette__card-image {
    border-radius: 8px;
  }
  .pack-roulette__viewport::before,
  .pack-roulette__viewport::after {
    width: 38px;
  }
  .pack-roulette__arena::after {
    top: 27px;
    bottom: 27px;
  }
  .pack-roulette__pointer--top {
    top: 5px;
    border-left-width: 8px;
    border-right-width: 8px;
    border-top-width: 12px;
  }
  .pack-roulette__pointer--bottom {
    bottom: 5px;
    border-left-width: 8px;
    border-right-width: 8px;
    border-bottom-width: 12px;
  }
  .pack-roulette__winner-flash {
    width: 145px;
    height: 210px;
  }
  .pack-roulette__winner-beam {
    width: 54px;
  }
  .pack-roulette__winner-ring {
    width: 75px;
    height: 75px;
  }
  .pack-roulette__meta {
    min-height: 32px;
    margin-top: 10px;
    flex-wrap: wrap;
    gap: 5px;
    font-size: 11px;
  }
  .pack-roulette__meta strong {
    font-size: 12px;
  }
  .pack-roulette__action {
    width: 100%;
    min-width: 0;
    margin-top: 10px;
    padding: 12px 14px;
    font-size: 13px;
  }
  .pack-roulette__result--visible {
    margin-top: 8px;
  }
  .pack-roulette__obtained {
    font-size: 10px;
  }
  .limited-packs {
    grid-template-columns: 1fr;
  }
  .limited-pack-card {
    padding: 13px;
  }
}
/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .pack-roulette *,
  .pack-roulette *::before,
  .pack-roulette *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
/* ==========================================================================
   ROULETTE PERFORMANCE V2
   ========================================================================== */
/*
 * Ограничиваем перерисовку зоной viewport.
 */
.pack-roulette__viewport {
  contain: layout paint;
}

/*
 * Основной compositor-layer — только сама лента.
 */
.pack-roulette__track {
  contain: layout style;
  transform: translate3d(0, 0, 0);
  will-change: auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.pack-roulette--spinning .pack-roulette__track {
  will-change: transform;
}

/*
 * Во время прокрутки не создаём отдельный GPU-layer
 * для каждой карточки и не анимируем её свойства.
 */
.pack-roulette--spinning .pack-roulette__card {
  opacity: 1 !important;
  transform: scale(0.95) !important;
  transition: none !important;
  will-change: auto !important;
}

.pack-roulette--spinning .pack-roulette__card-image {
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}

.pack-roulette--spinning .pack-roulette__card-image img {
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}

/*
 * Drop-shadow стрелок и дополнительные эффекты
 * возвращаются после окончания прокрутки.
 */
.pack-roulette--spinning .pack-roulette__pointer {
  filter: none !important;
}

.pack-roulette--spinning .pack-roulette__sheet {
  will-change: auto;
}

@media (max-width: 760px) {
  .limited-pack-premium__visual {
    width: 100%;
    height: auto;
    aspect-ratio: 1.8/1;
    overflow: hidden;
  }
  .limited-pack-premium__visual::before,
  .limited-pack-premium__visual::after {
    display: none !important;
    content: none !important;
  }
  .limited-pack-premium__visual picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  .limited-pack-premium__visual img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    transform: none !important;
    filter: none !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
}
.limited-pack-premium__cards-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  color: var(--main-purple-color);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.limited-pack-premium__cards-link svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.limited-pack-premium__cards-link:hover {
  opacity: 0.75;
}

.limited-pack-premium__cards-arrow {
  margin-left: 2px;
  transition: transform 0.15s ease;
}

.limited-pack-premium__cards-link:hover .limited-pack-premium__cards-arrow {
  transform: translateX(3px);
}

.ascension-page {
  --ascension-primary: #7137e8;
  --ascension-primary-dark: #5924c8;
  --ascension-primary-soft: #f5f0ff;
  --ascension-text: #20202b;
  --ascension-muted: #777482;
  --ascension-border: #eeedf3;
  --ascension-surface: #ffffff;
  --ascension-surface-muted: #faf9fc;
  --ascension-success: #158f48;
  --ascension-success-bg: #effbf3;
  --ascension-danger: #e14c4c;
  --ascension-danger-bg: #fff2f2;
  --ascension-shadow: 0 8px 28px rgba(46, 32, 75, 0.06);
  padding: 24px 0 48px;
  color: var(--ascension-text);
}
.ascension-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 286px;
  gap: 20px;
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
}
.ascension-page__main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 16px;
}
.ascension-page__sidebar {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 16px;
}

.ascension-hero,
.ascension-task,
.ascension-guide,
.ascension-privileges,
.ascension-sidebar-card,
.ascension-summary {
  background: var(--ascension-surface);
  border: 1px solid var(--ascension-border);
  border-radius: 11px;
}

.ascension-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  min-height: 185px;
  padding: 25px 28px;
  align-items: center;
}
.ascension-hero__heading {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ascension-hero__title {
  margin: 0;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.ascension-hero__help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  padding: 0;
  color: #8d8997;
  font-size: 11px;
  font-weight: 700;
  background: transparent;
  border: 1px solid #aaa6b3;
  border-radius: 50%;
}
.ascension-hero__description {
  max-width: 490px;
  margin: 15px 0 7px;
  color: var(--ascension-muted);
  font-size: 13px;
  line-height: 1.55;
}
.ascension-hero__accent {
  margin: 0;
  color: var(--ascension-primary);
  font-size: 12px;
  font-weight: 650;
}

.ascension-level {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.ascension-level__badge {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 128px;
  filter: drop-shadow(0 8px 14px rgba(96, 57, 160, 0.16));
}
.ascension-level__badge-image {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ascension-level__badge-number {
  position: absolute;
  top: 50%;
  left: 49%;
  z-index: 2;
  min-width: 70px;
  color: #5520a6;
  font-size: 54px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2px;
  text-align: center;
  background: linear-gradient(180deg, #321069 0%, #5420a7 45%, #7538d1 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 3px rgba(74, 30, 132, 0.18));
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: translate(-50%, -43%);
}
.ascension-level__information {
  display: flex;
  width: 190px;
  flex-direction: column;
}
.ascension-level__caption {
  color: var(--ascension-muted);
  font-size: 10px;
}
.ascension-level__name {
  margin: 4px 0 10px;
  font-size: 13px;
}
.ascension-level__progress {
  position: relative;
  height: 13px;
  overflow: hidden;
  background: #f5f3f9;
  border: 1px solid var(--ascension-border);
  border-radius: 20px;
}
.ascension-level__progress-value {
  height: 100%;
  background: linear-gradient(90deg, #6c2ede, #a85cff);
  border-radius: inherit;
}
.ascension-level__progress-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #433d4d;
  font-size: 9px;
  font-weight: 650;
}
.ascension-level__remaining {
  margin-top: 7px;
  color: var(--ascension-muted);
  font-size: 9px;
  text-align: center;
}
.ascension-level__remaining strong,
.ascension-level__remaining span {
  color: var(--ascension-primary);
}

.ascension-level__badge-number {
  font-size: 45px;
}
.ascension-level__badge-number--three-digits {
  font-size: 38px;
  letter-spacing: -3px;
}
.ascension-level__badge-number--four-digits {
  font-size: 28px;
  letter-spacing: -3px;
}

body.dark .ascension-level__badge {
  filter: drop-shadow(0 0 10px rgba(154, 85, 255, 0.18)) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.35));
}
body.dark .ascension-level__badge-number {
  color: #d6b4ff;
  text-shadow: 0 0 7px rgba(175, 108, 255, 0.55), 0 2px 8px rgba(0, 0, 0, 0.7);
}

.ascension-task {
  position: relative;
  padding: 21px 22px 22px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 0, rgba(130, 66, 240, 0.075), transparent 34%), linear-gradient(180deg, #ffffff 0%, #fcfaff 100%);
  border: 1px solid rgba(120, 67, 220, 0.3);
  border-radius: 13px;
  box-shadow: inset 0 0 0 3px rgba(141, 89, 239, 0.055), 0 10px 30px rgba(70, 38, 121, 0.055);
}
.ascension-task::before {
  position: absolute;
  inset: 5px;
  z-index: 0;
  content: "";
  pointer-events: none;
  border: 1px solid rgba(134, 78, 231, 0.13);
  border-radius: 10px;
}
.ascension-task::after {
  position: absolute;
  top: 0;
  left: 50%;
  width: 440px;
  height: 130px;
  content: "";
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(149, 93, 247, 0.1), transparent 70%);
  transform: translateX(-50%);
}
.ascension-task > * {
  position: relative;
  z-index: 2;
}
.ascension-task__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding: 0 7px;
}
.ascension-task__heading {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.ascension-task__heading-decoration {
  display: flex;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  color: #8060b9;
}
.ascension-task__heading-decoration svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
}
.ascension-task__title {
  margin: 0;
  color: var(--ascension-text);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.25px;
}
.ascension-task__counter {
  display: block;
  margin-top: 4px;
  color: var(--ascension-muted);
  font-size: 11px;
}
.ascension-task__progress-badge {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 14px;
  color: var(--ascension-primary);
  font-size: 10px;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 241, 255, 0.96));
  border: 1px solid rgba(125, 61, 232, 0.48);
  border-radius: 22px;
  box-shadow: 0 4px 14px rgba(103, 48, 200, 0.09), inset 0 0 12px rgba(144, 77, 242, 0.055);
}
.ascension-task__progress-badge strong {
  font-size: 13px;
}
.ascension-task__progress-badge-star {
  color: #8a46ef;
  font-size: 15px;
  line-height: 1;
}
.ascension-task__cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 13px;
}
.ascension-task__corner {
  position: absolute;
  z-index: 3;
  width: 29px;
  height: 29px;
  pointer-events: none;
}
.ascension-task__corner::before, .ascension-task__corner::after {
  position: absolute;
  content: "";
  background: rgba(120, 65, 218, 0.42);
  border-radius: 10px;
}
.ascension-task__corner::before {
  width: 23px;
  height: 1px;
}
.ascension-task__corner::after {
  width: 1px;
  height: 23px;
}
.ascension-task__corner--top-left {
  top: 8px;
  left: 8px;
}
.ascension-task__corner--top-left::before, .ascension-task__corner--top-left::after {
  top: 0;
  left: 0;
}
.ascension-task__corner--top-right {
  top: 8px;
  right: 8px;
  transform: rotate(90deg);
}
.ascension-task__corner--top-right::before, .ascension-task__corner--top-right::after {
  top: 0;
  left: 0;
}
.ascension-task__corner--bottom-right {
  right: 8px;
  bottom: 8px;
  transform: rotate(180deg);
}
.ascension-task__corner--bottom-right::before, .ascension-task__corner--bottom-right::after {
  top: 0;
  left: 0;
}
.ascension-task__corner--bottom-left {
  bottom: 8px;
  left: 8px;
  transform: rotate(270deg);
}
.ascension-task__corner--bottom-left::before, .ascension-task__corner--bottom-left::after {
  top: 0;
  left: 0;
}

.ascension-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 6px 6px 7px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(251, 248, 255, 0.98));
  border: 1px solid rgba(123, 72, 212, 0.22);
  border-radius: 12px;
  box-shadow: 0 5px 14px rgba(67, 40, 109, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.85);
  isolation: isolate;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.ascension-card:hover {
  z-index: 4;
  border-color: rgba(115, 48, 230, 0.48);
  box-shadow: 0 10px 23px rgba(80, 43, 143, 0.15), 0 0 0 2px rgba(122, 56, 234, 0.065);
  transform: translateY(-3px);
}
.ascension-card:hover .ascension-card__image {
  transform: scale(1.025);
}
.ascension-card:hover .ascension-card__button--secondary {
  box-shadow: 0 5px 13px rgba(108, 42, 222, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.ascension-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 2/3;
  overflow: hidden;
  background: #0d0d12;
  border: 1px solid rgba(96, 52, 156, 0.14);
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 3px 10px rgba(31, 19, 51, 0.09);
}
.ascension-card__image {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  transition: transform 0.35s ease, filter 0.35s ease;
}
.ascension-card__position {
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 5;
  display: flex;
  min-width: 25px;
  height: 25px;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  color: #fff;
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  background: linear-gradient(135deg, rgba(73, 35, 114, 0.98), rgba(53, 27, 85, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  box-shadow: 0 3px 8px rgba(25, 13, 42, 0.3);
}
.ascension-card__replace {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 5;
  display: flex;
  width: 27px;
  height: 27px;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #7137e8;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(113, 55, 232, 0.27);
  border-radius: 50%;
  box-shadow: 0 3px 9px rgba(44, 20, 77, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.ascension-card__replace svg {
  width: 16px;
  height: 16px;
}
.ascension-card__replace:hover {
  color: #fff;
  background: var(--ascension-primary);
  transform: rotate(90deg);
}
.ascension-card__body {
  display: flex;
  flex: 1;
  min-height: 69px;
  flex-direction: column;
  padding: 7px 0 0;
}
.ascension-card__status {
  display: inline-flex;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  min-height: 21px;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  overflow: hidden;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid;
  border-radius: 6px;
}
.ascension-card__status--owned {
  color: #138247;
  background: rgba(233, 251, 240, 0.9);
  border-color: rgba(35, 166, 92, 0.2);
}
.ascension-card__status--missing {
  color: #ef5858;
  background: rgba(255, 246, 246, 0.96);
  border-color: rgba(235, 81, 81, 0.19);
}
.ascension-card__status-icon {
  display: inline-flex;
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.ascension-card__footer {
  margin-top: auto;
  padding-top: 7px;
}
.ascension-card__button {
  display: flex;
  width: 100%;
  min-height: 35px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.ascension-card__button svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}
.ascension-card__button:hover {
  text-decoration: none;
  transform: translateY(-1px);
}
.ascension-card__button--primary, .ascension-card__button--secondary {
  color: #fff;
  background: linear-gradient(90deg, #7135e6 0%, #8d43f2 52%, #7840e9 100%);
  border: 1px solid rgba(91, 34, 194, 0.28);
  box-shadow: 0 5px 13px rgba(108, 42, 222, 0.19), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.ascension-card__button--primary:hover, .ascension-card__button--secondary:hover {
  color: #fff;
  background: linear-gradient(90deg, #6327d7, #994cf8);
}
.ascension-card__button--completed {
  color: var(--ascension-primary);
  background: rgba(246, 241, 255, 0.94);
  border: 1px solid rgba(115, 55, 226, 0.2);
  cursor: default;
}
.ascension-card__button.is-loading {
  pointer-events: none;
  opacity: 0.72;
}
.ascension-card__completed {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 11px;
  color: #49365d;
  font-size: 10px;
  font-weight: 650;
  background: linear-gradient(rgba(252, 249, 255, 0.87), rgba(247, 241, 255, 0.9));
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}
.ascension-card__check {
  display: flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #6a2ed9, #9c55f5);
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(119, 52, 228, 0.16), 0 7px 18px rgba(100, 38, 197, 0.24);
}
.ascension-card__check svg {
  width: 23px;
  height: 23px;
}
.ascension-card--completed {
  border-color: rgba(113, 55, 232, 0.25);
}

.ascension-progress {
  position: relative;
  max-width: none;
  margin: 18px 0 0;
  padding: 14px 110px 12px;
  text-align: center;
  background: radial-gradient(ellipse at center, rgba(126, 55, 235, 0.085), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(249, 245, 255, 0.9));
  border: 1px solid rgba(119, 61, 220, 0.2);
  border-radius: 34px;
  box-shadow: inset 0 0 20px rgba(114, 55, 226, 0.035), 0 5px 14px rgba(55, 31, 94, 0.035);
}
.ascension-progress__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 17px;
  margin-bottom: 10px;
}
.ascension-progress__label {
  color: var(--ascension-text);
  font-size: 12px;
  font-weight: 700;
}
.ascension-progress__count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ascension-text);
  font-size: 18px;
}
.ascension-progress__count span:first-child,
.ascension-progress__count span:last-child {
  color: #9551ef;
  font-size: 13px;
}
.ascension-progress__track {
  position: relative;
  height: 8px;
  overflow: visible;
  background: #eee8f5;
  border: 1px solid #ded4eb;
  border-radius: 20px;
  box-shadow: inset 0 1px 3px rgba(66, 39, 103, 0.1);
}
.ascension-progress__value {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1;
  width: 0;
  background: linear-gradient(90deg, #722ee4, #a452f5);
  border-radius: inherit;
  box-shadow: 0 0 9px rgba(137, 63, 236, 0.38);
}
.ascension-progress__glow {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 0;
  width: 0;
  height: 16px;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(148, 75, 245, 0.25), transparent 72%);
  transform: translateY(-50%);
}
.ascension-progress__steps {
  position: absolute;
  inset: 50% 0 auto;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
  pointer-events: none;
  transform: translateY(-50%);
}
.ascension-progress__step {
  display: block;
  width: 17px;
  height: 17px;
  background: linear-gradient(180deg, #fbf9ff, #ebe4f4);
  border: 2px solid #d5c9e5;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(53, 30, 85, 0.12);
}
.ascension-progress__step--completed {
  background: linear-gradient(135deg, #7331e1, #a253f2);
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(116, 49, 224, 0.27), 0 0 10px rgba(131, 54, 231, 0.38);
}
.ascension-progress__description {
  margin: 13px 0 0;
  color: var(--ascension-muted);
  font-size: 9px;
}
.ascension-progress__description strong {
  color: var(--ascension-primary);
}
.ascension-progress__decoration {
  position: absolute;
  top: 50%;
  color: rgba(127, 69, 218, 0.45);
  font-size: 34px;
  line-height: 1;
  transform: translateY(-50%);
}
.ascension-progress__decoration::before, .ascension-progress__decoration::after {
  position: absolute;
  content: "✦";
  color: rgba(127, 69, 218, 0.2);
}
.ascension-progress__decoration::before {
  top: -14px;
  left: 20px;
  font-size: 15px;
}
.ascension-progress__decoration::after {
  right: 19px;
  bottom: -12px;
  font-size: 11px;
}
.ascension-progress__decoration--left {
  left: 24px;
}
.ascension-progress__decoration--right {
  right: 24px;
  transform: translateY(-50%) scaleX(-1);
}

body.dark .ascension-task {
  background: radial-gradient(circle at 50% 0, rgba(143, 73, 255, 0.13), transparent 34%), linear-gradient(180deg, #10131c 0%, #0b0e15 100%);
  border-color: rgba(159, 91, 255, 0.3);
  box-shadow: inset 0 0 0 3px rgba(147, 79, 247, 0.035), 0 12px 30px rgba(0, 0, 0, 0.22);
}
body.dark .ascension-task::before {
  border-color: rgba(166, 103, 255, 0.1);
}
body.dark .ascension-task__progress-badge {
  color: #c88aff;
  background: linear-gradient(180deg, rgba(25, 21, 34, 0.98), rgba(16, 17, 26, 0.98));
  border-color: rgba(174, 96, 255, 0.43);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.24), inset 0 0 13px rgba(144, 69, 242, 0.08);
}
body.dark .ascension-card {
  background: linear-gradient(180deg, rgba(20, 23, 33, 0.99), rgba(11, 14, 21, 0.99));
  border-color: rgba(151, 88, 235, 0.29);
  box-shadow: 0 6px 17px rgba(0, 0, 0, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.015);
}
body.dark .ascension-card:hover {
  border-color: rgba(177, 104, 255, 0.57);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.37), 0 0 18px rgba(123, 55, 229, 0.1);
}
body.dark .ascension-card__status--missing {
  color: #ff7979;
  background: rgba(114, 36, 48, 0.15);
  border-color: rgba(255, 103, 103, 0.2);
}
body.dark .ascension-card__status--owned {
  color: #71d79b;
  background: rgba(28, 116, 67, 0.14);
  border-color: rgba(78, 211, 133, 0.19);
}
body.dark .ascension-card__replace {
  color: #c77bff;
  background: rgba(18, 14, 25, 0.94);
  border-color: rgba(180, 94, 255, 0.32);
}
body.dark .ascension-card__completed {
  color: #ddd4e8;
  background: linear-gradient(rgba(10, 12, 18, 0.88), rgba(16, 12, 23, 0.91));
}
body.dark .ascension-card__button--completed {
  color: #c783ff;
  background: rgba(27, 21, 36, 0.94);
  border-color: rgba(169, 90, 255, 0.22);
}
body.dark .ascension-progress {
  background: radial-gradient(ellipse at center, rgba(133, 55, 230, 0.12), transparent 70%), linear-gradient(180deg, rgba(18, 20, 29, 0.97), rgba(11, 14, 20, 0.97));
  border-color: rgba(150, 83, 239, 0.22);
}
body.dark .ascension-progress__track {
  background: #090b11;
  border-color: #292231;
}
body.dark .ascension-progress__step {
  background: linear-gradient(180deg, #24212b, #151720);
  border-color: #3b3347;
}

.ascension-guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 215px;
  min-height: 140px;
  overflow: hidden;
}
.ascension-guide__content {
  padding: 18px;
}
.ascension-guide__title {
  margin: 0;
  font-size: 15px;
}
.ascension-guide__decoration {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(126, 64, 235, 0.65);
  font-size: 75px;
  background: radial-gradient(circle, rgba(126, 64, 235, 0.16), transparent 68%), linear-gradient(135deg, #faf8ff, #f4efff);
}

.ascension-privileges {
  padding: 16px 18px;
}
.ascension-privileges__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ascension-privileges__title {
  margin: 0;
  font-size: 14px;
}
.ascension-privileges__all {
  color: var(--ascension-primary);
  font-size: 9px;
  text-decoration: none;
}
.ascension-privileges__items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-top: 15px;
}
.ascension-privileges__icon {
  color: var(--ascension-primary);
  font-size: 22px;
}

.ascension-sidebar-card {
  padding: 16px;
}
.ascension-sidebar-card__header {
  display: flex;
  align-items: center;
  gap: 7px;
}
.ascension-sidebar-card__title {
  margin: 0;
  font-size: 15px;
}
.ascension-sidebar-card__help {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--ascension-muted);
  font-size: 8px;
  border: 1px solid #aaa5b3;
  border-radius: 50%;
}
.ascension-sidebar-card__button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  margin-top: 14px;
  color: var(--ascension-primary);
  font-size: 10px;
  text-decoration: none;
  background: #faf8fd;
  border: 1px solid #e4dcf5;
  border-radius: 5px;
}

.ascension-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 13px 0;
  border-bottom: 1px solid var(--ascension-border);
}
.ascension-tabs__button {
  position: relative;
  padding: 7px 2px 10px;
  color: var(--ascension-muted);
  font-size: 9px;
  background: transparent;
  border: 0;
}
.ascension-tabs__button--active {
  color: var(--ascension-primary);
  font-weight: 650;
}
.ascension-tabs__button--active::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  content: "";
  background: var(--ascension-primary);
}

.ascension-sidebar-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ascension-sidebar-card__subtitle {
  display: block;
  margin-top: 3px;
  color: var(--ascension-muted);
  font-size: 8px;
}
.ascension-sidebar-card__header-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  color: var(--ascension-primary);
  background: var(--ascension-primary-soft);
  border: 1px solid rgba(113, 55, 232, 0.12);
  border-radius: 8px;
}
.ascension-sidebar-card__header-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ascension-ranking {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}
.ascension-ranking__item {
  position: relative;
  padding: 8px 8px 9px;
  overflow: visible;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.72), rgba(249, 246, 255, 0.52));
  border: 1px solid transparent;
  border-radius: 10px;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.ascension-ranking__item:hover {
  z-index: 3;
  background: linear-gradient(100deg, rgba(123, 61, 231, 0.07), rgba(123, 61, 231, 0.025));
  border-color: rgba(114, 55, 229, 0.13);
  box-shadow: 0 7px 18px rgba(70, 36, 123, 0.07);
  transform: translateX(2px);
}
.ascension-ranking__item--current {
  background: linear-gradient(100deg, rgba(113, 55, 232, 0.13), rgba(113, 55, 232, 0.035));
  border-color: rgba(113, 55, 232, 0.17);
}
.ascension-ranking__item--top .ascension-ranking__avatar-shell {
  filter: drop-shadow(0 4px 6px rgba(83, 41, 146, 0.18));
}
.ascension-ranking__main {
  display: grid;
  grid-template-columns: 22px 42px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
}
.ascension-ranking__position {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  color: var(--ascension-muted);
  font-size: 9px;
  font-weight: 700;
}
.ascension-ranking__position--1 {
  color: #e3a325;
  font-size: 17px;
  filter: drop-shadow(0 2px 4px rgba(224, 156, 29, 0.25));
}
.ascension-ranking__position--2 {
  color: #9297a5;
  font-size: 15px;
}
.ascension-ranking__position--3 {
  color: #c68254;
  font-size: 15px;
}
.ascension-ranking__avatar-link {
  display: block;
  width: 42px;
  height: 42px;
  text-decoration: none;
}
.ascension-ranking__avatar-shell {
  position: relative;
  display: block;
  width: 42px;
  height: 42px;
  isolation: isolate;
  transition: transform 0.2s ease;
}
.ascension-ranking__avatar-link:hover .ascension-ranking__avatar-shell {
  transform: scale(1.06);
}
.ascension-ranking__avatar {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 24px;
  height: 24px;
  -o-object-fit: cover;
     object-fit: cover;
  background: var(--ascension-surface);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.ascension-ranking__avatar-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ascension-ranking__avatar-level {
  position: absolute;
  right: -2px;
  bottom: -1px;
  z-index: 4;
  display: flex;
  min-width: 15px;
  height: 15px;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  color: #ffffff;
  font-size: 6px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, #5d24c7, #984cf1);
  border: 1.5px solid var(--ascension-surface);
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(72, 29, 139, 0.3);
}
.ascension-ranking__user {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}
.ascension-ranking__user strong {
  overflow: hidden;
  font-size: 9px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ascension-ranking__user > span {
  overflow: hidden;
  color: var(--ascension-muted);
  font-size: 9px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ascension-ranking__you {
  margin-left: 3px;
  padding: 1px 4px;
  color: var(--ascension-primary);
  font-size: 6px;
  text-transform: uppercase;
  background: var(--ascension-primary-soft);
  border-radius: 3px;
}
.ascension-ranking__score {
  color: var(--ascension-text);
  font-size: 9px;
  font-weight: 750;
}
.ascension-ranking__progress {
  position: relative;
  height: 4px;
  margin: 7px 2px 0 71px;
  overflow: hidden;
  background: rgba(91, 73, 117, 0.1);
  border-radius: 10px;
  box-shadow: inset 0 1px 2px rgba(46, 28, 70, 0.07);
}
.ascension-ranking__progress-value {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--ranking-progress, 0%);
  min-width: 3px;
  overflow: hidden;
  background: linear-gradient(90deg, #6827d6 0%, #8a40ee 55%, #b25cff 100%);
  border-radius: inherit;
  box-shadow: 0 0 6px rgba(132, 57, 235, 0.28);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.ascension-ranking__progress-value::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: translateX(-100%);
}
.ascension-ranking__progress-value.is-visible {
  transform: scaleX(1);
}
.ascension-ranking__progress-value.is-visible::after {
  animation: ascension-ranking-progress-shine 1.2s 0.3s ease-out forwards;
}
.ascension-ranking__divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  margin: 10px 0 4px;
}
.ascension-ranking__divider span {
  height: 1px;
  background: var(--ascension-border);
}
.ascension-ranking__divider strong {
  color: var(--ascension-muted);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
}
.ascension-ranking__empty {
  padding: 22px 8px;
  color: var(--ascension-muted);
  font-size: 9px;
  text-align: center;
}

@keyframes ascension-ranking-progress-shine {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(140%);
  }
}
.ascension-statistics {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
}
.ascension-statistics__item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ascension-border);
}
.ascension-statistics__item:last-child {
  border-bottom: 0;
}
.ascension-statistics__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  color: var(--ascension-primary);
  background: var(--ascension-primary-soft);
  border-radius: 8px;
}
.ascension-statistics__icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ascension-statistics__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}
.ascension-statistics__content > span {
  color: var(--ascension-muted);
  font-size: 8px;
}
.ascension-statistics__content > strong {
  color: var(--ascension-text);
  font-size: 13px;
}
.ascension-statistics__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ascension-statistics__label-row span {
  color: var(--ascension-muted);
  font-size: 8px;
}
.ascension-statistics__label-row strong {
  font-size: 9px;
}
.ascension-statistics__progress {
  height: 5px;
  margin-top: 4px;
  overflow: hidden;
  background: rgba(104, 90, 120, 0.1);
  border-radius: 20px;
}
.ascension-statistics__progress-value {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #6927d6, #aa52ff);
  border-radius: inherit;
  box-shadow: 0 0 7px rgba(127, 48, 228, 0.3);
  transition: width 1.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.ascension-statistics__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 11px -16px -16px;
  padding: 11px 16px;
  color: var(--ascension-muted);
  font-size: 8px;
  background: linear-gradient(90deg, rgba(113, 55, 232, 0.055), rgba(113, 55, 232, 0.015));
  border-top: 1px solid var(--ascension-border);
}
.ascension-statistics__footer strong {
  color: var(--ascension-primary);
  font-size: 9px;
}

.ascension-day-card {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 11px;
  margin-top: 14px;
}
.ascension-day-card__image {
  width: 74px;
  height: 104px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 5px;
}
.ascension-day-card__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.ascension-day-card__content strong {
  font-size: 10px;
}
.ascension-day-card__content span {
  margin-top: 3px;
  color: var(--ascension-muted);
  font-size: 8px;
}
.ascension-day-card__content p {
  margin: auto 0 0;
  color: var(--ascension-primary);
  font-size: 8px;
  line-height: 1.45;
}

.ascension-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  isolation: isolate;
}
.ascension-modal--open {
  display: flex;
}
.ascension-modal__backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 42%, rgba(107, 45, 196, 0.22), transparent 38%), rgba(12, 9, 20, 0.78);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.ascension-modal__dialog {
  position: relative;
  z-index: 2;
  width: min(900px, 100%);
  max-height: calc(100vh - 40px);
  padding: 34px 36px 28px;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--ascension-text);
  background: var(--ascension-surface);
  border: 1px solid var(--ascension-border);
  border-radius: 24px;
  box-shadow: 0 34px 100px rgba(20, 13, 35, 0.34), inset 0 1px rgba(255, 255, 255, 0.7);
}
.ascension-modal__close {
  position: absolute;
  top: 17px;
  right: 17px;
  z-index: 8;
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--ascension-muted);
  place-items: center;
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(89, 48, 145, 0.12);
  border-radius: 50%;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.ascension-modal__close svg {
  width: 19px;
  height: 19px;
}
.ascension-modal__close:hover {
  color: var(--ascension-primary);
  background: rgba(113, 55, 232, 0.09);
  border-color: rgba(113, 55, 232, 0.22);
  transform: rotate(4deg);
}
.ascension-modal__title {
  margin: 0;
  font-size: 31px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.ascension-modal__subtitle {
  margin: 9px 0 0;
  color: var(--ascension-muted);
  font-size: 12px;
  line-height: 1.6;
}
.ascension-modal__notice {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 14px;
  padding: 11px 13px;
  color: #66418f;
  background: rgba(116, 57, 222, 0.065);
  border: 1px solid rgba(113, 55, 232, 0.13);
  border-radius: 12px;
}
.ascension-modal__notice p {
  display: flex;
  min-width: 0;
  margin: 0;
  flex-direction: column;
  gap: 2px;
}
.ascension-modal__notice strong {
  color: var(--ascension-text);
  font-size: 10px;
}
.ascension-modal__notice p span {
  color: var(--ascension-muted);
  font-size: 9px;
  line-height: 1.5;
}
.ascension-modal__notice-icon {
  display: grid;
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  color: var(--ascension-primary);
  place-items: center;
  background: rgba(113, 55, 232, 0.1);
  border: 1px solid rgba(113, 55, 232, 0.13);
  border-radius: 9px;
}
.ascension-modal__notice-icon svg {
  width: 17px;
  height: 17px;
}
.ascension-modal__actions {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(150px, 0.72fr) minmax(240px, 1.28fr);
  gap: 12px;
  margin-top: 16px;
}
.ascension-modal__button {
  position: relative;
  display: inline-flex;
  min-height: 52px;
  padding: 0 20px;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 750;
  border-radius: 14px;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.ascension-modal__button--secondary {
  color: var(--ascension-text);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--ascension-border);
}
.ascension-modal__button--secondary:hover {
  color: var(--ascension-primary);
  background: var(--ascension-primary-soft);
  border-color: rgba(113, 55, 232, 0.2);
  transform: translateY(-1px);
}
.ascension-modal__button--primary {
  color: #fff;
  background: linear-gradient(115deg, #5e20c7 0%, #7a31e5 54%, #a74cf0 100%);
  border: 0;
  box-shadow: 0 13px 28px rgba(91, 33, 186, 0.27), inset 0 1px rgba(255, 255, 255, 0.28);
}
.ascension-modal__button--primary::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, 0.2) 45%, transparent 65%);
  content: "";
  transform: translateX(-120%);
  transition: transform 0.52s ease;
}
.ascension-modal__button--primary > * {
  position: relative;
  z-index: 1;
}
.ascension-modal__button--primary:hover {
  box-shadow: 0 16px 34px rgba(91, 33, 186, 0.35), inset 0 1px rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}
.ascension-modal__button--primary:hover::before {
  transform: translateX(120%);
}
.ascension-modal__button:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}
.ascension-modal__button-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
.ascension-modal__button-price {
  display: inline-flex;
  padding-left: 10px;
  align-items: center;
  gap: 4px;
  border-left: 1px solid rgba(255, 255, 255, 0.28);
}
.ascension-modal__button-price > span:first-child {
  color: #8fd7ff;
  font-size: 11px;
  text-shadow: 0 0 9px rgba(104, 199, 255, 0.75);
}

.ascension-replace-modal {
  --replace-panel: rgba(255, 255, 255, 0.76);
  --replace-panel-strong: #ffffff;
  --replace-panel-muted: rgba(248, 244, 255, 0.84);
  --replace-line: rgba(102, 51, 178, 0.13);
  --replace-line-strong: rgba(112, 55, 221, 0.25);
  --replace-glow: rgba(126, 57, 226, 0.18);
  --replace-title-start: #2a1649;
  --replace-title-end: #7131c7;
  --replace-mystery-start: #341463;
  --replace-mystery-end: #120923;
  isolation: isolate;
  background: radial-gradient(circle at 50% -5%, rgba(165, 94, 246, 0.23), transparent 31%), radial-gradient(circle at 9% 29%, rgba(111, 58, 217, 0.09), transparent 24%), radial-gradient(circle at 92% 32%, rgba(209, 144, 255, 0.12), transparent 25%), linear-gradient(145deg, #ffffff 0%, #fcfaff 48%, #f7f1ff 100%);
  border-color: rgba(113, 55, 232, 0.19);
  box-shadow: 0 38px 110px rgba(22, 13, 39, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.84) inset, 0 0 70px rgba(113, 55, 232, 0.05) inset;
}
.ascension-replace-modal::before {
  position: absolute;
  inset: 10px;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(116, 57, 220, 0.08);
  border-radius: 17px;
  content: "";
}
.ascension-replace-modal__aura {
  position: absolute;
  top: -135px;
  left: 50%;
  z-index: -1;
  width: 430px;
  height: 250px;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(142, 67, 235, 0.21), transparent 68%);
  transform: translateX(-50%);
}
.ascension-replace-modal__stars {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.ascension-replace-modal__stars span {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #9e5be6;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(135, 63, 229, 0.75);
  opacity: 0.36;
}
.ascension-replace-modal__stars span:nth-child(1) {
  top: 9%;
  left: 9%;
}
.ascension-replace-modal__stars span:nth-child(2) {
  top: 16%;
  left: 19%;
  width: 2px;
  height: 2px;
}
.ascension-replace-modal__stars span:nth-child(3) {
  top: 8%;
  right: 15%;
  width: 4px;
  height: 4px;
}
.ascension-replace-modal__stars span:nth-child(4) {
  top: 35%;
  right: 6%;
}
.ascension-replace-modal__stars span:nth-child(5) {
  top: 42%;
  left: 5%;
  width: 2px;
  height: 2px;
}
.ascension-replace-modal__stars span:nth-child(6) {
  top: 24%;
  right: 24%;
  width: 2px;
  height: 2px;
}
.ascension-replace-modal__header {
  position: relative;
  z-index: 2;
  max-width: 590px;
  margin: 0 auto;
  text-align: center;
}
.ascension-replace-modal__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  color: #8d55bd;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.ascension-replace-modal__eyebrow i {
  display: block;
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
  opacity: 0.65;
}
.ascension-replace-modal__eyebrow i:last-child {
  transform: scaleX(-1);
}
.ascension-replace-modal__title {
  color: var(--replace-title-start);
  background: linear-gradient(180deg, var(--replace-title-start) 0%, var(--replace-title-end) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 5px 14px rgba(105, 42, 188, 0.11));
}
.ascension-replace-modal__subtitle {
  max-width: 510px;
  margin-right: auto;
  margin-left: auto;
}
.ascension-replace-modal--free .ascension-replace__cost {
  background: radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.75), transparent 42%), linear-gradient(135deg, rgba(39, 173, 107, 0.13), rgba(89, 210, 152, 0.055));
  border-color: rgba(35, 166, 100, 0.19);
}
.ascension-replace-modal--free .ascension-replace__cost-free {
  display: block;
}
.ascension-replace-modal--free .ascension-replace__cost-paid {
  display: none;
}
.ascension-modal--open .ascension-replace-modal--casting .ascension-modal__close,
.ascension-modal--open .ascension-replace-modal--casting .ascension-modal__actions {
  pointer-events: none;
}
.ascension-modal--open .ascension-replace-modal--casting .ascension-modal__close {
  opacity: 0.35;
}
.ascension-modal--open .ascension-replace-modal--casting .ascension-modal__actions {
  opacity: 0.58;
}
.ascension-modal--open .ascension-replace-modal--casting .ascension-replace__card {
  animation: ascension-replace-card-vanish 0.72s 0.08s ease-in both;
}
.ascension-modal--open .ascension-replace-modal--casting .ascension-replace__side--current .ascension-replace__side-name {
  animation: ascension-replace-copy-fade 0.34s ease-out both;
}
.ascension-modal--open .ascension-replace-modal--casting .ascension-replace__portal {
  animation: ascension-replace-portal-charge 0.72s ease-in-out infinite alternate;
}
.ascension-modal--open .ascension-replace-modal--casting .ascension-replace__portal-ring--outer,
.ascension-modal--open .ascension-replace-modal--casting .ascension-replace__portal-ring--inner {
  animation-duration: 1.15s;
}
.ascension-modal--open .ascension-replace-modal--casting .ascension-replace__portal-icon svg,
.ascension-modal--open .ascension-replace-modal--casting .ascension-modal__button-icon {
  animation: ascension-replace-ring 0.9s linear infinite;
}
.ascension-modal--open .ascension-replace-modal--casting .ascension-replace__mystery {
  animation: ascension-replace-mystery-charge 0.72s ease-in-out infinite alternate;
}
.ascension-modal--open .ascension-replace-modal--casting .ascension-replace__mystery-question {
  animation: ascension-replace-question-pulse 0.72s ease-in-out infinite alternate;
}
.ascension-modal--open .ascension-replace-modal--resolved .ascension-replace__portal {
  animation: ascension-replace-portal-release 0.52s ease-out both;
}
.ascension-modal--open .ascension-replace-modal--resolved .ascension-replace__mystery {
  animation: ascension-replace-result-shell 0.58s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ascension-modal--open .ascension-replace-modal--resolved .ascension-replace__result-image {
  animation: ascension-replace-result-reveal 0.62s 0.04s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ascension-modal--open .ascension-replace-modal--resolved .ascension-replace__mystery-question,
.ascension-modal--open .ascension-replace-modal--resolved .ascension-replace__mystery-rune,
.ascension-modal--open .ascension-replace-modal--resolved .ascension-replace__mystery-orbit {
  opacity: 0;
  transition: opacity 0.18s ease;
}
.ascension-modal--open .ascension-replace-modal--resolved .ascension-replace__side--future .ascension-replace__side-name {
  animation: ascension-replace-result-copy 0.36s 0.24s ease-out both;
}

.ascension-replace {
  position: relative;
  z-index: 2;
  margin-top: 22px;
}
.ascension-replace__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(170px, 1fr) 104px minmax(170px, 1fr);
  gap: 14px;
  padding: 19px 26px 17px;
  overflow: hidden;
  align-items: center;
  background: linear-gradient(90deg, transparent 49.9%, var(--replace-line) 50%, transparent 50.1%), radial-gradient(circle at 50% 50%, var(--replace-glow), transparent 26%), var(--replace-panel-muted);
  border: 1px solid var(--replace-line);
  border-radius: 19px;
}
.ascension-replace__stage::before, .ascension-replace__stage::after {
  position: absolute;
  width: 82px;
  height: 82px;
  pointer-events: none;
  border: 1px solid var(--replace-line);
  content: "";
  opacity: 0.58;
  transform: rotate(45deg);
}
.ascension-replace__stage::before {
  top: -58px;
  left: -58px;
}
.ascension-replace__stage::after {
  right: -58px;
  bottom: -58px;
}
.ascension-replace__side {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
.ascension-replace__side-caption {
  margin-bottom: 9px;
  color: var(--ascension-muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ascension-replace__side-name {
  margin-top: 9px;
  color: var(--ascension-text);
  font-size: 9px;
}
.ascension-replace__side--current .ascension-replace__side-name {
  color: var(--ascension-muted);
  font-weight: 650;
}
.ascension-replace__side--future .ascension-replace__side-name {
  color: var(--ascension-primary);
}
.ascension-replace__side-hint {
  margin-top: 2px;
  color: var(--ascension-muted);
  font-size: 9px;
}
.ascension-replace__card, .ascension-replace__mystery {
  position: relative;
  width: 128px;
  aspect-ratio: 2/3;
  border-radius: 11px;
}
.ascension-replace__card {
  padding: 3px;
  background: linear-gradient(145deg, #a578e2, #3b1a6b 52%, #be8eee);
  box-shadow: 0 14px 28px rgba(42, 19, 73, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
}
.ascension-replace__image {
  display: block;
  width: 100%;
  height: 100%;
  background: #0c0911;
  border-radius: 8px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}
.ascension-replace__card-fade {
  position: absolute;
  inset: 3px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(29, 12, 51, 0.04), rgba(17, 7, 29, 0.12));
  border-radius: 8px;
}
.ascension-replace__card-corner {
  position: absolute;
  z-index: 3;
  width: 17px;
  height: 17px;
  pointer-events: none;
  border-color: #e8ccff;
  filter: drop-shadow(0 0 5px rgba(173, 93, 244, 0.7));
}
.ascension-replace__card-corner--top {
  top: -3px;
  left: -3px;
  border-top: 2px solid;
  border-left: 2px solid;
  border-radius: 6px 0 0;
}
.ascension-replace__card-corner--bottom {
  right: -3px;
  bottom: -3px;
  border-right: 2px solid;
  border-bottom: 2px solid;
  border-radius: 0 0 6px;
}
.ascension-replace__portal {
  position: relative;
  display: flex;
  width: 88px;
  height: 88px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--ascension-primary);
}
.ascension-replace__portal-ring {
  position: absolute;
  border: 1px solid rgba(123, 57, 220, 0.34);
  border-radius: 50%;
}
.ascension-replace__portal-ring--outer {
  inset: 3px;
  border-style: dashed;
}
.ascension-replace__portal-ring--inner {
  inset: 14px;
  border-color: rgba(123, 57, 220, 0.18);
}
.ascension-replace__portal-ring--inner::before, .ascension-replace__portal-ring--inner::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: var(--ascension-primary);
  border-radius: 50%;
  box-shadow: 0 0 9px rgba(122, 54, 222, 0.8);
  content: "";
}
.ascension-replace__portal-ring--inner::before {
  transform: translate(-50%, -50%) translateY(-29px);
}
.ascension-replace__portal-ring--inner::after {
  transform: translate(-50%, -50%) translateY(29px);
}
.ascension-replace__portal-icon {
  position: relative;
  z-index: 2;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  background: var(--replace-panel-strong);
  border: 1px solid var(--replace-line-strong);
  border-radius: 50%;
  box-shadow: 0 7px 18px rgba(87, 37, 151, 0.15), 0 0 20px var(--replace-glow);
}
.ascension-replace__portal-icon svg {
  width: 21px;
  height: 21px;
}
.ascension-replace__portal-label {
  position: absolute;
  bottom: -3px;
  z-index: 2;
  padding: 2px 7px;
  color: #8a4cc4;
  font-size: 6px;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--replace-panel-strong);
  border: 1px solid var(--replace-line);
  border-radius: 10px;
}
.ascension-replace__mystery {
  display: grid;
  overflow: hidden;
  color: #f1dfff;
  place-items: center;
  background: radial-gradient(circle at 50% 45%, rgba(198, 129, 255, 0.26), transparent 25%), repeating-radial-gradient(circle at 50% 50%, transparent 0 17px, rgba(211, 160, 255, 0.07) 18px 19px), linear-gradient(145deg, var(--replace-mystery-start), var(--replace-mystery-end));
  border: 1px solid rgba(198, 135, 255, 0.38);
  box-shadow: 0 17px 34px rgba(39, 14, 73, 0.29), 0 0 28px rgba(132, 55, 224, 0.18), inset 0 0 35px rgba(180, 102, 255, 0.1);
}
.ascension-replace__mystery::before, .ascension-replace__mystery::after {
  position: absolute;
  width: 78%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(221, 183, 255, 0.35), transparent);
  content: "";
}
.ascension-replace__mystery::before {
  transform: rotate(45deg);
}
.ascension-replace__mystery::after {
  transform: rotate(-45deg);
}
.ascension-replace__mystery > strong {
  position: relative;
  z-index: 2;
  font-family: Georgia, serif;
  font-size: 51px;
  font-weight: 500;
  line-height: 1;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.64), 0 0 26px rgba(186, 103, 255, 0.75);
}
.ascension-replace__result-image {
  position: absolute;
  inset: 3px;
  z-index: 4;
  display: block;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  background: #0c0911;
  border-radius: 8px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  opacity: 0;
  transform: scale(0.76) rotate(-5deg);
}
.ascension-replace__mystery-question {
  transition: opacity 0.18s ease;
}
.ascension-replace__mystery-orbit {
  position: absolute;
  width: 86px;
  height: 86px;
  border: 1px dashed rgba(219, 177, 255, 0.25);
  border-radius: 50%;
}
.ascension-replace__mystery-rune {
  position: absolute;
  top: 10px;
  right: 11px;
  color: #ddb7ff;
  font-size: 12px;
  text-shadow: 0 0 9px rgba(213, 162, 255, 0.72);
}
.ascension-replace__information {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 0.9fr;
  gap: 9px;
  margin-top: 10px;
}
.ascension-replace__cost, .ascension-replace__balance, .ascension-replace__next {
  min-width: 0;
  min-height: 67px;
  background: var(--replace-panel);
  border: 1px solid var(--replace-line);
  border-radius: 13px;
}
.ascension-replace__cost {
  display: grid;
  padding: 10px 13px;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  -moz-column-gap: 12px;
       column-gap: 12px;
  background: radial-gradient(circle at 8% 14%, rgba(255, 255, 255, 0.8), transparent 45%), linear-gradient(135deg, rgba(119, 55, 224, 0.12), rgba(183, 104, 240, 0.045));
  border-color: rgba(113, 55, 232, 0.17);
}
.ascension-replace__cost-caption {
  align-self: end;
  color: var(--ascension-muted);
  font-size: 8px;
  font-weight: 700;
}
.ascension-replace__cost-value {
  display: flex;
  grid-row: 1/3;
  grid-column: 2;
  align-items: center;
  justify-content: flex-end;
}
.ascension-replace__cost-free, .ascension-replace__cost-paid {
  color: var(--ascension-primary);
  font-size: 19px;
  line-height: 1;
}
.ascension-replace__cost-free {
  display: none;
  color: #1f9f60;
  font-size: 16px;
}
.ascension-replace__cost-paid {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ascension-replace__diamond {
  display: grid;
  width: 22px;
  height: 22px;
  color: #48aef1;
  place-items: center;
  filter: drop-shadow(0 0 6px rgba(69, 166, 232, 0.34));
}
.ascension-replace__diamond svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: rgba(73, 184, 246, 0.18);
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linejoin: round;
}
.ascension-replace__cost-number {
  align-self: start;
  color: var(--ascension-muted);
  font-size: 9px;
}
.ascension-replace__balance, .ascension-replace__next {
  display: flex;
  padding: 10px;
  align-items: center;
  gap: 9px;
}
.ascension-replace__information-icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  color: var(--ascension-primary);
  place-items: center;
  background: rgba(113, 55, 232, 0.075);
  border: 1px solid rgba(113, 55, 232, 0.1);
  border-radius: 9px;
}
.ascension-replace__information-icon svg {
  width: 18px;
  height: 18px;
}
.ascension-replace__information-icon--next {
  color: #9a5bc7;
  background: rgba(151, 79, 199, 0.07);
}
.ascension-replace__information-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}
.ascension-replace__information-copy small {
  overflow: hidden;
  color: var(--ascension-muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ascension-replace__information-copy strong {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--ascension-text);
  font-size: 11px;
}
.ascension-replace__mini-diamond {
  color: #49afea;
  font-size: 9px;
  text-shadow: 0 0 7px rgba(67, 171, 232, 0.42);
}

.ascension-level-modal {
  --level-modal-panel-start: #ffffff;
  --level-modal-panel-end: #f8f4ff;
  --level-modal-line: rgba(113, 55, 232, 0.17);
  --level-modal-line-strong: rgba(113, 55, 232, 0.34);
  --level-modal-soft: rgba(113, 55, 232, 0.08);
  --level-modal-reward: rgba(255, 255, 255, 0.7);
  --level-modal-number-start: #321069;
  --level-modal-number-end: #7d3bd9;
  position: relative;
  z-index: 2;
  isolation: isolate;
  width: min(780px, 100%);
  max-height: calc(100vh - 40px);
  padding: 38px 44px 30px;
  overflow: auto;
  color: var(--ascension-text);
  text-align: center;
  background: radial-gradient(circle at 50% 21%, rgba(147, 80, 244, 0.18), transparent 31%), radial-gradient(circle at 13% 17%, rgba(113, 55, 232, 0.07) 0 1px, transparent 2px), radial-gradient(circle at 84% 27%, rgba(113, 55, 232, 0.08) 0 1.5px, transparent 2.5px), linear-gradient(145deg, var(--level-modal-panel-start), var(--level-modal-panel-end));
  border: 1px solid var(--level-modal-line-strong);
  border-radius: 28px;
  box-shadow: 0 36px 100px rgba(30, 15, 58, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.7) inset, 0 0 70px rgba(116, 48, 222, 0.08) inset;
}
.ascension-level-modal::before {
  position: absolute;
  inset: 8px;
  z-index: -1;
  content: "";
  pointer-events: none;
  border: 1px solid var(--level-modal-line);
  border-radius: 21px;
}
.ascension-level-modal::after {
  position: absolute;
  right: 15%;
  bottom: 0;
  left: 15%;
  z-index: 0;
  height: 1px;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #9750ef, transparent);
  box-shadow: 0 0 18px rgba(133, 61, 229, 0.55);
}
.ascension-level-modal__backdrop {
  background: radial-gradient(circle at 50% 48%, rgba(117, 53, 206, 0.2), transparent 39%), rgba(12, 9, 19, 0.78);
  -webkit-backdrop-filter: blur(9px);
          backdrop-filter: blur(9px);
}
.ascension-level-modal__aura {
  position: absolute;
  top: -285px;
  left: 50%;
  z-index: -1;
  width: 600px;
  height: 600px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(148, 79, 245, 0.2), rgba(148, 79, 245, 0.05) 35%, transparent 66%);
  border: 1px solid rgba(146, 76, 239, 0.1);
  border-radius: 50%;
  transform: translateX(-50%);
}
.ascension-level-modal__ornaments {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.ascension-level-modal__ornaments span {
  position: absolute;
  width: 5px;
  height: 5px;
  background: #9c55ef;
  border-radius: 1px;
  box-shadow: 0 0 12px rgba(144, 67, 235, 0.7);
  opacity: 0.45;
  transform: rotate(45deg);
}
.ascension-level-modal__ornaments span:nth-child(1) {
  top: 16%;
  left: 9%;
}
.ascension-level-modal__ornaments span:nth-child(2) {
  top: 33%;
  left: 5%;
  width: 3px;
  height: 3px;
}
.ascension-level-modal__ornaments span:nth-child(3) {
  top: 20%;
  right: 8%;
  width: 4px;
  height: 4px;
}
.ascension-level-modal__ornaments span:nth-child(4) {
  top: 46%;
  right: 5%;
  width: 3px;
  height: 3px;
}
.ascension-level-modal__ornaments span:nth-child(5) {
  bottom: 22%;
  left: 7%;
  width: 4px;
  height: 4px;
}
.ascension-level-modal__ornaments span:nth-child(6) {
  right: 9%;
  bottom: 16%;
}
.ascension-level-modal__header {
  position: relative;
  z-index: 2;
}
.ascension-level-modal__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  color: var(--ascension-primary);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.ascension-level-modal__eyebrow svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}
.ascension-level-modal__title {
  position: relative;
  margin: 0 0 20px;
  color: var(--ascension-primary-dark);
  font-size: 32px;
  font-weight: 850;
  letter-spacing: -0.8px;
  line-height: 1.08;
  text-transform: uppercase;
  background: linear-gradient(180deg, #4d1b9d 4%, #7132d4 58%, #9a52ef 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 5px 14px rgba(105, 43, 197, 0.13));
}
.ascension-level-modal__levels {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  max-width: 650px;
  min-height: 218px;
  margin: 0 auto;
}
.ascension-level-modal__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  color: var(--ascension-muted);
  font-size: 10px;
}
.ascension-level-modal__stage--old {
  opacity: 0.78;
}
.ascension-level-modal__stage--new {
  color: var(--ascension-primary);
}
.ascension-level-modal__stage-caption {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 22px;
  padding: 3px 10px;
  color: var(--ascension-muted);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 1.2px;
  line-height: 1;
  text-transform: uppercase;
  background: var(--level-modal-soft);
  border: 1px solid var(--level-modal-line);
  border-radius: 99px;
}
.ascension-level-modal__stage--new .ascension-level-modal__stage-caption {
  color: var(--ascension-primary);
  background: rgba(132, 58, 231, 0.11);
  border-color: rgba(128, 54, 224, 0.24);
}
.ascension-level-modal__stage-name {
  color: var(--ascension-muted);
  font-size: 10px;
  font-weight: 600;
}
.ascension-level-modal__stage--new .ascension-level-modal__stage-name {
  color: var(--ascension-primary-dark);
}
.ascension-level-modal__badge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 144px;
  height: 144px;
}
.ascension-level-modal__badge--new {
  width: 184px;
  height: 184px;
}
.ascension-level-modal__badge-image {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  filter: drop-shadow(0 12px 18px rgba(77, 31, 145, 0.18));
}
.ascension-level-modal__badge--new .ascension-level-modal__badge-image {
  filter: drop-shadow(0 0 9px rgba(144, 67, 238, 0.24)) drop-shadow(0 18px 24px rgba(77, 31, 145, 0.22));
}
.ascension-level-modal__badge-glow {
  position: absolute;
  inset: 17%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(151, 80, 242, 0.29), rgba(151, 80, 242, 0.08) 55%, transparent 72%);
  border-radius: 50%;
  box-shadow: 0 0 42px rgba(125, 52, 224, 0.25);
}
.ascension-level-modal__number {
  position: absolute;
  top: 50%;
  left: 49%;
  z-index: 3;
  min-width: 78px;
  color: var(--ascension-primary-dark);
  font-size: 52px;
  font-weight: 850;
  letter-spacing: -2px;
  line-height: 1;
  text-align: center;
  background: linear-gradient(180deg, var(--level-modal-number-start), var(--level-modal-number-end));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 3px rgba(74, 30, 132, 0.18));
  transform: translate(-50%, -43%);
}
.ascension-level-modal__number--three-digits {
  font-size: 42px;
  letter-spacing: -3px;
}
.ascension-level-modal__number--four-digits {
  font-size: 32px;
  letter-spacing: -3px;
}
.ascension-level-modal__badge--new .ascension-level-modal__number {
  min-width: 100px;
  font-size: 64px;
}
.ascension-level-modal__badge--new .ascension-level-modal__number--three-digits {
  font-size: 50px;
}
.ascension-level-modal__badge--new .ascension-level-modal__number--four-digits {
  font-size: 38px;
}
.ascension-level-modal__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--ascension-primary);
}
.ascension-level-modal__arrow-line {
  width: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
}
.ascension-level-modal__arrow-line:last-child {
  background: linear-gradient(90deg, currentColor, transparent);
}
.ascension-level-modal__arrow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
  background: linear-gradient(145deg, rgba(132, 57, 230, 0.12), rgba(132, 57, 230, 0.04));
  border: 1px solid rgba(128, 54, 224, 0.21);
  border-radius: 50%;
  box-shadow: 0 0 23px rgba(126, 51, 220, 0.12);
}
.ascension-level-modal__arrow-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ascension-level-modal__description {
  position: relative;
  z-index: 2;
  margin: 14px 0 18px;
  color: var(--ascension-muted);
  font-size: 11px;
  line-height: 1.55;
}
.ascension-level-modal__rewards {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  max-width: 680px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--level-modal-reward);
  border: 1px solid var(--level-modal-line);
  border-radius: 14px;
  box-shadow: 0 12px 35px rgba(72, 31, 130, 0.06);
}
.ascension-level-modal__reward {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 76px;
  padding: 11px 12px;
}
.ascension-level-modal__reward:first-child {
  border-right: 1px solid var(--level-modal-line);
}
.ascension-level-modal__reward--dust {
  border-left: 1px solid var(--level-modal-line);
}
.ascension-level-modal__reward--split-buff {
  border-left: 1px solid var(--level-modal-line);
}
.ascension-level-modal__reward--pro {
  border-left: 1px solid var(--level-modal-line);
}
.ascension-level-modal__reward.is-hidden {
  display: none;
}
.ascension-level-modal__reward p {
  display: flex;
  min-width: 0;
  margin: 0;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.ascension-level-modal__reward strong {
  color: var(--ascension-text);
  font-size: 11px;
}
.ascension-level-modal__reward p span {
  color: var(--ascension-muted);
  font-size: 10px;
}
.ascension-level-modal__reward-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  color: #8841df;
  background: rgba(131, 57, 227, 0.1);
  border: 1px solid rgba(128, 54, 224, 0.13);
  border-radius: 11px;
}
.ascension-level-modal__reward-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ascension-level-modal__reward-icon--diamond {
  color: #3d80df;
  background: rgba(61, 128, 223, 0.09);
  border-color: rgba(61, 128, 223, 0.13);
}
.ascension-level-modal__reward-icon--essence {
  color: #269895;
  background: rgba(38, 152, 149, 0.1);
  border-color: rgba(38, 152, 149, 0.14);
}
.ascension-level-modal__reward-icon--dust {
  color: #d99728;
  background: rgba(219, 157, 54, 0.1);
  border-color: rgba(219, 157, 54, 0.14);
}
.ascension-level-modal__reward-icon--split-buff {
  color: #ef7330;
  background: linear-gradient(145deg, rgba(243, 130, 48, 0.15), rgba(126, 73, 223, 0.07));
  border-color: rgba(231, 113, 46, 0.16);
}
.ascension-level-modal__reward-icon--pro {
  color: #7d49df;
  background: linear-gradient(145deg, rgba(126, 73, 223, 0.14), rgba(126, 73, 223, 0.06));
  border-color: rgba(126, 73, 223, 0.15);
  box-shadow: 0 5px 13px rgba(115, 60, 210, 0.08);
}
.ascension-level-modal__continue {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 280px;
  min-height: 46px;
  margin-top: 20px;
  padding: 10px 25px;
  overflow: hidden;
  color: #fff;
  font-size: 11px;
  font-weight: 750;
  background: linear-gradient(100deg, #5f23c8 0%, #7d34e4 52%, #9b4ef0 100%);
  border: 0;
  border-radius: 10px;
  box-shadow: 0 12px 25px rgba(103, 38, 200, 0.25), inset 0 1px rgba(255, 255, 255, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ascension-level-modal__continue::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.2) 48%, transparent 70%);
  transform: translateX(-110%);
  transition: transform 0.55s ease;
}
.ascension-level-modal__continue span,
.ascension-level-modal__continue svg {
  position: relative;
  z-index: 1;
}
.ascension-level-modal__continue svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}
.ascension-level-modal__continue:hover {
  box-shadow: 0 15px 31px rgba(103, 38, 200, 0.33), inset 0 1px rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}
.ascension-level-modal__continue:hover::before {
  transform: translateX(110%);
}
.ascension-level-modal__continue:hover svg {
  transform: translateX(3px);
}
.ascension-level-modal__continue:active {
  transform: translateY(0);
}

.ascension-modal--open .ascension-replace-modal {
  animation: ascension-replace-modal-enter 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ascension-modal--open .ascension-replace-modal__header {
  animation: ascension-replace-modal-rise 0.38s 0.05s ease-out both;
}
.ascension-modal--open .ascension-replace-modal__stars span {
  animation: ascension-replace-star 2.4s ease-in-out infinite;
}
.ascension-modal--open .ascension-replace-modal__stars span:nth-child(2), .ascension-modal--open .ascension-replace-modal__stars span:nth-child(5) {
  animation-delay: -0.8s;
}
.ascension-modal--open .ascension-replace-modal__stars span:nth-child(3), .ascension-modal--open .ascension-replace-modal__stars span:nth-child(6) {
  animation-delay: -1.55s;
}
.ascension-modal--open .ascension-replace__side--current {
  animation: ascension-replace-current 0.43s 0.1s ease-out both;
}
.ascension-modal--open .ascension-replace__portal {
  animation: ascension-replace-portal-enter 0.4s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ascension-modal--open .ascension-replace__portal-ring--outer {
  animation: ascension-replace-ring 14s linear infinite;
}
.ascension-modal--open .ascension-replace__portal-ring--inner {
  animation: ascension-replace-ring-reverse 10s linear infinite;
}
.ascension-modal--open .ascension-replace__portal-icon svg {
  animation: ascension-replace-icon 4s ease-in-out infinite;
}
.ascension-modal--open .ascension-replace__side--future {
  animation: ascension-replace-future 0.5s 0.23s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ascension-modal--open .ascension-replace__mystery-orbit {
  animation: ascension-replace-ring 18s linear infinite;
}
.ascension-modal--open .ascension-replace__information,
.ascension-modal--open .ascension-replace + .ascension-modal__notice,
.ascension-modal--open .ascension-replace + .ascension-modal__notice + .ascension-modal__actions {
  animation: ascension-replace-modal-rise 0.4s 0.3s ease-out both;
}
.ascension-modal--open .ascension-level-modal {
  animation: ascension-level-modal-enter 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ascension-modal--open .ascension-level-modal__header {
  animation: ascension-level-modal-rise 0.42s 0.08s ease-out both;
}
.ascension-modal--open .ascension-level-modal__stage--old {
  animation: ascension-level-modal-old 0.4s 0.13s ease-out both;
}
.ascension-modal--open .ascension-level-modal__arrow {
  animation: ascension-level-modal-arrow 0.38s 0.24s ease-out both;
}
.ascension-modal--open .ascension-level-modal__stage--new {
  animation: ascension-level-modal-new 0.58s 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ascension-modal--open .ascension-level-modal__description, .ascension-modal--open .ascension-level-modal__rewards, .ascension-modal--open .ascension-level-modal__continue {
  animation: ascension-level-modal-rise 0.42s 0.38s ease-out both;
}

@keyframes ascension-replace-modal-enter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.975);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes ascension-replace-modal-rise {
  from {
    opacity: 0;
    transform: translateY(9px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes ascension-replace-current {
  from {
    opacity: 0;
    transform: translateX(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
@keyframes ascension-replace-portal-enter {
  from {
    opacity: 0;
    transform: scale(0.62) rotate(-20deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}
@keyframes ascension-replace-future {
  from {
    opacity: 0;
    transform: translateX(-12px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
@keyframes ascension-replace-ring {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ascension-replace-ring-reverse {
  to {
    transform: rotate(-360deg);
  }
}
@keyframes ascension-replace-icon {
  0%, 100% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(12deg);
  }
}
@keyframes ascension-replace-star {
  0%, 100% {
    opacity: 0.22;
    transform: scale(0.8);
  }
  50% {
    opacity: 0.72;
    transform: scale(1.25);
  }
}
@keyframes ascension-replace-card-vanish {
  0% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
  55% {
    opacity: 0.42;
    transform: scale(0.92) rotate(-1deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.72) rotate(-4deg);
  }
}
@keyframes ascension-replace-copy-fade {
  to {
    opacity: 0.28;
    transform: translateY(3px);
  }
}
@keyframes ascension-replace-portal-charge {
  from {
    opacity: 0.72;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1.08);
  }
}
@keyframes ascension-replace-mystery-charge {
  from {
    opacity: 0.82;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1.025);
  }
}
@keyframes ascension-replace-question-pulse {
  from {
    opacity: 0.48;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1.08);
  }
}
@keyframes ascension-replace-portal-release {
  0% {
    opacity: 1;
    transform: scale(1.08);
  }
  45% {
    opacity: 1;
    transform: scale(1.24);
  }
  100% {
    opacity: 0.52;
    transform: scale(0.86);
  }
}
@keyframes ascension-replace-result-shell {
  0% {
    opacity: 0.35;
    transform: scale(0.88) rotate(2deg);
  }
  65% {
    opacity: 1;
    transform: scale(1.035) rotate(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes ascension-replace-result-reveal {
  from {
    opacity: 0;
    transform: scale(0.76) rotate(-5deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}
@keyframes ascension-replace-result-copy {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes ascension-level-modal-enter {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.975);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes ascension-level-modal-rise {
  from {
    opacity: 0;
    transform: translateY(9px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes ascension-level-modal-old {
  from {
    opacity: 0;
    transform: translateX(12px) scale(0.94);
  }
  to {
    opacity: 0.78;
    transform: translateX(0) scale(1);
  }
}
@keyframes ascension-level-modal-arrow {
  from {
    opacity: 0;
    transform: scaleX(0.65);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}
@keyframes ascension-level-modal-new {
  0% {
    opacity: 0;
    transform: translateX(-12px) scale(0.82);
  }
  70% {
    opacity: 1;
    transform: translateX(0) scale(1.035);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
body.dark .ascension-page {
  --ascension-primary: #a64fff;
  --ascension-primary-dark: #bd72ff;
  --ascension-primary-soft: rgba(137, 57, 222, 0.13);
  --ascension-text: #f1eef7;
  --ascension-muted: #95909f;
  --ascension-border: #202431;
  --ascension-surface: #0c0f16;
  --ascension-surface-muted: #11151e;
  --ascension-success: #36d570;
  --ascension-success-bg: rgba(25, 157, 73, 0.1);
  --ascension-danger: #ff655d;
  --ascension-danger-bg: rgba(201, 49, 49, 0.1);
  --ascension-shadow: 0 10px 30px rgba(0, 0, 0, 0.23);
}
body.dark .ascension-sidebar-card__header-icon,
body.dark .ascension-sidebar-card .ascension-statistics__icon {
  background: rgba(147, 65, 237, 0.13);
  border-color: rgba(172, 89, 255, 0.15);
}
body.dark .ascension-ranking__item {
  background: linear-gradient(100deg, rgba(19, 22, 31, 0.88), rgba(11, 14, 21, 0.72));
}
body.dark .ascension-ranking__item:hover {
  background: linear-gradient(100deg, rgba(119, 55, 223, 0.15), rgba(17, 18, 27, 0.8));
  border-color: rgba(172, 99, 255, 0.2);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28), 0 0 14px rgba(128, 56, 232, 0.07);
}
body.dark .ascension-ranking__item--current {
  background: linear-gradient(100deg, rgba(118, 51, 224, 0.2), rgba(20, 17, 29, 0.8));
  border-color: rgba(174, 100, 255, 0.22);
}
body.dark .ascension-ranking__avatar {
  background: #0c0f16;
}
body.dark .ascension-ranking__avatar-level {
  border-color: #0c0f16;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 7px rgba(165, 83, 255, 0.22);
}
body.dark .ascension-ranking__progress,
body.dark .ascension-ranking .ascension-statistics__progress {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}
body.dark .ascension-ranking__progress-value {
  background: linear-gradient(90deg, #7734df, #a453f4, #c477ff);
  box-shadow: 0 0 7px rgba(170, 83, 255, 0.35);
}
body.dark .ascension-modal__button--secondary {
  color: #e7e2ee;
  background: #151821;
  border-color: #303544;
}
body.dark .ascension-modal__button--secondary:hover {
  color: #ffffff;
  background: #1c202b;
  border-color: #49405b;
}
body.dark .ascension-hero,
body.dark .ascension-task,
body.dark .ascension-guide,
body.dark .ascension-privileges,
body.dark .ascension-sidebar-card,
body.dark .ascension-summary {
  background: linear-gradient(135deg, #0e1119, #090c12);
}
body.dark .ascension-level__progress,
body.dark .ascension-progress__track {
  background: #080a10;
  border-color: #222735;
}
body.dark .ascension-level__progress-text {
  color: #ddd6e8;
}
body.dark .ascension-card {
  background: linear-gradient(180deg, #11141d, #0a0d13);
  border-color: #34264f;
}
body.dark .ascension-card__replace {
  color: #b969ff;
  background: rgba(16, 12, 24, 0.92);
  border-color: rgba(170, 82, 255, 0.3);
}
body.dark .ascension-card__completed {
  color: #d5cfdd;
  background: rgba(7, 9, 14, 0.84);
}
body.dark .ascension-card__button--secondary, body.dark .ascension-card__button--completed {
  color: #d7cfdf;
  background: #11141d;
  border-color: #272c39;
}
body.dark .ascension-task__refresh,
body.dark .ascension-sidebar-card__button {
  color: #bd75ff;
  background: #10131b;
  border-color: #302343;
}
body.dark .ascension-guide__decoration {
  background: radial-gradient(circle, rgba(132, 49, 221, 0.25), transparent 68%), linear-gradient(135deg, #100d19, #0b0c13);
}
body.dark .ascension-modal__dialog {
  background: radial-gradient(circle at 50% 30%, rgba(116, 41, 210, 0.18), transparent 44%), #0c0f16;
  border-color: #302442;
}
body.dark .ascension-level-modal {
  --level-modal-panel-start: #11131c;
  --level-modal-panel-end: #090b12;
  --level-modal-line: rgba(180, 104, 255, 0.14);
  --level-modal-line-strong: rgba(180, 104, 255, 0.28);
  --level-modal-soft: rgba(154, 75, 239, 0.1);
  --level-modal-reward: rgba(20, 22, 32, 0.72);
  --level-modal-number-start: #ead8ff;
  --level-modal-number-end: #b66cff;
  background: radial-gradient(circle at 50% 20%, rgba(148, 72, 239, 0.19), transparent 32%), radial-gradient(circle at 13% 17%, rgba(191, 119, 255, 0.13) 0 1px, transparent 2px), radial-gradient(circle at 84% 27%, rgba(191, 119, 255, 0.13) 0 1.5px, transparent 2.5px), linear-gradient(145deg, var(--level-modal-panel-start), var(--level-modal-panel-end));
  border-color: var(--level-modal-line-strong);
  box-shadow: 0 38px 110px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(255, 255, 255, 0.025) inset, 0 0 80px rgba(119, 43, 218, 0.08) inset;
}
body.dark .ascension-level-modal__title {
  background: linear-gradient(180deg, #f0ddff 0%, #c482ff 48%, #9850ed 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 5px 17px rgba(165, 81, 249, 0.18));
}
body.dark .ascension-level-modal__stage--new .ascension-level-modal__stage-name {
  color: #c883ff;
}
body.dark .ascension-level-modal__badge-image {
  filter: drop-shadow(0 0 8px rgba(166, 83, 250, 0.12)) drop-shadow(0 15px 21px rgba(0, 0, 0, 0.42));
}
body.dark .ascension-level-modal__badge--new .ascension-level-modal__badge-image {
  filter: drop-shadow(0 0 11px rgba(176, 93, 255, 0.28)) drop-shadow(0 20px 26px rgba(0, 0, 0, 0.48));
}
body.dark .ascension-level-modal__arrow-icon {
  background: linear-gradient(145deg, rgba(160, 75, 246, 0.16), rgba(128, 53, 216, 0.05));
  border-color: rgba(182, 103, 255, 0.2);
}
body.dark .ascension-level-modal__reward strong {
  color: #f1eaf9;
}
body.dark .ascension-level-modal__reward-icon {
  color: #bd78ff;
  background: rgba(157, 72, 237, 0.12);
  border-color: rgba(189, 120, 255, 0.15);
}
body.dark .ascension-level-modal__reward-icon--diamond {
  color: #6ba7ff;
  background: rgba(65, 131, 231, 0.11);
  border-color: rgba(107, 167, 255, 0.14);
}
body.dark .ascension-level-modal__continue {
  box-shadow: 0 14px 31px rgba(91, 27, 180, 0.4), inset 0 1px rgba(255, 255, 255, 0.2);
}
body.dark .ascension-replace-modal {
  --replace-panel: rgba(18, 21, 31, 0.88);
  --replace-panel-strong: #151925;
  --replace-panel-muted: rgba(13, 16, 24, 0.91);
  --replace-line: rgba(188, 112, 255, 0.13);
  --replace-line-strong: rgba(188, 112, 255, 0.26);
  --replace-glow: rgba(161, 78, 243, 0.16);
  --replace-title-start: #f0e4ff;
  --replace-title-end: #bd75ff;
  --replace-mystery-start: #35135e;
  --replace-mystery-end: #0b0712;
  background: radial-gradient(circle at 50% -5%, rgba(155, 72, 244, 0.2), transparent 31%), radial-gradient(circle at 9% 29%, rgba(119, 51, 210, 0.09), transparent 24%), radial-gradient(circle at 92% 32%, rgba(191, 106, 255, 0.09), transparent 25%), linear-gradient(145deg, #11141d 0%, #0b0e15 52%, #100c17 100%);
  border-color: rgba(183, 102, 255, 0.22);
  box-shadow: 0 40px 115px rgba(0, 0, 0, 0.68), 0 0 0 1px rgba(255, 255, 255, 0.022) inset, 0 0 80px rgba(130, 49, 222, 0.065) inset;
}
body.dark .ascension-replace-modal::before {
  border-color: rgba(190, 112, 255, 0.075);
}
body.dark .ascension-replace-modal--free .ascension-replace__cost {
  background: radial-gradient(circle at 12% 20%, rgba(92, 225, 159, 0.08), transparent 42%), linear-gradient(135deg, rgba(31, 158, 93, 0.13), rgba(44, 112, 78, 0.045));
  border-color: rgba(63, 208, 137, 0.17);
}
body.dark .ascension-modal--replace .ascension-modal__close {
  color: #a9a2b2;
  background: rgba(25, 29, 40, 0.82);
  border-color: rgba(194, 119, 255, 0.13);
}
body.dark .ascension-modal--replace .ascension-modal__close:hover {
  color: #d5a9ff;
  background: rgba(151, 68, 229, 0.13);
  border-color: rgba(196, 121, 255, 0.25);
}
body.dark .ascension-modal--replace .ascension-modal__notice {
  color: #c893f7;
  background: rgba(150, 66, 225, 0.085);
  border-color: rgba(184, 105, 255, 0.13);
}
body.dark .ascension-modal--replace .ascension-modal__notice-icon {
  color: #c27cff;
  background: rgba(164, 78, 239, 0.11);
  border-color: rgba(194, 124, 255, 0.14);
}
body.dark .ascension-replace__card {
  background: linear-gradient(145deg, #8f55d4, #291044 52%, #aa6ee8);
  box-shadow: 0 17px 34px rgba(0, 0, 0, 0.43), 0 0 0 1px rgba(255, 255, 255, 0.07) inset;
}
body.dark .ascension-replace__portal-label {
  color: #c084f4;
}
body.dark .ascension-replace__cost {
  background: radial-gradient(circle at 8% 14%, rgba(163, 83, 236, 0.08), transparent 45%), linear-gradient(135deg, rgba(132, 58, 218, 0.13), rgba(99, 42, 147, 0.035));
  border-color: rgba(179, 102, 247, 0.14);
}
body.dark .ascension-replace__cost-free {
  color: #55d895;
}
body.dark .ascension-replace__information-icon {
  background: rgba(160, 74, 236, 0.1);
  border-color: rgba(191, 119, 255, 0.12);
}

@media (max-width: 1050px) {
  .ascension-page__layout {
    grid-template-columns: 1fr;
  }
  .ascension-page__sidebar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 760px) {
  .ascension-level-modal {
    padding: 30px 20px 24px;
    border-radius: 23px;
  }
  .ascension-level-modal::before {
    inset: 6px;
    border-radius: 17px;
  }
  .ascension-level-modal__title {
    font-size: 27px;
  }
  .ascension-level-modal__levels {
    grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
    gap: 5px;
    min-height: 188px;
  }
  .ascension-level-modal__badge {
    width: 122px;
    height: 122px;
  }
  .ascension-level-modal__badge--new {
    width: 152px;
    height: 152px;
  }
  .ascension-level-modal__number {
    font-size: 44px;
  }
  .ascension-level-modal__number--three-digits {
    font-size: 35px;
  }
  .ascension-level-modal__number--four-digits {
    font-size: 27px;
  }
  .ascension-level-modal__badge--new .ascension-level-modal__number {
    font-size: 54px;
  }
  .ascension-level-modal__badge--new .ascension-level-modal__number--three-digits {
    font-size: 43px;
  }
  .ascension-level-modal__badge--new .ascension-level-modal__number--four-digits {
    font-size: 33px;
  }
  .ascension-level-modal__arrow-line {
    display: none;
  }
  .ascension-level-modal__arrow-icon {
    width: 38px;
    height: 38px;
  }
  .ascension-hero {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .ascension-task__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ascension-summary {
    grid-template-columns: 1fr;
  }
  .ascension-summary__item {
    border-right: 0;
    border-bottom: 1px solid var(--ascension-border);
  }
  .ascension-summary__item:last-child {
    border-bottom: 0;
  }
  .ascension-privileges__items {
    grid-template-columns: repeat(2, 1fr);
  }
  .ascension-page__sidebar {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .ascension-level-modal {
    max-height: calc(100vh - 12px);
    padding: 23px 11px 17px;
    border-radius: 19px;
  }
  .ascension-level-modal::before {
    inset: 4px;
    border-radius: 15px;
  }
  .ascension-level-modal__aura {
    top: -330px;
  }
  .ascension-level-modal__ornaments span:nth-child(2),
  .ascension-level-modal__ornaments span:nth-child(4),
  .ascension-level-modal__ornaments span:nth-child(5) {
    display: none;
  }
  .ascension-level-modal__eyebrow {
    gap: 5px;
    margin-bottom: 5px;
    font-size: 8px;
    letter-spacing: 1px;
  }
  .ascension-level-modal__eyebrow svg {
    width: 10px;
    height: 10px;
  }
  .ascension-level-modal__title {
    margin-bottom: 10px;
    font-size: 22px;
    letter-spacing: -0.4px;
  }
  .ascension-level-modal__levels {
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
    gap: 0;
    min-height: 150px;
  }
  .ascension-level-modal__stage {
    gap: 4px;
  }
  .ascension-level-modal__stage-caption {
    min-width: 42px;
    min-height: 18px;
    padding: 2px 7px;
    font-size: 9px;
  }
  .ascension-level-modal__stage-name {
    font-size: 10px;
  }
  .ascension-level-modal__badge {
    width: 102px;
    height: 102px;
  }
  .ascension-level-modal__badge--new {
    width: 122px;
    height: 122px;
  }
  .ascension-level-modal__number {
    min-width: 54px;
    font-size: 35px;
  }
  .ascension-level-modal__number--three-digits {
    font-size: 28px;
    letter-spacing: -2px;
  }
  .ascension-level-modal__number--four-digits {
    font-size: 22px;
    letter-spacing: -2px;
  }
  .ascension-level-modal__badge--new .ascension-level-modal__number {
    min-width: 66px;
    font-size: 43px;
  }
  .ascension-level-modal__badge--new .ascension-level-modal__number--three-digits {
    font-size: 34px;
  }
  .ascension-level-modal__badge--new .ascension-level-modal__number--four-digits {
    font-size: 26px;
  }
  .ascension-level-modal__arrow-icon {
    width: 31px;
    height: 31px;
  }
  .ascension-level-modal__arrow-icon svg {
    width: 17px;
    height: 17px;
  }
  .ascension-level-modal__description {
    margin: 8px 8px 11px;
    font-size: 9px;
  }
  .ascension-level-modal__rewards {
    border-radius: 10px;
  }
  .ascension-level-modal__reward {
    gap: 7px;
    min-height: 58px;
    padding: 8px 7px;
  }
  .ascension-level-modal__reward p {
    min-width: 57px;
  }
  .ascension-level-modal__reward strong {
    font-size: 9px;
  }
  .ascension-level-modal__reward p span {
    font-size: 8px;
  }
  .ascension-level-modal__reward-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }
  .ascension-level-modal__reward-icon svg {
    width: 17px;
    height: 17px;
  }
  .ascension-level-modal__continue {
    width: calc(100% - 24px);
    min-width: 0;
    min-height: 42px;
    margin-top: 13px;
  }
  .ascension-level__badge {
    width: 96px;
    height: 96px;
  }
  .ascension-level__badge-number {
    font-size: 29px;
  }
  .ascension-page {
    padding-top: 10px;
  }
  .ascension-hero {
    padding: 18px 14px;
  }
  .ascension-hero__title {
    font-size: 21px;
  }
  .ascension-level {
    gap: 10px;
  }
  .ascension-level__emblem {
    width: 93px;
    height: 93px;
  }
  .ascension-level__information {
    width: 165px;
  }
  .ascension-task {
    padding: 15px 8px;
  }
  .ascension-task__cards {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .ascension-task__refresh {
    display: none;
  }
  .ascension-card {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
  }
  .ascension-card__media {
    height: 128px;
  }
  .ascension-card__body {
    padding: 9px;
  }
  .ascension-card__manga {
    min-height: auto;
  }
  .ascension-guide {
    grid-template-columns: 1fr;
  }
  .ascension-guide__decoration {
    display: none;
  }
  .ascension-replace {
    margin-top: 17px;
  }
  .ascension-replace__stage {
    grid-template-columns: minmax(92px, 1fr) 64px minmax(92px, 1fr);
    gap: 7px;
    padding: 15px 9px 13px;
  }
  .ascension-replace__card, .ascension-replace__mystery {
    width: 104px;
    max-width: 100%;
  }
  .ascension-replace__portal {
    width: 58px;
    height: 58px;
  }
  .ascension-replace__portal-ring--inner {
    inset: 10px;
  }
  .ascension-replace__portal-ring--inner::before {
    transform: translate(-50%, -50%) translateY(-19px);
  }
  .ascension-replace__portal-ring--inner::after {
    transform: translate(-50%, -50%) translateY(19px);
  }
  .ascension-replace__portal-icon {
    width: 32px;
    height: 32px;
  }
  .ascension-replace__portal-icon svg {
    width: 18px;
    height: 18px;
  }
  .ascension-replace__portal-label {
    display: none;
  }
  .ascension-replace__information {
    grid-template-columns: 1fr 1fr;
  }
  .ascension-replace__cost {
    grid-column: 1/-1;
  }
  .ascension-replace__side-name {
    font-size: 8px;
  }
  .ascension-replace__side-hint {
    max-width: 100px;
  }
  .ascension-replace__mystery > strong {
    font-size: 43px;
  }
  .ascension-modal {
    padding: 7px;
  }
  .ascension-modal__dialog {
    max-height: calc(100vh - 14px);
    padding: 27px 15px 15px;
    border-radius: 19px;
  }
  .ascension-modal__close {
    top: 10px;
    right: 10px;
    width: 33px;
    height: 33px;
  }
  .ascension-modal__title {
    padding: 0 28px;
    font-size: 25px;
  }
  .ascension-modal__subtitle {
    padding: 0 12px;
    font-size: 10px;
  }
  .ascension-modal__notice {
    align-items: flex-start;
  }
  .ascension-modal__actions {
    grid-template-columns: 1fr;
  }
  .ascension-modal__button--primary {
    grid-row: 1;
  }
  .ascension-replace-modal::before {
    inset: 5px;
    border-radius: 15px;
  }
  .ascension-replace-modal__eyebrow {
    margin-bottom: 6px;
    font-size: 9px;
    letter-spacing: 0.15em;
  }
}
@media (max-width: 420px) {
  .ascension-replace__stage {
    grid-template-columns: minmax(76px, 1fr) 48px minmax(76px, 1fr);
    gap: 4px;
    padding-right: 7px;
    padding-left: 7px;
  }
  .ascension-replace__card, .ascension-replace__mystery {
    width: 88px;
    border-radius: 8px;
  }
  .ascension-replace__portal {
    width: 46px;
    height: 46px;
  }
  .ascension-replace__portal-ring--inner {
    display: none;
  }
  .ascension-replace__portal-icon {
    width: 29px;
    height: 29px;
  }
  .ascension-replace__side-caption {
    font-size: 6px;
    letter-spacing: 0.09em;
  }
  .ascension-replace__side-name {
    max-width: 95px;
    font-size: 9px;
  }
  .ascension-replace__side-hint {
    display: none;
  }
  .ascension-replace__information {
    gap: 7px;
  }
  .ascension-replace__balance, .ascension-replace__next {
    padding: 8px;
    gap: 6px;
  }
  .ascension-replace__information-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }
  .ascension-replace__cost-free, .ascension-replace__cost-paid {
    font-size: 16px;
  }
}
@media (max-width: 350px) {
  .ascension-level-modal__badge {
    width: 90px;
    height: 90px;
  }
  .ascension-level-modal__badge--new {
    width: 108px;
    height: 108px;
  }
  .ascension-level-modal__number {
    font-size: 31px;
  }
  .ascension-level-modal__badge--new .ascension-level-modal__number {
    font-size: 38px;
  }
  .ascension-level-modal__stage-name {
    font-size: 9px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ascension-modal--open .ascension-replace-modal,
  .ascension-modal--open .ascension-replace-modal__header,
  .ascension-modal--open .ascension-replace-modal__stars span,
  .ascension-modal--open .ascension-replace__side--current,
  .ascension-modal--open .ascension-replace__portal,
  .ascension-modal--open .ascension-replace__portal-ring,
  .ascension-modal--open .ascension-replace__portal-icon svg,
  .ascension-modal--open .ascension-replace__card,
  .ascension-modal--open .ascension-replace__mystery,
  .ascension-modal--open .ascension-replace__mystery-question,
  .ascension-modal--open .ascension-replace__result-image,
  .ascension-modal--open .ascension-replace__side--future,
  .ascension-modal--open .ascension-replace__mystery-orbit,
  .ascension-modal--open .ascension-replace__information,
  .ascension-modal--open .ascension-modal__notice,
  .ascension-modal--open .ascension-modal__actions,
  .ascension-modal--open .ascension-level-modal,
  .ascension-modal--open .ascension-level-modal__header,
  .ascension-modal--open .ascension-level-modal__stage--old,
  .ascension-modal--open .ascension-level-modal__arrow,
  .ascension-modal--open .ascension-level-modal__stage--new,
  .ascension-modal--open .ascension-level-modal__description,
  .ascension-modal--open .ascension-level-modal__rewards,
  .ascension-modal--open .ascension-level-modal__continue {
    animation: none !important;
  }
  .ascension-replace-modal--resolved .ascension-replace__result-image {
    opacity: 1;
    transform: none;
  }
}
/* ==========================================================================
   Ritual board v3 — полностью новая композиция верхнего блока
   ========================================================================== */
.ascension-task {
  --set-event-accent: #7650d6;
  --set-event-accent-light: #c9b7f7;
  --set-event-deep: #432482;
  --set-event-rgb: 118, 80, 214;
  padding: 18px 20px 26px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(251, 250, 253, 0.98));
  border: 1px solid rgba(78, 62, 108, 0.12);
  border-radius: 18px;
  box-shadow: 0 14px 42px rgba(49, 37, 70, 0.055), inset 0 1px rgba(255, 255, 255, 0.9);
}
.ascension-task::before {
  display: none;
}
.ascension-task--special {
  border-color: rgba(var(--set-event-rgb), 0.18);
  box-shadow: 0 16px 46px rgba(var(--set-event-rgb), 0.075), inset 0 1px rgba(255, 255, 255, 0.95);
}
.ascension-task--special::before {
  display: none;
}
.ascension-task__cards {
  margin-top: 0;
}

.ascension-task--event-single_manga,
.ascension-event-board--single_manga {
  --set-event-accent: #8452d6;
  --set-event-accent-light: #d6c4f4;
  --set-event-deep: #4b297d;
  --set-event-rgb: 132, 82, 214;
}

.ascension-task--event-rank,
.ascension-event-board--rank {
  --set-event-accent: #346fc8;
  --set-event-accent-light: #bad4f5;
  --set-event-deep: #214c8e;
  --set-event-rgb: 52, 111, 200;
}

.ascension-task--event-cursed,
.ascension-event-board--cursed {
  --set-event-accent: #c73d5a;
  --set-event-accent-light: #f1bec9;
  --set-event-deep: #7b2036;
  --set-event-rgb: 199, 61, 90;
}

.ascension-task--event-blessed,
.ascension-event-board--blessed {
  --set-event-accent: #228d70;
  --set-event-accent-light: #bce7da;
  --set-event-deep: #155d4a;
  --set-event-rgb: 34, 141, 112;
}

.ascension-task--event-golden,
.ascension-event-board--golden {
  --set-event-accent: #b57a13;
  --set-event-accent-light: #eed8aa;
  --set-event-deep: #76500d;
  --set-event-rgb: 181, 122, 19;
}

.ascension-ritual-board {
  position: relative;
  margin: 0 0 19px;
  overflow: hidden;
  background: var(--ascension-surface, #fff);
  border: 1px solid rgba(58, 48, 77, 0.1);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(38, 28, 57, 0.045), inset 0 1px rgba(255, 255, 255, 0.86);
}

.ascension-event-board {
  position: relative;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 278px;
  gap: 0;
  min-height: 138px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  align-items: stretch;
  color: var(--ascension-text, #20202b);
  background: linear-gradient(105deg, rgba(var(--set-event-rgb), 0.035), transparent 44%), var(--ascension-surface, #fff);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  isolation: isolate;
}
.ascension-event-board.is-hidden {
  display: none;
}
.ascension-event-board::before {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  left: 0;
  width: auto;
  height: 3px;
  background: linear-gradient(90deg, var(--set-event-accent), rgba(var(--set-event-rgb), 0.18) 62%, transparent);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  content: "";
  transform: none;
  pointer-events: none;
}
.ascension-event-board::after {
  display: none;
}
.ascension-event-board__shine {
  display: none;
}
.ascension-event-board__mark {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 9px;
  min-width: 0;
  padding: 18px 12px 15px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--set-event-accent);
  background: radial-gradient(circle at 50% 38%, rgba(var(--set-event-rgb), 0.13), transparent 52%), rgba(var(--set-event-rgb), 0.055);
  border-right: 1px solid rgba(var(--set-event-rgb), 0.12);
}
.ascension-event-board__mark::after {
  position: absolute;
  right: -5px;
  top: 50%;
  width: 9px;
  height: 9px;
  background: var(--ascension-surface, #fff);
  border-top: 1px solid rgba(var(--set-event-rgb), 0.14);
  border-right: 1px solid rgba(var(--set-event-rgb), 0.14);
  content: "";
  transform: translateY(-50%) rotate(45deg);
}
.ascension-event-board__mark small {
  color: rgba(var(--set-event-rgb), 0.68);
  font-size: 7px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  letter-spacing: 1.15px;
  text-transform: uppercase;
}
.ascension-event-board__mark-orbit {
  position: absolute;
  top: 42px;
  left: 50%;
  width: 68px;
  height: 68px;
  border: 1px solid rgba(var(--set-event-rgb), 0.16);
  border-radius: 50%;
  transform: translateX(-50%);
}
.ascension-event-board__mark-orbit::before, .ascension-event-board__mark-orbit::after {
  position: absolute;
  border-radius: 50%;
  content: "";
}
.ascension-event-board__mark-orbit::before {
  inset: 7px;
  border: 1px dashed rgba(var(--set-event-rgb), 0.22);
}
.ascension-event-board__mark-orbit::after {
  top: 50%;
  left: -3px;
  width: 5px;
  height: 5px;
  background: var(--set-event-accent);
  box-shadow: 0 0 10px rgba(var(--set-event-rgb), 0.4);
  transform: translateY(-50%);
}
.ascension-event-board__sigil {
  position: relative;
  z-index: 3;
  display: grid;
  width: 51px;
  height: 51px;
  color: #fff;
  font-size: 22px;
  place-items: center;
  background: linear-gradient(145deg, var(--set-event-accent), var(--set-event-deep));
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 15px;
  box-shadow: 0 9px 20px rgba(var(--set-event-rgb), 0.23), inset 0 1px rgba(255, 255, 255, 0.24);
  transform: rotate(45deg);
}
.ascension-event-board__sigil::before {
  display: none;
}
.ascension-event-board__sigil::after {
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 10px;
  content: "";
}
.ascension-event-board__sigil.js-ascension-event-icon {
  line-height: 1;
  text-indent: 0;
}
.ascension-event-board__sigil > *, .ascension-event-board__sigil {
  text-shadow: 0 1px 2px rgba(22, 14, 38, 0.22);
}
.ascension-event-board__content {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  padding: 24px 28px;
  justify-content: center;
  flex-direction: column;
}
.ascension-event-board__eyebrow {
  display: flex;
  gap: 8px;
  margin: 0 0 7px;
  align-items: center;
  color: var(--set-event-accent);
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 1.7px;
  text-transform: uppercase;
}
.ascension-event-board__eyebrow::before {
  width: 18px;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: 0.55;
}
.ascension-event-board__title {
  display: block;
  margin: 0 0 7px;
  color: var(--ascension-text, #20202b);
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.5px;
}
.ascension-event-board__description {
  max-width: 640px;
  margin: 0;
  color: var(--ascension-muted, #777482);
  font-size: 11px;
  line-height: 1.55;
}
.ascension-event-board__rule {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  margin: 18px;
  padding: 16px 17px 15px 20px;
  justify-content: center;
  flex-direction: column;
  background: linear-gradient(135deg, rgba(var(--set-event-rgb), 0.075), rgba(var(--set-event-rgb), 0.025));
  border: 1px solid rgba(var(--set-event-rgb), 0.15);
  border-radius: 13px;
}
.ascension-event-board__rule::before {
  position: absolute;
  top: 15px;
  bottom: 15px;
  left: -1px;
  width: 3px;
  background: var(--set-event-accent);
  border-radius: 0 5px 5px 0;
  content: "";
}
.ascension-event-board__rule small {
  margin-top: 7px;
  color: var(--ascension-muted, #777482);
  font-size: 8px;
  line-height: 1.4;
}
.ascension-event-board__rule-label {
  display: block;
  margin-bottom: 6px;
  color: rgba(var(--set-event-rgb), 0.76);
  font-size: 7px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 1.25px;
  text-transform: uppercase;
}
.ascension-event-board__bonus {
  display: block;
  max-width: 100%;
  min-height: 0;
  padding: 0;
  color: var(--set-event-deep);
  font-size: 12px;
  font-weight: 780;
  line-height: 1.35;
  text-align: left;
  letter-spacing: 0;
  white-space: normal;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

/*
 * Цифра внутри ромба компенсирует поворот самого контейнера.
 * Для текстового символа transform применяется напрямую.
 */
.ascension-event-board__sigil {
  color: transparent;
}
.ascension-event-board__sigil::after {
  color: #fff;
}

.ascension-event-board__sigil::before {
  display: grid;
  position: absolute;
  inset: 0;
  color: #fff;
  font-size: 22px;
  place-items: center;
  content: var(--set-event-symbol, "✦");
  transform: rotate(-45deg);
}

.ascension-event-board--single_manga {
  --set-event-symbol: "◈";
}

.ascension-event-board--rank {
  --set-event-symbol: "◆";
}

.ascension-event-board--cursed {
  --set-event-symbol: "☠";
}

.ascension-event-board--blessed {
  --set-event-symbol: "✧";
}

.ascension-event-board--golden {
  --set-event-symbol: "♛";
}

.ascension-ritual-toolbar {
  display: flex;
  min-height: 82px;
  margin: 0;
  padding: 14px 18px 14px 20px;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, rgba(var(--set-event-rgb), 0.025), transparent 48%), rgba(249, 248, 251, 0.72);
  border-top: 1px solid rgba(58, 48, 77, 0.085);
}
.ascension-ritual-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ascension-ritual-toolbar__replace-all {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 12px;
  color: #7137e8;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 241, 255, 0.98));
  border: 1px solid rgba(113, 55, 232, 0.27);
  border-radius: 9px;
  box-shadow: 0 4px 12px rgba(90, 42, 170, 0.08);
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.ascension-ritual-toolbar__replace-all svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}
.ascension-ritual-toolbar__replace-all strong {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  color: #fff;
  font-size: 9px;
  background: linear-gradient(135deg, #7137e8, #934cf4);
  border-radius: 5px;
}
.ascension-ritual-toolbar__replace-all:hover:not(:disabled) {
  border-color: rgba(113, 55, 232, 0.55);
  box-shadow: 0 6px 16px rgba(90, 42, 170, 0.14);
  transform: translateY(-1px);
}
.ascension-ritual-toolbar__replace-all:disabled, .ascension-ritual-toolbar__replace-all.is-loading {
  cursor: default;
  opacity: 0.55;
  pointer-events: none;
}
.ascension-ritual-toolbar__heading {
  display: flex;
  gap: 13px;
  min-width: 0;
  align-items: center;
}
.ascension-ritual-toolbar__icon {
  display: grid;
  width: 39px;
  height: 39px;
  margin: 0;
  flex: 0 0 39px;
  color: var(--set-event-accent);
  place-items: center;
  background: rgba(var(--set-event-rgb), 0.075);
  border: 1px solid rgba(var(--set-event-rgb), 0.13);
  border-radius: 11px;
}
.ascension-ritual-toolbar__icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
}
.ascension-ritual-toolbar__eyebrow {
  display: block;
  margin-bottom: 3px;
  color: var(--ascension-muted, #777482);
  font-size: 7px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 1.25px;
  text-transform: uppercase;
}
.ascension-ritual-toolbar__title {
  margin: 0;
  color: var(--ascension-text, #20202b);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.3px;
}
.ascension-ritual-toolbar__progress {
  display: grid;
  grid-template-columns: auto auto;
  gap: 1px 13px;
  min-width: 202px;
  min-height: 0;
  margin: 0;
  padding: 3px 4px 3px 22px;
  align-items: center;
  color: var(--ascension-text, #20202b);
  background: transparent;
  border: 0;
  border-left: 1px solid rgba(58, 48, 77, 0.11);
  border-radius: 0;
  box-shadow: none;
}
.ascension-ritual-toolbar__progress strong {
  grid-row: 1/3;
  grid-column: 2;
  display: flex;
  gap: 4px;
  align-items: baseline;
  justify-content: flex-end;
  color: var(--set-event-accent);
  font-size: 27px;
  font-weight: 790;
  line-height: 1;
  letter-spacing: -0.8px;
}
.ascension-ritual-toolbar__progress strong small {
  color: var(--ascension-muted, #777482);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
}
.ascension-ritual-toolbar__progress-label {
  color: var(--ascension-muted, #777482);
  font-size: 7px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.ascension-ritual-toolbar__remaining {
  color: var(--ascension-muted, #777482);
  font-size: 9px;
  line-height: 1.2;
}
.ascension-ritual-toolbar__remaining b {
  color: var(--ascension-text, #20202b);
  font-weight: 750;
}

.ascension-task:not(.ascension-task--special) .ascension-ritual-board .ascension-ritual-toolbar {
  border-top: 0;
}

body.dark .ascension-ritual-toolbar__replace-all {
  color: #ca91ff;
  background: linear-gradient(180deg, rgba(29, 25, 38, 0.98), rgba(18, 18, 25, 0.98));
  border-color: rgba(174, 96, 255, 0.3);
}
body.dark .ascension-task {
  background: linear-gradient(180deg, rgba(28, 26, 34, 0.98), rgba(22, 21, 27, 0.98));
  border-color: rgba(255, 255, 255, 0.075);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22), inset 0 1px rgba(255, 255, 255, 0.025);
}
body.dark .ascension-task--special {
  border-color: rgba(var(--set-event-rgb), 0.24);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.25), 0 0 34px rgba(var(--set-event-rgb), 0.045), inset 0 1px rgba(255, 255, 255, 0.025);
}
body.dark .ascension-ritual-board {
  background: #201e26;
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 11px 28px rgba(0, 0, 0, 0.18), inset 0 1px rgba(255, 255, 255, 0.025);
}
body.dark .ascension-event-board {
  color: var(--ascension-text);
  background: linear-gradient(105deg, rgba(var(--set-event-rgb), 0.09), transparent 48%), #201e26;
}
body.dark .ascension-event-board__mark {
  background: radial-gradient(circle at 50% 38%, rgba(var(--set-event-rgb), 0.19), transparent 53%), rgba(var(--set-event-rgb), 0.075);
  border-right-color: rgba(var(--set-event-rgb), 0.16);
}
body.dark .ascension-event-board__mark::after {
  background: #201e26;
  border-color: rgba(var(--set-event-rgb), 0.17);
}
body.dark .ascension-event-board__title {
  color: var(--ascension-text);
}
body.dark .ascension-event-board__rule {
  background: linear-gradient(135deg, rgba(var(--set-event-rgb), 0.14), rgba(var(--set-event-rgb), 0.045));
  border-color: rgba(var(--set-event-rgb), 0.19);
}
body.dark .ascension-event-board__bonus {
  color: var(--set-event-accent-light);
}
body.dark .ascension-ritual-toolbar {
  background: linear-gradient(90deg, rgba(var(--set-event-rgb), 0.055), transparent 52%), rgba(16, 15, 20, 0.28);
  border-top-color: rgba(255, 255, 255, 0.065);
}
body.dark .ascension-ritual-toolbar__progress {
  border-left-color: rgba(255, 255, 255, 0.08);
}

@media only screen and (max-width: 920px) {
  .ascension-event-board {
    grid-template-columns: 96px minmax(0, 1fr) 230px;
  }
  .ascension-event-board__content {
    padding: 21px 20px;
  }
  .ascension-event-board__rule {
    margin: 14px;
    padding-right: 13px;
    padding-left: 17px;
  }
}
@media only screen and (max-width: 720px) {
  .ascension-task {
    padding: 12px 12px 22px;
    border-radius: 15px;
  }
  .ascension-ritual-board {
    margin-bottom: 14px;
    border-radius: 14px;
  }
  .ascension-event-board {
    grid-template-columns: 78px minmax(0, 1fr);
    min-height: 0;
  }
  .ascension-event-board__mark {
    grid-row: 1;
    grid-column: 1;
    padding: 16px 8px;
  }
  .ascension-event-board__mark small {
    display: none;
  }
  .ascension-event-board__mark::after {
    display: none;
  }
  .ascension-event-board__mark-orbit {
    top: 22px;
    width: 58px;
    height: 58px;
  }
  .ascension-event-board__sigil {
    width: 43px;
    height: 43px;
    border-radius: 13px;
  }
  .ascension-event-board__sigil::before {
    font-size: 18px;
  }
  .ascension-event-board__content {
    grid-row: 1;
    grid-column: 2;
    padding: 18px 16px;
  }
  .ascension-event-board__title {
    font-size: 20px;
  }
  .ascension-event-board__description {
    font-size: 10px;
  }
  .ascension-event-board__rule {
    grid-row: 2;
    grid-column: 1/-1;
    margin: 0 11px 11px;
    padding: 12px 14px 12px 17px;
  }
  .ascension-event-board__rule small {
    margin-top: 4px;
  }
  .ascension-ritual-toolbar {
    min-height: 72px;
    padding: 12px 14px;
  }
  .ascension-ritual-toolbar__icon {
    width: 35px;
    height: 35px;
    flex-basis: 35px;
  }
  .ascension-ritual-toolbar__title {
    font-size: 16px;
  }
  .ascension-ritual-toolbar__progress {
    min-width: 172px;
    padding-left: 14px;
  }
  .ascension-ritual-toolbar__progress strong {
    font-size: 23px;
  }
}
@media only screen and (max-width: 520px) {
  .ascension-ritual-toolbar {
    gap: 12px;
    align-items: stretch;
    flex-direction: column;
  }
  .ascension-ritual-toolbar__actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
  }
  .ascension-ritual-toolbar__replace-all {
    width: 100%;
  }
  .ascension-ritual-toolbar__progress {
    grid-template-columns: 1fr auto;
    width: 100%;
    min-width: 0;
    padding: 10px 0 0;
    border-top: 1px solid rgba(58, 48, 77, 0.09);
    border-left: 0;
  }
  .ascension-ritual-toolbar__progress strong {
    grid-row: 1/3;
    grid-column: 2;
  }
  body.dark .ascension-ritual-toolbar__progress {
    border-top-color: rgba(255, 255, 255, 0.07);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ascension-event-board__mark-orbit,
  .ascension-event-board__sigil {
    animation: none !important;
  }
}
/* ==========================================================================
   Особые наборы Возвышения
   ========================================================================== */
.ascension-task--event-single_manga,
.ascension-set-event--single_manga,
.ascension-set-event-reveal--single_manga {
  --set-event-accent: #9b5cff;
  --set-event-accent-light: #d6bcff;
  --set-event-deep: #3d176d;
  --set-event-rgb: 155, 92, 255;
  --set-event-symbol: "◈";
}

.ascension-task--event-rank,
.ascension-set-event--rank,
.ascension-set-event-reveal--rank {
  --set-event-accent: #3b82f6;
  --set-event-accent-light: #b8d7ff;
  --set-event-deep: #123f88;
  --set-event-rgb: 59, 130, 246;
  --set-event-symbol: "◆";
}

.ascension-task--event-cursed,
.ascension-set-event--cursed,
.ascension-set-event-reveal--cursed {
  --set-event-accent: #e33e5c;
  --set-event-accent-light: #ffb3c0;
  --set-event-deep: #6f1026;
  --set-event-rgb: 227, 62, 92;
  --set-event-symbol: "☠";
}

.ascension-task--event-blessed,
.ascension-set-event--blessed,
.ascension-set-event-reveal--blessed {
  --set-event-accent: #20b889;
  --set-event-accent-light: #a9f5dc;
  --set-event-deep: #0b624a;
  --set-event-rgb: 32, 184, 137;
  --set-event-symbol: "✧";
}

.ascension-task--event-golden,
.ascension-set-event--golden,
.ascension-set-event-reveal--golden {
  --set-event-accent: #d99a1f;
  --set-event-accent-light: #ffe28a;
  --set-event-deep: #704508;
  --set-event-rgb: 217, 154, 31;
  --set-event-symbol: "♛";
}

.ascension-task--special {
  position: relative;
  isolation: isolate;
  border-color: rgba(var(--set-event-rgb), 0.34);
  box-shadow: 0 18px 48px rgba(var(--set-event-rgb), 0.1), inset 0 1px rgba(255, 255, 255, 0.7);
}
.ascension-task--special::before {
  position: absolute;
  z-index: -1;
  top: -180px;
  left: 50%;
  width: 720px;
  height: 330px;
  background: radial-gradient(ellipse, rgba(var(--set-event-rgb), 0.12), transparent 68%);
  content: "";
  transform: translateX(-50%);
  pointer-events: none;
}

.ascension-set-event {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  min-height: 92px;
  margin: 18px 20px 0;
  padding: 16px 18px;
  overflow: hidden;
  align-items: center;
  color: #fff;
  background: linear-gradient(112deg, rgba(var(--set-event-rgb), 0.97), var(--set-event-deep));
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(var(--set-event-rgb), 0.22), inset 0 1px rgba(255, 255, 255, 0.24);
}
.ascension-set-event.is-hidden {
  display: none;
}
.ascension-set-event::before, .ascension-set-event::after {
  position: absolute;
  content: "";
  pointer-events: none;
}
.ascension-set-event::before {
  inset: 0;
  background: radial-gradient(circle at 10% 25%, rgba(255, 255, 255, 0.2), transparent 23%), repeating-linear-gradient(125deg, transparent 0 24px, rgba(255, 255, 255, 0.025) 25px 26px);
}
.ascension-set-event::after {
  top: 50%;
  right: -42px;
  width: 155px;
  height: 155px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255, 255, 255, 0.035), 0 0 0 45px rgba(255, 255, 255, 0.025);
  transform: translateY(-50%);
}
.ascension-set-event__shine {
  position: absolute;
  z-index: 1;
  top: -40%;
  bottom: -40%;
  left: -35%;
  width: 24%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: skewX(-18deg);
  animation: ascension-event-banner-shine 5.8s ease-in-out infinite;
  pointer-events: none;
}
.ascension-set-event__sigil {
  position: relative;
  z-index: 2;
  display: grid;
  width: 55px;
  height: 55px;
  color: #fff;
  font-size: 25px;
  place-items: center;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.05) 62%, transparent 64%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.14), 0 0 22px rgba(255, 255, 255, 0.1);
}
.ascension-set-event__sigil::before {
  position: absolute;
  inset: -5px;
  border: 1px dashed rgba(255, 255, 255, 0.28);
  border-radius: inherit;
  content: "";
  animation: ascension-event-ring 13s linear infinite;
}
.ascension-set-event__content {
  position: relative;
  z-index: 2;
  min-width: 0;
}
.ascension-set-event__eyebrow {
  display: block;
  margin-bottom: 3px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.9px;
  text-transform: uppercase;
}
.ascension-set-event__title {
  display: block;
  margin-bottom: 4px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.15px;
}
.ascension-set-event__description {
  max-width: 650px;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  line-height: 1.5;
}
.ascension-set-event__bonus {
  position: relative;
  z-index: 2;
  display: inline-flex;
  max-width: 220px;
  min-height: 34px;
  padding: 8px 12px;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  letter-spacing: 0.3px;
  background: rgba(8, 8, 18, 0.23);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.ascension-summary__reward-modifier {
  display: inline-flex;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 5px;
  padding: 4px 8px;
  color: #a76d00;
  font-size: 8px;
  font-weight: 800;
  line-height: 1.2;
  background: rgba(228, 164, 38, 0.1);
  border: 1px solid rgba(228, 164, 38, 0.2);
  border-radius: 999px;
}
.ascension-summary__reward-modifier.is-hidden {
  display: none;
}

.ascension-level-modal__event-bonus {
  display: inline-flex;
  gap: 7px;
  margin: 0 auto 14px;
  padding: 7px 12px;
  align-items: center;
  color: #ffd476;
  font-size: 9px;
  letter-spacing: 0.4px;
  background: rgba(227, 164, 47, 0.1);
  border: 1px solid rgba(255, 213, 123, 0.2);
  border-radius: 999px;
}
.ascension-level-modal__event-bonus.is-hidden {
  display: none;
}
.ascension-level-modal__event-bonus > span {
  animation: ascension-event-bonus-star 1.8s ease-in-out infinite;
}

.ascension-set-event-reveal {
  --set-event-accent: #8b5cf6;
  --set-event-accent-light: #d7c5ff;
  --set-event-deep: #31145f;
  --set-event-rgb: 139, 92, 246;
  z-index: 1325;
  overflow: hidden;
  color: #fff;
}
.ascension-set-event-reveal__backdrop {
  background: radial-gradient(circle at 50% 48%, rgba(var(--set-event-rgb), 0.29), transparent 34%), radial-gradient(circle at 50% 50%, #14101e, #040509 72%);
  -webkit-backdrop-filter: blur(11px);
          backdrop-filter: blur(11px);
}
.ascension-set-event-reveal__cosmos {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.ascension-set-event-reveal__cosmos::before, .ascension-set-event-reveal__cosmos::after {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(var(--set-event-rgb), 0.14);
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%);
}
.ascension-set-event-reveal__cosmos::before {
  width: min(760px, 88vw);
  height: min(760px, 88vw);
  box-shadow: 0 0 0 70px rgba(var(--set-event-rgb), 0.025), 0 0 0 140px rgba(var(--set-event-rgb), 0.018);
}
.ascension-set-event-reveal__cosmos::after {
  width: min(510px, 64vw);
  height: min(510px, 64vw);
  border-style: dashed;
  animation: ascension-event-ring 36s linear infinite reverse;
}
.ascension-set-event-reveal__cosmos > span {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--set-event-accent-light);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--set-event-accent);
  opacity: 0;
  animation: ascension-event-star-drift 4.5s ease-in-out infinite;
}
.ascension-set-event-reveal__cosmos > span:nth-child(1) {
  top: 12%;
  left: 8%;
  animation-delay: -0.4s;
}
.ascension-set-event-reveal__cosmos > span:nth-child(2) {
  top: 25%;
  left: 20%;
  animation-delay: -2.1s;
}
.ascension-set-event-reveal__cosmos > span:nth-child(3) {
  top: 72%;
  left: 13%;
  animation-delay: -1.2s;
}
.ascension-set-event-reveal__cosmos > span:nth-child(4) {
  top: 88%;
  left: 29%;
  animation-delay: -3.4s;
}
.ascension-set-event-reveal__cosmos > span:nth-child(5) {
  top: 9%;
  left: 41%;
  animation-delay: -2.8s;
}
.ascension-set-event-reveal__cosmos > span:nth-child(6) {
  top: 83%;
  left: 48%;
  animation-delay: -0.8s;
}
.ascension-set-event-reveal__cosmos > span:nth-child(7) {
  top: 15%;
  left: 67%;
  animation-delay: -1.7s;
}
.ascension-set-event-reveal__cosmos > span:nth-child(8) {
  top: 35%;
  left: 88%;
  animation-delay: -3.8s;
}
.ascension-set-event-reveal__cosmos > span:nth-child(9) {
  top: 69%;
  left: 91%;
  animation-delay: -2.4s;
}
.ascension-set-event-reveal__cosmos > span:nth-child(10) {
  top: 90%;
  left: 76%;
  animation-delay: -1s;
}
.ascension-set-event-reveal__cosmos > span:nth-child(11) {
  top: 53%;
  left: 5%;
  animation-delay: -3s;
}
.ascension-set-event-reveal__cosmos > span:nth-child(12) {
  top: 6%;
  left: 91%;
  animation-delay: -0.2s;
}
.ascension-set-event-reveal__dialog {
  position: relative;
  z-index: 3;
  width: min(560px, 100vw - 32px);
  max-height: calc(100vh - 32px);
  padding: 44px 42px 32px;
  overflow: hidden auto;
  text-align: center;
  background: linear-gradient(160deg, rgba(27, 24, 38, 0.98), rgba(8, 9, 14, 0.99));
  border: 1px solid rgba(var(--set-event-rgb), 0.44);
  border-radius: 27px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 30px 100px rgba(0, 0, 0, 0.62), 0 0 80px rgba(var(--set-event-rgb), 0.22), inset 0 1px rgba(255, 255, 255, 0.08);
  opacity: 0;
  transform: translateY(22px) scale(0.9);
}
.ascension-set-event-reveal__dialog::before, .ascension-set-event-reveal__dialog::after {
  position: absolute;
  right: 22px;
  left: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--set-event-rgb), 0.72), transparent);
  content: "";
}
.ascension-set-event-reveal__dialog::before {
  top: 13px;
}
.ascension-set-event-reveal__dialog::after {
  bottom: 13px;
}
.ascension-set-event-reveal__flare {
  position: absolute;
  top: -210px;
  left: 50%;
  width: 460px;
  height: 420px;
  background: radial-gradient(circle, rgba(var(--set-event-rgb), 0.28), transparent 67%);
  content: "";
  transform: translateX(-50%);
  pointer-events: none;
}
.ascension-set-event-reveal__ring {
  position: absolute;
  top: 112px;
  left: 50%;
  border: 1px solid rgba(var(--set-event-rgb), 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.ascension-set-event-reveal__ring--outer {
  width: 158px;
  height: 158px;
  border-style: dashed;
  animation: ascension-event-ring 17s linear infinite;
}
.ascension-set-event-reveal__ring--inner {
  width: 132px;
  height: 132px;
  animation: ascension-event-ring 11s linear infinite reverse;
}
.ascension-set-event-reveal__ring--inner::before, .ascension-set-event-reveal__ring--inner::after {
  position: absolute;
  width: 7px;
  height: 7px;
  background: var(--set-event-accent-light);
  border-radius: 50%;
  box-shadow: 0 0 15px var(--set-event-accent);
  content: "";
}
.ascension-set-event-reveal__ring--inner::before {
  top: -4px;
  left: 50%;
}
.ascension-set-event-reveal__ring--inner::after {
  right: -4px;
  bottom: 28px;
}
.ascension-set-event-reveal__header {
  position: relative;
  z-index: 2;
}
.ascension-set-event-reveal__eyebrow {
  display: inline-flex;
  margin-bottom: 15px;
  color: var(--set-event-accent-light);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}
.ascension-set-event-reveal__sigil {
  position: relative;
  display: grid;
  width: 92px;
  height: 92px;
  margin: 0 auto 19px;
  place-items: center;
}
.ascension-set-event-reveal__sigil strong {
  position: relative;
  z-index: 3;
  display: grid;
  width: 66px;
  height: 66px;
  color: #fff;
  font-size: 34px;
  line-height: 1;
  place-items: center;
  text-shadow: 0 0 20px var(--set-event-accent), 0 2px 3px rgba(0, 0, 0, 0.4);
  background: radial-gradient(circle, rgba(var(--set-event-rgb), 0.42), rgba(var(--set-event-rgb), 0.09) 65%, transparent 67%);
  border: 1px solid rgba(var(--set-event-rgb), 0.52);
  border-radius: 50%;
  box-shadow: inset 0 0 25px rgba(var(--set-event-rgb), 0.18), 0 0 38px rgba(var(--set-event-rgb), 0.24);
}
.ascension-set-event-reveal__sigil-aura {
  position: absolute;
  inset: -34px;
  background: radial-gradient(circle, rgba(var(--set-event-rgb), 0.25), transparent 66%);
  border-radius: 50%;
  animation: ascension-event-sigil-aura 2.3s ease-in-out infinite;
}
.ascension-set-event-reveal__arrival {
  display: block;
  margin-bottom: 7px;
  color: rgba(255, 255, 255, 0.46);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.ascension-set-event-reveal__title {
  margin: 0 0 10px;
  color: #fff;
  font-size: clamp(27px, 5vw, 38px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.8px;
  text-shadow: 0 0 28px rgba(var(--set-event-rgb), 0.28);
}
.ascension-set-event-reveal__description {
  max-width: 430px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.64);
  font-size: 12px;
  line-height: 1.65;
}
.ascension-set-event-reveal__bonus {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 4px;
  margin: 22px 0 11px;
  padding: 12px 16px;
  flex-direction: column;
  background: linear-gradient(90deg, rgba(var(--set-event-rgb), 0.05), rgba(var(--set-event-rgb), 0.17), rgba(var(--set-event-rgb), 0.05));
  border-top: 1px solid rgba(var(--set-event-rgb), 0.2);
  border-bottom: 1px solid rgba(var(--set-event-rgb), 0.2);
}
.ascension-set-event-reveal__bonus span {
  color: rgba(255, 255, 255, 0.4);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.ascension-set-event-reveal__bonus strong {
  color: var(--set-event-accent-light);
  font-size: 12px;
  letter-spacing: 0.2px;
}
.ascension-set-event-reveal__chance {
  position: relative;
  z-index: 2;
  margin: 0 0 19px;
  color: rgba(255, 255, 255, 0.34);
  font-size: 8px;
  line-height: 1.4;
}
.ascension-set-event-reveal__continue {
  position: relative;
  z-index: 2;
  display: inline-flex;
  gap: 10px;
  min-width: 230px;
  min-height: 45px;
  padding: 11px 20px;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--set-event-accent), var(--set-event-deep));
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(var(--set-event-rgb), 0.24), inset 0 1px rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}
.ascension-set-event-reveal__continue svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}
.ascension-set-event-reveal__continue:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 17px 38px rgba(var(--set-event-rgb), 0.31), inset 0 1px rgba(255, 255, 255, 0.24);
}
.ascension-set-event-reveal__continue:hover svg {
  transform: translateX(3px);
}
.ascension-set-event-reveal__continue:active {
  transform: translateY(0);
}
.ascension-set-event-reveal.ascension-modal--open .ascension-set-event-reveal__backdrop {
  animation: ascension-event-backdrop-enter 0.55s ease-out both;
}
.ascension-set-event-reveal.ascension-modal--open .ascension-set-event-reveal__dialog {
  animation: ascension-event-dialog-enter 0.72s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ascension-set-event-reveal.ascension-modal--open .ascension-set-event-reveal__sigil {
  animation: ascension-event-sigil-enter 0.72s 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ascension-set-event-reveal.ascension-modal--open .ascension-set-event-reveal__arrival,
.ascension-set-event-reveal.ascension-modal--open .ascension-set-event-reveal__title,
.ascension-set-event-reveal.ascension-modal--open .ascension-set-event-reveal__description,
.ascension-set-event-reveal.ascension-modal--open .ascension-set-event-reveal__bonus,
.ascension-set-event-reveal.ascension-modal--open .ascension-set-event-reveal__chance,
.ascension-set-event-reveal.ascension-modal--open .ascension-set-event-reveal__continue {
  animation: ascension-event-content-enter 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ascension-set-event-reveal.ascension-modal--open .ascension-set-event-reveal__arrival {
  animation-delay: 0.32s;
}
.ascension-set-event-reveal.ascension-modal--open .ascension-set-event-reveal__title {
  animation-delay: 0.38s;
}
.ascension-set-event-reveal.ascension-modal--open .ascension-set-event-reveal__description {
  animation-delay: 0.44s;
}
.ascension-set-event-reveal.ascension-modal--open .ascension-set-event-reveal__bonus {
  animation-delay: 0.5s;
}
.ascension-set-event-reveal.ascension-modal--open .ascension-set-event-reveal__chance {
  animation-delay: 0.56s;
}
.ascension-set-event-reveal.ascension-modal--open .ascension-set-event-reveal__continue {
  animation-delay: 0.61s;
}

.ascension-task.is-event-arriving .ascension-card {
  animation: ascension-event-card-arrive 0.68s var(--event-card-delay, 0ms) cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.dark .ascension-task--special {
  border-color: rgba(var(--set-event-rgb), 0.38);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24), 0 0 36px rgba(var(--set-event-rgb), 0.08), inset 0 1px rgba(255, 255, 255, 0.025);
}
body.dark .ascension-summary__reward-modifier {
  color: #ffd378;
  background: rgba(228, 164, 38, 0.09);
  border-color: rgba(228, 164, 38, 0.18);
}

@keyframes ascension-event-banner-shine {
  0%, 62% {
    left: -35%;
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  88%, 100% {
    left: 125%;
    opacity: 0;
  }
}
@keyframes ascension-event-ring {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.ascension-set-event__sigil::before {
  animation-name: ascension-event-small-ring;
}

@keyframes ascension-event-small-ring {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes ascension-event-backdrop-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes ascension-event-dialog-enter {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(28px) scale(0.86);
  }
  58% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(-3px) scale(1.015);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}
@keyframes ascension-event-sigil-enter {
  from {
    opacity: 0;
    transform: scale(0.35) rotate(-55deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}
@keyframes ascension-event-content-enter {
  from {
    opacity: 0;
    transform: translateY(11px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes ascension-event-sigil-aura {
  0%, 100% {
    opacity: 0.56;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.09);
  }
}
@keyframes ascension-event-star-drift {
  0%, 100% {
    opacity: 0.1;
    transform: translateY(8px) scale(0.75);
  }
  50% {
    opacity: 0.95;
    transform: translateY(-8px) scale(1.3);
  }
}
@keyframes ascension-event-card-arrive {
  0% {
    opacity: 0;
    filter: brightness(1.8) blur(5px);
    transform: translateY(22px) scale(0.92);
  }
  60% {
    opacity: 1;
    filter: brightness(1.2) blur(0);
    transform: translateY(-3px) scale(1.015);
  }
  100% {
    opacity: 1;
    filter: brightness(1) blur(0);
    transform: translateY(0) scale(1);
  }
}
@keyframes ascension-event-bonus-star {
  0%, 100% {
    opacity: 0.6;
    transform: scale(0.85) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.15) rotate(45deg);
  }
}
@media only screen and (max-width: 720px) {
  .ascension-set-event {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 11px;
    margin: 13px 12px 0;
    padding: 13px;
  }
  .ascension-set-event__sigil {
    width: 45px;
    height: 45px;
    font-size: 20px;
  }
  .ascension-set-event__title {
    font-size: 15px;
  }
  .ascension-set-event__description {
    font-size: 10px;
  }
  .ascension-set-event__bonus {
    grid-column: 1/-1;
    width: 100%;
    max-width: none;
    min-height: 30px;
    padding: 6px 10px;
  }
  .ascension-set-event-reveal {
    padding: 10px;
  }
  .ascension-set-event-reveal__dialog {
    width: min(520px, 100vw - 20px);
    max-height: calc(100vh - 20px);
    padding: 34px 21px 24px;
    border-radius: 21px;
  }
  .ascension-set-event-reveal__sigil {
    width: 80px;
    height: 80px;
    margin-bottom: 15px;
  }
  .ascension-set-event-reveal__sigil strong {
    width: 58px;
    height: 58px;
    font-size: 29px;
  }
  .ascension-set-event-reveal__ring {
    top: 91px;
  }
  .ascension-set-event-reveal__ring--outer {
    width: 138px;
    height: 138px;
  }
  .ascension-set-event-reveal__ring--inner {
    width: 114px;
    height: 114px;
  }
  .ascension-set-event-reveal__title {
    font-size: 27px;
  }
  .ascension-set-event-reveal__description {
    font-size: 11px;
  }
  .ascension-set-event-reveal__continue {
    width: 100%;
    min-width: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ascension-set-event__shine,
  .ascension-set-event__sigil::before,
  .ascension-level-modal__event-bonus > span,
  .ascension-set-event-reveal__cosmos::after,
  .ascension-set-event-reveal__cosmos > span,
  .ascension-set-event-reveal__ring,
  .ascension-set-event-reveal__sigil-aura,
  .ascension-set-event-reveal.ascension-modal--open .ascension-set-event-reveal__dialog,
  .ascension-set-event-reveal.ascension-modal--open .ascension-set-event-reveal__sigil,
  .ascension-set-event-reveal.ascension-modal--open .ascension-set-event-reveal__arrival,
  .ascension-set-event-reveal.ascension-modal--open .ascension-set-event-reveal__title,
  .ascension-set-event-reveal.ascension-modal--open .ascension-set-event-reveal__description,
  .ascension-set-event-reveal.ascension-modal--open .ascension-set-event-reveal__bonus,
  .ascension-set-event-reveal.ascension-modal--open .ascension-set-event-reveal__chance,
  .ascension-set-event-reveal.ascension-modal--open .ascension-set-event-reveal__continue,
  .ascension-task.is-event-arriving .ascension-card {
    animation: none !important;
  }
  .ascension-set-event-reveal__dialog {
    opacity: 1;
    transform: none;
  }
}
.ascension-card {
  isolation: isolate;
}
.ascension-card__sacrifice-rune {
  position: relative;
  z-index: 3;
  color: #ffffff;
  font-size: 65px;
  line-height: 1;
  text-shadow: 0 0 10px #ffffff, 0 0 25px #bb70ff, 0 0 55px #7827df;
  opacity: 0;
  transform: scale(0.2) rotate(-25deg);
}
.ascension-card__sacrifice-ring {
  position: absolute;
  z-index: 2;
  width: 100px;
  height: 100px;
  border: 2px solid rgba(222, 183, 255, 0.95);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(215, 170, 255, 0.9), inset 0 0 15px rgba(154, 70, 255, 0.8);
  opacity: 0;
}
.ascension-card__sacrifice-ring::before, .ascension-card__sacrifice-ring::after {
  position: absolute;
  content: "";
  border: 1px solid rgba(184, 108, 255, 0.72);
  border-radius: 50%;
}
.ascension-card__sacrifice-ring::before {
  inset: -16px;
}
.ascension-card__sacrifice-ring::after {
  inset: 15px;
}
.ascension-card__particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: #d89aff;
  border-radius: 50%;
  box-shadow: 0 0 8px #ffffff, 0 0 16px #a641ff;
  opacity: 0;
}
.ascension-card__particle--1 {
  --particle-x: -105px;
  --particle-y: -135px;
}
.ascension-card__particle--2 {
  --particle-x: 95px;
  --particle-y: -120px;
}
.ascension-card__particle--3 {
  --particle-x: 125px;
  --particle-y: -15px;
}
.ascension-card__particle--4 {
  --particle-x: 90px;
  --particle-y: 130px;
}
.ascension-card__particle--5 {
  --particle-x: -80px;
  --particle-y: 145px;
}
.ascension-card__particle--6 {
  --particle-x: -125px;
  --particle-y: 40px;
}
.ascension-card__particle--7 {
  --particle-x: 15px;
  --particle-y: -160px;
}
.ascension-card__particle--8 {
  --particle-x: 15px;
  --particle-y: 165px;
}
.ascension-card--sacrificing {
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(161, 70, 255, 0.8), 0 0 35px rgba(112, 35, 219, 0.75);
  animation: ascension-card-shake 0.45s ease both;
}
.ascension-card--sacrificing .ascension-card__image {
  animation: ascension-image-sacrifice 1.1s ease-in forwards;
}
.ascension-card--sacrificing .ascension-card__body,
.ascension-card--sacrificing .ascension-card__position,
.ascension-card--sacrificing .ascension-card__replace {
  animation: ascension-content-fade 0.35s ease forwards;
}
.ascension-card--sacrificing .ascension-card__sacrifice-effect {
  visibility: visible;
  animation: ascension-effect-appear 1.25s ease forwards;
}
.ascension-card--sacrificing .ascension-card__sacrifice-rune {
  animation: ascension-rune-appear 1.1s 0.12s ease forwards;
}
.ascension-card--sacrificing .ascension-card__sacrifice-ring {
  animation: ascension-ring-expand 1.1s 0.05s ease-out forwards;
}
.ascension-card--sacrificing .ascension-card__particle {
  animation: ascension-particle-fly 0.9s 0.23s ease-out forwards;
}

.ascension-level__progress {
  position: relative;
  isolation: isolate;
}
.ascension-level__progress-value {
  position: relative;
  z-index: 1;
  width: 0;
  overflow: hidden;
  background: linear-gradient(90deg, #6324d0 0%, #8b3ff0 48%, #b25cff 100%);
  box-shadow: 0 0 8px rgba(133, 57, 235, 0.35), inset 0 1px rgba(255, 255, 255, 0.38);
  transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.ascension-level__progress-shine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  z-index: 2;
  width: 35%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-20deg);
  animation: ascension-progress-shine 3.2s 1.5s infinite;
}

.ascension-progress {
  max-width: 680px;
  padding-top: 3px;
}
.ascension-progress__header {
  justify-content: space-between;
  margin-bottom: 10px;
}
.ascension-progress__label {
  color: var(--ascension-text);
  font-size: 11px;
  font-weight: 600;
}
.ascension-progress__count {
  color: var(--ascension-text);
  font-size: 17px;
}
.ascension-progress__track {
  position: relative;
  isolation: isolate;
  height: 9px;
  overflow: visible;
  background: #f1eef6;
  border: 0;
  box-shadow: inset 0 1px 3px rgba(55, 32, 84, 0.1);
}
.ascension-progress__value {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1;
  width: 0;
  background: linear-gradient(90deg, #6223ce, #8f3fed 55%, #ae5aff);
  box-shadow: 0 0 10px rgba(130, 56, 230, 0.4), inset 0 1px rgba(255, 255, 255, 0.35);
  transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.ascension-progress__glow {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 0;
  z-index: 0;
  width: 0;
  background: rgba(127, 48, 226, 0.16);
  filter: blur(7px);
  transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.ascension-progress__steps {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
  pointer-events: none;
}
.ascension-progress__step {
  width: 3px;
  height: 3px;
  background: rgba(102, 90, 117, 0.27);
  border-radius: 50%;
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.ascension-progress__step--completed {
  background: #ffffff;
  box-shadow: 0 0 3px #ffffff, 0 0 7px #bd78ff;
  transform: scale(1.35);
}
.ascension-progress__description {
  margin-top: 10px;
}
.ascension-progress__description strong {
  color: var(--ascension-primary);
}

.ascension-summary {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 12px 35px rgba(64, 37, 101, 0.055), inset 0 1px rgba(255, 255, 255, 0.72);
}
.ascension-summary__item {
  position: relative;
  display: flex;
  min-height: 250px;
  padding: 20px;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--ascension-border);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.ascension-summary__item:last-child {
  border-right: 0;
}
.ascension-summary__item::before {
  position: absolute;
  top: -88px;
  right: -80px;
  z-index: -1;
  width: 190px;
  height: 190px;
  content: "";
  background: radial-gradient(circle, rgba(121, 52, 222, 0.11), transparent 67%);
  border-radius: 50%;
  transition: transform 0.45s ease;
}
.ascension-summary__item::after {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 120px;
  height: 90px;
  content: "";
  background: linear-gradient(135deg, transparent 48%, rgba(119, 54, 222, 0.035) 49%, rgba(119, 54, 222, 0.035) 51%, transparent 52%);
  opacity: 0.9;
}
.ascension-summary__item:hover {
  background: rgba(126, 57, 226, 0.018);
  box-shadow: inset 0 0 35px rgba(126, 57, 226, 0.025);
}
.ascension-summary__item:hover::before {
  transform: scale(1.1);
}
.ascension-summary__item--set {
  background: radial-gradient(circle at 8% 100%, rgba(239, 174, 42, 0.055), transparent 35%);
}
.ascension-summary__item--rewards {
  background: radial-gradient(circle at 50% 110%, rgba(80, 132, 237, 0.06), transparent 46%);
}
.ascension-summary__item--streak {
  background: radial-gradient(circle at 92% 100%, rgba(240, 95, 42, 0.07), transparent 38%), linear-gradient(135deg, transparent, rgba(123, 49, 224, 0.025));
}
.ascension-summary__item--streak-broken {
  background: radial-gradient(circle at 92% 100%, rgba(139, 136, 151, 0.08), transparent 38%);
}
.ascension-summary__heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 17px;
}
.ascension-summary__heading > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.ascension-summary__body {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}
.ascension-summary__body--set .ascension-summary__facts {
  margin-top: auto;
}
.ascension-summary__body--rewards .ascension-summary__rewards {
  height: 100%;
  flex: 1 1 auto;
  grid-template-rows: repeat(3, minmax(0, 1fr));
}
.ascension-summary__body--streak .ascension-streak__milestone {
  margin-top: auto;
}
.ascension-summary__heading-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--ascension-primary);
  background: linear-gradient(145deg, rgba(126, 57, 226, 0.13), rgba(126, 57, 226, 0.055));
  border: 1px solid rgba(113, 55, 232, 0.14);
  border-radius: 10px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.7), 0 6px 16px rgba(106, 49, 198, 0.07);
}
.ascension-summary__heading-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ascension-summary__title {
  margin: 0;
  color: var(--ascension-text);
  font-size: 14px;
  font-weight: 750;
  letter-spacing: -0.15px;
}
.ascension-summary__eyebrow {
  color: var(--ascension-muted);
  font-size: 10px;
  line-height: 1.25;
}
.ascension-summary__eyebrow strong {
  color: var(--ascension-primary);
  font-size: inherit;
}
.ascension-summary__rewards {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 7px;
}
.ascension-summary__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}
.ascension-summary__fact {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  padding: 7px 8px;
  background: rgba(126, 57, 226, 0.035);
  border: 1px solid rgba(126, 57, 226, 0.075);
  border-radius: 9px;
}
.ascension-summary__fact p {
  display: flex;
  min-width: 0;
  margin: 0;
  flex-direction: column;
  gap: 1px;
}
.ascension-summary__fact p span {
  color: var(--ascension-muted);
  font-size: 10px;
  white-space: nowrap;
}
.ascension-summary__fact p strong {
  color: var(--ascension-text);
  font-size: 11px;
}
.ascension-summary__fact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: #9851e8;
  background: rgba(126, 57, 226, 0.075);
  border-radius: 7px;
}
.ascension-summary__fact-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ascension-rarity {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 9px;
  align-items: end;
  min-height: 73px;
  padding: 11px 12px;
  overflow: hidden;
  background: radial-gradient(circle at 86% 20%, rgba(246, 180, 50, 0.12), transparent 42%), linear-gradient(135deg, rgba(255, 249, 234, 0.86), rgba(255, 255, 255, 0.74));
  border: 1px solid rgba(224, 165, 44, 0.14);
  border-radius: 11px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.82);
}
.ascension-rarity__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ascension-rarity__copy span {
  color: var(--ascension-muted);
  font-size: 8px;
}
.ascension-rarity__copy strong {
  color: #a86c08;
  font-size: 11px;
}
.ascension-rarity__stars {
  position: relative;
  grid-column: 1/-1;
  width: -moz-max-content;
  width: max-content;
  color: rgba(190, 156, 91, 0.22);
  font-size: 17px;
  line-height: 1;
  letter-spacing: 2px;
  filter: drop-shadow(0 3px 6px rgba(217, 145, 22, 0.08));
}
.ascension-rarity__stars-base, .ascension-rarity__stars-fill {
  display: block;
  white-space: nowrap;
}
.ascension-rarity__stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--rarity-fill, 20%);
  overflow: hidden;
  color: #efa617;
  text-shadow: 0 0 10px rgba(241, 167, 23, 0.22);
  transition: width 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.ascension-rarity__score {
  align-self: center;
  color: var(--ascension-muted);
  font-size: 8px;
}
.ascension-rarity__score strong {
  color: #b9790f;
  font-size: 11px;
}
.ascension-rarity.is-updated {
  animation: ascension-summary-pulse 0.55s ease-out;
}

.ascension-reward {
  display: flex;
  height: 100%;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 6px 8px;
  background: rgba(126, 57, 226, 0.028);
  border: 1px solid rgba(126, 57, 226, 0.065);
  border-radius: 9px;
  transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, opacity 0.22s ease;
}
.ascension-reward:hover {
  background: rgba(126, 57, 226, 0.05);
  border-color: rgba(126, 57, 226, 0.12);
  transform: translateX(2px);
}
.ascension-reward__icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  color: #8750e3;
  background: rgba(130, 71, 222, 0.1);
  border: 1px solid rgba(130, 71, 222, 0.09);
  border-radius: 8px;
}
.ascension-reward__icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ascension-reward--diamond .ascension-reward__icon {
  color: #3f83e8;
  background: rgba(65, 127, 229, 0.1);
  border-color: rgba(65, 127, 229, 0.1);
}
.ascension-reward--essence .ascension-reward__icon {
  color: #2a9b98;
  background: rgba(42, 155, 152, 0.1);
  border-color: rgba(42, 155, 152, 0.12);
}
.ascension-reward--dust .ascension-reward__icon {
  color: #d89321;
  background: rgba(219, 157, 54, 0.11);
  border-color: rgba(219, 157, 54, 0.11);
}
.ascension-reward__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.ascension-reward__content strong {
  color: var(--ascension-text);
  font-size: 12px;
}
.ascension-reward__content span {
  color: var(--ascension-muted);
  font-size: 9px;
}
.ascension-reward--locked {
  opacity: 0.54;
  filter: saturate(0.55);
}
.ascension-reward--locked:hover {
  opacity: 0.72;
}
.ascension-reward.is-reward-ready {
  animation: ascension-reward-ready 0.65s ease-out;
}

.ascension-streak {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  background: linear-gradient(135deg, rgba(244, 101, 42, 0.085), rgba(126, 55, 228, 0.028));
  border: 1px solid rgba(225, 102, 48, 0.12);
  border-radius: 10px;
}
.ascension-streak__number {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}
.ascension-streak__number strong {
  color: #ec6b26;
  font-size: 25px;
  line-height: 0.95;
  letter-spacing: -0.8px;
}
.ascension-streak__number span {
  color: var(--ascension-muted);
  font-size: 7px;
  white-space: nowrap;
}
.ascension-streak__flame {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 37px;
  height: 37px;
  color: #ff6327;
  background: radial-gradient(circle, rgba(255, 166, 70, 0.2), rgba(255, 102, 39, 0.06) 65%, transparent 67%);
  filter: drop-shadow(0 5px 9px rgba(235, 85, 37, 0.16));
  animation: ascension-streak-flame 2.7s ease-in-out infinite;
}
.ascension-streak__flame svg {
  width: 28px;
  height: 28px;
  overflow: visible;
  fill: rgba(255, 119, 45, 0.14);
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ascension-streak__status {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: #258657;
}
.ascension-streak__status > span {
  width: 6px;
  height: 6px;
  background: #31bd79;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(49, 189, 121, 0.09);
}
.ascension-streak__status strong {
  font-size: 10px;
  font-weight: 650;
}
.ascension-streak__status--broken {
  color: #9a6670;
}
.ascension-streak__status--broken > span {
  background: #b7838d;
  box-shadow: 0 0 0 4px rgba(183, 131, 141, 0.09);
}
.ascension-streak__milestone {
  position: relative;
  z-index: 1;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--ascension-border);
}
.ascension-streak__milestone-copy {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}
.ascension-streak__milestone-copy > span {
  color: var(--ascension-muted);
  font-size: 9px;
}
.ascension-streak__milestone-copy strong {
  color: var(--ascension-text);
  font-size: 9px;
  text-align: right;
}
.ascension-streak__reward {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-height: 34px;
  margin-bottom: 9px;
  padding: 4px 9px 4px 5px;
  overflow: hidden;
  background: radial-gradient(circle at 90% 50%, rgba(236, 164, 51, 0.11), transparent 40%), linear-gradient(135deg, rgba(126, 57, 226, 0.1), rgba(240, 145, 43, 0.055));
  border: 1px solid rgba(126, 57, 226, 0.11);
  border-radius: 9px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.65);
}
.ascension-streak__reward > span:not(.ascension-streak__reward-icon) {
  color: var(--ascension-muted);
  font-size: 8px;
}
.ascension-streak__reward > strong {
  color: var(--ascension-primary);
  font-size: 9px;
  font-weight: 750;
  white-space: nowrap;
}
.ascension-streak__reward-icon {
  display: flex;
  width: 25px;
  height: 25px;
  align-items: center;
  justify-content: center;
  color: #8a4ce6;
  background: linear-gradient(145deg, rgba(126, 57, 226, 0.16), rgba(126, 57, 226, 0.07));
  border: 1px solid rgba(126, 57, 226, 0.1);
  border-radius: 7px;
  box-shadow: 0 4px 10px rgba(108, 50, 198, 0.08);
}
.ascension-streak__reward-icon svg {
  width: 15px;
  height: 15px;
  fill: rgba(126, 57, 226, 0.08);
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ascension-streak__track {
  position: relative;
  height: 4px;
  overflow: hidden;
  background: rgba(126, 57, 226, 0.08);
  border-radius: 10px;
}
.ascension-streak__track-value, .ascension-streak__track-glow {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--streak-progress, 0%);
  border-radius: inherit;
  transition: width 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.ascension-streak__track-value {
  z-index: 2;
  background: linear-gradient(90deg, #ef7131, #f3a22d 56%, #8846e9);
  box-shadow: 0 0 8px rgba(240, 113, 42, 0.28);
}
.ascension-streak__track-glow {
  z-index: 1;
  filter: blur(5px);
  background: rgba(241, 118, 44, 0.24);
}
.ascension-streak__steps {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  padding: 0 1px;
}
.ascension-streak__steps span {
  width: 5px;
  height: 5px;
  background: rgba(119, 105, 135, 0.2);
  border: 1px solid var(--ascension-surface);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(119, 105, 135, 0.1);
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.ascension-streak__steps span.is-active {
  background: #ef8a2e;
  box-shadow: 0 0 7px rgba(239, 138, 46, 0.35);
  transform: scale(1.2);
}
.ascension-streak.is-updated {
  animation: ascension-summary-pulse 0.55s ease-out;
}

@keyframes ascension-summary-pulse {
  0% {
    box-shadow: 0 0 0 rgba(126, 57, 226, 0);
    transform: translateY(0);
  }
  40% {
    box-shadow: 0 0 25px rgba(126, 57, 226, 0.14);
    transform: translateY(-1px);
  }
  100% {
    box-shadow: 0 0 0 rgba(126, 57, 226, 0);
    transform: translateY(0);
  }
}
@keyframes ascension-reward-ready {
  0% {
    box-shadow: 0 0 0 rgba(219, 157, 54, 0);
  }
  45% {
    box-shadow: 0 0 20px rgba(219, 157, 54, 0.22);
  }
  100% {
    box-shadow: 0 0 0 rgba(219, 157, 54, 0);
  }
}
@keyframes ascension-streak-flame {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-2px) scale(1.04);
  }
}
body.dark .ascension-summary {
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.24), inset 0 1px rgba(255, 255, 255, 0.025);
}
body.dark .ascension-summary__item:hover {
  background-color: rgba(168, 91, 255, 0.025);
  box-shadow: inset 0 0 38px rgba(147, 68, 240, 0.035);
}
body.dark .ascension-summary__heading-icon {
  background: linear-gradient(145deg, rgba(167, 87, 255, 0.15), rgba(126, 57, 226, 0.055));
  border-color: rgba(188, 116, 255, 0.14);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035), 0 7px 18px rgba(0, 0, 0, 0.16);
}
body.dark .ascension-summary__fact,
body.dark .ascension-summary .ascension-reward {
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(190, 117, 255, 0.08);
}
body.dark .ascension-summary__fact-icon {
  color: #bb75ff;
  background: rgba(162, 78, 239, 0.1);
}
body.dark .ascension-rarity {
  background: radial-gradient(circle at 86% 20%, rgba(238, 167, 34, 0.1), transparent 42%), linear-gradient(135deg, rgba(35, 30, 23, 0.72), rgba(17, 19, 27, 0.76));
  border-color: rgba(226, 166, 43, 0.13);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}
body.dark .ascension-rarity__copy strong, body.dark .ascension-rarity__score strong {
  color: #efb547;
}
body.dark .ascension-rarity__stars {
  color: rgba(244, 202, 117, 0.17);
}
body.dark .ascension-reward:hover {
  background: rgba(172, 91, 255, 0.055);
  border-color: rgba(190, 117, 255, 0.13);
}
body.dark .ascension-streak {
  background: linear-gradient(135deg, rgba(225, 91, 38, 0.1), rgba(137, 57, 228, 0.035));
  border-color: rgba(230, 104, 48, 0.12);
}
body.dark .ascension-streak__status {
  color: #65ca96;
}
body.dark .ascension-streak__status--broken {
  color: #bd8992;
}
body.dark .ascension-streak__track {
  background: rgba(255, 255, 255, 0.055);
}
body.dark .ascension-streak__reward {
  background: radial-gradient(circle at 90% 50%, rgba(218, 144, 42, 0.08), transparent 40%), linear-gradient(135deg, rgba(158, 76, 239, 0.12), rgba(222, 128, 41, 0.055));
  border-color: rgba(190, 118, 255, 0.12);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}
body.dark .ascension-streak__reward > strong {
  color: #c184ff;
}
body.dark .ascension-streak__reward-icon {
  color: #c184ff;
  background: rgba(157, 80, 235, 0.13);
  border-color: rgba(192, 132, 255, 0.13);
  box-shadow: 0 5px 13px rgba(0, 0, 0, 0.16);
}
body.dark .ascension-streak__steps span {
  border-color: #0d1017;
}
body.dark .ascension-level-modal__reward-icon--dust {
  color: #e5ad4e;
  background: rgba(219, 157, 54, 0.1);
  border-color: rgba(229, 173, 78, 0.13);
}
body.dark .ascension-level-modal__reward-icon--essence {
  color: #64cbc7;
  background: rgba(38, 152, 149, 0.12);
  border-color: rgba(100, 203, 199, 0.14);
}
body.dark .ascension-level-modal__reward-icon--split-buff {
  color: #f49a5d;
  background: rgba(239, 115, 48, 0.11);
  border-color: rgba(244, 154, 93, 0.14);
}
body.dark .ascension-level-modal__reward-icon--pro {
  color: #c084ff;
  background: rgba(157, 80, 235, 0.12);
  border-color: rgba(192, 132, 255, 0.14);
}

.ascension-guide {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  min-height: 180px;
}
.ascension-guide__content {
  padding: 19px;
}
.ascension-guide__heading {
  display: flex;
  align-items: center;
  gap: 9px;
}
.ascension-guide__heading-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  color: var(--ascension-primary);
  background: var(--ascension-primary-soft);
  border-radius: 7px;
}
.ascension-guide__heading-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ascension-guide__steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin-top: 16px;
}
.ascension-guide__decoration {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 50% 45%, rgba(143, 74, 239, 0.19), transparent 55%), linear-gradient(135deg, #fbf9ff, #f3edff);
}
.ascension-guide__rune {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 125px;
  height: 125px;
  color: rgba(126, 59, 226, 0.48);
  transform: translate(-50%, -50%);
  animation: ascension-rune-float 5s ease-in-out infinite;
}
.ascension-guide__rune svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.ascension-guide__particle {
  position: absolute;
  color: rgba(139, 65, 234, 0.55);
  animation: ascension-particle-float 4s ease-in-out infinite;
}
.ascension-guide__particle--1 {
  top: 22%;
  left: 20%;
}
.ascension-guide__particle--2 {
  top: 59%;
  right: 18%;
  animation-delay: -1.3s;
}
.ascension-guide__particle--3 {
  right: 25%;
  bottom: 14%;
  animation-delay: -2.3s;
}

.ascension-guide-step {
  display: grid;
  grid-template-columns: 20px 29px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}
.ascension-guide-step__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  background: var(--ascension-primary);
  border-radius: 50%;
  box-shadow: 0 3px 7px rgba(111, 55, 225, 0.22);
}
.ascension-guide-step__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  color: #9850eb;
  background: rgba(129, 65, 225, 0.07);
  border-radius: 7px;
}
.ascension-guide-step__icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ascension-guide-step__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.ascension-guide-step__content strong {
  font-size: 9px;
}
.ascension-guide-step__content span {
  color: var(--ascension-muted);
  font-size: 8px;
  line-height: 1.4;
}

.ascension-privileges {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: radial-gradient(circle at 2% 50%, rgba(126, 57, 226, 0.09), transparent 31%), radial-gradient(circle at 98% 50%, rgba(239, 115, 48, 0.08), transparent 33%), var(--ascension-surface);
}
.ascension-privileges::before {
  position: absolute;
  top: -70px;
  right: 23%;
  width: 180px;
  height: 180px;
  content: "";
  background: radial-gradient(circle, rgba(128, 62, 230, 0.065), transparent 68%);
  border-radius: 50%;
  pointer-events: none;
}
.ascension-privileges--active {
  box-shadow: 0 14px 38px rgba(74, 39, 122, 0.06), inset 0 1px rgba(255, 255, 255, 0.72);
}
.ascension-privileges__items {
  gap: 0;
  margin-right: -18px;
  margin-left: -18px;
}

.ascension-buff {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(170px, 0.55fr) minmax(190px, 0.65fr);
  align-items: stretch;
  min-height: 112px;
}
.ascension-buff__main, .ascension-buff__bonus, .ascension-buff__status {
  display: flex;
  min-width: 0;
  align-items: center;
  padding: 20px 22px;
}
.ascension-buff__main {
  gap: 14px;
}
.ascension-buff__icon {
  position: relative;
  display: flex;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: #7c3fe0;
  background: linear-gradient(145deg, rgba(126, 57, 226, 0.16), rgba(126, 57, 226, 0.06));
  border: 1px solid rgba(126, 57, 226, 0.14);
  border-radius: 14px;
  box-shadow: 0 9px 22px rgba(93, 40, 182, 0.1), inset 0 1px rgba(255, 255, 255, 0.75);
}
.ascension-buff__icon::after {
  position: absolute;
  inset: -5px;
  content: "";
  border: 1px solid rgba(126, 57, 226, 0.06);
  border-radius: 18px;
}
.ascension-buff__icon svg {
  width: 25px;
  height: 25px;
  fill: rgba(126, 57, 226, 0.08);
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ascension-buff__copy {
  min-width: 0;
}
.ascension-buff__copy p {
  max-width: 450px;
  margin: 5px 0 0;
  color: var(--ascension-muted);
  font-size: 9px;
  line-height: 1.45;
}
.ascension-buff__eyebrow {
  display: block;
  margin-bottom: 3px;
  color: var(--ascension-primary);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.ascension-buff__title {
  margin: 0;
  color: var(--ascension-text);
  font-size: 15px;
  letter-spacing: -0.2px;
}
.ascension-buff__bonus {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  border-left: 1px solid var(--ascension-border);
}
.ascension-buff__bonus > span,
.ascension-buff__bonus small {
  color: var(--ascension-muted);
  font-size: 8px;
}
.ascension-buff__bonus strong {
  margin: 4px 0 2px;
  color: #7e3fe0;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: -0.35px;
}
.ascension-buff__status {
  gap: 10px;
  border-left: 1px solid var(--ascension-border);
}
.ascension-buff__status > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}
.ascension-buff__status strong {
  color: var(--ascension-text);
  font-size: 10px;
}
.ascension-buff__status small {
  color: var(--ascension-muted);
  font-size: 8px;
  line-height: 1.35;
}
.ascension-buff__status.is-active strong {
  color: #238458;
}
.ascension-buff__status.is-active .ascension-buff__status-dot {
  background: #2fbd78;
  box-shadow: 0 0 0 5px rgba(47, 189, 120, 0.1), 0 0 16px rgba(47, 189, 120, 0.24);
}
.ascension-buff__status-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  background: #aaa5b2;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(130, 124, 141, 0.08);
}

body.dark .ascension-privileges {
  background: radial-gradient(circle at 2% 50%, rgba(157, 79, 239, 0.11), transparent 31%), radial-gradient(circle at 98% 50%, rgba(221, 100, 42, 0.08), transparent 33%), var(--ascension-surface);
}
body.dark .ascension-privileges--active {
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.22), inset 0 1px rgba(255, 255, 255, 0.025);
}
body.dark .ascension-buff__icon {
  color: #bd7aff;
  background: linear-gradient(145deg, rgba(158, 76, 239, 0.18), rgba(126, 57, 226, 0.07));
  border-color: rgba(191, 121, 255, 0.14);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2), inset 0 1px rgba(255, 255, 255, 0.035);
}
body.dark .ascension-buff__bonus strong {
  color: #bd7aff;
}
body.dark .ascension-buff__status.is-active strong {
  color: #69d39c;
}

.ascension-privilege {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 55px;
  padding: 0 18px;
  border-right: 1px solid var(--ascension-border);
}
.ascension-privilege:last-child {
  border-right: 0;
}
.ascension-privilege__icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--ascension-primary);
  background: var(--ascension-primary-soft);
  border-radius: 8px;
}
.ascension-privilege__icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ascension-privilege__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.ascension-privilege__content span {
  color: var(--ascension-muted);
  font-size: 8px;
}
.ascension-privilege__content strong {
  font-size: 10px;
}

@keyframes ascension-progress-shine {
  0% {
    left: -45%;
  }
  45%, 100% {
    left: 115%;
  }
}
@keyframes ascension-rune-float {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(-3deg) scale(1);
  }
  50% {
    transform: translate(-50%, calc(-50% - 7px)) rotate(3deg) scale(1.04);
  }
}
@keyframes ascension-particle-float {
  0%, 100% {
    opacity: 0.35;
    transform: translateY(0) scale(0.9);
  }
  50% {
    opacity: 0.85;
    transform: translateY(-8px) scale(1.1);
  }
}
@media (max-width: 760px) {
  .ascension-summary {
    grid-template-columns: 1fr;
  }
  .ascension-summary__item {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--ascension-border);
  }
  .ascension-summary__item:last-child {
    border-bottom: 0;
  }
  .ascension-summary__body--rewards .ascension-summary__rewards {
    grid-template-rows: none;
  }
  .ascension-guide {
    grid-template-columns: 1fr;
  }
  .ascension-guide__steps {
    grid-template-columns: 1fr;
  }
  .ascension-guide__decoration {
    display: none;
  }
  .ascension-privileges__items {
    grid-template-columns: repeat(2, 1fr);
  }
  .ascension-buff {
    grid-template-columns: 1fr;
  }
  .ascension-buff__main, .ascension-buff__bonus, .ascension-buff__status {
    padding: 17px 18px;
  }
  .ascension-buff__bonus, .ascension-buff__status {
    border-top: 1px solid var(--ascension-border);
    border-left: 0;
  }
  .ascension-buff__bonus {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 12px;
  }
  .ascension-buff__bonus strong {
    grid-row: 1/3;
    grid-column: 2;
    align-self: center;
    margin: 0;
  }
  .ascension-privilege {
    border-right: 0;
    border-bottom: 1px solid var(--ascension-border);
  }
  .ascension-privilege:nth-last-child(-n+2) {
    border-bottom: 0;
  }
}
/* ==========================================================================
   FINAL: cards task visual corrections
   ========================================================================== */
.ascension-task {
  padding: 24px 24px 26px;
  overflow: hidden;
  /* Нижний дублирующий счётчик под заголовком больше не показываем. */
  /* Вместо простых углов — декоративные уголки с ромбом и двойной линией. */
}
.ascension-task__header {
  align-items: center;
  margin-bottom: 20px;
  padding: 0 20px 0 14px;
}
.ascension-task__heading {
  align-items: center;
}
.ascension-task__heading-decoration {
  width: 24px;
  height: 24px;
  margin-top: 0;
  color: #7e52d8;
}
.ascension-task__heading-decoration svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.45;
}
.ascension-task__title {
  font-size: 20px;
  line-height: 1.25;
}
.ascension-task__counter {
  display: none;
}
.ascension-task__progress-badge {
  min-height: 36px;
  padding: 0 17px;
  gap: 7px;
  border-radius: 999px;
}
.ascension-task__cards {
  align-items: stretch;
  gap: 16px 14px;
}
.ascension-task__corner {
  width: 48px;
  height: 48px;
  color: rgba(119, 66, 218, 0.52);
}
.ascension-task__corner::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 38px;
  height: 38px;
  content: "";
  background: transparent;
  border-top: 1px solid currentColor;
  border-left: 1px solid currentColor;
  border-radius: 4px 0 0;
  box-shadow: 4px 4px 0 -3px rgba(119, 66, 218, 0.24), 8px 8px 0 -7px rgba(119, 66, 218, 0.2);
}
.ascension-task__corner::after {
  position: absolute;
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  content: "";
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid currentColor;
  transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(126, 63, 226, 0.16);
}
.ascension-task__corner--top-left {
  top: 9px;
  left: 9px;
}
.ascension-task__corner--top-right {
  top: 9px;
  right: 9px;
  transform: rotate(90deg);
}
.ascension-task__corner--bottom-right {
  right: 9px;
  bottom: 9px;
  transform: rotate(180deg);
}
.ascension-task__corner--bottom-left {
  bottom: 9px;
  left: 9px;
  transform: rotate(270deg);
}

.ascension-card {
  padding: 7px 7px 8px;
  border-radius: 13px;
  /* Цифры позиции на карточках убраны полностью. */
}
.ascension-card:hover {
  transform: translateY(-2px);
  /* Карта целиком слегка поднимается, но само изображение не увеличивается. */
}
.ascension-card:hover .ascension-card__image {
  transform: none;
}
.ascension-card__media {
  border-radius: 10px;
}
.ascension-card__image {
  transform: none;
  transition: filter 0.25s ease;
}
.ascension-card__position {
  display: none !important;
}
.ascension-card__replace {
  top: 3px;
  right: 3px;
  width: 29px;
  height: 29px;
}
.ascension-card__body {
  min-height: 75px;
  padding-top: 8px;
}
.ascension-card__status {
  width: 100%;
  min-height: 25px;
  justify-content: center;
  gap: 6px;
  padding: 4px 8px;
  overflow: visible;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.01em;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
  border-radius: 999px;
}
.ascension-card__status--owned {
  color: #17834c;
  background: linear-gradient(180deg, rgba(244, 255, 248, 0.98), rgba(233, 249, 239, 0.98));
  border-color: rgba(38, 157, 88, 0.22);
}
.ascension-card__status--missing {
  color: #d95962;
  background: linear-gradient(180deg, rgba(255, 250, 250, 0.98), rgba(255, 241, 242, 0.98));
  border-color: rgba(213, 77, 89, 0.2);
}
.ascension-card__status-icon {
  width: 16px;
  height: 16px;
  font-size: 10px;
  background: rgba(255, 255, 255, 0.72);
}
.ascension-card__footer {
  padding-top: 8px;
}
.ascension-card__button {
  min-height: 38px;
  border-radius: 7px;
}

.ascension-progress {
  width: min(760px, 100% - 32px);
  max-width: 760px;
  margin: 22px auto 0;
  padding: 15px 92px 14px;
  box-sizing: border-box;
  /* Ровные точки: первая и последняя стоят по центру своих позиций. */
}
.ascension-progress__header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-bottom: 12px;
}
.ascension-progress__label {
  grid-column: 1;
  justify-self: start;
  font-size: 12px;
}
.ascension-progress__count {
  grid-column: 2;
  justify-self: center;
  font-size: 19px;
}
.ascension-progress__track {
  width: 100%;
  height: 8px;
  box-sizing: border-box;
  overflow: visible;
  border-radius: 999px;
}
.ascension-progress__value {
  border-radius: 999px;
}
.ascension-progress__steps {
  inset: 50% 0 auto;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  padding: 0;
  transform: translateY(-50%);
}
.ascension-progress__step {
  width: 6px;
  height: 6px;
  justify-self: center;
  background: #d8d0e4;
  border: 2px solid rgba(255, 255, 255, 0.96);
  box-sizing: border-box;
  box-shadow: 0 0 0 1px rgba(113, 55, 232, 0.08);
  transform: none;
}
.ascension-progress__step--completed {
  background: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 0 0 2px rgba(126, 52, 230, 0.24), 0 0 8px rgba(137, 61, 236, 0.52);
  transform: none;
}
.ascension-progress__description {
  margin-top: 12px;
  text-align: center;
}
.ascension-progress__decoration {
  top: 50%;
  font-size: 29px;
}
.ascension-progress__decoration--left {
  left: 26px;
}
.ascension-progress__decoration--right {
  right: 26px;
}

body.dark .ascension-task__corner::after {
  background: #10131c;
}
body.dark .ascension-card__status--owned {
  color: #75dda2;
  background: linear-gradient(180deg, rgba(22, 54, 38, 0.88), rgba(16, 40, 29, 0.92));
  border-color: rgba(93, 219, 146, 0.23);
}
body.dark .ascension-card__status--missing {
  color: #ff8c94;
  background: linear-gradient(180deg, rgba(70, 30, 37, 0.74), rgba(49, 22, 28, 0.82));
  border-color: rgba(255, 111, 124, 0.2);
}
body.dark .ascension-card__status-icon {
  background: rgba(255, 255, 255, 0.035);
}
body.dark .ascension-progress__step {
  background: #4b4258;
  border-color: #171a22;
  box-shadow: 0 0 0 1px rgba(180, 105, 255, 0.12);
}
body.dark .ascension-progress__step--completed {
  background: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 0 0 2px rgba(174, 91, 255, 0.3), 0 0 9px rgba(171, 83, 255, 0.62);
}

@media (max-width: 1050px) {
  .ascension-task {
    padding: 22px 18px 24px;
  }
  .ascension-task__cards {
    gap: 14px 12px;
  }
}
@media (max-width: 760px) {
  .ascension-task {
    padding: 20px 13px 22px;
  }
  .ascension-task__header {
    padding: 0 12px 0 8px;
  }
  .ascension-task__title {
    font-size: 18px;
  }
  .ascension-task__progress-badge {
    min-height: 36px;
    padding: 0 12px;
  }
  .ascension-task__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px;
  }
  .ascension-progress {
    width: calc(100% - 12px);
    padding-right: 54px;
    padding-left: 54px;
  }
  .ascension-progress__decoration {
    font-size: 23px;
  }
  .ascension-progress__decoration--left {
    left: 16px;
  }
  .ascension-progress__decoration--right {
    right: 16px;
  }
}
@media (max-width: 480px) {
  .ascension-task {
    padding: 17px 8px 18px;
  }
  .ascension-task__header {
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 14px;
    padding: 0 8px;
  }
  .ascension-task__heading {
    gap: 7px;
  }
  .ascension-task__heading-decoration {
    width: 19px;
    height: 19px;
  }
  .ascension-task__heading-decoration svg {
    width: 19px;
    height: 19px;
  }
  .ascension-task__title {
    font-size: 15px;
  }
  .ascension-task__progress-badge {
    min-height: 30px;
    padding: 0 8px;
    gap: 4px;
    font-size: 0;
  }
  .ascension-task__progress-badge strong {
    font-size: 11px;
  }
  .ascension-task__progress-badge-star {
    font-size: 11px;
  }
  .ascension-task__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 7px;
  }
  .ascension-task__corner {
    width: 34px;
    height: 34px;
  }
  .ascension-task__corner::before {
    width: 27px;
    height: 27px;
  }
  .ascension-task__corner::after {
    top: 7px;
    left: 7px;
    width: 6px;
    height: 6px;
  }
  .ascension-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 4px 4px 6px;
  }
  .ascension-card__media {
    width: 100%;
    height: auto;
    aspect-ratio: 2/3;
  }
  .ascension-card__body {
    min-height: 65px;
    padding: 6px 0 0;
  }
  .ascension-card__status {
    min-height: 21px;
    gap: 3px;
    padding: 3px 4px;
    font-size: 9px;
  }
  .ascension-card__status-icon {
    width: 13px;
    height: 13px;
    font-size: 8px;
  }
  .ascension-card__button {
    min-height: 32px;
    gap: 5px;
    padding: 5px;
    font-size: 9px;
  }
  .ascension-card__button svg {
    width: 13px;
    height: 13px;
  }
  .ascension-card__replace {
    top: 6px;
    right: 6px;
    width: 25px;
    height: 25px;
  }
  .ascension-progress {
    width: calc(100% - 8px);
    padding: 13px 16px 12px;
    border-radius: 22px;
  }
  .ascension-progress__header {
    grid-template-columns: 1fr;
    gap: 3px;
  }
  .ascension-progress__label, .ascension-progress__count {
    grid-column: 1;
    justify-self: center;
  }
  .ascension-progress__label {
    font-size: 10px;
  }
  .ascension-progress__count {
    font-size: 15px;
  }
  .ascension-progress__step {
    width: 5px;
    height: 5px;
    border-width: 1px;
  }
  .ascension-progress__decoration {
    display: none;
  }
}
/* ==========================================================================
   Финальная правка блока карт Возвышения — v2
   ========================================================================== */
/* Убираем старые декоративные линии в углах: они визуально ломали рамку. */
.ascension-task__corner {
  display: none !important;
}

.ascension-task {
  padding: 24px 24px 26px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 0, rgba(137, 70, 239, 0.07), transparent 34%), linear-gradient(180deg, #ffffff 0%, #fcfaff 100%);
  border: 1px solid rgba(126, 74, 221, 0.26);
  border-radius: 15px;
  box-shadow: inset 0 0 0 4px rgba(133, 76, 229, 0.035), inset 0 0 0 5px rgba(133, 76, 229, 0.065), 0 10px 30px rgba(65, 37, 110, 0.05);
}
.ascension-task::before {
  inset: 8px;
  border-color: rgba(132, 75, 228, 0.11);
  border-radius: 10px;
}
.ascension-task__header {
  align-items: center;
  margin-bottom: 20px;
  padding: 0 10px;
}
.ascension-task__counter {
  display: none !important;
}
.ascension-task__cards {
  gap: 16px 14px;
}

/* Карточки одной высоты и без увеличения картинки при hover. */
.ascension-card {
  padding: 7px;
  border-radius: 13px;
  transform: none;
  /* Две фиксированные строки: лейбл и кнопка. */
  /* Для выполненной карты добавляем такой же лейбл, чтобы низ не был пустым. */
}
.ascension-card:hover {
  transform: translateY(-2px);
}
.ascension-card:hover .ascension-card__image {
  transform: none !important;
}
.ascension-card__image {
  transform: none !important;
  transition: filter 0.25s ease;
}
.ascension-card__position {
  display: none !important;
}
.ascension-card__media {
  border-radius: 10px;
}
.ascension-card__body {
  display: grid;
  grid-template-rows: 28px 42px;
  gap: 8px;
  min-height: 78px;
  padding: 8px 0 0;
}
.ascension-card__status {
  width: 100%;
  height: 28px;
  min-height: 28px;
  justify-content: center;
  align-self: stretch;
  gap: 7px;
  padding: 0 10px;
  overflow: hidden;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
  box-sizing: border-box;
}
.ascension-card__status--owned {
  color: #18834c;
  background: linear-gradient(180deg, rgba(244, 255, 248, 0.98), rgba(234, 250, 241, 0.98));
  border-color: rgba(39, 158, 91, 0.2);
}
.ascension-card__status--missing {
  color: #df5a5a;
  background: linear-gradient(180deg, rgba(255, 250, 250, 0.98), rgba(255, 242, 242, 0.98));
  border-color: rgba(222, 86, 86, 0.18);
}
.ascension-card__status-icon {
  width: 16px;
  height: 16px;
  font-size: 10px;
  border-width: 1px;
}
.ascension-card__footer {
  height: 42px;
  margin: 0;
  padding: 0;
}
.ascension-card__button {
  width: 100%;
  height: 36px;
  min-height: 36px;
  padding: 0 12px;
  box-sizing: border-box;
  border-radius: 7px;
  line-height: 1;
}
.ascension-card__button svg {
  width: 15px;
  height: 15px;
}
.ascension-card--completed .ascension-card__body::before {
  display: flex;
  width: 100%;
  height: 28px;
  align-items: center;
  justify-content: center;
  color: #7650bd;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.01em;
  content: "Поднесено";
  background: linear-gradient(180deg, rgba(250, 247, 255, 0.98), rgba(244, 238, 255, 0.98));
  border: 1px solid rgba(118, 71, 204, 0.17);
  border-radius: 999px;
  box-sizing: border-box;
}

/* Нижний прогресс: шире, строго по центру и тоньше. */
.ascension-progress {
  width: calc(100% - 48px);
  max-width: none !important;
  margin: 24px auto 0;
  padding: 15px 112px 13px;
  box-sizing: border-box;
  border-radius: 32px;
}
.ascension-progress__header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 11px;
}
.ascension-progress__label {
  grid-column: 1;
  justify-self: start;
  font-size: 11px;
}
.ascension-progress__count {
  grid-column: 2;
  justify-self: center;
  font-size: 18px;
}
.ascension-progress__track {
  position: relative;
  width: 100%;
  height: 5px;
  margin: 0 auto;
  overflow: visible;
  background: #eee9f4;
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(62, 35, 93, 0.1);
}
.ascension-progress__value {
  height: 5px;
  border-radius: 999px;
}
.ascension-progress__glow {
  top: 50%;
  height: 12px;
  transform: translateY(-50%);
}
.ascension-progress__steps {
  position: absolute;
  inset: 50% 0 auto;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  align-items: center;
  padding: 0;
  transform: translateY(-50%);
}
.ascension-progress__step {
  width: 9px;
  height: 9px;
  justify-self: center;
  background: #f7f4fb;
  border: 2px solid #d7cde5;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(65, 38, 96, 0.12);
  box-sizing: border-box;
  transform: none;
}
.ascension-progress__step--completed {
  background: #ffffff;
  border-color: #8d42ec;
  box-shadow: 0 0 0 2px rgba(139, 61, 233, 0.13), 0 0 7px rgba(139, 61, 233, 0.35);
  transform: none;
}
.ascension-progress__description {
  margin-top: 11px;
}

body.dark .ascension-task {
  background: radial-gradient(circle at 50% 0, rgba(143, 73, 255, 0.11), transparent 34%), linear-gradient(180deg, #10131c 0%, #0b0e15 100%);
  border-color: rgba(159, 91, 255, 0.28);
  box-shadow: inset 0 0 0 4px rgba(147, 79, 247, 0.025), inset 0 0 0 5px rgba(147, 79, 247, 0.05), 0 12px 30px rgba(0, 0, 0, 0.22);
}
body.dark .ascension-card__status--owned {
  color: #79dba0;
  background: linear-gradient(180deg, rgba(26, 73, 49, 0.36), rgba(19, 55, 38, 0.36));
  border-color: rgba(95, 222, 145, 0.55);
}
body.dark .ascension-card__status--missing {
  color: #ff8585;
  background: linear-gradient(180deg, rgba(95, 34, 42, 0.3), rgba(66, 24, 31, 0.3));
  border-color: rgba(255, 112, 112, 0.18);
}
body.dark .ascension-card--completed .ascension-card__body::before {
  color: #c99aff;
  background: linear-gradient(180deg, rgba(47, 31, 66, 0.6), rgba(31, 23, 43, 0.6));
  border-color: rgba(181, 108, 255, 0.2);
}
body.dark .ascension-progress__track {
  background: #12151d;
}
body.dark .ascension-progress__step {
  background: #1d2029;
  border-color: #4b4258;
}
body.dark .ascension-progress__step--completed {
  background: #ffffff;
  border-color: #b468ff;
}

@media (max-width: 1050px) {
  .ascension-task {
    padding: 22px 18px 24px;
  }
  .ascension-task__cards {
    gap: 14px 12px;
  }
  .ascension-progress {
    width: calc(100% - 28px);
    padding-right: 84px;
    padding-left: 84px;
  }
}
@media (max-width: 760px) {
  .ascension-task {
    padding: 20px 13px 22px;
  }
  .ascension-task__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ascension-progress {
    width: calc(100% - 12px);
    padding-right: 42px;
    padding-left: 42px;
  }
}
@media (max-width: 480px) {
  .ascension-task {
    padding: 16px 8px 18px;
  }
  .ascension-task__header {
    padding: 0 5px;
  }
  .ascension-task__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 7px;
  }
  .ascension-card {
    display: flex;
    flex-direction: column;
    padding: 4px;
  }
  .ascension-card__body {
    grid-template-rows: 23px 34px;
    gap: 6px;
    min-height: 63px;
    padding-top: 6px;
  }
  .ascension-card__status, .ascension-card--completed .ascension-card__body::before {
    height: 23px;
    min-height: 23px;
    padding: 0 4px;
    font-size: 9px;
  }
  .ascension-card__status-icon {
    width: 13px;
    height: 13px;
    font-size: 8px;
  }
  .ascension-card__footer, .ascension-card__button {
    height: 34px;
    min-height: 34px;
  }
  .ascension-card__button {
    font-size: 9px;
  }
  .ascension-progress {
    width: calc(100% - 8px);
    padding: 13px 16px 12px;
    border-radius: 22px;
  }
  .ascension-progress__header {
    grid-template-columns: 1fr;
    gap: 3px;
  }
  .ascension-progress__label, .ascension-progress__count {
    grid-column: 1;
    justify-self: center;
  }
  .ascension-progress__step {
    width: 7px;
    height: 7px;
    border-width: 1px;
  }
}
/* ==========================================================================
   Плавное подношение карты без лагов и резкого обрыва
   ========================================================================== */
.ascension-card {
  --offering-overlay-top: rgba(252, 249, 255, 0.94);
  --offering-overlay-bottom: rgba(247, 241, 255, 0.97);
  --offering-text: #49365d;
  --offering-check-start: #6a2ed9;
  --offering-check-end: #9c55f5;
  --offering-check-border: rgba(255, 255, 255, 0.82);
  --offering-check-ring: rgba(119, 52, 228, 0.16);
  --offering-check-shadow: rgba(100, 38, 197, 0.24);
  isolation: isolate;
  /*
   * Промежуточный эффект расположен точно поверх изображения,
   * а не поверх всей карточки.
   */
  /*
   * Полностью отключаем старую заливку и сканирующую линию.
   */
  /*
   * Переоформляем ромб в обычную круглую галочку.
   * Она совпадает с итоговой галочкой выполненной карты.
   */
  /*
   * Звезда внутри SVG больше не нужна.
   * Остаётся только галочка.
   */
  /*
   * Итоговый блок получает точно такой же фон,
   * как промежуточная анимация.
   */
  /*
   * После замены содержимого через JS новый нижний блок
   * появляется мягко, а не резко.
   */
}
.ascension-card__offering-effect {
  position: absolute;
  top: 7px;
  right: 7px;
  bottom: auto;
  left: 7px;
  z-index: 20;
  display: flex;
  visibility: hidden;
  height: auto;
  aspect-ratio: 2/3;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 11px;
  overflow: hidden;
  color: var(--offering-text);
  font-size: 10px;
  font-weight: 650;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, var(--offering-overlay-top), var(--offering-overlay-bottom));
  border-radius: 10px;
}
.ascension-card__offering-wash, .ascension-card__offering-scan {
  display: none !important;
}
.ascension-card__offering-emblem, .ascension-card__check {
  display: flex;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--offering-check-start), var(--offering-check-end));
  border: 2px solid var(--offering-check-border);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--offering-check-ring), 0 7px 18px var(--offering-check-shadow);
}
.ascension-card__offering-emblem {
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(5px) scale(0.94);
}
.ascension-card__offering-emblem svg {
  width: 23px;
  height: 23px;
  overflow: visible;
  transform: none;
}
.ascension-card__check svg {
  width: 23px;
  height: 23px;
}
.ascension-card__offering-star {
  display: none;
}
.ascension-card__offering-label {
  position: relative;
  z-index: 2;
  color: var(--offering-text);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
  text-shadow: none;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(3px);
}
.ascension-card__completed {
  color: var(--offering-text);
  background: linear-gradient(180deg, var(--offering-overlay-top), var(--offering-overlay-bottom));
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
.ascension-card--sacrificing {
  pointer-events: none;
  animation: none !important;
  /*
   * Карта, изображение и нижний блок не анимируются.
   * Ðто убирает основные лаги.
   */
}
.ascension-card--sacrificing .ascension-card__image,
.ascension-card--sacrificing .ascension-card__body,
.ascension-card--sacrificing .ascension-card__replace {
  animation: none !important;
  filter: none !important;
  transform: none !important;
}
.ascension-card--sacrificing .ascension-card__offering-effect {
  visibility: visible;
  animation: ascension-donation-overlay-in 0.48s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.ascension-card--sacrificing .ascension-card__offering-emblem {
  animation: ascension-donation-check-in 0.38s 0.12s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.ascension-card--sacrificing .ascension-card__offering-label {
  animation: ascension-donation-label-in 0.32s 0.22s ease-out forwards;
}
.ascension-card--completed .ascension-card__body {
  animation: ascension-donation-body-in 0.25s ease-out both;
}

@keyframes ascension-donation-overlay-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes ascension-donation-check-in {
  0% {
    opacity: 0;
    transform: translateY(5px) scale(0.94);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes ascension-donation-label-in {
  0% {
    opacity: 0;
    transform: translateY(3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes ascension-donation-body-in {
  0% {
    opacity: 0.45;
  }
  100% {
    opacity: 1;
  }
}
/* Тёмная тема */
body.dark .ascension-card {
  --offering-overlay-top: rgba(24, 22, 32, 0.96);
  --offering-overlay-bottom: rgba(14, 15, 22, 0.98);
  --offering-text: #eee7f8;
  --offering-check-start: #7436d9;
  --offering-check-end: #a65af1;
  --offering-check-border: rgba(238, 218, 255, 0.55);
  --offering-check-ring: rgba(178, 101, 255, 0.17);
  --offering-check-shadow: rgba(123, 48, 207, 0.3);
}

/* Мобильная версия: учитываем уменьшенный внутренний отступ карточки */
@media (max-width: 480px) {
  .ascension-card__offering-effect {
    top: 4px;
    right: 4px;
    left: 4px;
    gap: 8px;
  }
  .ascension-card__offering-emblem, .ascension-card__check {
    width: 36px;
    height: 36px;
  }
  .ascension-card__offering-emblem svg, .ascension-card__check svg {
    width: 20px;
    height: 20px;
  }
  .ascension-card__offering-label {
    font-size: 8px;
  }
}
/* Отключённая системная анимация */
@media (prefers-reduced-motion: reduce) {
  .ascension-card--sacrificing .ascension-card__offering-effect,
  .ascension-card--sacrificing .ascension-card__offering-emblem,
  .ascension-card--sacrificing .ascension-card__offering-label {
    animation: none !important;
  }
  .ascension-card--sacrificing .ascension-card__offering-effect {
    visibility: visible;
    opacity: 1;
  }
  .ascension-card--sacrificing .ascension-card__offering-emblem,
  .ascension-card--sacrificing .ascension-card__offering-label {
    opacity: 1;
    transform: none;
  }
}
.menu__ascension-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 36px;
  margin-top: 10px;
  padding: 7px 10px;
  border: 1px solid rgba(121, 58, 230, 0.13);
  border-radius: 10px;
  background: rgba(121, 58, 230, 0.055);
  color: var(--main-text-color);
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.menu__ascension-row:hover {
  border-color: rgba(121, 58, 230, 0.28);
  background: rgba(121, 58, 230, 0.1);
}

.menu__ascension-row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-right: 7px;
  color: var(--main-purple-color);
}

.menu__ascension-row-icon svg {
  width: 18px;
  height: 18px;
}

.menu__ascension-row-title {
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.menu__ascension-row-level {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--main-purple-color);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.menu__ascension-row-arrow {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  color: var(--main-purple-color);
}

/* Тёмная тема */
body.dark .menu__ascension-row {
  border-color: rgba(169, 121, 255, 0.17);
  background: rgba(140, 78, 235, 0.1);
}

body.dark .menu__ascension-row:hover {
  border-color: rgba(169, 121, 255, 0.32);
  background: rgba(140, 78, 235, 0.16);
}

@media only screen and (max-width: 430px) {
  .menu__ascension-row {
    min-height: 34px;
    margin-top: 8px;
    padding: 6px 8px;
  }
  .menu__ascension-row-level {
    font-size: 10px;
  }
}
/* ==========================================================================
   Выбор тайной награды после повышения уровня
   ========================================================================== */
.ascension-modal--choice {
  z-index: 10020;
}

.ascension-choice-modal {
  --choice-panel-start: #171027;
  --choice-panel-end: #080811;
  --choice-line: rgba(207, 171, 255, 0.2);
  --choice-text: #f8f3ff;
  --choice-muted: #b9adc8;
  --choice-violet: #a565ff;
  --choice-pink: #e18cff;
  --choice-gold: #ffd37d;
  position: relative;
  overflow: hidden;
  width: min(760px, 100vw - 32px);
  max-height: calc(100vh - 32px);
  padding: 34px 38px 30px;
  border: 1px solid var(--choice-line);
  border-radius: 24px;
  background: radial-gradient(circle at 50% -20%, rgba(159, 86, 255, 0.34), transparent 48%), radial-gradient(circle at 8% 80%, rgba(76, 78, 191, 0.17), transparent 40%), linear-gradient(145deg, var(--choice-panel-start), var(--choice-panel-end));
  box-shadow: 0 34px 90px rgba(5, 2, 13, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.025) inset, 0 0 70px rgba(122, 55, 221, 0.16);
  color: var(--choice-text);
  overflow-y: auto;
  isolation: isolate;
}
.ascension-choice-modal::before, .ascension-choice-modal::after {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(198, 149, 255, 0.12);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
.ascension-choice-modal::before {
  top: -255px;
  left: 50%;
  width: 510px;
  height: 510px;
  transform: translateX(-50%);
}
.ascension-choice-modal::after {
  top: -203px;
  left: 50%;
  width: 406px;
  height: 406px;
  transform: translateX(-50%);
}
.ascension-choice-modal__backdrop {
  cursor: default;
  background: radial-gradient(circle at 50% 45%, rgba(68, 32, 115, 0.32), transparent 48%), rgba(2, 2, 8, 0.82);
  -webkit-backdrop-filter: blur(9px);
          backdrop-filter: blur(9px);
}
.ascension-choice-modal__aura {
  position: absolute;
  z-index: -1;
  top: -130px;
  left: 50%;
  width: 520px;
  height: 310px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(156, 80, 255, 0.2);
  filter: blur(68px);
  pointer-events: none;
}
.ascension-choice-modal__constellation {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.ascension-choice-modal__constellation span {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #f5e8ff;
  box-shadow: 0 0 9px rgba(223, 188, 255, 0.9);
  animation: ascension-choice-star 2.8s ease-in-out infinite;
}
.ascension-choice-modal__constellation span:nth-child(1) {
  top: 10%;
  left: 9%;
}
.ascension-choice-modal__constellation span:nth-child(2) {
  top: 18%;
  right: 12%;
  animation-delay: -0.7s;
}
.ascension-choice-modal__constellation span:nth-child(3) {
  top: 42%;
  left: 4%;
  animation-delay: -1.4s;
}
.ascension-choice-modal__constellation span:nth-child(4) {
  top: 52%;
  right: 6%;
  animation-delay: -2.1s;
}
.ascension-choice-modal__constellation span:nth-child(5) {
  bottom: 13%;
  left: 15%;
  animation-delay: -0.4s;
}
.ascension-choice-modal__constellation span:nth-child(6) {
  right: 18%;
  bottom: 9%;
  animation-delay: -1.1s;
}
.ascension-choice-modal__constellation span:nth-child(7) {
  top: 7%;
  left: 68%;
  animation-delay: -1.8s;
}
.ascension-choice-modal__header {
  position: relative;
  z-index: 2;
  max-width: 600px;
  margin: 0 auto 24px;
  text-align: center;
}
.ascension-choice-modal__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 9px;
  color: #cfa7ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.ascension-choice-modal__eyebrow i {
  display: block;
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
}
.ascension-choice-modal__eyebrow i:last-child {
  transform: scaleX(-1);
}
.ascension-choice-modal__title {
  margin: 0;
  background: linear-gradient(180deg, #ffffff, #d9bdff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.12;
}
.ascension-choice-modal__subtitle {
  max-width: 520px;
  margin: 10px auto 0;
  color: var(--choice-muted);
  font-size: 13px;
  line-height: 1.55;
}
.ascension-choice-modal__subtitle strong {
  color: #ead9ff;
  font-weight: 800;
}
.ascension-choice-modal__selection {
  position: relative;
  z-index: 2;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
}
.ascension-choice-modal__spheres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 590px;
  margin: 0 auto 25px;
}
.ascension-choice-modal__odds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(202, 158, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}
.ascension-choice-modal__fairness {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 12px 0 0;
  color: #8f829f;
  font-size: 10px;
  line-height: 1.4;
  text-align: center;
}
.ascension-choice-modal__fairness svg {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #aa79e8;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ascension-choice-sphere {
  position: relative;
  display: flex;
  min-width: 0;
  height: 190px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.4s ease, filter 0.4s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.ascension-choice-sphere::before {
  position: absolute;
  right: 12px;
  bottom: 7px;
  left: 12px;
  height: 28px;
  border-radius: 50%;
  background: rgba(127, 64, 220, 0.3);
  filter: blur(18px);
  content: "";
  transition: opacity 0.3s ease;
}
.ascension-choice-sphere:hover, .ascension-choice-sphere:focus-visible {
  transform: translateY(-7px);
}
.ascension-choice-sphere:hover .ascension-choice-sphere__core, .ascension-choice-sphere:focus-visible .ascension-choice-sphere__core {
  border-color: rgba(239, 216, 255, 0.62);
  box-shadow: 0 0 0 7px rgba(166, 92, 255, 0.08), 0 0 45px rgba(171, 92, 255, 0.5), 0 18px 35px rgba(2, 1, 7, 0.6), inset -18px -20px 32px rgba(50, 18, 103, 0.5), inset 12px 12px 24px rgba(255, 255, 255, 0.18);
}
.ascension-choice-sphere:hover .ascension-choice-sphere__orbit--outer, .ascension-choice-sphere:focus-visible .ascension-choice-sphere__orbit--outer {
  animation-duration: 4s;
}
.ascension-choice-sphere:hover .ascension-choice-sphere__caption, .ascension-choice-sphere:focus-visible .ascension-choice-sphere__caption {
  color: #f0ddff;
}
.ascension-choice-sphere:focus-visible {
  border-radius: 18px;
  box-shadow: 0 0 0 2px rgba(190, 132, 255, 0.55);
}
.ascension-choice-sphere:disabled {
  cursor: default;
}
.ascension-choice-sphere__halo {
  position: absolute;
  top: 20px;
  left: 50%;
  width: 135px;
  height: 135px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 104, 255, 0.33), rgba(113, 55, 232, 0.08) 52%, transparent 72%);
  filter: blur(5px);
  animation: ascension-choice-halo 2.8s ease-in-out infinite;
}
.ascension-choice-sphere__orbit {
  position: absolute;
  top: 27px;
  left: 50%;
  border: 1px solid rgba(222, 186, 255, 0.3);
  border-radius: 50%;
  pointer-events: none;
}
.ascension-choice-sphere__orbit::before, .ascension-choice-sphere__orbit::after {
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #e7c7ff;
  box-shadow: 0 0 10px #b663ff;
  content: "";
}
.ascension-choice-sphere__orbit::before {
  left: -3px;
}
.ascension-choice-sphere__orbit::after {
  right: -3px;
}
.ascension-choice-sphere__orbit--outer {
  width: 132px;
  height: 132px;
  margin-left: -66px;
  transform: rotateX(67deg) rotateZ(12deg);
  animation: ascension-choice-orbit 7s linear infinite;
}
.ascension-choice-sphere__orbit--inner {
  top: 31px;
  width: 124px;
  height: 124px;
  margin-left: -62px;
  transform: rotateY(67deg) rotateZ(-12deg);
  opacity: 0.6;
  animation: ascension-choice-orbit-reverse 8s linear infinite;
}
.ascension-choice-sphere__core {
  position: absolute;
  top: 34px;
  left: 50%;
  overflow: hidden;
  width: 112px;
  height: 112px;
  transform: translateX(-50%);
  border: 1px solid rgba(223, 190, 255, 0.4);
  border-radius: 50%;
  background: radial-gradient(circle at 33% 28%, rgba(255, 255, 255, 0.42), transparent 14%), radial-gradient(circle at 54% 66%, #7e38dc, #3a176d 48%, #160b28 76%);
  box-shadow: 0 0 0 7px rgba(166, 92, 255, 0.05), 0 0 34px rgba(156, 72, 255, 0.36), 0 18px 35px rgba(2, 1, 7, 0.6), inset -18px -20px 32px rgba(50, 18, 103, 0.55), inset 12px 12px 24px rgba(255, 255, 255, 0.13);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.ascension-choice-sphere__core strong {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(246, 230, 255, 0.88);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 36px;
  font-weight: 400;
  text-shadow: 0 0 16px rgba(242, 216, 255, 0.68);
}
.ascension-choice-sphere__mist {
  position: absolute;
  inset: -35%;
  border-radius: 43%;
  background: conic-gradient(from 10deg, transparent, rgba(225, 177, 255, 0.19), transparent 34%, rgba(137, 79, 236, 0.32), transparent 72%);
  animation: ascension-choice-mist 9s linear infinite;
}
.ascension-choice-sphere__shine {
  position: absolute;
  top: 13px;
  left: 20px;
  width: 25px;
  height: 12px;
  transform: rotate(-38deg);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.32);
  filter: blur(2px);
}
.ascension-choice-sphere__base {
  position: absolute;
  bottom: 35px;
  left: 50%;
  width: 92px;
  height: 18px;
  transform: translateX(-50%);
  border: 1px solid rgba(202, 160, 255, 0.24);
  border-radius: 50%;
  background: linear-gradient(180deg, #32204c, #130d20);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.48), inset 0 2px 5px rgba(255, 255, 255, 0.07);
}
.ascension-choice-sphere__caption {
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  color: #9e8cac;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  transition: color 0.25s ease;
}
.ascension-choice-sphere.is-dismissed {
  opacity: 0.12;
  filter: grayscale(0.8);
  transform: scale(0.83);
}
.ascension-choice-sphere.is-opening {
  z-index: 5;
  transform: translateY(-5px) scale(1.08);
}
.ascension-choice-sphere.is-opening .ascension-choice-sphere__core {
  animation: ascension-choice-opening 1.1s ease-in-out infinite;
}
.ascension-choice-sphere.is-opening .ascension-choice-sphere__halo {
  animation: ascension-choice-opening-halo 0.85s ease-in-out infinite;
}
.ascension-choice-sphere.is-opening .ascension-choice-sphere__orbit {
  border-color: rgba(255, 231, 176, 0.64);
}
.ascension-choice-sphere.is-opening .ascension-choice-sphere__orbit--outer {
  animation-duration: 0.9s;
}
.ascension-choice-sphere.is-opening .ascension-choice-sphere__orbit--inner {
  animation-duration: 1.1s;
}
.ascension-choice-sphere.is-opening .ascension-choice-sphere__core strong {
  animation: ascension-choice-question 0.55s ease-in-out infinite alternate;
}

.ascension-choice-odd {
  display: flex;
  min-width: 0;
  min-height: 48px;
  padding: 8px 9px;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
}
.ascension-choice-odd__icon {
  display: flex;
  flex: 0 0 31px;
  width: 31px;
  height: 31px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 9px;
}
.ascension-choice-odd__icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ascension-choice-odd p {
  display: flex;
  min-width: 0;
  margin: 0;
  flex-direction: column;
  gap: 2px;
}
.ascension-choice-odd strong {
  overflow: hidden;
  color: #e9dff2;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ascension-choice-odd p span {
  color: #897e96;
  font-size: 9px;
}
.ascension-choice-odd--essence .ascension-choice-odd__icon {
  background: rgba(67, 195, 255, 0.09);
  color: #6ad7ff;
}
.ascension-choice-odd--scroll .ascension-choice-odd__icon {
  background: rgba(255, 196, 82, 0.09);
  color: #ffd071;
}
.ascension-choice-odd--card .ascension-choice-odd__icon {
  background: rgba(203, 110, 255, 0.1);
  color: #d28cff;
}

.ascension-choice-result {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 38px;
  left: 38px;
  display: flex;
  min-height: 390px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transform: translateY(-46%) scale(0.94);
  visibility: hidden;
  opacity: 0;
  text-align: center;
  transition: opacity 0.38s ease, transform 0.48s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.38s ease;
}
.ascension-choice-result__ray {
  position: absolute;
  z-index: -1;
  top: 48%;
  left: 50%;
  width: 420px;
  height: 1px;
  transform-origin: center;
  background: linear-gradient(90deg, transparent, rgba(214, 174, 255, 0.34), transparent);
  pointer-events: none;
}
.ascension-choice-result__ray--one {
  transform: translate(-50%, -50%) rotate(0deg);
}
.ascension-choice-result__ray--two {
  transform: translate(-50%, -50%) rotate(60deg);
}
.ascension-choice-result__ray--three {
  transform: translate(-50%, -50%) rotate(120deg);
}
.ascension-choice-result__visual {
  position: relative;
  display: flex;
  width: 150px;
  height: 150px;
  margin-bottom: 16px;
  align-items: center;
  justify-content: center;
}
.ascension-choice-result__visual::before {
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(225, 198, 255, 0.22);
  border-radius: 50%;
  box-shadow: 0 0 55px rgba(164, 88, 255, 0.32);
  content: "";
  animation: ascension-choice-result-ring 7s linear infinite;
}
.ascension-choice-result__visual::after {
  position: absolute;
  inset: 20px;
  z-index: -1;
  border-radius: 50%;
  background: rgba(152, 76, 255, 0.24);
  filter: blur(28px);
  content: "";
}
.ascension-choice-result__visual--card::before {
  border-radius: 22px;
}
.ascension-choice-result__label {
  margin-bottom: 6px;
  color: #b58ae9;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}
.ascension-choice-result__title {
  margin: 0;
  background: linear-gradient(180deg, #fff, #dcbfff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  line-height: 1.15;
}
.ascension-choice-result__description {
  max-width: 420px;
  margin: 8px auto 20px;
  color: #afa2bb;
  font-size: 12px;
  line-height: 1.5;
}
.ascension-choice-result__continue {
  min-width: 210px;
  min-height: 43px;
  padding: 10px 24px;
  border: 1px solid rgba(226, 196, 255, 0.25);
  border-radius: 10px;
  background: linear-gradient(135deg, #8a43e7, #6325bb);
  box-shadow: 0 10px 24px rgba(83, 31, 156, 0.33), inset 0 1px rgba(255, 255, 255, 0.17);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.ascension-choice-result__continue:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(83, 31, 156, 0.42), inset 0 1px rgba(255, 255, 255, 0.2);
}
.ascension-choice-result__essence, .ascension-choice-result__scroll {
  position: relative;
  z-index: 2;
  display: flex;
  width: 105px;
  height: 120px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.ascension-choice-result__essence svg, .ascension-choice-result__scroll svg {
  width: 76px;
  height: 76px;
  fill: rgba(77, 194, 255, 0.18);
  stroke: #79ddff;
  stroke-width: 1.3;
  filter: drop-shadow(0 0 15px rgba(70, 198, 255, 0.5));
}
.ascension-choice-result__essence strong, .ascension-choice-result__scroll strong {
  margin-top: -3px;
  color: #bdeeff;
  font-size: 18px;
  text-shadow: 0 0 13px rgba(74, 201, 255, 0.45);
}
.ascension-choice-result__scroll svg {
  fill: rgba(255, 190, 75, 0.13);
  stroke: #ffd273;
  filter: drop-shadow(0 0 15px rgba(255, 185, 62, 0.42));
}
.ascension-choice-result__scroll strong {
  display: flex;
  width: 34px;
  height: 34px;
  margin-top: -48px;
  margin-bottom: 17px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #3a2610;
  color: #ffe0a1;
  font-size: 15px;
}
.ascension-choice-result__scroll.is-blessed svg {
  stroke: #fff0a7;
  filter: drop-shadow(0 0 18px rgba(255, 235, 117, 0.68));
}
.ascension-choice-result__scroll.is-blessed strong {
  background: #5d4015;
  box-shadow: 0 0 17px rgba(255, 211, 85, 0.55);
}
.ascension-choice-result__card {
  position: relative;
  z-index: 2;
  display: block;
  overflow: hidden;
  width: 86px;
  aspect-ratio: 2/3;
  border: 2px solid rgba(225, 193, 255, 0.68);
  border-radius: 9px;
  background: #17101e;
  box-shadow: 0 0 28px rgba(171, 90, 255, 0.42), 0 14px 24px rgba(0, 0, 0, 0.44);
}
.ascension-choice-result__card img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.ascension-choice-result__card-rank {
  position: absolute;
  top: 5px;
  right: 5px;
  display: flex;
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 7px;
  background: rgba(21, 10, 34, 0.88);
  color: #fff;
  font-size: 11px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.32);
}

.ascension-choice-modal--selecting .ascension-choice-modal__header,
.ascension-choice-modal--selecting .ascension-choice-modal__odds,
.ascension-choice-modal--selecting .ascension-choice-modal__fairness {
  opacity: 0.48;
  transition: opacity 0.3s ease;
}

.ascension-choice-modal--resolved .ascension-choice-modal__header,
.ascension-choice-modal--resolved .ascension-choice-modal__selection {
  transform: translateY(-14px) scale(0.96);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.ascension-choice-modal--resolved .ascension-choice-result {
  transform: translateY(-50%) scale(1);
  visibility: visible;
  opacity: 1;
}

.ascension-modal--open .ascension-choice-modal {
  animation: ascension-choice-modal-enter 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ascension-modal--open .ascension-choice-modal__header {
  animation: ascension-choice-rise 0.44s 0.08s ease-out both;
}
.ascension-modal--open .ascension-choice-sphere {
  animation: ascension-choice-sphere-enter 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ascension-modal--open .ascension-choice-sphere:nth-child(1) {
  animation-delay: 0.16s;
}
.ascension-modal--open .ascension-choice-sphere:nth-child(2) {
  animation-delay: 0.23s;
}
.ascension-modal--open .ascension-choice-sphere:nth-child(3) {
  animation-delay: 0.3s;
}
.ascension-modal--open .ascension-choice-modal__odds,
.ascension-modal--open .ascension-choice-modal__fairness {
  animation: ascension-choice-rise 0.42s 0.36s ease-out both;
}

@keyframes ascension-choice-modal-enter {
  from {
    transform: translateY(18px) scale(0.96);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
@keyframes ascension-choice-rise {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes ascension-choice-sphere-enter {
  from {
    transform: translateY(22px) scale(0.82);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
@keyframes ascension-choice-star {
  0%, 100% {
    transform: scale(0.7);
    opacity: 0.28;
  }
  50% {
    transform: scale(1.45);
    opacity: 1;
  }
}
@keyframes ascension-choice-halo {
  0%, 100% {
    transform: translateX(-50%) scale(0.92);
    opacity: 0.65;
  }
  50% {
    transform: translateX(-50%) scale(1.08);
    opacity: 1;
  }
}
@keyframes ascension-choice-orbit {
  from {
    transform: rotateX(67deg) rotateZ(12deg) rotate(0);
  }
  to {
    transform: rotateX(67deg) rotateZ(12deg) rotate(360deg);
  }
}
@keyframes ascension-choice-orbit-reverse {
  from {
    transform: rotateY(67deg) rotateZ(-12deg) rotate(360deg);
  }
  to {
    transform: rotateY(67deg) rotateZ(-12deg) rotate(0);
  }
}
@keyframes ascension-choice-mist {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ascension-choice-opening {
  0%, 100% {
    filter: brightness(1);
    box-shadow: 0 0 0 7px rgba(166, 92, 255, 0.08), 0 0 40px rgba(171, 92, 255, 0.48), inset 0 0 28px rgba(255, 255, 255, 0.12);
  }
  50% {
    filter: brightness(1.5);
    box-shadow: 0 0 0 12px rgba(217, 177, 255, 0.12), 0 0 80px rgba(190, 117, 255, 0.78), inset 0 0 40px rgba(255, 255, 255, 0.3);
  }
}
@keyframes ascension-choice-opening-halo {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translateX(-50%) scale(1.35);
    opacity: 1;
  }
}
@keyframes ascension-choice-question {
  to {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.55;
  }
}
@keyframes ascension-choice-result-ring {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
/* Светлая тема сохраняет мистический тёмный ритуал,
   чтобы сферы одинаково хорошо читались в обеих темах. */
body.dark .ascension-choice-modal {
  --choice-panel-start: #151020;
  --choice-panel-end: #07080d;
  --choice-line: rgba(207, 171, 255, 0.19);
}

@media only screen and (max-width: 700px) {
  .ascension-choice-modal {
    width: min(520px, 100vw - 20px);
    max-height: calc(100vh - 20px);
    padding: 25px 18px 22px;
    border-radius: 18px;
  }
  .ascension-choice-modal__header {
    margin-bottom: 15px;
  }
  .ascension-choice-modal__title {
    font-size: 25px;
  }
  .ascension-choice-modal__subtitle {
    font-size: 11px;
  }
  .ascension-choice-modal__spheres {
    gap: 4px;
    margin-bottom: 17px;
  }
  .ascension-choice-modal__odds {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .ascension-choice-sphere {
    height: 154px;
  }
  .ascension-choice-sphere__halo {
    top: 17px;
    width: 105px;
    height: 105px;
  }
  .ascension-choice-sphere__orbit {
    top: 23px;
  }
  .ascension-choice-sphere__orbit--outer {
    width: 103px;
    height: 103px;
    margin-left: -51.5px;
  }
  .ascension-choice-sphere__orbit--inner {
    top: 26px;
    width: 97px;
    height: 97px;
    margin-left: -48.5px;
  }
  .ascension-choice-sphere__core {
    top: 29px;
    width: 88px;
    height: 88px;
  }
  .ascension-choice-sphere__core strong {
    font-size: 29px;
  }
  .ascension-choice-sphere__base {
    bottom: 29px;
    width: 70px;
    height: 14px;
  }
  .ascension-choice-sphere__caption {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .ascension-choice-result {
    right: 18px;
    left: 18px;
    min-height: 350px;
  }
  .ascension-choice-result__title {
    font-size: 24px;
  }
}
@media only screen and (max-width: 380px) {
  .ascension-choice-modal {
    padding-right: 12px;
    padding-left: 12px;
  }
  .ascension-choice-modal__eyebrow {
    font-size: 8px;
    letter-spacing: 1.7px;
  }
  .ascension-choice-modal__eyebrow i {
    width: 22px;
  }
  .ascension-choice-sphere {
    height: 140px;
  }
  .ascension-choice-sphere__halo {
    width: 92px;
    height: 92px;
  }
  .ascension-choice-sphere__orbit--outer {
    width: 91px;
    height: 91px;
    margin-left: -45.5px;
  }
  .ascension-choice-sphere__orbit--inner {
    width: 85px;
    height: 85px;
    margin-left: -42.5px;
  }
  .ascension-choice-sphere__core {
    width: 78px;
    height: 78px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ascension-choice-modal,
  .ascension-choice-modal__header,
  .ascension-choice-modal__odds,
  .ascension-choice-modal__fairness,
  .ascension-choice-sphere,
  .ascension-choice-sphere__halo,
  .ascension-choice-sphere__orbit,
  .ascension-choice-sphere__mist,
  .ascension-choice-sphere__core,
  .ascension-choice-sphere__core strong,
  .ascension-choice-result__visual::before,
  .ascension-choice-modal__constellation span {
    animation: none !important;
  }
}
.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;
  }
}

.mb-about__svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.mb-about {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  color: #f6f2ff;
  background: radial-gradient(circle at 12% 18%, rgba(83, 29, 132, 0.08), transparent 23rem), radial-gradient(circle at 88% 42%, rgba(66, 25, 114, 0.08), transparent 26rem), linear-gradient(180deg, #05060d 0%, #070710 55%, #05060c 100%);
  font-family: Inter, Roboto, Arial, sans-serif;
  line-height: 1.45;
}
.mb-about *,
.mb-about *::before,
.mb-about *::after {
  box-sizing: border-box;
}
.mb-about a {
  color: inherit;
  text-decoration: none;
}
.mb-about button {
  color: inherit;
  font: inherit;
}
.mb-about svg {
  display: block;
}

.mb-about__container {
  position: relative;
  z-index: 2;
  width: min(1280px, 100% - 48px);
  margin: 0 auto;
}

.mb-about__hero {
  position: relative;
  min-height: 510px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(159, 124, 209, 0.26);
  background: linear-gradient(90deg, rgba(5, 6, 13, 0.99) 0%, rgba(5, 6, 13, 0.94) 38%, rgba(7, 7, 16, 0.55) 63%, rgba(5, 6, 13, 0.94) 100%), repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 8px);
}
.mb-about__hero::before, .mb-about__hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 6px;
  height: 6px;
  background: #b56cff;
  transform: rotate(45deg);
  box-shadow: 0 0 18px 5px rgba(165, 83, 255, 0.68);
}
.mb-about__hero::before {
  top: 72px;
  left: 4.5%;
}
.mb-about__hero::after {
  bottom: 118px;
  right: 4%;
}

.mb-about__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(520px, 1.34fr);
  align-items: center;
  min-height: 510px;
}

.mb-about__hero-copy {
  position: relative;
  z-index: 4;
  padding: 54px 0 56px 28px;
}
.mb-about__hero-copy h1 {
  margin: 2px 0 18px;
  color: #fff;
  font-size: clamp(62px, 6.25vw, 96px);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -4px;
  text-transform: uppercase;
  text-shadow: 0 4px 0 #8c63d1, 0 14px 42px rgba(123, 57, 220, 0.3);
}

.mb-about__eyebrow {
  margin-left: 2px;
  font-size: 25px;
  font-weight: 700;
  text-transform: uppercase;
}

.mb-about__lead {
  margin: 0;
  color: #f7f4fc;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
}

.mb-about__metrics {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 23px;
  margin-top: 34px;
}

.mb-about__metric {
  display: flex;
  align-items: center;
  gap: 9px;
}
.mb-about__metric svg {
  width: 21px;
  height: 21px;
  color: #8e35eb;
  fill: rgba(143, 56, 235, 0.18);
  stroke: currentColor;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 7px rgba(144, 54, 240, 0.74));
}
.mb-about__metric span {
  display: grid;
}
.mb-about__metric strong {
  color: #fff;
  font-size: 16px;
  line-height: 1.1;
  white-space: nowrap;
}
.mb-about__metric small {
  margin-top: 3px;
  color: #8e8999;
  font-size: 9px;
  white-space: nowrap;
}

.mb-about__actions {
  display: flex;
  gap: 20px;
  margin-top: 34px;
}

.mb-about__button {
  min-width: 170px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 650;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.mb-about__button:hover {
  transform: translateY(-1px);
}
.mb-about__button--primary {
  border-color: #8e39ee;
  background: linear-gradient(135deg, #6923c4 0%, #8c2ce7 100%);
  box-shadow: 0 0 25px rgba(124, 43, 232, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.mb-about__button--primary:hover {
  background: linear-gradient(135deg, #7428d4 0%, #9c3bf4 100%);
  box-shadow: 0 0 32px rgba(139, 50, 244, 0.42);
}
.mb-about__button--ghost {
  border-color: rgba(213, 197, 235, 0.55);
  background: rgba(5, 5, 12, 0.42);
}
.mb-about__button--ghost:hover {
  border-color: #bd84ff;
  background: rgba(111, 48, 177, 0.12);
}
.mb-about__button--small {
  min-width: 126px;
  height: 40px;
  margin-top: 7px;
  padding: 0 19px;
}

.mb-about__hero-art {
  position: absolute;
  top: 0;
  right: -4%;
  bottom: 0;
  z-index: 2;
  width: 65%;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 87%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 87%, transparent 100%);
}
.mb-about__hero-art img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 58% 52%;
     object-position: 58% 52%;
  filter: saturate(1.08) contrast(1.04);
}
.mb-about__hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #05060d 0%, transparent 22%, transparent 86%, rgba(5, 6, 13, 0.72) 100%), linear-gradient(0deg, #05060d 0%, transparent 18%, transparent 84%, rgba(5, 6, 13, 0.55) 100%);
}

.mb-about__hero-glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(50px);
  pointer-events: none;
}
.mb-about__hero-glow--one {
  right: 22%;
  width: 260px;
  height: 260px;
  background: rgba(113, 37, 204, 0.22);
}
.mb-about__hero-glow--two {
  right: 5%;
  bottom: 7%;
  width: 170px;
  height: 170px;
  background: rgba(65, 35, 140, 0.18);
}

.mb-about__section {
  margin-top: 36px;
}

.mb-about__title {
  margin: 0 0 16px;
  color: #f8f5ff;
  font-size: 23px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.mb-about__title--center {
  text-align: center;
}

.mb-about__advantages {
  margin-top: 24px;
}

.mb-about__advantage-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 19px;
}

.mb-about__advantage {
  position: relative;
  min-height: 202px;
  overflow: hidden;
  padding: 21px 18px 18px;
  text-align: center;
  border: 1px solid rgba(152, 100, 222, 0.46);
  border-radius: 8px;
  background: radial-gradient(circle at 50% 6%, rgba(109, 45, 173, 0.2), transparent 62%), linear-gradient(150deg, rgba(22, 18, 36, 0.88), rgba(8, 8, 16, 0.92));
  box-shadow: inset 0 0 38px rgba(105, 54, 150, 0.04);
}
.mb-about__advantage::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 18px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #c78aff;
  box-shadow: 0 0 10px 3px rgba(190, 121, 255, 0.6);
}
.mb-about__advantage h3 {
  margin: 10px 0 8px;
  font-size: 13px;
  font-weight: 750;
  text-transform: uppercase;
}
.mb-about__advantage p {
  max-width: 190px;
  margin: auto;
  color: #b4aec1;
  font-size: 11px;
  line-height: 1.48;
}

.mb-about__advantage-icon {
  height: 93px;
  display: grid;
  place-items: center;
}
.mb-about__advantage-icon svg {
  width: 68px;
  height: 68px;
  color: #c693ff;
  fill: rgba(151, 87, 227, 0.18);
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(173, 85, 255, 0.9)) drop-shadow(0 0 17px rgba(118, 45, 215, 0.55));
}

.mb-about__flow {
  margin-top: 26px;
  padding: 20px 32px 18px;
  border: 1px solid rgba(121, 101, 153, 0.3);
  border-radius: 8px;
  background: radial-gradient(circle at 50% 0%, rgba(81, 45, 129, 0.11), transparent 48%), rgba(13, 13, 24, 0.76);
}

.mb-about__flow-list {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.mb-about__flow-step {
  flex: 0 0 122px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.mb-about__flow-step strong {
  margin-top: 8px;
  font-size: 12px;
}
.mb-about__flow-step span {
  margin-top: 5px;
  color: #c5bfce;
  font-size: 10px;
  line-height: 1.28;
}

.mb-about__flow-icon {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  color: #bf91ff;
  border: 1px solid rgba(154, 101, 230, 0.62);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(105, 64, 172, 0.3), rgba(20, 16, 34, 0.86) 68%);
  box-shadow: inset 0 0 28px rgba(116, 57, 205, 0.14), 0 0 20px rgba(77, 34, 150, 0.12);
}
.mb-about__flow-icon svg {
  width: 38px;
  height: 38px;
  fill: rgba(150, 100, 223, 0.2);
  stroke: currentColor;
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(170, 102, 255, 0.65));
}
.mb-about__flow-icon--text {
  font-size: 26px;
  font-weight: 850;
}

.mb-about__flow-arrow {
  flex: 1 1 auto;
  min-width: 25px;
  padding-top: 38px;
}
.mb-about__flow-arrow i {
  position: relative;
  display: block;
  height: 1px;
  background: linear-gradient(90deg, #7c43c2, #ad76ed);
}
.mb-about__flow-arrow i::after {
  content: "";
  position: absolute;
  top: -3px;
  right: 0;
  width: 7px;
  height: 7px;
  border-top: 1px solid #cda7ff;
  border-right: 1px solid #cda7ff;
  transform: rotate(45deg);
}

.mb-about__split {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  gap: 30px;
  align-items: stretch;
}

.mb-about__mechanics,
.mb-about__faq {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.mb-about__mechanics-panel {
  min-height: 452px;
  flex: 1;
  display: grid;
  grid-template-columns: 136px 208px minmax(180px, 1fr);
  overflow: hidden;
  border: 1px solid rgba(89, 80, 111, 0.28);
  border-radius: 7px;
  background: radial-gradient(circle at 45% 55%, rgba(91, 37, 145, 0.11), transparent 44%), rgba(12, 12, 22, 0.92);
}

.mb-about__mechanics-nav {
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(90, 78, 111, 0.32);
  background: rgba(9, 9, 17, 0.5);
}
.mb-about__mechanics-nav button {
  width: 100%;
  min-height: 37px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 17px;
  color: #c9c3d2;
  text-align: left;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 10px;
}
.mb-about__mechanics-nav button svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: #bd87ff;
  fill: rgba(157, 97, 235, 0.16);
  stroke: currentColor;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.mb-about__mechanics-nav button:hover, .mb-about__mechanics-nav button.is-active {
  color: #fff;
  background: linear-gradient(90deg, rgba(117, 46, 202, 0.93), rgba(74, 30, 137, 0.82));
}

.mb-about__mechanics-art {
  position: relative;
  align-self: center;
  height: 335px;
  margin: 25px 0 24px 24px;
  overflow: visible;
  border: 1px solid rgba(147, 88, 219, 0.52);
  border-radius: 8px;
  background: #0c0b15;
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.48);
}
.mb-about__mechanics-art > img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 42%;
     object-position: 50% 42%;
}

.mb-about__mini-cards {
  position: absolute;
  right: 9px;
  bottom: 8px;
  left: 9px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  padding: 6px;
  border: 1px solid rgba(171, 112, 242, 0.38);
  border-radius: 5px;
  background: rgba(8, 7, 15, 0.86);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.mb-about__mini-cards span {
  height: 48px;
  border: 1px solid rgba(177, 115, 241, 0.48);
  border-radius: 3px;
  background: linear-gradient(180deg, transparent 45%, rgba(5, 4, 10, 0.88)), url("/assets/about-mangabuff/mechanics-card.webp") center 26%/cover;
}
.mb-about__mini-cards span:nth-child(2) {
  filter: hue-rotate(20deg);
}
.mb-about__mini-cards span:nth-child(3) {
  filter: hue-rotate(-28deg);
}

.mb-about__mechanics-copy {
  align-self: center;
  padding: 20px 18px 18px 24px;
}
.mb-about__mechanics-copy h3 {
  margin: 0 0 10px;
  font-size: 22px;
}
.mb-about__mechanics-copy h4 {
  margin: 19px 0 8px;
  font-size: 12px;
}
.mb-about__mechanics-copy p {
  margin: 0;
  color: #bbb5c5;
  font-size: 10px;
  line-height: 1.55;
}
.mb-about__mechanics-copy ul {
  display: grid;
  gap: 7px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  color: #d9d4df;
  font-size: 10px;
}
.mb-about__mechanics-copy ul li {
  position: relative;
  padding-left: 18px;
}
.mb-about__mechanics-copy ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #b66cff;
  font-weight: 800;
}

.mb-about__faq-list {
  flex: 1;
  overflow: hidden;
  border: 1px solid rgba(92, 77, 117, 0.34);
  border-radius: 7px;
  background: rgba(14, 13, 25, 0.82);
}

.mb-about__faq details {
  border-bottom: 1px solid rgba(99, 86, 124, 0.27);
  background: linear-gradient(90deg, rgba(21, 20, 35, 0.8), rgba(25, 21, 43, 0.75));
}
.mb-about__faq details:last-child {
  border-bottom: 0;
}
.mb-about__faq details[open] {
  background: linear-gradient(110deg, rgba(34, 28, 54, 0.94), rgba(25, 21, 43, 0.86));
}
.mb-about__faq summary {
  position: relative;
  min-height: 55px;
  display: flex;
  align-items: center;
  padding: 0 42px 0 27px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 560;
  list-style: none;
}
.mb-about__faq summary::-webkit-details-marker {
  display: none;
}
.mb-about__faq summary::after {
  content: "";
  position: absolute;
  right: 25px;
  width: 8px;
  height: 8px;
  border-right: 1px solid #d9caef;
  border-bottom: 1px solid #d9caef;
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.2s ease;
}
.mb-about__faq details[open] summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}
.mb-about__faq p {
  margin: -4px 0 0;
  padding: 0 34px 20px 27px;
  color: #bcb5c6;
  font-size: 11px;
  line-height: 1.55;
}

.mb-about__rarities {
  padding: 12px 9px 10px;
  border: 1px solid rgba(102, 87, 124, 0.28);
  border-radius: 7px;
  background: rgba(7, 8, 15, 0.55);
}
.mb-about__rarities .mb-about__title {
  margin-left: 3px;
}

.mb-about__rarity-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.mb-about__rarity {
  --rarity: #d8d9df;
  --rarity-rgb: 216, 217, 223;
  position: relative;
  min-height: 182px;
  overflow: hidden;
  padding: 16px 12px 13px;
  text-align: center;
  border: 1px solid rgba(var(--rarity-rgb), 0.62);
  border-radius: 7px;
  background: radial-gradient(circle at 50% 24%, rgba(var(--rarity-rgb), 0.24), transparent 46%), linear-gradient(180deg, rgba(var(--rarity-rgb), 0.07), rgba(10, 10, 17, 0.92));
}
.mb-about__rarity::after {
  content: "";
  position: absolute;
  top: 0;
  right: 10%;
  left: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rarity), transparent);
  box-shadow: 0 0 12px 3px rgba(var(--rarity-rgb), 0.45);
}
.mb-about__rarity h3 {
  margin: 3px 0 5px;
  color: var(--rarity);
  font-size: 13px;
  text-transform: uppercase;
  text-shadow: 0 0 13px rgba(var(--rarity-rgb), 0.45);
}
.mb-about__rarity p {
  margin: 0;
  color: #b7b1be;
  font-size: 9.5px;
  line-height: 1.45;
}
.mb-about__rarity--uncommon {
  --rarity: #4eea8b;
  --rarity-rgb: 54, 226, 127;
}
.mb-about__rarity--rare {
  --rarity: #42baff;
  --rarity-rgb: 38, 167, 255;
}
.mb-about__rarity--epic {
  --rarity: #cb61ff;
  --rarity-rgb: 186, 66, 247;
}
.mb-about__rarity--legendary {
  --rarity: #ffc43d;
  --rarity-rgb: 255, 183, 28;
}
.mb-about__rarity--mythic {
  --rarity: #ff5353;
  --rarity-rgb: 245, 51, 54;
}

.mb-about__rarity-symbol {
  position: relative;
  height: 95px;
  display: grid;
  place-items: center;
}
.mb-about__rarity-symbol::before, .mb-about__rarity-symbol::after {
  content: "";
  position: absolute;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(var(--rarity-rgb), 0.5);
  border-radius: 50%;
  box-shadow: inset 0 0 16px rgba(var(--rarity-rgb), 0.28), 0 0 26px rgba(var(--rarity-rgb), 0.31);
}
.mb-about__rarity-symbol::after {
  width: 57px;
  height: 57px;
  border-style: dashed;
  transform: rotate(23deg);
}

.mb-about__rarity-core {
  position: relative;
  z-index: 2;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  -webkit-clip-path: polygon(50% 0, 92% 24%, 92% 76%, 50% 100%, 8% 76%, 8% 24%);
          clip-path: polygon(50% 0, 92% 24%, 92% 76%, 50% 100%, 8% 76%, 8% 24%);
  color: #fff;
  background: linear-gradient(145deg, rgba(var(--rarity-rgb), 0.85), rgba(var(--rarity-rgb), 0.16));
  box-shadow: 0 0 20px rgba(var(--rarity-rgb), 0.9);
}
.mb-about__rarity-core svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mb-about__rarity-wing {
  position: absolute;
  top: 42px;
  z-index: 1;
  width: 38px;
  height: 18px;
  border-top: 3px solid var(--rarity);
  border-radius: 50%;
  filter: drop-shadow(0 0 5px rgba(var(--rarity-rgb), 0.8));
}
.mb-about__rarity-wing--left {
  left: 22px;
  transform: rotate(22deg);
}
.mb-about__rarity-wing--right {
  right: 22px;
  transform: rotate(-22deg);
}

.mb-about__stats {
  position: relative;
  min-height: 165px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 30px;
  padding: 18px 120px 22px;
  border: 1px solid rgba(137, 82, 204, 0.43);
  border-radius: 8px;
  background: #0d0b19;
}
.mb-about__stats > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 55% center;
     object-position: 55% center;
  opacity: 0.64;
  filter: saturate(0.9) contrast(1.1);
}
.mb-about__stats .mb-about__title {
  position: relative;
  z-index: 2;
  margin-bottom: 21px;
  font-size: 16px;
}

.mb-about__stats-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(13, 8, 27, 0.42), rgba(13, 8, 27, 0.83) 24%, rgba(13, 8, 27, 0.75) 76%, rgba(13, 8, 27, 0.38)), linear-gradient(180deg, rgba(8, 7, 16, 0.32), rgba(25, 13, 46, 0.42));
}

.mb-about__stats-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
}
.mb-about__stats-grid div {
  display: grid;
}
.mb-about__stats-grid strong {
  color: #fff;
  font-size: 29px;
  line-height: 1.1;
  white-space: nowrap;
  text-shadow: 0 0 16px rgba(154, 85, 230, 0.25);
}
.mb-about__stats-grid span {
  margin-top: 7px;
  color: #d7d0dd;
  font-size: 10px;
  text-transform: uppercase;
}

.mb-about__split--bottom {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  margin-top: 30px;
}

.mb-about__journey,
.mb-about__reviews {
  min-width: 0;
  padding: 18px 18px 16px;
  border: 1px solid rgba(98, 84, 121, 0.34);
  border-radius: 8px;
  background: radial-gradient(circle at 55% 0, rgba(95, 48, 143, 0.08), transparent 60%), rgba(13, 13, 23, 0.82);
}

.mb-about__rank-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
}

.mb-about__rank {
  --rank: #6b9bc4;
  position: relative;
  min-width: 0;
  text-align: center;
}
.mb-about__rank:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 53px;
  left: calc(50% + 33px);
  width: calc(100% - 49px);
  height: 3px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--rank), #bb58e8);
  box-shadow: 0 0 6px rgba(175, 73, 231, 0.55);
}
.mb-about__rank--collector {
  --rank: #58a7a6;
}
.mb-about__rank--hunter {
  --rank: #a85ec9;
}
.mb-about__rank--master {
  --rank: #e0a844;
}
.mb-about__rank--legend {
  --rank: #f4a523;
}
.mb-about__rank--immortal {
  --rank: #fa4d22;
}
.mb-about__rank > i {
  width: 11px;
  height: 11px;
  display: block;
  margin: 7px auto 12px;
  border-radius: 50%;
  background: var(--rank);
  box-shadow: 0 0 8px 2px var(--rank);
}
.mb-about__rank h3 {
  margin: 0 0 9px;
  font-size: 10px;
  text-transform: uppercase;
}
.mb-about__rank p {
  margin: 0 auto;
  padding: 0 5px;
  color: #b7b1c0;
  font-size: 8px;
  line-height: 1.55;
}

.mb-about__rank-badge {
  position: relative;
  width: 71px;
  height: 71px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  color: #dcecff;
}
.mb-about__rank-badge::before, .mb-about__rank-badge::after {
  content: "";
  position: absolute;
  inset: 10px;
  transform: rotate(45deg);
  border: 1px solid var(--rank);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(17, 27, 37, 0.8));
  box-shadow: 0 0 10px color-mix(in srgb, var(--rank) 65%, transparent), inset 0 0 10px rgba(255, 255, 255, 0.08);
}
.mb-about__rank-badge::after {
  inset: 16px;
  background: var(--rank);
  opacity: 0.28;
}
.mb-about__rank-badge svg {
  position: relative;
  z-index: 2;
  width: 29px;
  height: 29px;
  fill: rgba(255, 255, 255, 0.09);
  stroke: currentColor;
  stroke-width: 3;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px var(--rank));
}

.mb-about__review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}

.mb-about__review {
  min-height: 166px;
  padding: 13px 12px;
  border: 1px solid rgba(143, 93, 201, 0.38);
  border-radius: 7px;
  background: linear-gradient(145deg, rgba(28, 22, 45, 0.88), rgba(13, 13, 24, 0.85));
}
.mb-about__review header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mb-about__review header strong {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mb-about__review p {
  margin: 12px 0 0;
  color: #bbb5c3;
  font-size: 8.5px;
  line-height: 1.6;
}

.mb-about__avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 2px solid #d7b06c;
  border-radius: 50%;
  background: linear-gradient(180deg, transparent 45%, rgba(6, 5, 10, 0.45)), url("/assets/about-mangabuff/mechanics-card.webp") 50% 17%/135%;
}
.mb-about__avatar--a {
  filter: hue-rotate(23deg);
  background-position: 44% 20%;
}
.mb-about__avatar--m {
  filter: hue-rotate(-18deg);
  background-position: 56% 22%;
}

.mb-about__stars {
  margin: 6px 0 0 40px;
  color: #ffc548;
  font-size: 9px;
  letter-spacing: 1px;
  text-shadow: 0 0 7px rgba(255, 184, 48, 0.45);
}

.mb-about__review-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 14px;
}
.mb-about__review-controls button {
  width: 25px;
  height: 25px;
  padding: 0;
  color: #bca6dc;
  border: 0;
  border-radius: 50%;
  background: #211b33;
  font-size: 17px;
  line-height: 1;
}
.mb-about__review-controls i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #4e455e;
}
.mb-about__review-controls i.is-active {
  background: #c6a2ff;
  box-shadow: 0 0 6px #b165ff;
}

.mb-about__cta {
  position: relative;
  min-height: 200px;
  overflow: hidden;
  display: flex;
  align-items: center;
  margin: 30px 0 42px;
  border: 1px solid rgba(147, 84, 221, 0.47);
  border-radius: 8px;
  background: #110b20;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.2);
}
.mb-about__cta > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.mb-about__cta-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(22, 11, 41, 0.98) 0%, rgba(22, 11, 41, 0.91) 31%, rgba(22, 11, 41, 0.25) 66%, rgba(11, 7, 20, 0.22) 100%), linear-gradient(180deg, rgba(10, 6, 18, 0.04), rgba(10, 6, 18, 0.23));
}

.mb-about__cta-copy {
  position: relative;
  z-index: 2;
  padding: 29px 42px;
}
.mb-about__cta-copy h2 {
  margin: 0 0 4px;
  color: #eee2ff;
  font-size: 31px;
  font-weight: 650;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-shadow: 0 0 20px rgba(141, 66, 224, 0.55);
}
.mb-about__cta-copy p {
  margin: 0;
  color: #d7cde3;
  font-size: 13px;
}
.mb-about__cta-copy .mb-about__actions {
  margin-top: 24px;
}
.mb-about__cta-copy .mb-about__button {
  height: 46px;
}

@media (max-width: 1240px) {
  .mb-about__hero-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(450px, 1.05fr);
  }
  .mb-about__hero-copy {
    padding-left: 8px;
  }
  .mb-about__metrics {
    grid-template-columns: repeat(2, max-content);
  }
  .mb-about__advantage-grid {
    gap: 12px;
  }
  .mb-about__flow {
    padding-inline: 20px;
  }
  .mb-about__flow-step {
    flex-basis: 105px;
  }
  .mb-about__mechanics-panel {
    grid-template-columns: 122px 184px minmax(150px, 1fr);
  }
  .mb-about__mechanics-art {
    height: 300px;
    margin-left: 18px;
  }
  .mb-about__rarity-wing--left {
    left: 12px;
  }
  .mb-about__rarity-wing--right {
    right: 12px;
  }
  .mb-about__stats {
    padding-inline: 65px;
  }
}
@media (max-width: 1050px) {
  .mb-about__container {
    width: min(920px, 100% - 34px);
  }
  .mb-about__hero {
    min-height: 650px;
    align-items: flex-end;
  }
  .mb-about__hero-grid {
    display: block;
    min-height: 650px;
  }
  .mb-about__hero-copy {
    width: 65%;
    padding: 88px 0 60px;
  }
  .mb-about__hero-art {
    right: -16%;
    width: 78%;
    opacity: 0.78;
  }
  .mb-about__advantage-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .mb-about__flow {
    overflow-x: auto;
  }
  .mb-about__flow-list {
    width: 940px;
    justify-content: flex-start;
  }
  .mb-about__split,
  .mb-about__split--bottom {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .mb-about__mechanics-panel {
    grid-template-columns: 150px 260px 1fr;
  }
  .mb-about__mechanics-art {
    height: 380px;
  }
  .mb-about__rarity-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .mb-about__rank p {
    font-size: 9px;
  }
}
@media (max-width: 720px) {
  .mb-about__container {
    width: min(100% - 24px, 600px);
  }
  .mb-about__hero {
    min-height: 660px;
  }
  .mb-about__hero-grid {
    min-height: 660px;
  }
  .mb-about__hero-art {
    top: -5px;
    right: -36%;
    bottom: auto;
    width: 126%;
    height: 380px;
    opacity: 0.78;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 64%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 64%, transparent 100%);
  }
  .mb-about__hero-art::after {
    background: linear-gradient(90deg, rgba(5, 6, 13, 0.1), transparent 75%), linear-gradient(0deg, #05060d 0%, transparent 50%);
  }
  .mb-about__hero-copy {
    width: 100%;
    padding: 322px 0 48px;
    text-align: center;
  }
  .mb-about__hero-copy h1 {
    margin-bottom: 15px;
    font-size: clamp(43px, 13.6vw, 64px);
    letter-spacing: -2.4px;
  }
  .mb-about__eyebrow {
    font-size: 19px;
  }
  .mb-about__lead {
    font-size: 14px;
  }
  .mb-about__metrics {
    grid-template-columns: repeat(2, 1fr);
    gap: 17px 10px;
    width: min(390px, 100%);
    margin: 26px auto 0;
    text-align: left;
  }
  .mb-about__metric {
    justify-content: flex-start;
  }
  .mb-about__metric strong {
    font-size: 13px;
  }
  .mb-about__actions {
    justify-content: center;
    gap: 10px;
    margin-top: 26px;
  }
  .mb-about__button {
    min-width: 0;
    width: 100%;
    max-width: 210px;
    height: 47px;
    padding-inline: 14px;
    font-size: 11px;
  }
  .mb-about__title {
    font-size: 19px;
  }
  .mb-about__advantage-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .mb-about__advantage-grid .mb-about__advantage:last-child {
    width: calc(50% - 5px);
    grid-column: 1/-1;
    justify-self: center;
  }
  .mb-about__advantage {
    min-height: 183px;
    padding-inline: 10px;
  }
  .mb-about__advantage-icon {
    height: 82px;
  }
  .mb-about__flow {
    margin-inline: 0;
    padding-inline: 14px;
  }
  .mb-about__mechanics-panel {
    display: grid;
    grid-template-columns: 89px minmax(0, 1fr);
    min-height: 0;
  }
  .mb-about__mechanics-nav {
    grid-row: span 2;
  }
  .mb-about__mechanics-nav button {
    min-height: 37px;
    gap: 7px;
    padding: 0 8px;
    font-size: 8px;
  }
  .mb-about__mechanics-nav button svg {
    width: 13px;
    height: 13px;
  }
  .mb-about__mechanics-art {
    width: min(240px, 100% - 30px);
    height: 345px;
    margin: 22px auto 0;
  }
  .mb-about__mechanics-copy {
    padding: 24px 20px 26px;
  }
  .mb-about__rarity-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .mb-about__stats {
    min-height: 250px;
    padding: 20px;
  }
  .mb-about__stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 10px;
  }
  .mb-about__stats-grid strong {
    font-size: 22px;
  }
  .mb-about__rank-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px 0;
  }
  .mb-about__rank:not(:last-child)::after {
    display: none;
  }
  .mb-about__review-grid {
    grid-template-columns: 1fr;
  }
  .mb-about__review {
    min-height: 128px;
  }
  .mb-about__review p {
    font-size: 10px;
  }
  .mb-about__cta {
    min-height: 330px;
    align-items: flex-end;
  }
  .mb-about__cta > img {
    -o-object-position: 65% top;
       object-position: 65% top;
  }
  .mb-about__cta-shade {
    background: linear-gradient(0deg, rgba(18, 9, 34, 0.98) 0%, rgba(18, 9, 34, 0.89) 48%, rgba(18, 9, 34, 0.08) 100%);
  }
  .mb-about__cta-copy {
    width: 100%;
    padding: 32px 22px;
    text-align: center;
  }
  .mb-about__cta-copy h2 {
    font-size: 24px;
  }
  .mb-about__cta-copy .mb-about__actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 430px) {
  .mb-about__hero {
    min-height: 650px;
  }
  .mb-about__hero-grid {
    min-height: 650px;
  }
  .mb-about__hero-art {
    right: -46%;
    width: 145%;
    height: 350px;
  }
  .mb-about__hero-copy {
    padding-top: 300px;
  }
  .mb-about__metrics {
    gap: 14px 6px;
  }
  .mb-about__metric {
    gap: 6px;
  }
  .mb-about__metric svg {
    width: 17px;
    height: 17px;
  }
  .mb-about__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mb-about__advantage-grid {
    gap: 9px;
  }
  .mb-about__advantage {
    min-height: 177px;
  }
  .mb-about__advantage h3 {
    font-size: 10px;
  }
  .mb-about__advantage p {
    font-size: 9px;
  }
  .mb-about__advantage-icon svg {
    width: 58px;
    height: 58px;
  }
  .mb-about__mechanics-panel {
    grid-template-columns: 76px minmax(0, 1fr);
  }
  .mb-about__mechanics-nav button {
    padding-inline: 7px;
  }
  .mb-about__mechanics-nav button span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mb-about__mechanics-art {
    height: 300px;
  }
  .mb-about__rarity {
    min-height: 172px;
    padding-inline: 7px;
  }
  .mb-about__rarity-wing {
    display: none;
  }
  .mb-about__rarity h3 {
    font-size: 11px;
  }
  .mb-about__stats-grid strong {
    font-size: 18px;
  }
  .mb-about__rank-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .mb-about__cta-copy h2 {
    font-size: 21px;
  }
  .mb-about__cta-copy p {
    font-size: 11px;
  }
  .mb-about__cta-copy .mb-about__button {
    font-size: 9px;
  }
}
.moderator-tools-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 12px 40px;
  color: var(--moderator-tools-text, #232331);
  --moderator-tools-bg: #ffffff;
  --moderator-tools-bg-soft: #f6f6fb;
  --moderator-tools-bg-soft-2: #f0f0f7;
  --moderator-tools-text: #232331;
  --moderator-tools-muted: #77778a;
  --moderator-tools-border: #e4e4ef;
  --moderator-tools-primary: #7b5cff;
  --moderator-tools-primary-hover: #6848f5;
  --moderator-tools-primary-soft: #f0efff;
  --moderator-tools-primary-text: #5d43d8;
  --moderator-tools-shadow: 0 8px 24px rgba(25, 25, 45, .06);
}
.moderator-tools-page__header, .moderator-tools-page__card, .moderator-tools-page__empty {
  background: var(--moderator-tools-bg);
  border: 1px solid var(--moderator-tools-border);
  box-shadow: var(--moderator-tools-shadow);
}
.moderator-tools-page__header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 20px;
  border-radius: 18px;
  margin-bottom: 16px;
}
.moderator-tools-page__title {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 800;
  color: var(--moderator-tools-text);
}
.moderator-tools-page__subtitle, .moderator-tools-page__muted {
  color: var(--moderator-tools-muted);
  font-size: 14px;
}
.moderator-tools-page__alert {
  padding: 14px 16px;
  border-radius: 14px;
  margin-bottom: 16px;
  font-weight: 700;
}
.moderator-tools-page__alert--success {
  background: #eafaf0;
  border: 1px solid #bcebc9;
  color: #1f8f49;
}
.moderator-tools-page__alert--error {
  background: #fff0f0;
  border: 1px solid #ffcaca;
  color: #c93636;
}
.moderator-tools-page__list, .moderator-tools-page__grid {
  display: grid;
  gap: 16px;
}
.moderator-tools-page__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.moderator-tools-page__card {
  border-radius: 18px;
  padding: 16px;
}
.moderator-tools-page__card--full {
  grid-column: 1/-1;
}
.moderator-tools-page__card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}
.moderator-tools-page__name {
  font-size: 18px;
  font-weight: 800;
  color: var(--moderator-tools-text);
  margin-bottom: 10px;
}
.moderator-tools-page__permissions, .moderator-tools-page__tags {
  display: grid;
  gap: 10px;
}
.moderator-tools-page__permissions {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.moderator-tools-page__tags {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  max-height: 460px;
  overflow: auto;
  padding: 8px;
  background: var(--moderator-tools-bg-soft);
  border-radius: 14px;
  margin-bottom: 12px;
  border: 1px solid var(--moderator-tools-border);
}
.moderator-tools-page__checkbox {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px;
  border-radius: 13px;
  background: var(--moderator-tools-bg-soft);
  border: 1px solid var(--moderator-tools-border);
  cursor: pointer;
  font-size: 14px;
  color: var(--moderator-tools-text);
}
.moderator-tools-page__checkbox input {
  width: 18px;
  height: 18px;
  accent-color: var(--moderator-tools-primary);
  flex-shrink: 0;
}
.moderator-tools-page__checkbox span {
  line-height: 1.35;
}
.moderator-tools-page__checkbox:hover {
  background: var(--moderator-tools-bg-soft-2);
}
.moderator-tools-page__input, .moderator-tools-page__textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--moderator-tools-bg);
  color: var(--moderator-tools-text);
  border: 1px solid var(--moderator-tools-border);
  border-radius: 14px;
  padding: 13px;
  outline: none;
  margin-bottom: 12px;
}
.moderator-tools-page__input::-moz-placeholder, .moderator-tools-page__textarea::-moz-placeholder {
  color: var(--moderator-tools-muted);
}
.moderator-tools-page__input::placeholder, .moderator-tools-page__textarea::placeholder {
  color: var(--moderator-tools-muted);
}
.moderator-tools-page__input:focus, .moderator-tools-page__textarea:focus {
  border-color: var(--moderator-tools-primary);
  box-shadow: 0 0 0 3px rgba(123, 92, 255, 0.14);
}
.moderator-tools-page__textarea {
  resize: vertical;
  min-height: 220px;
  line-height: 1.5;
}
.moderator-tools-page__btn, .moderator-tools-page__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: 11px 16px;
  cursor: pointer;
  font-weight: 800;
  text-decoration: none;
  transition: 0.15s ease;
}
.moderator-tools-page__btn {
  border: 0;
  background: var(--moderator-tools-primary);
  color: #ffffff;
}
.moderator-tools-page__btn:hover {
  background: var(--moderator-tools-primary-hover);
}
.moderator-tools-page__link {
  background: var(--moderator-tools-primary-soft);
  color: var(--moderator-tools-primary-text);
  border: 1px solid #dad5ff;
  white-space: nowrap;
}
.moderator-tools-page__link:hover {
  background: #e5e1ff;
}
.moderator-tools-page__empty {
  padding: 20px;
  border-radius: 16px;
  color: var(--moderator-tools-muted);
}

/* Темная тема: оставил сразу несколько популярных вариантов */
body.dark .moderator-tools-page,
html.dark .moderator-tools-page,
body.theme-dark .moderator-tools-page,
html.theme-dark .moderator-tools-page,
body[data-theme=dark] .moderator-tools-page,
html[data-theme=dark] .moderator-tools-page {
  --moderator-tools-bg: #24252d;
  --moderator-tools-bg-soft: #2d2e37;
  --moderator-tools-bg-soft-2: #353642;
  --moderator-tools-text: #ffffff;
  --moderator-tools-muted: #a7a7b5;
  --moderator-tools-border: #3c3d49;
  --moderator-tools-primary: #8b72ff;
  --moderator-tools-primary-hover: #9a84ff;
  --moderator-tools-primary-soft: #343542;
  --moderator-tools-primary-text: #ffffff;
  --moderator-tools-shadow: none;
}
body.dark .moderator-tools-page__alert--success,
html.dark .moderator-tools-page__alert--success,
body.theme-dark .moderator-tools-page__alert--success,
html.theme-dark .moderator-tools-page__alert--success,
body[data-theme=dark] .moderator-tools-page__alert--success,
html[data-theme=dark] .moderator-tools-page__alert--success {
  background: rgba(46, 204, 113, 0.14);
  border-color: rgba(46, 204, 113, 0.35);
  color: #7dffae;
}
body.dark .moderator-tools-page__alert--error,
html.dark .moderator-tools-page__alert--error,
body.theme-dark .moderator-tools-page__alert--error,
html.theme-dark .moderator-tools-page__alert--error,
body[data-theme=dark] .moderator-tools-page__alert--error,
html[data-theme=dark] .moderator-tools-page__alert--error {
  background: rgba(255, 77, 77, 0.14);
  border-color: rgba(255, 77, 77, 0.35);
  color: #ff9a9a;
}
body.dark .moderator-tools-page__link,
html.dark .moderator-tools-page__link,
body.theme-dark .moderator-tools-page__link,
html.theme-dark .moderator-tools-page__link,
body[data-theme=dark] .moderator-tools-page__link,
html[data-theme=dark] .moderator-tools-page__link {
  border-color: var(--moderator-tools-border);
}
body.dark .moderator-tools-page__link:hover,
html.dark .moderator-tools-page__link:hover,
body.theme-dark .moderator-tools-page__link:hover,
html.theme-dark .moderator-tools-page__link:hover,
body[data-theme=dark] .moderator-tools-page__link:hover,
html[data-theme=dark] .moderator-tools-page__link:hover {
  background: #3d3e4c;
}

/* Если темная тема висит не на body/html, а на общем wrapper */
.dark .moderator-tools-page,
.theme-dark .moderator-tools-page,
[data-theme=dark] .moderator-tools-page {
  --moderator-tools-bg: #24252d;
  --moderator-tools-bg-soft: #2d2e37;
  --moderator-tools-bg-soft-2: #353642;
  --moderator-tools-text: #ffffff;
  --moderator-tools-muted: #a7a7b5;
  --moderator-tools-border: #3c3d49;
  --moderator-tools-primary: #8b72ff;
  --moderator-tools-primary-hover: #9a84ff;
  --moderator-tools-primary-soft: #343542;
  --moderator-tools-primary-text: #ffffff;
  --moderator-tools-shadow: none;
}

@media (max-width: 700px) {
  .moderator-tools-page__header {
    flex-direction: column;
    align-items: flex-start;
  }
  .moderator-tools-page__grid {
    grid-template-columns: 1fr;
  }
  .moderator-tools-page__card-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .moderator-tools-page__btn, .moderator-tools-page__link {
    width: 100%;
  }
}
.manga__moder-edit {
  width: 100%;
}

.moderator-tools-page__poster-preview {
  width: 140px;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--moderator-tools-border);
  background: var(--moderator-tools-bg-soft);
  margin-bottom: 12px;
}
.moderator-tools-page__poster-preview img {
  display: block;
  width: 100%;
  height: auto;
}

.moderator-tools-page__sources {
  display: grid;
  gap: 14px;
  margin-bottom: 22px;
}
.moderator-tools-page__source {
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--moderator-tools-border);
  background: var(--moderator-tools-bg-soft);
}
.moderator-tools-page__source-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.moderator-tools-page__source-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--moderator-tools-text);
  margin-bottom: 5px;
}
.moderator-tools-page__source-url {
  display: block;
  color: var(--moderator-tools-primary-text);
  font-size: 13px;
  word-break: break-all;
  text-decoration: none;
}
.moderator-tools-page__source-url:hover {
  text-decoration: underline;
}
.moderator-tools-page__source-state {
  flex-shrink: 0;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}
.moderator-tools-page__source-state.is-enabled {
  background: #eafaf0;
  color: #1f8f49;
}
.moderator-tools-page__source-state.is-disabled {
  background: #f0f0f4;
  color: #81818f;
}
.moderator-tools-page__source-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.moderator-tools-page__source-info > div {
  background: var(--moderator-tools-bg);
  border: 1px solid var(--moderator-tools-border);
  border-radius: 12px;
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.moderator-tools-page__source-info span {
  color: var(--moderator-tools-muted);
  font-size: 12px;
}
.moderator-tools-page__source-info strong {
  color: var(--moderator-tools-text);
  font-size: 14px;
}
.moderator-tools-page__source-settings {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 120px minmax(190px, auto) auto;
  gap: 12px;
  align-items: end;
}
.moderator-tools-page__source-settings .moderator-tools-page__input {
  margin-bottom: 0;
}
.moderator-tools-page__field-label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--moderator-tools-muted);
}
.moderator-tools-page__source-enabled {
  padding-bottom: 0;
}
.moderator-tools-page__source-enabled .moderator-tools-page__checkbox {
  min-height: 45px;
  box-sizing: border-box;
}
.moderator-tools-page__source-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.moderator-tools-page__source-actions form {
  margin: 0;
}
.moderator-tools-page__source-error {
  padding: 10px 12px;
  border-radius: 11px;
  margin-bottom: 12px;
  background: #fff0f0;
  border: 1px solid #ffcaca;
  color: #c93636;
  font-size: 13px;
}
.moderator-tools-page__source-add {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--moderator-tools-border);
}
.moderator-tools-page__source-add-title {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 13px;
  color: var(--moderator-tools-text);
}
.moderator-tools-page__source-add-grid {
  display: grid;
  grid-template-columns: 160px minmax(260px, 1fr) 250px 110px;
  gap: 12px;
}
.moderator-tools-page__source-add-grid .moderator-tools-page__input {
  margin-bottom: 12px;
}
.moderator-tools-page__btn--secondary {
  background: var(--moderator-tools-primary-soft);
  color: var(--moderator-tools-primary-text);
  border: 1px solid var(--moderator-tools-border);
}
.moderator-tools-page__btn--secondary:hover {
  background: var(--moderator-tools-bg-soft-2);
}
.moderator-tools-page__btn--danger {
  background: #fff0f0;
  color: #c93636;
  border: 1px solid #ffcaca;
}
.moderator-tools-page__btn--danger:hover {
  background: #ffe3e3;
}

body.dark .moderator-tools-page__source-state.is-enabled,
html.dark .moderator-tools-page__source-state.is-enabled,
.dark .moderator-tools-page__source-state.is-enabled,
.theme-dark .moderator-tools-page__source-state.is-enabled,
[data-theme=dark] .moderator-tools-page__source-state.is-enabled {
  background: rgba(46, 204, 113, 0.14);
  color: #7dffae;
}
body.dark .moderator-tools-page__source-state.is-disabled,
html.dark .moderator-tools-page__source-state.is-disabled,
.dark .moderator-tools-page__source-state.is-disabled,
.theme-dark .moderator-tools-page__source-state.is-disabled,
[data-theme=dark] .moderator-tools-page__source-state.is-disabled {
  background: #353642;
  color: #aaaab6;
}
body.dark .moderator-tools-page__source-error,
html.dark .moderator-tools-page__source-error,
.dark .moderator-tools-page__source-error,
.theme-dark .moderator-tools-page__source-error,
[data-theme=dark] .moderator-tools-page__source-error {
  background: rgba(255, 77, 77, 0.14);
  border-color: rgba(255, 77, 77, 0.35);
  color: #ff9a9a;
}
body.dark .moderator-tools-page__btn--danger,
html.dark .moderator-tools-page__btn--danger,
.dark .moderator-tools-page__btn--danger,
.theme-dark .moderator-tools-page__btn--danger,
[data-theme=dark] .moderator-tools-page__btn--danger {
  background: rgba(255, 77, 77, 0.12);
  border-color: rgba(255, 77, 77, 0.3);
  color: #ff9a9a;
}
body.dark .moderator-tools-page__btn--danger:hover,
html.dark .moderator-tools-page__btn--danger:hover,
.dark .moderator-tools-page__btn--danger:hover,
.theme-dark .moderator-tools-page__btn--danger:hover,
[data-theme=dark] .moderator-tools-page__btn--danger:hover {
  background: rgba(255, 77, 77, 0.2);
}

@media (max-width: 900px) {
  .moderator-tools-page__source-settings, .moderator-tools-page__source-add-grid {
    grid-template-columns: 1fr 1fr;
  }
  .moderator-tools-page__source-url-field {
    grid-column: 1/-1;
  }
}
@media (max-width: 600px) {
  .moderator-tools-page__source-head {
    flex-direction: column;
  }
  .moderator-tools-page__source-info, .moderator-tools-page__source-settings, .moderator-tools-page__source-add-grid {
    grid-template-columns: 1fr;
  }
  .moderator-tools-page__source-url-field {
    grid-column: auto;
  }
  .moderator-tools-page__source-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .moderator-tools-page__source-actions form,
  .moderator-tools-page__source-actions button {
    width: 100%;
  }
}
/* =========================================================
   AUTOTRANSLATE: preview + global list + logs
   ========================================================= */
.moderator-tools-page__source-preview {
  margin: 14px 0;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--moderator-tools-border);
  background: var(--moderator-tools-bg-soft);
}
.moderator-tools-page__source-preview[hidden] {
  display: none !important;
}
.moderator-tools-page__source-preview.is-loading {
  opacity: 0.65;
}
.moderator-tools-page__source-preview.is-error {
  background: #fff0f0;
  border-color: #ffcaca;
  color: #c93636;
}
.moderator-tools-page__source-preview.is-success {
  background: #f4fff7;
  border-color: #c8ecd2;
}
.moderator-tools-page__source-preview-title {
  font-weight: 800;
  color: var(--moderator-tools-text);
  margin-bottom: 10px;
}
.moderator-tools-page__source-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.moderator-tools-page__source-preview-item {
  padding: 10px;
  border-radius: 11px;
  border: 1px solid var(--moderator-tools-border);
  background: var(--moderator-tools-bg);
}
.moderator-tools-page__source-preview-item span {
  display: block;
  font-size: 11px;
  color: var(--moderator-tools-muted);
  margin-bottom: 4px;
}
.moderator-tools-page__source-preview-item strong {
  color: var(--moderator-tools-text);
}
.moderator-tools-page__source-preview-missing {
  margin-top: 10px;
  line-height: 1.55;
  color: var(--moderator-tools-text);
  word-break: break-word;
}
.moderator-tools-page__source-add-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}
.moderator-tools-page__auto-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.moderator-tools-page__auto-stat {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px;
  border-radius: 15px;
  background: var(--moderator-tools-bg);
  border: 1px solid var(--moderator-tools-border);
  box-shadow: var(--moderator-tools-shadow);
  text-decoration: none;
}
.moderator-tools-page__auto-stat span {
  color: var(--moderator-tools-muted);
  font-size: 12px;
}
.moderator-tools-page__auto-stat strong {
  color: var(--moderator-tools-text);
  font-size: 24px;
}
.moderator-tools-page__auto-stat.has-error strong {
  color: #c93636;
}
.moderator-tools-page__auto-filter {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 13px;
}
.moderator-tools-page__auto-filter .moderator-tools-page__input {
  margin-bottom: 0;
  flex: 1;
}
.moderator-tools-page__auto-tabs {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.moderator-tools-page__auto-tabs a {
  display: inline-flex;
  padding: 8px 11px;
  border-radius: 10px;
  border: 1px solid var(--moderator-tools-border);
  background: var(--moderator-tools-bg-soft);
  color: var(--moderator-tools-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}
.moderator-tools-page__auto-tabs a.is-active {
  background: var(--moderator-tools-primary-soft);
  color: var(--moderator-tools-primary-text);
  border-color: #dad5ff;
}
.moderator-tools-page__table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.moderator-tools-page__auto-table {
  width: 100%;
  min-width: 950px;
  border-collapse: collapse;
}
.moderator-tools-page__auto-table th,
.moderator-tools-page__auto-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--moderator-tools-border);
  text-align: left;
  vertical-align: middle;
  color: var(--moderator-tools-text);
  font-size: 13px;
}
.moderator-tools-page__auto-table th {
  color: var(--moderator-tools-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.moderator-tools-page__auto-table tbody tr:hover {
  background: var(--moderator-tools-bg-soft);
}
.moderator-tools-page__auto-table a {
  color: var(--moderator-tools-primary-text);
}
.moderator-tools-page__auto-manga {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 220px;
}
.moderator-tools-page__auto-manga img {
  width: 38px;
  height: 52px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 7px;
  border: 1px solid var(--moderator-tools-border);
  flex-shrink: 0;
}
.moderator-tools-page__auto-manga strong,
.moderator-tools-page__auto-manga span {
  display: block;
}
.moderator-tools-page__auto-manga span {
  margin-top: 3px;
  color: var(--moderator-tools-muted);
  font-size: 11px;
}
.moderator-tools-page__auto-badge {
  display: inline-flex;
  margin-top: 5px;
  margin-right: 4px;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 800;
}
.moderator-tools-page__auto-badge.is-disabled {
  background: var(--moderator-tools-bg-soft-2);
  color: var(--moderator-tools-muted);
}
.moderator-tools-page__auto-badge.is-error {
  background: #fff0f0;
  color: #c93636;
}
.moderator-tools-page__auto-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.moderator-tools-page__auto-actions form {
  margin: 0;
}
.moderator-tools-page__auto-actions .moderator-tools-page__btn,
.moderator-tools-page__auto-actions .moderator-tools-page__link {
  width: auto;
  padding: 8px 10px;
  font-size: 12px;
}
.moderator-tools-page__log-table {
  min-width: 1000px;
}
.moderator-tools-page__log-level {
  display: inline-flex;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}
.moderator-tools-page__log-level.is-info {
  background: var(--moderator-tools-primary-soft);
  color: var(--moderator-tools-primary-text);
}
.moderator-tools-page__log-level.is-warning {
  background: #fff8dc;
  color: #a46d00;
}
.moderator-tools-page__log-level.is-error {
  background: #fff0f0;
  color: #c93636;
}

body.dark .moderator-tools-page__source-preview.is-success,
html.dark .moderator-tools-page__source-preview.is-success,
.dark .moderator-tools-page__source-preview.is-success,
.theme-dark .moderator-tools-page__source-preview.is-success,
[data-theme=dark] .moderator-tools-page__source-preview.is-success {
  background: rgba(46, 204, 113, 0.08);
  border-color: rgba(46, 204, 113, 0.25);
}
body.dark .moderator-tools-page__source-preview.is-error,
html.dark .moderator-tools-page__source-preview.is-error,
.dark .moderator-tools-page__source-preview.is-error,
.theme-dark .moderator-tools-page__source-preview.is-error,
[data-theme=dark] .moderator-tools-page__source-preview.is-error {
  background: rgba(255, 77, 77, 0.12);
  border-color: rgba(255, 77, 77, 0.3);
  color: #ff9a9a;
}
body.dark .moderator-tools-page__auto-badge.is-error, body.dark .moderator-tools-page__log-level.is-error,
html.dark .moderator-tools-page__auto-badge.is-error,
html.dark .moderator-tools-page__log-level.is-error,
.dark .moderator-tools-page__auto-badge.is-error,
.dark .moderator-tools-page__log-level.is-error,
.theme-dark .moderator-tools-page__auto-badge.is-error,
.theme-dark .moderator-tools-page__log-level.is-error,
[data-theme=dark] .moderator-tools-page__auto-badge.is-error,
[data-theme=dark] .moderator-tools-page__log-level.is-error {
  background: rgba(255, 77, 77, 0.14);
  color: #ff9a9a;
}
body.dark .moderator-tools-page__log-level.is-warning,
html.dark .moderator-tools-page__log-level.is-warning,
.dark .moderator-tools-page__log-level.is-warning,
.theme-dark .moderator-tools-page__log-level.is-warning,
[data-theme=dark] .moderator-tools-page__log-level.is-warning {
  background: rgba(255, 196, 0, 0.11);
  color: #ffd76b;
}

@media (max-width: 800px) {
  .moderator-tools-page__source-preview-grid, .moderator-tools-page__auto-summary {
    grid-template-columns: 1fr 1fr;
  }
  .moderator-tools-page__auto-filter {
    align-items: stretch;
    flex-direction: column;
  }
  .moderator-tools-page__auto-filter .moderator-tools-page__btn,
  .moderator-tools-page__auto-filter .moderator-tools-page__link {
    width: 100%;
  }
}
@media (max-width: 520px) {
  .moderator-tools-page__source-preview-grid, .moderator-tools-page__auto-summary {
    grid-template-columns: 1fr;
  }
  .moderator-tools-page__source-add-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .moderator-tools-page__source-add-actions button {
    width: 100%;
  }
}
@font-face {
  font-family: "MBFTowerCondensed";
  src: url("/assets/tower-raid/roboto-condensed-cyrillic.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Server-connected controls added by the Tower v2 module. */
.mbf-abyss-tower__route-choice {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
}
.mbf-abyss-tower__route-choice > span {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.mbf-abyss-tower__route-choice button {
  min-height: 30px;
  border: 1px solid rgba(83, 135, 174, 0.55);
  color: #92979f;
  background: rgba(2, 10, 18, 0.75);
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.mbf-abyss-tower__route-choice button.is-selected {
  border-color: #ad57ff;
  color: #fff;
  box-shadow: inset 0 0 16px rgba(173, 87, 255, 0.22), 0 0 12px rgba(173, 87, 255, 0.18);
}
.mbf-abyss-tower__route-choice button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.mbf-abyss-tower [data-tower-report]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.4);
}
.mbf-abyss-tower.is-api-busy [data-tower-send],
.mbf-abyss-tower.is-api-busy [data-tower-accelerate],
.mbf-abyss-tower.is-api-busy [data-tower-claim] {
  pointer-events: none;
  opacity: 0.65;
}

.mbf-tower-hq [data-hq-order-select]:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.45);
}

.mbf-tower-hq__upgrade-icon--fortitude {
  background-image: url("/assets/tower-raid/hq-v2/upgrade-endurance.png") !important;
}

.mbf-tower-hq__upgrade-icon--mentorship {
  background-image: url("/assets/tower-raid/hq-v2/upgrade-mentoring.png") !important;
}

.mbf-tower-hq__order-icon--hunt {
  background-image: url("/assets/tower-raid/hq-v2/order-boss-hunt.png") !important;
}

.mbf-tower-hq__order-icon--mentorship {
  background-image: url("/assets/tower-raid/hq-v2/order-training.png") !important;
}

.mbf-tower-hq__order-icon--balanced {
  background-image: url("/assets/tower-raid/hq-v2/order-crest.png") !important;
}

@media (min-width: 981px) {
  .mbf-tower-hq__order-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .mbf-abyss-tower--desktop .mbf-abyss-tower__prep-cards.is-scrollable {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 8.35cqw;
    justify-content: start;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(40, 196, 255, 0.55) rgba(2, 10, 18, 0.65);
  }
}
@media (max-width: 980px) {
  .mbf-abyss-tower--mobile .mbf-abyss-tower__prep-cards.is-scrollable {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 20vw;
    justify-content: start;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(40, 196, 255, 0.55) rgba(2, 10, 18, 0.65);
  }
}
@font-face {
  font-family: "MBFTowerCondensed";
  src: url("/assets/tower-raid/roboto-condensed-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
.mbf-abyss-tower {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  color: #d5d8dc;
  background: #030a11;
  font-family: "MBFTowerCondensed", "Arial Narrow", Arial, sans-serif;
  font-weight: 500;
  isolation: isolate;
  /* =========================
     Desktop: макет 1672 × 874
     ========================= */
  /* ======================
     Mobile: макет 864 × 1821
     ====================== */
}
.mbf-abyss-tower *,
.mbf-abyss-tower *::before,
.mbf-abyss-tower *::after {
  box-sizing: border-box;
}
.mbf-abyss-tower button,
.mbf-abyss-tower a {
  font: inherit;
}
.mbf-abyss-tower button {
  margin: 0;
}
.mbf-abyss-tower__backdrop {
  position: absolute;
  z-index: -3;
  inset: 0;
  overflow: hidden;
  background: #020810;
}
.mbf-abyss-tower__backdrop::before, .mbf-abyss-tower__backdrop::after {
  position: absolute;
  content: "";
  pointer-events: none;
}
.mbf-abyss-tower__backdrop::before {
  inset: 0;
  background-image: url("/assets/tower-raid/tower-background.webp");
  background-position: center top;
  background-repeat: no-repeat;
}
.mbf-abyss-tower__backdrop::after {
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 5, 10, 0.32), transparent 18%, transparent 82%, rgba(0, 5, 10, 0.32)), linear-gradient(180deg, transparent 42%, rgba(1, 7, 13, 0.48) 61%, #020810 89%);
}
.mbf-abyss-tower__desktop-stage, .mbf-abyss-tower__mobile-stage {
  position: relative;
  width: 100%;
}
.mbf-abyss-tower__panel {
  position: absolute;
  z-index: 5;
  overflow: hidden;
  border: 1px solid rgba(109, 139, 169, 0.48);
  color: #d5d8dc;
  background: linear-gradient(145deg, rgba(14, 25, 36, 0.9), rgba(1, 8, 14, 0.96) 36%, rgba(2, 10, 17, 0.94));
  -webkit-clip-path: polygon(13px 0, calc(50% - 10px) 0, 50% 11px, calc(50% + 10px) 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px);
          clip-path: polygon(13px 0, calc(50% - 10px) 0, 50% 11px, calc(50% + 10px) 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px);
  box-shadow: inset 0 0 35px rgba(2, 10, 18, 0.7), 0 12px 45px rgba(0, 0, 0, 0.3);
}
.mbf-abyss-tower__panel::before, .mbf-abyss-tower__panel::after {
  position: absolute;
  z-index: 0;
  content: "";
  pointer-events: none;
}
.mbf-abyss-tower__panel::before {
  inset: 5px;
  border: 1px solid rgba(74, 106, 135, 0.28);
  -webkit-clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
          clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
}
.mbf-abyss-tower__panel::after {
  top: 0;
  left: 0;
  width: 42px;
  height: 42px;
  border-top: 3px solid #836dff;
  border-left: 3px solid #836dff;
  filter: drop-shadow(0 0 5px rgba(129, 81, 255, 0.8));
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 4px, 10px 4px, 4px 10px, 4px 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% 4px, 10px 4px, 4px 10px, 4px 100%, 0 100%);
}
.mbf-abyss-tower__panel > * {
  position: relative;
  z-index: 1;
}
.mbf-abyss-tower__summary-header {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.mbf-abyss-tower__summary-sigil {
  position: absolute;
  left: 0;
  display: block;
  width: 16%;
  aspect-ratio: 1;
  opacity: 0.15;
}
.mbf-abyss-tower__summary-sigil::before, .mbf-abyss-tower__summary-sigil::after {
  position: absolute;
  content: "";
  inset: 18%;
  border: 3px solid #708297;
  transform: rotate(45deg);
}
.mbf-abyss-tower__summary-sigil::after {
  inset: 32%;
  transform: rotate(0);
}
.mbf-abyss-tower__summary-title, .mbf-abyss-tower__expedition-title {
  margin: 0;
  color: #e3e3e4;
  font-weight: 750;
  text-transform: uppercase;
  text-shadow: 0 2px 5px #000;
}
.mbf-abyss-tower__ornament {
  position: relative;
  width: 100%;
  height: 10px;
}
.mbf-abyss-tower__ornament::before {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  content: "";
  opacity: 0.58;
}
.mbf-abyss-tower__ornament span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 13px;
  border: 1px solid currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 8px currentColor;
}
.mbf-abyss-tower__ornament span::before, .mbf-abyss-tower__ornament span::after {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 1px;
  content: "";
  background: currentColor;
}
.mbf-abyss-tower__ornament span::before {
  right: calc(100% + 4px);
}
.mbf-abyss-tower__ornament span::after {
  left: calc(100% + 4px);
}
.mbf-abyss-tower__ornament--violet {
  color: #9b56ff;
}
.mbf-abyss-tower__ornament--violet::before {
  background: linear-gradient(90deg, transparent, #8d4cf8 27%, #b46cff 50%, #8d4cf8 73%, transparent);
  box-shadow: 0 0 7px rgba(143, 73, 255, 0.9);
}
.mbf-abyss-tower__ornament--cyan {
  color: #36b9ff;
}
.mbf-abyss-tower__ornament--cyan::before {
  background: linear-gradient(90deg, transparent, #168fd1 28%, #5bcaff 50%, #168fd1 72%, transparent);
  box-shadow: 0 0 7px rgba(31, 177, 255, 0.8);
}
.mbf-abyss-tower__floor-caption, .mbf-abyss-tower__floor-max, .mbf-abyss-tower__floor-rewards-title, .mbf-abyss-tower__timer-label, .mbf-abyss-tower__events-title, .mbf-abyss-tower__status span, .mbf-abyss-tower__combat-stat small, .mbf-abyss-tower__reward-strip-title, .mbf-abyss-tower__reward-item-copy small {
  color: #92979f;
  letter-spacing: 0.08em;
}
.mbf-abyss-tower__floor-value {
  color: #d5b7ff;
  font-weight: 650;
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-shadow: 0 0 14px rgba(152, 78, 255, 0.35);
}
.mbf-abyss-tower__floor-max strong {
  color: #ad57ff;
  font-weight: 650;
}
.mbf-abyss-tower__floor-rewards {
  border: 1px solid rgba(88, 118, 146, 0.28);
  background: rgba(0, 6, 12, 0.44);
  -webkit-clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%, 0 8px);
          clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%, 0 8px);
}
.mbf-abyss-tower__floor-rewards-title, .mbf-abyss-tower__events-title {
  text-transform: uppercase;
}
.mbf-abyss-tower__floor-rewards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.mbf-abyss-tower__small-reward {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(102, 130, 161, 0.64);
  border-radius: 4px;
  background: rgba(4, 13, 22, 0.88);
}
.mbf-abyss-tower__small-reward::before {
  position: absolute;
  content: "";
  inset: 0;
  background: radial-gradient(circle at 50% 52%, rgba(36, 120, 186, 0.22), transparent 66%);
}
.mbf-abyss-tower__small-reward--violet {
  border-color: rgba(168, 66, 255, 0.75);
}
.mbf-abyss-tower__small-reward--violet::before {
  background: radial-gradient(circle at 50% 52%, rgba(145, 45, 255, 0.28), transparent 66%);
}
.mbf-abyss-tower__small-reward-image {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.mbf-abyss-tower__small-reward-amount {
  position: absolute;
  z-index: 2;
  right: 5%;
  bottom: 2%;
  color: #f2f2f2;
  font-weight: 600;
  line-height: 1;
  text-shadow: 0 1px 4px #000, 0 1px 4px #000;
}
.mbf-abyss-tower__panel-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #9fa4aa;
  border-top: 1px solid rgba(93, 122, 149, 0.35);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: color 0.15s ease, background 0.15s ease;
}
.mbf-abyss-tower__panel-link:hover {
  color: #d9e2eb;
  background: rgba(53, 106, 147, 0.08);
}
.mbf-abyss-tower__tower-levels {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.mbf-abyss-tower__boss-level {
  position: absolute;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #c276ff;
  font-weight: 700;
  text-transform: uppercase;
  transform: translateX(-50%);
  text-shadow: 0 0 8px #5e17a5;
}
.mbf-abyss-tower__boss-level svg {
  display: block;
  overflow: visible;
  fill: rgba(10, 3, 19, 0.2);
  stroke: currentColor;
  stroke-width: 2.4;
  filter: drop-shadow(0 0 8px #a327ff);
}
.mbf-abyss-tower__tower-level {
  position: absolute;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c6edff;
  border-top: 2px solid rgba(41, 184, 255, 0.5);
  border-bottom: 2px solid rgba(41, 184, 255, 0.52);
  font-weight: 650;
  line-height: 1;
  padding-left: 0.12em;
  transform: translateX(-50%);
  -webkit-clip-path: polygon(13% 0, 87% 0, 100% 50%, 87% 100%, 13% 100%, 0 50%);
          clip-path: polygon(13% 0, 87% 0, 100% 50%, 87% 100%, 13% 100%, 0 50%);
  background: rgba(1, 12, 22, 0.58);
  box-shadow: inset 0 0 18px rgba(31, 162, 255, 0.3), 0 0 16px rgba(31, 162, 255, 0.55);
  text-shadow: 0 0 8px #178ed5;
}
.mbf-abyss-tower__tower-level--boss {
  color: #d29bff;
  border-color: rgba(166, 69, 255, 0.75);
  background: rgba(26, 4, 42, 0.56);
  box-shadow: inset 0 0 18px rgba(145, 50, 255, 0.35), 0 0 16px rgba(145, 50, 255, 0.58);
  text-shadow: 0 0 8px #8a24d2;
}
.mbf-abyss-tower__tower-level--current {
  color: #e5f7ff;
  border-color: rgba(57, 198, 255, 0.9);
  box-shadow: inset 0 0 24px rgba(24, 168, 255, 0.44), 0 0 19px rgba(44, 190, 255, 0.78);
}
.mbf-abyss-tower__expedition::after {
  border-color: #28c4ff;
  filter: drop-shadow(0 0 5px rgba(37, 188, 255, 0.9));
}
.mbf-abyss-tower__expedition-header {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mbf-abyss-tower__compass {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  border: 1px solid rgba(49, 179, 244, 0.65);
  color: #28c4ff;
  transform: rotate(45deg);
  box-shadow: 0 0 11px rgba(20, 161, 232, 0.24);
}
.mbf-abyss-tower__compass::before, .mbf-abyss-tower__compass::after,
.mbf-abyss-tower__compass i::before,
.mbf-abyss-tower__compass i::after {
  position: absolute;
  content: "";
  background: currentColor;
}
.mbf-abyss-tower__compass::before {
  top: 50%;
  right: -25%;
  left: -25%;
  height: 1px;
}
.mbf-abyss-tower__compass::after {
  top: -25%;
  bottom: -25%;
  left: 50%;
  width: 1px;
}
.mbf-abyss-tower__compass i::before {
  inset: 26%;
  border: 1px solid currentColor;
  background: transparent;
}
.mbf-abyss-tower__compass i::after {
  top: 50%;
  left: 50%;
  width: 32%;
  height: 32%;
  background: currentColor;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px currentColor;
}
.mbf-abyss-tower__timer {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mbf-abyss-tower__timer-label {
  font-weight: 650;
  text-transform: uppercase;
}
.mbf-abyss-tower__timer-value {
  color: #78dcff;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.06em;
  text-shadow: 0 0 9px rgba(34, 190, 255, 0.28);
}
.mbf-abyss-tower__route {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mbf-abyss-tower__route::before {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: 0;
  left: 0;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, #44c7ff, #bfeaff 42%, #bbc3ce 78%, #b174ff);
  box-shadow: 0 0 5px rgba(83, 207, 255, 0.7);
}
.mbf-abyss-tower__route-point {
  position: relative;
  display: block;
  border: 2px solid #9cdcff;
  border-radius: 50%;
  background: #06131f;
}
.mbf-abyss-tower__route-point--active {
  border-color: #d9f6ff;
  background: #1aaeff;
  box-shadow: 0 0 0 5px rgba(17, 167, 255, 0.4), 0 0 13px 5px rgba(17, 167, 255, 0.68);
}
.mbf-abyss-tower__route-point--target {
  border-color: #d9b8ff;
  background: #3d106c;
  box-shadow: 0 0 0 5px rgba(161, 68, 255, 0.35), 0 0 16px 7px rgba(161, 68, 255, 0.68);
}
.mbf-abyss-tower__route-point--target i {
  position: absolute;
  inset: 21%;
  border: 1px solid #e6cbff;
  transform: rotate(45deg);
}
.mbf-abyss-tower__route-point--target i::after {
  position: absolute;
  inset: 22%;
  content: "";
  background: #c27cff;
}
.mbf-abyss-tower__status {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid rgba(77, 107, 134, 0.25);
}
.mbf-abyss-tower__status span {
  line-height: 1;
}
.mbf-abyss-tower__status strong {
  color: #28c4ff;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.mbf-abyss-tower__events {
  display: flex;
  flex-direction: column;
}
.mbf-abyss-tower__event {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  min-width: 0;
  background: rgba(0, 5, 10, 0.58);
}
.mbf-abyss-tower__event-icon {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(54, 145, 200, 0.45);
  background: #06111a;
}
.mbf-abyss-tower__event-icon img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.mbf-abyss-tower__event-icon--violet {
  border-color: rgba(161, 72, 255, 0.65);
  box-shadow: inset 0 0 12px rgba(119, 40, 226, 0.25);
}
.mbf-abyss-tower__event-time {
  color: #858a90;
}
.mbf-abyss-tower__event-text {
  min-width: 0;
  color: #aeb1b5;
  line-height: 1.16;
}
.mbf-abyss-tower__command {
  position: absolute;
  z-index: 6;
  overflow: hidden;
  border: 1px solid rgba(115, 123, 130, 0.32);
  color: #d5d8dc;
  background: linear-gradient(90deg, rgba(4, 12, 19, 0.97) 0%, rgba(3, 11, 18, 0.97) 46%, rgba(2, 9, 15, 0.97) 100%);
  -webkit-clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
          clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.65), 0 -7px 28px rgba(0, 0, 0, 0.25);
}
.mbf-abyss-tower__command::before {
  position: absolute;
  content: "";
  inset: 7px;
  border: 1px solid rgba(64, 80, 95, 0.14);
  pointer-events: none;
}
.mbf-abyss-tower__cards {
  display: flex;
}
.mbf-abyss-tower__card {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(116, 137, 154, 0.38);
  border-radius: 10px;
  background: #06101a;
  box-shadow: inset 0 0 17px rgba(0, 0, 0, 0.5);
}
.mbf-abyss-tower__card::after {
  display: none;
}
.mbf-abyss-tower__card-image {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.mbf-abyss-tower__card-rank {
  position: absolute;
  z-index: 3;
  color: #f4f4f0;
  font-family: Georgia, serif;
  font-weight: 900;
  line-height: 1;
  transform: rotate(-6deg);
  text-shadow: 0 2px 4px #000;
}
.mbf-abyss-tower__card-copy {
  position: absolute;
  z-index: 2;
  right: 5%;
  bottom: 5%;
  left: 5%;
  text-align: center;
  text-shadow: 0 2px 4px #000, 0 2px 8px #000;
}
.mbf-abyss-tower__card-copy h3,
.mbf-abyss-tower__card-copy p {
  margin: 0;
}
.mbf-abyss-tower__card-copy h3 {
  color: #f0f0ed;
  font-weight: 520;
  line-height: 1;
}
.mbf-abyss-tower__card-copy p {
  overflow: hidden;
  color: #ddd;
  line-height: 1.1;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mbf-abyss-tower__combat-stats {
  color: #d5d8dc;
}
.mbf-abyss-tower__combat-stat {
  display: flex;
  align-items: center;
}
.mbf-abyss-tower__combat-stat span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mbf-abyss-tower__combat-stat small {
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.mbf-abyss-tower__combat-stat-icon {
  flex: 0 0 auto;
  fill: #aeb5bc;
  stroke: #aeb5bc;
  stroke-width: 1;
}
.mbf-abyss-tower__combat-stat-icon--cyan {
  fill: #28c4ff;
  stroke: #28c4ff;
}
.mbf-abyss-tower__combat-stat-value {
  color: #c5c8cc;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.mbf-abyss-tower__combat-stat-value--violet {
  color: #ad57ff;
}
.mbf-abyss-tower__combat-stat-value--cyan {
  color: #28c4ff;
}
.mbf-abyss-tower__actions {
  display: flex;
  flex-direction: column;
}
.mbf-abyss-tower__accelerate, .mbf-abyss-tower__report {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: #d8d9dd;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  text-transform: uppercase;
}
.mbf-abyss-tower__accelerate {
  overflow: hidden;
  border: 2px solid #b459ff;
  color: #f1edff;
  background: linear-gradient(90deg, rgba(66, 13, 111, 0.78), rgba(97, 26, 153, 0.66), rgba(62, 11, 102, 0.82)), #2a0a48;
  box-shadow: inset 0 0 17px rgba(188, 92, 255, 0.52), 0 0 8px rgba(146, 42, 255, 0.76);
  text-shadow: 0 2px 4px #15001f;
}
.mbf-abyss-tower__accelerate::before, .mbf-abyss-tower__accelerate::after {
  position: absolute;
  content: "";
  pointer-events: none;
}
.mbf-abyss-tower__accelerate::before {
  inset: 0;
  opacity: 0.35;
  background: linear-gradient(155deg, transparent 20%, rgba(214, 154, 255, 0.35) 21%, transparent 23%) 0 0/95px 50px, linear-gradient(25deg, transparent 20%, rgba(142, 68, 214, 0.4) 21%, transparent 23%) 0 0/120px 70px;
}
.mbf-abyss-tower__accelerate::after {
  inset: 5px;
  border: 1px solid rgba(211, 153, 255, 0.38);
}
.mbf-abyss-tower__accelerate span,
.mbf-abyss-tower__accelerate i {
  position: relative;
  z-index: 1;
}
.mbf-abyss-tower__accelerate span {
  font-weight: 750;
  letter-spacing: 0.04em;
}
.mbf-abyss-tower__accelerate i {
  position: absolute;
  right: 5%;
  font-family: Arial, sans-serif;
  font-weight: 200;
  font-style: normal;
  letter-spacing: -0.2em;
}
.mbf-abyss-tower__accelerate:hover {
  filter: brightness(1.12);
}
.mbf-abyss-tower__report {
  border: 1px solid rgba(140, 149, 159, 0.58);
  background: linear-gradient(180deg, #101922, #071019);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.62);
}
.mbf-abyss-tower__report span {
  font-weight: 700;
  letter-spacing: 0.08em;
}
.mbf-abyss-tower__report svg {
  position: absolute;
  right: 5%;
  fill: rgba(197, 202, 208, 0.22);
  stroke: #aeb3b9;
  stroke-width: 3;
  stroke-linecap: square;
  stroke-linejoin: bevel;
}
.mbf-abyss-tower__report:hover {
  color: #fff;
  background: linear-gradient(180deg, #15212c, #09131c);
}
.mbf-abyss-tower__reward-strip {
  color: #d5d8dc;
  border: 1px solid rgba(57, 76, 93, 0.34);
  background: rgba(3, 10, 17, 0.68);
  -webkit-clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
          clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.mbf-abyss-tower__reward-strip-title {
  display: flex;
  align-items: center;
  text-transform: uppercase;
}
.mbf-abyss-tower__reward-strip-title span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: Georgia, serif;
  font-weight: 700;
  font-style: normal;
  text-transform: lowercase;
}
.mbf-abyss-tower__reward-strip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.mbf-abyss-tower__reward-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(67, 94, 119, 0.42);
  border-radius: 5px;
  background: rgba(1, 8, 14, 0.78);
}
.mbf-abyss-tower__reward-item-icon {
  display: block;
  overflow: hidden;
  height: 100%;
  border-right: 1px solid rgba(73, 127, 165, 0.5);
  background: radial-gradient(circle, rgba(28, 113, 176, 0.24), rgba(3, 12, 20, 0.76));
}
.mbf-abyss-tower__reward-item-icon img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.mbf-abyss-tower__reward-item-icon--violet {
  border-color: rgba(156, 69, 224, 0.55);
  background: radial-gradient(circle, rgba(131, 42, 206, 0.27), rgba(11, 5, 21, 0.76));
}
.mbf-abyss-tower__reward-item-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mbf-abyss-tower__reward-item-copy small {
  overflow: hidden;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mbf-abyss-tower__reward-item-value {
  color: #28c4ff;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.mbf-abyss-tower__reward-item-value--violet {
  color: #ad57ff;
}
.mbf-abyss-tower--desktop {
  --mbf-tower-header-height: clamp(70px, 4vw, 82px);
  height: 100svh;
  min-height: 100svh;
  margin-top: calc(var(--mbf-tower-header-height) * -1);
  padding-top: var(--mbf-tower-header-height);
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__backdrop::before {
  background-size: 100% auto;
  background-position: center -6.6vw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__desktop-stage {
  container-type: inline-size;
  width: min(100%, (100svh - var(--mbf-tower-header-height)) * 1.913043);
  height: auto;
  max-height: calc(100svh - var(--mbf-tower-header-height));
  margin: 0 auto;
  aspect-ratio: 1672/874;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__summary {
  top: 3.66%;
  left: 2.51%;
  width: 23.63%;
  height: 54.7%;
  padding: 2.05% 1.25% 1.2%;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__summary-header {
  height: 12.5%;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__summary-title {
  font-size: 2.13cqw;
  line-height: 0.91;
  letter-spacing: 0.025em;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__summary-sigil {
  top: 1%;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__ornament {
  margin-top: 2.2%;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__floor-caption {
  margin: 8.1% 0 0 5.5%;
  font-size: 0.94cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__floor-value {
  margin: 0.2% 0 0 4.4%;
  font-size: 6.05cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__floor-max {
  margin: 2.1% 0 0 5.2%;
  font-size: 0.97cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__floor-rewards {
  position: absolute;
  right: 5.3%;
  bottom: 3.1%;
  left: 5.3%;
  height: 35.2%;
  padding: 2.8% 4.3% 0;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__floor-rewards-title {
  margin-bottom: 2.6%;
  font-size: 0.76cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__floor-rewards-grid {
  gap: 2.3%;
  height: 50%;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__small-reward-amount {
  font-size: 0.82cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__panel-link {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 24%;
  padding: 0 4.5% 0 21%;
  font-size: 0.72cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__tower-levels {
  top: 0;
  left: 40.9%;
  width: 20%;
  height: 100%;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__boss-level {
  top: 8%;
  font-size: 0.93cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__boss-level svg {
  width: 3.7cqw;
  height: 3cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__tower-level {
  width: 8.2cqw;
  height: 3.75cqw;
  font-size: 2.22cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__tower-level--boss {
  top: 24.5%;
  width: 6.8cqw;
  height: 2.75cqw;
  font-size: 1.65cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__tower-level--current {
  top: 35.2%;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__tower-level--past {
  top: 49.7%;
  width: 7.6cqw;
  height: 3.15cqw;
  font-size: 1.75cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__expedition {
  top: 3.43%;
  right: 2.16%;
  width: 25.05%;
  height: 54.9%;
  padding: 1.7% 1.7% 0;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__expedition-header {
  gap: 5%;
  height: 9%;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__compass {
  width: 2.1cqw;
  height: 2.1cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__expedition-title {
  font-size: 1.95cqw;
  letter-spacing: 0.04em;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__expedition > .mbf-abyss-tower__ornament {
  margin-top: 1.9%;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__timer {
  margin-top: 4.4%;
  gap: 0.35cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__timer-label {
  font-size: 0.76cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__timer-value {
  font-size: 2.34cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__route {
  width: 91%;
  margin: 5.7% auto 0;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__route-point {
  width: 0.82cqw;
  height: 0.82cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__route-point--active {
  width: 1.1cqw;
  height: 1.1cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__route-point--target {
  width: 2.15cqw;
  height: 2.15cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__status {
  gap: 2.5%;
  height: 15.5%;
  margin-top: 6.5%;
  padding-left: 0.2%;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__status span {
  font-size: 0.74cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__status strong {
  font-size: 1.3cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__events {
  position: absolute;
  right: 6.7%;
  bottom: 9.3%;
  left: 6.7%;
  display: grid;
  grid-template-rows: auto repeat(2, minmax(0, 1fr));
  gap: 0.22cqw;
  height: 27.5%;
  margin-top: 0;
  padding: 0.25cqw;
  border: 1px solid rgba(77, 105, 132, 0.28);
  background: rgba(0, 6, 12, 0.25);
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__events-title {
  padding-left: 0.15cqw;
  font-size: 0.66cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__event {
  grid-template-columns: 2.45cqw 2.35cqw minmax(0, 1fr);
  height: auto;
  min-height: 0;
  padding-right: 0.35cqw;
  border: 1px solid rgba(54, 81, 105, 0.24);
  background: rgba(0, 5, 10, 0.62);
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__event-icon {
  width: 2.45cqw;
  height: 100%;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__event-time {
  align-self: center;
  padding-left: 0.48cqw;
  font-size: 0.61cqw;
  text-align: center;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__event-text {
  align-self: center;
  padding-left: 0.3cqw;
  font-size: 0.7cqw;
  line-height: 1.12;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__panel-link--expedition {
  height: 7.5%;
  padding-left: 42%;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__command {
  right: 2.05%;
  bottom: 1.35%;
  left: 2.05%;
  height: 37.15%;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__cards {
  position: absolute;
  top: 7%;
  left: 1.35%;
  align-items: flex-start;
  gap: 0.72cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__card {
  width: 9.4cqw;
  height: auto;
  max-height: none;
  aspect-ratio: 2/3;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__card-rank {
  top: 2.2%;
  left: 4%;
  font-size: 2.05cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__card-copy {
  bottom: 5.6%;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__card-copy h3 {
  font-size: 1.55cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__card-copy p {
  margin-top: 0.48cqw;
  font-size: 0.67cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__combat-stats {
  position: absolute;
  top: 4%;
  bottom: 29%;
  left: 45%;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  width: 18.5%;
  padding: 0.75% 1.1%;
  border-right: 1px solid rgba(111, 126, 142, 0.32);
  border-left: 1px solid rgba(111, 126, 142, 0.32);
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__combat-stat {
  display: grid;
  grid-template-columns: 2.45cqw minmax(0, 1fr);
  align-items: center;
  min-height: 0;
  gap: 0.65cqw;
  padding: 0.12cqw 0;
  border-bottom: 1px solid rgba(61, 89, 113, 0.31);
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__combat-stat:last-child {
  border-bottom: 0;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__combat-stat-icon {
  width: 2.1cqw;
  max-height: 2.15cqw;
  justify-self: center;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__combat-stat small {
  font-size: 0.63cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__combat-stat-value {
  margin-top: 0.22cqw;
  font-size: 1.48cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__actions {
  position: absolute;
  top: 6.2%;
  right: 1.55%;
  width: 31.35%;
  gap: 4.5%;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__accelerate {
  height: 4.85cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__accelerate span {
  font-size: 2.3cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__accelerate i {
  font-size: 3.35cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__report {
  height: 3.6cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__report span {
  font-size: 1.4cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__report svg {
  width: 1.55cqw;
  height: 1.8cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__reward-strip {
  position: absolute;
  right: 1.05%;
  bottom: 3.2%;
  left: 45%;
  height: 30.3%;
  padding: 0.55% 0.7% 0.7%;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__reward-strip-title {
  justify-content: center;
  height: 25%;
  padding-left: 0;
  gap: 1%;
  overflow: hidden;
  font-size: 0.62cqw;
  text-align: center;
  white-space: nowrap;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__reward-strip-title span {
  width: 0.93cqw;
  height: 0.93cqw;
  font-size: 0.63cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__reward-strip-grid {
  gap: 1%;
  height: 75%;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__reward-item-icon {
  width: 3.9cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__reward-item-copy {
  gap: 0.45cqw;
  padding-left: 0.58cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__reward-item-copy small {
  font-size: 0.63cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__reward-item-value {
  font-size: 1.28cqw;
}
.mbf-abyss-tower--mobile {
  max-width: 100%;
  min-height: 210.7639vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__backdrop::before {
  height: 124vw;
  background-size: auto 111vw;
  background-position: center top;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__backdrop::after {
  background: linear-gradient(90deg, rgba(0, 4, 8, 0.28), transparent 22%, transparent 78%, rgba(0, 4, 8, 0.28)), linear-gradient(180deg, transparent 31%, rgba(1, 7, 13, 0.54) 54%, #020910 78%);
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__mobile-stage {
  aspect-ratio: 864/1821;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__summary {
  top: 3.18%;
  left: 2.9%;
  width: 31.95%;
  height: 18.78%;
  padding: 3.1% 1.6% 1%;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__summary-header {
  height: 14%;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__summary-title {
  font-size: 2.92vw;
  line-height: 0.96;
  letter-spacing: 0.01em;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__summary-sigil {
  top: 1%;
  left: 1%;
  width: 18%;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__ornament {
  height: 1.3vw;
  margin-top: 2.6%;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__ornament span {
  width: 1.35vw;
  height: 1.35vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__floor-caption {
  margin: 8.5% 0 0 3%;
  font-size: 1.58vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__floor-value {
  margin: 0.5% 0 0 2.6%;
  font-size: 9.2vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__floor-max {
  margin: 4% 0 0 3%;
  font-size: 1.58vw;
  white-space: nowrap;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__floor-rewards {
  position: absolute;
  right: 4%;
  bottom: 4.5%;
  left: 4%;
  height: 31%;
  padding: 3.7% 2.5% 2.5%;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__floor-rewards-title {
  margin-bottom: 3%;
  font-size: 1.38vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__floor-rewards-grid {
  gap: 2%;
  height: 65%;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__small-reward {
  border-radius: 3px;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__small-reward-amount {
  font-size: 1.56vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__tower-levels {
  top: 0;
  left: 36.5%;
  width: 30%;
  height: 21.5%;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__boss-level {
  top: 18%;
  font-size: 1.25vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__boss-level svg {
  width: 4.8vw;
  height: 4vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__tower-level {
  width: 10.8vw;
  height: 4.6vw;
  font-size: 2.75vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__tower-level--boss {
  top: 43%;
  width: 9.3vw;
  height: 3.8vw;
  font-size: 2.25vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__tower-level--current {
  top: 60%;
  width: 11.2vw;
  height: 4.8vw;
  font-size: 2.9vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__tower-level--past {
  top: 77%;
  width: 10.4vw;
  height: 4.3vw;
  font-size: 2.55vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__expedition {
  top: 23.34%;
  right: 2.9%;
  left: 2.9%;
  height: 27.02%;
  padding: 2.8% 4.1% 2.2%;
  -webkit-clip-path: polygon(12px 0, calc(50% - 10px) 0, 50% 10px, calc(50% + 10px) 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
          clip-path: polygon(12px 0, calc(50% - 10px) 0, 50% 10px, calc(50% + 10px) 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__expedition-header {
  gap: 4%;
  height: 11%;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__compass {
  width: 4.5vw;
  height: 4.5vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__expedition-title {
  font-size: 5.1vw;
  letter-spacing: 0.035em;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__expedition > .mbf-abyss-tower__ornament {
  position: absolute;
  top: 14.5%;
  right: 14%;
  left: 14%;
  width: 72%;
  margin: 0 auto;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__timer {
  position: absolute;
  top: 20.5%;
  right: 0;
  left: 0;
  margin-top: 0;
  gap: 0.75vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__timer-label {
  font-size: 2.05vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__timer-value {
  font-size: 5.1vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__route {
  position: absolute;
  top: 37.5%;
  right: 8.5%;
  left: 8.5%;
  width: 83%;
  margin: 0 auto;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__route-point {
  width: 1.86vw;
  height: 1.86vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__route-point--active {
  width: 2.65vw;
  height: 2.65vw;
  box-shadow: 0 0 0 0.62vw rgba(17, 167, 255, 0.4), 0 0 1.6vw 0.6vw rgba(17, 167, 255, 0.68);
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__route-point--target {
  width: 5.2vw;
  height: 5.2vw;
  box-shadow: 0 0 0 0.62vw rgba(161, 68, 255, 0.35), 0 0 1.8vw 0.65vw rgba(161, 68, 255, 0.68);
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__status {
  position: absolute;
  top: 48.5%;
  right: 4.1%;
  left: 4.1%;
  gap: 0.95vw;
  height: 16%;
  margin-top: 0;
  padding-left: 0.1%;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__status span {
  font-size: 2.05vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__status strong {
  font-size: 3.32vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__events {
  position: absolute;
  top: 62.5%;
  right: 4.1%;
  left: 4.1%;
  display: grid;
  grid-template-rows: auto repeat(2, minmax(0, 1fr));
  gap: 0.65vw;
  height: 31.5%;
  margin-top: 0;
  padding: 1.4% 1.8%;
  border: 1px solid rgba(87, 112, 135, 0.3);
  background: rgba(0, 6, 12, 0.26);
  -webkit-clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%, 0 9px);
          clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%, 0 9px);
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__events-title {
  padding-left: 0.4vw;
  font-size: 1.85vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__event {
  grid-template-columns: 6.7vw 7.4vw minmax(0, 1fr);
  height: auto;
  min-height: 0;
  padding-right: 1vw;
  border: 1px solid rgba(54, 81, 105, 0.24);
  background: rgba(0, 5, 10, 0.66);
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__event-icon {
  width: 6.7vw;
  height: 100%;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__event-time {
  align-self: center;
  padding: 0;
  font-size: 1.65vw;
  text-align: center;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__event-text {
  align-self: center;
  padding-left: 0.6vw;
  font-size: 1.95vw;
  line-height: 1.12;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__mobile-cards {
  position: absolute;
  z-index: 5;
  top: 51.62%;
  right: 2.9%;
  left: 2.9%;
  width: auto;
  height: 17.2%;
  overflow: hidden;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__mobile-cards > .mbf-abyss-tower__cards {
  width: 100%;
  gap: 1.15vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__card {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  height: auto;
  aspect-ratio: 2/3;
  border-radius: 1.1vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__combat-stats {
  position: absolute;
  z-index: 5;
  top: 69.9%;
  right: 2.9%;
  left: 2.9%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 5.15%;
  border: 1px solid rgba(127, 145, 161, 0.46);
  background: rgba(5, 14, 22, 0.95);
  -webkit-clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px);
          clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px);
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__combat-stat {
  display: grid;
  grid-template-columns: 4.1vw minmax(0, 1fr);
  justify-content: initial;
  gap: 1.25vw;
  padding: 0 1.8vw;
  border-right: 1px solid rgba(101, 120, 137, 0.42);
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__combat-stat:last-child {
  border-right: 0;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__combat-stat-icon {
  width: 3.8vw;
  max-height: 4.2vw;
  justify-self: center;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__combat-stat small {
  font-size: 1.3vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__combat-stat-value {
  margin-top: 0.65vw;
  font-size: 3.05vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__actions {
  position: absolute;
  z-index: 5;
  top: 75.7%;
  right: 2.9%;
  left: 2.9%;
  gap: 1.65vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__accelerate {
  height: 9.12vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__accelerate span {
  font-size: 5vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__accelerate i {
  right: 5%;
  font-size: 7vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__report {
  height: 8.4vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__report span {
  font-size: 3.52vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__report svg {
  width: 3.5vw;
  height: 4.2vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__reward-strip {
  position: absolute;
  z-index: 5;
  top: 87.2%;
  right: 2.9%;
  left: 2.9%;
  height: 8.52%;
  padding: 1.45% 1.5% 1.7%;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__reward-strip-title {
  height: 24%;
  gap: 1.2%;
  font-size: 2.05vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__reward-strip-title span {
  width: 2.1vw;
  height: 2.1vw;
  font-size: 1.35vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__reward-strip-grid {
  gap: 1.2%;
  height: 76%;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__reward-item-icon {
  width: 8.9vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__reward-item-copy {
  gap: 1.3vw;
  padding-left: 1.7vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__reward-item-copy small {
  font-size: 1.38vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__reward-item-value {
  font-size: 2.86vw;
}

/* ==============================
   Подготовка экспедиции и лидеры
   ============================== */
.mbf-abyss-tower__ornament::after {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 74px;
  height: 7px;
  content: "";
  opacity: 0.9;
  background: currentColor;
  transform: translate(-50%, -50%);
  -webkit-clip-path: polygon(0 43%, 32% 43%, 38% 0, 46% 43%, 50% 12%, 54% 43%, 62% 0, 68% 43%, 100% 43%, 100% 57%, 68% 57%, 62% 100%, 54% 57%, 50% 88%, 46% 57%, 38% 100%, 32% 57%, 0 57%);
          clip-path: polygon(0 43%, 32% 43%, 38% 0, 46% 43%, 50% 12%, 54% 43%, 62% 0, 68% 43%, 100% 43%, 100% 57%, 68% 57%, 62% 100%, 54% 57%, 50% 88%, 46% 57%, 38% 100%, 32% 57%, 0 57%);
  filter: drop-shadow(0 0 5px currentColor);
  pointer-events: none;
}
.mbf-abyss-tower__leaders {
  display: flex;
  align-items: center;
  color: #aeb8c2;
  border: 1px solid rgba(86, 119, 147, 0.46);
  background: linear-gradient(90deg, rgba(22, 87, 126, 0.1), rgba(77, 23, 116, 0.17)), rgba(1, 8, 14, 0.72);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  -webkit-clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
          clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.mbf-abyss-tower__leaders svg {
  flex: 0 0 auto;
  fill: #b16aff;
  filter: drop-shadow(0 0 5px rgba(161, 70, 255, 0.5));
}
.mbf-abyss-tower__leaders span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mbf-abyss-tower__leaders i {
  margin-left: auto;
  color: #6ccfff;
  font-family: Arial, sans-serif;
  font-style: normal;
}
.mbf-abyss-tower__leaders:hover {
  color: #eef6ff;
  border-color: rgba(125, 203, 255, 0.68);
  box-shadow: inset 0 0 13px rgba(84, 177, 235, 0.12), 0 0 10px rgba(126, 66, 214, 0.18);
  transform: translateY(-1px);
}
.mbf-abyss-tower__preparation::after {
  border-color: #28c4ff;
  filter: drop-shadow(0 0 5px rgba(37, 188, 255, 0.9));
}
.mbf-abyss-tower__preparation-header {
  text-align: center;
  text-transform: uppercase;
}
.mbf-abyss-tower__preparation-header h2,
.mbf-abyss-tower__preparation-header strong {
  display: block;
  margin: 0;
}
.mbf-abyss-tower__preparation-header h2 {
  color: #e0e2e5;
  font-weight: 720;
  line-height: 1;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 4px #000;
}
.mbf-abyss-tower__preparation-header strong {
  color: #28c4ff;
  font-weight: 650;
  letter-spacing: 0.08em;
}
.mbf-abyss-tower__prep-step {
  min-width: 0;
}
.mbf-abyss-tower__prep-step-title {
  display: flex;
  align-items: center;
  color: #9fa5ac;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.mbf-abyss-tower__prep-step-title::after {
  flex: 1 1 auto;
  height: 1px;
  margin-left: 0.55em;
  content: "";
  background: linear-gradient(90deg, rgba(95, 125, 152, 0.45), rgba(95, 125, 152, 0.08));
}
.mbf-abyss-tower__prep-step-title b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #c5d6e4;
  border: 1px solid rgba(120, 162, 198, 0.64);
  font-weight: 500;
  -webkit-clip-path: polygon(50% 0, 95% 23%, 95% 77%, 50% 100%, 5% 77%, 5% 23%);
          clip-path: polygon(50% 0, 95% 23%, 95% 77%, 50% 100%, 5% 77%, 5% 23%);
  background: rgba(8, 22, 34, 0.84);
}
.mbf-abyss-tower__option-grid {
  display: grid;
  gap: 1.1%;
}
.mbf-abyss-tower__option-grid--difficulty {
  grid-template-columns: repeat(3, 1fr);
}
.mbf-abyss-tower__option-grid--duration {
  grid-template-columns: repeat(4, 1fr);
}
.mbf-abyss-tower__option {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0;
  color: #969ba0;
  border: 1px solid rgba(111, 132, 151, 0.56);
  border-radius: 2px;
  outline: 0;
  background: rgba(3, 11, 18, 0.74);
  cursor: pointer;
  text-transform: uppercase;
  transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.mbf-abyss-tower__option span,
.mbf-abyss-tower__option strong {
  display: block;
}
.mbf-abyss-tower__option strong {
  font-weight: 600;
}
.mbf-abyss-tower__option.is-selected {
  color: #caa1ff;
  border-color: #b55bff;
  background: linear-gradient(135deg, rgba(72, 13, 116, 0.74), rgba(42, 10, 72, 0.84)), rgba(20, 5, 34, 0.9);
  box-shadow: inset 0 0 18px rgba(180, 80, 255, 0.42), 0 0 9px rgba(157, 54, 255, 0.56);
  text-shadow: 0 0 7px rgba(186, 91, 255, 0.65);
}
.mbf-abyss-tower__option:hover {
  color: #e7ebef;
  border-color: rgba(113, 205, 255, 0.75);
  filter: brightness(1.08);
}
.mbf-abyss-tower__duration-line {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mbf-abyss-tower__duration-line::before, .mbf-abyss-tower__duration-line::after {
  position: absolute;
  top: 50%;
  height: 2px;
  content: "";
  transform: translateY(-50%);
}
.mbf-abyss-tower__duration-line::before {
  right: 0;
  left: 0;
  background: rgba(190, 201, 210, 0.46);
}
.mbf-abyss-tower__duration-line::after {
  left: 0;
  width: var(--tower-duration-progress, 0%);
  background: #78dcff;
  box-shadow: 0 0 7px rgba(55, 200, 255, 0.7);
  transition: width 0.25s ease;
}
.mbf-abyss-tower__duration-line i,
.mbf-abyss-tower__duration-line span {
  position: relative;
  z-index: 1;
  display: block;
  border: 1px solid #aab2ba;
  border-radius: 50%;
  background: #07111a;
}
.mbf-abyss-tower__duration-line i {
  border-color: #c9f4ff;
  background: #28c4ff;
  box-shadow: 0 0 0 3px rgba(27, 177, 240, 0.24), 0 0 7px rgba(40, 196, 255, 0.75);
}
.mbf-abyss-tower__duration-line span.is-selected {
  border-color: #d9adff;
  background: #47106f;
  box-shadow: 0 0 0 3px rgba(164, 74, 255, 0.22), 0 0 8px rgba(174, 79, 255, 0.75);
}
.mbf-abyss-tower__duration-caption, .mbf-abyss-tower__return-caption {
  display: block;
  color: #81868c;
  text-align: center;
  letter-spacing: 0.07em;
}
.mbf-abyss-tower__condition {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(75, 105, 132, 0.42);
  background: rgba(2, 9, 15, 0.65);
}
.mbf-abyss-tower__condition > span:last-child {
  min-width: 0;
}
.mbf-abyss-tower__condition strong,
.mbf-abyss-tower__condition small {
  display: block;
}
.mbf-abyss-tower__condition strong {
  color: #b7bbc0;
  font-weight: 560;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mbf-abyss-tower__condition small {
  color: #8f9499;
}
.mbf-abyss-tower__condition-icon {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border-right: 1px solid rgba(121, 65, 178, 0.48);
  background: radial-gradient(circle, rgba(130, 36, 207, 0.35), rgba(13, 5, 25, 0.8));
}
.mbf-abyss-tower__condition-icon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48%;
  height: 75%;
  content: "";
  background: linear-gradient(145deg, #e3b5ff, #a94eff 42%, #7131d6);
  transform: translate(-50%, -50%) rotate(8deg);
  -webkit-clip-path: polygon(46% 0, 100% 0, 66% 39%, 91% 39%, 25% 100%, 43% 56%, 7% 56%);
          clip-path: polygon(46% 0, 100% 0, 66% 39%, 91% 39%, 25% 100%, 43% 56%, 7% 56%);
  filter: drop-shadow(0 0 6px rgba(189, 80, 255, 0.9));
}
.mbf-abyss-tower__condition-icon img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  opacity: 0.24;
  filter: hue-rotate(260deg) saturate(1.6);
}
.mbf-abyss-tower__section-heading {
  display: flex;
  align-items: center;
  margin: 0;
  color: #aeb2b8;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  white-space: nowrap;
}
.mbf-abyss-tower__section-heading::before, .mbf-abyss-tower__section-heading::after {
  flex: 1 1 auto;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(93, 118, 141, 0.46));
}
.mbf-abyss-tower__section-heading::before {
  margin-right: 0.7em;
}
.mbf-abyss-tower__section-heading::after {
  margin-left: 0.7em;
  transform: scaleX(-1);
}
.mbf-abyss-tower__prep-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-width: 0;
  counter-reset: mbf-prep-card;
}
.mbf-abyss-tower__prep-card {
  position: relative;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(92, 136, 168, 0.62);
  border-radius: 5px;
  outline: 0;
  background: #06101a;
  cursor: pointer;
  counter-increment: mbf-prep-card;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.48);
  transition: border-color 0.2s ease, filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.mbf-abyss-tower__prep-card::before {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  content: counter(mbf-prep-card);
  color: #d9edf8;
  border-right: 1px solid rgba(88, 156, 196, 0.55);
  border-bottom: 1px solid rgba(88, 156, 196, 0.55);
  background: rgba(2, 13, 22, 0.88);
}
.mbf-abyss-tower__prep-card::after {
  position: absolute;
  content: "";
  inset: 0;
  opacity: 0;
  border: 2px solid #28c4ff;
  box-shadow: inset 0 0 18px rgba(31, 181, 255, 0.16);
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.mbf-abyss-tower__prep-card img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.mbf-abyss-tower__prep-card.is-selected {
  border-color: #5fceff;
  box-shadow: 0 0 9px rgba(42, 193, 255, 0.26);
}
.mbf-abyss-tower__prep-card.is-selected::after {
  opacity: 1;
}
.mbf-abyss-tower__prep-card:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}
.mbf-abyss-tower__prep-squad-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.mbf-abyss-tower__prep-squad-actions button {
  color: #8e949b;
  border: 1px solid rgba(93, 119, 143, 0.53);
  background: rgba(4, 13, 21, 0.72);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.mbf-abyss-tower__prep-squad-actions button:first-child {
  color: #819ec2;
}
.mbf-abyss-tower__prep-squad-actions button:hover {
  color: #e2e8ee;
  border-color: rgba(88, 194, 244, 0.62);
}
.mbf-abyss-tower__prep-forecast {
  color: #c8ccd1;
}
.mbf-abyss-tower__forecast-stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  border-bottom: 1px solid rgba(68, 99, 126, 0.38);
}
.mbf-abyss-tower__forecast-stat svg {
  fill: #b8c0c8;
}
.mbf-abyss-tower__forecast-stat span,
.mbf-abyss-tower__forecast-stat small,
.mbf-abyss-tower__forecast-stat strong {
  display: block;
}
.mbf-abyss-tower__forecast-stat small {
  color: #92979e;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.mbf-abyss-tower__forecast-stat strong {
  color: #c8ccd1;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.06em;
}
.mbf-abyss-tower__forecast-stat:first-of-type strong {
  color: #ad57ff;
}
.mbf-abyss-tower__success-meter {
  position: relative;
  overflow: visible;
  border: 1px solid rgba(103, 116, 127, 0.46);
  border-radius: 2px;
  background: rgba(4, 10, 15, 0.8);
}
.mbf-abyss-tower__success-meter i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: block;
  max-width: 100%;
  background: linear-gradient(90deg, #19bde8, #65e7ff);
  box-shadow: 0 0 8px rgba(37, 205, 255, 0.48);
  transition: width 0.25s ease;
}
.mbf-abyss-tower__success-meter b {
  position: absolute;
  top: 50%;
  left: 70%;
  background: #f4fbff;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px #6ee5ff;
}
.mbf-abyss-tower__success-label {
  display: block;
  color: #28c4ff;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.mbf-abyss-tower__success-value {
  display: block;
  color: #28c4ff;
  font-weight: 700;
  line-height: 0.92;
  text-align: center;
  text-shadow: 0 0 9px rgba(40, 196, 255, 0.25);
}
.mbf-abyss-tower__resonance {
  display: flex;
  align-items: center;
  color: #8f959b;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.mbf-abyss-tower__resonance i {
  display: block;
  flex: 0 0 auto;
  border: 2px solid rgba(116, 164, 181, 0.6);
  border-radius: 50%;
  background: conic-gradient(from 45deg, transparent 0 15%, #4c8796 16% 34%, transparent 35% 49%, #4c8796 50% 68%, transparent 69% 83%, #4c8796 84%);
}
.mbf-abyss-tower__resonance strong {
  margin-left: auto;
  color: #28c4ff;
  font-weight: 550;
}
.mbf-abyss-tower__prep-rewards {
  display: grid;
}
.mbf-abyss-tower__prep-reward {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(67, 94, 119, 0.5);
  border-radius: 3px;
  background: rgba(1, 8, 14, 0.76);
}
.mbf-abyss-tower__prep-reward > span {
  display: block;
  height: 100%;
  overflow: hidden;
  border-right: 1px solid rgba(103, 67, 144, 0.5);
  background: radial-gradient(circle, rgba(124, 52, 190, 0.25), transparent 70%);
}
.mbf-abyss-tower__prep-reward img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.mbf-abyss-tower__prep-reward small {
  overflow: hidden;
  color: #92979d;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mbf-abyss-tower__prep-reward strong {
  color: #aaaeb4;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.mbf-abyss-tower__send-squad {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0;
  overflow: hidden;
  color: #e9ddff;
  border: 2px solid #b55cff;
  outline: 0;
  background: linear-gradient(90deg, rgba(74, 14, 120, 0.88), rgba(111, 27, 170, 0.78), rgba(65, 10, 107, 0.88)), #26063e;
  cursor: pointer;
  box-shadow: inset 0 0 22px rgba(189, 87, 255, 0.55), 0 0 10px rgba(155, 55, 255, 0.66);
  text-transform: uppercase;
}
.mbf-abyss-tower__send-squad::before, .mbf-abyss-tower__send-squad::after {
  position: absolute;
  content: "";
  pointer-events: none;
}
.mbf-abyss-tower__send-squad::before {
  inset: 0;
  opacity: 0.45;
  background: linear-gradient(152deg, transparent 29%, rgba(226, 173, 255, 0.34) 30%, transparent 31%) 0 0/92px 50px, linear-gradient(28deg, transparent 24%, rgba(143, 55, 211, 0.48) 25%, transparent 26%) 0 0/118px 64px;
}
.mbf-abyss-tower__send-squad::after {
  inset: 5px;
  border: 1px solid rgba(219, 164, 255, 0.42);
}
.mbf-abyss-tower__send-squad span {
  position: relative;
  z-index: 1;
  font-weight: 750;
  letter-spacing: 0.035em;
  text-shadow: 0 2px 5px #1d002f;
}
.mbf-abyss-tower__send-squad:hover {
  filter: brightness(1.13);
}
.mbf-abyss-tower__send-squad.is-submitting {
  pointer-events: none;
  filter: saturate(0.5);
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__leaders {
  width: 89%;
  height: 2.03cqw;
  margin: 1.45% auto 0;
  padding: 0 0.58cqw;
  gap: 0.48cqw;
  font-size: 0.68cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__leaders svg {
  width: 1.02cqw;
  height: 1.02cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__leaders i {
  font-size: 1.1cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__preparation {
  top: 3.43%;
  right: 2.16%;
  width: 25.05%;
  height: 54.9%;
  padding: 1.28% 1.18% 0.9%;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__preparation-header h2 {
  font-size: 1.43cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__preparation-header strong {
  margin-top: 0.52cqw;
  font-size: 1.01cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__prep-step {
  margin-top: 0.82cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__prep-step-title {
  height: 1.18cqw;
  font-size: 0.63cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__prep-step-title b {
  width: 1.18cqw;
  height: 1.18cqw;
  margin-right: 0.42cqw;
  font-size: 0.72cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__option-grid {
  margin-top: 0.38cqw;
  gap: 0.32cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__option {
  height: 3.08cqw;
  flex-direction: column;
  gap: 0.12cqw;
  font-size: 0.67cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__option strong {
  font-size: 1.03cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__option-grid--duration .mbf-abyss-tower__option {
  height: 2.42cqw;
  font-size: 0.88cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__duration-line {
  height: 0.75cqw;
  margin-top: 0.38cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__duration-line i,
.mbf-abyss-tower--desktop .mbf-abyss-tower__duration-line span {
  width: 0.52cqw;
  height: 0.52cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__duration-caption {
  margin-top: 0.05cqw;
  font-size: 0.53cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__condition {
  height: 4.62cqw;
  margin-top: 0.34cqw;
  grid-template-columns: 3.85cqw minmax(0, 1fr);
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__condition > span:last-child {
  padding-left: 0.68cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__condition strong {
  font-size: 0.72cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__condition small {
  margin-top: 0.38cqw;
  font-size: 0.6cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__command--preparation {
  display: block;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__prep-squad {
  position: absolute;
  top: 3.5%;
  bottom: 4%;
  left: 1.7%;
  width: 42.7%;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__section-heading {
  height: 1.5cqw;
  font-size: 0.82cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__prep-cards {
  grid-template-columns: repeat(4, 8.35cqw);
  justify-content: center;
  gap: 0.7cqw;
  height: 12.52cqw;
  margin-top: 0.18cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__prep-card {
  height: 100%;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__prep-card::before {
  width: 1.42cqw;
  height: 1.42cqw;
  font-size: 0.78cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__prep-squad-actions {
  gap: 1.45cqw;
  margin: 0.66cqw auto 0;
  width: 78%;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__prep-squad-actions button {
  height: 2.05cqw;
  font-size: 0.68cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__prep-forecast {
  position: absolute;
  top: 3.5%;
  bottom: 3.5%;
  left: 45.4%;
  width: 18.1%;
  padding: 0 1.18cqw;
  border-right: 1px solid rgba(98, 115, 131, 0.35);
  border-left: 1px solid rgba(98, 115, 131, 0.35);
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__forecast-stat {
  grid-template-columns: 2.65cqw minmax(0, 1fr);
  min-height: 3.52cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__forecast-stat svg {
  width: 2.12cqw;
  max-height: 2.35cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__forecast-stat small {
  font-size: 0.62cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__forecast-stat strong {
  margin-top: 0.3cqw;
  font-size: 1.38cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__success-meter {
  height: 0.56cqw;
  margin-top: 0.48cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__success-meter b {
  width: 0.16cqw;
  height: 1.02cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__success-label {
  margin-top: 0.56cqw;
  font-size: 0.62cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__success-value {
  margin-top: 0.18cqw;
  font-size: 2.45cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__resonance {
  height: 2.35cqw;
  margin-top: 0.45cqw;
  border-top: 1px solid rgba(65, 91, 113, 0.35);
  font-size: 0.58cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__resonance i {
  width: 1.65cqw;
  height: 1.65cqw;
  margin-right: 0.58cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__resonance strong {
  font-size: 0.75cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__prep-expected {
  position: absolute;
  top: 3.5%;
  right: 1.7%;
  bottom: 3.5%;
  width: 33.1%;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__prep-rewards {
  gap: 0.35cqw;
  margin-top: 0.35cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__prep-reward {
  grid-template-columns: 2.9cqw minmax(0, 1fr) auto;
  height: 2.72cqw;
  padding-right: 0.75cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__prep-reward > span {
  width: 2.9cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__prep-reward small {
  padding-left: 0.65cqw;
  font-size: 0.65cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__prep-reward strong {
  font-size: 0.82cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__send-squad {
  height: 4.05cqw;
  margin-top: 0.7cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__send-squad span {
  font-size: 1.68cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__return-caption {
  margin-top: 0.38cqw;
  font-size: 0.68cqw;
}
.mbf-abyss-tower--mobile.is-expedition-idle {
  min-height: 210.7639vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__leaders {
  width: 92%;
  height: 4.65vw;
  margin: 2.25% auto 0;
  padding: 0 1.15vw;
  gap: 0.8vw;
  font-size: 1.34vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__leaders svg {
  width: 2.35vw;
  height: 2.35vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__leaders i {
  font-size: 2.3vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__preparation--mobile {
  top: 23.34%;
  right: 2.9%;
  left: 2.9%;
  display: flex;
  flex-direction: column;
  height: 74.3%;
  padding: 4.1% 3.35% 2.6%;
  overflow: hidden;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__preparation-header {
  flex: 0 0 auto;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__preparation-header h2 {
  font-size: 4.28vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__preparation-header strong {
  margin-top: 0.9vw;
  font-size: 2.88vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__prep-step {
  flex: 0 0 auto;
  margin-top: 2.35vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__prep-step-title {
  height: 3.5vw;
  font-size: 1.87vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__prep-step-title b {
  width: 3.45vw;
  height: 3.45vw;
  margin-right: 1.2vw;
  font-size: 2vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__option-grid {
  gap: 1.75vw;
  margin-top: 1.05vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__option {
  height: 7.2vw;
  flex-direction: column;
  gap: 0.35vw;
  font-size: 1.85vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__option strong {
  font-size: 2.8vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__option-grid--duration .mbf-abyss-tower__option {
  height: 6.3vw;
  font-size: 2.4vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__duration-line {
  height: 2vw;
  margin-top: 1.25vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__duration-line i,
.mbf-abyss-tower--mobile .mbf-abyss-tower__duration-line span {
  width: 1.6vw;
  height: 1.6vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__duration-caption {
  margin-top: 0.3vw;
  font-size: 1.55vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__condition {
  grid-template-columns: 10vw minmax(0, 1fr);
  height: 9.8vw;
  margin-top: 1.05vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__condition > span:last-child {
  padding-left: 2vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__condition strong {
  font-size: 2.25vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__condition small {
  margin-top: 0.8vw;
  font-size: 1.75vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__preparation--mobile > .mbf-abyss-tower__prep-squad {
  flex: 0 0 auto;
  margin-top: 2.2vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__section-heading {
  height: 3.8vw;
  font-size: 2.2vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__prep-cards {
  gap: 1.65vw;
  height: 29.85vw;
  margin-top: 0.9vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__prep-card {
  height: 100%;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__prep-card::before {
  width: 3.7vw;
  height: 3.7vw;
  font-size: 2vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__prep-squad-actions {
  gap: 4.5vw;
  width: 82%;
  margin: 1.35vw auto 0;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__prep-squad-actions button {
  height: 5.9vw;
  font-size: 1.8vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__prep-mobile-grid {
  display: grid;
  grid-template-columns: 0.93fr 1.17fr;
  flex: 0 0 auto;
  min-height: 0;
  margin-top: 2.1vw;
  gap: 1.45vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__prep-mobile-grid .mbf-abyss-tower__prep-forecast, .mbf-abyss-tower--mobile .mbf-abyss-tower__prep-mobile-grid .mbf-abyss-tower__prep-expected {
  min-width: 0;
  padding: 1.2vw 1.3vw;
  border: 1px solid rgba(67, 91, 111, 0.43);
  background: rgba(2, 9, 15, 0.56);
  -webkit-clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
          clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__forecast-stat {
  grid-template-columns: 6.6vw minmax(0, 1fr);
  min-height: 8.2vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__forecast-stat svg {
  width: 5.4vw;
  max-height: 5.7vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__forecast-stat small {
  font-size: 1.55vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__forecast-stat strong {
  margin-top: 0.65vw;
  font-size: 3.05vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__success-meter {
  height: 1.15vw;
  margin-top: 1.25vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__success-meter b {
  width: 0.4vw;
  height: 2.2vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__success-label {
  margin-top: 1.3vw;
  font-size: 1.65vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__success-value {
  margin-top: 0.45vw;
  font-size: 5.5vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__prep-mobile-grid .mbf-abyss-tower__prep-rewards {
  gap: 0.72vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__prep-mobile-grid .mbf-abyss-tower__prep-reward {
  grid-template-columns: 6.6vw minmax(0, 1fr) auto;
  height: 6.35vw;
  padding-right: 1.2vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__prep-mobile-grid .mbf-abyss-tower__prep-reward > span {
  width: 6.6vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__prep-mobile-grid .mbf-abyss-tower__prep-reward small {
  padding-left: 1.25vw;
  font-size: 1.43vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__prep-mobile-grid .mbf-abyss-tower__prep-reward strong {
  font-size: 1.82vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__prep-mobile-grid .mbf-abyss-tower__resonance {
  height: 6.8vw;
  margin-top: 1.1vw;
  padding: 0 1.2vw;
  border: 1px solid rgba(67, 91, 111, 0.43);
  font-size: 1.45vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__prep-mobile-grid .mbf-abyss-tower__resonance i {
  width: 4.7vw;
  height: 4.7vw;
  margin-right: 1.35vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__prep-mobile-grid .mbf-abyss-tower__resonance strong {
  font-size: 2.1vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__preparation--mobile > .mbf-abyss-tower__send-squad {
  flex: 0 0 auto;
  height: 9.25vw;
  margin-top: 2.05vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__preparation--mobile > .mbf-abyss-tower__send-squad span {
  font-size: 4.28vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__preparation--mobile > .mbf-abyss-tower__return-caption {
  flex: 0 0 auto;
  margin-top: 1.05vw;
  font-size: 2vw;
}

/* =========================
   Модальное окно результатов
   ========================= */
.mbf-tower-result {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vh 3vw;
  visibility: hidden;
  opacity: 0;
  color: #d5d8dc;
  font-family: "MBFTowerCondensed", "Arial Narrow", Arial, sans-serif;
  transition: visibility 0.28s linear, opacity 0.28s ease;
}
.mbf-tower-result *,
.mbf-tower-result *::before,
.mbf-tower-result *::after {
  box-sizing: border-box;
}
.mbf-tower-result.is-open {
  visibility: visible;
  opacity: 1;
}
.mbf-tower-result.is-open .mbf-tower-result__dialog {
  transform: translateY(0) scale(1);
}
.mbf-tower-result__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 4, 9, 0.86);
  cursor: default;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.mbf-tower-result__dialog {
  position: relative;
  width: min(1210px, 94vw);
  max-height: 94vh;
  padding: 20px 24px 22px;
  overflow: auto;
  border: 1px solid rgba(121, 91, 166, 0.74);
  background: radial-gradient(circle at 50% -8%, rgba(97, 33, 153, 0.2), transparent 36%), linear-gradient(135deg, rgba(10, 21, 31, 0.98), rgba(2, 8, 14, 0.99) 42%, rgba(5, 13, 21, 0.99));
  -webkit-clip-path: polygon(17px 0, calc(50% - 10px) 0, 50% 10px, calc(50% + 10px) 0, calc(100% - 17px) 0, 100% 17px, 100% calc(100% - 17px), calc(100% - 17px) 100%, 17px 100%, 0 calc(100% - 17px), 0 17px);
          clip-path: polygon(17px 0, calc(50% - 10px) 0, 50% 10px, calc(50% + 10px) 0, calc(100% - 17px) 0, 100% 17px, 100% calc(100% - 17px), calc(100% - 17px) 100%, 17px 100%, 0 calc(100% - 17px), 0 17px);
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.65), 0 0 38px rgba(94, 29, 155, 0.3);
  transform: translateY(22px) scale(0.975);
  transition: transform 0.32s cubic-bezier(0.2, 0.78, 0.25, 1);
  scrollbar-color: #7040a5 #071019;
}
.mbf-tower-result__dialog::before {
  position: absolute;
  content: "";
  inset: 8px;
  border: 1px solid rgba(86, 110, 132, 0.23);
  -webkit-clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px);
          clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px);
  pointer-events: none;
}
.mbf-tower-result__close {
  position: absolute;
  z-index: 5;
  top: 21px;
  right: 21px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.mbf-tower-result__close span {
  position: absolute;
  top: 16px;
  left: 2px;
  width: 31px;
  height: 3px;
  border-radius: 2px;
  background: #d4b4ff;
  box-shadow: 0 0 7px rgba(171, 83, 255, 0.7);
}
.mbf-tower-result__close span:first-child {
  transform: rotate(45deg);
}
.mbf-tower-result__close span:last-child {
  transform: rotate(-45deg);
}
.mbf-tower-result__header {
  position: relative;
  z-index: 1;
  width: 62%;
  margin: 0 auto 10px;
  text-align: center;
}
.mbf-tower-result__header h2 {
  margin: 0;
  color: #e3e1e8;
  font-size: 36px;
  font-weight: 680;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 5px #000;
}
.mbf-tower-result__header .mbf-abyss-tower__ornament {
  margin-top: 8px;
}
.mbf-tower-result__main-grid, .mbf-tower-result__bottom-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
}
.mbf-tower-result__main-grid {
  grid-template-columns: 0.9fr 1.47fr 1fr;
}
.mbf-tower-result__bottom-grid {
  grid-template-columns: 1.42fr 0.83fr;
  margin-top: 10px;
}
.mbf-tower-result__panel {
  position: relative;
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid rgba(80, 101, 121, 0.35);
  background: rgba(2, 9, 15, 0.65);
  -webkit-clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
          clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
}
.mbf-tower-result__panel > h3,
.mbf-tower-result__panel .mbf-tower-result__progress > h3 {
  margin: 0 0 12px;
  color: #aeb3b9;
  font-size: 14px;
  font-weight: 550;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.mbf-tower-result__information dl {
  margin: 0;
}
.mbf-tower-result__information dl > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 35px;
  gap: 12px;
}
.mbf-tower-result__information dt {
  color: #8f9499;
}
.mbf-tower-result__information dd {
  margin: 0;
  color: #c768ff;
  text-align: right;
}
.mbf-tower-result__information > h3:nth-of-type(2) {
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid rgba(70, 96, 118, 0.34);
}
.mbf-tower-result__information > p {
  display: flex;
  justify-content: space-between;
  margin: 13px 0 0;
  color: #8f9499;
}
.mbf-tower-result__information > p strong {
  color: #b559ff;
}
.mbf-tower-result__power-row dd {
  display: flex;
  align-items: center;
  gap: 9px;
}
.mbf-tower-result__power-row dd svg {
  width: 26px;
  height: 26px;
  fill: #b9c0c6;
}
.mbf-tower-result__squad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
.mbf-tower-result__squad div {
  position: relative;
  aspect-ratio: 2/3;
  overflow: hidden;
  border: 1px solid rgba(83, 126, 154, 0.55);
  border-radius: 3px;
}
.mbf-tower-result__squad img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.mbf-tower-result__squad strong {
  position: absolute;
  right: 3px;
  bottom: 2px;
  color: #c168ff;
  font-size: 17px;
  text-shadow: 0 2px 3px #000;
}
.mbf-tower-result__rewards {
  text-align: center;
}
.mbf-tower-result__rewards > small {
  display: block;
  margin-top: 9px;
  color: #7f8489;
}
.mbf-tower-result__reward-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.mbf-tower-result__reward {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(92, 125, 154, 0.68);
  border-radius: 4px;
  background: radial-gradient(circle, rgba(30, 104, 157, 0.26), rgba(3, 10, 17, 0.8));
}
.mbf-tower-result__reward--violet {
  border-color: rgba(170, 77, 244, 0.72);
  background: radial-gradient(circle, rgba(129, 35, 202, 0.34), rgba(11, 4, 21, 0.85));
}
.mbf-tower-result__reward--gold {
  border-color: rgba(199, 141, 59, 0.72);
  background: radial-gradient(circle, rgba(167, 111, 28, 0.3), rgba(19, 12, 4, 0.85));
}
.mbf-tower-result__reward--gold::before, .mbf-tower-result__reward--gold::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  transform: translate(-50%, -50%);
}
.mbf-tower-result__reward--gold::before {
  width: 62%;
  height: 62%;
  border: 3px double #f0c168;
  border-radius: 50%;
  background: radial-gradient(circle, #9c6626 0 48%, #5b3612 50% 100%);
  box-shadow: inset 0 0 9px rgba(255, 221, 138, 0.5), 0 0 7px rgba(224, 158, 64, 0.4);
}
.mbf-tower-result__reward--gold::after {
  width: 31%;
  height: 31%;
  background: #edc46f;
  -webkit-clip-path: polygon(50% 0, 61% 34%, 100% 24%, 70% 50%, 100% 76%, 61% 66%, 50% 100%, 39% 66%, 0 76%, 30% 50%, 0 24%, 39% 34%);
          clip-path: polygon(50% 0, 61% 34%, 100% 24%, 70% 50%, 100% 76%, 61% 66%, 50% 100%, 39% 66%, 0 76%, 30% 50%, 0 24%, 39% 34%);
  filter: drop-shadow(0 0 3px #fff0b2);
}
.mbf-tower-result__reward--gold img {
  opacity: 0;
}
.mbf-tower-result__reward img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.mbf-tower-result__reward strong {
  position: absolute;
  z-index: 2;
  right: 5px;
  bottom: 3px;
  min-width: 28px;
  padding: 1px 3px;
  color: #ece9e5;
  font-size: 17px;
  text-align: right;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.86) 32%);
  text-shadow: 0 1px 4px #000, 0 1px 4px #000;
}
.mbf-tower-result__claim {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76%;
  height: 58px;
  margin: 32px auto 0;
  gap: 13px;
  color: #d7b5ff;
  border: 2px solid #ae58f7;
  background: linear-gradient(90deg, #331051, #54167c, #32104f);
  box-shadow: inset 0 0 18px rgba(184, 89, 255, 0.46), 0 0 9px rgba(145, 51, 225, 0.6);
  cursor: pointer;
  text-transform: uppercase;
}
.mbf-tower-result__claim span {
  font-size: 26px;
}
.mbf-tower-result__claim strong {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.mbf-tower-result__claim.is-claimed {
  color: #8ddfff;
  border-color: #3abbea;
  background: rgba(8, 67, 91, 0.65);
  pointer-events: none;
}
.mbf-tower-result__claim.is-claimed.is-continuable {
  pointer-events: auto;
}
.mbf-tower-result__progress {
  margin-top: 24px;
  padding-top: 17px;
  border-top: 1px solid rgba(75, 99, 119, 0.35);
}
.mbf-tower-result__progress-line {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mbf-tower-result__progress-line strong {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 57px;
  height: 57px;
  color: #b9eeff;
  border: 1px solid #31b9ed;
  border-radius: 50%;
  font-size: 22px;
  background: rgba(4, 35, 54, 0.8);
  box-shadow: 0 0 10px rgba(38, 190, 244, 0.34);
}
.mbf-tower-result__progress-line strong:last-child {
  color: #dab4ff;
  border-color: #a64cf1;
  background: rgba(48, 11, 77, 0.82);
  box-shadow: 0 0 12px rgba(170, 70, 244, 0.45);
}
.mbf-tower-result__progress-line i {
  position: relative;
  display: block;
  flex: 1 1 auto;
  height: 2px;
  background: #45c7f2;
}
.mbf-tower-result__progress-line i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  content: "";
  border: 2px solid #72dcff;
  border-radius: 50%;
  background: #07131d;
  transform: translate(-50%, -50%);
}
.mbf-tower-result__progress-line i.is-violet {
  background: #a95bdb;
}
.mbf-tower-result__progress-line i.is-violet::after {
  border-color: #c483f3;
}
.mbf-tower-result__battle-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 18px;
  padding: 13px 0;
  border: 1px solid rgba(74, 97, 116, 0.32);
}
.mbf-tower-result__battle-stats div {
  border-right: 1px solid rgba(63, 84, 101, 0.3);
}
.mbf-tower-result__battle-stats div:last-child {
  border-right: 0;
}
.mbf-tower-result__battle-stats span,
.mbf-tower-result__battle-stats strong {
  display: block;
}
.mbf-tower-result__battle-stats span {
  color: #888e94;
  font-size: 12px;
}
.mbf-tower-result__battle-stats strong {
  margin-top: 6px;
  color: #bd5fff;
  font-size: 20px;
}
.mbf-tower-result__timeline {
  display: flex;
  flex-direction: column;
}
.mbf-tower-result__event-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: none;
  overflow: visible;
}
.mbf-tower-result__event {
  display: grid;
  grid-template-columns: 42px 50px minmax(0, 1fr);
  align-items: center;
  min-height: 45px;
  gap: 8px;
}
.mbf-tower-result__event time {
  color: #777e84;
  font-size: 11px;
}
.mbf-tower-result__event p {
  margin: 0;
  color: #a5a9ad;
  font-size: 12px;
  line-height: 1.22;
}
.mbf-tower-result__event-icon {
  display: block;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(67, 141, 185, 0.6);
  background: #06131c;
}
.mbf-tower-result__event-icon--violet {
  border-color: rgba(165, 68, 240, 0.72);
}
.mbf-tower-result__event-icon img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.mbf-tower-result__show-events {
  width: 100%;
  height: 44px;
  margin-top: auto;
  color: #999fa5;
  border: 1px solid rgba(85, 108, 128, 0.38);
  background: rgba(5, 13, 20, 0.75);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.mbf-tower-result__show-events i {
  margin-left: 10px;
  font-style: normal;
}
.mbf-tower-result__effects {
  padding-bottom: 13px;
}
.mbf-tower-result__effect-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}
.mbf-tower-result__effect {
  display: grid;
  grid-template-columns: 55px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  min-height: 78px;
  padding: 7px;
  border: 1px solid rgba(66, 90, 111, 0.34);
}
.mbf-tower-result__effect > span:last-child,
.mbf-tower-result__effect small,
.mbf-tower-result__effect strong,
.mbf-tower-result__effect em {
  display: block;
  min-width: 0;
}
.mbf-tower-result__effect small {
  overflow: hidden;
  color: #90969c;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mbf-tower-result__effect strong {
  margin-top: 4px;
  color: #c763ff;
  font-size: 21px;
  font-weight: 550;
}
.mbf-tower-result__effect em {
  margin-top: 4px;
  overflow: hidden;
  color: #767d83;
  font-size: 10px;
  font-style: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mbf-tower-result__effect-icon {
  display: block;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(160, 68, 224, 0.58);
  background: rgba(48, 11, 77, 0.5);
}
.mbf-tower-result__effect-icon--cyan {
  border-color: rgba(44, 173, 221, 0.62);
  background: rgba(5, 55, 77, 0.55);
}
.mbf-tower-result__effect-icon img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.mbf-tower-result__achievement-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mbf-tower-result__achievement {
  position: relative;
  display: grid;
  grid-template-columns: 47px minmax(0, 1fr);
  align-items: center;
  min-height: 77px;
  padding: 7px 28px 7px 9px;
  border: 1px solid rgba(74, 96, 115, 0.38);
}
.mbf-tower-result__achievement b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: #dbb2ff;
  border: 1px solid #a54ce7;
  border-radius: 50%;
  font-size: 22px;
  box-shadow: 0 0 10px rgba(166, 68, 231, 0.34);
}
.mbf-tower-result__achievement span,
.mbf-tower-result__achievement strong,
.mbf-tower-result__achievement small {
  display: block;
  min-width: 0;
}
.mbf-tower-result__achievement strong {
  color: #b6bbc0;
  font-size: 13px;
  font-weight: 550;
}
.mbf-tower-result__achievement small {
  margin-top: 5px;
  color: #80868b;
  font-size: 10px;
}
.mbf-tower-result__achievement > i {
  position: absolute;
  top: 9px;
  right: 10px;
  color: #d8dde1;
  font-style: normal;
}
.mbf-tower-result__achievement--cyan b {
  color: #a8ecff;
  border-color: #38bceb;
  box-shadow: 0 0 10px rgba(48, 181, 230, 0.34);
}

body.is-tower-modal-open {
  overflow: hidden !important;
}

@media (max-width: 900px) {
  .mbf-tower-result {
    align-items: flex-start;
    padding: 12px;
  }
  .mbf-tower-result__dialog {
    width: 100%;
    max-height: calc(100svh - 24px);
    padding: 17px 14px 18px;
  }
  .mbf-tower-result__close {
    top: 14px;
    right: 14px;
    transform: scale(0.75);
  }
  .mbf-tower-result__header {
    width: 78%;
    margin-bottom: 8px;
  }
  .mbf-tower-result__header h2 {
    font-size: clamp(22px, 5vw, 34px);
  }
  .mbf-tower-result__main-grid, .mbf-tower-result__bottom-grid {
    grid-template-columns: 1fr;
  }
  .mbf-tower-result__information {
    display: grid;
    grid-template-columns: 1fr 1fr;
    -moz-column-gap: 16px;
         column-gap: 16px;
  }
  .mbf-tower-result__information > h3,
  .mbf-tower-result__information > p {
    grid-column: 1/-1;
  }
  .mbf-tower-result__claim {
    width: min(430px, 92%);
  }
  .mbf-tower-result__event-list {
    max-height: none;
  }
}
@media (max-width: 560px) {
  .mbf-tower-result__dialog {
    padding-right: 10px;
    padding-left: 10px;
  }
  .mbf-tower-result__header h2 {
    font-size: 20px;
    letter-spacing: 0.05em;
  }
  .mbf-tower-result__panel {
    padding: 12px 10px;
  }
  .mbf-tower-result__information {
    display: block;
  }
  .mbf-tower-result__reward-grid {
    gap: 4px;
  }
  .mbf-tower-result__reward strong {
    font-size: 13px;
  }
  .mbf-tower-result__claim {
    height: 50px;
    margin-top: 20px;
  }
  .mbf-tower-result__claim strong {
    font-size: 18px;
  }
  .mbf-tower-result__progress-line strong {
    width: 45px;
    height: 45px;
    font-size: 18px;
  }
  .mbf-tower-result__progress-line i::after {
    width: 7px;
    height: 7px;
  }
  .mbf-tower-result__battle-stats span {
    font-size: 10px;
  }
  .mbf-tower-result__battle-stats strong {
    font-size: 17px;
  }
  .mbf-tower-result__effect-grid, .mbf-tower-result__achievement-grid {
    grid-template-columns: 1fr 1fr;
  }
  .mbf-tower-result__effect {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .mbf-tower-result__effect strong {
    font-size: 18px;
  }
  .mbf-tower-result__effect-icon {
    width: 39px;
    height: 39px;
  }
  .mbf-tower-result__achievement-grid {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   Финальная точная компоновка штаба и панели этажа
   ========================================================= */
.mbf-tower-hq__upgrade-icon, .mbf-tower-hq__order-icon {
  background-color: transparent;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 0 9px rgba(97, 105, 255, 0.28));
}
.mbf-tower-hq__upgrade-icon--assault {
  background-image: url("/assets/tower-raid/hq-v2/upgrade-assault.png");
}
.mbf-tower-hq__upgrade-icon--endurance {
  background-image: url("/assets/tower-raid/hq-v2/upgrade-endurance.png");
}
.mbf-tower-hq__upgrade-icon--hunt {
  background-image: url("/assets/tower-raid/hq-v2/upgrade-hunt.png");
}
.mbf-tower-hq__upgrade-icon--mentoring {
  background-image: url("/assets/tower-raid/hq-v2/upgrade-mentoring.png");
}
.mbf-tower-hq__upgrade-icon--supply {
  background-image: url("/assets/tower-raid/hq-v2/upgrade-supply.png");
}
.mbf-tower-hq__order-icon--breakthrough {
  background-image: url("/assets/tower-raid/hq-v2/order-breakthrough.png");
}
.mbf-tower-hq__order-icon--training {
  background-image: url("/assets/tower-raid/hq-v2/order-training.png");
}
.mbf-tower-hq__order-icon--gathering {
  background-image: url("/assets/tower-raid/hq-v2/order-gathering.png");
}
.mbf-tower-hq__order-icon--boss-hunt {
  background-image: url("/assets/tower-raid/hq-v2/order-boss-hunt.png");
}

.mbf-abyss-tower__summary-actions {
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(104, 181, 232, 0.7);
  background: linear-gradient(90deg, rgba(13, 31, 51, 0.94), rgba(11, 18, 35, 0.96) 52%, rgba(37, 13, 57, 0.94));
  -webkit-clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
          clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  box-shadow: inset 0 0 18px rgba(32, 102, 166, 0.12), 0 0 10px rgba(21, 112, 185, 0.1);
}
.mbf-abyss-tower__leaders, .mbf-abyss-tower__hq-button {
  justify-content: center;
  padding: 0 13px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.mbf-abyss-tower__leaders i, .mbf-abyss-tower__hq-button i {
  margin-left: 12px;
}
.mbf-abyss-tower__leaders:hover, .mbf-abyss-tower__leaders:focus-visible, .mbf-abyss-tower__hq-button:hover, .mbf-abyss-tower__hq-button:focus-visible {
  border: 0;
  background: rgba(89, 63, 158, 0.13);
  box-shadow: inset 0 0 18px rgba(105, 68, 212, 0.17);
  transform: none;
}
.mbf-abyss-tower__leaders {
  border-right: 1px solid rgba(82, 122, 157, 0.55);
}
.mbf-abyss-tower__hq-button {
  border-left: 1px solid rgba(117, 61, 153, 0.35);
}

@media (min-width: 981px) {
  .mbf-tower-hq {
    padding: 16px;
  }
  .mbf-tower-hq__dialog {
    width: min(1230px, 100vw - 32px);
    height: min(790px, 100svh - 32px);
    min-height: 680px;
    padding: 15px 17px 16px;
    border-color: rgba(74, 180, 226, 0.75);
    background: radial-gradient(ellipse at 50% 0, rgba(90, 34, 157, 0.18), transparent 38%), radial-gradient(circle at 18% 35%, rgba(22, 72, 111, 0.12), transparent 34%), linear-gradient(140deg, rgba(5, 16, 27, 0.994), rgba(2, 8, 14, 0.997) 57%, rgba(4, 12, 22, 0.995));
    box-shadow: inset 0 0 52px rgba(0, 0, 0, 0.72), 0 0 0 3px rgba(12, 28, 43, 0.78), 0 0 30px rgba(69, 140, 226, 0.15);
  }
  .mbf-tower-hq__close {
    top: 15px;
    right: 17px;
    width: 34px;
    height: 34px;
  }
  .mbf-tower-hq__close span {
    top: 16px;
    left: 3px;
    width: 29px;
  }
  .mbf-tower-hq__header {
    flex-basis: 68px;
  }
  .mbf-tower-hq__header h2 {
    font-size: 36px;
    letter-spacing: 0.055em;
  }
  .mbf-tower-hq__header p {
    margin-top: 4px;
    font-size: 14px;
    letter-spacing: 0.09em;
  }
  .mbf-tower-hq__currency {
    top: 3px;
    right: 51px;
    min-width: 142px;
    height: 43px;
    padding-right: 14px;
  }
  .mbf-tower-hq__currency img {
    width: 34px;
    height: 34px;
  }
  .mbf-tower-hq__currency strong {
    font-size: 22px;
  }
  .mbf-tower-hq__tabs {
    flex-basis: 42px;
    gap: 4px;
    width: 528px;
    margin-bottom: 8px;
  }
  .mbf-tower-hq__tabs button {
    font-size: 18px;
  }
  .mbf-tower-hq__panel[data-tower-hq-panel=banner] {
    grid-template-rows: 250px 62px minmax(0, 1fr);
  }
  .mbf-tower-hq__panel[data-tower-hq-panel=orders] {
    grid-template-rows: 250px 48px minmax(0, 1fr) 40px 20px;
  }
  .mbf-tower-hq__banner-overview {
    grid-template-columns: 250px 310px minmax(0, 1fr);
  }
  .mbf-tower-hq__banner-art img {
    top: 50%;
    width: 82%;
    height: 116%;
    transform: translate(-50%, -50%);
  }
  .mbf-tower-hq__banner-rank {
    padding: 14px 17px 12px;
  }
  .mbf-tower-hq__banner-rank h3 {
    margin-bottom: auto;
    font-size: 23px;
  }
  .mbf-tower-hq__banner-rank > span {
    font-size: 15px;
  }
  .mbf-tower-hq__banner-rank > strong {
    font-size: 58px;
  }
  .mbf-tower-hq__banner-rank > b, .mbf-tower-hq__banner-rank > small {
    font-size: 14px;
  }
  .mbf-tower-hq__banner-rank > small {
    margin-top: 5px;
  }
  .mbf-tower-hq__rank-line {
    width: 250px;
    height: 10px;
    margin: 6px auto 5px;
  }
  .mbf-tower-hq__active-bonuses {
    padding: 13px 8px 34px;
  }
  .mbf-tower-hq__active-bonuses > p {
    right: 12px;
    bottom: 8px;
    left: 576px;
    padding-top: 8px;
    font-size: 12px;
  }
  .mbf-tower-hq__active-bonus .mbf-tower-hq__upgrade-icon {
    width: 66px;
    height: 74px;
    margin: 0;
  }
  .mbf-tower-hq__active-bonus strong {
    font-size: 19px;
  }
  .mbf-tower-hq__active-bonus small {
    font-size: 10px;
  }
  .mbf-tower-hq__section-title h3 {
    font-size: 22px;
  }
  .mbf-tower-hq__section-title p {
    margin-top: 4px;
    font-size: 13px;
  }
  .mbf-tower-hq__upgrade-grid {
    gap: 12px;
  }
  .mbf-tower-hq__upgrade {
    grid-template-rows: 116px 27px 34px 29px 28px 38px;
    padding: 7px 10px 9px;
  }
  .mbf-tower-hq__upgrade > .mbf-tower-hq__upgrade-icon {
    width: 114px;
    height: 114px;
  }
  .mbf-tower-hq__upgrade h4 {
    font-size: 17px;
  }
  .mbf-tower-hq__upgrade p {
    min-height: 0;
    font-size: 12px;
  }
  .mbf-tower-hq__upgrade > small {
    margin-top: 2px;
    padding: 5px 0;
    font-size: 11px;
  }
  .mbf-tower-hq__upgrade button {
    font-size: 14px;
  }
  .mbf-tower-hq__upgrade-cost {
    margin: 0;
    font-size: 16px;
  }
  .mbf-tower-hq__upgrade-cost img {
    width: 24px;
    height: 24px;
  }
  .mbf-tower-hq__order-overview {
    grid-template-columns: 250px 305px 330px minmax(0, 1fr);
  }
  .mbf-tower-hq__order-art img {
    width: 93%;
    height: 110%;
  }
  .mbf-tower-hq__order-current {
    padding: 15px 18px;
  }
  .mbf-tower-hq__order-current h3 {
    font-size: 24px;
  }
  .mbf-tower-hq__order-current p {
    font-size: 13px;
  }
  .mbf-tower-hq__order-current > span {
    font-size: 14px;
  }
  .mbf-tower-hq__order-current > strong {
    font-size: 31px;
  }
  .mbf-tower-hq__order-effects {
    padding: 18px 25px;
  }
  .mbf-tower-hq__order-effects strong, .mbf-tower-hq__order-effects b {
    font-size: 18px;
  }
  .mbf-tower-hq__order-effects b {
    margin-top: 8px;
  }
  .mbf-tower-hq__order-effects small {
    font-size: 12px;
  }
  .mbf-tower-hq__order-rank {
    padding: 16px;
  }
  .mbf-tower-hq__order-rank > strong {
    font-size: 18px;
  }
  .mbf-tower-hq__order-rank > span {
    margin: 8px 0 10px;
    font-size: 15px;
  }
  .mbf-tower-hq__order-rank > small {
    font-size: 12px;
  }
  .mbf-tower-hq__order-grid {
    gap: 12px;
  }
  .mbf-tower-hq__order {
    grid-template-rows: 102px 28px 19px 22px 22px 24px 37px;
    padding: 7px 10px 9px;
  }
  .mbf-tower-hq__order > .mbf-tower-hq__order-icon {
    width: 126px;
    height: 102px;
  }
  .mbf-tower-hq__order > strong {
    font-size: 19px;
  }
  .mbf-tower-hq__order > small {
    font-size: 11px;
  }
  .mbf-tower-hq__order > b, .mbf-tower-hq__order > em {
    margin-top: 3px;
    font-size: 13px;
  }
  .mbf-tower-hq__order > i {
    margin: 4px 0;
    font-size: 10px;
  }
  .mbf-tower-hq__order-action {
    height: 37px;
    font-size: 15px;
  }
  .mbf-tower-hq__save-order {
    width: 355px;
    height: 40px;
    margin-top: 2px;
    font-size: 17px;
  }
  .mbf-tower-hq__save-caption {
    margin-top: 3px;
    font-size: 12px;
  }
  .mbf-abyss-tower--desktop .mbf-abyss-tower__summary-actions {
    top: 49.7%;
    right: 5.3%;
    left: 5.3%;
    grid-template-columns: 1fr 1fr;
    height: 7.1%;
  }
  .mbf-abyss-tower--desktop .mbf-abyss-tower__leaders, .mbf-abyss-tower--desktop .mbf-abyss-tower__hq-button {
    font-size: 0.61cqw;
  }
  .mbf-abyss-tower--desktop .mbf-abyss-tower__leaders svg, .mbf-abyss-tower--desktop .mbf-abyss-tower__hq-button svg {
    width: 18px;
    height: 18px;
    margin-right: 7px;
  }
}
@media (max-width: 980px) {
  .mbf-tower-hq__header {
    justify-content: center;
    min-height: 74px;
    padding: 0 46px;
    text-align: center;
  }
  .mbf-tower-hq__currency {
    margin-bottom: 9px;
  }
  .mbf-tower-hq__banner-art img {
    top: 50%;
    width: 82%;
    height: 116%;
    transform: translate(-50%, -50%);
  }
  .mbf-tower-hq__order-art img {
    width: 92%;
    height: 105%;
  }
  .mbf-tower-hq__upgrade > .mbf-tower-hq__upgrade-icon {
    width: 126px;
    height: 126px;
  }
  .mbf-tower-hq__order > .mbf-tower-hq__order-icon {
    width: 145px;
    height: 130px;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__summary-actions {
    right: 5.8%;
    left: 5.8%;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__leaders, .mbf-abyss-tower--mobile .mbf-abyss-tower__hq-button {
    padding: 0 1.3vw;
  }
}
@media (max-width: 560px) {
  .mbf-tower-hq__header {
    justify-content: center;
    min-height: 78px;
    padding: 0 40px;
    text-align: center;
  }
  .mbf-tower-hq__banner-art {
    min-height: 225px;
  }
  .mbf-tower-hq__banner-rank {
    min-height: 215px;
  }
  .mbf-tower-hq__active-bonuses {
    grid-template-columns: repeat(5, minmax(72px, 1fr));
    padding-top: 10px;
  }
  .mbf-tower-hq__active-bonus .mbf-tower-hq__upgrade-icon {
    width: 58px;
    height: 66px;
  }
  .mbf-tower-hq__upgrade, .mbf-tower-hq__upgrade:last-child {
    grid-template-rows: 132px auto auto auto auto 42px;
    min-height: 315px;
  }
  .mbf-tower-hq__order {
    grid-template-rows: 138px auto auto auto auto auto 42px;
    min-height: 342px;
  }
}
/* Штаб v2: этот блок намеренно последний — он фиксирует итоговую геометрию. */
.mbf-tower-hq__upgrade-icon,
.mbf-tower-hq__order-icon {
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.mbf-tower-hq__upgrade-icon--assault {
  background-image: url("/assets/tower-raid/hq-v2/upgrade-assault.png") !important;
}

.mbf-tower-hq__upgrade-icon--endurance {
  background-image: url("/assets/tower-raid/hq-v2/upgrade-endurance.png") !important;
}

.mbf-tower-hq__upgrade-icon--hunt {
  background-image: url("/assets/tower-raid/hq-v2/upgrade-hunt.png") !important;
}

.mbf-tower-hq__upgrade-icon--mentoring {
  background-image: url("/assets/tower-raid/hq-v2/upgrade-mentoring.png") !important;
}

.mbf-tower-hq__upgrade-icon--supply {
  background-image: url("/assets/tower-raid/hq-v2/upgrade-supply.png") !important;
}

.mbf-tower-hq__order-icon--breakthrough {
  background-image: url("/assets/tower-raid/hq-v2/order-breakthrough.png") !important;
}

.mbf-tower-hq__order-icon--training {
  background-image: url("/assets/tower-raid/hq-v2/order-training.png") !important;
}

.mbf-tower-hq__order-icon--gathering {
  background-image: url("/assets/tower-raid/hq-v2/order-gathering.png") !important;
}

.mbf-tower-hq__order-icon--boss-hunt {
  background-image: url("/assets/tower-raid/hq-v2/order-boss-hunt.png") !important;
}

@media (min-width: 981px) {
  .mbf-tower-hq__dialog {
    width: min(1230px, 100vw - 32px);
    height: min(790px, 100svh - 32px);
    min-height: 680px;
    padding: 15px 17px 16px;
  }
  .mbf-tower-hq__header {
    flex-basis: 68px;
  }
  .mbf-tower-hq__header h2 {
    font-size: 36px;
  }
  .mbf-tower-hq__header p {
    margin-top: 4px;
    font-size: 14px;
  }
  .mbf-tower-hq__currency {
    top: 3px;
    right: 51px;
    min-width: 142px;
    height: 43px;
    padding-right: 14px;
  }
  .mbf-tower-hq__currency img {
    width: 34px;
    height: 34px;
  }
  .mbf-tower-hq__currency strong {
    font-size: 22px;
  }
  .mbf-tower-hq__close {
    top: 15px;
    right: 17px;
    width: 34px;
    height: 34px;
  }
  .mbf-tower-hq__close span {
    top: 16px;
    left: 3px;
    width: 29px;
  }
  .mbf-tower-hq__tabs {
    flex-basis: 42px;
    gap: 4px;
    width: 528px;
    margin-bottom: 8px;
  }
  .mbf-tower-hq__tabs button {
    font-size: 18px;
  }
  .mbf-tower-hq__panel[data-tower-hq-panel=banner] {
    grid-template-rows: 250px 62px minmax(0, 1fr);
  }
  .mbf-tower-hq__banner-overview {
    grid-template-columns: 250px 310px minmax(0, 1fr);
  }
  .mbf-tower-hq__banner-art img {
    top: 50%;
    width: 82%;
    height: 116%;
    transform: translate(-50%, -50%);
  }
  .mbf-tower-hq__banner-rank {
    padding: 14px 17px 12px;
  }
  .mbf-tower-hq__banner-rank h3 {
    margin-bottom: auto;
    font-size: 23px;
  }
  .mbf-tower-hq__banner-rank > span {
    font-size: 15px;
  }
  .mbf-tower-hq__banner-rank > strong {
    font-size: 58px;
  }
  .mbf-tower-hq__banner-rank > b,
  .mbf-tower-hq__banner-rank > small {
    font-size: 14px;
  }
  .mbf-tower-hq__banner-rank > small {
    margin-top: 5px;
  }
  .mbf-tower-hq__rank-line {
    width: 250px;
    height: 10px;
    margin: 6px auto 5px;
  }
  .mbf-tower-hq__active-bonuses {
    padding: 13px 8px 34px;
  }
  .mbf-tower-hq__active-bonuses > p {
    right: 12px;
    bottom: 8px;
    left: 576px;
    padding-top: 8px;
    font-size: 12px;
  }
  .mbf-tower-hq__active-bonus .mbf-tower-hq__upgrade-icon {
    width: 66px;
    height: 74px;
    margin: 0;
  }
  .mbf-tower-hq__active-bonus strong {
    font-size: 19px;
  }
  .mbf-tower-hq__active-bonus small {
    font-size: 10px;
  }
  .mbf-tower-hq__section-title h3 {
    font-size: 22px;
  }
  .mbf-tower-hq__section-title p {
    margin-top: 4px;
    font-size: 13px;
  }
  .mbf-tower-hq__upgrade-grid {
    gap: 12px;
  }
  .mbf-tower-hq__upgrade {
    grid-template-rows: 116px 27px 34px 29px 28px 38px;
    padding: 7px 10px 9px;
  }
  .mbf-tower-hq__upgrade > .mbf-tower-hq__upgrade-icon {
    width: 114px;
    height: 114px;
  }
  .mbf-tower-hq__upgrade h4 {
    font-size: 17px;
  }
  .mbf-tower-hq__upgrade p {
    min-height: 0;
    font-size: 12px;
  }
  .mbf-tower-hq__upgrade > small {
    margin-top: 2px;
    padding: 5px 0;
    font-size: 11px;
  }
  .mbf-tower-hq__upgrade button {
    font-size: 14px;
  }
  .mbf-tower-hq__upgrade-cost {
    margin: 0;
    font-size: 16px;
  }
  .mbf-tower-hq__upgrade-cost img {
    width: 24px;
    height: 24px;
  }
  .mbf-tower-hq__panel[data-tower-hq-panel=orders] {
    grid-template-rows: 250px 48px minmax(0, 1fr) 40px 20px;
  }
  .mbf-tower-hq__order-overview {
    grid-template-columns: 250px 305px 330px minmax(0, 1fr);
  }
  .mbf-tower-hq__order-art img {
    width: 93%;
    height: 110%;
  }
  .mbf-tower-hq__order-current {
    padding: 15px 18px;
  }
  .mbf-tower-hq__order-current h3 {
    font-size: 24px;
  }
  .mbf-tower-hq__order-current p {
    font-size: 13px;
  }
  .mbf-tower-hq__order-current > span {
    font-size: 14px;
  }
  .mbf-tower-hq__order-current > strong {
    font-size: 31px;
  }
  .mbf-tower-hq__order-effects {
    padding: 18px 25px;
  }
  .mbf-tower-hq__order-effects strong,
  .mbf-tower-hq__order-effects b {
    font-size: 18px;
  }
  .mbf-tower-hq__order-effects b {
    margin-top: 8px;
  }
  .mbf-tower-hq__order-effects small {
    font-size: 12px;
  }
  .mbf-tower-hq__order-rank {
    padding: 16px;
  }
  .mbf-tower-hq__order-rank > strong {
    font-size: 18px;
  }
  .mbf-tower-hq__order-rank > span {
    margin: 8px 0 10px;
    font-size: 15px;
  }
  .mbf-tower-hq__order-rank > small {
    font-size: 12px;
  }
  .mbf-tower-hq__order-grid {
    gap: 12px;
  }
  .mbf-tower-hq__order {
    grid-template-rows: 102px 28px 19px 22px 22px 24px 37px;
    padding: 7px 10px 9px;
  }
  .mbf-tower-hq__order > .mbf-tower-hq__order-icon {
    width: 126px;
    height: 102px;
  }
  .mbf-tower-hq__order > strong {
    font-size: 19px;
  }
  .mbf-tower-hq__order > small {
    font-size: 11px;
  }
  .mbf-tower-hq__order > b,
  .mbf-tower-hq__order > em {
    margin-top: 3px;
    font-size: 13px;
  }
  .mbf-tower-hq__order > i {
    margin: 4px 0;
    font-size: 10px;
  }
  .mbf-tower-hq__order-action {
    height: 37px;
    font-size: 15px;
  }
  .mbf-tower-hq__save-order {
    width: 355px;
    height: 40px;
    margin-top: 2px;
    font-size: 17px;
  }
  .mbf-tower-hq__save-caption {
    margin-top: 3px;
    font-size: 12px;
  }
  .mbf-abyss-tower--desktop .mbf-abyss-tower__floor-value {
    font-size: 5.35cqw;
  }
  .mbf-abyss-tower--desktop .mbf-abyss-tower__summary-actions {
    top: 53.5%;
    right: 5.3%;
    left: 5.3%;
    grid-template-columns: 1fr 1fr;
    gap: 0.85cqw;
    height: 8.7%;
    overflow: visible;
    border: 0;
    background: transparent;
    -webkit-clip-path: none;
            clip-path: none;
    box-shadow: none;
  }
  .mbf-abyss-tower--desktop .mbf-abyss-tower__leaders,
  .mbf-abyss-tower--desktop .mbf-abyss-tower__hq-button {
    border: 1px solid rgba(93, 180, 238, 0.72);
    background: linear-gradient(105deg, rgba(25, 47, 80, 0.73), rgba(5, 15, 28, 0.94));
    box-shadow: inset 0 0 15px rgba(46, 119, 199, 0.1);
    font-size: clamp(10px, 0.66cqw, 12px);
  }
  .mbf-abyss-tower--desktop .mbf-abyss-tower__hq-button {
    border-color: rgba(176, 83, 255, 0.78);
    background: linear-gradient(105deg, rgba(57, 21, 88, 0.68), rgba(7, 14, 27, 0.94));
  }
}
@media (max-width: 980px) {
  .mbf-tower-hq__header {
    justify-content: center;
    padding-right: 46px;
    padding-left: 46px;
    text-align: center;
  }
  .mbf-tower-hq__banner-art img {
    top: 50%;
    width: 82%;
    height: 116%;
    transform: translate(-50%, -50%);
  }
  .mbf-tower-hq__order-art img {
    width: 92%;
    height: 105%;
  }
  .mbf-tower-hq__upgrade > .mbf-tower-hq__upgrade-icon {
    width: 126px;
    height: 126px;
  }
  .mbf-tower-hq__order > .mbf-tower-hq__order-icon {
    width: 145px;
    height: 130px;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__summary-actions {
    top: 53%;
    right: 5.8%;
    left: 5.8%;
    grid-template-columns: 1fr 1fr;
    gap: 1.35vw;
    height: 9.5%;
    overflow: visible;
    border: 0;
    background: transparent;
    -webkit-clip-path: none;
            clip-path: none;
    box-shadow: none;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__leaders,
  .mbf-abyss-tower--mobile .mbf-abyss-tower__hq-button {
    border: 1px solid rgba(93, 180, 238, 0.72);
    background: linear-gradient(105deg, rgba(25, 47, 80, 0.73), rgba(5, 15, 28, 0.94));
    font-size: clamp(9px, 1.45vw, 12px);
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__hq-button {
    border-color: rgba(176, 83, 255, 0.78);
    background: linear-gradient(105deg, rgba(57, 21, 88, 0.68), rgba(7, 14, 27, 0.94));
  }
}
/*
 * Анимации включаются из initializeTower() добавлением класса is-ready.
 * Так страница остаётся статичной, пока JS ещё не инициализирован.
 */
.mbf-abyss-tower.is-ready .mbf-abyss-tower__backdrop::before {
  animation: mbf-tower-background-breathe 12s ease-in-out infinite alternate;
  transform-origin: 50% 28%;
}
.mbf-abyss-tower.is-ready .mbf-abyss-tower__backdrop::after {
  animation: mbf-tower-atmosphere 5.5s ease-in-out infinite alternate;
}
.mbf-abyss-tower.is-ready .mbf-abyss-tower__summary, .mbf-abyss-tower.is-ready .mbf-abyss-tower__expedition, .mbf-abyss-tower.is-ready .mbf-abyss-tower__preparation, .mbf-abyss-tower.is-ready .mbf-abyss-tower__command, .mbf-abyss-tower.is-ready .mbf-abyss-tower__mobile-cards, .mbf-abyss-tower.is-ready .mbf-abyss-tower__combat-stats, .mbf-abyss-tower.is-ready .mbf-abyss-tower__actions, .mbf-abyss-tower.is-ready .mbf-abyss-tower__reward-strip {
  animation: mbf-tower-enter 0.72s cubic-bezier(0.2, 0.76, 0.25, 1) both;
}
.mbf-abyss-tower.is-ready .mbf-abyss-tower__summary {
  animation-delay: 0.03s;
}
.mbf-abyss-tower.is-ready .mbf-abyss-tower__expedition {
  animation-delay: 0.14s;
}
.mbf-abyss-tower.is-ready .mbf-abyss-tower__preparation {
  animation-delay: 0.14s;
}
.mbf-abyss-tower.is-ready .mbf-abyss-tower__command, .mbf-abyss-tower.is-ready .mbf-abyss-tower__mobile-cards {
  animation-delay: 0.25s;
}
.mbf-abyss-tower.is-ready .mbf-abyss-tower__combat-stats {
  animation-delay: 0.36s;
}
.mbf-abyss-tower.is-ready .mbf-abyss-tower__actions {
  animation-delay: 0.43s;
}
.mbf-abyss-tower.is-ready .mbf-abyss-tower__reward-strip {
  animation-delay: 0.5s;
}
.mbf-abyss-tower.is-ready .mbf-abyss-tower__boss-level svg {
  animation: mbf-tower-boss-sigil 3.4s ease-in-out infinite;
  transform-origin: 50% 50%;
}
.mbf-abyss-tower.is-ready .mbf-abyss-tower__tower-level--boss {
  animation: mbf-tower-level-violet 3.8s ease-in-out infinite;
}
.mbf-abyss-tower.is-ready .mbf-abyss-tower__tower-level--current {
  animation: mbf-tower-level-current 2.35s ease-in-out infinite;
}
.mbf-abyss-tower.is-ready .mbf-abyss-tower__tower-level--past {
  animation: mbf-tower-level-past 4.2s ease-in-out infinite;
}
.mbf-abyss-tower.is-ready .mbf-abyss-tower__compass {
  animation: mbf-tower-compass 4.8s ease-in-out infinite;
}
.mbf-abyss-tower.is-ready .mbf-abyss-tower__ornament span {
  animation: mbf-tower-ornament 2.8s ease-in-out infinite;
}
.mbf-abyss-tower.is-ready .mbf-abyss-tower__route-point--active {
  animation: mbf-tower-route-active 1.9s ease-in-out infinite;
}
.mbf-abyss-tower.is-ready .mbf-abyss-tower__route-point--target {
  animation: mbf-tower-route-target 2.4s ease-in-out infinite;
}
.mbf-abyss-tower.is-ready .mbf-abyss-tower__event {
  animation: mbf-tower-event-glow 4s ease-in-out infinite alternate;
}
.mbf-abyss-tower.is-ready .mbf-abyss-tower__event:nth-child(3) {
  animation-delay: -2s;
}
.mbf-abyss-tower.is-ready .mbf-abyss-tower__card {
  animation: mbf-tower-card-enter 0.62s cubic-bezier(0.18, 0.78, 0.28, 1) both;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.mbf-abyss-tower.is-ready .mbf-abyss-tower__card:nth-child(1) {
  animation-delay: 0.27s;
}
.mbf-abyss-tower.is-ready .mbf-abyss-tower__card:nth-child(2) {
  animation-delay: 0.34s;
}
.mbf-abyss-tower.is-ready .mbf-abyss-tower__card:nth-child(3) {
  animation-delay: 0.41s;
}
.mbf-abyss-tower.is-ready .mbf-abyss-tower__card:nth-child(4) {
  animation-delay: 0.48s;
}
.mbf-abyss-tower.is-ready .mbf-abyss-tower__prep-card {
  animation: mbf-tower-card-enter 0.62s cubic-bezier(0.18, 0.78, 0.28, 1) both;
}
.mbf-abyss-tower.is-ready .mbf-abyss-tower__prep-card:nth-child(1) {
  animation-delay: 0.27s;
}
.mbf-abyss-tower.is-ready .mbf-abyss-tower__prep-card:nth-child(2) {
  animation-delay: 0.34s;
}
.mbf-abyss-tower.is-ready .mbf-abyss-tower__prep-card:nth-child(3) {
  animation-delay: 0.41s;
}
.mbf-abyss-tower.is-ready .mbf-abyss-tower__prep-card:nth-child(4) {
  animation-delay: 0.48s;
}
.mbf-abyss-tower.is-ready .mbf-abyss-tower__small-reward-image, .mbf-abyss-tower.is-ready .mbf-abyss-tower__reward-item-icon img {
  animation: mbf-tower-reward-float 3.6s ease-in-out infinite;
}
.mbf-abyss-tower.is-ready .mbf-abyss-tower__small-reward:nth-child(even) .mbf-abyss-tower__small-reward-image, .mbf-abyss-tower.is-ready .mbf-abyss-tower__reward-item:nth-child(even) .mbf-abyss-tower__reward-item-icon img {
  animation-delay: -1.8s;
}
.mbf-abyss-tower.is-ready .mbf-abyss-tower__accelerate::before {
  animation: mbf-tower-button-energy 4.6s linear infinite;
}
.mbf-abyss-tower.is-ready .mbf-abyss-tower__timer-value.is-ticking {
  animation: mbf-tower-timer-tick 0.28s ease-out;
}

.mbf-abyss-tower.is-squad-required .mbf-abyss-tower__prep-squad {
  animation: mbf-tower-squad-required 0.62s ease;
}
.mbf-abyss-tower.is-squad-required .mbf-abyss-tower__prep-card {
  border-color: rgba(255, 90, 112, 0.82);
  box-shadow: 0 0 10px rgba(255, 53, 82, 0.36);
}

.mbf-abyss-tower.is-expedition-complete .mbf-abyss-tower__timer-value {
  color: #d8b8ff;
  text-shadow: 0 0 12px rgba(178, 86, 255, 0.72);
}
.mbf-abyss-tower.is-expedition-complete .mbf-abyss-tower__route-point--target {
  box-shadow: 0 0 0 6px rgba(161, 68, 255, 0.42), 0 0 24px 10px rgba(161, 68, 255, 0.82);
}

@media (hover: hover) and (pointer: fine) {
  .mbf-abyss-tower.is-ready .mbf-abyss-tower__card:hover {
    z-index: 4;
    border-color: rgba(93, 204, 255, 0.8);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.48), 0 0 17px rgba(45, 184, 255, 0.3);
    filter: brightness(1.06);
    transform: translateY(-0.36cqw);
  }
}
@keyframes mbf-tower-enter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes mbf-tower-card-enter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes mbf-tower-squad-required {
  0%, 100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-7px);
  }
  40% {
    transform: translateX(6px);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(3px);
  }
}
@keyframes mbf-tower-background-breathe {
  from {
    filter: saturate(0.94) brightness(0.94);
    transform: scale(1.005);
  }
  to {
    filter: saturate(1.08) brightness(1.045);
    transform: scale(1.025);
  }
}
@keyframes mbf-tower-atmosphere {
  from {
    opacity: 0.88;
  }
  to {
    opacity: 1;
  }
}
@keyframes mbf-tower-boss-sigil {
  0%, 100% {
    filter: drop-shadow(0 0 6px rgba(163, 39, 255, 0.72));
    transform: scale(0.98);
  }
  50% {
    filter: drop-shadow(0 0 14px rgb(205, 111, 255));
    transform: scale(1.045);
  }
}
@keyframes mbf-tower-level-violet {
  0%, 100% {
    filter: brightness(0.94);
    transform: translateX(-50%) translateY(0);
  }
  50% {
    filter: brightness(1.16);
    transform: translateX(-50%) translateY(-3px);
  }
}
@keyframes mbf-tower-level-current {
  0%, 100% {
    filter: brightness(1);
    transform: translateX(-50%) scale(1);
  }
  50% {
    filter: brightness(1.2);
    transform: translateX(-50%) scale(1.025);
  }
}
@keyframes mbf-tower-level-past {
  0%, 100% {
    opacity: 0.9;
    transform: translateX(-50%) translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) translateY(3px);
  }
}
@keyframes mbf-tower-compass {
  0%, 100% {
    filter: drop-shadow(0 0 3px rgba(40, 196, 255, 0.35));
    transform: rotate(45deg) scale(1);
  }
  50% {
    filter: drop-shadow(0 0 9px rgba(40, 196, 255, 0.8));
    transform: rotate(45deg) scale(1.08);
  }
}
@keyframes mbf-tower-ornament {
  0%, 100% {
    opacity: 0.72;
    box-shadow: 0 0 6px currentColor;
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 14px currentColor;
  }
}
@keyframes mbf-tower-route-active {
  0%, 100% {
    box-shadow: 0 0 0 4px rgba(17, 167, 255, 0.32), 0 0 10px 4px rgba(17, 167, 255, 0.58);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(17, 167, 255, 0.17), 0 0 18px 7px rgba(17, 167, 255, 0.76);
  }
}
@keyframes mbf-tower-route-target {
  0%, 100% {
    filter: brightness(0.94);
    transform: scale(0.97);
  }
  50% {
    filter: brightness(1.2);
    transform: scale(1.045);
  }
}
@keyframes mbf-tower-event-glow {
  from {
    border-color: rgba(54, 81, 105, 0.2);
    background: rgba(0, 5, 10, 0.58);
  }
  to {
    border-color: rgba(57, 135, 184, 0.36);
    background: rgba(3, 14, 23, 0.7);
  }
}
@keyframes mbf-tower-reward-float {
  0%, 100% {
    filter: brightness(0.96);
    transform: translateY(0);
  }
  50% {
    filter: brightness(1.1);
    transform: translateY(-3%);
  }
}
@keyframes mbf-tower-button-energy {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 190px 0, -240px 0;
  }
}
@keyframes mbf-tower-timer-tick {
  0% {
    filter: brightness(1);
    transform: scale(1);
  }
  45% {
    filter: brightness(1.38);
    transform: scale(1.035);
  }
  100% {
    filter: brightness(1);
    transform: scale(1);
  }
}
/*
 * Защита от случайного показа desktop-композиции на узком экране,
 * если MobileDetect не распознал нестандартный User-Agent.
 */
@media (max-width: 767px) {
  .mbf-abyss-tower--desktop {
    min-width: 760px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mbf-abyss-tower *,
  .mbf-abyss-tower *::before,
  .mbf-abyss-tower *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .mbf-abyss-tower__panel-link, .mbf-abyss-tower__accelerate, .mbf-abyss-tower__report, .mbf-abyss-tower__card {
    transition: none !important;
  }
}
/*
 * Интеграция с существующими header/footer MangaBuff.
 * HTML этих блоков менять не требуется.
 */
body.b-tower {
  background: #020810;
  overflow-x: hidden;
}
body.b-tower .footer,
body.b-tower #back-to-top {
  display: none !important;
}
body.b-tower .header {
  position: relative;
  z-index: 51;
  border-bottom: 1px solid rgba(114, 142, 170, 0.16);
  background: rgba(3, 8, 14, 0.62) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.b-tower .header .container {
  position: relative;
  z-index: 2;
  background: transparent !important;
}
body.b-tower .header .logo {
  color: #f1f1f3 !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}
body.b-tower .header .logo span {
  color: #9c29ff !important;
}
body.b-tower .header__link, body.b-tower .header__item, body.b-tower .header__burger {
  color: rgba(230, 233, 238, 0.88) !important;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.75);
}
body.b-tower .header__link--active {
  color: #fff !important;
  border-bottom-color: #a84cff !important;
}
body.b-tower .header__link-sub {
  border: 1px solid rgba(115, 142, 170, 0.24);
  color: #dfe5eb;
  background: rgba(4, 11, 18, 0.96) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}
body.b-tower .header__link-sub a {
  color: #dfe5eb !important;
}
body.b-tower .header__link-sub a:hover {
  color: #fff !important;
  background: rgba(129, 63, 210, 0.15);
}
body.b-tower .header__item:hover {
  color: #fff !important;
  background: rgba(112, 68, 165, 0.22) !important;
}
body.b-tower .header-profile img {
  border: 1px solid rgba(185, 119, 255, 0.6);
  box-shadow: 0 0 12px rgba(132, 52, 221, 0.28);
}
body.b-tower .header__mobile-menu {
  border-top-color: rgba(111, 139, 167, 0.24);
  background: rgba(3, 9, 16, 0.98) !important;
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
}
body.b-tower .header__mobile-menu a,
body.b-tower .header__mobile-menu span {
  color: #dfe5eb !important;
}

/* Дополнительная страховка, если шаблон футера выведен сразу после страницы. */
.mbf-abyss-tower ~ .footer {
  display: none !important;
}

@media (min-width: 768px) {
  body.b-tower {
    height: 100svh;
    overflow: hidden;
  }
}
/* =========================================================
   Башня Разлома: интерактивные награды и модальные интерфейсы
   ========================================================= */
.mbf-abyss-tower__leaders {
  position: relative;
  z-index: 12;
  pointer-events: auto;
}
.mbf-abyss-tower__small-reward, .mbf-abyss-tower__reward-item, .mbf-abyss-tower__prep-reward {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease, filter 0.22s ease;
}
.mbf-abyss-tower__small-reward:hover, .mbf-abyss-tower__small-reward:focus-visible, .mbf-abyss-tower__reward-item:hover, .mbf-abyss-tower__reward-item:focus-visible, .mbf-abyss-tower__prep-reward:hover, .mbf-abyss-tower__prep-reward:focus-visible {
  z-index: 2;
  border-color: rgba(179, 102, 255, 0.82);
  outline: 0;
  box-shadow: 0 0 18px rgba(138, 52, 231, 0.25);
  filter: brightness(1.08);
  transform: translateY(-2px);
}
.mbf-abyss-tower__small-reward {
  padding: 0;
}
.mbf-abyss-tower__reward-item, .mbf-abyss-tower__prep-reward {
  width: 100%;
}

.mbf-tower-result--v2 {
  z-index: 1100;
  padding: 2.2vh 2vw;
  pointer-events: none;
}
.mbf-tower-result--v2.is-open {
  pointer-events: auto;
}
.mbf-tower-result--v2 .mbf-tower-result__dialog {
  display: flex;
  width: min(1480px, 96vw);
  height: min(850px, 95vh);
  max-height: 95vh;
  padding: 20px 24px 22px;
  overflow: hidden;
  border-color: rgba(137, 79, 214, 0.88);
  background: radial-gradient(ellipse at 50% 0, rgba(102, 28, 174, 0.2), transparent 42%), linear-gradient(135deg, rgba(8, 17, 27, 0.99), rgba(1, 7, 13, 0.995) 48%, rgba(6, 13, 22, 0.995));
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.72), inset 0 0 0 8px rgba(8, 18, 29, 0.68), 0 0 8px rgba(179, 91, 255, 0.72), 0 0 48px rgba(71, 26, 125, 0.42);
  flex-direction: column;
}
.mbf-tower-result--v2 .mbf-tower-result__dialog::before {
  inset: 9px;
  border-color: rgba(119, 85, 165, 0.4);
  box-shadow: inset 0 0 25px rgba(40, 102, 136, 0.08);
}
.mbf-tower-result--v2 .mbf-tower-result__dialog::after {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  width: 620px;
  height: 120px;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(151, 77, 232, 0.75), transparent) 50% 75%/100% 1px no-repeat, radial-gradient(ellipse, rgba(96, 27, 163, 0.25), transparent 68%);
  transform: translateX(-50%);
}
.mbf-tower-result--v2 .mbf-tower-result__crown {
  position: absolute;
  z-index: 4;
  top: -15px;
  left: 50%;
  display: grid;
  width: 58px;
  height: 58px;
  color: #d4a8ff;
  border: 1px solid rgba(167, 87, 245, 0.8);
  background: #09101a;
  font-size: 25px;
  place-items: center;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 0 0 20px rgba(143, 52, 238, 0.6);
  -webkit-clip-path: polygon(50% 0, 72% 27%, 100% 50%, 72% 73%, 50% 100%, 28% 73%, 0 50%, 28% 27%);
          clip-path: polygon(50% 0, 72% 27%, 100% 50%, 72% 73%, 50% 100%, 28% 73%, 0 50%, 28% 27%);
}
.mbf-tower-result--v2 .mbf-tower-result__close {
  top: 24px;
  right: 27px;
}
.mbf-tower-result--v2 .mbf-tower-result__header {
  z-index: 2;
  flex: 0 0 auto;
  width: 70%;
  margin: 0 auto 10px;
  padding: 4px 0 6px;
}
.mbf-tower-result--v2 .mbf-tower-result__header h2 {
  font-size: clamp(31px, 2.35vw, 44px);
  line-height: 1;
}
.mbf-tower-result--v2 .mbf-tower-result__header p {
  margin: 7px 0 0;
  color: #b8b5bb;
  font-size: 16px;
  letter-spacing: 0.03em;
}
.mbf-tower-result--v2 .mbf-tower-result__layout {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 0;
  flex: 1;
  grid-template-columns: minmax(285px, 0.88fr) minmax(440px, 1.38fr) minmax(360px, 1.15fr);
  gap: 10px;
}
.mbf-tower-result--v2 .mbf-tower-result__column {
  display: grid;
  min-width: 0;
  min-height: 0;
  gap: 8px;
}
.mbf-tower-result--v2 .mbf-tower-result__column--summary {
  grid-template-rows: 1.25fr 0.75fr;
}
.mbf-tower-result--v2 .mbf-tower-result__column--center {
  grid-template-rows: auto auto minmax(180px, 1fr);
}
.mbf-tower-result--v2 .mbf-tower-result__panel {
  min-height: 0;
  padding: 14px 15px;
  border-color: rgba(75, 94, 113, 0.47);
  background: linear-gradient(135deg, rgba(9, 19, 29, 0.78), rgba(1, 7, 12, 0.82)), radial-gradient(circle at 50% 0, rgba(66, 118, 151, 0.08), transparent 55%);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.35);
}
.mbf-tower-result--v2 .mbf-tower-result__panel > h3,
.mbf-tower-result--v2 .mbf-tower-result__panel .mbf-tower-result__progress > h3 {
  margin: 0 0 11px;
  color: #c5c4c8;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.08em;
}
.mbf-tower-result--v2 .mbf-tower-result__information dl > div {
  min-height: 34px;
  padding: 0 4px;
  border-bottom: 1px solid rgba(75, 93, 110, 0.13);
}
.mbf-tower-result--v2 .mbf-tower-result__information dt {
  display: flex;
  align-items: center;
  color: #a9aaad;
  font-size: 14px;
}
.mbf-tower-result--v2 .mbf-tower-result__information dt i {
  width: 25px;
  color: #c4c7ca;
  font-style: normal;
  text-align: center;
}
.mbf-tower-result--v2 .mbf-tower-result__information dd {
  color: #c45dff;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.03em;
}
.mbf-tower-result--v2 .mbf-tower-result__power-row dd {
  color: #b65aff;
  font-size: 21px;
}
.mbf-tower-result--v2 .mbf-tower-result__effects .mbf-tower-result__effect-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.mbf-tower-result--v2 .mbf-tower-result__effect {
  display: flex;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  flex-direction: column;
  align-items: center;
}
.mbf-tower-result--v2 .mbf-tower-result__effect .mbf-tower-result__effect-icon {
  display: grid;
  width: 45px;
  height: 45px;
  border: 1px solid rgba(143, 68, 211, 0.65);
  background: radial-gradient(circle, rgba(108, 35, 164, 0.32), rgba(3, 9, 15, 0.8));
  place-items: center;
}
.mbf-tower-result--v2 .mbf-tower-result__effect .mbf-tower-result__effect-icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.mbf-tower-result--v2 .mbf-tower-result__effect > strong {
  margin-top: 5px;
  color: #c55fff;
  font-size: 18px;
  line-height: 1;
}
.mbf-tower-result--v2 .mbf-tower-result__effect > small {
  overflow: hidden;
  width: 100%;
  margin-top: 4px;
  color: #8d9094;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mbf-tower-result--v2 .mbf-tower-result__achievement-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}
.mbf-tower-result--v2 .mbf-tower-result__achievement {
  display: grid;
  min-height: 64px;
  padding: 8px 10px;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  gap: 0 8px;
}
.mbf-tower-result--v2 .mbf-tower-result__achievement b {
  grid-row: 1/3;
}
.mbf-tower-result--v2 .mbf-tower-result__achievement span {
  align-self: center;
}
.mbf-tower-result--v2 .mbf-tower-result__achievement em {
  align-self: end;
  color: #75dc59;
  font-size: 9px;
  font-style: normal;
  text-transform: uppercase;
  grid-column: 2;
}
.mbf-tower-result--v2 .mbf-tower-result__achievement > i {
  color: #79e264;
  grid-column: 3;
  grid-row: 1/3;
}
.mbf-tower-result--v2 .mbf-tower-result__rewards {
  display: flex;
  padding-bottom: 12px;
  text-align: center;
  flex-direction: column;
}
.mbf-tower-result--v2 .mbf-tower-result__rewards > small {
  margin-top: 5px;
  font-size: 11px;
}
.mbf-tower-result--v2 .mbf-tower-result__reward-grid {
  display: grid;
  width: min(100%, 500px);
  margin: 0 auto;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.mbf-tower-result--v2 .mbf-tower-result__reward {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  min-width: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
}
.mbf-tower-result--v2 .mbf-tower-result__reward:hover, .mbf-tower-result--v2 .mbf-tower-result__reward:focus-visible {
  z-index: 3;
  outline: 0;
  filter: brightness(1.15);
  transform: translateY(-2px);
  box-shadow: 0 0 15px rgba(151, 63, 236, 0.34);
}
.mbf-tower-result--v2 .mbf-tower-result__claim {
  width: min(390px, 88%);
  height: 57px;
  margin: 14px auto 0;
}
.mbf-tower-result--v2 .mbf-tower-result__claim strong {
  font-size: 23px;
  letter-spacing: 0.05em;
}
.mbf-tower-result--v2 .mbf-tower-result__squad-panel {
  display: flex;
  flex-direction: column;
}
.mbf-tower-result--v2 .mbf-tower-result__squad {
  display: grid;
  width: 100%;
  min-height: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}
.mbf-tower-result--v2 .mbf-tower-result__squad div {
  position: relative;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  aspect-ratio: 2/3;
  overflow: hidden;
  border: 1px solid rgba(75, 137, 172, 0.62);
  border-radius: 4px;
  background: #030a10;
}
.mbf-tower-result--v2 .mbf-tower-result__squad img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}
.mbf-tower-result--v2 .mbf-tower-result__squad strong {
  position: absolute;
  z-index: 2;
  right: 6px;
  bottom: 4px;
  color: #c65cff;
  font-size: 20px;
  line-height: 1;
  text-shadow: 0 2px 3px #000, 0 0 5px #000;
}
.mbf-tower-result--v2 .mbf-tower-result__progress {
  display: flex;
  padding-bottom: 11px;
  flex-direction: column;
}
.mbf-tower-result--v2 .mbf-tower-result__progress-line {
  display: grid;
  align-items: center;
  width: 100%;
  min-height: 76px;
  margin: 0;
  grid-template-columns: 66px minmax(0, 1fr) 66px;
  gap: 0;
}
.mbf-tower-result--v2 .mbf-tower-result__progress-line::before {
  right: 44px;
  left: 44px;
}
.mbf-tower-result--v2 .mbf-tower-result__progress-line strong {
  width: 65px;
  height: 65px;
  font-size: 24px;
}
.mbf-tower-result--v2 .mbf-tower-result__progress-line i::after {
  width: 10px;
  height: 10px;
}
.mbf-tower-result--v2 .mbf-tower-result__progress-floor {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  font-size: 25px;
  font-weight: 700;
}
.mbf-tower-result--v2 .mbf-tower-result__progress-floor--start {
  color: #b9eeff;
  border: 1px solid #31b9ed;
  background: rgba(4, 35, 54, 0.94);
  box-shadow: inset 0 0 18px rgba(40, 196, 255, 0.1), 0 0 14px rgba(38, 190, 244, 0.3);
}
.mbf-tower-result--v2 .mbf-tower-result__progress-floor--finish {
  color: #dab4ff;
  border: 1px solid #a64cf1;
  background: rgba(48, 11, 77, 0.94);
  box-shadow: inset 0 0 18px rgba(174, 75, 255, 0.13), 0 0 15px rgba(170, 70, 244, 0.42);
}
.mbf-tower-result--v2 .mbf-tower-result__progress-track {
  position: relative;
  height: 4px;
  overflow: visible;
  background: rgba(72, 101, 121, 0.35);
}
.mbf-tower-result--v2 .mbf-tower-result__progress-completed {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #35c9ff, #39caff 55%, #8b4cd7);
}
.mbf-tower-result--v2 .mbf-tower-result__progress-current {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #b454f4;
  box-shadow: 0 0 10px rgba(180, 84, 244, 0.7);
}
.mbf-tower-result--v2 .mbf-tower-result__progress-marker {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: block;
  width: 12px;
  height: 12px;
  border: 2px solid #d399ff;
  border-radius: 50%;
  background: #08121a;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px rgba(184, 89, 255, 0.75);
}
.mbf-tower-result--v2 .mbf-tower-result__progress-caption {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  gap: 15px;
  color: #858b92;
  font-size: 11px;
}
.mbf-tower-result--v2 .mbf-tower-result__progress-caption strong {
  color: #c25cff;
  font-weight: 700;
}
.mbf-tower-result--v2 .mbf-tower-result__battle-stats {
  display: grid;
  margin-top: auto;
  padding-top: 10px;
  grid-template-columns: repeat(5, 1fr);
}
.mbf-tower-result--v2 .mbf-tower-result__battle-stats div {
  padding: 0 5px;
  border-right: 1px solid rgba(76, 96, 114, 0.25);
}
.mbf-tower-result--v2 .mbf-tower-result__battle-stats div:last-child {
  border-right: 0;
}
.mbf-tower-result--v2 .mbf-tower-result__battle-stats span {
  font-size: 10px;
}
.mbf-tower-result--v2 .mbf-tower-result__battle-stats strong {
  margin-top: 4px;
  font-size: 19px;
}
.mbf-tower-result--v2 .mbf-tower-result__timeline {
  display: flex;
  min-height: 0;
  padding: 14px 13px 12px;
  flex-direction: column;
}
.mbf-tower-result--v2 .mbf-tower-result__timeline-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.mbf-tower-result--v2 .mbf-tower-result__timeline-heading h3 {
  margin: 0;
  color: #c5c4c8;
  font-size: 15px;
  font-weight: 550;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.mbf-tower-result--v2 .mbf-tower-result__timeline-heading span {
  color: #bd69fa;
  font-size: 11px;
  text-transform: uppercase;
}
.mbf-tower-result--v2 .mbf-tower-result__event-filters {
  display: grid;
  margin: 13px 0 10px;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}
.mbf-tower-result--v2 .mbf-tower-result__event-filters button {
  height: 35px;
  color: #8d949c;
  border: 1px solid rgba(84, 101, 119, 0.42);
  background: rgba(5, 11, 18, 0.72);
  font: 550 11px/1 "MBFTowerCondensed", "Arial Narrow", Arial, sans-serif;
  cursor: pointer;
  text-transform: uppercase;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  /* Hover больше не выглядит как выбранная вкладка. */
  /* Фиолетовая заливка только у реально активной вкладки. */
}
.mbf-tower-result--v2 .mbf-tower-result__event-filters button:hover:not(.is-active) {
  color: #c3c7cc;
  border-color: rgba(126, 102, 148, 0.65);
  background: rgba(15, 14, 27, 0.82);
}
.mbf-tower-result--v2 .mbf-tower-result__event-filters button.is-active {
  color: #f0dfff;
  border-color: rgba(181, 80, 244, 0.92);
  background: linear-gradient(135deg, rgba(112, 34, 164, 0.64), rgba(39, 12, 59, 0.88));
  box-shadow: inset 0 0 18px rgba(154, 53, 224, 0.28), 0 0 8px rgba(143, 49, 214, 0.18);
}
.mbf-tower-result--v2 .mbf-tower-result__event-filters button:focus {
  outline: none;
}
.mbf-tower-result--v2 .mbf-tower-result__event-filters button:focus-visible {
  border-color: rgba(182, 130, 221, 0.85);
  box-shadow: 0 0 0 1px rgba(182, 130, 221, 0.25);
}
.mbf-tower-result--v2 .mbf-tower-result__event-list {
  min-height: 0;
  max-height: none;
  padding-right: 6px;
  overflow-y: auto;
  scrollbar-color: #8547bf #09111a;
  scrollbar-width: thin;
  flex: 1;
}
.mbf-tower-result--v2 .mbf-tower-result__event {
  display: grid;
  min-height: 61px;
  padding: 5px 3px;
  border-bottom: 1px solid rgba(70, 89, 106, 0.24);
  grid-template-columns: 42px 63px minmax(0, 1fr);
  align-items: center;
}
.mbf-tower-result--v2 .mbf-tower-result__event[hidden] {
  display: none !important;
}
.mbf-tower-result--v2 .mbf-tower-result__event-icon {
  width: 38px;
  height: 38px;
}
.mbf-tower-result--v2 .mbf-tower-result__event time {
  color: #8f9296;
  font-size: 12px;
}
.mbf-tower-result--v2 .mbf-tower-result__event p {
  margin: 0;
  color: #b8babd;
  font-size: 12px;
  line-height: 1.35;
}
.mbf-tower-result--v2 .mbf-tower-result__event--green p {
  color: #67c974;
}
.mbf-tower-result--v2 .mbf-tower-result__event--orange p {
  color: #e49b3d;
}
.mbf-tower-result--v2 .mbf-tower-result__event--red p {
  color: #ef5b58;
}
.mbf-tower-result--v2 .mbf-tower-result__event-icon--green {
  border-color: #3daa72;
  box-shadow: inset 0 0 9px rgba(43, 168, 100, 0.24);
}
.mbf-tower-result--v2 .mbf-tower-result__event-icon--orange, .mbf-tower-result--v2 .mbf-tower-result__event-icon--gold {
  border-color: #c77a23;
  box-shadow: inset 0 0 9px rgba(207, 121, 27, 0.25);
}
.mbf-tower-result--v2 .mbf-tower-result__event-icon--red {
  border-color: #d43b40;
  box-shadow: inset 0 0 9px rgba(211, 50, 58, 0.25);
}

.mbf-tower-leaders,
.mbf-tower-reward-modal {
  position: fixed;
  z-index: 1120;
  inset: 0;
  display: flex;
  padding: 3vh 3vw;
  visibility: hidden;
  opacity: 0;
  color: #d5d8dc;
  font-family: "MBFTowerCondensed", "Arial Narrow", Arial, sans-serif;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: visibility 0.26s linear, opacity 0.26s ease;
}
.mbf-tower-leaders *,
.mbf-tower-leaders *::before,
.mbf-tower-leaders *::after,
.mbf-tower-reward-modal *,
.mbf-tower-reward-modal *::before,
.mbf-tower-reward-modal *::after {
  box-sizing: border-box;
}
.mbf-tower-leaders.is-open,
.mbf-tower-reward-modal.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.mbf-tower-leaders__backdrop,
.mbf-tower-reward-modal__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 3, 8, 0.9);
  cursor: default;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.mbf-tower-leaders__dialog,
.mbf-tower-reward-modal__dialog {
  position: relative;
  border: 1px solid rgba(139, 78, 215, 0.92);
  background: radial-gradient(ellipse at 50% 0, rgba(94, 28, 153, 0.25), transparent 42%), linear-gradient(135deg, rgba(8, 17, 27, 0.995), rgba(1, 7, 13, 0.995));
  box-shadow: inset 0 0 0 8px rgba(7, 15, 25, 0.65), inset 0 0 70px rgba(0, 0, 0, 0.65), 0 0 9px rgba(164, 82, 247, 0.75), 0 0 45px rgba(83, 31, 138, 0.42);
  -webkit-clip-path: polygon(18px 0, calc(50% - 12px) 0, 50% 12px, calc(50% + 12px) 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
          clip-path: polygon(18px 0, calc(50% - 12px) 0, 50% 12px, calc(50% + 12px) 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
  transform: translateY(20px) scale(0.98);
  transition: transform 0.3s cubic-bezier(0.2, 0.78, 0.25, 1);
}
.mbf-tower-leaders__dialog::before,
.mbf-tower-reward-modal__dialog::before {
  position: absolute;
  z-index: 0;
  content: "";
  inset: 9px;
  border: 1px solid rgba(111, 82, 151, 0.35);
  pointer-events: none;
  -webkit-clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px);
          clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px);
}
.mbf-tower-leaders.is-open .mbf-tower-leaders__dialog,
.mbf-tower-leaders.is-open .mbf-tower-reward-modal__dialog,
.mbf-tower-reward-modal.is-open .mbf-tower-leaders__dialog,
.mbf-tower-reward-modal.is-open .mbf-tower-reward-modal__dialog {
  transform: translateY(0) scale(1);
}
.mbf-tower-leaders__crown,
.mbf-tower-reward-modal__crown {
  position: absolute;
  z-index: 5;
  top: -17px;
  left: 50%;
  display: grid;
  width: 58px;
  height: 58px;
  color: #d4a8ff;
  border: 1px solid rgba(167, 87, 245, 0.8);
  background: #09101a;
  font-size: 24px;
  place-items: center;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 0 0 20px rgba(143, 52, 238, 0.6);
  -webkit-clip-path: polygon(50% 0, 72% 27%, 100% 50%, 72% 73%, 50% 100%, 28% 73%, 0 50%, 28% 27%);
          clip-path: polygon(50% 0, 72% 27%, 100% 50%, 72% 73%, 50% 100%, 28% 73%, 0 50%, 28% 27%);
}
.mbf-tower-leaders__close,
.mbf-tower-reward-modal__close {
  position: absolute;
  z-index: 8;
  top: 24px;
  right: 27px;
  width: 37px;
  height: 37px;
  padding: 0;
  border: 0;
  background: rgba(63, 27, 92, 0.22);
  cursor: pointer;
}
.mbf-tower-leaders__close span,
.mbf-tower-reward-modal__close span {
  position: absolute;
  top: 17px;
  left: 3px;
  width: 31px;
  height: 3px;
  border-radius: 2px;
  background: #d4b4ff;
  box-shadow: 0 0 7px rgba(171, 83, 255, 0.7);
}
.mbf-tower-leaders__close span:first-child,
.mbf-tower-reward-modal__close span:first-child {
  transform: rotate(45deg);
}
.mbf-tower-leaders__close span:last-child,
.mbf-tower-reward-modal__close span:last-child {
  transform: rotate(-45deg);
}

.mbf-tower-leaders__dialog {
  display: flex;
  width: min(1480px, 96vw);
  height: min(850px, 94vh);
  max-height: 94vh;
  padding: 22px 27px 18px;
  flex-direction: column;
}
.mbf-tower-leaders__filters {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
}
.mbf-tower-leaders__scope-tabs {
  display: grid;
  width: 300px;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}
.mbf-tower-leaders__scope-tabs button {
  height: 27px;
  padding: 0 12px;
  color: #81868d;
  border: 1px solid rgba(84, 101, 119, 0.34);
  background: rgba(4, 10, 17, 0.62);
  font: 600 11px/1 "MBFTowerCondensed", "Arial Narrow", Arial, sans-serif;
  cursor: pointer;
  text-transform: uppercase;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.mbf-tower-leaders__scope-tabs button:hover {
  color: #ddd;
  border-color: rgba(154, 81, 214, 0.55);
}
.mbf-tower-leaders__scope-tabs button.is-active {
  color: #e7d8f4;
  border-color: #9150d2;
  background: linear-gradient(135deg, rgba(106, 34, 155, 0.38), rgba(28, 11, 42, 0.65));
  box-shadow: inset 0 0 12px rgba(135, 46, 200, 0.17);
}
.mbf-tower-leaders__header {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: 70%;
  margin: 0 auto 10px;
  text-align: center;
}
.mbf-tower-leaders__header h2 {
  margin: 0;
  color: #e5e3e8;
  font-size: clamp(32px, 2.4vw, 44px);
  font-weight: 680;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 5px #000;
}
.mbf-tower-leaders__header p {
  margin: 7px 0 0;
  color: #b9b7bc;
  font-size: 16px;
}
.mbf-tower-leaders__body {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 0;
  flex: 1;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 14px;
}
.mbf-tower-leaders__summary {
  display: flex;
  min-height: 0;
  padding: 15px;
  border: 1px solid rgba(86, 102, 121, 0.48);
  background: rgba(3, 9, 16, 0.77);
  -webkit-clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px);
          clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px);
  flex-direction: column;
}
.mbf-tower-leaders__summary h3,
.mbf-tower-leaders__summary h4 {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #d1d0d3;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mbf-tower-leaders__summary h4 {
  margin: 12px 0 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(76, 98, 119, 0.32);
  font-size: 14px;
}
.mbf-tower-leaders__summary > small {
  margin-top: 6px;
  color: #83878b;
  font-size: 12px;
}
.mbf-tower-leaders__summary > a {
  display: flex;
  height: 42px;
  margin-top: auto;
  color: #b9bbc0;
  border: 1px solid rgba(92, 110, 129, 0.54);
  background: rgba(9, 17, 26, 0.72);
  font-size: 13px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.mbf-tower-leaders__summary > a i {
  margin-left: auto;
  padding-right: 13px;
  font-style: normal;
}
.mbf-tower-leaders__tower-art {
  position: relative;
  min-height: 190px;
  margin: 10px 0 0;
  background: linear-gradient(180deg, transparent 58%, rgba(3, 9, 16, 0.9)), url("/assets/tower-raid/tower-background.webp") center 28%/cover no-repeat;
  filter: saturate(0.86) contrast(1.08);
}
.mbf-tower-leaders__tower-art::before, .mbf-tower-leaders__tower-art::after {
  position: absolute;
  right: 0;
  left: 0;
  content: "";
  height: 1px;
  background: linear-gradient(90deg, transparent, #9953e1, #5ecfff, #9953e1, transparent);
  box-shadow: 0 0 8px rgba(138, 63, 224, 0.7);
}
.mbf-tower-leaders__tower-art::before {
  top: 0;
}
.mbf-tower-leaders__tower-art::after {
  bottom: 0;
}
.mbf-tower-leaders__own-floor {
  display: flex;
  margin: 0 8px;
  padding: 4px 0 10px;
  border-bottom: 1px solid rgba(76, 98, 119, 0.28);
  align-items: center;
  justify-content: space-between;
}
.mbf-tower-leaders__own-floor > strong {
  color: #bd5aff;
  font-size: 43px;
  line-height: 1;
}
.mbf-tower-leaders__own-floor span {
  color: #8f9296;
  font-size: 12px;
  text-align: right;
}
.mbf-tower-leaders__own-floor b {
  color: #bd5aff;
  font-size: 17px;
}
.mbf-tower-leaders__summary dl {
  margin: 5px 8px;
}
.mbf-tower-leaders__summary dl div {
  display: flex;
  min-height: 27px;
  color: #96999d;
  font-size: 12px;
  align-items: center;
  justify-content: space-between;
}
.mbf-tower-leaders__summary dl dd {
  margin: 0;
  color: #c7c7ca;
}
.mbf-tower-leaders__own-rewards {
  display: flex;
  min-height: 104px;
  margin: 7px 0 10px;
  align-items: flex-start;
  gap: 7px;
}
.mbf-tower-leaders__season-reward {
  display: flex;
  width: 92px;
  min-width: 92px;
  flex-direction: column;
  align-items: center;
}
.mbf-tower-leaders__season-reward-image {
  position: relative;
  display: block;
  width: 88px;
  height: 88px;
  overflow: hidden;
  border: 1px solid rgba(95, 120, 143, 0.55);
  border-radius: 3px;
  background: radial-gradient(circle at 50% 48%, rgba(148, 60, 255, 0.16), transparent 70%), rgba(2, 8, 14, 0.75);
}
.mbf-tower-leaders__season-reward img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.mbf-tower-leaders__season-reward strong {
  position: absolute;
  z-index: 2;
  right: 4px;
  bottom: 3px;
  padding: 1px 3px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 2px #000, 0 0 5px #000;
}
.mbf-tower-leaders__season-reward > small {
  display: block;
  width: 100%;
  margin-top: 5px;
  overflow: hidden;
  color: #8d9197;
  font-size: 9px;
  line-height: 1.15;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mbf-tower-leaders__no-reward {
  display: flex;
  min-height: 88px;
  color: #777c82;
  font-size: 18px;
  align-items: center;
}
.mbf-tower-leaders__board {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
}
.mbf-tower-leaders__toolbar {
  display: flex;
  flex: 0 0 auto;
  min-height: 60px;
  padding: 8px 12px;
  border: 1px solid rgba(76, 95, 114, 0.35);
  background: rgba(3, 9, 15, 0.65);
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.mbf-tower-leaders__toolbar > span {
  color: #92959a;
  font-size: 13px;
}
.mbf-tower-leaders__toolbar > span strong {
  margin-left: 9px;
  color: #c15eff;
  font-size: 16px;
}
.mbf-tower-leaders__tabs {
  display: grid;
  width: 450px;
  max-width: 100%;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.mbf-tower-leaders__tabs button {
  height: 42px;
  color: #a3a4a8;
  border: 1px solid rgba(84, 101, 119, 0.45);
  background: rgba(5, 12, 19, 0.75);
  font: 600 13px/1 "MBFTowerCondensed", "Arial Narrow", Arial, sans-serif;
  cursor: pointer;
  text-transform: uppercase;
}
.mbf-tower-leaders__tabs button.is-active, .mbf-tower-leaders__tabs button:hover {
  color: #e8dcf3;
  border-color: #9150d2;
  background: linear-gradient(135deg, rgba(106, 34, 155, 0.5), rgba(28, 11, 42, 0.76));
  box-shadow: inset 0 0 17px rgba(135, 46, 200, 0.25), 0 0 8px rgba(126, 44, 192, 0.25);
}
.mbf-tower-leaders__table-wrap {
  min-height: 0;
  padding-top: 8px;
  overflow: auto;
  flex: 1;
  scrollbar-color: #7140a7 #071019;
}
.mbf-tower-leaders__table {
  min-width: 850px;
}
.mbf-tower-leaders__table-head, .mbf-tower-leaders__row {
  display: grid;
  grid-template-columns: 105px minmax(230px, 1.55fr) 130px minmax(160px, 0.85fr) 245px;
  align-items: center;
}
.mbf-tower-leaders__table-head {
  height: 35px;
  padding: 0 12px;
  color: #919499;
  border: 1px solid rgba(67, 84, 101, 0.22);
  font-size: 12px;
  text-transform: uppercase;
}
.mbf-tower-leaders__table-head span:nth-child(n+3) {
  text-align: center;
}
.mbf-tower-leaders__rows {
  display: grid;
}
.mbf-tower-leaders__row {
  min-height: 77px;
  padding: 5px 12px;
  border-right: 1px solid rgba(65, 82, 99, 0.32);
  border-bottom: 1px solid rgba(65, 82, 99, 0.32);
  border-left: 1px solid rgba(65, 82, 99, 0.32);
  background: rgba(2, 8, 14, 0.5);
}
.mbf-tower-leaders__row[hidden] {
  display: none;
}
.mbf-tower-leaders__row--rank-1 {
  border-color: rgba(186, 132, 39, 0.56);
  background: linear-gradient(90deg, rgba(87, 55, 12, 0.15), rgba(3, 9, 15, 0.55));
}
.mbf-tower-leaders__row--own {
  min-width: 850px;
  margin-top: 10px;
  color: #c96fff;
  border: 1px solid rgba(154, 76, 223, 0.72);
  background: linear-gradient(90deg, rgba(80, 27, 116, 0.3), rgba(25, 12, 41, 0.58), rgba(80, 27, 116, 0.18));
  box-shadow: inset 0 0 25px rgba(101, 30, 151, 0.14);
}
.mbf-tower-leaders__rank {
  display: grid;
  width: 58px;
  height: 58px;
  color: #c1c3c6;
  font-size: 29px;
  place-items: center;
}
.mbf-tower-leaders__row--rank-1 .mbf-tower-leaders__rank, .mbf-tower-leaders__row--rank-2 .mbf-tower-leaders__rank, .mbf-tower-leaders__row--rank-3 .mbf-tower-leaders__rank {
  background: radial-gradient(circle, rgba(137, 86, 24, 0.35), transparent 67%);
  -webkit-clip-path: polygon(50% 0, 82% 17%, 100% 50%, 82% 83%, 50% 100%, 18% 83%, 0 50%, 18% 17%);
          clip-path: polygon(50% 0, 82% 17%, 100% 50%, 82% 83%, 50% 100%, 18% 83%, 0 50%, 18% 17%);
}
.mbf-tower-leaders__row--rank-1 .mbf-tower-leaders__rank {
  color: #f3c55c;
  border: 1px solid #d79b27;
}
.mbf-tower-leaders__row--rank-2 .mbf-tower-leaders__rank {
  color: #d5d7db;
  border: 1px solid #8b929a;
}
.mbf-tower-leaders__row--rank-3 .mbf-tower-leaders__rank {
  color: #e0924e;
  border: 1px solid #a85e29;
}
.mbf-tower-leaders__user {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
}
.mbf-tower-leaders__user > img {
  width: 58px;
  height: 58px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center 18%;
     object-position: center 18%;
  border: 1px solid rgba(119, 83, 146, 0.62);
  border-radius: 4px;
}
.mbf-tower-leaders__user span,
.mbf-tower-leaders__user strong,
.mbf-tower-leaders__user small {
  display: block;
  min-width: 0;
}
.mbf-tower-leaders__user strong {
  overflow: hidden;
  color: #d0d0d3;
  font-size: 17px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mbf-tower-leaders__user small {
  margin-top: 5px;
  color: #898c91;
  font-size: 12px;
}
.mbf-tower-leaders__floor {
  color: #d3d3d6;
  font-size: 33px;
  font-weight: 620;
  text-align: center;
}
.mbf-tower-leaders__best {
  text-align: center;
}
.mbf-tower-leaders__best strong,
.mbf-tower-leaders__best small {
  display: block;
}
.mbf-tower-leaders__best strong {
  color: #bebfc2;
  font-size: 16px;
  font-weight: 520;
}
.mbf-tower-leaders__best small {
  margin-top: 5px;
  color: #7f8387;
  font-size: 14px;
}
.mbf-tower-leaders__row-rewards {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.mbf-tower-leaders__row-reward {
  position: relative;
  display: block;
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  overflow: hidden;
  border: 1px solid rgba(83, 113, 138, 0.52);
  border-radius: 3px;
  background: radial-gradient(circle at 50% 48%, rgba(148, 60, 255, 0.13), transparent 70%), rgba(2, 8, 15, 0.74);
}
.mbf-tower-leaders__row-reward img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.mbf-tower-leaders__row-reward strong {
  position: absolute;
  z-index: 2;
  right: 3px;
  bottom: 2px;
  padding: 1px 2px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 2px #000, 0 0 4px #000;
}
.mbf-tower-leaders__footer {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 45px;
  margin-top: 10px;
  padding: 0 12px;
  color: #85898e;
  border: 1px solid rgba(70, 88, 105, 0.36);
  background: rgba(4, 10, 17, 0.62);
  font-size: 12px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.mbf-tower-leaders__footer b {
  margin-left: 12px;
  color: #bf5dff;
  font-size: 14px;
}

.mbf-tower-reward-modal {
  z-index: 1160;
}
.mbf-tower-reward-modal__dialog {
  display: grid;
  width: min(700px, 92vw);
  min-height: 510px;
  max-height: 92vh;
  padding: 50px 45px 28px;
  overflow: auto;
  grid-template-columns: 180px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: 26px 30px;
}
.mbf-tower-reward-modal__image {
  position: relative;
  align-self: start;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid #9b50dd;
  background: radial-gradient(circle, rgba(103, 31, 163, 0.38), rgba(4, 10, 17, 0.92));
  box-shadow: inset 0 0 20px rgba(77, 24, 123, 0.35), 0 0 10px rgba(122, 49, 187, 0.3);
}
.mbf-tower-reward-modal__image img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.mbf-tower-reward-modal__content {
  position: relative;
  z-index: 2;
}
.mbf-tower-reward-modal__content h2 {
  margin: 0;
  color: #e1e0e3;
  font-size: 30px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.mbf-tower-reward-modal__content > strong {
  display: block;
  margin-top: 15px;
  color: #c35dff;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mbf-tower-reward-modal__content > p {
  margin: 23px 0 28px;
  color: #b1b2b5;
  font-size: 17px;
  line-height: 1.55;
}
.mbf-tower-reward-modal__content h3 {
  margin: 0 0 13px;
  color: #c35dff;
  font-size: 17px;
  font-weight: 550;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mbf-tower-reward-modal__content ul {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 12px;
}
.mbf-tower-reward-modal__content li {
  display: flex;
  color: #aeb0b4;
  font-size: 15px;
  align-items: center;
  gap: 10px;
}
.mbf-tower-reward-modal__content li i {
  width: 23px;
  color: #a25ae3;
  font-size: 18px;
  font-style: normal;
  text-align: center;
}
.mbf-tower-reward-modal__footer {
  position: relative;
  z-index: 2;
  display: flex;
  padding-top: 18px;
  border-top: 1px solid rgba(88, 102, 116, 0.5);
  text-align: center;
  grid-column: 1/-1;
  flex-direction: column;
  align-items: center;
}
.mbf-tower-reward-modal__footer::before, .mbf-tower-reward-modal__footer::after {
  position: absolute;
  top: 17px;
  width: 7px;
  height: 7px;
  content: "";
  border: 1px solid rgba(133, 143, 151, 0.72);
  transform: rotate(45deg);
}
.mbf-tower-reward-modal__footer::before {
  left: 0;
}
.mbf-tower-reward-modal__footer::after {
  right: 0;
}
.mbf-tower-reward-modal__footer span {
  color: #999ca0;
  font-size: 14px;
  text-transform: uppercase;
}
.mbf-tower-reward-modal__footer strong {
  margin-top: 6px;
  color: #c35dff;
  font-size: 28px;
  letter-spacing: 0.08em;
}

@media (max-width: 1100px) {
  .mbf-tower-result--v2 {
    align-items: flex-start;
    padding: 12px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__dialog {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(100svh - 24px);
    padding: 18px 14px;
    overflow-y: auto;
  }
  .mbf-tower-result--v2 .mbf-tower-result__header {
    width: 75%;
  }
  .mbf-tower-result--v2 .mbf-tower-result__header p {
    font-size: 13px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__column {
    display: contents;
  }
  .mbf-tower-result--v2 .mbf-tower-result__information {
    order: 1;
  }
  .mbf-tower-result--v2 .mbf-tower-result__rewards {
    order: 2;
  }
  .mbf-tower-result--v2 .mbf-tower-result__squad-panel {
    order: 3;
  }
  .mbf-tower-result--v2 .mbf-tower-result__progress {
    order: 4;
  }
  .mbf-tower-result--v2 .mbf-tower-result__effects {
    order: 5;
  }
  .mbf-tower-result--v2 .mbf-tower-result__achievements {
    order: 6;
  }
  .mbf-tower-result--v2 .mbf-tower-result__timeline {
    min-height: 520px;
    order: 7;
  }
  .mbf-tower-result--v2 .mbf-tower-result__squad {
    min-height: 220px;
  }
  .mbf-tower-leaders {
    align-items: flex-start;
    padding: 12px;
  }
  .mbf-tower-leaders__dialog {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(100svh - 24px);
    padding: 18px 14px;
    overflow-y: auto;
  }
  .mbf-tower-leaders__body {
    grid-template-columns: 1fr;
  }
  .mbf-tower-leaders__summary {
    display: grid;
    grid-template-columns: minmax(180px, 0.7fr) minmax(230px, 1fr);
    grid-template-rows: auto 1fr;
    gap: 8px 18px;
  }
  .mbf-tower-leaders__summary h3 {
    grid-column: 1;
  }
  .mbf-tower-leaders__summary .mbf-tower-leaders__tower-art {
    min-height: 250px;
    grid-column: 1;
    grid-row: 2/8;
  }
  .mbf-tower-leaders__summary h4,
  .mbf-tower-leaders__summary .mbf-tower-leaders__own-floor,
  .mbf-tower-leaders__summary dl,
  .mbf-tower-leaders__summary > small,
  .mbf-tower-leaders__summary .mbf-tower-leaders__own-rewards,
  .mbf-tower-leaders__summary > a {
    grid-column: 2;
  }
  .mbf-tower-leaders__board {
    min-height: 570px;
    margin-top: 10px;
  }
  .mbf-tower-leaders__footer {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
  }
}
@media (max-width: 620px) {
  .mbf-tower-result--v2 .mbf-tower-result__header h2 {
    font-size: 22px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__header p {
    font-size: 12px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__panel {
    padding: 13px 10px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__information dl > div {
    gap: 7px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__information dt,
  .mbf-tower-result--v2 .mbf-tower-result__information dd {
    font-size: 12px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__reward-grid {
    gap: 4px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__reward strong {
    font-size: 12px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__claim {
    height: 50px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__claim strong {
    font-size: 18px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__squad {
    min-height: 175px;
    gap: 5px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__battle-stats {
    overflow-x: auto;
    grid-template-columns: repeat(5, minmax(72px, 1fr));
  }
  .mbf-tower-result--v2 .mbf-tower-result__event-filters {
    overflow-x: auto;
    grid-template-columns: repeat(5, minmax(78px, 1fr));
  }
  .mbf-tower-result--v2 .mbf-tower-result__event {
    grid-template-columns: 38px 54px minmax(0, 1fr);
  }
  .mbf-tower-result--v2 .mbf-tower-result__event p {
    font-size: 11px;
  }
  .mbf-tower-leaders__header {
    width: 76%;
  }
  .mbf-tower-leaders__header h2 {
    font-size: 23px;
  }
  .mbf-tower-leaders__header p {
    font-size: 12px;
  }
  .mbf-tower-leaders__summary {
    display: flex;
  }
  .mbf-tower-leaders__summary .mbf-tower-leaders__tower-art {
    min-height: 230px;
  }
  .mbf-tower-leaders__toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .mbf-tower-leaders__toolbar > span {
    text-align: right;
  }
  .mbf-tower-leaders__tabs {
    width: 100%;
  }
  .mbf-tower-leaders__board {
    min-height: 540px;
  }
  .mbf-tower-leaders__footer {
    font-size: 10px;
  }
  .mbf-tower-reward-modal {
    align-items: flex-start;
    padding: 12px;
  }
  .mbf-tower-reward-modal__dialog {
    width: 100%;
    min-height: 0;
    max-height: calc(100svh - 24px);
    padding: 50px 20px 22px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 20px;
  }
  .mbf-tower-reward-modal__image {
    width: min(180px, 58vw);
    margin: 0 auto;
  }
  .mbf-tower-reward-modal__content h2 {
    font-size: 25px;
    text-align: center;
  }
  .mbf-tower-reward-modal__content > strong {
    text-align: center;
  }
  .mbf-tower-reward-modal__content > p {
    margin: 18px 0 23px;
    font-size: 15px;
  }
  .mbf-tower-reward-modal__footer {
    grid-column: 1;
  }
}
/* =========================================================
   Финальная геометрия сводки и отряда
   ========================================================= */
.mbf-abyss-tower__summary-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 8px;
}
.mbf-abyss-tower__leaders, .mbf-abyss-tower__hq-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  margin: 0;
  padding: 0 10px;
  border: 1px solid rgba(111, 184, 236, 0.65);
  color: #dce7f2;
  background: linear-gradient(100deg, rgba(30, 47, 86, 0.6), rgba(5, 15, 27, 0.88)), #07111d;
  box-shadow: inset 0 0 14px rgba(76, 130, 222, 0.1);
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.mbf-abyss-tower__leaders svg, .mbf-abyss-tower__hq-button svg {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  margin-right: 8px;
  fill: #a966ff;
}
.mbf-abyss-tower__leaders span, .mbf-abyss-tower__hq-button span {
  overflow: hidden;
  font-weight: 750;
  letter-spacing: 0.07em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mbf-abyss-tower__leaders i, .mbf-abyss-tower__hq-button i {
  margin-left: auto;
  color: #75d4ff;
  font-family: Arial, sans-serif;
  font-size: 1.45em;
  font-style: normal;
  line-height: 1;
}
.mbf-abyss-tower__leaders:hover, .mbf-abyss-tower__leaders:focus-visible, .mbf-abyss-tower__hq-button:hover, .mbf-abyss-tower__hq-button:focus-visible {
  border-color: #9b6eff;
  color: #fff;
  box-shadow: inset 0 0 18px rgba(124, 72, 255, 0.25), 0 0 10px rgba(117, 65, 255, 0.22);
  outline: 0;
  transform: translateY(-1px);
}
.mbf-abyss-tower__hq-button {
  border-color: rgba(169, 87, 255, 0.68);
  background: linear-gradient(100deg, rgba(70, 23, 102, 0.55), rgba(8, 14, 27, 0.9)), #07111d;
}
.mbf-abyss-tower__hq-button svg {
  fill: #36c6ff;
}
.mbf-abyss-tower__command-title {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0;
  color: #b8bec7;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}
.mbf-abyss-tower__command-title::before, .mbf-abyss-tower__command-title::after {
  flex: 1 1 auto;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(87, 120, 147, 0.54));
}
.mbf-abyss-tower__command-title::after {
  background: linear-gradient(90deg, rgba(87, 120, 147, 0.54), transparent);
}
.mbf-abyss-tower__command-title span {
  flex: 0 0 auto;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__floor-caption {
  margin-top: 5.8%;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__floor-value {
  margin-top: -0.4%;
  font-size: 4.7cqw;
  line-height: 0.92;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__summary-actions {
  position: absolute;
  top: 49.5%;
  right: 5.3%;
  left: 5.3%;
  height: 7.4%;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__leaders, .mbf-abyss-tower--desktop .mbf-abyss-tower__hq-button {
  position: static;
  width: auto;
  height: 100%;
  font-size: 0.67cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__command-title {
  position: absolute;
  top: 4.2%;
  left: 1.35%;
  width: 42%;
  height: 8%;
  font-size: 0.78cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__command > .mbf-abyss-tower__cards {
  position: absolute;
  top: 15.2%;
  bottom: 7.2%;
  left: 1.35%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.72cqw;
  width: 42%;
  height: auto;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__command > .mbf-abyss-tower__cards > .mbf-abyss-tower__card {
  width: 100%;
  height: 100%;
  min-width: 0;
  aspect-ratio: auto;
  border-radius: 0.54cqw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__floor-caption {
  margin-top: 3.7%;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__floor-value {
  margin-top: -0.3%;
  font-size: 7.15vw;
  line-height: 0.92;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__summary-actions {
  position: absolute;
  top: 51.5%;
  right: 5.8%;
  left: 5.8%;
  height: 9.6%;
  gap: 0.8vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__leaders, .mbf-abyss-tower--mobile .mbf-abyss-tower__hq-button {
  position: static;
  width: auto;
  height: 100%;
  padding: 0 0.8vw;
  font-size: 1.12vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__leaders svg, .mbf-abyss-tower--mobile .mbf-abyss-tower__hq-button svg {
  width: 2.25vw;
  height: 2.25vw;
  margin-right: 0.65vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__mobile-cards {
  padding-top: 4.7vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__mobile-cards > .mbf-abyss-tower__command-title {
  position: absolute;
  top: 0.1vw;
  right: 0;
  left: 0;
  height: 3.9vw;
  font-size: 2.15vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__mobile-cards > .mbf-abyss-tower__cards {
  height: 100%;
  gap: 1.35vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__mobile-cards .mbf-abyss-tower__card {
  height: 100%;
  aspect-ratio: auto;
}

/* =========================================================
   Штаб Знамени
   ========================================================= */
.mbf-tower-hq {
  position: fixed;
  z-index: 215;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  color: #d5dae1;
  font-family: "MBFTowerCondensed", "Arial Narrow", Arial, sans-serif;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.mbf-tower-hq *,
.mbf-tower-hq *::before,
.mbf-tower-hq *::after {
  box-sizing: border-box;
}
.mbf-tower-hq.is-open {
  opacity: 1;
  pointer-events: auto;
}
.mbf-tower-hq.is-open .mbf-tower-hq__dialog {
  transform: translateY(0) scale(1);
}
.mbf-tower-hq__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 3, 8, 0.82);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  cursor: default;
}
.mbf-tower-hq__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1460px, 100vw - 36px);
  height: min(850px, 100svh - 36px);
  min-height: 640px;
  padding: 19px 24px 22px;
  overflow: hidden;
  border: 1px solid rgba(69, 177, 228, 0.82);
  color: #d9dce1;
  background: radial-gradient(circle at 48% 4%, rgba(75, 33, 137, 0.22), transparent 35%), linear-gradient(135deg, rgba(8, 20, 31, 0.985), rgba(2, 8, 15, 0.995) 45%, rgba(4, 12, 22, 0.99));
  -webkit-clip-path: polygon(19px 0, calc(100% - 19px) 0, 100% 19px, 100% calc(100% - 19px), calc(100% - 19px) 100%, 19px 100%, 0 calc(100% - 19px), 0 19px);
          clip-path: polygon(19px 0, calc(100% - 19px) 0, 100% 19px, 100% calc(100% - 19px), calc(100% - 19px) 100%, 19px 100%, 0 calc(100% - 19px), 0 19px);
  box-shadow: inset 0 0 46px rgba(0, 0, 0, 0.78), 0 0 0 4px rgba(14, 31, 47, 0.72), 0 0 40px rgba(16, 142, 213, 0.18);
  isolation: isolate;
  transform: translateY(16px) scale(0.985);
  transition: transform 0.24s ease;
}
.mbf-tower-hq__dialog::before, .mbf-tower-hq__dialog::after {
  position: absolute;
  content: "";
  pointer-events: none;
}
.mbf-tower-hq__dialog::before {
  z-index: -1;
  inset: 6px;
  border: 1px solid rgba(79, 115, 145, 0.34);
  -webkit-clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
          clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
}
.mbf-tower-hq__dialog::after {
  z-index: -2;
  top: 0;
  right: 10%;
  left: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #2cc8ff 25%, #ad5bff 74%, transparent);
  box-shadow: 0 0 12px rgba(74, 196, 255, 0.65);
}
.mbf-tower-hq__corner {
  position: absolute;
  z-index: 2;
  top: 0;
  width: 72px;
  height: 44px;
  border-top: 4px solid #2dbcf3;
  pointer-events: none;
  filter: drop-shadow(0 0 5px rgba(49, 194, 255, 0.55));
}
.mbf-tower-hq__corner--left {
  left: 0;
  border-left: 4px solid #2dbcf3;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 4px, 16px 4px, 4px 16px, 4px 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% 4px, 16px 4px, 4px 16px, 4px 100%, 0 100%);
}
.mbf-tower-hq__corner--right {
  right: 0;
  border-right: 4px solid #a65cff;
  border-top-color: #a65cff;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - 4px) 100%, calc(100% - 4px) 16px, calc(100% - 16px) 4px, 0 4px);
          clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - 4px) 100%, calc(100% - 4px) 16px, calc(100% - 16px) 4px, 0 4px);
}
.mbf-tower-hq__close {
  position: absolute;
  z-index: 5;
  top: 19px;
  right: 22px;
  width: 39px;
  height: 39px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.mbf-tower-hq__close span {
  position: absolute;
  top: 18px;
  left: 4px;
  width: 31px;
  height: 2px;
  background: #f0edf6;
  box-shadow: 0 0 7px rgba(168, 89, 255, 0.8);
  transform: rotate(45deg);
}
.mbf-tower-hq__close span:last-child {
  transform: rotate(-45deg);
}
.mbf-tower-hq__header {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 0 0 72px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.mbf-tower-hq__header h2,
.mbf-tower-hq__header p {
  margin: 0;
}
.mbf-tower-hq__header h2 {
  color: #e9e9ea;
  font-size: clamp(31px, 2.2vw, 43px);
  font-weight: 770;
  line-height: 0.95;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  text-shadow: 0 3px 4px #000;
}
.mbf-tower-hq__header p {
  margin-top: 5px;
  color: #c4c8cd;
  font-size: 16px;
  letter-spacing: 0.08em;
}
.mbf-tower-hq__currency {
  position: absolute;
  top: 7px;
  right: 61px;
  display: flex;
  align-items: center;
  min-width: 156px;
  height: 50px;
  padding: 0 18px 0 10px;
  border: 1px solid rgba(108, 133, 160, 0.55);
  background: linear-gradient(180deg, rgba(10, 21, 34, 0.95), rgba(3, 9, 16, 0.95));
  -webkit-clip-path: polygon(7px 0, 100% 0, 100% 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
          clip-path: polygon(7px 0, 100% 0, 100% 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
}
.mbf-tower-hq__currency img {
  width: 38px;
  height: 38px;
  -o-object-fit: contain;
     object-fit: contain;
}
.mbf-tower-hq__currency strong {
  margin-left: 7px;
  color: #f1f2f3;
  font-size: 24px;
  letter-spacing: 0.08em;
}
.mbf-tower-hq__tabs {
  position: relative;
  z-index: 2;
  display: grid;
  flex: 0 0 45px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: min(620px, 52%);
  margin: 0 auto 9px;
}
.mbf-tower-hq__tabs button {
  border: 1px solid rgba(73, 112, 146, 0.65);
  color: #8fc9ee;
  background: rgba(3, 12, 21, 0.88);
  cursor: pointer;
  font: inherit;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.mbf-tower-hq__tabs button.is-active {
  border-color: #bb6dff;
  color: #e9d7ff;
  background: linear-gradient(90deg, rgba(72, 20, 118, 0.72), rgba(128, 43, 176, 0.56), rgba(64, 16, 104, 0.75)), #24073d;
  box-shadow: inset 0 0 16px rgba(203, 102, 255, 0.5), 0 0 9px rgba(155, 52, 255, 0.55);
}
.mbf-tower-hq__panel {
  position: relative;
  z-index: 1;
  display: none;
  flex: 1 1 auto;
  min-height: 0;
}
.mbf-tower-hq__panel.is-active {
  display: grid;
}
.mbf-tower-hq__panel[data-tower-hq-panel=banner] {
  grid-template-rows: minmax(218px, 43%) 54px minmax(0, 1fr);
}
.mbf-tower-hq__panel[data-tower-hq-panel=orders] {
  grid-template-rows: minmax(185px, 36%) 47px minmax(0, 1fr) 49px 22px;
}
.mbf-tower-hq__banner-overview, .mbf-tower-hq__order-overview {
  position: relative;
  display: grid;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(104, 130, 151, 0.5);
  background: radial-gradient(circle at 22% 50%, rgba(102, 33, 179, 0.2), transparent 31%), linear-gradient(110deg, rgba(8, 18, 29, 0.95), rgba(2, 9, 16, 0.95));
  -webkit-clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
          clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
}
.mbf-tower-hq__banner-overview::after, .mbf-tower-hq__order-overview::after {
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(59, 84, 105, 0.25);
  content: "";
  pointer-events: none;
}
.mbf-tower-hq__banner-overview {
  grid-template-columns: 22% 24% minmax(0, 1fr);
}
.mbf-tower-hq__banner-art {
  position: relative;
  overflow: hidden;
}
.mbf-tower-hq__banner-art img {
  position: absolute;
  top: -14%;
  left: 50%;
  width: 78%;
  height: 130%;
  -o-object-fit: contain;
     object-fit: contain;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 13px rgba(153, 69, 255, 0.38));
}
.mbf-tower-hq__banner-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-width: 0;
  padding: 18px 14px;
  border-right: 1px solid rgba(72, 95, 115, 0.45);
  text-align: center;
}
.mbf-tower-hq__banner-rank h3 {
  align-self: flex-start;
  margin: 0 0 auto;
  color: #e0e1e4;
  font-size: 26px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.mbf-tower-hq__banner-rank > span {
  color: #bbbfc6;
  font-size: 17px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mbf-tower-hq__banner-rank > strong {
  color: #b95cff;
  font-size: clamp(49px, 4.2vw, 72px);
  line-height: 0.95;
  text-shadow: 0 0 14px rgba(170, 75, 255, 0.42);
}
.mbf-tower-hq__banner-rank > b,
.mbf-tower-hq__banner-rank > small {
  color: #d5d8dd;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.07em;
}
.mbf-tower-hq__banner-rank > small {
  margin-top: 7px;
  color: #b9bdc3;
  text-transform: uppercase;
}
.mbf-tower-hq__rank-line {
  position: relative;
  width: min(260px, 88%);
  height: 12px;
  margin: 8px auto 7px;
  border: 1px solid rgba(92, 105, 120, 0.72);
  background: #050a0f;
}
.mbf-tower-hq__rank-line i {
  position: absolute;
  inset: 2px;
  width: calc(var(--hq-progress) - 4px);
  background: linear-gradient(90deg, #8434de, #cc70ff);
  box-shadow: 0 0 9px rgba(180, 72, 255, 0.85);
}
.mbf-tower-hq__active-bonuses {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  min-width: 0;
  padding: 18px 13px 34px;
}
.mbf-tower-hq__active-bonuses > p {
  position: absolute;
  right: 16px;
  bottom: 9px;
  left: calc(46% + 16px);
  margin: 0;
  padding-top: 9px;
  border-top: 1px solid rgba(72, 97, 118, 0.42);
  color: #acb9c5;
  font-size: 14px;
  letter-spacing: 0.045em;
  text-align: center;
}
.mbf-tower-hq__active-bonus {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  border-left: 1px solid rgba(65, 88, 108, 0.42);
  text-align: center;
}
.mbf-tower-hq__active-bonus .mbf-tower-hq__upgrade-icon {
  width: min(74px, 70%);
  margin-bottom: 2px;
}
.mbf-tower-hq__active-bonus strong {
  color: #bc63ff;
  font-size: 22px;
  letter-spacing: 0.04em;
}
.mbf-tower-hq__active-bonus small {
  overflow: hidden;
  width: 90%;
  color: #c8ccd1;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mbf-tower-hq__active-bonus--cyan strong, .mbf-tower-hq__active-bonus--blue strong {
  color: #4bcaff;
}
.mbf-tower-hq__active-bonus--gold strong {
  color: #f1b746;
}
.mbf-tower-hq__section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}
.mbf-tower-hq__section-title h3,
.mbf-tower-hq__section-title p {
  margin: 0;
}
.mbf-tower-hq__section-title h3 {
  color: #d0d3d7;
  font-size: 25px;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}
.mbf-tower-hq__section-title p {
  margin-top: 5px;
  color: #afb4bc;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.mbf-tower-hq__upgrade-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  min-height: 0;
}
.mbf-tower-hq__upgrade-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.mbf-tower-hq__upgrade-actions button {
  min-width: 0;
  padding: 0 4px;
}
.mbf-tower-hq__upgrade {
  position: relative;
  display: grid;
  grid-template-rows: minmax(72px, 1fr) auto auto auto auto 39px;
  justify-items: center;
  min-width: 0;
  min-height: 0;
  padding: 8px 12px 10px;
  overflow: hidden;
  border: 1px solid rgba(82, 107, 129, 0.64);
  background: radial-gradient(circle at 50% 22%, rgba(92, 35, 155, 0.2), transparent 38%), linear-gradient(180deg, rgba(5, 15, 25, 0.96), rgba(2, 9, 15, 0.96));
  -webkit-clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%, 0 8px);
          clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%, 0 8px);
  text-align: center;
}
.mbf-tower-hq__upgrade h4,
.mbf-tower-hq__upgrade p,
.mbf-tower-hq__upgrade small {
  margin: 0;
}
.mbf-tower-hq__upgrade h4 {
  color: #c163ff;
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mbf-tower-hq__upgrade p {
  min-height: 34px;
  color: #d4c7df;
  font-size: 14px;
  line-height: 1.15;
}
.mbf-tower-hq__upgrade > small {
  width: 100%;
  margin-top: 4px;
  padding: 5px 0;
  border-top: 1px solid rgba(68, 87, 105, 0.4);
  color: #969da5;
  font-size: 13px;
}
.mbf-tower-hq__upgrade button {
  width: 100%;
  border: 1px solid #b860ff;
  color: #f1e7fb;
  background: linear-gradient(90deg, #451073, #711c9a, #41106e);
  box-shadow: inset 0 0 10px rgba(206, 115, 255, 0.5), 0 0 6px rgba(152, 59, 255, 0.45);
  cursor: pointer;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mbf-tower-hq__upgrade button:hover, .mbf-tower-hq__upgrade button:focus-visible {
  filter: brightness(1.18);
  outline: 0;
}
.mbf-tower-hq__upgrade button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.8);
  opacity: 0.55;
}
.mbf-tower-hq__upgrade--cyan h4, .mbf-tower-hq__upgrade--blue h4 {
  color: #31c9ff;
}
.mbf-tower-hq__upgrade--gold h4 {
  color: #f2b548;
}
.mbf-tower-hq__upgrade-icon, .mbf-tower-hq__order-icon {
  align-self: center;
  display: block;
  width: 128px;
  max-width: 100%;
  aspect-ratio: 1;
  background-repeat: no-repeat;
}
.mbf-tower-hq__upgrade-icon {
  background-image: url("/assets/tower-raid/hq-upgrades.webp");
  background-size: 500% 100%;
}
.mbf-tower-hq__upgrade-icon--assault {
  background-position: 0 0;
}
.mbf-tower-hq__upgrade-icon--endurance {
  background-position: 25% 0;
}
.mbf-tower-hq__upgrade-icon--hunt {
  background-position: 50% 0;
}
.mbf-tower-hq__upgrade-icon--mentoring {
  background-position: 75% 0;
}
.mbf-tower-hq__upgrade-icon--supply {
  background-position: 100% 0;
}
.mbf-tower-hq__upgrade-cost {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  color: #f0f1f3;
  font-size: 18px;
  letter-spacing: 0.08em;
}
.mbf-tower-hq__upgrade-cost img {
  width: 27px;
  height: 27px;
  -o-object-fit: contain;
     object-fit: contain;
}
.mbf-tower-hq__order-overview {
  grid-template-columns: 25% 27% minmax(0, 1fr) 22%;
}
.mbf-tower-hq__order-art {
  position: relative;
  overflow: hidden;
}
.mbf-tower-hq__order-art img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 105%;
  height: 120%;
  -o-object-fit: contain;
     object-fit: contain;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 12px rgba(151, 72, 255, 0.4));
}
.mbf-tower-hq__order-current {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  padding: 17px 18px;
}
.mbf-tower-hq__order-current h3,
.mbf-tower-hq__order-current p {
  margin: 0;
}
.mbf-tower-hq__order-current h3 {
  color: #e2e2e4;
  font-size: 27px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mbf-tower-hq__order-current p {
  margin: 3px 0 auto;
  color: #c3c6ca;
  font-size: 14px;
  letter-spacing: 0.055em;
}
.mbf-tower-hq__order-current > span {
  color: #c365ff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.mbf-tower-hq__order-current > strong {
  margin-top: 4px;
  color: #eeeef0;
  font-size: 32px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.mbf-tower-hq__order-effects {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 20px 28px;
  border-left: 1px solid rgba(68, 91, 111, 0.47);
}
.mbf-tower-hq__order-effects strong,
.mbf-tower-hq__order-effects b {
  font-size: 20px;
  letter-spacing: 0.035em;
}
.mbf-tower-hq__order-effects strong {
  color: #45e4bc;
}
.mbf-tower-hq__order-effects b {
  margin-top: 10px;
  color: #ff5967;
}
.mbf-tower-hq__order-effects span {
  color: #ccd0d4;
  font-weight: 500;
}
.mbf-tower-hq__order-effects small {
  margin-top: auto;
  color: #aaaeb4;
  font-size: 13px;
  text-align: center;
}
.mbf-tower-hq__order-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 18px;
  border-left: 1px solid rgba(68, 91, 111, 0.47);
  text-align: center;
}
.mbf-tower-hq__order-rank > strong {
  color: #55d6ff;
  font-size: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mbf-tower-hq__order-rank > span {
  margin: 8px 0 11px;
  color: #d0d3d8;
  font-size: 17px;
}
.mbf-tower-hq__order-rank > span b {
  color: #bd61ff;
  font-size: 22px;
}
.mbf-tower-hq__order-rank > small {
  padding-top: 12px;
  border-top: 1px solid rgba(76, 98, 118, 0.5);
  color: #b1b6bd;
  font-size: 13px;
  line-height: 1.25;
}
.mbf-tower-hq__order-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  min-height: 0;
}
.mbf-tower-hq__order {
  position: relative;
  display: grid;
  grid-template-rows: minmax(74px, 1fr) auto auto auto auto auto 38px;
  justify-items: center;
  min-width: 0;
  min-height: 0;
  padding: 7px 12px 9px;
  overflow: hidden;
  border: 1px solid rgba(51, 163, 216, 0.65);
  color: #cfd3d8;
  background: radial-gradient(circle at 50% 18%, rgba(25, 139, 199, 0.16), transparent 43%), linear-gradient(180deg, rgba(5, 16, 27, 0.98), rgba(2, 9, 15, 0.98));
  cursor: pointer;
  font: inherit;
  text-align: center;
}
.mbf-tower-hq__order > strong {
  color: #42d1ff;
  font-size: 23px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.mbf-tower-hq__order > small {
  color: #d0d2d5;
  font-size: 13px;
}
.mbf-tower-hq__order > b,
.mbf-tower-hq__order > em {
  margin-top: 5px;
  font-size: 15px;
  font-style: normal;
  line-height: 1.08;
}
.mbf-tower-hq__order > b {
  color: #40e3b4;
}
.mbf-tower-hq__order > em {
  color: #ff5361;
}
.mbf-tower-hq__order > i {
  align-self: end;
  margin: 6px 0;
  color: #aeb5bc;
  font-size: 12px;
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mbf-tower-hq__order--violet {
  border-color: rgba(181, 84, 255, 0.78);
}
.mbf-tower-hq__order--violet > strong {
  color: #ca65ff;
}
.mbf-tower-hq__order--red {
  border-color: rgba(203, 75, 91, 0.66);
}
.mbf-tower-hq__order--red > strong {
  color: #ff5769;
}
.mbf-tower-hq__order.is-selected {
  border-color: #c36eff;
  background: radial-gradient(circle at 50% 25%, rgba(135, 38, 211, 0.3), transparent 48%), linear-gradient(180deg, rgba(17, 9, 31, 0.98), rgba(6, 7, 17, 0.98));
  box-shadow: inset 0 0 16px rgba(181, 77, 255, 0.34), 0 0 9px rgba(154, 63, 255, 0.58);
}
.mbf-tower-hq__order.is-selected .mbf-tower-hq__order-action {
  border-color: #bc68ff;
  color: #f4eaff;
  background: linear-gradient(90deg, #4d117c, #721d9c, #491174);
  box-shadow: inset 0 0 10px rgba(216, 129, 255, 0.45);
}
.mbf-tower-hq__order.is-selected .mbf-tower-hq__order-action u {
  display: inline;
}
.mbf-tower-hq__order-icon {
  background-image: url("/assets/tower-raid/hq-orders.webp");
  background-size: 400% 100%;
}
.mbf-tower-hq__order-icon--breakthrough {
  background-position: 0 0;
}
.mbf-tower-hq__order-icon--training {
  background-position: 33.333% 0;
}
.mbf-tower-hq__order-icon--gathering {
  background-position: 66.666% 0;
}
.mbf-tower-hq__order-icon--boss-hunt {
  background-position: 100% 0;
}
.mbf-tower-hq__order-action {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: end;
  width: 100%;
  height: 38px;
  border: 1px solid #2fbced;
  color: #a9d9ef;
  background: rgba(3, 14, 23, 0.88);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}
.mbf-tower-hq__order-action u {
  display: none;
  margin-right: 8px;
  color: #fff;
  font-size: 21px;
  text-decoration: none;
}
.mbf-tower-hq__save-order {
  align-self: center;
  justify-self: center;
  width: min(420px, 42%);
  margin-top: 5px;
  border: 1px solid #bd66ff;
  color: #f0e8f8;
  background: linear-gradient(90deg, #3f0d69, #721c99, #3d0c66);
  box-shadow: inset 0 0 12px rgba(211, 122, 255, 0.42), 0 0 7px rgba(147, 54, 245, 0.45);
  cursor: pointer;
  font: inherit;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mbf-tower-hq__save-caption {
  align-self: center;
  margin: 4px 0 0;
  color: #b9bdc3;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-align: center;
}

@media (max-width: 980px) {
  .mbf-tower-hq {
    align-items: flex-start;
    padding: 8px;
  }
  .mbf-tower-hq__dialog {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: calc(100svh - 16px);
    padding: 13px 12px 22px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .mbf-tower-hq__header {
    min-height: 93px;
    padding-right: 58px;
  }
  .mbf-tower-hq__header h2 {
    font-size: clamp(25px, 7vw, 38px);
  }
  .mbf-tower-hq__header p {
    font-size: 12px;
  }
  .mbf-tower-hq__currency {
    position: static;
    justify-content: center;
    width: 150px;
    height: 42px;
    margin: 0 auto 8px;
  }
  .mbf-tower-hq__currency img {
    width: 31px;
    height: 31px;
  }
  .mbf-tower-hq__currency strong {
    font-size: 20px;
  }
  .mbf-tower-hq__tabs {
    width: 100%;
    height: 42px;
    margin-bottom: 8px;
  }
  .mbf-tower-hq__tabs button {
    font-size: 15px;
  }
  .mbf-tower-hq__panel.is-active {
    display: block;
  }
  .mbf-tower-hq__banner-overview, .mbf-tower-hq__order-overview {
    display: grid;
    overflow: visible;
  }
  .mbf-tower-hq__banner-overview {
    grid-template-columns: 40% 60%;
  }
  .mbf-tower-hq__banner-art {
    min-height: 245px;
  }
  .mbf-tower-hq__banner-rank {
    min-height: 245px;
    border-right: 0;
  }
  .mbf-tower-hq__banner-rank h3 {
    align-self: center;
    font-size: 21px;
  }
  .mbf-tower-hq__active-bonuses {
    grid-column: 1/-1;
    min-height: 150px;
    padding-bottom: 36px;
  }
  .mbf-tower-hq__active-bonuses > p {
    right: 12px;
    left: 12px;
    font-size: 11px;
  }
  .mbf-tower-hq__section-title {
    min-height: 62px;
  }
  .mbf-tower-hq__section-title h3 {
    font-size: 20px;
  }
  .mbf-tower-hq__section-title p {
    font-size: 12px;
  }
  .mbf-tower-hq__upgrade-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  .mbf-tower-hq__upgrade {
    min-height: 305px;
  }
  .mbf-tower-hq__upgrade:last-child {
    grid-column: 1/-1;
    width: calc(50% - 5px);
    justify-self: center;
  }
  .mbf-tower-hq__order-overview {
    grid-template-columns: 42% 58%;
  }
  .mbf-tower-hq__order-art {
    min-height: 220px;
  }
  .mbf-tower-hq__order-current {
    min-height: 220px;
  }
  .mbf-tower-hq__order-effects, .mbf-tower-hq__order-rank {
    min-height: 150px;
  }
  .mbf-tower-hq__order-effects {
    border-left: 0;
  }
  .mbf-tower-hq__order-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  .mbf-tower-hq__order {
    min-height: 325px;
  }
  .mbf-tower-hq__save-order {
    display: block;
    width: min(440px, 90%);
    height: 47px;
    margin: 13px auto 0;
  }
}
@media (max-width: 560px) {
  .mbf-tower-hq__close {
    top: 12px;
    right: 12px;
  }
  .mbf-tower-hq__header {
    justify-content: flex-start;
    padding-left: 8px;
    text-align: left;
  }
  .mbf-tower-hq__banner-overview, .mbf-tower-hq__order-overview {
    grid-template-columns: 1fr;
  }
  .mbf-tower-hq__banner-art {
    min-height: 255px;
  }
  .mbf-tower-hq__banner-rank {
    min-height: 230px;
    border-top: 1px solid rgba(72, 95, 115, 0.45);
  }
  .mbf-tower-hq__active-bonuses {
    grid-template-columns: repeat(5, minmax(62px, 1fr));
    overflow-x: auto;
  }
  .mbf-tower-hq__upgrade-grid, .mbf-tower-hq__order-grid {
    grid-template-columns: 1fr;
  }
  .mbf-tower-hq__upgrade, .mbf-tower-hq__upgrade:last-child {
    width: 100%;
    min-height: 330px;
    grid-column: auto;
  }
  .mbf-tower-hq__order-current {
    min-height: 195px;
  }
  .mbf-tower-hq__order-effects {
    min-height: 145px;
    border-top: 1px solid rgba(68, 91, 111, 0.47);
  }
  .mbf-tower-hq__order-rank {
    min-height: 145px;
    border-top: 1px solid rgba(68, 91, 111, 0.47);
    border-left: 0;
  }
  .mbf-tower-hq__order {
    min-height: 350px;
  }
}
.mbf-tower-hq [data-hq-currency-value],
.mbf-tower-hq [data-hq-rank],
.mbf-tower-hq [data-hq-progress],
.mbf-tower-hq [data-hq-order-rank],
.mbf-tower-hq [data-hq-upgrade-level],
.mbf-tower-hq [data-hq-upgrade-bonus],
.mbf-tower-hq [data-hq-upgrade-next],
.mbf-tower-hq [data-hq-upgrade-cost],
.mbf-tower-hq [data-hq-active-upgrade-level] {
  transition: color 0.2s ease, text-shadow 0.2s ease, transform 0.2s ease;
}
.mbf-tower-hq .is-value-updated {
  color: #fff !important;
  text-shadow: 0 0 7px rgba(172, 111, 255, 0.95), 0 0 16px rgba(86, 210, 255, 0.75);
  transform: scale(1.08);
}
.mbf-tower-hq__upgrade button.is-upgraded {
  pointer-events: none;
}
.mbf-tower-hq__upgrade button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.35);
  opacity: 0.65;
}

[data-tower-squad-power] {
  display: inline-block;
  transition: transform 0.25s ease, color 0.25s ease, text-shadow 0.25s ease;
}
[data-tower-squad-power].is-power-updated {
  color: #ffffff !important;
  transform: scale(1.13);
  text-shadow: 0 0 8px rgba(183, 106, 255, 0.95), 0 0 20px rgba(117, 66, 255, 0.75);
}

/* =========================================================
   Финальный левый блок Башни Разлома
   ========================================================= */
.mbf-abyss-tower {
  /* Заголовок */
  /* Этаж */
  /* Кристаллы */
  /* Лидеры и штаб */
  /* Награды */
  /* ПК */
  /* Телефон */
}
.mbf-abyss-tower__summary {
  isolation: isolate;
}
.mbf-abyss-tower__summary-header {
  position: absolute;
  top: 4%;
  right: 7%;
  left: 7%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 11%;
  text-align: center;
}
.mbf-abyss-tower__summary-title {
  width: 100%;
  margin: 0;
  overflow: visible;
  color: #e8e8ea;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.025em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 12px rgba(255, 255, 255, 0.05);
}
.mbf-abyss-tower__summary-sigil {
  top: 3%;
  left: 3%;
  opacity: 0.1;
}
.mbf-abyss-tower__summary > .mbf-abyss-tower__ornament {
  position: absolute;
  top: 16.5%;
  right: 8%;
  left: 8%;
  width: auto;
  height: 10px;
  margin: 0;
}
.mbf-abyss-tower__summary-floor {
  position: absolute;
  top: 19%;
  right: 5.3%;
  left: 5.3%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 25%;
  overflow: hidden;
  border-top: 1px solid rgba(154, 79, 255, 0.43);
  border-bottom: 1px solid rgba(154, 79, 255, 0.31);
  background: radial-gradient(circle at center, rgba(113, 44, 190, 0.16), rgba(34, 15, 60, 0.06) 48%, transparent 72%);
}
.mbf-abyss-tower__summary-floor::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: calc(100% - 12px);
  aspect-ratio: 1/1;
  content: "";
  border: 1px solid rgba(158, 83, 255, 0.43);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: inset 0 0 24px rgba(128, 48, 217, 0.08), 0 0 20px rgba(128, 48, 217, 0.08);
}
.mbf-abyss-tower__summary-floor::after {
  position: absolute;
  top: 50%;
  right: 5%;
  left: 5%;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(153, 79, 255, 0.35) 25%, transparent 39%, transparent 61%, rgba(153, 79, 255, 0.35) 75%, transparent);
}
.mbf-abyss-tower__summary-floor-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mbf-abyss-tower__summary-floor .mbf-abyss-tower__floor-caption {
  margin: 0;
  color: #9da3ad;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.09em;
  text-align: center;
}
.mbf-abyss-tower__summary-floor .mbf-abyss-tower__floor-value {
  margin: 0.08em 0 0;
  color: #d5aeff;
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.04em;
  text-align: center;
  text-shadow: 0 0 8px rgba(193, 126, 255, 0.85), 0 0 22px rgba(138, 52, 228, 0.5);
}
.mbf-abyss-tower__summary-floor-diamond {
  position: absolute;
  z-index: 4;
  top: 50%;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(173, 87, 255, 0.9);
  background: #130925;
  transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 0 7px rgba(173, 87, 255, 0.55), inset 0 0 4px rgba(173, 87, 255, 0.4);
}
.mbf-abyss-tower__summary-floor-diamond--left {
  left: 24%;
}
.mbf-abyss-tower__summary-floor-diamond--right {
  right: 24%;
}
.mbf-abyss-tower__summary-floor-diamond::after {
  position: absolute;
  content: "";
  inset: 3px;
  background: #ae5aff;
  box-shadow: 0 0 5px #ae5aff;
}
.mbf-abyss-tower__summary-currency {
  position: absolute;
  top: 46%;
  right: 5.3%;
  left: 5.3%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  width: auto;
  height: 10.5%;
  margin: 0;
  padding: 0 4% 0 2%;
  gap: 2%;
  overflow: hidden;
  border: 1px solid rgba(108, 130, 161, 0.55);
  border-radius: 0;
  color: #fff;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: linear-gradient(100deg, rgba(58, 17, 91, 0.58), rgba(4, 13, 24, 0.96) 34%, rgba(2, 9, 17, 0.98));
  -webkit-clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
          clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  box-shadow: inset 0 0 18px rgba(116, 46, 185, 0.14), 0 0 10px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  text-align: left;
}
.mbf-abyss-tower__summary-currency::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  content: "";
  background: #a64fff;
  box-shadow: 0 0 9px rgba(166, 79, 255, 0.85);
}
.mbf-abyss-tower__summary-currency > i {
  margin: 0;
  color: #c1c9d1;
  font-family: Arial, sans-serif;
  font-style: normal;
  line-height: 1;
}
.mbf-abyss-tower__summary-currency-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 86%;
}
.mbf-abyss-tower__summary-currency-icon img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(169, 79, 255, 0.75)) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6));
}
.mbf-abyss-tower__summary-currency-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
}
.mbf-abyss-tower__summary-currency-copy small {
  overflow: hidden;
  color: #a7abb3;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mbf-abyss-tower__summary-currency-copy strong {
  margin-top: 0.13em;
  color: #c471ff;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  text-shadow: 0 0 9px rgba(171, 74, 255, 0.55);
}
.mbf-abyss-tower__summary-actions {
  position: absolute !important;
  top: 58.5% !important;
  right: 5.3% !important;
  left: 5.3% !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: auto !important;
  height: 9% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 2.3% !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  -webkit-clip-path: none !important;
          clip-path: none !important;
  box-shadow: none !important;
}
.mbf-abyss-tower__leaders, .mbf-abyss-tower__hq-button {
  position: relative !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  justify-content: initial !important;
  justify-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 7% !important;
  gap: 5% !important;
  overflow: hidden !important;
  border: 1px solid rgba(72, 187, 246, 0.75);
  border-radius: 0;
  color: #e3e7ed;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: linear-gradient(105deg, rgba(23, 57, 91, 0.78), rgba(4, 14, 25, 0.97));
  -webkit-clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
          clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  box-shadow: inset 0 0 16px rgba(38, 126, 189, 0.12), 0 0 8px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
}
.mbf-abyss-tower__leaders svg, .mbf-abyss-tower__hq-button svg {
  display: block !important;
  flex: none !important;
  width: auto !important;
  height: 42% !important;
  margin: 0 !important;
  fill: #3dcaff;
  filter: drop-shadow(0 0 4px rgba(48, 192, 255, 0.5));
}
.mbf-abyss-tower__leaders > span, .mbf-abyss-tower__hq-button > span {
  display: block;
  min-width: 0;
  overflow: hidden;
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0.055em;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mbf-abyss-tower__leaders > i, .mbf-abyss-tower__hq-button > i {
  margin: 0 !important;
  color: #bec6cf;
  font-family: Arial, sans-serif;
  font-weight: 300;
  font-style: normal;
  line-height: 1;
}
.mbf-abyss-tower__hq-button {
  border-color: rgba(178, 78, 255, 0.86);
  background: linear-gradient(105deg, rgba(69, 23, 102, 0.76), rgba(5, 13, 25, 0.97));
}
.mbf-abyss-tower__floor-rewards {
  position: absolute;
  right: 5.3%;
  bottom: 3.2%;
  left: 5.3%;
  height: 27%;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(76, 101, 126, 0.38);
  background: linear-gradient(180deg, rgba(2, 10, 18, 0.75), rgba(0, 6, 12, 0.9));
}
.mbf-abyss-tower__floor-rewards-title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22%;
  margin: 0;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
}
.mbf-abyss-tower__floor-rewards-title::before, .mbf-abyss-tower__floor-rewards-title::after {
  width: 16%;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(131, 89, 172, 0.58));
}
.mbf-abyss-tower__floor-rewards-title::after {
  background: linear-gradient(90deg, rgba(131, 89, 172, 0.58), transparent);
}
.mbf-abyss-tower__floor-rewards-title > span {
  margin: 0 4%;
}
.mbf-abyss-tower__floor-rewards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: 58%;
  padding: 0 4%;
  gap: 2.4%;
}
.mbf-abyss-tower__panel-link {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 20%;
}
.mbf-abyss-tower [data-tower-summary-currency] {
  display: inline-block;
  transition: color 0.2s ease, text-shadow 0.2s ease, transform 0.2s ease;
}
.mbf-abyss-tower [data-tower-summary-currency].is-value-updated {
  color: #fff;
  transform: scale(1.07);
  text-shadow: 0 0 7px rgba(172, 111, 255, 0.95), 0 0 16px rgba(86, 210, 255, 0.55);
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__summary-title {
  font-size: 1.55cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__summary-floor .mbf-abyss-tower__floor-caption {
  font-size: 0.72cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__summary-floor .mbf-abyss-tower__floor-value {
  font-size: 3.75cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__summary-floor-diamond {
  width: 0.52cqw;
  height: 0.52cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__summary-currency-icon {
  width: 2.45cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__summary-currency-copy small {
  font-size: 0.64cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__summary-currency-copy strong {
  font-size: 1.12cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__summary-currency > i {
  font-size: 1.35cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__leaders, .mbf-abyss-tower--desktop .mbf-abyss-tower__hq-button {
  font-size: 0.66cqw !important;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__leaders > i, .mbf-abyss-tower--desktop .mbf-abyss-tower__hq-button > i {
  font-size: 1.15cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__floor-rewards-title {
  font-size: 0.68cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__small-reward-amount {
  font-size: 0.76cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__panel-link {
  padding: 0 5%;
  font-size: 0.65cqw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__summary-title {
  font-size: 2.45vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__summary-floor .mbf-abyss-tower__floor-caption {
  font-size: 1.38vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__summary-floor .mbf-abyss-tower__floor-value {
  font-size: 7.25vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__summary-floor-diamond {
  width: 1.1vw;
  height: 1.1vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__summary-currency-icon {
  width: 5.6vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__summary-currency-copy small {
  font-size: 1.38vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__summary-currency-copy strong {
  font-size: 2.5vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__summary-currency > i {
  font-size: 3vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__leaders, .mbf-abyss-tower--mobile .mbf-abyss-tower__hq-button {
  padding: 0 7% !important;
  font-size: 1.38vw !important;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__leaders > i, .mbf-abyss-tower--mobile .mbf-abyss-tower__hq-button > i {
  font-size: 2.6vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__floor-rewards-title {
  font-size: 1.38vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__small-reward-amount {
  font-size: 1.5vw;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__panel-link {
  padding: 0 5%;
  font-size: 1.28vw;
}

/* =========================================================
   Финальная геометрия левого блока
   ВАЖНО: оставить самым последним блоком в SCSS
   ========================================================= */
.mbf-abyss-tower {
  /* Кнопки всегда должны находиться выше блока наград */
  /* Кнопки не должны становиться тёмными */
  /* Карточки наград делаем квадратными и компактными */
  /* ==========================
     ПК
     ========================== */
  /* ==========================
     Телефон
     ========================== */
}
.mbf-abyss-tower__summary-actions {
  z-index: 5 !important;
}
.mbf-abyss-tower__floor-rewards {
  z-index: 2 !important;
}
.mbf-abyss-tower__leaders, .mbf-abyss-tower__hq-button {
  opacity: 1 !important;
}
.mbf-abyss-tower__leaders > span, .mbf-abyss-tower__hq-button > span {
  color: #e5e9ee !important;
  opacity: 1 !important;
}
.mbf-abyss-tower__leaders > i, .mbf-abyss-tower__hq-button > i {
  color: #c5cbd3 !important;
  opacity: 1 !important;
}
.mbf-abyss-tower__leaders svg, .mbf-abyss-tower__hq-button svg {
  opacity: 1 !important;
}
.mbf-abyss-tower__leaders svg {
  fill: #38c7ff !important;
}
.mbf-abyss-tower__hq-button svg {
  fill: #43caff !important;
}
.mbf-abyss-tower__small-reward {
  width: 76% !important;
  height: auto !important;
  aspect-ratio: 1/1;
  align-self: center;
  justify-self: center;
}
.mbf-abyss-tower__small-reward-image {
  width: 88% !important;
  height: 88% !important;
  -o-object-fit: contain;
     object-fit: contain;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower {
  /* Блок этажа ниже и компактнее */
  /* Кристаллы */
  /* Кнопки */
  /* Между кнопками и наградами появляется нормальный воздух */
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__summary-floor {
  top: 19.2% !important;
  right: 5.3% !important;
  left: 5.3% !important;
  height: 22.5% !important;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__summary-floor::before {
  width: auto !important;
  height: 80% !important;
  aspect-ratio: 1/1;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__summary-floor .mbf-abyss-tower__floor-caption {
  font-size: 0.67cqw !important;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__summary-floor .mbf-abyss-tower__floor-value {
  margin-top: 0.12cqw !important;
  font-size: 3.25cqw !important;
  line-height: 0.86 !important;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__summary-floor-diamond {
  width: 0.46cqw !important;
  height: 0.46cqw !important;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__summary-floor-diamond--left {
  left: 27% !important;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__summary-floor-diamond--right {
  right: 27% !important;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__summary-currency {
  top: 43.5% !important;
  height: 10.1% !important;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__summary-actions {
  top: 55.2% !important;
  right: 5.3% !important;
  left: 5.3% !important;
  height: 8.2% !important;
  gap: 0.8cqw !important;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__leaders, .mbf-abyss-tower--desktop .mbf-abyss-tower__hq-button {
  padding: 0 0.7cqw !important;
  gap: 0.35cqw !important;
  font-size: 0.64cqw !important;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__leaders svg, .mbf-abyss-tower--desktop .mbf-abyss-tower__hq-button svg {
  width: 1.05cqw !important;
  height: 1.05cqw !important;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__leaders > i, .mbf-abyss-tower--desktop .mbf-abyss-tower__hq-button > i {
  font-size: 1.1cqw !important;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__floor-rewards {
  right: 5.3% !important;
  bottom: 3.2% !important;
  left: 5.3% !important;
  height: 29.2% !important;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__floor-rewards-title {
  height: 19% !important;
  font-size: 0.65cqw !important;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__floor-rewards-grid {
  position: absolute !important;
  top: 20% !important;
  right: 3% !important;
  bottom: 22% !important;
  left: 3% !important;
  width: auto !important;
  height: auto !important;
  padding: 0 5% !important;
  gap: 1.3% !important;
  align-items: center;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__small-reward-amount {
  right: 4% !important;
  bottom: 3% !important;
  font-size: 0.68cqw !important;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__panel-link {
  height: 20% !important;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__summary-floor {
  top: 19.2% !important;
  right: 5.8% !important;
  left: 5.8% !important;
  height: 22.5% !important;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__summary-floor::before {
  width: auto !important;
  height: 80% !important;
  aspect-ratio: 1/1;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__summary-floor .mbf-abyss-tower__floor-caption {
  font-size: 1.25vw !important;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__summary-floor .mbf-abyss-tower__floor-value {
  margin-top: 0.2vw !important;
  font-size: 6.2vw !important;
  line-height: 0.86 !important;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__summary-floor-diamond {
  width: 0.95vw !important;
  height: 0.95vw !important;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__summary-floor-diamond--left {
  left: 27% !important;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__summary-floor-diamond--right {
  right: 27% !important;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__summary-currency {
  top: 43.5% !important;
  height: 10% !important;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__summary-actions {
  top: 55.2% !important;
  right: 5.8% !important;
  left: 5.8% !important;
  height: 8.3% !important;
  gap: 1.3vw !important;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__leaders, .mbf-abyss-tower--mobile .mbf-abyss-tower__hq-button {
  padding: 0 1.3vw !important;
  gap: 0.6vw !important;
  font-size: 1.25vw !important;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__leaders svg, .mbf-abyss-tower--mobile .mbf-abyss-tower__hq-button svg {
  width: 2.25vw !important;
  height: 2.25vw !important;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__leaders > i, .mbf-abyss-tower--mobile .mbf-abyss-tower__hq-button > i {
  font-size: 2.4vw !important;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__floor-rewards {
  right: 5.8% !important;
  bottom: 3.7% !important;
  left: 5.8% !important;
  height: 29.2% !important;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__floor-rewards-title {
  height: 19% !important;
  font-size: 1.25vw !important;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__floor-rewards-grid {
  position: absolute !important;
  top: 20% !important;
  right: 3% !important;
  bottom: 22% !important;
  left: 3% !important;
  width: auto !important;
  height: auto !important;
  padding: 0 5% !important;
  gap: 1.3% !important;
  align-items: center;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__small-reward {
  width: 74% !important;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__small-reward-amount {
  right: 4% !important;
  bottom: 3% !important;
  font-size: 1.3vw !important;
}
.mbf-abyss-tower--mobile .mbf-abyss-tower__panel-link {
  height: 20% !important;
}

/* =========================================================
   Исправление мобильной подготовки Башни
   Обязательно оставить в самом конце SCSS
   ========================================================= */
@media (max-width: 980px) {
  .mbf-abyss-tower--mobile {
    /*
     * Убираем фиксированную высоту всей мобильной страницы.
     * Теперь высота зависит от реального содержимого.
     */
    /* Фон башни остаётся только в верхней части */
    /* =====================================================
       Верхний левый блок
       ===================================================== */
    /* Этаж */
    /* Кристаллы */
    /* Кнопки */
    /* Награды верхнего блока */
    /* Этажи на башне */
    /* =====================================================
       Подготовка экспедиции
       ===================================================== */
    /* Маршрут больше не вылезает из своего контейнера */
    /* Отряд всегда начинается после маршрута */
    /* Прогноз и награды */
  }
  .mbf-abyss-tower--mobile.is-expedition-idle {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden;
  }
  .mbf-abyss-tower--mobile.is-expedition-idle .mbf-abyss-tower__mobile-stage {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    padding-top: 53vw;
    padding-bottom: 4vw;
    aspect-ratio: auto !important;
  }
  .mbf-abyss-tower--mobile.is-expedition-idle .mbf-abyss-tower__backdrop::before {
    height: 118vw !important;
    background-size: auto 106vw !important;
    background-position: center top !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__summary {
    top: 2.5vw !important;
    right: auto !important;
    bottom: auto !important;
    left: 2.8vw !important;
    width: 39.5vw !important;
    height: 46.5vw !important;
    padding: 0 !important;
    z-index: 6;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__summary-header {
    position: absolute !important;
    top: 3.5% !important;
    right: 5% !important;
    left: 5% !important;
    width: auto !important;
    height: 11% !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__summary-title {
    width: 100%;
    margin: 0 !important;
    overflow: hidden;
    font-size: 2.05vw !important;
    line-height: 1 !important;
    letter-spacing: 0.015em !important;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__summary-sigil {
    top: 3% !important;
    left: 3% !important;
    width: 16% !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__summary > .mbf-abyss-tower__ornament {
    position: absolute !important;
    top: 16.5% !important;
    right: 7% !important;
    left: 7% !important;
    width: auto !important;
    height: 1.1vw !important;
    margin: 0 !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__summary > .mbf-abyss-tower__ornament span {
    width: 1.05vw !important;
    height: 1.05vw !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__summary-floor {
    top: 20% !important;
    right: 5.5% !important;
    left: 5.5% !important;
    width: auto !important;
    height: 21.5% !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__summary-floor::before {
    width: auto !important;
    height: 88% !important;
    aspect-ratio: 1/1;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__summary-floor .mbf-abyss-tower__floor-caption {
    margin: 0 !important;
    font-size: 1.55vw !important;
    line-height: 1 !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__summary-floor .mbf-abyss-tower__floor-value {
    margin: 2px 0.15vw 0 0 !important;
    font-size: 4.55vw !important;
    line-height: 0.82 !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__summary-floor-diamond {
    width: 0.85vw !important;
    height: 0.85vw !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__summary-floor-diamond--left {
    left: 26% !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__summary-floor-diamond--right {
    right: 26% !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__summary-currency {
    top: 43.5% !important;
    right: 5.5% !important;
    left: 5.5% !important;
    width: auto !important;
    height: 12.5% !important;
    padding: 0 1.25vw 0 0.55vw !important;
    gap: 0.5vw !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__summary-currency-icon {
    width: 4.3vw !important;
    height: 90% !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__summary-currency-copy small {
    font-size: 1.48vw !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__summary-currency-copy strong {
    margin-top: 0.12vw !important;
    font-size: 2vw !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__summary-currency > i {
    font-size: 2.35vw !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__summary-actions {
    position: absolute !important;
    top: 57.2% !important;
    right: 5.5% !important;
    left: 5.5% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: auto !important;
    height: 8.8% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 1vw !important;
    z-index: 5 !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__leaders,
  .mbf-abyss-tower--mobile .mbf-abyss-tower__hq-button {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 0.75vw !important;
    gap: 0.38vw !important;
    font-size: 1.05vw !important;
    opacity: 1 !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__leaders svg,
  .mbf-abyss-tower--mobile .mbf-abyss-tower__hq-button svg {
    width: 1.75vw !important;
    height: 1.75vw !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__leaders > span,
  .mbf-abyss-tower--mobile .mbf-abyss-tower__hq-button > span {
    overflow: hidden;
    color: #e3e7ec !important;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 1 !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__leaders > i,
  .mbf-abyss-tower--mobile .mbf-abyss-tower__hq-button > i {
    margin: 0 !important;
    font-size: 1.9vw !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__floor-rewards {
    right: 5.5% !important;
    bottom: 4% !important;
    left: 5.5% !important;
    width: auto !important;
    height: 24.5% !important;
    padding: 0 !important;
    z-index: 2 !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__floor-rewards-title {
    height: 25% !important;
    margin: 0 !important;
    font-size: 1.45vw !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__floor-rewards-grid {
    position: absolute !important;
    top: 27% !important;
    right: 3% !important;
    bottom: 6% !important;
    left: 3% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    gap: 3% !important;
    align-items: center;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__small-reward {
    width: 95% !important;
    height: auto !important;
    aspect-ratio: 1/1;
    align-self: center;
    justify-self: center;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__small-reward-image {
    width: 86% !important;
    height: 86% !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__small-reward-amount {
    right: 3% !important;
    bottom: 2% !important;
    font-size: 1.35vw !important;
  }
  .mbf-abyss-tower--mobile.is-expedition-idle .mbf-abyss-tower__tower-levels {
    top: 0 !important;
    left: 36.5% !important;
    width: 30% !important;
    height: 52vw !important;
  }
  .mbf-abyss-tower--mobile.is-expedition-idle .mbf-abyss-tower__preparation--mobile {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: flex !important;
    width: calc(100% - 5.8vw) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 2.9vw !important;
    padding: 4vw 3.35vw 4.5vw !important;
    overflow: hidden !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__preparation--mobile > * {
    flex: 0 0 auto;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__preparation-header h2 {
    font-size: 4.15vw !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__preparation-header strong {
    margin-top: 0.8vw !important;
    font-size: 2.65vw !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__preparation--mobile .mbf-abyss-tower__prep-step {
    position: relative;
    width: 100%;
    margin-top: 3vw !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__prep-step-title {
    height: 3.8vw !important;
    font-size: 1.8vw !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__prep-step-title b {
    width: 3.5vw !important;
    height: 3.5vw !important;
    margin-right: 1.2vw !important;
    font-size: 1.9vw !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__option-grid {
    margin-top: 1.2vw !important;
    gap: 1.6vw !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__option {
    height: 7.2vw !important;
    font-size: 1.75vw !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__option strong {
    font-size: 2.65vw !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__option-grid--duration .mbf-abyss-tower__option {
    height: 6.5vw !important;
    font-size: 2.25vw !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__condition {
    grid-template-columns: 11vw minmax(0, 1fr) !important;
    width: 100% !important;
    height: auto !important;
    min-height: 16vw !important;
    margin-top: 1.2vw !important;
    overflow: hidden !important;
    align-items: stretch !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__condition-icon {
    width: 11vw !important;
    min-height: 16vw !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__route-choice {
    display: flex !important;
    min-width: 0;
    justify-content: center;
    padding: 1.4vw 1.5vw !important;
    gap: 1.1vw !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__route-choice > strong {
    font-size: 2vw !important;
    line-height: 1;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__route-choice > span {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.1vw !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__route-choice button {
    width: 100%;
    height: 7.2vw !important;
    min-height: 7.2vw !important;
    padding: 0 0.7vw !important;
    font-size: 2vw !important;
    line-height: 1;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__preparation--mobile > .mbf-abyss-tower__prep-squad {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 4vw !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__section-heading {
    position: relative;
    width: 100%;
    height: 4vw !important;
    margin: 0 !important;
    font-size: 2.05vw !important;
    z-index: 2;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__prep-cards {
    width: 100% !important;
    height: 31vw !important;
    margin-top: 1.3vw !important;
    gap: 1.5vw !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__prep-card {
    width: auto !important;
    height: 100% !important;
    min-width: 0 !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__prep-squad-actions {
    width: 82% !important;
    margin: 1.5vw auto 0 !important;
    gap: 3vw !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__prep-squad-actions button {
    height: 6vw !important;
    font-size: 1.75vw !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__prep-mobile-grid {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 0.95fr 1.05fr !important;
    width: 100% !important;
    min-height: 0 !important;
    margin-top: 3.5vw !important;
    gap: 1.5vw !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__preparation--mobile > .mbf-abyss-tower__send-squad {
    width: 100%;
    height: 10vw !important;
    margin-top: 3.5vw !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__preparation--mobile > .mbf-abyss-tower__send-squad span {
    font-size: 4vw !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__preparation--mobile > .mbf-abyss-tower__return-caption {
    margin-top: 1.2vw !important;
    padding-bottom: 0.5vw;
    font-size: 1.9vw !important;
  }
}
/* =========================================================
   Срочное исправление верхнего блока на мобильном
   ОБЯЗАТЕЛЬНО последний код в SCSS
   ========================================================= */
@media (max-width: 980px) {
  .mbf-abyss-tower--mobile {
    /*
     * Компактный декор под заголовком.
     * Убираем огромный ромб и диагональные хвосты.
     */
    /*
     * Старый span создавал крупный повёрнутый ромб,
     * а его линии превращались в длинные диагонали.
     */
    /*
     * Контейнер кнопок.
     * Flex здесь надёжнее старого grid из-за множества
     * предыдущих переопределений.
     */
    /*
     * Каждая кнопка занимает строго половину
     * доступного места с учётом промежутка.
     */
    /*
     * Запрещаем старым hover-стилям двигать кнопки.
     */
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__summary > .mbf-abyss-tower__ornament {
    position: absolute !important;
    top: 15.5% !important;
    right: 21% !important;
    left: 21% !important;
    width: auto !important;
    height: 4px !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__summary > .mbf-abyss-tower__ornament::before {
    top: 50% !important;
    right: 0 !important;
    left: 0 !important;
    width: auto !important;
    height: 1px !important;
    opacity: 0.65 !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__summary > .mbf-abyss-tower__ornament::after {
    top: 50% !important;
    left: 50% !important;
    width: 30px !important;
    height: 4px !important;
    opacity: 0.85 !important;
    transform: translate(-50%, -50%) !important;
    filter: drop-shadow(0 0 3px currentColor) !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__summary > .mbf-abyss-tower__ornament > span {
    display: none !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__summary-actions {
    position: absolute !important;
    top: 59.2% !important;
    right: 5.5% !important;
    left: 5.5% !important;
    display: flex !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    width: auto !important;
    height: 8.8% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 7px !important;
    -moz-column-gap: 7px !important;
         column-gap: 7px !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    -webkit-clip-path: none !important;
            clip-path: none !important;
    box-shadow: none !important;
    z-index: 10 !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__leaders,
  .mbf-abyss-tower--mobile .mbf-abyss-tower__hq-button {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: clamp(12px, 1.9vw, 16px) minmax(0, 1fr) clamp(7px, 1.1vw, 10px) !important;
    align-items: center !important;
    justify-content: initial !important;
    flex: 1 1 0 !important;
    width: calc(50% - 3.5px) !important;
    min-width: 0 !important;
    max-width: calc(50% - 3.5px) !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 clamp(5px, 0.8vw, 8px) !important;
    gap: clamp(3px, 0.45vw, 5px) !important;
    overflow: hidden !important;
    border-radius: 2px !important;
    -webkit-clip-path: none !important;
            clip-path: none !important;
    transform: none !important;
    box-sizing: border-box !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__leaders {
    border: 1px solid rgba(54, 190, 255, 0.8) !important;
    background: linear-gradient(105deg, rgba(19, 65, 98, 0.75), rgba(3, 13, 24, 0.97)) !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__hq-button {
    border: 1px solid rgba(177, 73, 255, 0.88) !important;
    background: linear-gradient(105deg, rgba(73, 20, 108, 0.72), rgba(4, 12, 24, 0.97)) !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__leaders svg,
  .mbf-abyss-tower--mobile .mbf-abyss-tower__hq-button svg {
    display: block !important;
    width: clamp(8px, 1.5vw, 12px) !important;
    height: clamp(8px, 1.5vw, 12px) !important;
    margin: 0 !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__leaders > span,
  .mbf-abyss-tower--mobile .mbf-abyss-tower__hq-button > span {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    color: #e7ebef !important;
    font-size: clamp(5px, 1vw, 8px) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.025em !important;
    text-align: center !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    opacity: 1 !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__leaders > i,
  .mbf-abyss-tower--mobile .mbf-abyss-tower__hq-button > i {
    display: block !important;
    margin: 0 !important;
    color: #cbd1d8 !important;
    font-size: clamp(12px, 1.9vw, 16px) !important;
    line-height: 1 !important;
    text-align: right !important;
    opacity: 1 !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__leaders:hover,
  .mbf-abyss-tower--mobile .mbf-abyss-tower__leaders:focus-visible,
  .mbf-abyss-tower--mobile .mbf-abyss-tower__hq-button:hover,
  .mbf-abyss-tower--mobile .mbf-abyss-tower__hq-button:focus-visible {
    transform: none !important;
  }
}
body.tower-squad-modal-open {
  overflow: hidden;
}

/*
|--------------------------------------------------------------------------
| Выбранный отряд на странице подготовки
|--------------------------------------------------------------------------
*/
.mbf-abyss-tower__prep-squad-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}
.mbf-abyss-tower__prep-squad-power {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #8f9cab;
  font-size: 14px;
  text-transform: uppercase;
}
.mbf-abyss-tower__prep-squad-power strong {
  color: #75d8ff;
  font-size: 23px;
  text-shadow: 0 0 12px rgba(40, 196, 255, 0.5);
}
.mbf-abyss-tower__squad-slots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}
.mbf-abyss-tower__squad-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-width: 0;
  aspect-ratio: 2/3;
  padding: 0;
  border: 1px solid rgba(64, 152, 207, 0.55);
  border-radius: 5px;
  color: #9ca8b4;
  background: linear-gradient(145deg, rgba(10, 27, 40, 0.96), rgba(2, 10, 17, 0.98));
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.mbf-abyss-tower__squad-slot:hover {
  border-color: #28c4ff;
  box-shadow: inset 0 0 22px rgba(40, 196, 255, 0.08), 0 0 15px rgba(40, 196, 255, 0.18);
  transform: translateY(-2px);
}
.mbf-abyss-tower__squad-slot.is-filled {
  border-color: #28c4ff;
  box-shadow: inset 0 0 18px rgba(40, 196, 255, 0.08), 0 0 12px rgba(40, 196, 255, 0.24);
}
.mbf-abyss-tower__squad-slot > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.mbf-abyss-tower__squad-slot-number {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-right: 1px solid rgba(80, 167, 220, 0.7);
  border-bottom: 1px solid rgba(80, 167, 220, 0.7);
  color: #dce9f2;
  background: rgba(1, 12, 20, 0.9);
  font-size: 20px;
  font-weight: 700;
}
.mbf-abyss-tower__squad-slot-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.mbf-abyss-tower__squad-slot-empty b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border: 1px solid rgba(40, 196, 255, 0.5);
  border-radius: 50%;
  color: #55ceff;
  font-size: 31px;
  font-weight: 300;
}
.mbf-abyss-tower__squad-slot-empty small {
  color: #81909e;
  font-size: 13px;
  text-transform: uppercase;
}
.mbf-abyss-tower__squad-slot-remove {
  position: absolute;
  z-index: 5;
  top: 7px;
  right: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 107, 107, 0.7);
  border-radius: 50%;
  color: #fff;
  background: rgba(79, 10, 15, 0.9);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

/*
|--------------------------------------------------------------------------
| Модалка выбора отряда
|--------------------------------------------------------------------------
*/
.mbf-tower-squad-modal {
  position: fixed;
  z-index: 10050;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.mbf-tower-squad-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.mbf-tower-squad-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 5, 10, 0.88);
  -webkit-backdrop-filter: blur(7px);
          backdrop-filter: blur(7px);
}
.mbf-tower-squad-modal__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(1380px, 96vw);
  max-height: 94vh;
  overflow: hidden;
  border: 1px solid rgba(72, 149, 199, 0.55);
  border-radius: 8px;
  color: #d7dde3;
  background: linear-gradient(145deg, rgba(12, 27, 40, 0.99), rgba(1, 8, 14, 0.99) 45%);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.75), inset 0 0 45px rgba(24, 105, 159, 0.07);
  transform: translateY(15px) scale(0.985);
  transition: transform 0.2s ease;
}
.mbf-tower-squad-modal.is-open .mbf-tower-squad-modal__dialog {
  transform: translateY(0) scale(1);
}
.mbf-tower-squad-modal__close {
  position: absolute;
  z-index: 5;
  top: 14px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(104, 147, 178, 0.55);
  border-radius: 4px;
  color: #b9c4cc;
  background: rgba(3, 12, 20, 0.9);
  font-size: 27px;
  cursor: pointer;
}
.mbf-tower-squad-modal__close:hover {
  border-color: #28c4ff;
  color: #fff;
}
.mbf-tower-squad-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 75px 18px 26px;
  border-bottom: 1px solid rgba(91, 137, 171, 0.3);
  background: rgba(2, 12, 20, 0.7);
}
.mbf-tower-squad-modal__header h2 {
  margin: 0 0 5px;
  color: #f0f3f5;
  font-size: 28px;
  text-transform: uppercase;
}
.mbf-tower-squad-modal__header p {
  margin: 0;
  color: #8e9ba6;
  font-size: 15px;
}
.mbf-tower-squad-modal__counter {
  flex: 0 0 auto;
  color: #82909c;
  font-size: 20px;
}
.mbf-tower-squad-modal__counter span {
  color: #5cd2ff;
  font-size: 32px;
}
.mbf-tower-squad-modal__selected {
  display: grid;
  grid-template-columns: repeat(4, 90px);
  justify-content: center;
  gap: 12px;
  padding: 14px 24px;
  border-bottom: 1px solid rgba(91, 137, 171, 0.2);
  background: rgba(0, 7, 13, 0.55);
}
.mbf-tower-squad-modal__selected-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 2/3;
  border: 1px dashed rgba(76, 148, 194, 0.55);
  border-radius: 4px;
  color: #657581;
  background: rgba(5, 18, 28, 0.85);
  font-size: 20px;
}
.mbf-tower-squad-modal__selected-slot.is-filled {
  border-style: solid;
  border-color: #28c4ff;
}
.mbf-tower-squad-modal__selected-slot img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.mbf-tower-squad-modal__selected-slot > span {
  position: absolute;
  z-index: 2;
  bottom: 3px;
  left: 5px;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 4px #000;
}
.mbf-tower-squad-modal__selected-slot button {
  position: absolute;
  z-index: 3;
  top: 3px;
  right: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  padding: 0;
  border: 1px solid rgba(255, 112, 112, 0.8);
  border-radius: 50%;
  color: #fff;
  background: rgba(70, 8, 13, 0.92);
  cursor: pointer;
}
.mbf-tower-squad-modal__inventory {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 22px;
}
.mbf-tower-squad-modal__inventory .card-inventory-container {
  margin: 0;
}
.mbf-tower-squad-modal__inventory .card-filter-list__card {
  position: relative;
  cursor: pointer;
  transition: transform 0.18s ease, filter 0.18s ease;
}
.mbf-tower-squad-modal__inventory .card-filter-list__card:hover {
  transform: translateY(-3px);
}
.mbf-tower-squad-modal__inventory .card-filter-list__card.tower-inventory-card--selected {
  filter: brightness(0.7);
}
.mbf-tower-squad-modal__inventory .card-filter-list__card.tower-inventory-card--selected::after {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #28c4ff;
  border-radius: inherit;
  color: #fff;
  background: rgba(0, 21, 34, 0.55);
  content: "✓";
  font-size: 48px;
  font-weight: 700;
  text-shadow: 0 0 12px #28c4ff;
  box-shadow: inset 0 0 25px rgba(40, 196, 255, 0.35), 0 0 14px rgba(40, 196, 255, 0.4);
}
.mbf-tower-squad-modal__footer {
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 16px 22px;
  border-top: 1px solid rgba(91, 137, 171, 0.3);
  background: rgba(1, 9, 15, 0.9);
}
.mbf-tower-squad-modal__footer button {
  min-width: 220px;
  min-height: 48px;
  border: 1px solid rgba(74, 145, 188, 0.7);
  color: #aab5be;
  background: rgba(3, 14, 23, 0.95);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}
.mbf-tower-squad-modal__footer button:hover:not(:disabled) {
  border-color: #28c4ff;
  color: #fff;
  box-shadow: 0 0 15px rgba(40, 196, 255, 0.2);
}
.mbf-tower-squad-modal__footer button[data-tower-confirm-squad] {
  border-color: #28c4ff;
  color: #fff;
  background: linear-gradient(180deg, rgba(17, 101, 143, 0.9), rgba(5, 43, 66, 0.95));
  box-shadow: inset 0 0 18px rgba(40, 196, 255, 0.14);
}
.mbf-tower-squad-modal__footer button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(0.7);
}

@media (max-width: 980px) {
  .mbf-abyss-tower__prep-squad-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .mbf-abyss-tower__squad-slots {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
  }
  .mbf-abyss-tower__squad-slot-number {
    width: 27px;
    height: 27px;
    font-size: 15px;
  }
  .mbf-abyss-tower__squad-slot-empty b {
    width: 31px;
    height: 31px;
    font-size: 23px;
  }
  .mbf-abyss-tower__squad-slot-empty small {
    display: none;
  }
  .mbf-abyss-tower__squad-slot-remove {
    width: 24px;
    height: 24px;
    font-size: 17px;
  }
  .mbf-tower-squad-modal {
    align-items: stretch;
    padding: 0;
  }
  .mbf-tower-squad-modal__dialog {
    width: 100%;
    max-height: 100%;
    border: 0;
    border-radius: 0;
  }
  .mbf-tower-squad-modal__header {
    padding: 17px 55px 14px 15px;
  }
  .mbf-tower-squad-modal__header h2 {
    font-size: 21px;
  }
  .mbf-tower-squad-modal__header p {
    font-size: 13px;
  }
  .mbf-tower-squad-modal__counter {
    font-size: 15px;
  }
  .mbf-tower-squad-modal__counter span {
    font-size: 24px;
  }
  .mbf-tower-squad-modal__selected {
    grid-template-columns: repeat(4, minmax(0, 70px));
    gap: 7px;
    padding: 10px;
  }
  .mbf-tower-squad-modal__inventory {
    padding: 10px;
  }
  .mbf-tower-squad-modal__footer {
    gap: 8px;
    padding: 10px;
  }
  .mbf-tower-squad-modal__footer button {
    min-width: 0;
    flex: 1 1 50%;
    min-height: 44px;
    font-size: 13px;
  }
}
.card-inventory-container--tower {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  color: #d6e0e8;
}
.card-inventory-container--tower .card-filter-form,
.card-inventory-container--tower .card-filter-form__wrapper {
  flex: 0 0 auto;
  margin: 0;
  background: transparent;
}
.card-inventory-container--tower .card-filter-form__menu {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 7px 4px;
  border-color: rgba(61, 126, 166, 0.35);
  color: #c6d1d9;
  background: #030d15;
  scrollbar-width: thin;
}
.card-inventory-container--tower .card-filter-form__ranks,
.card-inventory-container--tower .card-filter-form__controls-list,
.card-inventory-container--tower .card-filter-form__lock-status {
  flex: 0 0 auto;
}
.card-inventory-container--tower .card-filter-form button {
  color: #aebbc5;
  background: transparent;
}
.card-inventory-container--tower .card-filter-form button:hover {
  color: #fff;
  background: rgba(36, 155, 213, 0.12);
}
.card-inventory-container--tower .card-filter-form__btn--active,
.card-inventory-container--tower .card-filter-form__rank.card-filter-form__btn--active,
.card-inventory-container--tower .card-filter-form__lock.card-filter-form__btn--active {
  color: #fff;
  background: linear-gradient(180deg, #8739ec, #6521bc);
  box-shadow: 0 0 11px rgba(126, 53, 232, 0.27);
}
.card-inventory-container--tower .card-filter-form__decks {
  max-height: 150px;
  overflow-y: auto;
  border-color: rgba(60, 125, 165, 0.35);
  color: #bdc9d2;
  background: #07131d;
}
.card-inventory-container--tower .card-filter-form__decks-item {
  border-color: rgba(64, 118, 151, 0.25);
  color: #bdc9d2;
  background: #07131d;
}
.card-inventory-container--tower .card-filter-form__decks-item:hover {
  color: #fff;
  background: rgba(40, 196, 255, 0.1);
}
.card-inventory-container--tower .card-filter-form__controls {
  margin-top: 8px;
  border: 1px solid rgba(64, 128, 168, 0.38);
  border-radius: 5px;
  background: #07131d;
}
.card-inventory-container--tower .card-filter-form__search {
  border: 0;
  color: #dce6ed;
  background: #07131d;
}
.card-inventory-container--tower .card-filter-form__search::-moz-placeholder {
  color: #788995;
}
.card-inventory-container--tower .card-filter-form__search::placeholder {
  color: #788995;
}
.card-inventory-container--tower .card-filter-form__search-btn {
  color: #fff;
  background: #782bd8;
}
.card-inventory-container--tower .card-filter-list {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid rgba(62, 128, 168, 0.35);
  border-radius: 7px;
  background: #05111a;
}
.card-inventory-container--tower .card-filter-list__items {
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 13px;
  background: transparent;
  scrollbar-width: thin;
}
.card-inventory-container--tower .card-filter-list__card {
  position: relative;
  cursor: pointer;
  transition: transform 0.16s ease, filter 0.16s ease;
}
.card-inventory-container--tower .card-filter-list__card:hover {
  z-index: 3;
  transform: translateY(-3px);
}
.card-inventory-container--tower .card-filter-list__card.tower-inventory-card--selected {
  filter: brightness(0.58) saturate(0.85);
}
.card-inventory-container--tower .card-filter-list__card.tower-inventory-card--selected::after {
  position: absolute;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  border: 3px solid #28c4ff;
  border-radius: inherit;
  color: #fff;
  background: rgba(0, 20, 32, 0.48);
  content: "✓";
  font-size: 48px;
  font-weight: 800;
  pointer-events: none;
  text-shadow: 0 0 14px #28c4ff;
  box-shadow: inset 0 0 28px rgba(40, 196, 255, 0.34), 0 0 15px rgba(40, 196, 255, 0.38);
}
.card-inventory-container--tower .card-filter-list__battle-seal-line {
  border-color: rgba(60, 136, 190, 0.55);
  color: #8fc9ff;
  background: #081c2b;
}
.card-inventory-container--tower .card-filter-list__battle-stats-line > div {
  border-color: rgba(73, 127, 163, 0.4);
  color: #c8d4dc;
  background: #081722;
}
.card-inventory-container--tower .card-filter-list__battle-stats-line > div span {
  color: #8194a2;
}
.card-inventory-container--tower .card-filter-list__battle-stats-line > div strong {
  color: #212121;
}

.mbf-tower-squad-modal__dialog {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(1520px, 100vw - 28px);
  height: min(920px, 100vh - 28px);
  min-height: 0;
  overflow: hidden;
}
.mbf-tower-squad-modal__inventory {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 16px 22px;
}
.mbf-tower-squad-modal__footer {
  position: relative;
  z-index: 5;
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  gap: 15px;
  min-height: 84px;
  padding: 14px 22px;
  border-top: 1px solid rgba(83, 137, 174, 0.35);
  background: #020b12;
}
.mbf-tower-squad-modal__footer button {
  flex: 0 1 300px;
  min-width: 210px;
  min-height: 54px;
}

@media (max-width: 980px) {
  .mbf-tower-squad-modal {
    align-items: stretch;
    padding: 0;
  }
  .mbf-tower-squad-modal__dialog {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border: 0;
    border-radius: 0;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }
  .mbf-tower-squad-modal__header {
    min-height: 72px;
    padding: 13px 56px 11px 13px;
  }
  .mbf-tower-squad-modal__header h2 {
    font-size: 21px;
  }
  .mbf-tower-squad-modal__header p {
    font-size: 12px;
  }
  .mbf-tower-squad-modal__selected {
    grid-template-columns: repeat(4, minmax(0, 68px));
    min-height: 110px;
    gap: 6px;
    padding: 8px 7px;
  }
  .mbf-tower-squad-modal__selected-slot {
    width: 100%;
    max-width: 68px;
  }
  .mbf-tower-squad-modal__inventory {
    min-height: 0;
    padding: 7px;
  }
  .mbf-tower-squad-modal__footer {
    min-height: 65px;
    gap: 7px;
    padding: 8px;
  }
  .mbf-tower-squad-modal__footer button {
    flex: 1 1 50%;
    min-width: 0;
    min-height: 47px;
    padding: 7px;
    font-size: 12px;
  }
  .card-inventory-container--tower .card-filter-form__menu {
    padding: 5px 2px 7px;
  }
  .card-inventory-container--tower .card-filter-form__controls {
    margin-top: 6px;
  }
  .card-inventory-container--tower .card-filter-form__search {
    min-height: 42px;
    font-size: 14px;
  }
  .card-inventory-container--tower .card-filter-list {
    margin-top: 7px;
    border-radius: 5px;
  }
  .card-inventory-container--tower .card-filter-list__items {
    padding: 7px;
  }
  .card-inventory-container--tower .card-filter-list__card.tower-inventory-card--selected::after {
    border-width: 2px;
    font-size: 31px;
  }
  .mbf-abyss-tower__prep-squad-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    gap: 8px;
  }
  .mbf-abyss-tower__squad-slots {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
  }
  .mbf-abyss-tower__squad-slot-empty small {
    display: none;
  }
}
/* ==========================================================================
   Сохранённый отряд — правильное соотношение карт 2:3
   ========================================================================== */
.mbf-abyss-tower--desktop .mbf-abyss-tower__prep-squad-header {
  min-height: 1.35cqw;
  margin-bottom: 0.45cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__prep-squad-power {
  gap: 0.4cqw;
  font-size: 0.62cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__prep-squad-power strong {
  font-size: 1.05cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__squad-slots {
  display: grid;
  grid-template-columns: repeat(4, 8.35cqw);
  justify-content: center;
  gap: 0.7cqw;
  margin-bottom: 0.66cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__squad-slot {
  width: 8.35cqw;
  min-width: 0;
  height: auto;
  aspect-ratio: 2/3;
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__squad-slot > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__squad-slot-number {
  width: 1.52cqw;
  height: 1.52cqw;
  font-size: 0.78cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__squad-slot-empty {
  gap: 0.4cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__squad-slot-empty b {
  width: 2.25cqw;
  height: 2.25cqw;
  font-size: 1.55cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__squad-slot-empty small {
  font-size: 0.63cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__squad-slot-remove {
  top: 0.35cqw;
  right: 0.35cqw;
  width: 1.35cqw;
  height: 1.35cqw;
  font-size: 0.9cqw;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__prep-squad-actions {
  width: 78%;
  gap: 1.45cqw;
  margin: 0.66cqw auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.mbf-abyss-tower--desktop .mbf-abyss-tower__prep-squad-actions button {
  height: 2.05cqw;
  min-height: 0;
  padding: 0 0.7cqw;
  font-size: 0.68cqw;
}

@media (max-width: 980px) {
  .mbf-abyss-tower--mobile .mbf-abyss-tower__preparation--mobile > .mbf-abyss-tower__prep-squad {
    flex: 0 0 auto;
    min-height: 0;
    margin-top: 2.2vw;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__prep-squad-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    min-height: 3.8vw;
    margin-bottom: 0.9vw;
    gap: 2vw;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__prep-squad-power {
    gap: 1vw;
    font-size: 1.7vw;
    white-space: nowrap;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__prep-squad-power strong {
    font-size: 2.9vw;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__squad-slots {
    display: grid;
    grid-template-columns: repeat(4, 18.4vw);
    justify-content: center;
    gap: 1.65vw;
    margin-bottom: 1.35vw;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__squad-slot {
    width: 18.4vw;
    min-width: 0;
    height: auto;
    aspect-ratio: 2/3;
    padding: 0;
    overflow: hidden;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__squad-slot > img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__squad-slot-number {
    width: 3.7vw;
    height: 3.7vw;
    font-size: 2vw;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__squad-slot-empty {
    gap: 1vw;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__squad-slot-empty b {
    width: 6.5vw;
    height: 6.5vw;
    font-size: 4.8vw;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__squad-slot-empty small {
    display: none;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__squad-slot-remove {
    top: 0.8vw;
    right: 0.8vw;
    width: 4.7vw;
    height: 4.7vw;
    font-size: 3.2vw;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__prep-squad-actions {
    width: 82%;
    gap: 4.5vw;
    margin: 1.35vw auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__prep-squad-actions button {
    height: 5.9vw;
    min-height: 0;
    padding: 0 2vw;
    font-size: 1.8vw;
  }
}
/*
|--------------------------------------------------------------------------
| Заголовок четвёртого этапа — выбор отряда
|--------------------------------------------------------------------------
*/
.mbf-abyss-tower__prep-squad-header {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.mbf-abyss-tower__prep-step-title--squad {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
.mbf-abyss-tower__prep-step-title--squad::after {
  min-width: 20px;
}
.mbf-abyss-tower__prep-squad-power {
  display: flex;
  align-items: baseline;
  flex: 0 0 auto;
  margin-left: 12px;
  white-space: nowrap;
}
.mbf-abyss-tower__prep-squad-power span {
  color: #92979f;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.mbf-abyss-tower__prep-squad-power strong {
  color: #53ceff;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 0 10px rgba(40, 196, 255, 0.4);
}

@media (min-width: 981px) {
  .mbf-abyss-tower--desktop .mbf-abyss-tower__prep-squad-header {
    height: 1.18cqw;
    margin-bottom: 0.48cqw;
  }
  .mbf-abyss-tower--desktop .mbf-abyss-tower__prep-squad-power {
    gap: 0.34cqw;
    margin-left: 0.65cqw;
  }
  .mbf-abyss-tower--desktop .mbf-abyss-tower__prep-squad-power span {
    font-size: 0.58cqw;
  }
  .mbf-abyss-tower--desktop .mbf-abyss-tower__prep-squad-power strong {
    font-size: 1.05cqw;
  }
}
@media (max-width: 980px) {
  .mbf-abyss-tower--mobile .mbf-abyss-tower__prep-squad-header {
    display: flex;
    align-items: center;
    flex-direction: row;
    width: 100%;
    height: 3.5vw;
    min-height: 3.5vw;
    margin-bottom: 1.05vw;
    gap: 0;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__prep-step-title--squad {
    flex: 1 1 auto;
    width: auto;
    height: 3.5vw;
    min-width: 0;
    font-size: 1.87vw;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__prep-step-title--squad b {
    width: 3.45vw;
    height: 3.45vw;
    margin-right: 1.2vw;
    font-size: 2vw;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__prep-step-title--squad::after {
    min-width: 2vw;
    margin-left: 1.2vw;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__prep-squad-power {
    align-items: baseline;
    gap: 1vw;
    margin-left: 1.3vw;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__prep-squad-power span {
    font-size: 1.55vw;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__prep-squad-power strong {
    font-size: 2.9vw;
  }
}
@media (min-width: 981px) {
  .mbf-abyss-tower--desktop .mbf-abyss-tower__prep-squad-header {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 1.35cqw;
    margin-bottom: 0.55cqw;
    -moz-column-gap: 0.75cqw;
         column-gap: 0.75cqw;
  }
  .mbf-abyss-tower--desktop .mbf-abyss-tower__command-section-title {
    display: flex;
    align-items: center;
    min-width: 0;
    color: #aeb4bb;
    font-size: 0.72cqw;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }
  .mbf-abyss-tower--desktop .mbf-abyss-tower__command-section-title::before, .mbf-abyss-tower--desktop .mbf-abyss-tower__command-section-title::after {
    flex: 1 1 auto;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, rgba(83, 118, 146, 0.08), rgba(83, 118, 146, 0.55));
  }
  .mbf-abyss-tower--desktop .mbf-abyss-tower__command-section-title::before {
    margin-right: 0.65cqw;
  }
  .mbf-abyss-tower--desktop .mbf-abyss-tower__command-section-title::after {
    margin-left: 0.65cqw;
    background: linear-gradient(90deg, rgba(83, 118, 146, 0.55), rgba(83, 118, 146, 0.08));
  }
  .mbf-abyss-tower--desktop .mbf-abyss-tower__command-section-title span {
    flex: 0 0 auto;
  }
  .mbf-abyss-tower--desktop .mbf-abyss-tower__prep-squad-power {
    display: flex;
    align-items: baseline;
    gap: 0.35cqw;
    margin: 0;
    white-space: nowrap;
  }
  .mbf-abyss-tower--desktop .mbf-abyss-tower__prep-squad-power span {
    color: #92979f;
    font-size: 0.58cqw;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .mbf-abyss-tower--desktop .mbf-abyss-tower__prep-squad-power strong {
    color: #53ceff;
    font-size: 1.05cqw;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 0 10px rgba(40, 196, 255, 0.4);
  }
}
/* =========================================================
   HQ — финальные отступы и более аккуратная типографика
   ========================================================= */
@media (min-width: 981px) {
  .mbf-tower-hq {
    /*
     * 1. "ВЫБЕРИТЕ УСИЛЕНИЕ"
     * Делаем нормальный воздух сверху/снизу.
     */
    /*
     * 2. Верхние бонусы:
     * +27
     * Натиск
     *
     * Добавляем воздух между иконкой / цифрой / названием.
     */
    /*
     * 3. Левый блок "Знамя похода / Ранг"
     * Заголовок теперь центрирован относительно самого блока ранга.
     */
    /*
     * 4. Карточки улучшений снизу.
     * Иконка больше не прилипает к верхнему краю,
     * а название становится компактнее.
     */
  }
  .mbf-tower-hq__panel[data-tower-hq-panel=banner] {
    grid-template-rows: 250px 86px minmax(0, 1fr);
  }
  .mbf-tower-hq__section-title {
    min-height: 86px;
    padding: 18px 0 17px;
  }
  .mbf-tower-hq__section-title h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.05;
    letter-spacing: 0.1em;
  }
  .mbf-tower-hq__section-title p {
    margin: 7px 0 0;
    font-size: 12px;
    line-height: 1.2;
  }
  .mbf-tower-hq__active-bonus {
    justify-content: center;
  }
  .mbf-tower-hq__active-bonus .mbf-tower-hq__upgrade-icon {
    width: 64px;
    height: 68px;
    margin: 4px 0 7px;
  }
  .mbf-tower-hq__active-bonus strong {
    display: block;
    margin: 2px 0 5px;
    font-size: 18px;
    line-height: 1;
  }
  .mbf-tower-hq__active-bonus small {
    display: block;
    font-size: 10px;
    line-height: 1.15;
  }
  .mbf-tower-hq__banner-rank {
    padding: 16px 17px 14px;
  }
  .mbf-tower-hq__banner-rank h3 {
    align-self: center;
    margin: 0 0 16px;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0.08em;
    text-align: center;
  }
  .mbf-tower-hq__banner-rank > span {
    margin-bottom: 4px;
    font-size: 13px;
    line-height: 1;
  }
  .mbf-tower-hq__banner-rank > strong {
    margin: 2px 0 4px;
    font-size: 52px;
    line-height: 0.9;
  }
  .mbf-tower-hq__banner-rank > b {
    font-size: 13px;
    line-height: 1;
  }
  .mbf-tower-hq__banner-rank > small {
    margin-top: 7px;
    font-size: 12px;
    line-height: 1.1;
  }
  .mbf-tower-hq__rank-line {
    margin: 8px auto 7px;
  }
  .mbf-tower-hq__upgrade {
    grid-template-rows: 116px 25px 32px 29px 28px 38px;
    padding: 12px 10px 10px;
  }
  .mbf-tower-hq__upgrade > .mbf-tower-hq__upgrade-icon {
    align-self: center;
    width: 100px;
    height: 100px;
    margin: 5px 0 9px;
  }
  .mbf-tower-hq__upgrade h4 {
    align-self: center;
    margin: 0;
    font-size: 15px;
    line-height: 1.05;
    letter-spacing: 0.035em;
  }
  .mbf-tower-hq__upgrade p {
    font-size: 11px;
    line-height: 1.15;
  }
  .mbf-tower-hq__upgrade > small {
    margin-top: 4px;
    padding: 5px 0;
    font-size: 10px;
  }
  .mbf-tower-hq__upgrade button {
    font-size: 13px;
  }
  .mbf-tower-hq__upgrade-cost {
    font-size: 15px;
  }
  .mbf-tower-hq__upgrade-cost img {
    width: 22px;
    height: 22px;
  }
}
/* =========================================================
   HQ — финальные правки шапки и знамени
   ========================================================= */
@media (min-width: 981px) {
  .mbf-tower-hq {
    /* -----------------------------------------
       1. Заголовок "ШТАБ ЗНАМЕНИ"
       ----------------------------------------- */
    /* -----------------------------------------
       2. Отступ между заголовком и табами
       ----------------------------------------- */
    /* -----------------------------------------
       3. Блок со знаменем
       ----------------------------------------- */
  }
  .mbf-tower-hq__header {
    min-height: 78px;
    padding-top: 10px;
    padding-bottom: 14px;
  }
  .mbf-tower-hq__header > div:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .mbf-tower-hq__header h2 {
    margin: 0;
    font-size: 31px;
    line-height: 1;
  }
  .mbf-tower-hq__header p {
    margin: 7px 0 0;
    font-size: 13px;
    line-height: 1.15;
  }
  .mbf-tower-hq__tabs {
    margin-top: 8px;
    margin-bottom: 12px;
  }
  .mbf-tower-hq__banner-art {
    position: relative;
    overflow: hidden;
    /*
     * небольшой внутренний воздух,
     * чтобы древко/ткань не касались рамки
     */
    padding: 14px 0 12px;
  }
  .mbf-tower-hq__banner-art img {
    top: 50% !important;
    left: 50%;
    width: 72% !important;
    height: 92% !important;
    -o-object-fit: contain;
       object-fit: contain;
    transform: translate(-50%, -50%) !important;
  }
}
@media (max-width: 560px) {
  .mbf-tower-hq {
    /* =========================
       ШАПКА
       ========================= */
    /* =========================
       ВАЛЮТА
       теперь НЕ absolute
       ========================= */
    /* =========================
       КРЕСТИК
       ========================= */
    /* =========================
       ТАБЫ
       ========================= */
    /* =========================
       ЗНАМЯ + РАНГ
       две колонки
       ========================= */
  }
  .mbf-tower-hq__header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding: 18px 52px 12px !important;
    text-align: center !important;
  }
  .mbf-tower-hq__header > div:first-child {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
  }
  .mbf-tower-hq__header h2 {
    margin: 0 !important;
    font-size: 27px !important;
    line-height: 1 !important;
    letter-spacing: 0.035em;
    text-align: center !important;
    white-space: nowrap !important;
  }
  .mbf-tower-hq__header p {
    width: auto !important;
    max-width: none !important;
    margin: 7px 0 0 !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }
  .mbf-tower-hq__currency {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 138px !important;
    min-width: 138px !important;
    height: 40px !important;
    margin: 12px auto 0 !important;
    padding: 0 10px !important;
  }
  .mbf-tower-hq__currency img {
    width: 30px !important;
    height: 30px !important;
  }
  .mbf-tower-hq__currency strong {
    margin-left: 7px !important;
    font-size: 19px !important;
  }
  .mbf-tower-hq__close {
    top: 16px !important;
    right: 14px !important;
    width: 32px !important;
    height: 32px !important;
  }
  .mbf-tower-hq__tabs {
    width: calc(100% - 16px) !important;
    height: 44px !important;
    margin: 4px auto 12px !important;
    gap: 6px !important;
  }
  .mbf-tower-hq__tabs button {
    height: 44px !important;
    min-width: 0 !important;
    padding: 0 6px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    letter-spacing: 0.07em !important;
  }
  .mbf-tower-hq__banner-overview {
    display: grid !important;
    grid-template-columns: 42% 58% !important;
  }
  .mbf-tower-hq__banner-art {
    min-height: 205px !important;
    height: 205px !important;
    padding: 12px 0 !important;
  }
  .mbf-tower-hq__banner-art img {
    top: 50% !important;
    left: 50% !important;
    width: 74% !important;
    height: 86% !important;
    -o-object-fit: contain !important;
       object-fit: contain !important;
    transform: translate(-50%, -50%) !important;
  }
  .mbf-tower-hq__banner-rank {
    min-height: 205px !important;
    padding: 14px 10px !important;
    border-top: 0 !important;
    border-left: 1px solid rgba(72, 95, 115, 0.45) !important;
  }
  .mbf-tower-hq__banner-rank h3 {
    align-self: center !important;
    margin: 0 0 12px !important;
    font-size: 16px !important;
    text-align: center !important;
  }
  .mbf-tower-hq__banner-rank > span {
    font-size: 10px !important;
  }
  .mbf-tower-hq__banner-rank > strong {
    font-size: 38px !important;
    line-height: 0.9 !important;
  }
  .mbf-tower-hq__banner-rank > b, .mbf-tower-hq__banner-rank > small {
    font-size: 10px !important;
  }
  .mbf-tower-hq__rank-line {
    width: 84% !important;
    height: 7px !important;
    margin: 6px auto 5px !important;
  }
}
/* =========================================================
   HQ — аккуратная вкладка "ПРИКАЗЫ"
   DESKTOP
   ========================================================= */
@media (min-width: 981px) {
  .mbf-tower-hq {
    /* Вся вкладка */
    /* ==========================================
       Верхний блок
       картинка / текущий приказ / эффекты / ранг
       ========================================== */
    /* Картинка слева */
    /* ==========================================
       ТЕКУЩИЙ ПРИКАЗ
       ========================================== */
    /* ==========================================
       БОНУС / ШТРАФ
       ========================================== */
    /* ==========================================
       РАНГ / ОТКРЫТО
       ========================================== */
    /* ==========================================
       "ВЫБЕРИТЕ ПРИКАЗ"
       ========================================== */
    /* ==========================================
       КАРТОЧКИ ПРИКАЗОВ
       ========================================== */
    /* Иконка */
    /* Название */
    /* Подпись */
    /* Бонус / штраф */
    /* Условие открытия */
    /* Кнопка внутри карточки */
    /* ==========================================
       СОХРАНИТЬ
       ========================================== */
  }
  .mbf-tower-hq__panel[data-tower-hq-panel=orders] {
    grid-template-rows: 205px 64px minmax(0, 1fr) 44px 20px !important;
  }
  .mbf-tower-hq__order-overview {
    grid-template-columns: 24% 28% minmax(0, 1fr) 20% !important;
    min-height: 205px;
  }
  .mbf-tower-hq__order-art {
    min-height: 205px;
    padding: 12px;
  }
  .mbf-tower-hq__order-art img {
    top: 50% !important;
    left: 50% !important;
    width: 88% !important;
    height: 92% !important;
    -o-object-fit: contain !important;
       object-fit: contain !important;
    transform: translate(-50%, -50%) !important;
  }
  .mbf-tower-hq__order-current {
    justify-content: center;
    padding: 20px 18px !important;
  }
  .mbf-tower-hq__order-current h3 {
    margin: 0 0 5px !important;
    font-size: 21px !important;
    line-height: 1;
    letter-spacing: 0.06em;
  }
  .mbf-tower-hq__order-current p {
    margin: 0 0 auto !important;
    font-size: 12px !important;
    line-height: 1.2;
  }
  .mbf-tower-hq__order-current > span {
    margin-top: 14px;
    font-size: 11px !important;
    line-height: 1;
  }
  .mbf-tower-hq__order-current > strong {
    margin-top: 6px;
    font-size: 28px !important;
    line-height: 1;
  }
  .mbf-tower-hq__order-effects {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 20px 24px !important;
  }
  .mbf-tower-hq__order-effects strong, .mbf-tower-hq__order-effects b {
    font-size: 16px !important;
    line-height: 1.15;
  }
  .mbf-tower-hq__order-effects b {
    margin-top: 10px !important;
  }
  .mbf-tower-hq__order-effects small {
    margin-top: auto;
    font-size: 10px !important;
    line-height: 1.2;
    text-align: center;
  }
  .mbf-tower-hq__order-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 18px 14px !important;
    text-align: center;
  }
  .mbf-tower-hq__order-rank > strong {
    font-size: 16px !important;
    line-height: 1;
  }
  .mbf-tower-hq__order-rank > span {
    margin: 10px 0 12px !important;
    font-size: 13px !important;
  }
  .mbf-tower-hq__order-rank > small {
    font-size: 10px !important;
    line-height: 1.25;
  }
  .mbf-tower-hq__panel[data-tower-hq-panel=orders] .mbf-tower-hq__section-title {
    min-height: 64px;
    padding: 17px 0 15px;
  }
  .mbf-tower-hq__panel[data-tower-hq-panel=orders] .mbf-tower-hq__section-title h3 {
    margin: 0;
    font-size: 19px !important;
    line-height: 1;
    letter-spacing: 0.1em;
  }
  .mbf-tower-hq__order-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-content: start;
  }
  .mbf-tower-hq__order {
    grid-template-rows: 88px 24px 18px 21px 21px 20px 34px !important;
    min-height: 0 !important;
    padding: 9px 10px 9px !important;
  }
  .mbf-tower-hq__order > .mbf-tower-hq__order-icon {
    align-self: center;
    width: 98px !important;
    height: 88px !important;
    margin: 2px 0 5px;
  }
  .mbf-tower-hq__order > strong {
    font-size: 16px !important;
    line-height: 1;
  }
  .mbf-tower-hq__order > small {
    font-size: 10px !important;
    line-height: 1.1;
  }
  .mbf-tower-hq__order > b, .mbf-tower-hq__order > em {
    margin-top: 3px !important;
    font-size: 11px !important;
    line-height: 1.1;
  }
  .mbf-tower-hq__order > i {
    margin: 3px 0 !important;
    font-size: 9px !important;
    line-height: 1;
  }
  .mbf-tower-hq__order-action {
    height: 34px !important;
    font-size: 12px !important;
  }
  .mbf-tower-hq__save-order {
    width: 360px !important;
    height: 40px !important;
    margin-top: 4px !important;
    font-size: 15px !important;
  }
  .mbf-tower-hq__save-caption {
    margin-top: 3px !important;
    font-size: 10px !important;
  }
}
.mbf-tower-result__squad {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 10px;
}
.mbf-tower-result__squad-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(65, 109, 140, 0.48);
  border-radius: 5px;
  background: #03101a;
}
.mbf-tower-result__squad-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 2/3;
  overflow: hidden;
}
.mbf-tower-result__squad-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.mbf-tower-result__squad-card-level {
  position: absolute;
  right: 5px;
  bottom: 5px;
  display: flex;
  align-items: baseline;
  padding: 3px 6px;
  gap: 3px;
  border: 1px solid rgba(175, 78, 255, 0.8);
  border-radius: 4px;
  background: rgba(27, 8, 42, 0.94);
  box-shadow: 0 0 9px rgba(173, 87, 255, 0.5);
}
.mbf-tower-result__squad-card-level small {
  color: #cda7ee;
  font-size: 7px;
}
.mbf-tower-result__squad-card-level strong {
  position: static !important;
  color: #fff !important;
  font-size: 13px !important;
  line-height: 1;
  text-shadow: none !important;
}
.mbf-tower-result__squad-card-xp {
  padding: 5px 6px;
}
.mbf-tower-result__squad-card-xp > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 4px;
}
.mbf-tower-result__squad-card-xp > div span {
  color: #6f8494;
  font-size: 7px;
  text-transform: uppercase;
}
.mbf-tower-result__squad-card-xp > div strong {
  color: #d4b5ff;
  font-size: 8px;
  white-space: nowrap;
}
.mbf-tower-result__squad-card-xp > span {
  display: block;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(86, 110, 128, 0.27);
}
.mbf-tower-result__squad-card-xp > span i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #8238c9, #b054ff, #31c6ff);
  box-shadow: 0 0 6px rgba(173, 87, 255, 0.55);
}
.mbf-tower-result__squad-card-xp > small {
  display: block;
  margin-top: 4px;
  color: #ba6cff;
  font-size: 7px;
  font-weight: 700;
  text-align: right;
}
.mbf-tower-result__squad-card-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(72, 111, 139, 0.25);
}
.mbf-tower-result__squad-card-stats > span {
  display: flex;
  align-items: center;
  flex-direction: column;
  min-width: 0;
  padding: 5px 1px;
}
.mbf-tower-result__squad-card-stats > span:not(:last-child) {
  border-right: 1px solid rgba(72, 111, 139, 0.2);
}
.mbf-tower-result__squad-card-stats small {
  color: #607686;
  font-size: 6px;
}
.mbf-tower-result__squad-card-stats strong {
  margin-top: 2px;
  color: #d0d9df;
  font-size: 8px;
  line-height: 1;
}

body.b-tower .common-confirm__overlay {
  background: rgba(0, 4, 9, 0.78);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
body.b-tower .common-confirm__modal {
  width: min(92vw, 470px);
  padding: 34px 34px 30px;
  border: 1px solid rgba(116, 85, 177, 0.55);
  border-radius: 10px;
  color: #d8d8df;
  background: radial-gradient(circle at 50% 0, rgba(126, 48, 191, 0.16), transparent 42%), linear-gradient(145deg, #0a111a, #030910 65%, #050712);
  box-shadow: inset 0 0 0 1px rgba(105, 143, 174, 0.08), inset 0 0 45px rgba(11, 1, 25, 0.38), 0 30px 80px rgba(0, 0, 0, 0.72), 0 0 30px rgba(139, 58, 214, 0.12);
}
body.b-tower .common-confirm__icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 22px;
  border: 1px solid rgba(184, 92, 255, 0.72);
  border-radius: 8px;
  color: #cb76ff;
  background: linear-gradient(145deg, rgba(111, 39, 169, 0.4), rgba(28, 11, 48, 0.86));
  box-shadow: inset 0 0 20px rgba(180, 74, 255, 0.13), 0 0 18px rgba(170, 66, 255, 0.22);
}
body.b-tower .common-confirm__icon svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.b-tower .common-confirm__title {
  margin-bottom: 12px;
  color: #eeeeF2;
  font-family: "MBFTowerCondensed", "Arial Narrow", Arial, sans-serif;
  font-size: 29px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-shadow: 0 2px 4px #000, 0 0 16px rgba(164, 75, 234, 0.16);
}
body.b-tower .common-confirm__text {
  max-width: 380px;
  margin: 0 auto 28px;
  color: #969ba5;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}
body.b-tower .common-confirm__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
body.b-tower .common-confirm__button {
  min-height: 48px;
  border-radius: 3px;
  font-family: "MBFTowerCondensed", "Arial Narrow", Arial, sans-serif;
  font-size: 16px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
body.b-tower .common-confirm__button:active {
  transform: translateY(1px);
}
body.b-tower .common-confirm__button--cancel {
  border: 1px solid rgba(90, 119, 145, 0.48);
  color: #a4aab2;
  background: linear-gradient(180deg, rgba(17, 28, 39, 0.92), rgba(5, 12, 19, 0.96));
}
body.b-tower .common-confirm__button--cancel:hover {
  border-color: rgba(118, 153, 184, 0.78);
  color: #e0e4e8;
  background: rgba(18, 31, 43, 0.96);
}
body.b-tower .common-confirm__button--confirm {
  border: 1px solid rgba(188, 91, 255, 0.88);
  color: #fff;
  background: linear-gradient(180deg, #842cd1, #53168f);
  box-shadow: inset 0 0 18px rgba(220, 146, 255, 0.17), 0 0 18px rgba(150, 54, 225, 0.25);
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.65);
}
body.b-tower .common-confirm__button--confirm:hover {
  border-color: #d08aff;
  background: linear-gradient(180deg, #9b3fe2, #6420a4);
  box-shadow: inset 0 0 20px rgba(230, 174, 255, 0.2), 0 0 24px rgba(170, 72, 238, 0.34);
}

/* =========================================================
   ЕДИНАЯ КАРТОЧКА БАШНИ — FINAL
   ========================================================= */
.mbf-tower-card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: #020a11;
  font-family: "MBFTowerCondensed", "Arial Narrow", Arial, sans-serif;
  /*
   * Изображение занимает всю карточку.
   */
  /*
   * Лёгкое затемнение под нижним HUD.
   */
  /* ======================================
     УРОВЕНЬ — ВЕРХНИЙ ЛЕВЫЙ УГОЛ
     ====================================== */
  /* ======================================
     HUD
     ====================================== */
  /* ======================================
     ЗАКАЛКА
     ====================================== */
  /* ======================================
     ATK / HP / CRIT
     ====================================== */
}
.mbf-tower-card__visual {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.mbf-tower-card__image {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.mbf-tower-card__visual::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 23%;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(2, 8, 14, 0.42) 18%, rgba(2, 8, 14, 0.88) 48%, #020a11 100%);
}
.mbf-tower-card__level {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34%;
  height: 13%;
  padding: 0 6%;
  gap: 4px;
  border: 0;
  border-right: 1px solid rgba(199, 104, 255, 0.92);
  border-bottom: 1px solid rgba(199, 104, 255, 0.92);
  border-radius: 0 0 7px 0;
  background: linear-gradient(135deg, rgba(94, 29, 137, 0.98), rgba(55, 12, 83, 0.98) 58%, rgba(31, 8, 47, 0.98));
  box-shadow: 4px 4px 12px rgba(134, 44, 201, 0.32), inset 0 -1px 8px rgba(219, 157, 255, 0.09);
}
.mbf-tower-card__level small {
  color: #d9b8f5;
  font-size: clamp(8px, 0.43vw, 10px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
.mbf-tower-card__level b {
  color: #fff;
  font-size: clamp(14px, 0.78vw, 19px);
  font-weight: 850;
  line-height: 1;
  text-shadow: 0 1px 2px #000, 0 0 5px rgba(205, 137, 255, 0.25);
}
.mbf-tower-card__hud {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  background: linear-gradient(180deg, rgba(3, 13, 21, 0.91), rgba(2, 9, 15, 0.99));
  border-top: 1px solid rgba(56, 134, 177, 0.34);
  box-shadow: 0 -6px 15px rgba(0, 0, 0, 0.22);
}
.mbf-tower-card__xp {
  display: block;
  padding: 4% 5% 4%;
}
.mbf-tower-card__xp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 4%;
  gap: 5px;
}
.mbf-tower-card__xp-head small {
  color: #8ca0b0;
  font-size: clamp(8px, 0.42vw, 10px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}
.mbf-tower-card__xp-head b {
  color: #e2c5ff;
  font-size: clamp(9px, 0.47vw, 11px);
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}
.mbf-tower-card__xp-head b i {
  margin: 0 2px;
  color: #637b8c;
  font-style: normal;
}
.mbf-tower-card__xp-track {
  display: block;
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(58, 79, 96, 0.72);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.85);
}
.mbf-tower-card__xp-track > i {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #8f3ed8 0%, #b958ff 58%, #35cbff 100%);
  box-shadow: 0 0 7px rgba(171, 77, 255, 0.8);
  transition: width 0.2s ease;
}
.mbf-tower-card__stats {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(75, 121, 151, 0.29);
}
.mbf-tower-card__stats > span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 4% 2% 5%;
  flex-direction: column;
}
.mbf-tower-card__stats > span:not(:last-child) {
  border-right: 1px solid rgba(75, 121, 151, 0.25);
}
.mbf-tower-card__stats small {
  color: #8499a9;
  font-size: clamp(8px, 0.4vw, 10px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.025em;
}
.mbf-tower-card__stats b {
  margin-top: 4px;
  color: #d4dfe6;
  font-size: clamp(10px, 0.52vw, 13px);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.mbf-tower-card__stats > span:nth-child(1) b {
  color: #e4b5ff;
}
.mbf-tower-card__stats > span:nth-child(2) b {
  color: #78dcff;
}
.mbf-tower-card__stats > span:nth-child(3) b {
  color: #e0e5e9;
}

/* =========================================================
   ПОДГОТОВКА — геометрия остаётся 2:3
   ========================================================= */
@media (min-width: 981px) {
  .mbf-abyss-tower--desktop .mbf-abyss-tower__squad-slot.is-filled {
    position: relative !important;
    width: 8.35cqw !important;
    height: auto !important;
    aspect-ratio: 2/3 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(40, 196, 255, 0.72) !important;
    border-radius: 8px !important;
    background: #020a11 !important;
  }
}
/* =========================================================
   АКТИВНАЯ ЭКСПЕДИЦИЯ
   Размер остаётся таким же, как был в макете.
   ========================================================= */
@media (min-width: 981px) {
  .mbf-abyss-tower--desktop .mbf-abyss-tower__card {
    position: relative !important;
    width: 9.4cqw !important;
    height: auto !important;
    aspect-ratio: 2/3 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 8px !important;
  }
}
/* =========================================================
   ФИНАЛЬНЫЙ ОТЧЁТ
   Убираем влияние древнего CSS на новую карточку.
   ========================================================= */
.mbf-tower-result {
  /*
   * Только непосредственная карточка имеет 2:3.
   */
  /*
   * На всякий случай полностью отменяем старые
   * правила результата внутри нашей новой карточки.
   */
}
.mbf-tower-result__squad {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: start !important;
  width: 100% !important;
  min-height: 0 !important;
  gap: 10px !important;
}
.mbf-tower-result__squad > .mbf-tower-result__squad-item {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 2/3 !important;
  overflow: hidden !important;
  border: 1px solid rgba(71, 126, 158, 0.62) !important;
  border-radius: 5px !important;
  background: #020a11 !important;
}
.mbf-tower-result__squad-item .mbf-tower-card {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  border: 0 !important;
  background: #020a11 !important;
}
.mbf-tower-result__card-gain {
  position: absolute !important;
  z-index: 8 !important;
  top: 2% !important;
  right: 4% !important;
  left: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 3px 6px !important;
  color: #dcb5ff !important;
  border: 1px solid rgba(183, 82, 255, 0.65) !important;
  border-radius: 4px !important;
  background: rgba(33, 8, 49, 0.92) !important;
  font-size: 8px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  white-space: nowrap;
  pointer-events: none;
}

/* =========================================================
   МОБИЛЬНЫЙ
   ========================================================= */
@media (max-width: 980px) {
  .mbf-tower-card__level small {
    font-size: 1.45vw;
  }
  .mbf-tower-card__level b {
    font-size: 2.35vw;
  }
  .mbf-tower-card__xp-head small {
    font-size: 1.4vw;
  }
  .mbf-tower-card__xp-head b {
    font-size: 1.55vw;
  }
  .mbf-tower-card__xp-track {
    height: 0.65vw;
  }
  .mbf-tower-card__stats small {
    font-size: 1.25vw;
  }
  .mbf-tower-card__stats b {
    margin-top: 0.55vw;
    font-size: 1.55vw;
  }
}
.mbf-tower-leaders.is-loading .mbf-tower-leaders__tabs {
  opacity: 0.7;
}
.mbf-tower-leaders__loading, .mbf-tower-leaders__empty {
  display: flex;
  min-height: 150px;
  padding: 30px;
  align-items: center;
  justify-content: center;
  color: #8f9299;
  font-size: 15px;
  text-align: center;
}
.mbf-tower-leaders__no-reward {
  display: flex;
  width: 100%;
  min-height: 55px;
  align-items: center;
  justify-content: center;
  color: #737982;
  font-size: 20px;
}

body.is-tower-modal-open {
  overflow: hidden;
}

.card-inventory-container--tower .card-filter-list__items {
  height: 100%;
  min-height: 0;
  align-content: start;
  grid-auto-rows: max-content;
  row-gap: 78px;
  overflow-x: hidden;
  overflow-y: auto;
  /*
   * 13px обычный padding +
   * место под seal + ATK/HP/CRIT последней строки.
   */
  padding: 13px 13px 78px !important;
}

.mbf-abyss-tower__squad-card-image > img,
.mbf-abyss-tower__squad-card-image > video,
.mbf-abyss-tower__squad-card-image > .mbf-abyss-tower__squad-card-media {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.mbf-abyss-tower__squad-card-image > video {
  pointer-events: none;
}

.mbf-tower-squad-modal__selected-slot > img,
.mbf-tower-squad-modal__selected-slot > video {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.mbf-tower-squad-modal__selected-slot > video {
  pointer-events: none;
}

.mbf-abyss-tower .mbf-tower-card__visual > img,
.mbf-abyss-tower .mbf-tower-card__visual > video {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.mbf-abyss-tower .mbf-tower-card__visual > video {
  pointer-events: none;
}

.mbf-tower-result--v2 .mbf-tower-result__floor-change {
  display: grid;
  align-items: stretch;
  margin-top: 4px;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.9fr) minmax(0, 1fr);
  gap: 10px;
}
.mbf-tower-result--v2 .mbf-tower-result__floor-state, .mbf-tower-result--v2 .mbf-tower-result__floor-gain {
  display: flex;
  min-width: 0;
  min-height: 105px;
  padding: 12px 10px;
  border: 1px solid rgba(75, 104, 126, 0.45);
  background: linear-gradient(145deg, rgba(8, 21, 31, 0.9), rgba(2, 9, 15, 0.92));
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mbf-tower-result--v2 .mbf-tower-result__floor-state small, .mbf-tower-result--v2 .mbf-tower-result__floor-gain small {
  color: #7f8991;
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.mbf-tower-result--v2 .mbf-tower-result__floor-state > strong {
  margin-top: 7px;
  color: #b9edff;
  font-size: 34px;
  line-height: 1;
}
.mbf-tower-result--v2 .mbf-tower-result__floor-state > span {
  margin-top: 6px;
  color: #7ddcff;
  font-size: 13px;
  font-weight: 700;
}
.mbf-tower-result--v2 .mbf-tower-result__floor-state--after {
  border-color: rgba(174, 80, 242, 0.55);
  background: radial-gradient(circle at 50% 30%, rgba(136, 43, 199, 0.18), transparent 70%), rgba(5, 8, 14, 0.92);
}
.mbf-tower-result--v2 .mbf-tower-result__floor-state--after > strong {
  color: #dab7ff;
}
.mbf-tower-result--v2 .mbf-tower-result__floor-state--after > span {
  color: #c15cff;
}
.mbf-tower-result--v2 .mbf-tower-result__floor-gain {
  border-color: rgba(167, 75, 235, 0.38);
  background: radial-gradient(circle at 50% 50%, rgba(131, 40, 195, 0.22), rgba(3, 9, 15, 0.9) 72%);
}
.mbf-tower-result--v2 .mbf-tower-result__floor-gain > strong {
  margin-top: 8px;
  color: #c45cff;
  font-size: 27px;
  line-height: 1;
  text-shadow: 0 0 13px rgba(181, 77, 255, 0.32);
}
.mbf-tower-result--v2 .mbf-tower-result__floor-gain > span {
  margin-top: 7px;
  color: #9ca1a7;
  font-size: 11px;
}
.mbf-tower-result--v2 .mbf-tower-result__floor-meter {
  margin-top: 14px;
  padding: 10px 12px 9px;
  border: 1px solid rgba(74, 97, 116, 0.34);
  background: rgba(1, 7, 12, 0.52);
}
.mbf-tower-result--v2 .mbf-tower-result__floor-meter-head, .mbf-tower-result--v2 .mbf-tower-result__floor-meter-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mbf-tower-result--v2 .mbf-tower-result__floor-meter-head {
  margin-bottom: 7px;
  color: #9ca2a8;
  font-size: 11px;
}
.mbf-tower-result--v2 .mbf-tower-result__floor-meter-head strong {
  color: #c45cff;
  font-size: 13px;
}
.mbf-tower-result--v2 .mbf-tower-result__floor-meter-track {
  position: relative;
  height: 7px;
  overflow: hidden;
  border: 1px solid rgba(74, 111, 134, 0.4);
  background: rgba(1, 7, 12, 0.9);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6);
}
.mbf-tower-result--v2 .mbf-tower-result__floor-meter-track > span {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, #30c5f5, #765ee9 62%, #b050ef);
  box-shadow: 0 0 10px rgba(160, 71, 235, 0.45);
}
.mbf-tower-result--v2 .mbf-tower-result__floor-meter-foot {
  margin-top: 7px;
  color: #858b91;
  font-size: 10px;
}
.mbf-tower-result--v2 .mbf-tower-result__floor-meter-foot strong {
  color: #c4c7ca;
  font-weight: 700;
}

.mbf-tower-result--v2 .mbf-tower-result {
  /*
   * XP — показываем настоящую reward-xp.webp,
   * а не старую CSS-монетку для gold.
   */
}
.mbf-tower-result--v2 .mbf-tower-result__reward--xp {
  border-color: rgba(188, 139, 68, 0.78);
  background: radial-gradient(circle at 50% 45%, rgba(127, 88, 32, 0.22), rgba(5, 10, 16, 0.9) 72%);
}
.mbf-tower-result--v2 .mbf-tower-result__reward--xp::before, .mbf-tower-result--v2 .mbf-tower-result__reward--xp::after {
  display: none !important;
}
.mbf-tower-result--v2 .mbf-tower-result__reward--xp img {
  position: relative;
  z-index: 1;
  opacity: 1 !important;
  padding: 5px;
  -o-object-fit: contain;
     object-fit: contain;
}

@media (min-width: 1101px) {
  .mbf-tower-result--v2 {
    padding: 8px 18px;
  }
  .mbf-tower-result--v2 .mbf-tower-result {
    /*
     * Раньше было максимум 850px,
     * из-за чего новый прогресс уже не помещается.
     */
    /*
     * Не заставляем центральную колонку
     * держать минимум 180px для слишком большого блока.
     */
    /*
     * Чуть компактнее новый блок.
     */
    /*
     * Тут раньше margin-top:auto растягивал
     * внутренности вниз.
     */
  }
  .mbf-tower-result--v2 .mbf-tower-result__dialog {
    height: min(900px, 100svh - 16px);
    max-height: calc(100svh - 16px);
  }
  .mbf-tower-result--v2 .mbf-tower-result__column--center {
    grid-template-rows: auto auto minmax(215px, 1fr);
  }
  .mbf-tower-result--v2 .mbf-tower-result__floor-state, .mbf-tower-result--v2 .mbf-tower-result__floor-gain {
    min-height: 86px;
    padding: 9px 8px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__floor-state > strong {
    margin-top: 5px;
    font-size: 30px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__floor-state > span {
    margin-top: 4px;
    font-size: 12px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__floor-gain > strong {
    margin-top: 6px;
    font-size: 25px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__floor-gain > span {
    margin-top: 5px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__floor-meter {
    margin-top: 9px;
    padding: 7px 9px 6px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__floor-meter-head {
    margin-bottom: 5px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__floor-meter-foot {
    margin-top: 5px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__progress .mbf-tower-result--v2 .mbf-tower-result__battle-stats {
    margin-top: 8px;
    padding-top: 7px;
  }
}
/*
 * На невысоких ноутбуках лучше дать скролл,
 * чем физически отрезать результат.
 */
@media (min-width: 1101px) and (max-height: 800px) {
  .mbf-tower-result--v2 .mbf-tower-result__dialog {
    overflow-x: hidden;
    overflow-y: auto;
  }
  .mbf-tower-result--v2 .mbf-tower-result__layout {
    min-height: 700px;
    flex: 0 0 700px;
  }
}
.mbf-tower-result--v2 .mbf-tower-result {
  /*
   * Теперь слева три нормальных блока,
   * а не две гигантские растянутые панели.
   */
}
.mbf-tower-result--v2 .mbf-tower-result__column--summary {
  grid-template-rows: auto auto auto;
  align-content: start;
}
.mbf-tower-result--v2 .mbf-tower-result__performance {
  padding-bottom: 13px;
}
.mbf-tower-result--v2 .mbf-tower-result__performance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.mbf-tower-result--v2 .mbf-tower-result__performance-item {
  display: flex;
  min-width: 0;
  min-height: 72px;
  padding: 9px 8px;
  border: 1px solid rgba(68, 91, 111, 0.34);
  background: linear-gradient(145deg, rgba(8, 18, 27, 0.7), rgba(2, 8, 14, 0.78));
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.mbf-tower-result--v2 .mbf-tower-result__performance-item small {
  color: #858b91;
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.mbf-tower-result--v2 .mbf-tower-result__performance-item strong {
  margin-top: 6px;
  color: #d5d9dd;
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
}
.mbf-tower-result--v2 .mbf-tower-result__performance-item strong.is-violet {
  color: #c45cff;
  text-shadow: 0 0 10px rgba(180, 72, 244, 0.24);
}
.mbf-tower-result--v2 .mbf-tower-result__performance-item strong.is-cyan {
  color: #63d8ff;
  text-shadow: 0 0 10px rgba(61, 191, 242, 0.2);
}
.mbf-tower-result--v2 .mbf-tower-result__performance-item span {
  margin-top: 4px;
  color: #727981;
  font-size: 9px;
  line-height: 1;
}

@media (min-width: 1101px) {
  .mbf-tower-result--v2 {
    padding: 4px 12px;
  }
  .mbf-tower-result--v2 .mbf-tower-result {
    /*
     * Используем почти всю высоту экрана.
     * Убираем искусственный лимит 850/900px.
     */
    /*
     * Шапка была довольно высокой.
     */
    /*
     * Центр.
     */
    /*
     * Награды сверху немного компактнее.
     */
    /*
     * Отряд.
     */
    /*
     * Сам новый блок прогресса.
     */
    /*
     * Эта строка сейчас как раз обрезается.
     */
  }
  .mbf-tower-result--v2 .mbf-tower-result__dialog {
    height: calc(100svh - 8px);
    max-height: calc(100svh - 8px);
    padding-top: 14px;
    padding-bottom: 14px;
    overflow: hidden;
  }
  .mbf-tower-result--v2 .mbf-tower-result__header {
    margin-bottom: 6px;
    padding-top: 2px;
    padding-bottom: 3px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__header h2 {
    font-size: clamp(29px, 2.15vw, 40px);
  }
  .mbf-tower-result--v2 .mbf-tower-result__header p {
    margin-top: 4px;
    font-size: 14px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__column--center {
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 7px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__rewards {
    padding-top: 11px;
    padding-bottom: 8px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__rewards > h3 {
    margin-bottom: 8px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__rewards > small {
    margin-top: 3px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__claim {
    height: 52px;
    margin-top: 9px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__claim strong {
    font-size: 21px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__squad-panel {
    padding-top: 11px;
    padding-bottom: 10px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__squad-panel > h3 {
    margin-bottom: 8px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__squad {
    gap: 8px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__progress {
    padding-top: 10px;
    padding-bottom: 7px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__progress > h3 {
    margin-bottom: 8px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__floor-change {
    gap: 7px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__floor-state, .mbf-tower-result--v2 .mbf-tower-result__floor-gain {
    min-height: 72px;
    padding: 6px 7px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__floor-state small, .mbf-tower-result--v2 .mbf-tower-result__floor-gain small {
    font-size: 9px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__floor-state > strong {
    margin-top: 4px;
    font-size: 28px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__floor-state > span {
    margin-top: 3px;
    font-size: 11px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__floor-gain > strong {
    margin-top: 5px;
    font-size: 23px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__floor-gain > span {
    margin-top: 4px;
    font-size: 10px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__floor-meter {
    margin-top: 7px;
    padding: 6px 8px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__floor-meter-head {
    margin-bottom: 4px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__floor-meter-track {
    height: 6px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__floor-meter-foot {
    margin-top: 4px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__battle-stats {
    margin-top: 6px !important;
    padding-top: 6px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__battle-stats strong {
    margin-top: 2px;
    font-size: 16px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__battle-stats span {
    font-size: 9px;
  }
}
.mbf-tower-hq__power-live {
  position: absolute;
  z-index: 8;
  right: 14px;
  /*
   * Ставим примерно на уровне
   * "Выберите усиление".
   */
  top: 270px;
  display: flex;
  align-items: center;
  min-width: 190px;
  height: 48px;
  padding: 6px 13px 6px 9px;
  border: 1px solid rgba(77, 126, 158, 0.6);
  background: radial-gradient(circle at 15% 50%, rgba(44, 160, 215, 0.12), transparent 48%), linear-gradient(135deg, rgba(7, 20, 31, 0.97), rgba(2, 9, 16, 0.97));
  box-shadow: inset 0 0 16px rgba(49, 141, 194, 0.07), 0 0 12px rgba(21, 108, 164, 0.08);
  -webkit-clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
          clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.mbf-tower-hq__power-live-icon {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin-right: 9px;
  place-items: center;
}
.mbf-tower-hq__power-live-icon svg {
  width: 27px;
  height: 27px;
  fill: #a966ff;
  filter: drop-shadow(0 0 5px rgba(166, 82, 255, 0.45));
}
.mbf-tower-hq__power-live-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.mbf-tower-hq__power-live-copy small {
  color: #949ca4;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.mbf-tower-hq__power-live-copy strong {
  margin-top: 4px;
  color: #e5e7e9;
  font-size: 21px;
  line-height: 1;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: color 0.2s ease, text-shadow 0.2s ease, transform 0.2s ease;
}
.mbf-tower-hq__power-live-copy strong.is-power-updated {
  color: #ffffff;
  transform: scale(1.1);
  text-shadow: 0 0 7px rgba(184, 100, 255, 0.95), 0 0 17px rgba(81, 196, 255, 0.65);
}
.mbf-tower-hq__power-live-change {
  min-width: 37px;
  margin-left: 10px;
  color: #74e986;
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.mbf-tower-hq__power-live-change:not(:empty) {
  opacity: 1;
  transform: translateY(-1px);
}
.mbf-tower-hq__power-live-change.is-negative {
  color: #ff6969;
}

@media (max-width: 980px) {
  .mbf-tower-hq__power-live {
    position: sticky !important;
    z-index: 30;
    /*
     * При прокрутке остаётся
     * сверху модалки.
     */
    top: 0 !important;
    right: auto !important;
    width: calc(100% - 4px);
    min-width: 0;
    height: 42px;
    margin: 0 2px 8px;
    padding: 5px 10px;
    border-color: rgba(89, 130, 160, 0.68);
    background: linear-gradient(90deg, rgba(4, 15, 25, 0.985), rgba(14, 11, 27, 0.985), rgba(4, 15, 25, 0.985));
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.65), inset 0 -1px 0 rgba(169, 81, 255, 0.18);
    -webkit-clip-path: none;
            clip-path: none;
  }
  .mbf-tower-hq__power-live-icon {
    width: 30px;
    height: 30px;
    margin-right: 7px;
  }
  .mbf-tower-hq__power-live-icon svg {
    width: 23px;
    height: 23px;
  }
  .mbf-tower-hq__power-live-copy {
    flex: 1 1 auto;
    /*
     * На телефоне делаем всё
     * в одну строку.
     */
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .mbf-tower-hq__power-live-copy small {
    font-size: 10px;
  }
  .mbf-tower-hq__power-live-copy strong {
    margin-top: 0;
    font-size: 19px;
  }
  .mbf-tower-hq__power-live-change {
    min-width: 45px;
    margin-left: auto;
    font-size: 12px;
  }
}
/* =========================================================
   INFO ICON
   ========================================================= */
.mbf-tower-card__info {
  position: absolute;
  z-index: 30;
  right: 5px;
  bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  color: #66d7ff;
  background: transparent;
  cursor: help;
  opacity: 0.82;
  transition: opacity 0.15s ease, color 0.15s ease, filter 0.15s ease;
}
.mbf-tower-card__info svg {
  display: block;
  width: 14px;
  height: 14px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mbf-tower-card__info svg circle:last-child {
  fill: currentColor;
  stroke: none;
}
.mbf-tower-card__info:hover, .mbf-tower-card__info:focus-visible {
  outline: none;
  color: #fff;
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(74, 211, 255, 0.7));
}

/*
 * Чтобы CRIT не залезал под иконку.
 */
.mbf-tower-card__stat--crit {
  padding-right: 20px !important;
}

/* =========================================================
   FLOATING TOOLTIP
   Его JS добавляет прямо в BODY.
   ========================================================= */
.mbf-tower-stats-tooltip {
  position: fixed;
  z-index: 999999;
  display: block;
  width: 310px;
  padding: 12px 13px;
  border: 1px solid rgba(55, 174, 224, 0.62);
  border-radius: 7px;
  color: #d3dde4;
  background: linear-gradient(160deg, rgba(8, 27, 40, 0.99), rgba(2, 12, 20, 0.995));
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.72), inset 0 0 25px rgba(47, 173, 228, 0.05);
  font-family: "MBFTowerCondensed", "Arial Narrow", Arial, sans-serif;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 0.12s ease, visibility 0.12s ease, transform 0.12s ease;
}
.mbf-tower-stats-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.mbf-tower-stats-tooltip__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(88, 139, 167, 0.27);
}
.mbf-tower-stats-tooltip__head strong {
  color: #d4e0e7;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.mbf-tower-stats-tooltip__head small {
  color: #8799a5;
  font-size: 11px;
  font-weight: 700;
}
.mbf-tower-stats-tooltip__section {
  display: block;
}
.mbf-tower-stats-tooltip__section + .mbf-tower-stats-tooltip__section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(74, 119, 145, 0.2);
}
.mbf-tower-stats-tooltip__section > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 21px;
  gap: 15px;
}
.mbf-tower-stats-tooltip__section > span small {
  color: #8fa1ad;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}
.mbf-tower-stats-tooltip__section > span b {
  color: #dde6eb;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.mbf-tower-stats-tooltip__section > span b.is-bonus {
  color: #6be77c;
}
.mbf-tower-stats-tooltip__section > span.is-total {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid rgba(78, 132, 160, 0.23);
}
.mbf-tower-stats-tooltip__section > span.is-total small {
  color: #becbd2;
  font-weight: 800;
  text-transform: uppercase;
}
.mbf-tower-stats-tooltip__section > span.is-total b {
  color: #7bef88;
  font-size: 13px;
  font-weight: 900;
}
.mbf-tower-stats-tooltip__title {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}
.mbf-tower-stats-tooltip__title--attack {
  color: #e0adff;
}
.mbf-tower-stats-tooltip__title--health {
  color: #66d9ff;
}
.mbf-tower-stats-tooltip__title--crit {
  color: #e0e7eb;
}

@media (max-width: 980px) {
  .mbf-tower-card__info {
    right: 4px;
    bottom: 6px;
    width: 13px;
    height: 13px;
  }
  .mbf-tower-card__info svg {
    width: 16px;
    height: 16px;
  }
  .mbf-tower-card__stat--crit {
    padding-right: 18px !important;
  }
  .mbf-tower-stats-tooltip {
    width: min(310px, 100vw - 20px);
  }
}
/* =========================================================
   MOBILE SQUAD — FINAL FIX
   СТАВИТЬ В САМЫЙ КОНЕЦ SCSS
   ========================================================= */
@media (max-width: 980px) {
  .mbf-abyss-tower--mobile {
    /* =====================================================
       КОНТЕЙНЕР ОТРЯДА
       ===================================================== */
    /* =====================================================
       КАРТЫ
       На средних/больших телефонах оставляем 4 в ряд
       ===================================================== */
    /* =====================================================
       САМА КАРТОЧКА
       ===================================================== */
    /* =====================================================
       КНОПКИ ПОД ОТРЯДОМ
       ===================================================== */
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__prep-squad {
    width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__squad-slots {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    gap: clamp(4px, 1vw, 7px) !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__squad-slot,
  .mbf-abyss-tower--mobile .mbf-abyss-tower__squad-slot.is-filled {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 2/3 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  .mbf-abyss-tower--mobile .mbf-tower-card {
    width: 100% !important;
    height: 100% !important;
    /* -------------------------------------------------
       УРОВЕНЬ
       Не используем огромные vw
       ------------------------------------------------- */
    /* =================================================
       ЗАКАЛКА
       ================================================= */
    /* =================================================
       ATK / HP / CRIT
       ================================================= */
    /*
     * Больше НЕ резервируем огромный кусок CRIT
     * под кнопку info.
     */
    /* =================================================
       INFO
       УБИРАЕМ ЕЁ ИЗ CRIT
       Переносим на арт в правый верхний угол
       ================================================= */
  }
  .mbf-abyss-tower--mobile .mbf-tower-card__level {
    width: auto !important;
    min-width: 0 !important;
    height: clamp(24px, 5vw, 30px) !important;
    padding: 0 clamp(5px, 1.2vw, 8px) !important;
    gap: 3px !important;
  }
  .mbf-abyss-tower--mobile .mbf-tower-card__level small {
    font-size: clamp(7px, 1.15vw, 9px) !important;
  }
  .mbf-abyss-tower--mobile .mbf-tower-card__level b {
    font-size: clamp(13px, 2vw, 18px) !important;
  }
  .mbf-abyss-tower--mobile .mbf-tower-card__xp {
    padding: clamp(4px, 0.8vw, 6px) clamp(4px, 0.9vw, 7px) clamp(4px, 0.8vw, 6px) !important;
  }
  .mbf-abyss-tower--mobile .mbf-tower-card__xp-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: clamp(3px, 0.6vw, 4px) !important;
    gap: 3px !important;
  }
  .mbf-abyss-tower--mobile .mbf-tower-card__xp-head small {
    min-width: 0 !important;
    overflow: hidden !important;
    font-size: clamp(7px, 1.05vw, 9px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
  .mbf-abyss-tower--mobile .mbf-tower-card__xp-head b {
    min-width: 0 !important;
    font-size: clamp(7px, 1.15vw, 10px) !important;
    line-height: 1 !important;
    letter-spacing: -0.015em !important;
    white-space: nowrap !important;
  }
  .mbf-abyss-tower--mobile .mbf-tower-card__xp-head b i {
    margin: 0 1px !important;
  }
  .mbf-abyss-tower--mobile .mbf-tower-card__xp-track {
    height: clamp(3px, 0.5vw, 4px) !important;
  }
  .mbf-abyss-tower--mobile .mbf-tower-card__stats {
    display: grid !important;
    /*
     * HP обычно длиннее, поэтому даём ему
     * чуть больше пространства.
     */
    grid-template-columns: 0.85fr 1.18fr 0.97fr !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .mbf-abyss-tower--mobile .mbf-tower-card__stats > span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    padding: clamp(4px, 0.7vw, 6px) 1px clamp(5px, 0.8vw, 7px) !important;
    overflow: hidden !important;
    flex-direction: column !important;
  }
  .mbf-abyss-tower--mobile .mbf-tower-card__stats small {
    max-width: 100% !important;
    overflow: hidden !important;
    font-size: clamp(7px, 1vw, 9px) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }
  .mbf-abyss-tower--mobile .mbf-tower-card__stats b {
    display: block !important;
    max-width: 100% !important;
    margin-top: clamp(2px, 0.45vw, 4px) !important;
    overflow: hidden !important;
    font-size: clamp(10px, 1.55vw, 13px) !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
  }
  .mbf-abyss-tower--mobile .mbf-tower-card__stat--crit {
    padding-right: 1px !important;
  }
  .mbf-abyss-tower--mobile .mbf-tower-card__info {
    top: clamp(4px, 0.7vw, 6px) !important;
    right: clamp(4px, 0.7vw, 6px) !important;
    bottom: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: clamp(14px, 2.1vw, 18px) !important;
    height: clamp(14px, 2.1vw, 18px) !important;
    padding: 2px !important;
    border: 1px solid rgba(88, 211, 255, 0.55) !important;
    border-radius: 50% !important;
    color: #7ee1ff !important;
    background: rgba(1, 12, 20, 0.78) !important;
    box-shadow: 0 0 6px rgba(40, 196, 255, 0.18) !important;
    opacity: 0.9 !important;
  }
  .mbf-abyss-tower--mobile .mbf-tower-card__info svg {
    width: clamp(9px, 1.3vw, 12px) !important;
    height: clamp(9px, 1.3vw, 12px) !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__prep-squad-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    margin: clamp(7px, 1.2vw, 10px) 0 0 !important;
    padding: 0 !important;
    gap: clamp(6px, 1.2vw, 10px) !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__prep-squad-actions button {
    width: 100% !important;
    min-width: 0 !important;
    height: clamp(36px, 5.6vw, 42px) !important;
    min-height: clamp(36px, 5.6vw, 42px) !important;
    padding: 0 6px !important;
    overflow: hidden !important;
    font-size: clamp(9px, 1.35vw, 12px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}
/* =========================================================
   УЗКИЕ ТЕЛЕФОНЫ
   На 360–430px четыре HUD-карты физически слишком узкие.
   Поэтому делаем нормальные 2 × 2.
   ========================================================= */
@media (max-width: 430px) {
  .mbf-abyss-tower--mobile {
    /*
     * На двух картах в строке можно дать
     * чуть более крупные значения.
     */
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__squad-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .mbf-abyss-tower--mobile .mbf-tower-card__level {
    height: 30px !important;
  }
  .mbf-abyss-tower--mobile .mbf-tower-card__level small {
    font-size: 9px !important;
  }
  .mbf-abyss-tower--mobile .mbf-tower-card__level b {
    font-size: 18px !important;
  }
  .mbf-abyss-tower--mobile .mbf-tower-card__xp {
    padding: 6px 7px 6px !important;
  }
  .mbf-abyss-tower--mobile .mbf-tower-card__xp-head small {
    font-size: 9px !important;
  }
  .mbf-abyss-tower--mobile .mbf-tower-card__xp-head b {
    font-size: 10px !important;
  }
  .mbf-abyss-tower--mobile .mbf-tower-card__stats small {
    font-size: 9px !important;
  }
  .mbf-abyss-tower--mobile .mbf-tower-card__stats b {
    margin-top: 3px !important;
    font-size: 14px !important;
  }
  .mbf-abyss-tower--mobile .mbf-tower-card__info {
    top: 5px !important;
    right: 5px !important;
    width: 18px !important;
    height: 18px !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__prep-squad-actions button {
    height: 40px !important;
    min-height: 40px !important;
    font-size: 10px !important;
  }
}
/* =========================================================
   RESONANCE DEAL MODAL
   ========================================================= */
.mbf-tower-resonance {
  position: fixed;
  z-index: 10020;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  font-family: "MBFTowerCondensed", "Arial Narrow", Arial, sans-serif;
  transition: opacity 0.18s ease, visibility 0.18s ease;
  /* =====================================================
     DIALOG
     ===================================================== */
  /* =====================================================
     CREST
     ===================================================== */
  /* =====================================================
     CLOSE
     ===================================================== */
  /* =====================================================
     HEADER
     ===================================================== */
  /* =====================================================
     MAIN EFFECT
     ===================================================== */
  /* =====================================================
     PLUS / MINUS
     ===================================================== */
  /* =====================================================
     BOTTOM
     ===================================================== */
}
.mbf-tower-resonance.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.mbf-tower-resonance__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: radial-gradient(circle at 50% 45%, rgba(67, 24, 112, 0.16), transparent 42%), rgba(0, 5, 12, 0.86);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.mbf-tower-resonance__dialog {
  position: relative;
  z-index: 2;
  width: 720px;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 74px 34px 26px;
  border: 1px solid rgba(157, 70, 255, 0.82);
  color: #d9dbe3;
  background: radial-gradient(ellipse at 50% 0, rgba(117, 38, 190, 0.15), transparent 35%), linear-gradient(180deg, #080719 0%, #030b14 100%);
  -webkit-clip-path: polygon(20px 0, calc(50% - 65px) 0, calc(50% - 48px) 16px, calc(50% + 48px) 16px, calc(50% + 65px) 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px);
          clip-path: polygon(20px 0, calc(50% - 65px) 0, calc(50% - 48px) 16px, calc(50% + 48px) 16px, calc(50% + 65px) 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px);
  box-shadow: 0 0 0 3px rgba(20, 8, 37, 0.95), 0 0 30px rgba(133, 49, 241, 0.23), 0 25px 65px rgba(0, 0, 0, 0.72);
}
.mbf-tower-resonance__dialog::before {
  position: absolute;
  z-index: -1;
  content: "";
  inset: 7px;
  border: 1px solid rgba(85, 80, 154, 0.3);
  pointer-events: none;
}
.mbf-tower-resonance__dialog::after {
  position: absolute;
  content: "";
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #9144ff 18%, #bd6cff 50%, #9144ff 82%, transparent);
  box-shadow: 0 0 8px rgba(163, 75, 255, 0.75);
}
.mbf-tower-resonance__crest {
  position: absolute;
  z-index: 5;
  top: 17px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(166, 75, 255, 0.3), rgba(30, 15, 69, 0.82) 56%, #070817 72%);
  box-shadow: 0 0 18px rgba(137, 53, 255, 0.42);
}
.mbf-tower-resonance__crest::before {
  position: absolute;
  content: "";
  inset: 8px;
  border: 1px solid rgba(117, 177, 255, 0.43);
  border-radius: 50%;
}
.mbf-tower-resonance__crest::after {
  position: absolute;
  content: "";
  inset: 16px;
  border: 1px dashed rgba(93, 115, 255, 0.42);
  border-radius: 50%;
}
.mbf-tower-resonance__crest svg {
  position: relative;
  z-index: 2;
  width: 39px;
  height: 39px;
  fill: #bd65ff;
  filter: drop-shadow(0 0 7px rgba(167, 70, 255, 0.75));
}
.mbf-tower-resonance__crest-ring {
  position: absolute;
  inset: 1px;
  border: 1px solid rgba(150, 75, 255, 0.38);
  border-radius: 50%;
}
.mbf-tower-resonance__crest-ring::before, .mbf-tower-resonance__crest-ring::after {
  position: absolute;
  content: "";
  top: 50%;
  width: 11px;
  height: 11px;
  border: 1px solid #a951ff;
  background: #080918;
  transform: translateY(-50%) rotate(45deg);
}
.mbf-tower-resonance__crest-ring::before {
  left: -6px;
}
.mbf-tower-resonance__crest-ring::after {
  right: -6px;
}
.mbf-tower-resonance__close {
  position: absolute;
  z-index: 10;
  top: 18px;
  right: 20px;
  width: 34px;
  height: 34px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.mbf-tower-resonance__close span {
  position: absolute;
  top: 16px;
  left: 4px;
  width: 27px;
  height: 2px;
  background: #d7c2f4;
}
.mbf-tower-resonance__close span:first-child {
  transform: rotate(45deg);
}
.mbf-tower-resonance__close span:last-child {
  transform: rotate(-45deg);
}
.mbf-tower-resonance__header {
  position: relative;
  z-index: 2;
  margin-top: 30px;
  text-align: center;
}
.mbf-tower-resonance__header > span {
  display: block;
  margin: 0 0 5px;
  color: #a853ef;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.16em;
}
.mbf-tower-resonance__header h2 {
  margin: 0;
  color: #f4f3f7;
  font-size: 29px;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  text-shadow: 0 2px 1px #000;
}
.mbf-tower-resonance__header p {
  margin: 7px 0 0;
  color: #8f9ab8;
  font-size: 13px;
  line-height: 1.25;
  letter-spacing: 0.035em;
}
.mbf-tower-resonance__effect {
  position: relative;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 116px;
  margin-top: 28px;
  padding: 17px 22px;
  border: 1px solid rgba(123, 82, 175, 0.52);
  background: radial-gradient(circle at 9% 50%, rgba(117, 45, 186, 0.18), transparent 27%), rgba(3, 9, 20, 0.68);
  -webkit-clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
          clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.mbf-tower-resonance__effect::before {
  position: absolute;
  content: "ЭФФЕКТ";
  top: 8px;
  left: 50%;
  min-width: 86px;
  padding: 0 12px;
  transform: translate(-50%, -50%);
  color: #b752ff;
  background: #070817;
  text-align: center;
  font-size: 11px;
  font-weight: 900;
  line-height: 18px;
  letter-spacing: 0.15em;
}
.mbf-tower-resonance__effect-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border: 1px solid rgba(140, 71, 228, 0.48);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(122, 44, 211, 0.18), transparent 70%);
}
.mbf-tower-resonance__effect-icon::before {
  position: absolute;
  content: "";
  inset: 11px;
  border: 1px dashed rgba(156, 80, 239, 0.35);
  border-radius: 50%;
}
.mbf-tower-resonance__effect-icon svg {
  position: relative;
  z-index: 2;
  width: 34px;
  height: 47px;
  fill: #b95cff;
  filter: drop-shadow(0 0 6px rgba(165, 70, 255, 0.64));
}
.mbf-tower-resonance__effect-copy {
  min-width: 0;
}
.mbf-tower-resonance__effect-copy small {
  display: block;
  margin-bottom: 3px;
  color: #ad50ee;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mbf-tower-resonance__effect-copy h3 {
  margin: 0;
  color: #d5a7f4;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.mbf-tower-resonance__effect-copy p {
  margin: 7px 0 0;
  color: #c2c4cd;
  font-size: 13px;
  line-height: 1.38;
}
.mbf-tower-resonance__effects-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 15px;
}
.mbf-tower-resonance__effects {
  min-height: 112px;
  padding: 0 16px 14px;
  background: rgba(1, 11, 21, 0.79);
  -webkit-clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
          clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
}
.mbf-tower-resonance__effects header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  margin: 0 -16px 12px;
  border-bottom: 1px solid currentColor;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.07em;
}
.mbf-tower-resonance__effects > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mbf-tower-resonance__effects--positive {
  border: 1px solid rgba(33, 192, 247, 0.72);
  color: #35d8ff;
  background: linear-gradient(180deg, rgba(5, 35, 52, 0.28), rgba(1, 10, 18, 0.75));
}
.mbf-tower-resonance__effects--negative {
  border: 1px solid rgba(239, 53, 105, 0.7);
  color: #ff4d79;
  background: linear-gradient(180deg, rgba(54, 9, 27, 0.27), rgba(10, 4, 15, 0.75));
}
.mbf-tower-resonance__effect-row {
  display: flex;
  align-items: center;
  gap: 9px;
  color: inherit;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.25;
}
.mbf-tower-resonance__effect-row::before {
  flex: 0 0 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 900;
}
.mbf-tower-resonance__effect-row--positive::before {
  content: "+";
}
.mbf-tower-resonance__effect-row--negative::before {
  content: "!";
}
.mbf-tower-resonance__empty {
  padding-top: 5px;
  color: #747f91;
  font-size: 12px;
}
.mbf-tower-resonance__notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  color: #74819e;
  font-size: 12px;
  line-height: 1.2;
}
.mbf-tower-resonance__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.mbf-tower-resonance__button {
  position: relative;
  min-height: 52px;
  border: 1px solid;
  color: #fff;
  cursor: pointer;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  -webkit-clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
          clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
  transition: filter 0.15s ease, transform 0.15s ease;
}
.mbf-tower-resonance__button:hover:not(:disabled) {
  filter: brightness(1.13);
}
.mbf-tower-resonance__button:disabled {
  opacity: 0.55;
  cursor: wait;
}
.mbf-tower-resonance__button--decline {
  border-color: rgba(116, 162, 209, 0.85);
  background: linear-gradient(180deg, rgba(7, 18, 31, 0.96), rgba(2, 10, 18, 0.96));
}
.mbf-tower-resonance__button--accept {
  border-color: #c05bff;
  background: linear-gradient(180deg, #7624a4, #48146c);
  box-shadow: inset 0 0 18px rgba(211, 127, 255, 0.17), 0 0 12px rgba(161, 60, 255, 0.26);
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 700px) {
  .mbf-tower-resonance {
    padding: 10px 8px;
    align-items: flex-start;
    overflow-y: auto;
    /*
     * =====================================================
     * ОСНОВНОЙ КОНТЕЙНЕР
     * =====================================================
     */
    /*
     * =====================================================
     * ВЕРХНЯЯ ПЕЧАТЬ
     * =====================================================
     */
    /*
     * =====================================================
     * ЗАКРЫТИЕ
     * =====================================================
     */
    /*
     * =====================================================
     * HEADER
     * =====================================================
     */
    /*
     * =====================================================
     * ГЛАВНЫЙ ЭФФЕКТ
     * =====================================================
     */
    /*
     * Иконка больше НЕ пытается
     * сидеть слева от текста.
     *
     * На телефоне так значительно чище.
     */
    /*
     * =====================================================
     * ПЛЮСЫ / МИНУСЫ
     * =====================================================
     */
    /*
     * Каждая строка теперь нормальной высоты,
     * а не сплюснутая.
     */
    /*
     * =====================================================
     * INFO
     * =====================================================
     */
    /*
     * =====================================================
     * BUTTONS
     * =====================================================
     */
  }
  .mbf-tower-resonance__dialog {
    width: 100%;
    max-width: 460px;
    min-height: 0;
    max-height: none;
    margin: 12px auto 30px;
    overflow: visible;
    padding: 82px 18px 22px;
    -webkit-clip-path: polygon(15px 0, calc(50% - 58px) 0, calc(50% - 43px) 14px, calc(50% + 43px) 14px, calc(50% + 58px) 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px);
            clip-path: polygon(15px 0, calc(50% - 58px) 0, calc(50% - 43px) 14px, calc(50% + 43px) 14px, calc(50% + 58px) 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px);
    box-shadow: 0 0 0 3px rgba(20, 8, 37, 0.95), 0 0 22px rgba(133, 49, 241, 0.24), 0 20px 50px rgba(0, 0, 0, 0.75);
  }
  .mbf-tower-resonance__crest {
    top: 8px;
    width: 76px;
    height: 76px;
  }
  .mbf-tower-resonance__crest::before {
    inset: 8px;
  }
  .mbf-tower-resonance__crest::after {
    inset: 16px;
  }
  .mbf-tower-resonance__crest svg {
    width: 37px;
    height: 37px;
  }
  .mbf-tower-resonance__crest-ring::before, .mbf-tower-resonance__crest-ring::after {
    width: 10px;
    height: 10px;
  }
  .mbf-tower-resonance__close {
    top: 19px;
    right: 16px;
    width: 34px;
    height: 34px;
  }
  .mbf-tower-resonance__close span {
    top: 16px;
    left: 4px;
    width: 27px;
  }
  .mbf-tower-resonance__header {
    padding: 0 8px;
  }
  .mbf-tower-resonance__header h2 {
    margin: 0;
    font-size: 27px;
    line-height: 1.08;
    letter-spacing: 0.01em;
  }
  .mbf-tower-resonance__header p {
    max-width: 350px;
    margin: 10px auto 0;
    font-size: 14px;
    line-height: 1.42;
    color: #929db8;
  }
  .mbf-tower-resonance__effect {
    display: block;
    min-height: 0;
    margin-top: 34px;
    padding: 34px 18px 20px;
    text-align: center;
    overflow: visible;
  }
  .mbf-tower-resonance__effect::before {
    position: absolute;
    content: "ЭФФЕКТ";
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 88px;
    padding: 0 14px;
    color: #b752ff;
    background: #050916;
    font-size: 11px;
    font-weight: 900;
    line-height: 18px;
    letter-spacing: 0.15em;
    text-align: center;
    z-index: 3;
  }
  .mbf-tower-resonance__effect::after {
    position: absolute;
    content: "";
    top: 19px;
    left: 22px;
    right: 22px;
    height: 1px;
    background: linear-gradient(90deg, rgba(139, 76, 196, 0.65) 0%, rgba(139, 76, 196, 0.65) 38%, transparent 38%, transparent 62%, rgba(139, 76, 196, 0.65) 62%, rgba(139, 76, 196, 0.65) 100%);
    pointer-events: none;
  }
  .mbf-tower-resonance__effect-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
  }
  .mbf-tower-resonance__effect-icon::before {
    inset: 10px;
  }
  .mbf-tower-resonance__effect-icon svg {
    width: 32px;
    height: 45px;
  }
  .mbf-tower-resonance__effect-copy small {
    margin-bottom: 7px;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.12em;
  }
  .mbf-tower-resonance__effect-copy h3 {
    max-width: 350px;
    margin: 0 auto;
    font-size: 25px;
    line-height: 1.08;
    overflow-wrap: normal;
    word-break: normal;
  }
  .mbf-tower-resonance__effect-copy p {
    max-width: 360px;
    margin: 12px auto 0;
    font-size: 14px;
    line-height: 1.5;
    color: #c8c9d2;
  }
  .mbf-tower-resonance__effects-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 18px;
  }
  .mbf-tower-resonance__effects {
    width: 100%;
    min-height: 0;
    padding: 0 16px 18px;
  }
  .mbf-tower-resonance__effects header {
    min-height: 42px;
    margin: 0 -16px 16px;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.06em;
  }
  .mbf-tower-resonance__effects > div {
    gap: 12px;
  }
  .mbf-tower-resonance__effect-row {
    align-items: flex-start;
    gap: 12px;
    padding: 1px 0;
    font-size: 14px;
    line-height: 1.42;
    text-align: left;
  }
  .mbf-tower-resonance__effect-row::before {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    margin-top: -2px;
    font-size: 14px;
  }
  .mbf-tower-resonance__effect-row span {
    padding-top: 3px;
  }
  .mbf-tower-resonance__empty {
    padding: 2px 0;
    font-size: 13px;
  }
  .mbf-tower-resonance__notice {
    gap: 7px;
    margin-top: 16px;
    padding: 0 8px;
    font-size: 12px;
    line-height: 1.35;
    text-align: center;
  }
  .mbf-tower-resonance__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
  }
  .mbf-tower-resonance__button {
    min-height: 54px;
    padding: 0 10px;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.025em;
  }
}
@media (max-width: 380px) {
  .mbf-tower-resonance__dialog {
    padding-left: 14px;
    padding-right: 14px;
  }
  .mbf-tower-resonance__header h2 {
    font-size: 24px;
  }
  .mbf-tower-resonance__header p {
    font-size: 13px;
  }
  .mbf-tower-resonance__effect-copy h3 {
    font-size: 22px;
  }
  .mbf-tower-resonance__effect-copy p {
    font-size: 13px;
  }
  .mbf-tower-resonance__actions {
    grid-template-columns: 1fr;
  }
  .mbf-tower-resonance__button {
    min-height: 50px;
  }
}
/* ==========================================================================
   Башня Разлома — расширенная хроника экспедиции
   ========================================================================== */
.mbf-tower-result {
  /* Сюжетная цепочка — чуть заметнее обычного события. */
  /* Атмосфера — компактная запись, не притворяется наградой. */
  /* Рубеж пути — отдельная визуальная пауза в хронике. */
}
.mbf-tower-result__timeline-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.mbf-tower-result__timeline-heading > div {
  min-width: 0;
}
.mbf-tower-result__timeline-heading h3 {
  margin: 0;
}
.mbf-tower-result__timeline-heading small {
  display: block;
  margin-top: 3px;
  color: #697786;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.035em;
}
.mbf-tower-result__event-list {
  gap: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}
.mbf-tower-result__event {
  position: relative;
  display: grid !important;
  grid-template-columns: 42px 60px minmax(0, 1fr) !important;
  align-items: start !important;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 11px 4px !important;
  overflow: visible !important;
  border-bottom: 1px solid rgba(70, 89, 106, 0.22);
}
.mbf-tower-result__event[hidden] {
  display: none !important;
}
.mbf-tower-result__event time {
  font-size: 10px !important;
  font-variant-numeric: tabular-nums;
}
.mbf-tower-result__event-copy {
  min-width: 0;
  height: auto !important;
  overflow: visible !important;
}
.mbf-tower-result__event-copy > strong {
  display: block;
  margin-bottom: 3px;
  color: #c8ccd2;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.02em;
}
.mbf-tower-result__event-copy > p {
  display: block;
  margin: 0;
  color: #929aa2;
  font-size: 11px;
  line-height: 1.38;
  white-space: normal;
  overflow: visible;
}
.mbf-tower-result__event-copy > small {
  display: block;
  margin-top: 4px;
  color: #596672;
  font-size: 9px;
  line-height: 1;
}
.mbf-tower-result__event--kind-story {
  height: auto !important;
  min-height: 0 !important;
  margin: 6px 0 !important;
  padding-right: 9px !important;
  padding-left: 9px !important;
  border: 1px solid rgba(139, 67, 205, 0.28);
  background: linear-gradient(90deg, rgba(73, 24, 111, 0.16), rgba(3, 11, 18, 0) 70%);
}
.mbf-tower-result__event--kind-story::before {
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: 0;
  width: 2px;
  content: "";
  background: linear-gradient(180deg, transparent, #a850e4, transparent);
  box-shadow: 0 0 8px rgba(168, 80, 228, 0.45);
}
.mbf-tower-result__event--kind-story .mbf-tower-result__event-copy > strong {
  color: #cf85f2;
  font-size: 12px;
}
.mbf-tower-result__event--kind-ambient {
  height: auto !important;
  min-height: 0 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  opacity: 0.86;
}
.mbf-tower-result__event--kind-ambient .mbf-tower-result__event-icon {
  transform: scale(0.82);
  opacity: 0.72;
}
.mbf-tower-result__event--kind-ambient .mbf-tower-result__event-copy > strong {
  color: #8fa0ad;
}
.mbf-tower-result__event--kind-ambient .mbf-tower-result__event-copy > p {
  color: #75828d;
  font-style: italic;
}
.mbf-tower-result__event--kind-milestone {
  height: auto !important;
  min-height: 0 !important;
  margin: 5px 0 !important;
  border-top: 1px solid rgba(40, 196, 255, 0.16);
  border-bottom: 1px solid rgba(40, 196, 255, 0.16);
  background: linear-gradient(90deg, rgba(20, 91, 126, 0.11), transparent 68%);
}
.mbf-tower-result__event--kind-milestone .mbf-tower-result__event-copy > strong {
  color: #63cbea;
  text-transform: uppercase;
  letter-spacing: 0.055em;
}

@media (max-width: 980px) {
  .mbf-tower-result__timeline-heading {
    align-items: flex-start;
  }
  .mbf-tower-result__event {
    grid-template-columns: 38px 55px minmax(0, 1fr) !important;
    min-height: 0 !important;
    padding: 7px 2px !important;
  }
  .mbf-tower-result__event-icon {
    width: 36px !important;
    height: 36px !important;
  }
  .mbf-tower-result__event-copy > strong {
    font-size: 11px;
  }
  .mbf-tower-result__event-copy > p {
    font-size: 10.5px;
    line-height: 1.32;
  }
  .mbf-tower-result__event--kind-story {
    min-height: 0 !important;
    margin: 4px 0;
    padding-right: 7px !important;
    padding-left: 7px !important;
  }
}
@media (max-width: 560px) {
  .mbf-tower-result__timeline-heading {
    gap: 8px;
  }
  .mbf-tower-result__timeline-heading small {
    font-size: 9px;
  }
  .mbf-tower-result__event {
    grid-template-columns: 34px 48px minmax(0, 1fr) !important;
    gap: 7px !important;
    min-height: 0 !important;
  }
  .mbf-tower-result__event-icon {
    width: 32px !important;
    height: 32px !important;
  }
  .mbf-tower-result__event-copy > strong {
    margin-bottom: 2px;
    font-size: 10.5px;
  }
  .mbf-tower-result__event-copy > p {
    font-size: 10px;
    line-height: 1.28;
  }
  .mbf-tower-result__event-copy > small {
    font-size: 8.5px;
  }
}
/* ==========================================================================
   Timeline v5 — стабильная высота строк, ровные иконки и длинный текст
   ========================================================================== */
.mbf-tower-result {
  /* Сюжетные записи — выделяем, но НЕ двигаем сетку и иконку. */
  /* Атмосферные записи остаются спокойными, но иконка такого же размера. */
  /* Milestone занимает ровно ту же сетку. */
}
.mbf-tower-result__event-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100%;
  min-height: 0;
  max-height: none !important;
  overflow: visible !important;
}
.mbf-tower-result__event {
  position: relative;
  display: grid !important;
  grid-template-columns: 48px 78px minmax(0, 1fr) !important;
  grid-auto-rows: auto !important;
  align-items: start !important;
  -moz-column-gap: 14px !important;
       column-gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: -moz-max-content !important;
  height: max-content !important;
  min-height: 72px !important;
  margin: 0 !important;
  padding: 12px 10px !important;
  box-sizing: border-box !important;
  border: 1px solid transparent !important;
  border-bottom-color: rgba(70, 89, 106, 0.25) !important;
  background: transparent;
  overflow: visible !important;
}
.mbf-tower-result__event[hidden] {
  display: none !important;
}
.mbf-tower-result__event > * {
  min-width: 0;
}
.mbf-tower-result__event time {
  position: static !important;
  align-self: start !important;
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 8px 0 0 !important;
  color: #949aa2 !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mbf-tower-result__event-icon {
  position: static !important;
  align-self: start !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
  border-width: 1px !important;
  opacity: 1;
}
.mbf-tower-result__event-icon img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
}
.mbf-tower-result__event-copy {
  position: static !important;
  align-self: start !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
.mbf-tower-result__event-copy > strong,
.mbf-tower-result__event-copy > p,
.mbf-tower-result__event-copy > small {
  position: static !important;
  float: none !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere;
}
.mbf-tower-result__event-copy > strong {
  display: block !important;
  margin: 0 0 5px !important;
  color: #c8ccd2;
  font-size: 12px !important;
  font-weight: 800;
  line-height: 1.2 !important;
  letter-spacing: 0.015em;
}
.mbf-tower-result__event-copy > p {
  display: block !important;
  margin: 0 !important;
  color: #aeb3b9;
  font-size: 12px !important;
  line-height: 1.42 !important;
}
.mbf-tower-result__event-copy > small {
  display: block !important;
  margin: 7px 0 0 !important;
  padding: 0 !important;
  color: #5e6b76;
  font-size: 9.5px !important;
  line-height: 1.2 !important;
}
.mbf-tower-result__event--kind-story {
  min-height: 72px !important;
  margin: 7px 0 !important;
  padding: 12px 10px !important;
  border-color: rgba(139, 67, 205, 0.34) !important;
  background: linear-gradient(90deg, rgba(73, 24, 111, 0.18), rgba(5, 11, 20, 0.2) 68%, rgba(5, 11, 20, 0));
  box-shadow: inset 2px 0 0 rgba(178, 73, 240, 0.7), inset 0 0 24px rgba(97, 33, 145, 0.05);
}
.mbf-tower-result__event--kind-story::before {
  display: none !important;
}
.mbf-tower-result__event--kind-story .mbf-tower-result__event-icon {
  transform: none !important;
  margin: 0 !important;
}
.mbf-tower-result__event--kind-story .mbf-tower-result__event-copy > strong {
  color: #d184f2 !important;
  font-size: 12.5px !important;
}
.mbf-tower-result__event--kind-ambient {
  min-height: 72px !important;
  margin: 0 !important;
  padding: 12px 10px !important;
  opacity: 0.82;
}
.mbf-tower-result__event--kind-ambient .mbf-tower-result__event-icon {
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  transform: none !important;
  opacity: 0.62;
}
.mbf-tower-result__event--kind-ambient .mbf-tower-result__event-copy > strong {
  color: #8996a0 !important;
}
.mbf-tower-result__event--kind-ambient .mbf-tower-result__event-copy > p {
  color: #78838d !important;
  font-style: italic;
}
.mbf-tower-result__event--kind-milestone {
  min-height: 72px !important;
  margin: 5px 0 !important;
  padding: 12px 10px !important;
  border-top-color: rgba(40, 196, 255, 0.18) !important;
  border-bottom-color: rgba(40, 196, 255, 0.18) !important;
  background: linear-gradient(90deg, rgba(20, 91, 126, 0.1), transparent 70%);
}
.mbf-tower-result__event--kind-milestone .mbf-tower-result__event-copy > strong {
  color: #63cbea !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (max-width: 980px) {
  .mbf-tower-result__event {
    grid-template-columns: 44px 68px minmax(0, 1fr) !important;
    -moz-column-gap: 11px !important;
         column-gap: 11px !important;
    min-height: 68px !important;
    padding: 11px 8px !important;
  }
  .mbf-tower-result__event-icon {
    width: 40px !important;
    height: 40px !important;
  }
  .mbf-tower-result__event--kind-story, .mbf-tower-result__event--kind-ambient, .mbf-tower-result__event--kind-milestone {
    min-height: 68px !important;
    padding: 11px 8px !important;
  }
  .mbf-tower-result__event--kind-ambient .mbf-tower-result__event-icon {
    width: 40px !important;
    height: 40px !important;
  }
  .mbf-tower-result__event-copy > strong {
    font-size: 11.5px !important;
  }
  .mbf-tower-result__event-copy > p {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
  }
  .mbf-tower-result__event-copy > small {
    margin-top: 6px !important;
    font-size: 9px !important;
  }
}
@media (max-width: 560px) {
  .mbf-tower-result__event-list {
    padding-right: 0 !important;
  }
  .mbf-tower-result__event {
    grid-template-columns: 38px 55px minmax(0, 1fr) !important;
    -moz-column-gap: 9px !important;
         column-gap: 9px !important;
    min-height: 64px !important;
    padding: 10px 5px !important;
  }
  .mbf-tower-result__event-icon {
    width: 36px !important;
    height: 36px !important;
  }
  .mbf-tower-result__event time {
    padding-top: 6px !important;
    font-size: 9.5px !important;
  }
  .mbf-tower-result__event--kind-story, .mbf-tower-result__event--kind-ambient, .mbf-tower-result__event--kind-milestone {
    min-height: 64px !important;
    margin: 5px 0 !important;
    padding: 10px 5px !important;
  }
  .mbf-tower-result__event--kind-ambient .mbf-tower-result__event-icon {
    width: 36px !important;
    height: 36px !important;
  }
  .mbf-tower-result__event-copy > strong {
    margin-bottom: 4px !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
  }
  .mbf-tower-result__event-copy > p {
    font-size: 10px !important;
    line-height: 1.38 !important;
  }
  .mbf-tower-result__event-copy > small {
    margin-top: 5px !important;
    font-size: 8.5px !important;
  }
}
/* ==========================================================================
   Timeline v6 — правая хроника всегда помещается в основную result-модалку
   ========================================================================== */
@media (min-width: 1101px) {
  .mbf-tower-result--v2 .mbf-tower-result {
    /*
     * Главная модалка имеет фиксированную высоту.
     * Правая колонка не должна расти от количества событий.
     */
    /*
     * ВАЖНО: height:0 + flex:1 заставляет список занять только
     * оставшуюся высоту панели. Предыдущие версии ставили
     * overflow:visible !important, из-за чего 12+ событий
     * физически вылезали за границы колонки.
     */
    /* Каждая строка сама определяет высоту по своему тексту. */
  }
  .mbf-tower-result--v2 .mbf-tower-result__layout {
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .mbf-tower-result--v2 .mbf-tower-result__timeline {
    display: flex !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    flex-direction: column !important;
  }
  .mbf-tower-result--v2 .mbf-tower-result__timeline-heading, .mbf-tower-result--v2 .mbf-tower-result__event-filters {
    flex: 0 0 auto !important;
  }
  .mbf-tower-result--v2 .mbf-tower-result__event-list {
    display: block !important;
    width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 8px 10px 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    flex: 1 1 0 !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(157, 76, 218, 0.72) rgba(7, 15, 24, 0.65);
  }
  .mbf-tower-result--v2 .mbf-tower-result__event-list::-webkit-scrollbar {
    width: 7px;
  }
  .mbf-tower-result--v2 .mbf-tower-result__event-list::-webkit-scrollbar-track {
    background: rgba(7, 15, 24, 0.65);
    border-left: 1px solid rgba(73, 89, 105, 0.15);
  }
  .mbf-tower-result--v2 .mbf-tower-result__event-list::-webkit-scrollbar-thumb {
    border: 1px solid rgba(190, 105, 246, 0.28);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(181, 82, 240, 0.88), rgba(102, 46, 151, 0.88));
    box-shadow: 0 0 7px rgba(161, 63, 224, 0.28);
  }
  .mbf-tower-result--v2 .mbf-tower-result__event {
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 72px !important;
    overflow: visible !important;
    align-items: start !important;
  }
  .mbf-tower-result--v2 .mbf-tower-result__event-copy {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .mbf-tower-result--v2 .mbf-tower-result__event-copy > strong, .mbf-tower-result--v2 .mbf-tower-result__event-copy > p, .mbf-tower-result--v2 .mbf-tower-result__event-copy > small {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
  }
}
/*
 * На планшете/телефоне сама result-модалка уже скроллится целиком,
 * поэтому внутренний второй скролл не нужен — показываем хронику естественно.
 */
@media (max-width: 1100px) {
  .mbf-tower-result--v2 .mbf-tower-result__timeline {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .mbf-tower-result--v2 .mbf-tower-result__event-list {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
    flex: none !important;
  }
}
/* =========================================================
   ACTIVE EXPEDITION — EVENT SUMMARY
   ========================================================= */
.mbf-abyss-tower {
  /* Report button removed: accelerate occupies the full action row. */
}
.mbf-abyss-tower__event-summary {
  position: relative;
  width: 100%;
  margin-top: 1.15cqw;
  border: 1px solid rgba(56, 99, 126, 0.36);
  background: linear-gradient(135deg, rgba(7, 20, 31, 0.9), rgba(2, 9, 16, 0.94));
  box-shadow: inset 0 0 22px rgba(38, 169, 223, 0.035), 0 0 0 1px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}
.mbf-abyss-tower__event-summary::after {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, #27c7ff 0%, rgba(39, 199, 255, 0.35) 42%, rgba(158, 65, 255, 0.28) 72%, transparent 100%);
  opacity: 0.7;
}
.mbf-abyss-tower__event-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1cqw;
  padding: 0.48cqw 0.82cqw 0.42cqw;
  border-bottom: 1px solid rgba(58, 90, 112, 0.24);
  background: rgba(4, 12, 20, 0.62);
  text-transform: uppercase;
}
.mbf-abyss-tower__event-summary-head > span {
  color: #aeb8c3;
  font-weight: 750;
  font-size: 0.62cqw;
  letter-spacing: 0.07em;
}
.mbf-abyss-tower__event-summary-head > small {
  color: #607482;
  font-weight: 700;
  font-size: 0.5cqw;
  letter-spacing: 0.08em;
}
.mbf-abyss-tower__event-summary-main {
  display: grid;
  grid-template-columns: 2.7cqw auto minmax(0, 1fr);
  align-items: center;
  gap: 0.78cqw;
  min-height: 3.55cqw;
  padding: 0.58cqw 0.82cqw 0.62cqw;
}
.mbf-abyss-tower__event-summary-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.55cqw;
  height: 2.55cqw;
  border: 1px solid rgba(51, 188, 238, 0.46);
  border-radius: 50%;
  color: #48d4ff;
  background: radial-gradient(circle, rgba(25, 146, 207, 0.17), rgba(3, 13, 22, 0.86) 72%);
  box-shadow: 0 0 13px rgba(40, 191, 244, 0.11);
}
.mbf-abyss-tower__event-summary-icon svg {
  width: 54%;
  height: 54%;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linejoin: round;
}
.mbf-abyss-tower__event-summary-value {
  display: inline-flex;
  align-items: baseline;
  gap: 0.38cqw;
  white-space: nowrap;
}
.mbf-abyss-tower__event-summary-value strong {
  color: #4fd7ff;
  font-size: 1.7cqw;
  font-weight: 850;
  line-height: 0.9;
  text-shadow: 0 0 13px rgba(51, 198, 246, 0.16);
}
.mbf-abyss-tower__event-summary-value em {
  color: #b2bbc5;
  font-size: 0.64cqw;
  font-weight: 720;
  font-style: normal;
  line-height: 1;
  text-transform: lowercase;
}
.mbf-abyss-tower__event-summary-note {
  min-width: 0;
  padding-left: 0.8cqw;
  border-left: 1px solid rgba(69, 105, 130, 0.25);
  color: #71818e;
  font-size: 0.56cqw;
  font-weight: 600;
  line-height: 1.28;
}
.mbf-abyss-tower__actions {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}
.mbf-abyss-tower__accelerate {
  width: 100%;
}

@media (max-width: 768px) {
  .mbf-abyss-tower__event-summary {
    margin-top: 3vw;
  }
  .mbf-abyss-tower__event-summary-head {
    gap: 3vw;
    padding: 1.8vw 2.6vw 1.5vw;
  }
  .mbf-abyss-tower__event-summary-head > span {
    font-size: 2.45vw;
  }
  .mbf-abyss-tower__event-summary-head > small {
    font-size: 1.95vw;
  }
  .mbf-abyss-tower__event-summary-main {
    grid-template-columns: 11vw auto minmax(0, 1fr);
    gap: 2.5vw;
    min-height: 14.5vw;
    padding: 2.5vw 2.6vw 2.7vw;
  }
  .mbf-abyss-tower__event-summary-icon {
    width: 10.5vw;
    height: 10.5vw;
  }
  .mbf-abyss-tower__event-summary-value {
    gap: 1.2vw;
  }
  .mbf-abyss-tower__event-summary-value strong {
    font-size: 7vw;
  }
  .mbf-abyss-tower__event-summary-value em {
    font-size: 2.45vw;
  }
  .mbf-abyss-tower__event-summary-note {
    padding-left: 2.3vw;
    font-size: 2.15vw;
    line-height: 1.3;
  }
}
@media (max-width: 430px) {
  .mbf-abyss-tower__event-summary-main {
    grid-template-columns: 10.5vw 1fr;
    gap: 2.6vw;
  }
  .mbf-abyss-tower__event-summary-value {
    align-self: center;
  }
  .mbf-abyss-tower__event-summary-note {
    grid-column: 2;
    margin-top: -1.6vw;
    padding-left: 0;
    border-left: 0;
  }
}
/* ==========================================================================
   MOBILE ACTIVE EXPEDITION v9
   Финальный override для активной экспедиции на телефонах.
   - больше воздуха между верхним блоком этажа и экспедицией;
   - event-summary больше не налезает на timer/status;
   - боевой отряд компактнее и читаемее;
   - цифры силы/рекомендации/изучения уменьшены.
   ========================================================================== */
@media (max-width: 980px) {
  .mbf-abyss-tower--mobile .mbf-abyss-tower {
    /* --------------------------------------------------------------
       1. Разводим верхний блок этажа и экспедицию
       -------------------------------------------------------------- */
    /* --------------------------------------------------------------
       2. Счётчик событий занимает только нижнюю часть expedition.
       Старый блок событий раньше жил в этой области абсолютом;
       новый summary тоже должен жить там, а не в обычном flow.
       -------------------------------------------------------------- */
    /* --------------------------------------------------------------
       3. Боевой отряд — больше воздуха после expedition.
       Сохраняем 4 карты сразу, но делаем их ниже и плотнее.
       -------------------------------------------------------------- */
    /* --------------------------------------------------------------
       4. HUD карты активного отряда.
       Не трогаем карточки в подготовке/модалках — только active strip.
       -------------------------------------------------------------- */
    /* --------------------------------------------------------------
       5. Итоговые боевые показатели — больше не кричат цифрами.
       -------------------------------------------------------------- */
    /*
     * После удаления кнопки отчёта actions больше не резервирует
     * под неё визуальное пространство. Всё идёт плотной колонкой.
     */
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__expedition {
    top: 24.55% !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__event-summary {
    position: absolute !important;
    z-index: 4 !important;
    top: 66.8% !important;
    right: 4.1% !important;
    bottom: 5.2% !important;
    left: 4.1% !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-color: rgba(53, 100, 128, 0.4) !important;
    background: linear-gradient(100deg, rgba(6, 25, 37, 0.88), rgba(3, 11, 19, 0.92)) !important;
    box-shadow: inset 0 0 18px rgba(39, 191, 244, 0.025), 0 0 0 1px rgba(0, 0, 0, 0.2) !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__event-summary-head {
    min-height: 0 !important;
    padding: 1.05vw 1.75vw 0.9vw !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__event-summary-head > span {
    font-size: 1.72vw !important;
    line-height: 1 !important;
    letter-spacing: 0.055em !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__event-summary-head > small {
    font-size: 1.45vw !important;
    line-height: 1 !important;
    letter-spacing: 0.065em !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__event-summary-main {
    display: grid !important;
    grid-template-columns: 7.8vw auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 1.7vw !important;
    min-height: 0 !important;
    height: calc(100% - 4vw) !important;
    padding: 1.35vw 1.75vw 1.5vw !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__event-summary-icon {
    width: 7.4vw !important;
    height: 7.4vw !important;
    border-color: rgba(57, 192, 239, 0.42) !important;
    box-shadow: 0 0 10px rgba(40, 191, 244, 0.08) !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__event-summary-value {
    gap: 0.8vw !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__event-summary-value strong {
    font-size: 4.65vw !important;
    line-height: 0.92 !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__event-summary-value em {
    font-size: 1.75vw !important;
    line-height: 1 !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__event-summary-note {
    padding-left: 1.7vw !important;
    border-left: 1px solid rgba(74, 112, 136, 0.23) !important;
    color: #71808b !important;
    font-size: 1.55vw !important;
    font-weight: 600 !important;
    line-height: 1.22 !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__mobile-cards {
    /*
     * Карты снова имеют честное соотношение 2:3.
     * Поэтому секция чуть выше, но без искусственной пустоты
     * между отрядом, статами и кнопкой.
     */
    top: 53.15% !important;
    height: 18.75% !important;
    padding-top: 4.6vw !important;
    overflow: visible !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__mobile-cards > .mbf-abyss-tower__command-title {
    top: 0 !important;
    height: 4.1vw !important;
    font-size: 1.78vw !important;
    letter-spacing: 0.15em !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__mobile-cards > .mbf-abyss-tower__cards {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: start !important;
    width: 100% !important;
    height: auto !important;
    gap: 0.82vw !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__mobile-cards > .mbf-abyss-tower__cards > .mbf-abyss-tower__card {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    /* НЕ СЖИМАЕМ КАРТУ: оригинальное соотношение 2:3. */
    aspect-ratio: 2/3 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0.8vw !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__mobile-cards > .mbf-abyss-tower__cards > .mbf-abyss-tower__card > .mbf-tower-card {
    width: 100% !important;
    height: 100% !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__mobile-cards .mbf-tower-card {
    /*
     * Активный отряд на телефоне: 4 карты в ряд, поэтому HUD
     * должен быть компактным, но всё ещё читаемым. Саму геометрию
     * карты не трогаем — родитель остаётся строго 2:3.
     */
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__mobile-cards .mbf-tower-card__level {
    width: auto !important;
    min-width: 0 !important;
    height: clamp(18px, 4.8vw, 22px) !important;
    padding: 0 clamp(4px, 1.05vw, 6px) !important;
    gap: 2px !important;
    border-radius: 0 0 5px 0 !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__mobile-cards .mbf-tower-card__level small {
    display: inline-block !important;
    font-size: clamp(5px, 1.35vw, 7px) !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__mobile-cards .mbf-tower-card__level b {
    font-size: clamp(10px, 2.7vw, 13px) !important;
    line-height: 1 !important;
    letter-spacing: -0.015em !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__mobile-cards .mbf-tower-card__hud {
    box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.22) !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__mobile-cards .mbf-tower-card__xp {
    padding: clamp(3px, 0.78vw, 4px) clamp(4px, 0.95vw, 5px) clamp(3px, 0.72vw, 4px) !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__mobile-cards .mbf-tower-card__xp-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 3px !important;
    margin-bottom: 3px !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__mobile-cards .mbf-tower-card__xp-head small {
    display: block !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    color: #8ca0b0 !important;
    font-size: clamp(5px, 1.35vw, 6.5px) !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    letter-spacing: 0.025em !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__mobile-cards .mbf-tower-card__xp-head b {
    flex: 0 0 auto !important;
    max-width: 61% !important;
    color: #e2c5ff !important;
    font-size: clamp(6px, 1.55vw, 7.5px) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__mobile-cards .mbf-tower-card__xp-head b i {
    margin: 0 1px !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__mobile-cards .mbf-tower-card__xp-track {
    height: clamp(2px, 0.5vw, 3px) !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__mobile-cards .mbf-tower-card__stats {
    grid-template-columns: 0.92fr 1.16fr 0.92fr !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__mobile-cards .mbf-tower-card__stats > span {
    min-width: 0 !important;
    padding: clamp(3px, 0.72vw, 4px) 1px clamp(3px, 0.75vw, 4px) !important;
    overflow: hidden !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__mobile-cards .mbf-tower-card__stats small {
    max-width: 100% !important;
    font-size: clamp(5px, 1.28vw, 6px) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__mobile-cards .mbf-tower-card__stats b {
    display: block !important;
    max-width: 100% !important;
    margin-top: 2px !important;
    font-size: clamp(7px, 1.95vw, 9px) !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__mobile-cards .mbf-tower-card__stat--crit {
    padding-right: 1px !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__mobile-cards .mbf-tower-card__info {
    top: clamp(3px, 0.8vw, 4px) !important;
    right: clamp(3px, 0.8vw, 4px) !important;
    bottom: auto !important;
    width: clamp(13px, 3.5vw, 16px) !important;
    height: clamp(13px, 3.5vw, 16px) !important;
    padding: 2px !important;
    border-color: rgba(84, 200, 240, 0.42) !important;
    background: rgba(2, 13, 21, 0.78) !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__mobile-cards .mbf-tower-card__info svg {
    width: clamp(8px, 2.15vw, 10px) !important;
    height: clamp(8px, 2.15vw, 10px) !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__combat-stats {
    top: 72.65% !important;
    height: 4.45% !important;
    border-color: rgba(91, 117, 136, 0.4) !important;
    background: rgba(3, 12, 20, 0.94) !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__combat-stat {
    grid-template-columns: 2.65vw minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 0.72vw !important;
    padding: 0 1.15vw !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__combat-stat-icon {
    width: 2.4vw !important;
    max-height: 2.7vw !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__combat-stat small {
    font-size: 0.92vw !important;
    line-height: 1.05 !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__combat-stat-value {
    margin-top: 0.28vw !important;
    font-size: 1.88vw !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__actions {
    top: 77.85% !important;
    height: auto !important;
    gap: 0 !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__reward-strip {
    top: 83% !important;
  }
}
/* На совсем узких телефонах не возвращаем 2x2 для АКТИВНОГО отряда:
   активный экран специально держит все четыре карты перед глазами.
   Этот override сильнее старого правила подготовки. */
@media (max-width: 430px) {
  .mbf-abyss-tower--mobile .mbf-abyss-tower__mobile-cards > .mbf-abyss-tower__cards {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.72vw !important;
  }
}
/* ==========================================================================
   MOBILE READABILITY FIX
   Верхний блок + боевые показатели
   ОБЯЗАТЕЛЬНО держать в самом конце SCSS
   ========================================================================== */
@media (max-width: 980px) {
  .mbf-abyss-tower--mobile .mbf-abyss-tower {
    /* ==============================================================
       2. БЛОК НАД "УСКОРИТЬ"
       Сила / рекомендуемая / изучение противника
       ============================================================== */
    /*
     * Показатели стали чуть выше,
     * поэтому кнопку опускаем совсем немного.
     */
    /* reward-strip оставляем практически там же */
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__combat-stats {
    top: 72.55% !important;
    height: 5.1% !important;
    border-color: rgba(91, 117, 136, 0.48) !important;
    background: rgba(3, 12, 20, 0.96) !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__combat-stat {
    grid-template-columns: clamp(14px, 3vw, 22px) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: clamp(3px, 0.8vw, 6px) !important;
    padding: 0 clamp(5px, 1.2vw, 10px) !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__combat-stat-icon {
    width: clamp(13px, 2.8vw, 21px) !important;
    max-height: clamp(14px, 3vw, 23px) !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__combat-stat small {
    font-size: clamp(6px, 1.45vw, 10px) !important;
    font-weight: 650 !important;
    line-height: 1.05 !important;
    letter-spacing: 0.035em !important;
    white-space: nowrap !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__combat-stat-value {
    margin-top: clamp(1px, 0.25vw, 3px) !important;
    font-size: clamp(11px, 2.45vw, 18px) !important;
    line-height: 1 !important;
    letter-spacing: 0.015em !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__actions {
    top: 78.15% !important;
  }
  .mbf-abyss-tower--mobile .mbf-abyss-tower__reward-strip {
    top: 83% !important;
  }
}
/* =========================================================
   Башня Разлома — справка / гайд для новичков
   ========================================================= */
.mbf-abyss-tower__help-trigger {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(154, 91, 255, 0.72);
  border-radius: 50%;
  outline: 0;
  background: radial-gradient(circle at 50% 38%, rgba(157, 93, 255, 0.18), transparent 64%), rgba(5, 15, 27, 0.78);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 0 18px rgba(132, 61, 255, 0.16);
  color: #c7b4ff;
  cursor: pointer;
  transform: translateY(-50%);
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.mbf-abyss-tower__help-trigger svg {
  width: 27px;
  height: 27px;
  overflow: visible;
  fill: currentColor;
}
.mbf-abyss-tower__help-trigger svg circle:first-child {
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1.35;
  opacity: 0.56;
}
.mbf-abyss-tower__help-trigger-dot {
  fill: #e8e1ff !important;
  stroke: none !important;
  opacity: 1 !important;
}
.mbf-abyss-tower__help-trigger:hover, .mbf-abyss-tower__help-trigger:focus-visible {
  color: #ffffff;
  border-color: #b774ff;
  background: radial-gradient(circle at 50% 38%, rgba(170, 93, 255, 0.32), transparent 67%), rgba(13, 19, 37, 0.96);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 0 20px rgba(155, 70, 255, 0.38);
  transform: translateY(-50%) scale(1.06);
}

.mbf-tower-help {
  position: fixed;
  inset: 0;
  z-index: 10080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}
.mbf-tower-help.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.mbf-tower-help__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: radial-gradient(circle at 50% 35%, rgba(73, 35, 125, 0.22), transparent 46%), rgba(0, 5, 12, 0.82);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  cursor: default;
}
.mbf-tower-help__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1040px, 100vw - 56px);
  max-height: min(900px, 100svh - 56px);
  overflow: hidden;
  border: 1px solid rgba(93, 130, 158, 0.62);
  background: linear-gradient(180deg, rgba(11, 22, 36, 0.985), rgba(3, 10, 19, 0.995));
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(139, 69, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.035);
  color: #dfe6ed;
  -webkit-clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
          clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
}
.mbf-tower-help__dialog::before {
  position: absolute;
  top: 0;
  right: 9%;
  left: 9%;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(152, 81, 255, 0.9), rgba(52, 192, 255, 0.74), transparent);
  box-shadow: 0 0 15px rgba(135, 67, 255, 0.5);
  pointer-events: none;
}
.mbf-tower-help__corner {
  position: absolute;
  top: 0;
  z-index: 2;
  width: 52px;
  height: 7px;
  background: linear-gradient(90deg, #8558ff, #b869ff);
  box-shadow: 0 0 12px rgba(139, 78, 255, 0.55);
}
.mbf-tower-help__corner--left {
  left: 18px;
}
.mbf-tower-help__corner--right {
  right: 18px;
  background: linear-gradient(90deg, #34bff6, #7162ff);
}
.mbf-tower-help__close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 5;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(120, 151, 173, 0.42);
  border-radius: 4px;
  background: rgba(4, 13, 23, 0.72);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.mbf-tower-help__close span {
  position: absolute;
  top: 18px;
  left: 8px;
  width: 22px;
  height: 1px;
  background: #aebdca;
  transform: rotate(45deg);
}
.mbf-tower-help__close span + span {
  transform: rotate(-45deg);
}
.mbf-tower-help__close:hover, .mbf-tower-help__close:focus-visible {
  border-color: rgba(184, 112, 255, 0.9);
  background: rgba(73, 37, 104, 0.42);
}
.mbf-tower-help__header {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  flex: 0 0 auto;
  min-height: 128px;
  padding: 24px 76px 22px 28px;
  border-bottom: 1px solid rgba(86, 113, 135, 0.28);
  background: radial-gradient(circle at 8% 50%, rgba(124, 66, 218, 0.2), transparent 27%), linear-gradient(90deg, rgba(9, 20, 34, 0.95), rgba(6, 15, 27, 0.7));
}
.mbf-tower-help__header small {
  display: block;
  margin-bottom: 4px;
  color: #8e9cab;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
}
.mbf-tower-help__header h2 {
  margin: 0;
  color: #f0f2f6;
  font-size: clamp(27px, 2.3vw, 38px);
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.72);
}
.mbf-tower-help__header p {
  max-width: 760px;
  margin: 7px 0 0;
  color: #9ca9b5;
  font-size: 14px;
  line-height: 1.5;
}
.mbf-tower-help__header-icon {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 1px solid rgba(159, 91, 255, 0.74);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(145, 73, 236, 0.28), rgba(18, 19, 44, 0.24) 62%, transparent 64%);
  box-shadow: inset 0 0 0 6px rgba(101, 55, 166, 0.09), 0 0 24px rgba(127, 56, 230, 0.24);
  color: #cba7ff;
  font-size: 38px;
  font-weight: 750;
  line-height: 1;
}
.mbf-tower-help__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 24px 28px 34px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #6549a5 rgba(255, 255, 255, 0.04);
}
.mbf-tower-help__scroll::-webkit-scrollbar {
  width: 8px;
}
.mbf-tower-help__scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.025);
}
.mbf-tower-help__scroll::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: linear-gradient(#7049bd, #386f9c);
}
.mbf-tower-help__starter {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.85fr);
  gap: 22px;
  align-items: center;
  padding: 20px 22px;
  border: 1px solid rgba(141, 78, 237, 0.46);
  background: linear-gradient(110deg, rgba(77, 34, 127, 0.24), rgba(10, 24, 38, 0.58) 64%), rgba(7, 15, 27, 0.86);
  box-shadow: inset 3px 0 0 #9c58ef;
}
.mbf-tower-help__eyebrow {
  display: inline-flex;
  margin-bottom: 5px;
  color: #ba8bff;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.17em;
}
.mbf-tower-help__starter h3 {
  margin: 0;
  color: #eef1f5;
  font-size: 22px;
  line-height: 1.1;
}
.mbf-tower-help__starter p {
  margin: 8px 0 0;
  color: #aab5c0;
  font-size: 13px;
  line-height: 1.55;
}
.mbf-tower-help__starter p b {
  color: #e5d6ff;
}
.mbf-tower-help__starter-preset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.mbf-tower-help__starter-preset span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid rgba(103, 136, 161, 0.34);
  background: rgba(4, 12, 22, 0.72);
  color: #d9e0e7;
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
}
.mbf-tower-help__section {
  padding: 28px 0 0;
  border-bottom: 1px solid rgba(76, 101, 123, 0.18);
}
.mbf-tower-help__section--last {
  border-bottom: 0;
}
.mbf-tower-help__section-title {
  display: grid;
  grid-template-columns: 45px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-bottom: 17px;
}
.mbf-tower-help__section-title > b {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(148, 84, 232, 0.48);
  background: rgba(65, 29, 105, 0.18);
  color: #ac79ed;
  font-size: 13px;
  letter-spacing: 0.08em;
}
.mbf-tower-help__section-title h3 {
  margin: 0;
  color: #e5e9ed;
  font-size: 19px;
  font-weight: 800;
  text-transform: uppercase;
}
.mbf-tower-help__section-title p {
  margin: 2px 0 0;
  color: #748390;
  font-size: 12px;
}
.mbf-tower-help__steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding-bottom: 28px;
}
.mbf-tower-help__step {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  gap: 12px;
  min-height: 116px;
  padding: 15px;
  border: 1px solid rgba(86, 115, 138, 0.28);
  background: linear-gradient(135deg, rgba(13, 25, 39, 0.84), rgba(5, 13, 23, 0.66));
}
.mbf-tower-help__step > i {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(76, 195, 240, 0.55);
  background: rgba(32, 122, 158, 0.1);
  color: #64d5ff;
  font-size: 13px;
  font-style: normal;
  font-weight: 850;
}
.mbf-tower-help__step h4 {
  margin: 0;
  color: #dce4eb;
  font-size: 14px;
  font-weight: 800;
}
.mbf-tower-help__step p {
  margin: 6px 0 0;
  color: #8e9ba7;
  font-size: 12px;
  line-height: 1.5;
}
.mbf-tower-help__step p b {
  color: #c7d1db;
}
.mbf-tower-help__info-grid {
  display: grid;
  gap: 10px;
  padding-bottom: 28px;
}
.mbf-tower-help__info-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mbf-tower-help__info-card {
  min-height: 156px;
  padding: 16px;
  border: 1px solid rgba(81, 114, 138, 0.3);
  background: rgba(8, 18, 30, 0.7);
}
.mbf-tower-help__info-card--danger {
  border-color: rgba(178, 72, 198, 0.38);
  background: linear-gradient(145deg, rgba(65, 23, 74, 0.22), rgba(8, 18, 30, 0.72));
}
.mbf-tower-help__info-card h4 {
  margin: 10px 0 0;
  color: #dde4e9;
  font-size: 14px;
}
.mbf-tower-help__info-card p {
  margin: 7px 0 0;
  color: #8997a3;
  font-size: 12px;
  line-height: 1.5;
}
.mbf-tower-help__info-card p b {
  color: #cab1ef;
}
.mbf-tower-help__info-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(151, 88, 232, 0.45);
  background: rgba(111, 54, 176, 0.1);
  color: #b77ced;
  font-size: 11px;
  font-weight: 900;
}
.mbf-tower-help__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-bottom: 14px;
}
.mbf-tower-help__panel {
  padding: 16px;
  border: 1px solid rgba(83, 111, 132, 0.28);
  background: rgba(8, 17, 28, 0.64);
}
.mbf-tower-help__panel > h4 {
  margin: 0 0 12px;
  color: #dfe6ec;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
}
.mbf-tower-help__panel > p {
  margin: 0;
  color: #9aa6b1;
  font-size: 12px;
  line-height: 1.55;
}
.mbf-tower-help__panel > p b {
  color: #e1d3f6;
}
.mbf-tower-help__panel > small {
  display: block;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(77, 103, 124, 0.22);
  color: #6f7e8b;
  font-size: 10px;
  line-height: 1.5;
}
.mbf-tower-help__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 33px;
  padding: 7px 0;
  border-top: 1px solid rgba(71, 96, 116, 0.18);
}
.mbf-tower-help__row:first-of-type {
  border-top: 0;
}
.mbf-tower-help__row strong {
  color: #ced7df;
  font-size: 12px;
}
.mbf-tower-help__row span {
  color: #83919d;
  font-size: 11px;
  text-align: right;
}
.mbf-tower-help__route-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-bottom: 28px;
}
.mbf-tower-help__route-cards article {
  padding: 16px;
  border: 1px solid rgba(119, 72, 192, 0.34);
  background: linear-gradient(135deg, rgba(54, 30, 91, 0.17), rgba(7, 16, 27, 0.74));
}
.mbf-tower-help__route-cards article + article {
  border-color: rgba(47, 162, 211, 0.36);
  background: linear-gradient(135deg, rgba(20, 87, 116, 0.15), rgba(7, 16, 27, 0.74));
}
.mbf-tower-help__route-cards span {
  display: inline-block;
  margin-bottom: 7px;
  color: #a178e4;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.15em;
}
.mbf-tower-help__route-cards article + article span {
  color: #55bee7;
}
.mbf-tower-help__route-cards h4 {
  margin: 0;
  color: #dde4ea;
  font-size: 14px;
}
.mbf-tower-help__route-cards p {
  margin: 7px 0 0;
  color: #8997a2;
  font-size: 12px;
  line-height: 1.5;
}
.mbf-tower-help__rewards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding-bottom: 12px;
}
.mbf-tower-help__rewards article {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(83, 110, 131, 0.28);
  background: rgba(8, 17, 28, 0.64);
}
.mbf-tower-help__rewards h4 {
  margin: 0;
  color: #dfe6ec;
  font-size: 13px;
}
.mbf-tower-help__rewards p {
  margin: 5px 0 0;
  color: #84929e;
  font-size: 11px;
  line-height: 1.48;
}
.mbf-tower-help__reward-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(143, 78, 223, 0.58);
  background: radial-gradient(circle, rgba(125, 63, 208, 0.24), rgba(12, 15, 30, 0.42));
  color: #be8df7;
  font-size: 10px;
  font-weight: 900;
}
.mbf-tower-help__reward-mark--violet::before {
  content: "◆";
  font-size: 17px;
}
.mbf-tower-help__reward-mark--cyan {
  border-color: rgba(56, 180, 229, 0.58);
  color: #5dd5ff;
}
.mbf-tower-help__reward-mark--white {
  border-color: rgba(183, 200, 214, 0.42);
  color: #d9e3eb;
  font-size: 19px;
}
.mbf-tower-help__notice {
  margin-bottom: 28px;
  padding: 13px 15px;
  border-left: 2px solid #9e5de8;
  background: rgba(78, 37, 114, 0.12);
}
.mbf-tower-help__notice strong {
  display: block;
  color: #c9b1ec;
  font-size: 12px;
  text-transform: uppercase;
}
.mbf-tower-help__notice p {
  margin: 5px 0 0;
  color: #8e9ca8;
  font-size: 11px;
  line-height: 1.5;
}
.mbf-tower-help__notice--blue {
  border-left-color: #3ab3e5;
  background: rgba(25, 87, 112, 0.11);
}
.mbf-tower-help__notice--blue strong {
  color: #8eddf8;
}
.mbf-tower-help__hq-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding-bottom: 12px;
}
.mbf-tower-help__hq-grid article {
  min-height: 92px;
  padding: 12px;
  border: 1px solid rgba(81, 110, 132, 0.28);
  background: rgba(8, 17, 28, 0.65);
}
.mbf-tower-help__hq-grid b {
  display: block;
  color: #dce4ea;
  font-size: 11px;
  line-height: 1.25;
}
.mbf-tower-help__hq-grid span {
  display: block;
  margin-top: 6px;
  color: #7f8e9a;
  font-size: 10px;
  line-height: 1.45;
}
.mbf-tower-help__orders {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding-bottom: 28px;
}
.mbf-tower-help__orders article {
  min-height: 104px;
  padding: 12px;
  border: 1px solid rgba(85, 112, 133, 0.28);
  background: rgba(8, 17, 28, 0.65);
}
.mbf-tower-help__orders article > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 34px;
}
.mbf-tower-help__orders b {
  color: #dce4ea;
  font-size: 11px;
}
.mbf-tower-help__orders small {
  color: #7e65a9;
  font-size: 8px;
  font-weight: 750;
  text-transform: uppercase;
}
.mbf-tower-help__orders span {
  display: block;
  margin-top: 8px;
  color: #82909b;
  font-size: 10px;
  line-height: 1.4;
}
.mbf-tower-help__faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding-bottom: 2px;
}
.mbf-tower-help__faq article {
  padding: 14px 15px;
  border: 1px solid rgba(80, 107, 128, 0.25);
  background: rgba(7, 16, 27, 0.57);
}
.mbf-tower-help__faq h4 {
  margin: 0;
  color: #d9e1e8;
  font-size: 12px;
}
.mbf-tower-help__faq p {
  margin: 5px 0 0;
  color: #82909c;
  font-size: 11px;
  line-height: 1.48;
}
.mbf-tower-help__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex: 0 0 auto;
  min-height: 68px;
  padding: 12px 28px;
  border-top: 1px solid rgba(85, 113, 134, 0.28);
  background: rgba(5, 13, 22, 0.98);
}
.mbf-tower-help__footer > span {
  color: #71808d;
  font-size: 11px;
}
.mbf-tower-help__footer > span b {
  color: #b68aee;
}
.mbf-tower-help__footer button {
  min-width: 130px;
  min-height: 39px;
  padding: 9px 22px;
  border: 1px solid #9b58eb;
  background: linear-gradient(180deg, rgba(100, 48, 158, 0.76), rgba(59, 26, 95, 0.88));
  box-shadow: 0 0 16px rgba(127, 54, 209, 0.18);
  color: #f1ebf7;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.18s ease, transform 0.18s ease;
}
.mbf-tower-help__footer button:hover,
.mbf-tower-help__footer button:focus-visible {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .mbf-abyss-tower__help-trigger {
    right: 1px;
    width: 31px;
    height: 31px;
  }
  .mbf-abyss-tower__help-trigger svg {
    width: 23px;
    height: 23px;
  }
  .mbf-tower-help {
    align-items: flex-start;
    padding: 8px;
  }
  .mbf-tower-help__dialog {
    width: 100%;
    max-height: calc(100svh - 16px);
    -webkit-clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
            clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  }
  .mbf-tower-help__corner {
    width: 36px;
    height: 5px;
  }
  .mbf-tower-help__corner--left {
    left: 12px;
  }
  .mbf-tower-help__corner--right {
    right: 12px;
  }
  .mbf-tower-help__close {
    top: 13px;
    right: 12px;
    width: 32px;
    height: 32px;
  }
  .mbf-tower-help__close span {
    top: 15px;
    left: 6px;
    width: 20px;
  }
  .mbf-tower-help__header {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 11px;
    min-height: 96px;
    padding: 16px 48px 15px 14px;
  }
  .mbf-tower-help__header small {
    margin-bottom: 3px;
    font-size: 8px;
    letter-spacing: 0.13em;
  }
  .mbf-tower-help__header h2 {
    font-size: clamp(19px, 5.7vw, 26px);
    line-height: 1.08;
  }
  .mbf-tower-help__header p {
    margin-top: 5px;
    font-size: 10px;
    line-height: 1.4;
  }
  .mbf-tower-help__header-icon {
    width: 44px;
    height: 44px;
    font-size: 25px;
  }
  .mbf-tower-help__scroll {
    padding: 13px 12px 20px;
  }
  .mbf-tower-help__starter {
    grid-template-columns: 1fr;
    gap: 13px;
    padding: 14px;
  }
  .mbf-tower-help__starter h3 {
    font-size: 17px;
  }
  .mbf-tower-help__starter p {
    font-size: 11px;
  }
  .mbf-tower-help__starter-preset {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }
  .mbf-tower-help__starter-preset span {
    min-height: 31px;
    padding: 5px 3px;
    font-size: 8px;
  }
  .mbf-tower-help__section {
    padding-top: 21px;
  }
  .mbf-tower-help__section-title {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
    margin-bottom: 12px;
  }
  .mbf-tower-help__section-title > b {
    width: 32px;
    height: 32px;
    font-size: 10px;
  }
  .mbf-tower-help__section-title h3 {
    font-size: 14px;
  }
  .mbf-tower-help__section-title p {
    font-size: 9px;
  }
  .mbf-tower-help__steps, .mbf-tower-help__columns, .mbf-tower-help__route-cards, .mbf-tower-help__rewards, .mbf-tower-help__faq {
    grid-template-columns: 1fr;
  }
  .mbf-tower-help__steps {
    gap: 7px;
    padding-bottom: 21px;
  }
  .mbf-tower-help__step {
    grid-template-columns: 29px minmax(0, 1fr);
    gap: 9px;
    min-height: auto;
    padding: 11px;
  }
  .mbf-tower-help__step > i {
    width: 27px;
    height: 27px;
    font-size: 10px;
  }
  .mbf-tower-help__step h4 {
    font-size: 12px;
  }
  .mbf-tower-help__step p {
    margin-top: 4px;
    font-size: 10px;
    line-height: 1.43;
  }
  .mbf-tower-help__info-grid--three {
    grid-template-columns: 1fr;
  }
  .mbf-tower-help__info-grid {
    gap: 7px;
    padding-bottom: 21px;
  }
  .mbf-tower-help__info-card {
    min-height: auto;
    padding: 12px;
  }
  .mbf-tower-help__info-card h4 {
    margin-top: 7px;
    font-size: 12px;
  }
  .mbf-tower-help__info-card p {
    margin-top: 4px;
    font-size: 10px;
    line-height: 1.45;
  }
  .mbf-tower-help__info-icon {
    width: 26px;
    height: 26px;
    font-size: 9px;
  }
  .mbf-tower-help__columns {
    gap: 7px;
    padding-bottom: 9px;
  }
  .mbf-tower-help__panel {
    padding: 12px;
  }
  .mbf-tower-help__panel > h4 {
    margin-bottom: 8px;
    font-size: 12px;
  }
  .mbf-tower-help__panel > p,
  .mbf-tower-help__panel > small {
    font-size: 10px;
  }
  .mbf-tower-help__row {
    min-height: 28px;
    padding: 5px 0;
  }
  .mbf-tower-help__row strong {
    font-size: 10px;
  }
  .mbf-tower-help__row span {
    font-size: 9px;
  }
  .mbf-tower-help__route-cards {
    gap: 7px;
    padding-bottom: 21px;
  }
  .mbf-tower-help__route-cards article {
    padding: 12px;
  }
  .mbf-tower-help__route-cards h4 {
    font-size: 12px;
  }
  .mbf-tower-help__route-cards p {
    font-size: 10px;
  }
  .mbf-tower-help__rewards {
    gap: 7px;
  }
  .mbf-tower-help__rewards article {
    padding: 11px;
  }
  .mbf-tower-help__notice {
    margin-bottom: 21px;
    padding: 10px 12px;
  }
  .mbf-tower-help__notice strong {
    font-size: 10px;
  }
  .mbf-tower-help__notice p {
    font-size: 9px;
  }
  .mbf-tower-help__hq-grid, .mbf-tower-help__orders {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .mbf-tower-help__hq-grid {
    padding-bottom: 9px;
  }
  .mbf-tower-help__hq-grid article {
    min-height: 78px;
    padding: 9px;
  }
  .mbf-tower-help__orders {
    padding-bottom: 21px;
  }
  .mbf-tower-help__orders article {
    min-height: 91px;
    padding: 9px;
  }
  .mbf-tower-help__faq {
    gap: 6px;
  }
  .mbf-tower-help__faq article {
    padding: 10px 11px;
  }
  .mbf-tower-help__faq h4 {
    font-size: 10px;
  }
  .mbf-tower-help__faq p {
    font-size: 9px;
  }
  .mbf-tower-help__footer {
    min-height: 58px;
    padding: 9px 12px;
  }
  .mbf-tower-help__footer > span {
    display: none;
  }
  .mbf-tower-help__footer button {
    width: 100%;
    min-height: 38px;
  }
}
@media (max-width: 420px) {
  .mbf-tower-help__starter-preset {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mbf-tower-help__hq-grid, .mbf-tower-help__orders {
    grid-template-columns: 1fr;
  }
  .mbf-tower-help__hq-grid article, .mbf-tower-help__orders article {
    min-height: auto;
  }
}
/* =========================================================
   HQ — защита от низких desktop-экранов / масштаба браузера
   ========================================================= */
@media (min-width: 981px) and (max-height: 821px) {
  .mbf-tower-hq {
    align-items: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 16px;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
  }
  .mbf-tower-hq__backdrop {
    position: fixed;
  }
  .mbf-tower-hq__dialog {
    flex: 0 0 auto;
    height: 790px;
    min-height: 790px;
    max-height: none;
  }
}
.tabs--center {
  display: flex;
  justify-content: center;
}
.tabs__nav {
  display: flex;
  margin-bottom: 20px;
  overflow-x: auto;
}
.tabs__item {
  margin-right: 20px;
  padding: 9px;
  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;
}

.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;
  }
  .profile-cards .manga-cards__item-wrapper[data-is-special="1"] {
    position: relative;
    z-index: 5;
    overflow: visible;
  }
  .profile-cards .manga-cards__item-wrapper[data-is-special="1"] .manga-cards__item {
    padding: 0 !important;
    overflow: visible;
  }
  .profile-cards .manga-cards__item-wrapper[data-is-special="1"] .manga-cards__image {
    transform: scale(1.02);
    transform-origin: center center;
  }
}

.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;
}

#modal-user-info {
  text-align: left;
}
#modal-user-info .modal__content {
  width: 520px;
  max-width: 92vw;
}
#modal-user-info .modal__body {
  padding: 28px;
}
#modal-user-info .profile__info {
  display: block;
  margin: 0;
}
#modal-user-info .profile-info__header {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-right: 20px;
  margin-bottom: 24px;
}
#modal-user-info .profile-info__avatar {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 18px;
}
#modal-user-info .profile-info__identity {
  min-width: 0;
}
#modal-user-info .profile-info__eyebrow {
  color: var(--secondary-text-color);
  font-size: 12px;
  margin-bottom: 4px;
}
#modal-user-info .profile-info__name {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
#modal-user-info .profile-info__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
#modal-user-info .profile-info__badges span {
  background: var(--medium-bg);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
}
#modal-user-info .profile-info__badges .profile-info__pro {
  background: #7850d9;
  color: #fff;
  font-weight: 700;
}
#modal-user-info .profile-info__details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
}
#modal-user-info .profile-info__details div, #modal-user-info .profile-info__stats div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
#modal-user-info .profile-info__details span, #modal-user-info .profile-info__stats span, #modal-user-info .profile-info__club span {
  font-size: 12px;
  color: var(--secondary-text-color);
  line-height: 1.4;
}
#modal-user-info .profile-info__details strong {
  font-size: 14px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
#modal-user-info .profile-info__section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--secondary-text-color);
  margin: 18px 0 10px;
}
#modal-user-info .profile-info__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
#modal-user-info .profile-info__stats div {
  background: var(--medium-bg);
  border-radius: 12px;
  padding: 14px 12px;
}
#modal-user-info .profile-info__stats strong {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 600;
  overflow-wrap: anywhere;
}
#modal-user-info .profile-info__club {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);
  color: var(--main-text-color);
}
#modal-user-info .profile-info__club img {
  width: 36px;
  height: 36px;
  -o-object-fit: contain;
     object-fit: contain;
}
#modal-user-info .profile-info__club div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
#modal-user-info .profile-info__club strong {
  font-size: 14px;
  overflow-wrap: anywhere;
}
#modal-user-info .profile-info__club > span {
  text-align: right;
}
#modal-user-info .profile__info-footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin-top: 20px;
}
#modal-user-info .profile__info-footer > button, #modal-user-info .profile__info-footer > a, #modal-user-info .profile__info-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 12px;
  margin: 0 !important;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--medium-bg);
  color: var(--main-text-color);
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
}
#modal-user-info .profile__info-footer > button:hover, #modal-user-info .profile__info-footer > a:hover, #modal-user-info .profile__info-links a:hover {
  filter: brightness(0.96);
}
#modal-user-info .profile__info-footer > button:focus-visible, #modal-user-info .profile__info-footer > a:focus-visible, #modal-user-info .profile__info-links a:focus-visible {
  outline: 2px solid #8970de;
  outline-offset: 3px;
}
#modal-user-info .profile__info-footer .profile-info__note-button {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 24px 1fr;
  -moz-column-gap: 10px;
       column-gap: 10px;
  row-gap: 3px;
  text-align: left;
  padding: 14px 16px;
  background: rgba(124, 92, 255, 0.09);
  border-color: rgba(124, 92, 255, 0.25);
}
#modal-user-info .profile__info-footer .profile-info__note-button i {
  grid-row: 1/3;
  font-size: 22px;
  color: #9275e8;
}
#modal-user-info .profile__info-footer .profile-info__note-button span {
  font-weight: 600;
  font-size: 14px;
}
#modal-user-info .profile__info-footer .profile-info__note-button small {
  font-size: 12px;
  color: var(--secondary-text-color);
}
#modal-user-info .profile__info-links {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
#modal-user-info .profile__info-footer .profile__info--ignore-btn {
  grid-column: 1/-1;
  order: 2;
  background: transparent;
  border: 0;
  color: var(--secondary-text-color);
  font-size: 12px;
}
#modal-user-info .profile__info-old-names {
  grid-column: 1/-1;
  order: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px !important;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
  font-size: 12px;
  color: var(--secondary-text-color);
}
#modal-user-info .profile__info-old-names-item {
  padding: 4px 8px;
  background: var(--medium-bg);
  border-radius: 6px;
  overflow-wrap: anywhere;
  max-width: 100%;
}
#modal-user-info .profile__info-old-names-item:not(:last-child)::after {
  content: none;
}
@media (max-width: 480px) {
  #modal-user-info .modal__body {
    padding: 22px 16px 16px;
  }
  #modal-user-info .profile-info__header {
    gap: 12px;
  }
  #modal-user-info .profile-info__avatar {
    width: 52px;
    height: 52px;
    border-radius: 14px;
  }
  #modal-user-info .profile-info__name {
    font-size: 21px;
  }
  #modal-user-info .profile-info__stats div {
    padding: 12px 8px;
  }
  #modal-user-info .profile-info__stats strong {
    font-size: 20px;
  }
  #modal-user-info .profile-info__stats span {
    font-size: 11px;
  }
}

.profile-note {
  margin: 0 0 20px;
  padding: 18px 20px;
  border: 1px solid var(--border-color);
  border-left: 3px solid #9275e8;
  border-radius: 12px;
  background: var(--light-bg);
  color: var(--main-text-color);
}
.profile-note, .profile-note * {
  box-sizing: border-box;
}
.profile-note[hidden], .profile-note [hidden] {
  display: none !important;
}
.profile-note__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.profile-note__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
}
.profile-note__title i {
  color: #9275e8;
}
.profile-note__privacy {
  color: var(--secondary-text-color);
  font-size: 12px;
  line-height: 1.5;
  margin-top: 4px;
}
.profile-note__text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.6;
  margin-top: 12px;
}
.profile-note__edit, .profile-note__delete {
  border: 0;
  background: transparent;
  padding: 4px 0;
  font-size: 12px;
  cursor: pointer;
  color: var(--secondary-text-color);
}
.profile-note__edit:hover, .profile-note__delete:hover {
  color: var(--main-text-color);
}
.profile-note__form {
  margin-top: 16px;
}
.profile-note__form label {
  display: block;
  font-size: 13px;
  margin-bottom: 8px;
  line-height: 1.5;
}
.profile-note__form textarea {
  display: block;
  width: 100%;
  min-height: 110px;
  resize: vertical;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px;
  background: var(--medium-bg);
  color: var(--main-text-color);
  font: inherit;
  font-size: 14px;
  line-height: 1.6;
}
.profile-note__form textarea:focus {
  outline: 2px solid #9275e8;
  outline-offset: 2px;
}
.profile-note__form textarea::-moz-placeholder {
  color: var(--secondary-text-color);
}
.profile-note__form textarea::placeholder {
  color: var(--secondary-text-color);
}
.profile-note__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 12px;
  font-size: 12px;
  color: var(--secondary-text-color);
}
.profile-note__meta [data-note-count] {
  flex-shrink: 0;
  margin-left: auto;
}
.profile-note__error {
  color: #d75364;
  line-height: 1.5;
}
.profile-note__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.profile-note__actions .button {
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 13px;
}
.profile-note__delete {
  margin-left: auto;
}
.profile-note button:disabled, .profile-note textarea:disabled {
  opacity: 0.6;
  cursor: wait;
}
@media (max-width: 480px) {
  .profile-note {
    padding: 16px 14px;
  }
  .profile-note__form textarea {
    font-size: 16px;
  }
}

.manga-note {
  margin-bottom: 24px;
}
.manga-note__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  white-space: normal;
}
.manga-note__trigger[hidden] {
  display: none !important;
}
.manga-note__trigger i {
  font-size: 18px;
}
.manga-note .profile-note {
  margin: 0;
}

.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;
}

/* Скролл выпадающего меню профиля, если оно не помещается по высоте */
.tippy-box[data-theme=dropdown] .tippy-content {
  max-height: calc(100vh - 90px);
  max-height: calc(100dvh - 90px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* Chrome / Яндекс / Safari */
.tippy-box[data-theme=dropdown] .tippy-content::-webkit-scrollbar {
  width: 6px;
}

.tippy-box[data-theme=dropdown] .tippy-content::-webkit-scrollbar-track {
  background: transparent;
}

.tippy-box[data-theme=dropdown] .tippy-content::-webkit-scrollbar-thumb {
  background: rgba(120, 90, 180, 0.35);
  border-radius: 10px;
}

.tippy-box[data-theme=dropdown] .tippy-content::-webkit-scrollbar-thumb:hover {
  background: rgba(120, 90, 180, 0.55);
}

.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;
  }
}
.card-title-page--autumn {
  background: #090806;
}
.card-title-page--autumn .card-title-page__hero::after {
  background: linear-gradient(90deg, #090806 0%, rgba(9, 8, 6, 0.94) 34%, rgba(24, 15, 7, 0.42) 67%, rgba(10, 8, 6, 0.74) 100%), linear-gradient(180deg, rgba(28, 17, 7, 0.06) 0%, #090806 100%);
}
.card-title-page--autumn .card-title-page__badge {
  color: #ffe8bb;
  background: rgba(180, 92, 16, 0.34);
  border-color: rgba(245, 166, 67, 0.48);
  box-shadow: 0 0 28px rgba(245, 158, 11, 0.13), inset 0 1px 0 rgba(255, 222, 163, 0.08);
}
.card-title-page--autumn .card-title-page__title {
  text-shadow: 0 14px 34px rgba(0, 0, 0, 0.6), 0 0 34px rgba(220, 120, 28, 0.06);
}
.card-title-page--autumn .card-title-page__title span {
  color: #f6b34c;
  text-shadow: 0 0 18px rgba(234, 140, 36, 0.48);
}
.card-title-page--autumn .card-title-page__progress-card {
  background: rgba(20, 16, 11, 0.82);
  border-color: rgba(225, 137, 43, 0.34);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35), 0 0 32px rgba(221, 128, 26, 0.08);
}
.card-title-page--autumn .card-title-page__progress-top strong {
  color: #f0aa45;
  text-shadow: 0 0 16px rgba(240, 170, 69, 0.22);
}
.card-title-page--autumn .card-title-page__progress-line {
  background: rgba(255, 225, 178, 0.1);
}
.card-title-page--autumn .card-title-page__progress-line div {
  background: linear-gradient(90deg, #ba671d 0%, #e79332 48%, #f7bf5d 100%);
  box-shadow: 0 0 16px rgba(232, 145, 45, 0.48), 0 0 5px rgba(255, 202, 100, 0.35);
}
.card-title-page--autumn .card-title-page__counter {
  color: #ffd99a;
  background: rgba(174, 91, 18, 0.22);
  border-color: rgba(232, 145, 45, 0.38);
}
.card-title-page--autumn .card-title-page__tab:hover {
  border-color: rgba(232, 145, 45, 0.34);
}
.card-title-page--autumn .card-title-page__tab--active {
  background: rgba(169, 86, 18, 0.22);
  border-color: rgba(231, 142, 44, 0.48);
  box-shadow: 0 0 24px rgba(225, 125, 25, 0.09);
}
.card-title-page--autumn .card-title-page__tab--active span {
  color: #ffe1ae;
  background: rgba(164, 78, 13, 0.34);
}
.card-title-page--autumn .card-title-page__card--collected .card-title-page__card-image {
  border-color: rgba(236, 155, 57, 0.58);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35), 0 0 21px rgba(225, 130, 29, 0.16);
}
.card-title-page--autumn .card-title-page__card-status--collected {
  color: #ffe6b8;
  background: rgba(167, 82, 17, 0.68);
  border-color: rgba(246, 183, 91, 0.28);
}
.card-title-page--autumn .card-title-page__load {
  background: rgba(255, 197, 112, 0.035);
  border-color: rgba(238, 172, 83, 0.1);
}
.card-title-page--autumn .card-title-page__load-button {
  background: linear-gradient(135deg, #a85617, #d77c22 52%, #e99b3c);
  box-shadow: 0 0 22px rgba(213, 119, 30, 0.2);
}
.card-title-page--autumn .card-title-page__load-button:hover {
  box-shadow: 0 0 30px rgba(221, 130, 34, 0.3), 0 8px 24px rgba(0, 0, 0, 0.22);
}
.card-title-page--autumn .card-title-page__load-button span {
  color: #ffe4b7;
  background: rgba(67, 32, 7, 0.3);
}
.card-title-page--autumn .card-title-page__top-user {
  background: rgba(255, 191, 102, 0.035);
  border-color: rgba(255, 213, 151, 0.08);
}
.card-title-page--autumn .card-title-page__top-user:hover {
  border-color: rgba(232, 145, 45, 0.38);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.3), 0 0 20px rgba(218, 123, 28, 0.07);
}
.card-title-page--autumn .card-title-page__top-user--1 {
  border-color: rgba(246, 183, 65, 0.48);
  box-shadow: 0 0 24px rgba(238, 161, 42, 0.1);
}
.card-title-page--autumn .card-title-page__top-user--2 {
  border-color: rgba(219, 169, 99, 0.24);
}
.card-title-page--autumn .card-title-page__top-user--3 {
  border-color: rgba(190, 108, 43, 0.28);
}
.card-title-page--autumn .card-title-page__top-place {
  color: #ffdca3;
  background: rgba(168, 82, 16, 0.27);
}
.card-title-page--autumn .card-title-page__top-empty {
  background: rgba(255, 188, 91, 0.035);
  border-color: rgba(240, 179, 91, 0.09);
}

@media (max-width: 900px) {
  .card-title-page--autumn .card-title-page__hero::after {
    background: linear-gradient(90deg, rgba(9, 8, 6, 0.94), rgba(20, 13, 7, 0.55)), linear-gradient(180deg, rgba(18, 11, 5, 0.08) 0%, #090806 100%);
  }
}
.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;
}

.manga-reading-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.manga-reading-actions > .hot-chapters,
.manga-reading-actions > .manga-note {
  min-width: 0;
  margin-bottom: 0;
}
.manga-reading-actions .button-telegram {
  margin-bottom: 0;
}

.hot-chapters {
  margin-bottom: 20px;
}
.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;
  }
}
.attachment__caption {
  display: none;
}

.attachment-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0;
}

.attachment-gallery figure {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
}

.attachment-gallery a {
  display: block;
  width: 100%;
  height: 100%;
}

.attachment-gallery img {
  display: block;
  width: 100%;
  height: 320px;
  max-width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  border-radius: 12px;
}

.attachment-gallery figcaption {
  display: none;
}

@media (max-width: 768px) {
  .attachment-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .attachment-gallery img {
    height: 240px;
  }
}
@media (max-width: 480px) {
  .attachment-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0;
  }
  .attachment-gallery img {
    height: 180px;
    border-radius: 9px;
  }
  .attachment-gallery figure {
    border-radius: 9px;
  }
  /* Если картинок нечётное количество,
     последняя занимает всю ширину */
  .attachment-gallery figure:last-child:nth-child(odd) {
    grid-column: 1/-1;
  }
  .attachment-gallery figure:last-child:nth-child(odd) img {
    height: 210px;
  }
}
.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;
}

/* 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: 34px;
  height: 24px;
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pack-help__stat-icon .diamond {
  transform: scale(1.35);
  margin: 0;
}

.pack-help__stat-icon--dust {
  background: url("/assets/dust.png") center/32px auto no-repeat;
  transform: translateY(-1px);
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 480px) {
  .pack-help__stats {
    flex-direction: column;
    gap: 14px;
  }
  .pack-help__stat {
    width: 100%;
    gap: 8px;
  }
}
/* 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;
  display: flex;
  align-items: center;
  gap: 7px;
}

.lootbox-bonus__dust-icon {
  width: 30px;
  height: 22px;
  flex: 0 0 30px;
  background: url("/assets/dust.png") center/30px auto no-repeat;
  transform: translateY(-1px);
}

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

/* =========================================================
   PACK INFO — BALANCE + FAST OPEN
   ВСТАВИТЬ В САМЫЙ КОНЕЦ SCSS
   ========================================================= */
.pack-help__stats {
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  align-items: center;
  -moz-column-gap: 28px;
       column-gap: 28px;
  row-gap: 0;
  width: 100%;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid var(--border-color);
}

/* =========================================================
   BALANCE ITEMS
   ========================================================= */
.pack-help__stat {
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
  flex-shrink: 0;
  white-space: nowrap;
}

.pack-help__stat-icon {
  width: 34px;
  height: 24px;
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pack-help__stat-icon .diamond {
  margin: 0;
  transform: scale(1.35);
}

.pack-help__stat-icon--dust {
  background: url("/assets/dust.png") center/32px auto no-repeat;
  transform: translateY(-1px);
  border-radius: 0;
  box-shadow: none;
}

.pack-help__stat-label {
  font-size: 15px;
  color: var(--secondary-text-color);
  white-space: nowrap;
}

.pack-help__stat-value {
  font-size: 16px;
  font-weight: 800;
  color: var(--main-purple-color);
  white-space: nowrap;
}

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

/* =========================================================
   FAST OPEN
   ========================================================= */
.pack-help__fast {
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: auto;
  margin: 0;
  padding-left: 24px;
  border-left: 1px solid var(--border-color);
  border-top: 0;
}

.pack-help__fast-title {
  margin: 0;
  font-size: 15px;
  line-height: 26px;
  font-weight: 500;
  color: var(--main-text-color);
  white-space: nowrap;
}

/* =========================================================
   SWITCH
   ========================================================= */
.pack-fast-switch {
  position: relative;
  display: block;
  width: 46px;
  height: 26px;
  min-width: 46px;
  flex: 0 0 46px;
  margin: 0;
  cursor: pointer;
}

.pack-fast-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.pack-fast-switch__slider {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 999px;
  background: var(--border-color);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.pack-fast-switch__slider::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease;
}

.pack-fast-switch input:checked + .pack-fast-switch__slider {
  background: var(--main-purple-color);
}

.pack-fast-switch input:checked + .pack-fast-switch__slider::before {
  transform: translateX(20px);
}

.pack-fast-switch input:focus-visible + .pack-fast-switch__slider {
  box-shadow: 0 0 0 3px rgba(139, 0, 255, 0.16);
}

/* =========================================================
   TABLET / НЕБОЛЬШОЙ ЭКРАН
   Балансы остаются рядом.
   Быстрое открытие идёт НОРМАЛЬНО на всю строку.
   ========================================================= */
@media screen and (max-width: 900px) {
  .pack-help__stats {
    grid-template-columns: max-content max-content;
    -moz-column-gap: 28px;
         column-gap: 28px;
    row-gap: 14px;
    align-items: center;
  }
  .pack-help__fast {
    grid-column: 1/-1;
    justify-self: stretch;
    width: 100%;
    margin: 0;
    padding: 14px 0 0;
    border-left: 0;
    border-top: 1px solid var(--border-color);
    justify-content: flex-start;
  }
}
/* =========================================================
   MOBILE
   Всё одной колонкой.
   Свитч находится СРАЗУ после текста, не у правого края.
   ========================================================= */
@media screen and (max-width: 560px) {
  .pack-help__stats {
    grid-template-columns: 1fr;
    -moz-column-gap: 0;
         column-gap: 0;
    row-gap: 12px;
  }
  .pack-help__stat {
    width: 100%;
  }
  .pack-help__fast {
    grid-column: auto;
    width: 100%;
    margin: 2px 0 0;
    padding: 14px 0 0;
    gap: 12px;
    justify-content: flex-start;
    border-left: 0;
    border-top: 1px solid var(--border-color);
  }
  .pack-help__fast-title {
    font-size: 14px;
  }
  .pack-fast-switch {
    width: 44px;
    min-width: 44px;
    height: 25px;
    flex-basis: 44px;
  }
  .pack-fast-switch__slider::before {
    width: 19px;
    height: 19px;
  }
  .pack-fast-switch input:checked + .pack-fast-switch__slider::before {
    transform: translateX(19px);
  }
}
.pack-help__fast-info {
  display: flex;
  align-items: center;
}

.pack-help__fast-text {
  display: none;
}

/* Телефон */
@media screen and (max-width: 560px) {
  .pack-help__fast {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    width: 100%;
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
  }
  .pack-help__fast-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
  }
  .pack-help__fast-title {
    font-size: 14px;
    line-height: 1.3;
  }
  .pack-help__fast-text {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.3;
    color: var(--secondary-text-color);
  }
  .pack-fast-switch {
    margin-left: 0;
  }
}
/* =========================================================
   FAST PACK TOAST
   ========================================================= */
.pack-fast-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 99999;
  width: calc(100% - 30px);
  max-width: 430px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--light-bg);
  color: var(--main-text-color);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  text-align: left;
  opacity: 0;
  transform: translate(-50%, 20px) scale(0.98);
  transition: opacity 0.18s ease, transform 0.18s ease;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
}

/* появился */
.pack-fast-toast--visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

/* исчезает */
.pack-fast-toast--hide {
  opacity: 0;
  transform: translate(-50%, 12px) scale(0.98);
  pointer-events: none;
}

/* =========================================================
   IMAGE
   ========================================================= */
.pack-fast-toast__image {
  width: 46px;
  height: 68px;
  flex: 0 0 46px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--medium-bg);
}

.pack-fast-toast__image img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* =========================================================
   CONTENT
   ========================================================= */
.pack-fast-toast__content {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pack-fast-toast__eyebrow {
  margin-bottom: 3px;
  color: var(--main-purple-color);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pack-fast-toast__row {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}

.pack-fast-toast__name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--main-text-color);
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
}

/* номер экземпляра */
.pack-fast-toast__copy {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--medium-bg);
  color: var(--secondary-text-color);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* подсказка */
.pack-fast-toast__hint {
  margin-top: 4px;
  color: var(--secondary-text-color);
  font-size: 11px;
  line-height: 1.25;
}

/* стрелка */
.pack-fast-toast__arrow {
  flex: 0 0 auto;
  margin-left: 2px;
  color: var(--main-purple-color);
  font-size: 21px;
  line-height: 1;
  transition: transform 0.15s ease;
}

.pack-fast-toast:hover .pack-fast-toast__arrow {
  transform: translateX(3px);
}

/* =========================================================
   MOBILE
   ========================================================= */
@media screen and (max-width: 560px) {
  .pack-fast-toast {
    bottom: 12px;
    width: calc(100% - 20px);
    max-width: none;
    gap: 10px;
    padding: 9px 12px 9px 9px;
    border-radius: 14px;
  }
  .pack-fast-toast__image {
    width: 42px;
    height: 63px;
    flex-basis: 42px;
  }
  .pack-fast-toast__name {
    font-size: 14px;
  }
  .pack-fast-toast__copy {
    font-size: 10px;
    padding: 3px 6px;
  }
  .pack-fast-toast__hint {
    display: none;
  }
  .pack-fast-toast__arrow {
    font-size: 19px;
  }
}
/* =========================================================
   STICKER PACK AUTHOR
   ========================================================= */
.product-sticker__author {
  margin-bottom: 15px;
  padding: 12px 14px;
  background: var(--medium-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--main-border-radius);
}

.product-sticker__author-main {
  display: flex;
  align-items: center;
  gap: 10px;
}

.product-sticker__author-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(139, 0, 255, 0.09);
  color: var(--main-purple-color);
}

.product-sticker__author-icon .icon {
  font-size: 19px;
}

.product-sticker__author-content {
  min-width: 0;
}

.product-sticker__author-label {
  margin-bottom: 2px;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--secondary-text-color);
}

.product-sticker__author-name {
  overflow: hidden;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--main-text-color);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* =========================================================
   AUTHOR REWARD
   ========================================================= */
.product-sticker__author-reward {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
}

.product-sticker__author-reward-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-sticker__author-reward-icon .diamond {
  width: 16px;
  height: 16px;
  margin: 0;
}

.product-sticker__author-reward-text {
  min-width: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--secondary-text-color);
}

.product-sticker__author-reward-text strong {
  color: var(--main-text-color);
  font-weight: 600;
}

.product-sticker__author-reward-text span {
  color: var(--main-purple-color);
  font-weight: 700;
}

/* =========================================================
   MOBILE
   ========================================================= */
@media screen and (max-width: 560px) {
  .product-sticker__author {
    padding: 11px 12px;
  }
  .product-sticker__author-reward-text {
    font-size: 11px;
  }
}
.product-sticker__author-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--medium-bg);
}

.product-sticker__author-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.product-sticker__author-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.product-sticker__author-link:hover .product-sticker__author-name {
  color: var(--main-purple-color);
}

.product-sticker__author-name {
  transition: color 0.15s ease;
}

.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;
}

.pay__error {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 20px 0;
  padding: 14px 16px;
  background: rgba(220, 53, 69, 0.08);
  border: 1px solid rgba(220, 53, 69, 0.22);
  border-radius: 12px;
}

.pay__error-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #dc3545;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}

.pay__error-content {
  min-width: 0;
}

.pay__error-title {
  margin-bottom: 3px;
  font-size: 15px;
  font-weight: 600;
  color: #dc3545;
}

.pay__error-text {
  font-size: 14px;
  line-height: 1.45;
  color: #555;
}

.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;
}

.showcase__item:not([data-id])::before {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  content: attr(data-number);
  font-size: 30px;
  color: var(--secondary-text-color);
}

.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;
  }
}
.showcase-presets {
  margin: 20px 0 24px;
}
.showcase-presets__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 10px;
}
.showcase-presets__title {
  font-size: 18px;
  font-weight: 600;
}
.showcase-presets__hint {
  color: var(--secondary-text-color);
  font-size: 12px;
  text-align: right;
}
.showcase-presets__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.showcase-presets__item {
  position: relative;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(128, 128, 128, 0.22);
  border-radius: 9px;
  background: rgba(128, 128, 128, 0.05);
}
.showcase-presets__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  margin-bottom: 6px;
}
.showcase-presets__number {
  font-size: 13px;
  font-weight: 600;
}
.showcase-presets__count {
  color: var(--secondary-text-color);
  font-size: 11px;
}
.showcase-presets__preview {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 44px;
  margin-bottom: 7px;
  padding: 4px;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.07);
}
.showcase-presets__preview img {
  display: block;
  width: 27px;
  height: 40px;
  flex: 0 0 27px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 3px;
}
.showcase-presets__empty {
  width: 100%;
  color: var(--secondary-text-color);
  font-size: 11px;
  text-align: center;
}
.showcase-presets__buttons {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 24px;
  gap: 4px;
}
.showcase-presets__button {
  min-width: 0;
  height: 26px;
  padding: 0 5px;
  border: 0;
  border-radius: 5px;
  background: rgba(128, 128, 128, 0.1);
  color: var(--main-text-color);
  cursor: pointer;
  font-size: 10px;
  line-height: 26px;
  text-align: center;
}
.showcase-presets__button:hover {
  background: rgba(128, 128, 128, 0.18);
}
.showcase-presets__button--primary {
  background: var(--main-purple-color);
  color: #fff;
}
.showcase-presets__button--primary:hover {
  opacity: 0.9;
  background: var(--main-purple-color);
}
.showcase-presets__button:disabled {
  cursor: default;
  opacity: 0.35;
  pointer-events: none;
}
.showcase-presets__delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: rgba(128, 128, 128, 0.08);
  color: var(--secondary-text-color);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}
.showcase-presets__delete:hover {
  background: rgba(220, 60, 60, 0.12);
  color: #d84949;
}
.showcase-presets__delete:disabled {
  cursor: default;
  opacity: 0.25;
  pointer-events: none;
}

@media (max-width: 900px) {
  .showcase-presets__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .showcase-presets__top {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
  .showcase-presets__hint {
    text-align: left;
  }
  .showcase-presets__list {
    display: flex;
    gap: 8px;
    padding-bottom: 5px;
    overflow-x: auto;
  }
  .showcase-presets__item {
    width: 155px;
    min-width: 155px;
    flex: 0 0 155px;
  }
}
.showcase-presets__buttons {
  display: grid;
  grid-template-columns: repeat(3, 30px);
  justify-content: end;
  gap: 5px;
}
.showcase-presets__button, .showcase-presets__delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: rgba(128, 128, 128, 0.1);
  color: var(--main-text-color);
  cursor: pointer;
}
.showcase-presets__button svg, .showcase-presets__delete svg {
  display: block;
  width: 15px;
  height: 15px;
  fill: currentColor;
  pointer-events: none;
}
.showcase-presets__button:hover, .showcase-presets__delete:hover {
  background: rgba(128, 128, 128, 0.2);
}
.showcase-presets__button:disabled, .showcase-presets__delete:disabled {
  cursor: default;
  opacity: 0.3;
  pointer-events: none;
}
.showcase-presets__button--primary {
  background: var(--main-purple-color);
  color: #fff;
}
.showcase-presets__button--primary:hover {
  background: var(--main-purple-color);
  opacity: 0.85;
}
.showcase-presets__delete {
  color: var(--secondary-text-color);
}
.showcase-presets__delete:hover {
  background: rgba(220, 60, 60, 0.12);
  color: #d84949;
}

/* =========================================================
   WEB PUSH
   ========================================================= */
.settings-card--webpush {
  position: relative;
}

/* =========================================================
   УСТРОЙСТВО / СОСТОЯНИЕ PUSH
   ========================================================= */
.webpush-device {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
  margin-bottom: 22px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 16px;
  background: #f8f8f9;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

/* ---------------------------------------------------------
   Иконка
   --------------------------------------------------------- */
.webpush-device__icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: rgba(117, 88, 246, 0.12);
  font-size: 23px;
  line-height: 1;
  transition: background 0.2s, transform 0.2s;
}

/* ---------------------------------------------------------
   Текст
   --------------------------------------------------------- */
.webpush-device__content {
  flex: 1;
  min-width: 0;
}

.webpush-device__title {
  font-size: 14px;
  line-height: 1.3;
  font-weight: 700;
  color: #29292d;
}

.webpush-device__desc {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
  color: #858589;
}

/* =========================================================
   ОСНОВНАЯ КНОПКА
   ========================================================= */
.webpush-device__button {
  flex-shrink: 0;
  min-width: 125px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 12px;
  outline: none;
  /*
   * Не используем --primary-color,
   * чтобы кнопка гарантированно была видна
   * в светлой теме.
   */
  background: #7558f6;
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(117, 88, 246, 0.22);
  transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s, transform 0.15s, opacity 0.18s;
}

.webpush-device__button:hover {
  background: #6849ee;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(117, 88, 246, 0.3);
}

.webpush-device__button:active {
  transform: translateY(0);
  box-shadow: 0 3px 9px rgba(117, 88, 246, 0.2);
}

.webpush-device__button:focus-visible {
  box-shadow: 0 0 0 3px rgba(117, 88, 246, 0.18), 0 5px 14px rgba(117, 88, 246, 0.22);
}

.webpush-device__button:disabled {
  background: #7558f6;
  color: #ffffff;
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* =========================================================
   СОСТОЯНИЯ
   ========================================================= */
/* ---------------------------------------------------------
   PUSH ВКЛЮЧЕН
   --------------------------------------------------------- */
.webpush-device[data-state=enabled] {
  background: #f8fbf9;
  border-color: rgba(32, 180, 105, 0.2);
  box-shadow: inset 0 0 0 1px rgba(32, 180, 105, 0.03);
}

.webpush-device[data-state=enabled] .webpush-device__icon {
  background: rgba(32, 180, 105, 0.13);
}

/*
 * Когда всё включено, кнопка "Отключить"
 * специально менее акцентная.
 */
.webpush-device[data-state=enabled] .webpush-device__button {
  background: #eeeeef;
  color: #444449;
  border-color: rgba(0, 0, 0, 0.07);
  box-shadow: none;
}

.webpush-device[data-state=enabled] .webpush-device__button:hover {
  background: #e4e4e6;
  color: #29292d;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: none;
}

/* ---------------------------------------------------------
   PUSH ВЫКЛЮЧЕН
   --------------------------------------------------------- */
.webpush-device[data-state=disabled] {
  background: #f8f8f9;
  border-color: rgba(0, 0, 0, 0.07);
}

.webpush-device[data-state=disabled] .webpush-device__icon {
  background: rgba(117, 88, 246, 0.12);
}

/* ---------------------------------------------------------
   НУЖНО УСТАНОВИТЬ PWA НА IPHONE
   --------------------------------------------------------- */
.webpush-device[data-state=install] {
  background: #faf9ff;
  border-color: rgba(117, 88, 246, 0.17);
}

.webpush-device[data-state=install] .webpush-device__icon {
  background: rgba(117, 88, 246, 0.13);
}

/* ---------------------------------------------------------
   УВЕДОМЛЕНИЯ ЗАБЛОКИРОВАНЫ
   --------------------------------------------------------- */
.webpush-device[data-state=denied] {
  background: #fffafa;
  border-color: rgba(220, 70, 70, 0.2);
}

.webpush-device[data-state=denied] .webpush-device__icon {
  background: rgba(220, 70, 70, 0.1);
}

.webpush-device[data-state=denied] .webpush-device__button {
  background: #eeeeef;
  color: #66666b;
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: none;
}

/* ---------------------------------------------------------
   БРАУЗЕР НЕ ПОДДЕРЖИВАЕТ
   --------------------------------------------------------- */
.webpush-device[data-state=unsupported] {
  opacity: 0.72;
}

.webpush-device[data-state=unsupported] .webpush-device__button {
  background: #e5e5e7;
  color: #77777c;
  box-shadow: none;
}

/* ---------------------------------------------------------
   ЗАГРУЗКА
   --------------------------------------------------------- */
.webpush-device[data-state=loading] .webpush-device__button {
  background: #7558f6;
  color: #ffffff;
  opacity: 0.55;
  box-shadow: none;
}

/* =========================================================
   НАСТРОЙКИ ТИПОВ УВЕДОМЛЕНИЙ
   ========================================================= */
.webpush-preferences {
  width: 100%;
}

.webpush-preferences__title {
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;
  color: #29292d;
}

/* =========================================================
   DARK THEME
   ========================================================= */
body.dark .webpush-device {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.07);
}

body.dark .webpush-device__title,
body.dark .webpush-preferences__title {
  color: #f2f2f3;
}

body.dark .webpush-device__desc {
  color: rgba(255, 255, 255, 0.52);
}

body.dark .webpush-device__icon {
  background: rgba(117, 88, 246, 0.17);
}

/* enabled */
body.dark .webpush-device[data-state=enabled] {
  background: rgba(32, 180, 105, 0.045);
  border-color: rgba(32, 180, 105, 0.2);
}

body.dark .webpush-device[data-state=enabled] .webpush-device__icon {
  background: rgba(32, 180, 105, 0.14);
}

body.dark .webpush-device[data-state=enabled] .webpush-device__button {
  background: rgba(255, 255, 255, 0.09);
  color: #f2f2f3;
  border-color: rgba(255, 255, 255, 0.07);
}

body.dark .webpush-device[data-state=enabled] .webpush-device__button:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.1);
}

/* install */
body.dark .webpush-device[data-state=install] {
  background: rgba(117, 88, 246, 0.045);
  border-color: rgba(117, 88, 246, 0.18);
}

/* denied */
body.dark .webpush-device[data-state=denied] {
  background: rgba(220, 70, 70, 0.04);
  border-color: rgba(220, 70, 70, 0.18);
}

body.dark .webpush-device[data-state=denied] .webpush-device__icon {
  background: rgba(220, 70, 70, 0.11);
}

body.dark .webpush-device[data-state=denied] .webpush-device__button {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.65);
  border-color: rgba(255, 255, 255, 0.06);
}

/* unsupported */
body.dark .webpush-device[data-state=unsupported] .webpush-device__button {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.55);
}

/* =========================================================
   WEB PUSH GUIDE MODAL
   ========================================================= */
.webpush-guide {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.webpush-guide--active {
  display: flex;
}

/* ---------------------------------------------------------
   Overlay
   --------------------------------------------------------- */
.webpush-guide__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 14, 0.66);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ---------------------------------------------------------
   Modal
   --------------------------------------------------------- */
.webpush-guide__modal {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
  padding: 26px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
}

/* ---------------------------------------------------------
   Close
   --------------------------------------------------------- */
.webpush-guide__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f0f0f2;
  color: #505055;
  font-family: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s, transform 0.18s;
}

.webpush-guide__close:hover {
  background: #e6e6e9;
  transform: rotate(5deg);
}

/* ---------------------------------------------------------
   Bell
   --------------------------------------------------------- */
.webpush-guide__bell {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  border-radius: 16px;
  background: rgba(117, 88, 246, 0.12);
  font-size: 27px;
}

/* ---------------------------------------------------------
   Text
   --------------------------------------------------------- */
.webpush-guide__title {
  padding-right: 38px;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 800;
  color: #29292d;
}

.webpush-guide__desc {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: #7c7c81;
}

/* ---------------------------------------------------------
   Steps
   --------------------------------------------------------- */
.webpush-guide__steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.webpush-guide__step {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 11px 12px;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.045);
  border-radius: 13px;
  background: #f7f7f8;
  color: #3d3d42;
  font-size: 13px;
  line-height: 1.45;
}

.webpush-guide__step b,
.webpush-guide__step strong {
  font-weight: 700;
  color: #29292d;
}

/* ---------------------------------------------------------
   Number
   --------------------------------------------------------- */
.webpush-guide__number {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #7558f6;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(117, 88, 246, 0.18);
}

/* =========================================================
   GUIDE DARK THEME
   ========================================================= */
body.dark .webpush-guide__modal {
  background: #202024;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
}

body.dark .webpush-guide__close {
  background: rgba(255, 255, 255, 0.08);
  color: #e8e8ea;
}

body.dark .webpush-guide__close:hover {
  background: rgba(255, 255, 255, 0.13);
}

body.dark .webpush-guide__bell {
  background: rgba(117, 88, 246, 0.17);
}

body.dark .webpush-guide__title {
  color: #f2f2f3;
}

body.dark .webpush-guide__desc {
  color: rgba(255, 255, 255, 0.55);
}

body.dark .webpush-guide__step {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.76);
}

body.dark .webpush-guide__step b,
body.dark .webpush-guide__step strong {
  color: #ffffff;
}

/* =========================================================
   MOBILE
   ========================================================= */
@media screen and (max-width: 600px) {
  .webpush-device {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
    border-radius: 15px;
  }
  .webpush-device__icon {
    grid-column: 1;
    grid-row: 1;
    width: 48px;
    height: 48px;
  }
  .webpush-device__content {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    width: 100%;
  }
  .webpush-device__title {
    font-size: 14px;
  }
  .webpush-device__desc {
    font-size: 12px;
  }
  .webpush-device__button {
    grid-column: 1/-1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    height: 44px;
    margin-top: 2px;
    border-radius: 12px;
    font-size: 13px;
  }
  /* Guide превращается в bottom sheet */
  .webpush-guide {
    align-items: flex-end;
    padding: 0;
  }
  .webpush-guide__modal {
    max-width: none;
    padding: 22px 18px calc(26px + env(safe-area-inset-bottom));
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
  }
  .webpush-guide__title {
    font-size: 19px;
  }
  .webpush-guide__step {
    padding: 11px;
    font-size: 13px;
  }
}
/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */
@media screen and (max-width: 380px) {
  .webpush-device {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }
  .webpush-device__icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border-radius: 13px;
    font-size: 20px;
  }
  .webpush-device__title {
    font-size: 13px;
  }
  .webpush-device__desc {
    margin-top: 3px;
    font-size: 11px;
  }
  .webpush-guide__modal {
    padding-left: 15px;
    padding-right: 15px;
  }
}
.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 {
  margin-bottom: 14px;
  padding: 18px;
}
.battle-home__hero-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 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: 44px;
  height: 44px;
  border-radius: 14px;
  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: 23px;
  height: 23px;
}
.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: 24px;
  line-height: 1.1;
  font-weight: 700;
}
.battle-home__subtitle {
  margin: 5px 0 0;
  color: var(--bh-muted);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 600;
}
.battle-home__hero-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.battle-home__hero-link, .battle-home__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: 10px;
  border: 0;
  padding: 0 14px;
  font-size: 12px;
  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;
  flex-shrink: 0;
  min-height: 42px;
  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__modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.battle-home__mode {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--bh-border);
  border-radius: 15px;
  color: var(--bh-text);
  background: var(--bh-card);
  text-decoration: none;
}
.battle-home__mode:only-child {
  grid-column: 1/-1;
}
.battle-home__mode--cup {
  border-color: rgba(123, 77, 242, 0.2);
  background: linear-gradient(110deg, var(--bh-soft), rgba(201, 153, 66, 0.05));
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.battle-home__mode--cup:hover {
  border-color: var(--bh-main);
  box-shadow: 0 4px 16px rgba(123, 77, 242, 0.1);
}
.battle-home__mode--cup .battle-home__mode-icon {
  color: #c09548;
  background: rgba(201, 153, 66, 0.13);
}
.battle-home__mode:focus-visible {
  outline: 2px solid var(--bh-main);
  outline-offset: 3px;
}
.battle-home__mode-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--bh-main);
  background: var(--bh-soft);
}
.battle-home__mode-icon svg {
  width: 23px;
  height: 23px;
  stroke-width: 1.7;
}
.battle-home__mode-info {
  min-width: 0;
}
.battle-home__mode-info h2 {
  margin: 4px 0;
  color: var(--bh-text);
  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;
}
.battle-home__mode-info p {
  margin: 0;
  color: var(--bh-muted);
  font-size: 11px;
  line-height: 1.5;
}
.battle-home__mode-info p strong {
  color: var(--bh-main);
  font-weight: 700;
}
.battle-home__mode-caption {
  display: block;
  color: var(--bh-muted);
  font-size: 10px;
  line-height: 1.5;
  font-weight: 600;
}
.battle-home__mode-enter {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--bh-border);
  border-radius: 10px;
  color: var(--bh-main);
  background: var(--bh-card);
}
.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-head {
    flex-wrap: wrap;
  }
  .battle-home__modes {
    grid-template-columns: 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 {
    padding: 14px;
  }
  .battle-home__hero-head {
    gap: 14px;
  }
  .battle-home__hero-main {
    gap: 11px;
  }
  .battle-home__title {
    font-size: 22px;
  }
  .battle-home__hero-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }
  .battle-home__hero-link {
    min-height: 34px;
    padding: 0 7px;
    font-size: 10px;
  }
  .battle-home__modes {
    gap: 10px;
    margin-top: 14px;
  }
  .battle-home__mode {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
  }
  .battle-home__mode--auto {
    grid-template-columns: 32px minmax(0, 1fr);
  }
  .battle-home__mode--auto .battle-home__play {
    grid-column: 1/-1;
    width: 100%;
    margin-top: 2px;
  }
  .battle-home__mode-icon {
    width: 32px;
    height: 36px;
    border-radius: 10px;
  }
  .battle-home__mode-icon svg {
    width: 21px;
    height: 21px;
  }
  .battle-home__mode-info h2 {
    font-size: 15px;
  }
  .battle-home__mode-enter {
    width: 28px;
    height: 32px;
  }
  .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 {
  padding: 16px;
  border: 1px solid var(--bh-border);
  border-radius: 20px;
  background: var(--bh-card);
}
.battle-home__chests-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.battle-home__chests-head span {
  color: var(--bh-main);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.battle-home__chests-head strong {
  display: block;
  margin-top: 4px;
  color: var(--bh-text);
  font-size: 16px;
  font-weight: 700;
}
.battle-home__chests-head em {
  flex-shrink: 0;
  padding: 7px 10px;
  border: 1px solid var(--bh-border);
  border-radius: 10px;
  color: var(--bh-muted);
  background: var(--bh-card-2);
  font-size: 11px;
  font-style: normal;
}
.battle-home__chests-head em b {
  color: var(--bh-text);
  font-weight: 700;
}
.battle-home__chests-list {
  display: grid;
  gap: 10px;
}
.battle-home__chest {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  width: 100%;
  padding: 13px;
  border: 1px solid var(--bh-border);
  border-radius: 14px;
  color: var(--bh-text);
  background: var(--bh-card-2);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.battle-home__chest:hover {
  border-color: var(--bh-main);
  background: var(--bh-soft);
}
.battle-home__chest:focus-visible {
  outline: 2px solid var(--bh-main);
  outline-offset: 3px;
}
.battle-home__chest-icon {
  position: relative;
  width: 44px;
  height: 46px;
  margin-top: 2px;
  border-radius: 12px;
  background: rgba(201, 153, 66, 0.12);
}
.battle-home__chest-icon::before, .battle-home__chest-icon::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  border: 2px solid #c99a50;
  background: #69508b;
}
.battle-home__chest-icon::before {
  top: 20px;
  height: 19px;
  border-radius: 3px 3px 7px 7px;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.13);
}
.battle-home__chest-icon::after {
  top: 8px;
  height: 14px;
  border-radius: 9px 9px 3px 3px;
  background: #866aa7;
}
.battle-home__chest-icon i {
  position: absolute;
  z-index: 1;
  left: 19px;
  top: 21px;
  width: 7px;
  height: 10px;
  border: 1px solid #f2d399;
  border-radius: 2px;
  background: #c99a50;
}
.battle-home__chest-info {
  min-width: 0;
}
.battle-home__chest-info small {
  display: block;
  margin-top: 6px;
  color: var(--bh-muted);
  font-size: 11px;
  line-height: 1.5;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.battle-home__chest-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.battle-home__chest-label strong {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.battle-home__chest-count {
  flex-shrink: 0;
  padding: 3px 6px;
  border-radius: 6px;
  color: var(--bh-main);
  background: var(--bh-soft);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 700;
  white-space: nowrap;
}
.battle-home__chest-action {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  color: var(--bh-main);
  font-size: 11px;
  font-weight: 700;
}
.battle-home__chests-empty {
  margin: 0;
  padding: 12px;
  border-radius: 12px;
  color: var(--bh-muted);
  background: var(--bh-card-2);
  font-size: 12px;
  line-height: 1.5;
}
.battle-home__chests-empty[hidden] {
  display: none;
}
.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: rgba(15, 11, 23, 0.7);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.battle-home__chest-box {
  position: relative;
  z-index: 2;
  width: min(420px, 100%);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 22px;
  border: 1px solid var(--bh-border);
  border-radius: 24px;
  color: var(--bh-text);
  background: var(--bh-card);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
  text-align: center;
  animation: battleChestModalIn 0.2s ease both;
}
.battle-home__chest-overline {
  padding: 4px 30px;
  color: var(--bh-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.battle-home__chest-close {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 10;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: var(--bh-muted);
  background: var(--bh-card-2);
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}
.battle-home__chest-close:hover {
  color: var(--bh-main);
  background: var(--bh-soft);
}
.battle-home__chest-stage {
  position: relative;
  display: grid;
  place-items: center;
  height: 124px;
  margin: 10px 0 6px;
}
.battle-home__chest-rays {
  position: absolute;
  width: 146px;
  height: 118px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(215, 174, 92, 0.2), transparent 68%);
  pointer-events: none;
}
.battle-home__big-chest {
  position: relative;
  z-index: 3;
  width: 106px;
  height: 84px;
  transform-origin: center bottom;
}
.battle-home__big-chest-body {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 0;
  height: 55px;
  border: 3px solid #c99a50;
  border-radius: 6px 6px 13px 13px;
  background: linear-gradient(100deg, #82669f, #5a407b);
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.12), 0 8px 20px rgba(75, 45, 111, 0.16);
}
.battle-home__big-chest-body::before, .battle-home__big-chest-body::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 5px;
  background: #c99a50;
}
.battle-home__big-chest-body::before {
  left: 14px;
}
.battle-home__big-chest-body::after {
  right: 14px;
}
.battle-home__big-chest-lid {
  position: absolute;
  z-index: 4;
  left: 5px;
  right: 5px;
  bottom: 46px;
  height: 38px;
  border: 3px solid #d5ae6c;
  border-radius: 22px 22px 5px 5px;
  background: linear-gradient(100deg, #a08abb, #75568f);
  transform-origin: center bottom;
}
.battle-home__big-chest-lock {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 31px;
  width: 18px;
  height: 23px;
  transform: translateX(-50%);
  border: 2px solid #f0d49b;
  border-radius: 4px;
  background: #c99a50;
}
.battle-home__big-chest-lock::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 7px;
  width: 4px;
  height: 6px;
  border-radius: 3px;
  background: #765431;
}
.battle-home__big-chest.is-opening {
  animation: battleChestShake 0.7s ease infinite;
}
.battle-home__big-chest.is-opened .battle-home__big-chest-lid {
  animation: battleChestLidOpen 0.45s ease forwards;
}
.battle-home__big-chest.is-opened .battle-home__big-chest-lock {
  opacity: 0;
}
.battle-home__chest-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.battle-home__chest-burst i {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 5px;
  height: 10px;
  border-radius: 2px;
  opacity: 0;
  background: #d5ae6c;
}
.battle-home__chest-burst i:nth-child(2n) {
  background: #9a7cff;
}
.battle-home__chest-burst i:nth-child(3n) {
  background: #d07996;
}
.battle-home__big-chest.is-opened ~ .battle-home__chest-burst i {
  animation: battleChestConfetti 0.8s ease-out forwards;
}
.battle-home__chest-result {
  position: relative;
  z-index: 4;
}
.battle-home__chest-result > span {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 7px;
  color: var(--bh-main);
  background: var(--bh-soft);
  font-size: 10px;
  line-height: 1.4;
  font-weight: 700;
}
.battle-home__chest-result > strong {
  display: block;
  margin-top: 10px;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.battle-home__chest-result > p {
  margin: 8px 0 0;
  color: var(--bh-muted);
  font-size: 12px;
  line-height: 1.5;
}
.battle-home__chest-modal.is-opened .battle-home__chest-result > span {
  color: #319273;
  background: rgba(49, 146, 115, 0.1);
}
.battle-home__reward-list {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}
.battle-home__reward-list:empty {
  display: none;
}
.battle-home__reward {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px;
  border: 1px solid var(--bh-border);
  border-radius: 12px;
  background: var(--bh-card-2);
  text-align: left;
  animation: battleRewardIn 0.3s ease backwards;
}
.battle-home__reward-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: #bd8e39;
  background: rgba(201, 153, 66, 0.12);
  font-size: 19px;
}
.battle-home__reward-icon img {
  width: 25px;
  height: 25px;
  -o-object-fit: contain;
     object-fit: contain;
}
.battle-home__reward-copy {
  min-width: 0;
}
.battle-home__reward-copy strong,
.battle-home__reward-copy small {
  display: block;
  overflow-wrap: anywhere;
}
.battle-home__reward-copy strong {
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
}
.battle-home__reward-copy small {
  margin-top: 2px;
  color: var(--bh-muted);
  font-size: 10px;
  line-height: 1.4;
}
.battle-home__reward-amount {
  color: var(--bh-text);
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}
.battle-home__chest-error {
  margin: 14px 0 0;
  padding: 10px;
  border-radius: 10px;
  color: #cf536d;
  background: rgba(207, 83, 109, 0.1);
  font-size: 12px;
  line-height: 1.5;
}
.battle-home__chest-error[hidden] {
  display: none;
}
.battle-home__chest-open-btn {
  width: 100%;
  min-height: 44px;
  margin-top: 20px;
  padding: 10px 16px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: var(--bh-main);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.battle-home__chest-open-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

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

@keyframes battleChestModalIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes battleChestShake {
  0%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}
@keyframes battleChestLidOpen {
  to {
    transform: rotate(-16deg) translate(-3px, -16px);
  }
}
@keyframes battleRewardIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@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));
  }
}
.battle-home__chest-burst i:nth-child(1) {
  --x: -85px;
  --y: -45px;
  --r: 160deg;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 540px) {
  .battle-home__chests {
    padding: 14px;
  }
  .battle-home__chest {
    gap: 10px;
    padding: 11px;
  }
  .battle-home__chest-box {
    padding: 20px 16px;
    border-radius: 20px;
  }
  .battle-home__chest-result > strong {
    font-size: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .battle-home__chest-box, .battle-home__reward, .battle-home__big-chest.is-opening, .battle-home__big-chest.is-opened .battle-home__big-chest-lid, .battle-home__big-chest.is-opened ~ .battle-home__chest-burst i {
    animation: none;
  }
  .battle-home__big-chest.is-opened .battle-home__big-chest-lid {
    transform: rotate(-16deg) translate(-3px, -16px);
  }
}
.battle-home__energy {
  margin-top: 8px;
  padding: 7px 8px;
  border-radius: 12px;
  background: rgba(123, 77, 242, 0.08);
}
.battle-home__energy div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}
.battle-home__energy span {
  color: var(--bh-muted);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}
.battle-home__energy b {
  color: var(--bh-main);
  font-size: 11px;
  font-weight: 800;
}
.battle-home__energy i {
  display: block;
  overflow: hidden;
  height: 6px;
  border-radius: 999px;
  background: var(--bh-line);
}
.battle-home__energy em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--bh-pink), var(--bh-main));
}
.battle-home__energy--tired {
  background: rgba(181, 101, 141, 0.12);
}
.battle-home__energy--tired b {
  color: var(--bh-pink);
}
.battle-home__energy--tired em {
  background: var(--bh-pink);
}

.battle-home__fighter-stats--tired span {
  background: rgba(181, 101, 141, 0.12);
}
.battle-home__fighter-stats--tired b {
  color: var(--bh-pink);
}

.battle-home__banned-seal {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(181, 101, 141, 0.24);
  border-radius: 18px;
  background: linear-gradient(135deg, var(--bh-soft-pink), var(--bh-soft));
  cursor: help;
}

.battle-home__banned-seal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, var(--bh-pink), var(--bh-main));
  font-size: 20px;
  font-weight: 900;
}

.battle-home__banned-seal-info {
  min-width: 0;
}

.battle-home__banned-seal-info span {
  display: block;
  color: var(--bh-main);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.battle-home__banned-seal-info strong {
  display: block;
  margin-top: 2px;
  color: var(--bh-text);
  font-size: 14px;
  font-weight: 800;
}

.battle-home__banned-seal-info em {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--bh-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.battle-finish-panel__card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(197, 151, 255, 0.3);
  border-radius: 12px;
  background: rgba(137, 83, 228, 0.1);
  text-align: left;
}
.battle-finish-panel__card img {
  flex: 0 0 48px;
  width: 48px;
  height: 68px;
  max-width: 48px;
  min-width: 0;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 6px;
}
.battle-finish-panel__card div {
  flex: 1 1 0;
  min-width: 0;
}
.battle-finish-panel__card span, .battle-finish-panel__card strong, .battle-finish-panel__card small {
  display: block;
  overflow-wrap: anywhere;
}
.battle-finish-panel__card span {
  color: #c8b3e5;
  font-size: 12px;
}
.battle-finish-panel__card strong {
  margin: 4px 0;
  color: #fff;
  font-size: 16px;
  line-height: 1.25;
}
.battle-finish-panel__card small {
  color: #aca2ba;
  font-size: 12px;
}

.battle-tournament {
  --cup-bg: var(--body-bg, #f5f3f8);
  --cup-card: var(--block-bg, #fff);
  --cup-text: var(--text-color, #272134);
  --cup-muted: var(--text-muted, #898092);
  --cup-main: var(--main-color, #7b4df2);
  --cup-soft: rgba(123, 77, 242, .07);
  --cup-line: rgba(92, 74, 122, .14);
  --cup-win: #34835f;
  --cup-win-soft: rgba(52, 131, 95, .08);
  --cup-section-gap: 22px;
  padding: 24px 0 44px;
  color: var(--cup-text);
  background: var(--cup-bg);
}
body.dark .battle-tournament, .theme-dark .battle-tournament, [data-theme=dark] .battle-tournament {
  --cup-bg: var(--body-bg, #100f16);
  --cup-card: var(--block-bg, #191620);
  --cup-text: var(--text-color, #f6f1fb);
  --cup-muted: var(--text-muted, #aaa1b5);
  --cup-main: var(--main-color, #9a7cff);
  --cup-soft: rgba(154, 124, 255, .1);
  --cup-line: rgba(255, 255, 255, .12);
  --cup-win: #82cba1;
  --cup-win-soft: rgba(130, 203, 161, .08);
}
.battle-tournament *, .battle-tournament *::before, .battle-tournament *::after {
  box-sizing: border-box;
}
.battle-tournament [hidden] {
  display: none !important;
}
.battle-tournament button {
  font: inherit;
}
.battle-tournament a {
  text-decoration: none;
}
.battle-tournament a:focus-visible, .battle-tournament button:focus-visible {
  outline: 3px solid var(--cup-main);
  outline-offset: 4px;
}
.battle-tournament h1, .battle-tournament h2, .battle-tournament h3, .battle-tournament p {
  margin: 0;
}
.battle-tournament__inner {
  width: min(1320px, 100% - 40px);
  margin: 0 auto;
}
.battle-tournament__inner > section {
  margin: 0;
}
.battle-tournament__inner > section + section {
  margin-top: var(--cup-section-gap);
}
.battle-tournament__back {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 18px;
  color: var(--cup-muted);
  font-size: 14px;
  font-weight: 600;
}
.battle-tournament__eyebrow {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.battle-tournament__icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.battle-tournament__icon--solid {
  fill: currentColor;
  stroke: none;
}
.battle-tournament__hero {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  overflow: hidden;
  padding: 38px 46px;
  border-radius: 24px;
  color: #fff;
  background: radial-gradient(ellipse at 80% 80%, rgba(203, 157, 91, 0.18), transparent 45%), linear-gradient(120deg, #251a3d, #473060 65%, #352445);
}
.battle-tournament__hero::after {
  position: absolute;
  inset: -50% -10% -50% 45%;
  z-index: 0;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  box-shadow: 0 0 0 50px rgba(255, 255, 255, 0.025), 0 0 0 100px rgba(255, 255, 255, 0.025), 0 0 0 150px rgba(255, 255, 255, 0.025);
  content: "";
  pointer-events: none;
}
.battle-tournament__hero h1 {
  margin-top: 13px;
  font-size: clamp(28px, 3.1vw, 42px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.8px;
}
.battle-tournament__hero p {
  margin-top: 16px;
  color: #ded2ec;
  font-size: 16px;
  line-height: 1.7;
}
.battle-tournament__hero .battle-tournament__eyebrow {
  color: #cbb8e2;
}
.battle-tournament__hero-copy, .battle-tournament__hero-prize {
  position: relative;
  z-index: 1;
}
.battle-tournament__hero-labels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.battle-tournament__test-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid rgba(243, 211, 156, 0.3);
  border-radius: 6px;
  color: #f3d39c;
  background: rgba(243, 211, 156, 0.08);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  white-space: nowrap;
}
.battle-tournament__schedule {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
  font-size: 14px;
  line-height: 1.6;
  color: #d3c7e1;
}
.battle-tournament__schedule strong {
  color: #fff;
  font-weight: 700;
}
.battle-tournament__live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 7px;
  color: #e8deef;
  font-size: 13px;
  font-weight: 700;
}
.battle-tournament__live::before {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: #c3b1d5;
  content: "";
}
.battle-tournament__live.is-open {
  color: #c0eacd;
}
.battle-tournament__live.is-open::before {
  background: #95d2a8;
  box-shadow: 0 0 0 3px rgba(149, 210, 168, 0.12);
}
.battle-tournament__hero-prize {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 230px;
  padding-left: 36px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.battle-tournament__hero-prize span {
  margin-top: 8px;
  color: #d7c4e7;
  font-size: 14px;
  line-height: 1.5;
}
.battle-tournament__hero-prize strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  color: #f3d39c;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.5px;
}
.battle-tournament__hero-prize strong svg {
  width: 22px;
  height: 22px;
  flex-basis: 22px;
}
.battle-tournament__hero-prize small {
  margin-top: 4px;
  color: #e0c6a3;
  font-size: 14px;
}
.battle-tournament__hero-cup {
  width: 112px;
  height: 112px;
  fill: rgba(238, 197, 131, 0.07);
  stroke: #eaca95;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 6px 18px rgba(234, 202, 149, 0.12));
}
.battle-tournament__cup-star {
  fill: #eaca95;
  stroke-width: 1;
}
.battle-tournament__entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 30px;
  border: 1px solid var(--cup-line);
  border-radius: 18px;
  background: var(--cup-card);
}
.battle-tournament__entry h2 {
  margin-top: 7px;
  font-size: 24px;
  font-weight: 800;
}
.battle-tournament__entry p {
  margin-top: 8px;
  color: var(--cup-muted);
  font-size: 15px;
  line-height: 1.6;
}
.battle-tournament__entry .battle-tournament__eyebrow {
  color: var(--cup-main);
}
.battle-tournament__entry-copy {
  min-width: 0;
}
.battle-tournament__headquarters-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  color: var(--cup-main);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
}
.battle-tournament__entry-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.battle-tournament__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-width: 246px;
  min-height: 52px;
  padding: 13px 20px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: var(--cup-main);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.18s, transform 0.18s;
}
.battle-tournament__button svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.battle-tournament__button:hover:not(:disabled) {
  transform: translateY(-1px);
}
.battle-tournament__button:disabled {
  opacity: 0.5;
  cursor: default;
}
.battle-tournament__button.is-searching {
  color: var(--cup-main);
  background: var(--cup-soft);
  box-shadow: inset 0 0 0 1px var(--cup-line);
}
.battle-tournament__countdown {
  min-height: 20px;
  max-width: 300px;
  color: var(--cup-muted);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.battle-tournament__bracket-section {
  min-width: 0;
  padding: 28px 30px 20px;
  border: 1px solid var(--cup-line);
  border-radius: 18px;
  background: var(--cup-card);
}
.battle-tournament__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.battle-tournament__section-head h2 {
  margin-top: 6px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.battle-tournament__section-head .battle-tournament__eyebrow {
  color: var(--cup-muted);
}
.battle-tournament__progress {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-shrink: 0;
}
.battle-tournament__progress b {
  color: var(--cup-main);
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
}
.battle-tournament__progress span {
  color: var(--cup-muted);
  font-size: 14px;
}
.battle-tournament__bracket {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 132px;
  gap: 24px;
  align-items: center;
  margin-top: 32px;
}
.battle-tournament__round {
  position: relative;
  min-width: 0;
}
.battle-tournament__round::after {
  position: absolute;
  top: 98px;
  right: -24px;
  width: 24px;
  height: 2px;
  background: var(--cup-line);
  content: "";
}
.battle-tournament__round--won::after {
  background: var(--cup-win);
}
.battle-tournament__round-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  white-space: nowrap;
}
.battle-tournament__round-title span {
  color: var(--cup-muted);
  font-size: 12px;
  font-weight: 700;
}
.battle-tournament__round-title h3 {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
}
.battle-tournament__match {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--cup-line);
  border-radius: 11px;
  background: var(--cup-bg);
}
.battle-tournament__player {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 60px;
  padding: 12px 10px;
}
.battle-tournament__player--you {
  border-bottom: 1px solid var(--cup-line);
}
.battle-tournament__player img, .battle-tournament__player .battle-tournament__unknown {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 8px;
  -o-object-fit: cover;
     object-fit: cover;
}
.battle-tournament__player strong {
  min-width: 0;
  overflow: hidden;
  color: var(--cup-text);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.battle-tournament__player > span:last-child:not(.battle-tournament__unknown) {
  margin-left: auto;
  color: var(--cup-muted);
  font-size: 13px;
  flex-shrink: 0;
}
.battle-tournament__player--opponent strong {
  color: var(--cup-muted);
  font-size: 14px;
}
.battle-tournament__unknown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--cup-line);
  color: var(--cup-muted);
  font-size: 16px;
  font-weight: 600;
  background: var(--cup-card);
}
.battle-tournament__match-status {
  display: block;
  padding: 9px 8px;
  border-top: 1px solid var(--cup-line);
  color: var(--cup-muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  background: var(--cup-card);
}
.battle-tournament__round--current .battle-tournament__round-title h3 {
  color: var(--cup-main);
}
.battle-tournament__round--current .battle-tournament__match {
  border-color: var(--cup-main);
  box-shadow: 0 0 0 3px var(--cup-soft);
}
.battle-tournament__round--current .battle-tournament__match-status {
  color: var(--cup-main);
  background: var(--cup-soft);
  font-weight: 700;
}
.battle-tournament__round--won .battle-tournament__match {
  border-color: var(--cup-win);
}
.battle-tournament__round--won .battle-tournament__player--you {
  background: var(--cup-win-soft);
}
.battle-tournament__round--won .battle-tournament__player--you > span:last-child {
  color: var(--cup-win);
  font-size: 14px;
}
.battle-tournament__round--won .battle-tournament__match-status {
  color: var(--cup-win);
}
.battle-tournament__round--lost .battle-tournament__match {
  border-color: #c78189;
}
.battle-tournament__round--lost .battle-tournament__player--you > span:last-child {
  color: #c78189;
  font-size: 17px;
}
.battle-tournament__round--lost .battle-tournament__match-status {
  color: #bc6873;
}
.battle-tournament__round--upcoming .battle-tournament__match {
  opacity: 0.67;
}
.battle-tournament__finish {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 14px;
}
.battle-tournament__finish strong {
  font-size: 15px;
  font-weight: 700;
}
.battle-tournament__finish > span:last-child {
  color: var(--cup-muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.battle-tournament__finish.is-won .battle-tournament__finish-icon {
  box-shadow: 0 0 0 5px rgba(211, 171, 104, 0.09);
}
.battle-tournament__finish.is-won strong {
  color: #b28439;
}
.battle-tournament__finish-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border: 1px solid rgba(196, 156, 93, 0.35);
  border-radius: 50%;
  color: #bf9656;
  background: rgba(211, 171, 104, 0.08);
}
.battle-tournament__finish-icon svg {
  width: 46px;
  height: 46px;
  fill: rgba(211, 171, 104, 0.09);
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.battle-tournament__bracket-section > .battle-tournament__bracket-note {
  margin-top: 25px;
  color: var(--cup-muted);
  font-size: 14px;
  line-height: 1.6;
}
.battle-tournament__winners {
  min-width: 0;
  padding: 28px 30px;
  border: 1px solid var(--cup-line);
  border-radius: 18px;
  background: var(--cup-card);
  scroll-margin-top: 84px;
}
.battle-tournament__winners-date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 8px 11px;
  border: 1px solid var(--cup-line);
  border-radius: 8px;
  color: var(--cup-muted);
  background: var(--cup-bg);
  font-size: 14px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.battle-tournament__winners-date span {
  color: var(--cup-text);
  font-size: 12px;
  font-weight: 600;
}
.battle-tournament__winners-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}
.battle-tournament__winner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--cup-line);
  border-radius: 12px;
  background: var(--cup-bg);
}
.battle-tournament__winner-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: var(--cup-text);
}
.battle-tournament__winner-profile:hover .battle-tournament__winner-name {
  color: var(--cup-main);
}
.battle-tournament__winner-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  overflow: hidden;
  border-radius: 11px;
  color: var(--cup-main);
  background: var(--cup-soft);
  font-size: 18px;
  font-weight: 700;
}
.battle-tournament__winner-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.battle-tournament__winner-name {
  min-width: 0;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 700;
  overflow-wrap: anywhere;
  transition: color 0.18s ease;
}
.battle-tournament__winner-cups {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  color: #aa7d38;
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;
}
.battle-tournament__winner-cups svg {
  width: 20px;
  height: 20px;
  fill: rgba(211, 171, 104, 0.1);
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.battle-tournament__winner-cups b {
  font-size: 16px;
  font-weight: 700;
}
.battle-tournament__winners-empty {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding: 24px;
  border: 1px dashed var(--cup-line);
  border-radius: 12px;
  background: var(--cup-bg);
}
.battle-tournament__winners-empty > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  color: #bc9558;
  background: rgba(211, 171, 104, 0.1);
}
.battle-tournament__winners-empty > span svg {
  width: 22px;
  height: 22px;
  flex-basis: 22px;
}
.battle-tournament__winners-empty strong {
  display: block;
  font-size: 16px;
  line-height: 1.6;
}
.battle-tournament__winners-empty p {
  margin-top: 5px;
  color: var(--cup-muted);
  font-size: 14px;
  line-height: 1.6;
}
.battle-tournament__winners--loading [data-cup-winners-content] {
  opacity: 0.6;
}
.battle-tournament__winners-feedback {
  margin: 14px 0 0;
  color: var(--cup-muted);
  font-size: 14px;
  line-height: 1.5;
}
.battle-tournament__winners-feedback--error {
  color: #c94b57;
}
.battle-tournament__winners-pagination a:focus-visible, .battle-tournament #cup-winners-title:focus-visible {
  outline: 2px solid var(--cup-main);
  outline-offset: 4px;
}
.battle-tournament__winners-pagination .simple-pagination {
  margin: 24px 0 0;
}
.battle-tournament__winners-pagination .simple-pagination__btn {
  color: var(--cup-text);
  background: var(--cup-soft);
}
.battle-tournament__winners-pagination .simple-pagination__btn--primary {
  color: #fff;
  background: var(--cup-main);
}
.battle-tournament__rules {
  min-width: 0;
  padding: 28px 30px;
  border: 1px solid var(--cup-line);
  border-radius: 18px;
  background: var(--cup-card);
}
.battle-tournament__rules > .battle-tournament__eyebrow {
  color: var(--cup-muted);
}
.battle-tournament__rules h2 {
  margin-top: 6px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.battle-tournament__rules ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 32px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.battle-tournament__rules li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.battle-tournament__rules li > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-height: 32px;
  flex: 0 0 32px;
  border-radius: 8px;
  color: var(--cup-main);
  background: var(--cup-soft);
  font-size: 14px;
  font-weight: 700;
}
.battle-tournament__rules li strong {
  display: block;
  margin-top: 1px;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 700;
}
.battle-tournament__rules li p {
  margin-top: 5px;
  color: var(--cup-muted);
  font-size: 14px;
  line-height: 1.6;
}
.battle-tournament__rules li.battle-tournament__rule--timer {
  grid-column: 1/-1;
}
.battle-tournament__today {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 24px;
  padding-top: 17px;
  border-top: 1px solid var(--cup-line);
  color: var(--cup-muted);
  font-size: 14px;
  line-height: 1.6;
}
.battle-tournament__today strong {
  color: var(--cup-text);
}
.battle-tournament__today span {
  margin-left: auto;
  font-size: 13px;
}
@media (max-width: 1100px) {
  .battle-tournament__bracket {
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr)) 96px;
  }
  .battle-tournament__round::after {
    right: -16px;
    width: 16px;
  }
  .battle-tournament__bracket-section {
    padding: 26px 22px 20px;
  }
  .battle-tournament__player {
    gap: 6px;
    padding: 12px 8px;
  }
}
@media (max-width: 1000px) {
  .battle-tournament__hero {
    padding: 30px;
  }
  .battle-tournament__hero-prize {
    min-width: 150px;
    padding-left: 24px;
  }
  .battle-tournament__bracket {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 25px;
    padding: 0 8px;
  }
  .battle-tournament__round {
    display: block;
  }
  .battle-tournament__round::after {
    top: auto;
    right: 50%;
    bottom: -30px;
    width: 2px;
    height: 30px;
  }
  .battle-tournament__round-title {
    gap: 10px;
    margin-bottom: 12px;
  }
  .battle-tournament__round-title span {
    font-size: 12px;
  }
  .battle-tournament__round-title h3 {
    font-size: 16px;
  }
  .battle-tournament__player {
    gap: 10px;
    padding: 12px;
    min-height: 62px;
  }
  .battle-tournament__player strong {
    overflow: visible;
    font-size: 16px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .battle-tournament__player--opponent strong {
    font-size: 16px;
  }
  .battle-tournament__player > span:last-child:not(.battle-tournament__unknown) {
    font-size: 14px;
  }
  .battle-tournament__match-status {
    font-size: 14px;
    padding: 10px;
  }
  .battle-tournament__finish {
    margin-left: 0;
    padding-top: 0;
  }
  .battle-tournament__finish strong {
    font-size: 16px;
  }
  .battle-tournament__finish > span:last-child {
    font-size: 14px;
  }
  .battle-tournament__rules {
    padding: 26px;
  }
  .battle-tournament__winners {
    padding: 26px;
  }
  .battle-tournament__winners-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .battle-tournament__winner {
    flex-wrap: wrap;
  }
  .battle-tournament__winner-cups {
    margin-left: 54px;
  }
}
@media (max-width: 520px) {
  .battle-tournament {
    --cup-section-gap: 16px;
    padding: 18px 0 28px;
  }
  .battle-tournament__inner {
    width: calc(100% - 28px);
  }
  .battle-tournament__back {
    margin-bottom: 14px;
  }
  .battle-tournament__hero {
    gap: 20px;
    padding: 27px 22px 25px;
    border-radius: 18px;
    flex-wrap: wrap;
  }
  .battle-tournament__hero h1 {
    font-size: 29px;
  }
  .battle-tournament__hero p {
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.65;
  }
  .battle-tournament__hero-copy {
    width: 100%;
  }
  .battle-tournament__hero-prize {
    min-width: 0;
    width: 100%;
    padding: 20px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: grid;
    grid-template-columns: 60px 1fr;
    grid-template-rows: auto auto auto;
    -moz-column-gap: 16px;
         column-gap: 16px;
    align-items: start;
    justify-items: start;
  }
  .battle-tournament__hero-prize span {
    margin-top: 0;
    font-size: 14px;
  }
  .battle-tournament__hero-prize strong {
    margin-top: 4px;
    font-size: 30px;
  }
  .battle-tournament__hero-prize small {
    margin-top: 3px;
    font-size: 14px;
  }
  .battle-tournament__hero-cup {
    grid-row: 1/4;
    width: 60px;
    height: 65px;
    align-self: center;
  }
  .battle-tournament__schedule {
    gap: 12px;
    margin-top: 21px;
    font-size: 14px;
  }
  .battle-tournament__eyebrow {
    font-size: 12px;
    letter-spacing: 0.9px;
  }
  .battle-tournament__entry {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 22px;
    border-radius: 15px;
  }
  .battle-tournament__entry h2 {
    font-size: 22px;
  }
  .battle-tournament__entry p {
    font-size: 15px;
  }
  .battle-tournament__entry-actions {
    width: 100%;
  }
  .battle-tournament__button {
    width: 100%;
    min-width: 0;
    justify-content: space-between;
  }
  .battle-tournament__bracket-section {
    padding: 22px;
    border-radius: 15px;
  }
  .battle-tournament__section-head {
    flex-wrap: wrap;
    gap: 12px;
  }
  .battle-tournament__section-head h2 {
    font-size: 22px;
  }
  .battle-tournament__progress {
    gap: 6px;
  }
  .battle-tournament__progress b {
    font-size: 28px;
  }
  .battle-tournament__progress span {
    font-size: 14px;
  }
  .battle-tournament__bracket {
    padding: 0;
  }
  .battle-tournament__round-title h3 {
    white-space: normal;
    line-height: 1.5;
  }
  .battle-tournament__player {
    padding: 12px 10px;
    gap: 9px;
  }
  .battle-tournament__bracket-section > .battle-tournament__bracket-note {
    font-size: 14px;
    margin-top: 22px;
  }
  .battle-tournament__rules {
    padding: 22px;
    border-radius: 15px;
  }
  .battle-tournament__rules h2 {
    font-size: 22px;
  }
  .battle-tournament__rules ul {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .battle-tournament__today span {
    width: 100%;
    margin: 4px 0 0;
    font-size: 14px;
  }
  .battle-tournament__winners {
    padding: 22px;
    border-radius: 15px;
  }
  .battle-tournament__winners-list {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 20px;
  }
  .battle-tournament__winner {
    gap: 9px;
    padding: 14px;
  }
  .battle-tournament__winner-profile {
    gap: 10px;
  }
  .battle-tournament__winner-avatar {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border-radius: 10px;
  }
  .battle-tournament__winner-cups {
    margin-left: 48px;
  }
  .battle-tournament__winners-empty {
    align-items: flex-start;
    gap: 12px;
    padding: 18px 14px;
  }
  .battle-tournament__winners-empty > span {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    font-size: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .battle-tournament__button {
    transition: none;
  }
  .battle-tournament__button:hover:not(:disabled) {
    transform: none;
  }
}

.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-reroll__locks {
  margin-top: 12px;
  padding: 13px;
  border: 1px solid var(--reroll-border);
  border-radius: 18px;
  background: rgba(123, 77, 242, 0.055);
}
.battle-reroll__locks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.battle-reroll__locks-head strong,
.battle-reroll__locks-head small {
  display: block;
}
.battle-reroll__locks-head strong {
  font-size: 13px;
  font-weight: 900;
}
.battle-reroll__locks-head small {
  max-width: 280px;
  margin-top: 3px;
  color: var(--reroll-muted);
  font-size: 10px;
  line-height: 1.35;
  font-weight: 800;
}
.battle-reroll__locks-head > span {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--reroll-primary);
  background: rgba(123, 77, 242, 0.12);
  font-size: 11px;
  font-weight: 900;
}
.battle-reroll__locks-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 11px;
}
.battle-reroll__lock {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--reroll-border);
  border-radius: 13px;
  color: var(--reroll-text);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.32);
  text-align: left;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}
body.dark .battle-reroll__lock, .theme-dark .battle-reroll__lock, [data-theme=dark] .battle-reroll__lock {
  background: rgba(255, 255, 255, 0.04);
}
.battle-reroll__lock:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(215, 165, 66, 0.46);
}
.battle-reroll__lock:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
}
.battle-reroll__lock > span:last-child {
  min-width: 0;
}
.battle-reroll__lock strong,
.battle-reroll__lock small {
  display: block;
}
.battle-reroll__lock strong {
  overflow: hidden;
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.battle-reroll__lock small {
  margin-top: 2px;
  color: var(--reroll-muted);
  font-size: 8px;
  line-height: 1.25;
  font-weight: 800;
}
.battle-reroll__lock--active {
  border-color: rgba(215, 165, 66, 0.65);
  background: radial-gradient(circle at 20% 0%, rgba(215, 165, 66, 0.22), transparent 55%), rgba(215, 165, 66, 0.1);
  box-shadow: inset 0 0 18px rgba(215, 165, 66, 0.08), 0 0 18px rgba(215, 165, 66, 0.09);
}
.battle-reroll__lock-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border-radius: 9px;
  background: rgba(123, 77, 242, 0.12);
  font-size: 13px;
}
.battle-reroll__lock--active .battle-reroll__lock-icon {
  background: rgba(215, 165, 66, 0.18);
}
.battle-reroll__locks-cost {
  margin-top: 10px;
  color: var(--reroll-muted);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}
.battle-reroll__locks-cost strong {
  color: var(--reroll-gold);
  font-size: 13px;
  font-weight: 900;
}
.battle-reroll__button small b {
  font: inherit;
}
@media (max-width: 640px) {
  .battle-reroll__locks-list {
    grid-template-columns: 1fr;
  }
}

.battle-reroll__stat--locked {
  border: 1px solid rgba(215, 165, 66, 0.48);
  background: radial-gradient(circle at 50% 0%, rgba(215, 165, 66, 0.18), transparent 62%), rgba(215, 165, 66, 0.08);
  box-shadow: inset 0 0 22px rgba(215, 165, 66, 0.08), 0 0 18px rgba(215, 165, 66, 0.08);
  /*
   * Перебиваем цвет, который приходит
   * от новой редкости потенциала.
   */
  /*
   * Убираем переливающуюся ауру mythic,
   * legendary и epic.
   */
}
.battle-reroll__stat--locked strong {
  color: var(--reroll-gold) !important;
  text-shadow: 0 0 10px rgba(215, 165, 66, 0.42), 0 0 24px rgba(215, 165, 66, 0.22) !important;
  /*
   * Убираем анимацию редкости,
   * потому что значение не было выброшено заново.
   */
  animation: none !important;
}
.battle-reroll__stat--locked::before, .battle-reroll__stat--locked::after {
  display: none !important;
  animation: none !important;
}
.battle-reroll__locked-label {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  margin-top: 8px !important;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--reroll-gold) !important;
  background: rgba(215, 165, 66, 0.14);
  font-size: 10px !important;
  line-height: 22px;
  font-weight: 900 !important;
}

body.dark .battle-reroll, .theme-dark .battle-reroll, [data-theme=dark] .battle-reroll {
  /*
   * Общий блок результата.
   */
  /*
   * Обычные карточки характеристик.
   * Убираем светло-серую заливку.
   */
  /*
   * Залоченная характеристика.
   * Делаем её тёмной, а не серой.
   */
  /*
   * Плашка "Сохранено".
   */
  /*
   * Блок печати.
   */
  /*
   * Блок выбора локов ниже результата.
   */
}
body.dark .battle-reroll .battle-reroll__result-card, .theme-dark .battle-reroll .battle-reroll__result-card, [data-theme=dark] .battle-reroll .battle-reroll__result-card {
  border-color: rgba(215, 165, 66, 0.24);
  background: radial-gradient(circle at 50% 0%, rgba(123, 77, 242, 0.1), transparent 48%), rgba(38, 27, 50, 0.92);
  box-shadow: inset 0 0 30px rgba(123, 77, 242, 0.06), 0 14px 32px rgba(0, 0, 0, 0.22);
}
body.dark .battle-reroll .battle-reroll__stat, .theme-dark .battle-reroll .battle-reroll__stat, [data-theme=dark] .battle-reroll .battle-reroll__stat {
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: radial-gradient(circle at 50% 0%, var(--potential-soft), transparent 62%), rgba(52, 39, 68, 0.88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), inset 0 0 24px rgba(0, 0, 0, 0.1);
}
body.dark .battle-reroll .battle-reroll__stat span, .theme-dark .battle-reroll .battle-reroll__stat span, [data-theme=dark] .battle-reroll .battle-reroll__stat span {
  color: rgba(235, 224, 242, 0.62);
}
body.dark .battle-reroll .battle-reroll__stat small, .theme-dark .battle-reroll .battle-reroll__stat small, [data-theme=dark] .battle-reroll .battle-reroll__stat small {
  color: rgba(224, 211, 232, 0.7);
}
body.dark .battle-reroll .battle-reroll__stat--locked, .theme-dark .battle-reroll .battle-reroll__stat--locked, [data-theme=dark] .battle-reroll .battle-reroll__stat--locked {
  border-color: rgba(215, 165, 66, 0.48);
  background: radial-gradient(circle at 50% 0%, rgba(215, 165, 66, 0.16), transparent 64%), linear-gradient(145deg, rgba(79, 63, 76, 0.92), rgba(55, 43, 64, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), inset 0 0 26px rgba(215, 165, 66, 0.055), 0 0 16px rgba(215, 165, 66, 0.06);
}
body.dark .battle-reroll .battle-reroll__stat--locked strong, .theme-dark .battle-reroll .battle-reroll__stat--locked strong, [data-theme=dark] .battle-reroll .battle-reroll__stat--locked strong {
  color: #e7b33f !important;
  text-shadow: 0 0 10px rgba(215, 165, 66, 0.28), 0 0 22px rgba(215, 165, 66, 0.12) !important;
}
body.dark .battle-reroll .battle-reroll__locked-label, .theme-dark .battle-reroll .battle-reroll__locked-label, [data-theme=dark] .battle-reroll .battle-reroll__locked-label {
  color: #e8b744 !important;
  border: 1px solid rgba(215, 165, 66, 0.2);
  background: rgba(215, 165, 66, 0.11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  text-shadow: none;
}
body.dark .battle-reroll .battle-reroll__seal, .theme-dark .battle-reroll .battle-reroll__seal, [data-theme=dark] .battle-reroll .battle-reroll__seal {
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: radial-gradient(circle at 15% 0%, rgba(215, 165, 66, 0.06), transparent 42%), rgba(53, 40, 53, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}
body.dark .battle-reroll .battle-reroll__seal > span,
body.dark .battle-reroll .battle-reroll__seal .battle-reroll__seal-head > span, .theme-dark .battle-reroll .battle-reroll__seal > span,
.theme-dark .battle-reroll .battle-reroll__seal .battle-reroll__seal-head > span, [data-theme=dark] .battle-reroll .battle-reroll__seal > span,
[data-theme=dark] .battle-reroll .battle-reroll__seal .battle-reroll__seal-head > span {
  color: rgba(232, 219, 237, 0.72);
}
body.dark .battle-reroll .battle-reroll__seal > strong, .theme-dark .battle-reroll .battle-reroll__seal > strong, [data-theme=dark] .battle-reroll .battle-reroll__seal > strong {
  color: #fff7ff;
}
body.dark .battle-reroll .battle-reroll__seal > small, .theme-dark .battle-reroll .battle-reroll__seal > small, [data-theme=dark] .battle-reroll .battle-reroll__seal > small {
  color: rgba(224, 211, 232, 0.78);
}
body.dark .battle-reroll .battle-reroll__locks, .theme-dark .battle-reroll .battle-reroll__locks, [data-theme=dark] .battle-reroll .battle-reroll__locks {
  border-color: rgba(255, 255, 255, 0.08);
  background: radial-gradient(circle at 90% 0%, rgba(123, 77, 242, 0.1), transparent 38%), rgba(38, 28, 52, 0.9);
}
body.dark .battle-reroll .battle-reroll__lock, .theme-dark .battle-reroll .battle-reroll__lock, [data-theme=dark] .battle-reroll .battle-reroll__lock {
  border-color: rgba(255, 255, 255, 0.07);
  background: rgba(52, 39, 68, 0.82);
}
body.dark .battle-reroll .battle-reroll__lock:hover:not(:disabled), .theme-dark .battle-reroll .battle-reroll__lock:hover:not(:disabled), [data-theme=dark] .battle-reroll .battle-reroll__lock:hover:not(:disabled) {
  border-color: rgba(215, 165, 66, 0.34);
  background: rgba(61, 45, 78, 0.92);
}
body.dark .battle-reroll .battle-reroll__lock--active, .theme-dark .battle-reroll .battle-reroll__lock--active, [data-theme=dark] .battle-reroll .battle-reroll__lock--active {
  border-color: rgba(215, 165, 66, 0.48);
  background: radial-gradient(circle at 15% 0%, rgba(215, 165, 66, 0.16), transparent 56%), rgba(61, 47, 67, 0.94);
  box-shadow: inset 0 0 18px rgba(215, 165, 66, 0.045), 0 0 14px rgba(215, 165, 66, 0.045);
}
body.dark .battle-reroll .battle-reroll__lock-icon, .theme-dark .battle-reroll .battle-reroll__lock-icon, [data-theme=dark] .battle-reroll .battle-reroll__lock-icon {
  background: rgba(123, 77, 242, 0.16);
}
body.dark .battle-reroll .battle-reroll__lock--active .battle-reroll__lock-icon, .theme-dark .battle-reroll .battle-reroll__lock--active .battle-reroll__lock-icon, [data-theme=dark] .battle-reroll .battle-reroll__lock--active .battle-reroll__lock-icon {
  background: rgba(215, 165, 66, 0.15);
}

body.dark .battle-reroll .battle-reroll__stat strong, .theme-dark .battle-reroll .battle-reroll__stat strong, [data-theme=dark] .battle-reroll .battle-reroll__stat strong {
  text-shadow: 0 0 9px var(--potential-glow), 0 0 18px var(--potential-glow);
}
body.dark .battle-reroll .battle-reroll__stat--epic::before,
body.dark .battle-reroll .battle-reroll__stat--legendary::before,
body.dark .battle-reroll .battle-reroll__stat--mythic::before, .theme-dark .battle-reroll .battle-reroll__stat--epic::before,
.theme-dark .battle-reroll .battle-reroll__stat--legendary::before,
.theme-dark .battle-reroll .battle-reroll__stat--mythic::before, [data-theme=dark] .battle-reroll .battle-reroll__stat--epic::before,
[data-theme=dark] .battle-reroll .battle-reroll__stat--legendary::before,
[data-theme=dark] .battle-reroll .battle-reroll__stat--mythic::before {
  opacity: 0.35;
  filter: blur(22px);
}

.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,
.card-inventory-container--tower .card-filter-list__items,
.card-inventory-container--battle .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,
.card-inventory-container--tower .card-filter-list__card,
.card-inventory-container--battle .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,
.card-inventory-container--tower .card-filter-list__battle-box,
.card-inventory-container--battle .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,
.card-inventory-container--tower .card-filter-list__battle-seal-line,
.card-inventory-container--battle .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,
.card-inventory-container--tower .card-filter-list__battle-seal-line span,
.card-inventory-container--battle .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,
.card-inventory-container--tower .card-filter-list__battle-seal-line b,
.card-inventory-container--battle .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,
.card-inventory-container--tower .card-filter-list__battle-stats-line,
.card-inventory-container--battle .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,
.card-inventory-container--tower .card-filter-list__battle-stats-line div,
.card-inventory-container--battle .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,
.card-inventory-container--tower .card-filter-list__battle-stats-line span,
.card-inventory-container--tower .card-filter-list__battle-stats-line strong,
.card-inventory-container--battle .card-filter-list__battle-stats-line span,
.card-inventory-container--battle .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,
.card-inventory-container--tower .card-filter-list__battle-stats-line span,
.card-inventory-container--battle .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,
.card-inventory-container--tower .card-filter-list__battle-stats-line strong,
.card-inventory-container--battle .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);
}

#modal-edit-decor .profile-presets {
  color: var(--main-text-color);
  font-family: "Exo 2", Arial, sans-serif;
}
#modal-edit-decor .profile-presets [hidden] {
  display: none !important;
}
#modal-edit-decor .profile-presets__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
#modal-edit-decor .profile-presets__hint, #modal-edit-decor .profile-presets__status {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--secondary-text-color);
}
#modal-edit-decor .profile-presets__refresh, #modal-edit-decor .profile-presets__current {
  padding: 8px 0;
  color: var(--main-purple-color);
  font-size: 12px;
  cursor: pointer;
}
#modal-edit-decor .profile-presets__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
#modal-edit-decor .profile-presets__fields--appearance {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
#modal-edit-decor .profile-presets__field {
  display: block;
  min-width: 0;
  font-size: 13px;
}
#modal-edit-decor .profile-presets__field span {
  display: block;
  margin-bottom: 7px;
}
#modal-edit-decor .profile-presets__field input, #modal-edit-decor .profile-presets__field select {
  display: block;
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 13px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--main-text-color);
  font-family: "Exo 2", Arial, sans-serif;
  font-size: 13px;
}
#modal-edit-decor .profile-presets__field select option {
  background: var(--light-bg);
  color: var(--main-text-color);
}
#modal-edit-decor .profile-presets__link {
  margin-top: 14px;
}
#modal-edit-decor .profile-presets__preview {
  position: relative;
  height: 120px;
  margin-top: 16px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--light-bg);
}
#modal-edit-decor .profile-presets__cover {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#modal-edit-decor .profile-presets__avatar {
  position: absolute;
  bottom: 10px;
  left: 12px;
  width: 74px;
  height: 74px;
  border: 3px solid var(--dark-bg);
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
}
#modal-edit-decor .profile-presets__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
#modal-edit-decor .profile-presets__actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 42px;
  padding: 0 15px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--main-text-color);
  font-family: "Exo 2", Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
}
#modal-edit-decor .profile-presets__actions .profile-presets__apply {
  border-color: transparent;
  background: var(--purple-btn-bg);
  color: #fff;
}
#modal-edit-decor .profile-presets__actions .profile-presets__delete {
  color: #ffc8c8;
}
#modal-edit-decor .profile-presets button:disabled {
  opacity: 0.5;
  cursor: default;
}
@media only screen and (max-width: 560px) {
  #modal-edit-decor .profile-presets__header {
    flex-direction: column;
    gap: 2px;
  }
  #modal-edit-decor .profile-presets__fields, #modal-edit-decor .profile-presets__fields--appearance {
    grid-template-columns: 1fr;
  }
  #modal-edit-decor .profile-presets__actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  #modal-edit-decor .profile-presets__actions .button {
    width: 100%;
  }
}

.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:not(.profile-skin--44) .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:not(.profile-skin--44) {
  --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:not(.profile-skin--44) .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--video-28:not(.profile-skin--44) .header {
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
}
.profile-skin--video-28:not(.profile-skin--44) .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--video-28:not(.profile-skin--44) .profile__activity-bar, .profile-skin--video-28:not(.profile-skin--44) .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--video-28:not(.profile-skin--44) .profile__cut {
  display: none;
}
.profile-skin--video-28:not(.profile-skin--44).body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--video-28:not(.profile-skin--44).body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--video-28:not(.profile-skin--44).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:not(.profile-skin--44).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:not(.profile-skin--44).body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-28:not(.profile-skin--44) .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:not(.profile-skin--44) {
  --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:not(.profile-skin--44) .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--video-29:not(.profile-skin--44) .header {
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
}
.profile-skin--video-29:not(.profile-skin--44) .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--video-29:not(.profile-skin--44) .profile__activity-bar, .profile-skin--video-29:not(.profile-skin--44) .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--video-29:not(.profile-skin--44) .profile__cut {
  display: none;
}
.profile-skin--video-29:not(.profile-skin--44).body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--video-29:not(.profile-skin--44).body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--video-29:not(.profile-skin--44).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:not(.profile-skin--44).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:not(.profile-skin--44).body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-29:not(.profile-skin--44) .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:not(.profile-skin--44) {
  --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:not(.profile-skin--44) .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--video-30:not(.profile-skin--44) .header {
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
}
.profile-skin--video-30:not(.profile-skin--44) .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--video-30:not(.profile-skin--44) .profile__activity-bar, .profile-skin--video-30:not(.profile-skin--44) .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--video-30:not(.profile-skin--44) .profile__cut {
  display: none;
}
.profile-skin--video-30:not(.profile-skin--44).body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--video-30:not(.profile-skin--44).body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--video-30:not(.profile-skin--44).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:not(.profile-skin--44).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:not(.profile-skin--44).body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-30:not(.profile-skin--44) .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:not(.profile-skin--44) {
  --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:not(.profile-skin--44) .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--video-90:not(.profile-skin--44) .header {
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
}
.profile-skin--video-90:not(.profile-skin--44) .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--video-90:not(.profile-skin--44) .profile__activity-bar, .profile-skin--video-90:not(.profile-skin--44) .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--video-90:not(.profile-skin--44) .profile__cut {
  display: none;
}
.profile-skin--video-90:not(.profile-skin--44).body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--video-90:not(.profile-skin--44).body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--video-90:not(.profile-skin--44).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:not(.profile-skin--44).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:not(.profile-skin--44).body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-90:not(.profile-skin--44) .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:not(.profile-skin--44) {
  --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:not(.profile-skin--44) .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--video-91:not(.profile-skin--44) .header {
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
}
.profile-skin--video-91:not(.profile-skin--44) .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--video-91:not(.profile-skin--44) .profile__activity-bar, .profile-skin--video-91:not(.profile-skin--44) .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--video-91:not(.profile-skin--44) .profile__cut {
  display: none;
}
.profile-skin--video-91:not(.profile-skin--44).body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--video-91:not(.profile-skin--44).body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--video-91:not(.profile-skin--44).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:not(.profile-skin--44).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:not(.profile-skin--44).body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-91:not(.profile-skin--44) .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:not(.profile-skin--44) {
  --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:not(.profile-skin--44) .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--video-92:not(.profile-skin--44) .header {
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
}
.profile-skin--video-92:not(.profile-skin--44) .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--video-92:not(.profile-skin--44) .profile__activity-bar, .profile-skin--video-92:not(.profile-skin--44) .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--video-92:not(.profile-skin--44) .profile__cut {
  display: none;
}
.profile-skin--video-92:not(.profile-skin--44).body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--video-92:not(.profile-skin--44).body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--video-92:not(.profile-skin--44).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:not(.profile-skin--44).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:not(.profile-skin--44).body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-92:not(.profile-skin--44) .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:not(.profile-skin--44) {
  --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:not(.profile-skin--44) .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--video-93:not(.profile-skin--44) .header {
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
}
.profile-skin--video-93:not(.profile-skin--44) .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--video-93:not(.profile-skin--44) .profile__activity-bar, .profile-skin--video-93:not(.profile-skin--44) .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--video-93:not(.profile-skin--44) .profile__cut {
  display: none;
}
.profile-skin--video-93:not(.profile-skin--44).body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--video-93:not(.profile-skin--44).body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--video-93:not(.profile-skin--44).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:not(.profile-skin--44).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:not(.profile-skin--44).body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-93:not(.profile-skin--44) .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:not(.profile-skin--44) {
  --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:not(.profile-skin--44) .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--video-94:not(.profile-skin--44) .header {
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
}
.profile-skin--video-94:not(.profile-skin--44) .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--video-94:not(.profile-skin--44) .profile__activity-bar, .profile-skin--video-94:not(.profile-skin--44) .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--video-94:not(.profile-skin--44) .profile__cut {
  display: none;
}
.profile-skin--video-94:not(.profile-skin--44).body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--video-94:not(.profile-skin--44).body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--video-94:not(.profile-skin--44).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:not(.profile-skin--44).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:not(.profile-skin--44).body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-94:not(.profile-skin--44) .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:not(.profile-skin--44) {
  --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:not(.profile-skin--44) .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--video-95:not(.profile-skin--44) .header {
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
}
.profile-skin--video-95:not(.profile-skin--44) .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--video-95:not(.profile-skin--44) .profile__activity-bar, .profile-skin--video-95:not(.profile-skin--44) .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--video-95:not(.profile-skin--44) .profile__cut {
  display: none;
}
.profile-skin--video-95:not(.profile-skin--44).body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--video-95:not(.profile-skin--44).body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--video-95:not(.profile-skin--44).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:not(.profile-skin--44).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:not(.profile-skin--44).body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-95:not(.profile-skin--44) .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:not(.profile-skin--44) {
  --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:not(.profile-skin--44) .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--video-96:not(.profile-skin--44) .header {
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
}
.profile-skin--video-96:not(.profile-skin--44) .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--video-96:not(.profile-skin--44) .profile__activity-bar, .profile-skin--video-96:not(.profile-skin--44) .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--video-96:not(.profile-skin--44) .profile__cut {
  display: none;
}
.profile-skin--video-96:not(.profile-skin--44).body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--video-96:not(.profile-skin--44).body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--video-96:not(.profile-skin--44).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:not(.profile-skin--44).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:not(.profile-skin--44).body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-96:not(.profile-skin--44) .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:not(.profile-skin--44) {
  --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:not(.profile-skin--44) .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--video-97:not(.profile-skin--44) .header {
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
}
.profile-skin--video-97:not(.profile-skin--44) .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--video-97:not(.profile-skin--44) .profile__activity-bar, .profile-skin--video-97:not(.profile-skin--44) .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--video-97:not(.profile-skin--44) .profile__cut {
  display: none;
}
.profile-skin--video-97:not(.profile-skin--44).body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--video-97:not(.profile-skin--44).body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--video-97:not(.profile-skin--44).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:not(.profile-skin--44).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:not(.profile-skin--44).body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-97:not(.profile-skin--44) .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:not(.profile-skin--44) {
  --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:not(.profile-skin--44) .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--video-98:not(.profile-skin--44) .header {
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
}
.profile-skin--video-98:not(.profile-skin--44) .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--video-98:not(.profile-skin--44) .profile__activity-bar, .profile-skin--video-98:not(.profile-skin--44) .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--video-98:not(.profile-skin--44) .profile__cut {
  display: none;
}
.profile-skin--video-98:not(.profile-skin--44).body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--video-98:not(.profile-skin--44).body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--video-98:not(.profile-skin--44).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:not(.profile-skin--44).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:not(.profile-skin--44).body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-98:not(.profile-skin--44) .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:not(.profile-skin--44) {
  --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:not(.profile-skin--44) .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--video-99:not(.profile-skin--44) .header {
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
}
.profile-skin--video-99:not(.profile-skin--44) .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--video-99:not(.profile-skin--44) .profile__activity-bar, .profile-skin--video-99:not(.profile-skin--44) .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--video-99:not(.profile-skin--44) .profile__cut {
  display: none;
}
.profile-skin--video-99:not(.profile-skin--44).body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--video-99:not(.profile-skin--44).body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--video-99:not(.profile-skin--44).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:not(.profile-skin--44).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:not(.profile-skin--44).body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-99:not(.profile-skin--44) .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:not(.profile-skin--44) {
  --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:not(.profile-skin--44) .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--video-100:not(.profile-skin--44) .header {
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
}
.profile-skin--video-100:not(.profile-skin--44) .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--video-100:not(.profile-skin--44) .profile__activity-bar, .profile-skin--video-100:not(.profile-skin--44) .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--video-100:not(.profile-skin--44) .profile__cut {
  display: none;
}
.profile-skin--video-100:not(.profile-skin--44).body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--video-100:not(.profile-skin--44).body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--video-100:not(.profile-skin--44).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:not(.profile-skin--44).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:not(.profile-skin--44).body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-100:not(.profile-skin--44) .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:not(.profile-skin--44) {
  --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:not(.profile-skin--44) .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--video-101:not(.profile-skin--44) .header {
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
}
.profile-skin--video-101:not(.profile-skin--44) .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--video-101:not(.profile-skin--44) .profile__activity-bar, .profile-skin--video-101:not(.profile-skin--44) .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--video-101:not(.profile-skin--44) .profile__cut {
  display: none;
}
.profile-skin--video-101:not(.profile-skin--44).body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--video-101:not(.profile-skin--44).body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--video-101:not(.profile-skin--44).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:not(.profile-skin--44).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:not(.profile-skin--44).body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-101:not(.profile-skin--44) .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:not(.profile-skin--44) {
  --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:not(.profile-skin--44) .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--video-102:not(.profile-skin--44) .header {
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
}
.profile-skin--video-102:not(.profile-skin--44) .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--video-102:not(.profile-skin--44) .profile__activity-bar, .profile-skin--video-102:not(.profile-skin--44) .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--video-102:not(.profile-skin--44) .profile__cut {
  display: none;
}
.profile-skin--video-102:not(.profile-skin--44).body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--video-102:not(.profile-skin--44).body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--video-102:not(.profile-skin--44).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:not(.profile-skin--44).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:not(.profile-skin--44).body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--video-102:not(.profile-skin--44) .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;
  }
}
/*
|--------------------------------------------------------------------------
| PERSONAL SKIN CUSTOMIZATION UI
|--------------------------------------------------------------------------
*/
.edit-decor__content--custom {
  width: 100%;
  max-width: 100%;
  padding: 4px 4px 30px;
  overflow: visible;
}

.profile-customization-form {
  --pc-text: #f5f5f7;
  --pc-muted: rgba(245, 245, 247, 0.62);
  --pc-muted-2: rgba(245, 245, 247, 0.42);
  --pc-border: rgba(255, 255, 255, 0.11);
  --pc-border-hover: rgba(255, 255, 255, 0.20);
  --pc-surface: rgba(22, 22, 27, 0.46);
  --pc-surface-hover: rgba(255, 255, 255, 0.055);
  --pc-accent: #a98cff;
  width: 100%;
  max-width: 100%;
  color: var(--pc-text) !important;
  font-family: "Exo 2", Arial, sans-serif !important;
}
.profile-customization-form * {
  box-sizing: border-box;
}
.profile-customization-form button,
.profile-customization-form input,
.profile-customization-form select,
.profile-customization-form textarea,
.profile-customization-form label {
  font-family: "Exo 2", Arial, sans-serif !important;
}
.profile-customization-form__intro {
  margin-bottom: 16px;
  padding: 2px 2px 8px;
}
.profile-customization-form__intro-title {
  margin-bottom: 5px;
  color: var(--pc-text) !important;
  font-family: "Exo 2", Arial, sans-serif !important;
  font-size: 21px;
  font-weight: 700;
}
.profile-customization-form__intro-text {
  max-width: 680px;
  color: var(--pc-muted) !important;
  font-family: "Exo 2", Arial, sans-serif !important;
  font-size: 13px;
  line-height: 1.5;
}
.profile-customization-form__top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
.profile-customization-form__toggles {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}
.profile-customization-form__native-select {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  width: 100% !important;
  height: 48px;
  margin: 0;
  padding: 0 46px 0 15px;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--pc-border) !important;
  border-radius: 10px;
  outline: none;
  background: rgba(20, 20, 25, 0.72) !important;
  color: var(--pc-text) !important;
  font-family: "Exo 2", Arial, sans-serif !important;
  font-size: 14px;
  line-height: 48px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.profile-customization-form__native-select:hover {
  border-color: var(--pc-border-hover) !important;
  background: rgba(28, 28, 33, 0.82) !important;
}
.profile-customization-form__native-select:focus {
  border-color: var(--pc-accent) !important;
  box-shadow: 0 0 0 3px rgba(169, 140, 255, 0.15) !important;
}
.profile-customization-form__native-select option {
  color: #fff !important;
  background: #202025 !important;
}
.profile-customization-form__footer {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(25, 25, 29, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.16);
}
.profile-customization-form__footer-text {
  color: var(--pc-muted) !important;
  font-family: "Exo 2", Arial, sans-serif !important;
  font-size: 12px;
}
.profile-customization-form__save-button {
  flex: 0 0 auto;
  min-width: 180px;
  margin: 0 !important;
  font-family: "Exo 2", Arial, sans-serif !important;
}

/*
 * Табы редактора тоже не должны получать
 * пользовательский шрифт персонального скина.
 */
.edit-decor .tabs__item {
  font-family: "Exo 2", Arial, sans-serif !important;
}

/*
|--------------------------------------------------------------------------
| Cards
|--------------------------------------------------------------------------
*/
.profile-customization-card {
  min-width: 0;
  margin-bottom: 14px;
  padding: 17px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(20, 20, 24, 0.38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.profile-customization-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 16px;
}
.profile-customization-card__title {
  margin-bottom: 3px;
  color: #f5f5f7 !important;
  font-family: "Exo 2", Arial, sans-serif !important;
  font-size: 16px;
  font-weight: 700;
}
.profile-customization-card__description {
  color: rgba(245, 245, 247, 0.62) !important;
  font-family: "Exo 2", Arial, sans-serif !important;
  font-size: 12px;
  line-height: 1.4;
}

/*
|--------------------------------------------------------------------------
| Toggle
|--------------------------------------------------------------------------
*/
.profile-customization-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  min-height: 62px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.profile-customization-toggle:hover {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.12);
}
.profile-customization-toggle__text {
  min-width: 0;
}
.profile-customization-toggle__title {
  margin-bottom: 3px;
  color: #f5f5f7 !important;
  font-family: "Exo 2", Arial, sans-serif !important;
  font-size: 13px;
  font-weight: 600;
}
.profile-customization-toggle__description {
  color: rgba(245, 245, 247, 0.62) !important;
  font-family: "Exo 2", Arial, sans-serif !important;
  font-size: 11px;
  line-height: 1.35;
}
.profile-customization-toggle__switch {
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 24px;
}
.profile-customization-toggle__switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.profile-customization-toggle__switch > span {
  position: absolute;
  inset: 0;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.profile-customization-toggle__switch > span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s ease;
}
.profile-customization-toggle__switch input:checked + span {
  border-color: #a98cff;
  background: rgba(169, 140, 255, 0.75);
}
.profile-customization-toggle__switch input:checked + span::after {
  transform: translateX(18px);
}

/*
|--------------------------------------------------------------------------
| Fields / native selects
|--------------------------------------------------------------------------
*/
.profile-customization-field {
  min-width: 0;
}
.profile-customization-field__label {
  display: block;
  margin-bottom: 3px;
  color: #f5f5f7 !important;
  font-family: "Exo 2", Arial, sans-serif !important;
  font-size: 13px;
  font-weight: 600;
}
.profile-customization-field__description {
  margin-bottom: 8px;
  color: rgba(245, 245, 247, 0.62) !important;
  font-family: "Exo 2", Arial, sans-serif !important;
  font-size: 11px;
  line-height: 1.4;
}

.profile-customization-native-select {
  position: relative;
  width: 100%;
}
.profile-customization-native-select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 17px;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(255, 255, 255, 0.68);
  border-bottom: 2px solid rgba(255, 255, 255, 0.68);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/*
|--------------------------------------------------------------------------
| Video
|--------------------------------------------------------------------------
*/
.profile-customization-video-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16/6;
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.035);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.profile-customization-video-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0));
  opacity: 0;
  transition: opacity 0.15s ease;
}
.profile-customization-video-preview.has-video::after {
  opacity: 1;
}
.profile-customization-video-preview.has-video .profile-customization-video-preview__empty {
  display: none;
}
.profile-customization-video-preview.has-video .profile-customization-video-preview__badge {
  display: block;
}
.profile-customization-video-preview__empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(245, 245, 247, 0.62) !important;
  font-family: "Exo 2", Arial, sans-serif !important;
  font-size: 12px;
}
.profile-customization-video-preview__badge {
  position: absolute;
  right: 9px;
  bottom: 9px;
  z-index: 2;
  display: none;
  padding: 5px 8px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff !important;
  font-family: "Exo 2", Arial, sans-serif !important;
  font-size: 10px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/*
|--------------------------------------------------------------------------
| Colors
|--------------------------------------------------------------------------
*/
.profile-customization-colors,
.profile-customization-background {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.profile-customization-color {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  min-height: 68px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 10px;
  background: rgba(22, 22, 27, 0.46) !important;
  transition: background 0.15s ease, border-color 0.15s ease;
  /*
   * Реально видимый образец цвета.
   */
}
.profile-customization-color:hover {
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.055) !important;
}
.profile-customization-color__text {
  min-width: 0;
}
.profile-customization-color__title {
  display: block;
  margin-bottom: 3px;
  color: #f5f5f7 !important;
  font-family: "Exo 2", Arial, sans-serif !important;
  font-size: 12px;
  font-weight: 600;
}
.profile-customization-color__description {
  display: block;
  color: rgba(245, 245, 247, 0.62) !important;
  font-family: "Exo 2", Arial, sans-serif !important;
  font-size: 10px;
  line-height: 1.3;
}
.profile-customization-color__control {
  --pc-picker-color: #ffffff;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 116px;
  min-height: 42px;
}
.profile-customization-color__swatch {
  position: relative;
  z-index: 1;
  display: block;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  background: var(--pc-picker-color) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

.profile-customization-form__color-value {
  display: block !important;
  min-width: 66px;
  color: #f5f5f7 !important;
  font-family: SFMono-Regular, Consolas, "Liberation Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 600;
  line-height: 1;
  text-align: right;
  text-transform: uppercase;
  opacity: 0.92;
}

/*
 * Нативный color input остаётся кликабельным,
 * но лежит прозрачно точно поверх цветного swatch.
 * Из-за этого браузер больше не фокусируется на
 * "спрятанном где-то" input и не должен прыгать вверх.
 */
.profile-customization-form__color-picker-input {
  position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 3 !important;
  display: block !important;
  visibility: visible !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(-50%) !important;
  opacity: 0 !important;
  clip: auto !important;
  -webkit-clip-path: none !important;
          clip-path: none !important;
  border: 0 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

/*
|--------------------------------------------------------------------------
| Gradient angle
|--------------------------------------------------------------------------
*/
.profile-customization-angle {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  min-height: 62px;
  padding: 10px 11px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
}
.profile-customization-angle__title {
  margin-bottom: 2px;
  color: #f5f5f7 !important;
  font-family: "Exo 2", Arial, sans-serif !important;
  font-size: 12px;
  font-weight: 600;
}
.profile-customization-angle__description {
  color: rgba(245, 245, 247, 0.62) !important;
  font-family: "Exo 2", Arial, sans-serif !important;
  font-size: 10px;
}
.profile-customization-angle__input {
  display: flex;
  align-items: center;
  gap: 5px;
}
.profile-customization-angle__input input {
  display: block;
  width: 82px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  outline: none;
  background: rgba(20, 20, 25, 0.72) !important;
  color: #f5f5f7 !important;
  font-family: "Exo 2", Arial, sans-serif !important;
  font-size: 13px;
  text-align: center;
}
.profile-customization-angle__input input:focus {
  border-color: #a98cff;
}
.profile-customization-angle__input span {
  color: rgba(245, 245, 247, 0.62) !important;
  font-family: "Exo 2", Arial, sans-serif !important;
  font-size: 13px;
}

/*
|--------------------------------------------------------------------------
| Personal skin badge in SKINS tab
|--------------------------------------------------------------------------
*/
.edit-decor__content-item--skin {
  position: relative;
}

.edit-decor__content-item--personal-skin {
  position: relative;
  box-shadow: inset 0 0 0 2px rgba(169, 140, 255, 0.85), 0 0 22px rgba(169, 140, 255, 0.15);
}
.edit-decor__content-item--personal-skin::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 22px rgba(169, 140, 255, 0.12);
  pointer-events: none;
}

.edit-decor__skin-badge {
  position: absolute;
  left: 10px;
  bottom: 9px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 20px);
  padding: 6px 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(12, 12, 16, 0.8);
  color: #fff !important;
  font-family: "Exo 2", Arial, sans-serif !important;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/
@media only screen and (max-width: 800px) {
  .profile-customization-form__top-grid {
    grid-template-columns: 1fr;
  }
  .profile-customization-form__footer {
    bottom: 6px;
  }
  .profile-customization-colors,
  .profile-customization-background {
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 500px) {
  .edit-decor__content--custom {
    padding: 2px 0 22px;
  }
  .profile-customization-form__intro-title {
    font-size: 18px;
  }
  .profile-customization-form__intro-text {
    font-size: 12px;
  }
  .profile-customization-form__footer {
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
  }
  .profile-customization-form__footer-text {
    display: none;
  }
  .profile-customization-form__save-button {
    width: 100%;
    min-width: 0;
  }
  .profile-customization-card {
    padding: 12px;
    border-radius: 11px;
  }
  .profile-customization-card__title {
    font-size: 15px;
  }
  .profile-customization-toggle {
    min-height: 58px;
    padding: 9px 10px;
  }
  .profile-customization-toggle__description {
    max-width: 210px;
  }
  .profile-customization-color {
    min-height: 60px;
    padding: 9px 10px;
  }
  .profile-customization-color__description {
    display: none;
  }
  .profile-customization-color__control {
    min-width: 104px;
    gap: 7px;
  }
  .profile-customization-color__swatch {
    width: 36px;
    height: 36px;
  }
  .profile-customization-form__color-picker-input {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
  }
  .profile-customization-form__color-value {
    min-width: 61px;
    font-size: 10px !important;
  }
  .profile-customization-video-preview {
    aspect-ratio: 16/7;
  }
  .edit-decor__skin-badge {
    left: 7px;
    bottom: 7px;
    padding: 4px 7px;
    font-size: 9px;
  }
}
/*
|--------------------------------------------------------------------------
| PERSONAL SKIN 44 — EXTENDED CUSTOMIZATION
|--------------------------------------------------------------------------
| Visual customization only.
| No profile layout / block hiding / presets here.
*/
.profile-skin.profile-skin--44 {
  --main-text-color: #c4c4c4 !important;
  --secondary-text-color: #999999 !important;
  --main-purple-color: #981a1a !important;
  --secondary-purple-color: #e5383e !important;
  --purple-btn-bg: #981a1a !important;
  --profile-card-opacity: .10;
  --profile-header-opacity: 0;
  --profile-glass-blur-px: 20px;
  --profile-radius-px: 6px;
  --profile-name-color: #ffffff;
  --profile-title-color: #d39e9e;
  --profile-name-glow-color: #981a1a;
  --profile-name-glow-px: 10px;
  --profile-custom-border-color: #ffffff;
  --profile-border-width-px: 1px;
  --profile-video-brightness: 1;
  --profile-video-blur-px: 0px;
  --profile-video-overlay: 0;
  --profile-skin-background-3: #000000;
  --profile-gradient-speed-sec: 15s;
  --profile-avatar-glow-color: #981a1a;
  --profile-avatar-glow-px: 12px;
  --profile-cover-brightness: 1;
  --profile-cover-contrast: 1;
  --profile-cover-saturation: 1;
  --profile-cover-blur-px: 0px;
  --profile-card-padding-y: 12px;
  --profile-card-padding-x: 14px;
  --profile-card-shadow: 0 0 0 0 transparent;
  --profile-card-glow: 0 0 0 0 transparent;
  --profile-gradient-stops: var(--profile-skin-background-1), var(--profile-skin-background-2);
  --profile-skin-background: linear-gradient(var(--profile-skin-background-deg), var(--profile-gradient-stops));
}
.profile-skin.profile-skin--44.profile-custom--gradient-third {
  --profile-gradient-stops: var(--profile-skin-background-1), var(--profile-skin-background-2), var(--profile-skin-background-3);
}
.profile-skin.profile-skin--44.profile-custom--bg-radial {
  --profile-skin-background: radial-gradient(circle at center, var(--profile-gradient-stops));
}
.profile-skin.profile-skin--44.profile-custom--bg-solid {
  --profile-skin-background: var(--profile-skin-background-1);
}
.profile-skin.profile-skin--44 .manga-cards__info {
  background: var(--profile-skin-background) !important;
}
.profile-skin.profile-skin--44 .profile__name,
.profile-skin.profile-skin--44 .mobile-profile__name {
  color: var(--profile-name-color) !important;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.profile-skin.profile-skin--44 .profile__title {
  color: var(--profile-title-color) !important;
  box-shadow: none !important;
  background: none !important;
  text-shadow: none !important;
  padding: 6px 10px;
  margin-top: 20px;
  margin-bottom: 20px;
  min-width: 0;
  flex-wrap: wrap;
  gap: 6px;
  overflow-wrap: anywhere;
}
.profile-skin.profile-skin--44.profile-skin--title-border .profile__title {
  box-shadow: 0 0 2px #fff, inset 0 0 2px #fff, 0 0 3px 2px var(--title-shadow-color), inset 0 0 10px 1px var(--title-shadow-color) !important;
  text-shadow: 0 0 6px var(--title-shadow-color) !important;
}
.profile-skin.profile-skin--44.profile-custom--name-glow .profile__name, .profile-skin.profile-skin--44.profile-custom--name-glow .mobile-profile__name {
  text-shadow: 0 0 var(--profile-name-glow-px) var(--profile-name-glow-color) !important;
}
.profile-skin.profile-skin--44.body-pc .main > .container {
  box-sizing: border-box;
  padding: 0 15px 15px !important;
  margin-top: 15px;
  border: 0 !important;
  border-radius: var(--profile-radius-px) !important;
  background: var(--profile-skin-background) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.profile-skin.profile-skin--44.body-pc .profile__header {
  margin: 0 -15px !important;
}
.profile-skin.profile-skin--44.body-pc .main::before {
  content: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  pointer-events: none;
}
.profile-skin.profile-skin--44 .profile__background {
  box-sizing: border-box;
  min-width: 0;
  margin-bottom: 0;
  border-radius: var(--profile-radius-px) var(--profile-radius-px) 0 0 !important;
  background-color: rgba(0, 0, 0, var(--profile-header-opacity)) !important;
  background-blend-mode: multiply;
}
.profile-skin.profile-skin--44 .profile__background::after {
  border-radius: inherit !important;
  pointer-events: none;
}
.profile-skin.profile-skin--44 .profile__background .profile__cover {
  border-radius: inherit !important;
  -webkit-clip-path: inset(0 round var(--profile-radius-px) var(--profile-radius-px) 0 0);
          clip-path: inset(0 round var(--profile-radius-px) var(--profile-radius-px) 0 0);
}
.profile-skin.profile-skin--44 .profile__cover {
  display: block;
  filter: brightness(var(--profile-cover-brightness)) contrast(var(--profile-cover-contrast)) saturate(var(--profile-cover-saturation)) blur(var(--profile-cover-blur-px)) brightness(calc(1 - var(--profile-header-opacity)));
}
.profile-skin.profile-skin--44.body-mobile .main-profile--mobile {
  background: transparent !important;
}
.profile-skin.profile-skin--44.body-mobile .mobile-profile__background {
  position: relative;
}
.profile-skin.profile-skin--44.body-mobile .mobile-profile__background .profile__cover {
  border-radius: 0 !important;
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}
.profile-skin.profile-skin--44.body-mobile .mobile-profile__background-image {
  background-color: rgba(0, 0, 0, var(--profile-header-opacity)) !important;
  background-blend-mode: multiply;
}
.profile-skin.profile-skin--44.body-mobile .mobile-profile__wrapper {
  margin-top: -30px !important;
  border-radius: 32px 32px 0 0 !important;
  background: var(--profile-skin-background) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.profile-skin.profile-skin--44.body-mobile .mobile-profile__header + .mobile-profile__wrapper {
  margin-left: -10px;
  margin-right: -10px;
}
.profile-skin.profile-skin--44.profile-skin--glass-background.body-pc .main > .container, .profile-skin.profile-skin--44.profile-skin--glass-background.body-mobile .mobile-profile__wrapper {
  background: rgba(255, 255, 255, var(--profile-card-opacity)) !important;
  -webkit-backdrop-filter: blur(var(--profile-glass-blur-px)) !important;
  backdrop-filter: blur(var(--profile-glass-blur-px)) !important;
}
.profile-skin.profile-skin--44.profile-skin--glass-background.body-mobile .mobile-profile__wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--profile-skin-background);
  background-size: inherit;
  background-position: inherit;
  -webkit-mask-image: linear-gradient(to bottom, #000 32px, transparent 80px);
  mask-image: linear-gradient(to bottom, #000 32px, transparent 80px);
  pointer-events: none;
}
.profile-skin.profile-skin--44 .profile__about,
.profile-skin.profile-skin--44 .profile__friends-item,
.profile-skin.profile-skin--44 .profile__gift-item,
.profile-skin.profile-skin--44 .profile__activity-item,
.profile-skin.profile-skin--44 .achievements__image,
.profile-skin.profile-skin--44 .comments__inner,
.profile-skin.profile-skin--44 .comments__send-form {
  box-sizing: border-box;
  min-width: 0;
  border-radius: var(--profile-radius-px) !important;
  background: rgba(255, 255, 255, var(--profile-card-opacity)) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.profile-skin.profile-skin--44 .profile__about {
  display: flow-root;
  max-width: 100%;
  padding: max(var(--profile-card-padding-y), calc(var(--profile-radius-px) * 0.5)) max(var(--profile-card-padding-x), calc(var(--profile-radius-px) * 0.5)) !important;
  overflow-wrap: anywhere;
  word-break: normal;
}
.profile-skin.profile-skin--44 .profile__about p {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow-wrap: anywhere;
}
.profile-skin.profile-skin--44 .profile__about > :first-child {
  margin-top: 0;
}
.profile-skin.profile-skin--44 .profile__about > :last-child {
  margin-bottom: 0;
}
.profile-skin.profile-skin--44 .profile__about img, .profile-skin.profile-skin--44 .profile__about video, .profile-skin.profile-skin--44 .profile__about iframe {
  max-width: 100% !important;
}
.profile-skin.profile-skin--44 .profile__about img, .profile-skin.profile-skin--44 .profile__about video {
  height: auto;
}
.profile-skin.profile-skin--44 .profile__about pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.profile-skin.profile-skin--44 .profile__about table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
.profile-skin.profile-skin--44 .profile__activity-image img {
  border-top-left-radius: var(--profile-radius-px);
  border-top-right-radius: var(--profile-radius-px);
}
.profile-skin.profile-skin--44 .profile__friends-info, .profile-skin.profile-skin--44 .profile__wrapper {
  min-width: 0;
}
.profile-skin.profile-skin--44 .profile__user-activity-bar:not(.profile__user-activity-bar--active) {
  background: rgba(255, 255, 255, var(--profile-card-opacity)) !important;
}
.profile-skin.profile-skin--44 .profile__user-activity-bar--active {
  background: var(--purple-btn-bg) !important;
}
.profile-skin.profile-skin--44.profile-custom--density-compact {
  --profile-card-padding-y: 8px;
  --profile-card-padding-x: 10px;
}
.profile-skin.profile-skin--44.profile-custom--density-compact .profile__middle, .profile-skin.profile-skin--44.profile-custom--density-compact .profile__content-wrapper {
  gap: 12px;
}
.profile-skin.profile-skin--44.profile-custom--density-compact .profile__title {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}
.profile-skin.profile-skin--44.profile-custom--density-spacious {
  --profile-card-padding-y: 18px;
  --profile-card-padding-x: 20px;
}
.profile-skin.profile-skin--44.profile-custom--density-spacious .profile__middle, .profile-skin.profile-skin--44.profile-custom--density-spacious .profile__content-wrapper {
  gap: 30px;
}
.profile-skin.profile-skin--44.profile-custom--density-spacious .profile__title {
  margin-top: 34px !important;
  margin-bottom: 30px !important;
}
.profile-skin.profile-skin--44.profile-custom--density-compact .profile__friends-item, .profile-skin.profile-skin--44.profile-custom--density-compact .profile__gift-item, .profile-skin.profile-skin--44.profile-custom--density-compact .profile__activity-item,
.profile-skin.profile-skin--44.profile-custom--density-compact .comments__inner, .profile-skin.profile-skin--44.profile-custom--density-compact .comments__send-form, .profile-skin.profile-skin--44.profile-custom--density-spacious .profile__friends-item, .profile-skin.profile-skin--44.profile-custom--density-spacious .profile__gift-item, .profile-skin.profile-skin--44.profile-custom--density-spacious .profile__activity-item,
.profile-skin.profile-skin--44.profile-custom--density-spacious .comments__inner, .profile-skin.profile-skin--44.profile-custom--density-spacious .comments__send-form {
  padding: var(--profile-card-padding-y) var(--profile-card-padding-x) !important;
}
@media screen and (max-width: 1320px) {
  .profile-skin.profile-skin--44 .profile__middle-left, .profile-skin.profile-skin--44 .profile__middle-right {
    width: 100%;
    min-width: 0;
  }
}
.profile-skin.profile-skin--44.profile-custom--border-normal .profile__about, .profile-skin.profile-skin--44.profile-custom--border-normal .profile__friends-item, .profile-skin.profile-skin--44.profile-custom--border-normal .profile__gift-item, .profile-skin.profile-skin--44.profile-custom--border-normal .profile__activity-item,
.profile-skin.profile-skin--44.profile-custom--border-normal .achievements__image, .profile-skin.profile-skin--44.profile-custom--border-normal .comments__inner, .profile-skin.profile-skin--44.profile-custom--border-normal .comments__send-form, .profile-skin.profile-skin--44.profile-custom--border-glow .profile__about, .profile-skin.profile-skin--44.profile-custom--border-glow .profile__friends-item, .profile-skin.profile-skin--44.profile-custom--border-glow .profile__gift-item, .profile-skin.profile-skin--44.profile-custom--border-glow .profile__activity-item,
.profile-skin.profile-skin--44.profile-custom--border-glow .achievements__image, .profile-skin.profile-skin--44.profile-custom--border-glow .comments__inner, .profile-skin.profile-skin--44.profile-custom--border-glow .comments__send-form {
  border: var(--profile-border-width-px) solid var(--profile-custom-border-color) !important;
}
.profile-skin.profile-skin--44.profile-custom--border-none .profile__about, .profile-skin.profile-skin--44.profile-custom--border-none .profile__friends-item, .profile-skin.profile-skin--44.profile-custom--border-none .profile__gift-item, .profile-skin.profile-skin--44.profile-custom--border-none .profile__activity-item,
.profile-skin.profile-skin--44.profile-custom--border-none .achievements__image, .profile-skin.profile-skin--44.profile-custom--border-none .comments__inner, .profile-skin.profile-skin--44.profile-custom--border-none .comments__send-form {
  border: 0 !important;
}
.profile-skin.profile-skin--44.profile-custom--border-glow {
  --profile-card-glow: 0 0 12px var(--profile-custom-border-color);
}
.profile-skin.profile-skin--44.profile-custom--shadow-none {
  --profile-card-shadow: 0 0 0 0 transparent;
}
.profile-skin.profile-skin--44.profile-custom--shadow-soft {
  --profile-card-shadow: 0 5px 20px rgba(0, 0, 0, .14);
}
.profile-skin.profile-skin--44.profile-custom--shadow-medium {
  --profile-card-shadow: 0 8px 28px rgba(0, 0, 0, .27);
}
.profile-skin.profile-skin--44.profile-custom--shadow-strong {
  --profile-card-shadow: 0 12px 40px rgba(0, 0, 0, .44);
}
.profile-skin.profile-skin--44.profile-custom--border-glow .profile__about, .profile-skin.profile-skin--44.profile-custom--border-glow .profile__friends-item, .profile-skin.profile-skin--44.profile-custom--border-glow .profile__gift-item, .profile-skin.profile-skin--44.profile-custom--border-glow .profile__activity-item,
.profile-skin.profile-skin--44.profile-custom--border-glow .achievements__image, .profile-skin.profile-skin--44.profile-custom--border-glow .comments__inner, .profile-skin.profile-skin--44.profile-custom--border-glow .comments__send-form, .profile-skin.profile-skin--44[class*=profile-custom--shadow-] .profile__about, .profile-skin.profile-skin--44[class*=profile-custom--shadow-] .profile__friends-item, .profile-skin.profile-skin--44[class*=profile-custom--shadow-] .profile__gift-item, .profile-skin.profile-skin--44[class*=profile-custom--shadow-] .profile__activity-item,
.profile-skin.profile-skin--44[class*=profile-custom--shadow-] .achievements__image, .profile-skin.profile-skin--44[class*=profile-custom--shadow-] .comments__inner, .profile-skin.profile-skin--44[class*=profile-custom--shadow-] .comments__send-form {
  box-shadow: var(--profile-card-shadow), var(--profile-card-glow) !important;
}
.profile-skin.profile-skin--44.profile-custom--avatar-round {
  --profile-avatar-radius: 50%;
}
.profile-skin.profile-skin--44.profile-custom--avatar-soft {
  --profile-avatar-radius: 18px;
}
.profile-skin.profile-skin--44.profile-custom--avatar-square {
  --profile-avatar-radius: 0px;
}
.profile-skin.profile-skin--44.profile-custom--avatar-round .profile__avatar, .profile-skin.profile-skin--44.profile-custom--avatar-round .mobile-profile__avatar, .profile-skin.profile-skin--44.profile-custom--avatar-soft .profile__avatar, .profile-skin.profile-skin--44.profile-custom--avatar-soft .mobile-profile__avatar, .profile-skin.profile-skin--44.profile-custom--avatar-square .profile__avatar, .profile-skin.profile-skin--44.profile-custom--avatar-square .mobile-profile__avatar {
  border-radius: var(--profile-avatar-radius) !important;
}
.profile-skin.profile-skin--44.profile-custom--avatar-round .profile__avatar img:not(.frame), .profile-skin.profile-skin--44.profile-custom--avatar-round .mobile-profile__avatar img:not(.frame), .profile-skin.profile-skin--44.profile-custom--avatar-soft .profile__avatar img:not(.frame), .profile-skin.profile-skin--44.profile-custom--avatar-soft .mobile-profile__avatar img:not(.frame), .profile-skin.profile-skin--44.profile-custom--avatar-square .profile__avatar img:not(.frame), .profile-skin.profile-skin--44.profile-custom--avatar-square .mobile-profile__avatar img:not(.frame) {
  border-radius: var(--profile-avatar-radius) !important;
  -webkit-clip-path: inset(0 round var(--profile-avatar-radius)) !important;
          clip-path: inset(0 round var(--profile-avatar-radius)) !important;
}
.profile-skin.profile-skin--44.profile-custom--avatar-glow .profile__avatar, .profile-skin.profile-skin--44.profile-custom--avatar-glow .mobile-profile__avatar {
  filter: drop-shadow(0 0 var(--profile-avatar-glow-px) var(--profile-avatar-glow-color));
}
.profile-skin.profile-skin--44 .profile-skin-video {
  overflow: hidden;
  pointer-events: none;
}
.profile-skin.profile-skin--44 .profile-skin-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--profile-video-overlay));
  pointer-events: none;
}
.profile-skin.profile-skin--44 .profile-skin-video video {
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  filter: brightness(var(--profile-video-brightness)) blur(var(--profile-video-blur-px));
}
.profile-skin.profile-skin--44.profile-custom--video-contain .profile-skin-video video {
  -o-object-fit: contain;
     object-fit: contain;
}
.profile-skin.profile-skin--44.profile-custom--video-top .profile-skin-video video {
  -o-object-position: center top;
     object-position: center top;
}
.profile-skin.profile-skin--44.profile-custom--video-bottom .profile-skin-video video {
  -o-object-position: center bottom;
     object-position: center bottom;
}
.profile-skin.profile-skin--44.profile-custom--video-left .profile-skin-video video {
  -o-object-position: left center;
     object-position: left center;
}
.profile-skin.profile-skin--44.profile-custom--video-right .profile-skin-video video {
  -o-object-position: right center;
     object-position: right center;
}
.profile-skin.profile-skin--44.profile-custom--gradient-animated:not(.profile-custom--bg-solid), .profile-skin.profile-skin--44.profile-custom--gradient-animated:not(.profile-custom--bg-solid).body-pc .main > .container, .profile-skin.profile-skin--44.profile-custom--gradient-animated:not(.profile-custom--bg-solid).body-mobile .mobile-profile__wrapper {
  background-size: 300% 300% !important;
  animation: profile-custom-gradient var(--profile-gradient-speed-sec) ease infinite;
}

@keyframes profile-custom-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .profile-skin.profile-skin--44.profile-custom--gradient-animated {
    animation: none !important;
  }
}
/*
|--------------------------------------------------------------------------
| EXTENDED PERSONAL SKIN EDITOR UI
|--------------------------------------------------------------------------
*/
.profile-customization-settings-grid,
.profile-customization-two-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.profile-customization-settings-grid--spaced,
.profile-customization-two-columns--spaced,
.profile-customization-toggle--spaced,
.profile-customization-range--spaced,
.profile-customization-field--spaced {
  margin-top: 14px;
}

.profile-customization-range {
  min-width: 0;
  min-height: 76px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
}
.profile-customization-range__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  color: #f5f5f7 !important;
  font-family: "Exo 2", Arial, sans-serif !important;
  font-size: 12px;
}
.profile-customization-range__header strong {
  flex: 0 0 auto;
  min-width: 48px;
  color: #cfcfd8 !important;
  font-family: SFMono-Regular, Consolas, "Liberation Mono", monospace !important;
  font-size: 10px;
  font-weight: 600;
  text-align: right;
}
.profile-customization-range input[type=range] {
  display: block;
  width: 100%;
  height: 18px;
  margin: 0;
  padding: 0;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  border: 0;
  outline: none;
  background: transparent;
  cursor: pointer;
}
.profile-customization-range input[type=range]::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}
.profile-customization-range input[type=range]::-webkit-slider-thumb {
  width: 17px;
  height: 17px;
  margin-top: -6px;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #8064c7;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}
.profile-customization-range input[type=range]::-moz-range-track {
  height: 5px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}
.profile-customization-range input[type=range]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #8064c7;
}

.profile-customization-form__footer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-customization-form__random-button,
.profile-customization-form__reset-button {
  min-width: 150px;
  color: #f4f4f6 !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  font-family: "Exo 2", Arial, sans-serif !important;
}
.profile-customization-form__random-button:hover,
.profile-customization-form__reset-button:hover {
  border-color: rgba(255, 255, 255, 0.24) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.profile-customization-form__reset-button {
  color: #ffc1c1 !important;
}
.profile-customization-form__reset-button:hover {
  border-color: rgba(255, 115, 115, 0.36) !important;
  background: rgba(255, 70, 70, 0.1) !important;
}

@media only screen and (max-width: 800px) {
  .profile-customization-settings-grid,
  .profile-customization-two-columns {
    grid-template-columns: 1fr;
  }
  .profile-customization-form__footer-actions {
    width: 100%;
  }
}
@media only screen and (max-width: 500px) {
  .profile-customization-range {
    min-height: 70px;
    padding: 10px;
  }
  .profile-customization-form__footer-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .profile-customization-form__random-button,
  .profile-customization-form__reset-button,
  .profile-customization-form__save-button {
    width: 100%;
    min-width: 0 !important;
  }
}
/*
|--------------------------------------------------------------------------
| PERSONAL SKIN EDITOR — FINAL LAYOUT FIX
|--------------------------------------------------------------------------
| Этот блок должен быть В САМОМ КОНЦЕ файла.
| Он специально использует плоские селекторы + !important, чтобы старые
| стили сайта/скина не ломали range, карточки и footer редактора.
*/
#modal-edit-decor {
  --main-text-color: #f4f4f6 !important;
  --secondary-text-color: #b8b8c2 !important;
  --main-purple-color: #8064c7 !important;
  --secondary-purple-color: #b49be8 !important;
  --purple-btn-bg: #8064c7 !important;
  --light-bg: #18181d !important;
  --border-color: rgba(255, 255, 255, .14) !important;
  --decor-sheet-max-height: 50vh;
  color: #f4f4f6 !important;
  color-scheme: dark;
}

@supports (height: 100dvh) {
  #modal-edit-decor {
    --decor-sheet-max-height: 50dvh;
  }
}
#modal-edit-decor .modal__inner {
  box-sizing: border-box;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  height: 100% !important;
  min-height: 100% !important;
  padding: 0 !important;
}

#modal-edit-decor .modal__content {
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column;
  width: min(1180px, 100vw - 28px) !important;
  max-width: 1180px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: var(--decor-sheet-max-height) !important;
  margin: 0 !important;
  border-radius: 16px 16px 0 0 !important;
  color: #f4f4f6 !important;
  overflow: hidden !important;
}

#modal-edit-decor .modal__body {
  box-sizing: border-box;
  flex: 1 1 auto;
  height: auto !important;
  min-height: 0 !important;
  max-height: var(--decor-sheet-max-height) !important;
  color: #f4f4f6 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 22px !important;
  padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)) !important;
  scrollbar-gutter: stable;
}

#modal-edit-decor .tabs__item {
  color: #d0cfd8 !important;
  background: transparent !important;
  -webkit-text-fill-color: currentColor;
  text-shadow: none !important;
}

#modal-edit-decor .tabs__item--active,
#modal-edit-decor .tabs__item:hover,
#modal-edit-decor .tabs__item:focus-visible,
#modal-edit-decor .modal__close,
#modal-edit-decor .modal__close .icon {
  color: #ffffff !important;
  -webkit-text-fill-color: currentColor;
}

#modal-edit-decor .edit-decor__save-btn {
  color: #ffffff !important;
  background: #8064c7 !important;
  -webkit-text-fill-color: currentColor;
}

#modal-edit-decor .edit-decor__content-item--skin {
  border-radius: 12px !important;
}

#modal-edit-decor .edit-decor__content-item--skin > div,
#modal-edit-decor .edit-decor__content-item--skin::before,
#modal-edit-decor .edit-decor__content-item--skin::after {
  border-radius: inherit !important;
}

#modal-edit-decor .edit-decor {
  width: 100% !important;
  min-width: 0 !important;
}

#modal-edit-decor .tabs__content,
#modal-edit-decor .tabs__page,
#modal-edit-decor .edit-decor__content--custom,
#modal-edit-decor .profile-customization-form {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

#modal-edit-decor .edit-decor__content--custom {
  padding: 8px 0 12px !important;
  overflow: visible !important;
}

/* Карточки */
#modal-edit-decor .profile-customization-card {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 16px !important;
  padding: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 14px !important;
  background: rgba(20, 20, 25, 0.72) !important;
  box-shadow: none !important;
}

#modal-edit-decor .profile-customization-card__header {
  display: block !important;
  margin: 0 0 16px !important;
}

#modal-edit-decor .profile-customization-card__title {
  margin: 0 0 4px !important;
  color: #f5f5f7 !important;
  font-family: "Exo 2", Arial, sans-serif !important;
  font-size: 17px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#modal-edit-decor .profile-customization-card__description {
  margin: 0 !important;
  color: rgba(245, 245, 247, 0.62) !important;
  font-family: "Exo 2", Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Сетки */
#modal-edit-decor .profile-customization-settings-grid,
#modal-edit-decor .profile-customization-two-columns {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Range-карточки */
#modal-edit-decor .profile-customization-range {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 82px !important;
  margin: 0 !important;
  padding: 13px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  box-shadow: none !important;
}

#modal-edit-decor .profile-customization-range--spaced,
#modal-edit-decor .profile-customization-toggle--spaced,
#modal-edit-decor .profile-customization-field--spaced,
#modal-edit-decor .profile-customization-settings-grid--spaced,
#modal-edit-decor .profile-customization-two-columns--spaced {
  margin-top: 12px !important;
}

#modal-edit-decor .profile-customization-range__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  color: #f5f5f7 !important;
  font-family: "Exo 2", Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#modal-edit-decor .profile-customization-range__header > span {
  min-width: 0 !important;
  color: #f5f5f7 !important;
  font: inherit !important;
  line-height: inherit !important;
}

#modal-edit-decor .profile-customization-range__value {
  flex: 0 0 auto !important;
  min-width: 62px !important;
  margin: 0 !important;
  color: #cfcfd8 !important;
  font-family: SFMono-Regular, Consolas, "Liberation Mono", monospace !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

/* Полностью перебиваем старые стили range с сайта */
#modal-edit-decor .profile-customization-range input[type=range] {
  display: block !important;
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: pointer !important;
  -moz-appearance: none !important;
       appearance: none !important;
  -webkit-appearance: none !important;
}

#modal-edit-decor .profile-customization-range input[type=range]::-webkit-slider-runnable-track {
  width: 100% !important;
  height: 5px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  box-shadow: none !important;
}

#modal-edit-decor .profile-customization-range input[type=range]::-webkit-slider-thumb {
  width: 18px !important;
  height: 18px !important;
  margin-top: -6.5px !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  background: #8b6bd8 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

#modal-edit-decor .profile-customization-range input[type=range]::-moz-range-track {
  width: 100% !important;
  height: 5px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  box-shadow: none !important;
}

#modal-edit-decor .profile-customization-range input[type=range]::-moz-range-progress {
  height: 5px !important;
  border-radius: 999px !important;
  background: #8b6bd8 !important;
}

#modal-edit-decor .profile-customization-range input[type=range]::-moz-range-thumb {
  width: 16px !important;
  height: 16px !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  background: #8b6bd8 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28) !important;
}

/* Поля/селекты внутри расширенных настроек */
#modal-edit-decor .profile-customization-field {
  min-width: 0 !important;
}

#modal-edit-decor .profile-customization-field__label {
  display: block !important;
  margin: 0 0 7px !important;
  color: #f5f5f7 !important;
  font-family: "Exo 2", Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#modal-edit-decor .profile-customization-form__native-select {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 42px 0 13px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  line-height: normal !important;
}

/* Переключатели */
#modal-edit-decor .profile-customization-toggle {
  min-height: 60px !important;
  margin-bottom: 0 !important;
  padding: 11px 13px !important;
  border-radius: 11px !important;
}

#modal-edit-decor .profile-customization-toggle__title {
  color: #f5f5f7 !important;
  font-family: "Exo 2", Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#modal-edit-decor .profile-customization-toggle__description {
  margin-top: 3px !important;
  color: rgba(245, 245, 247, 0.6) !important;
  font-family: "Exo 2", Arial, sans-serif !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
}

/* Footer больше НЕ перекрывает поля */
#modal-edit-decor .profile-customization-form__footer {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 18px 0 0 !important;
  padding: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 12px !important;
  background: rgba(19, 19, 24, 0.9) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

#modal-edit-decor .profile-customization-form__footer-text {
  min-width: 0 !important;
  margin: 0 !important;
  color: rgba(245, 245, 247, 0.62) !important;
  font-family: "Exo 2", Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

#modal-edit-decor .profile-customization-form__footer-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 0 !important;
}

#modal-edit-decor .profile-customization-form__footer-actions .button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 15px !important;
  border-radius: 9px !important;
  font-family: "Exo 2", Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
}

#modal-edit-decor .profile-customization-form__random-button,
#modal-edit-decor .profile-customization-form__reset-button {
  color: #f4f4f6 !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  background: rgba(255, 255, 255, 0.055) !important;
}

#modal-edit-decor .profile-customization-form__random-button:hover,
#modal-edit-decor .profile-customization-form__reset-button:hover {
  border-color: rgba(255, 255, 255, 0.24) !important;
  background: rgba(255, 255, 255, 0.095) !important;
}

#modal-edit-decor .profile-customization-form__reset-button {
  color: #ffc8c8 !important;
}

#modal-edit-decor .profile-customization-form__save-button {
  color: #fff !important;
  border: 0 !important;
  background: #8064c7 !important;
}

#modal-edit-decor .profile-customization-form__save-button:hover {
  background: #9073d9 !important;
}

/* Не показываем обычный footer вкладок внутри персонального скина */
#modal-edit-decor .tabs__page[data-page=customization].tabs__page--active ~ .edit-decor__footer {
  display: none !important;
}

@media only screen and (max-width: 900px) {
  #modal-edit-decor .profile-customization-form__footer {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  #modal-edit-decor .profile-customization-form__footer-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  #modal-edit-decor .profile-customization-form__footer-actions .button {
    width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
  }
}
@media only screen and (max-width: 700px) {
  #modal-edit-decor .profile-customization-settings-grid,
  #modal-edit-decor .profile-customization-two-columns {
    grid-template-columns: 1fr !important;
  }
  #modal-edit-decor .profile-customization-card {
    padding: 14px !important;
    border-radius: 12px !important;
  }
  #modal-edit-decor .profile-customization-range {
    min-height: 76px !important;
    padding: 12px !important;
  }
}
@media only screen and (max-width: 560px) {
  #modal-edit-decor .modal__content {
    width: 100vw !important;
    max-width: 100vw !important;
  }
  #modal-edit-decor .modal__body {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 18px !important;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #modal-edit-decor .profile-customization-form__footer-text {
    display: none !important;
  }
  #modal-edit-decor .profile-customization-form__footer-actions {
    grid-template-columns: 1fr !important;
  }
  #modal-edit-decor .profile-customization-form__footer-actions .button {
    height: 44px !important;
    font-size: 13px !important;
  }
}
/*
|--------------------------------------------------------------------------
| PERSONAL SKIN 44 — LIVE CONTROL FIXES v4
|--------------------------------------------------------------------------
| Эти правила намеренно стоят в самом конце файла и перебивают старые
| варианты скинов. Ползунки должны работать сразу, без сохранения.
*/
/*
|--------------------------------------------------------------------------
| PROFILE CUSTOMIZATION MODAL — SAFE SCROLL FIX v8
|--------------------------------------------------------------------------
| В v7 translateZ/backface/isolation/contain принудительно создавали отдельные
| compositor layers. На странице с fixed video это могло давать временные
| полосы/ghosting/кусочки старого кадра при прокрутке. Здесь оставляем обычный
| browser paint без GPU-хаков.
*/
#modal-edit-decor .modal__content,
#modal-edit-decor .modal__body,
#modal-edit-decor .edit-decor,
#modal-edit-decor .edit-decor__content--custom,
#modal-edit-decor .profile-customization-form,
#modal-edit-decor .profile-customization-card,
#modal-edit-decor .profile-customization-form__footer,
#modal-edit-decor .profile-customization-video-preview__badge,
#modal-edit-decor .edit-decor__skin-badge {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  -webkit-backface-visibility: visible !important;
          backface-visibility: visible !important;
  perspective: none !important;
  will-change: auto !important;
}

#modal-edit-decor .modal__content {
  background: #18181d !important;
  isolation: auto !important;
  contain: none !important;
}

#modal-edit-decor .modal__body {
  background: #18181d !important;
  scroll-behavior: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: auto;
  contain: none !important;
}

#modal-edit-decor .profile-customization-card {
  background: #202026 !important;
  contain: none !important;
}

#modal-edit-decor .profile-customization-range,
#modal-edit-decor .profile-customization-toggle,
#modal-edit-decor .profile-customization-color,
#modal-edit-decor .profile-customization-angle {
  background: #27272d !important;
}

#modal-edit-decor .profile-customization-form__footer {
  background: #1d1d23 !important;
}

/*
 * Ключевое: у больших прокручиваемых контейнеров не должно быть
 * translateZ(), contain: paint или backface-visibility:hidden.
 */
/* Editor fields must not inherit the old 300px form height from profile.scss. */
#modal-edit-decor .profile-customization-form {
  max-height: none !important;
  height: auto !important;
}

#modal-edit-decor .profile-customization-form [disabled] {
  cursor: default;
  opacity: 0.5;
}

#modal-edit-decor .profile-customization-form__footer-actions .button:disabled {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .profile-skin.profile-skin--44.profile-custom--gradient-animated, .profile-skin.profile-skin--44.profile-custom--gradient-animated .main > .container, .profile-skin.profile-skin--44.profile-custom--gradient-animated .mobile-profile__wrapper {
    animation: none !important;
  }
}
.profile-skin.profile-skin--tower-top-1 {
  --title-color: #fff0c9 !important;
  --main-text-color: #e2d9ca !important;
  --secondary-text-color: #a99f91 !important;
  --icons-color: #d7bd83 !important;
  --main-purple-color: #efc977 !important;
  --secondary-purple-color: #ffe2a0 !important;
  --purple-btn-bg: #77551f !important;
  --light-bg: #13151c !important;
  --medium-bg: rgba(221, 185, 109, .07) !important;
  --dark-bg: rgba(8, 10, 16, .85) !important;
  --dark-grey-bg: #1b1b21 !important;
  --grey-background: #0b0d14 !important;
  --border-color: rgba(221, 185, 109, .2) !important;
  --seconday-bg-color: rgba(221, 185, 109, .06) !important;
  --chapters-hover: rgba(221, 185, 109, .09) !important;
  --main-border-radius: 10px !important;
  --profile-skin-background-1: #24202a;
  --profile-skin-background-2: #0b0d14;
  --profile-skin-background-deg: 145deg;
  --profile-skin-background:
      radial-gradient(ellipse at 85% 0, rgba(202, 136, 36, .25), transparent 45%),
      radial-gradient(ellipse at 0 35%, rgba(103, 54, 115, .2), transparent 50%),
      #0b0d14;
  --tower-champion-gold: linear-gradient(120deg, #9c6a29, #f8e3aa 45%, #d8ac57 75%, #8c5e25);
  background: var(--profile-skin-background);
}
.profile-skin.profile-skin--tower-top-1 .main {
  background: transparent;
}
.profile-skin.profile-skin--tower-top-1 .header {
  border-bottom: 1px solid var(--border-color);
  background: rgba(11, 13, 20, 0.94) !important;
}
.profile-skin.profile-skin--tower-top-1 .profile__header,
.profile-skin.profile-skin--tower-top-1 .mobile-profile__background-image {
  position: relative;
}
.profile-skin.profile-skin--tower-top-1 .profile__header::before, .profile-skin.profile-skin--tower-top-1 .profile__header::after,
.profile-skin.profile-skin--tower-top-1 .mobile-profile__background-image::before,
.profile-skin.profile-skin--tower-top-1 .mobile-profile__background-image::after {
  content: "";
  position: absolute;
  z-index: 3;
  right: calc(7% - 25px);
  top: 26px;
  width: 260px;
  height: 260px;
  pointer-events: none;
}
.profile-skin.profile-skin--tower-top-1 .profile__header::before,
.profile-skin.profile-skin--tower-top-1 .mobile-profile__background-image::before {
  border: 1px solid rgba(255, 220, 144, 0.4);
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 221, 148, 0.8) 0deg 1deg, transparent 1deg 15deg, rgba(255, 221, 148, 0.3) 15deg 19deg, transparent 19deg 30deg);
  -webkit-mask-image: radial-gradient(circle, transparent 57%, #000 58% 59%, transparent 60% 65%, #000 66% 70%, transparent 71%);
  mask-image: radial-gradient(circle, transparent 57%, #000 58% 59%, transparent 60% 65%, #000 66% 70%, transparent 71%);
  animation: tower-champion-orbit 36s linear infinite;
}
.profile-skin.profile-skin--tower-top-1 .profile__header::after,
.profile-skin.profile-skin--tower-top-1 .mobile-profile__background-image::after {
  background: radial-gradient(circle at 14% 24%, #ffe7b0 0 1px, transparent 2px), radial-gradient(circle at 78% 16%, #ffe7b0 0 2px, transparent 3px), radial-gradient(circle at 34% 8%, #ffce6a 0 1px, transparent 2px), radial-gradient(circle at 91% 56%, #ffe7b0 0 1px, transparent 2px), radial-gradient(circle at 9% 72%, #ffce6a 0 2px, transparent 3px), radial-gradient(circle at 68% 83%, #ffe7b0 0 1px, transparent 2px), radial-gradient(circle at 42% 48%, #fff5d9 0 1px, transparent 2px);
  animation: tower-champion-embers 7s ease-in-out infinite;
}
.profile-skin.profile-skin--tower-top-1 .profile__background,
.profile-skin.profile-skin--tower-top-1 .mobile-profile__background {
  position: relative;
  isolation: isolate;
  background-color: var(--light-bg);
  box-shadow: 0 0 0 1px rgba(239, 212, 154, 0.65), 0 0 0 5px rgba(219, 185, 109, 0.04), 0 0 45px rgba(205, 139, 42, 0.12), 0 16px 48px rgba(0, 0, 0, 0.4);
}
.profile-skin.profile-skin--tower-top-1 .profile__background::before,
.profile-skin.profile-skin--tower-top-1 .mobile-profile__background::before {
  content: "";
  position: absolute;
  z-index: 2;
  right: 7%;
  bottom: 0;
  width: 210px;
  height: 88%;
  pointer-events: none;
  opacity: 0.85;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 30px, rgba(247, 224, 172, 0.2) 31px, transparent 32px), linear-gradient(90deg, transparent 43%, rgba(255, 229, 165, 0.65) 49%, rgba(255, 229, 165, 0.1) 52%, transparent 60%), linear-gradient(180deg, #e1bd73, #735931 52%, rgba(23, 22, 29, 0.2));
  -webkit-clip-path: polygon(50% 0, 59% 17%, 56% 17%, 56% 25%, 64% 25%, 64% 33%, 59% 33%, 59% 42%, 74% 42%, 74% 35%, 78% 28%, 82% 35%, 82% 54%, 88% 54%, 88% 64%, 80% 64%, 80% 84%, 95% 84%, 100% 100%, 0 100%, 5% 84%, 20% 84%, 20% 64%, 12% 64%, 12% 54%, 18% 54%, 18% 35%, 22% 28%, 26% 35%, 26% 42%, 41% 42%, 41% 33%, 36% 33%, 36% 25%, 44% 25%, 44% 17%, 41% 17%);
          clip-path: polygon(50% 0, 59% 17%, 56% 17%, 56% 25%, 64% 25%, 64% 33%, 59% 33%, 59% 42%, 74% 42%, 74% 35%, 78% 28%, 82% 35%, 82% 54%, 88% 54%, 88% 64%, 80% 64%, 80% 84%, 95% 84%, 100% 100%, 0 100%, 5% 84%, 20% 84%, 20% 64%, 12% 64%, 12% 54%, 18% 54%, 18% 35%, 22% 28%, 26% 35%, 26% 42%, 41% 42%, 41% 33%, 36% 33%, 36% 25%, 44% 25%, 44% 17%, 41% 17%);
  animation: tower-champion-tower 6s ease-in-out infinite;
}
.profile-skin.profile-skin--tower-top-1 .profile__background::after,
.profile-skin.profile-skin--tower-top-1 .mobile-profile__background::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at 78% 34%, rgba(255, 209, 113, 0.3), transparent 34%), conic-gradient(from 220deg at 78% 34%, transparent 0deg 18deg, rgba(255, 218, 141, 0.12) 19deg 21deg, transparent 22deg 48deg, rgba(255, 218, 141, 0.08) 49deg 53deg, transparent 54deg 86deg, rgba(255, 218, 141, 0.1) 87deg 90deg, transparent 91deg 126deg, rgba(255, 218, 141, 0.08) 127deg 132deg, transparent 133deg), linear-gradient(90deg, rgba(9, 11, 18, 0.94), rgba(9, 11, 18, 0.55) 60%, rgba(9, 11, 18, 0.7)), linear-gradient(0deg, #10121a, transparent 65%);
  box-shadow: inset 0 0 0 1px rgba(239, 212, 154, 0.5), inset 0 1px 28px rgba(255, 209, 113, 0.12);
}
.profile-skin.profile-skin--tower-top-1 .profile__background {
  align-items: center;
  padding: 40px 48px;
  height: 360px;
}
.profile-skin.profile-skin--tower-top-1 .profile__controls {
  z-index: 6;
}
.profile-skin.profile-skin--tower-top-1 .profile__controls a, .profile-skin.profile-skin--tower-top-1 .profile__controls button {
  color: var(--secondary-purple-color);
}
.profile-skin.profile-skin--tower-top-1 .profile__wrapper {
  max-width: calc(100% - 350px);
}
.profile-skin.profile-skin--tower-top-1 .profile__name,
.profile-skin.profile-skin--tower-top-1 .mobile-profile__name {
  color: var(--title-color);
  text-shadow: 0 2px 20px rgba(219, 185, 109, 0.2);
  overflow-wrap: anywhere;
  line-height: 1.2;
}
@supports (-webkit-background-clip: text) {
  .profile-skin.profile-skin--tower-top-1 .profile__name,
  .profile-skin.profile-skin--tower-top-1 .mobile-profile__name {
    background: linear-gradient(110deg, #c5923e 0%, #ffe5a8 22%, #fff8e0 40%, #d4a653 55%, #ffe5a8 75%, #c5923e 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: tower-champion-shine 8s ease-in-out infinite;
  }
}
.profile-skin.profile-skin--tower-top-1 .profile__info-label-type--user {
  background: rgba(219, 185, 109, 0.12);
  box-shadow: inset 0 0 0 1px var(--border-color);
  color: var(--secondary-purple-color);
}
.profile-skin.profile-skin--tower-top-1 .profile__wrapper::after,
.profile-skin.profile-skin--tower-top-1 .mobile-profile__name::after {
  content: "№ 1  ·  ПОКОРИТЕЛЬ БАШНИ";
  display: table;
  margin-top: 18px;
  padding: 9px 13px;
  border: 1px solid rgba(239, 201, 119, 0.7);
  border-radius: 4px;
  background: linear-gradient(110deg, rgba(219, 185, 109, 0.22), rgba(219, 185, 109, 0.04), rgba(219, 185, 109, 0.18));
  background-size: 250% 100%;
  color: var(--secondary-purple-color);
  -webkit-text-fill-color: var(--secondary-purple-color);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 1.6px;
  text-shadow: none;
  pointer-events: none;
  box-shadow: 0 0 22px rgba(219, 185, 109, 0.12), inset 0 0 12px rgba(219, 185, 109, 0.07);
  animation: tower-champion-shine 6s ease-in-out infinite;
}
.profile-skin.profile-skin--tower-top-1 .profile__avatar,
.profile-skin.profile-skin--tower-top-1 .mobile-profile__avatar {
  box-shadow: 0 0 28px rgba(243, 185, 67, 0.28), 0 0 70px rgba(243, 185, 67, 0.12);
}
.profile-skin.profile-skin--tower-top-1 .profile__avatar::before,
.profile-skin.profile-skin--tower-top-1 .mobile-profile__avatar::before {
  content: "";
  position: absolute;
  z-index: 6;
  top: -35px;
  left: calc(50% - 23px);
  width: 46px;
  height: 28px;
  background: var(--tower-champion-gold);
  -webkit-clip-path: polygon(0 12%, 26% 42%, 50% 0, 74% 42%, 100% 12%, 87% 82%, 13% 82%, 13% 91%, 87% 91%, 87% 100%, 13% 100%);
          clip-path: polygon(0 12%, 26% 42%, 50% 0, 74% 42%, 100% 12%, 87% 82%, 13% 82%, 13% 91%, 87% 91%, 87% 100%, 13% 100%);
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(255, 209, 113, 0.7));
  animation: tower-champion-crown 4s ease-in-out infinite;
}
.profile-skin.profile-skin--tower-top-1 .profile__avatar::after,
.profile-skin.profile-skin--tower-top-1 .mobile-profile__avatar::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(239, 212, 154, 0.8);
  border-radius: calc(var(--main-border-radius) + 4px);
  box-shadow: 0 0 0 3px rgba(219, 185, 109, 0.13), 0 0 30px rgba(255, 204, 106, 0.45), inset 0 0 12px rgba(255, 204, 106, 0.12);
  pointer-events: none;
  animation: tower-champion-halo 5s ease-in-out infinite;
}
.profile-skin.profile-skin--tower-top-1 .profile__title {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 36px;
  padding: 8px 12px;
  border-left: 2px solid var(--main-purple-color);
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(110deg, rgba(239, 201, 119, 0.13), rgba(149, 103, 204, 0.06) 45%, transparent 85%), repeating-linear-gradient(120deg, transparent 0 18px, rgba(239, 201, 119, 0.025) 19px 20px);
  color: var(--title-color);
  font-size: 18px;
  border-radius: 0 0 0 3px;
}
.profile-skin.profile-skin--tower-top-1 .profile__title::before {
  content: "";
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  margin-right: 12px;
  border: 1px solid #fff0bd;
  background: var(--tower-champion-gold);
  box-shadow: 0 0 9px rgba(255, 209, 113, 0.7);
  transform: rotate(45deg);
  pointer-events: none;
  animation: tower-champion-title-gem 5s ease-in-out infinite;
}
.profile-skin.profile-skin--tower-top-1 .profile__title::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 221, 148, 0.03) 43%, rgba(255, 238, 185, 0.14) 50%, rgba(183, 148, 255, 0.08) 57%, transparent 65%) -40% 0/55% 100% no-repeat, linear-gradient(90deg, transparent, #c48b3d 32%, #fff1c1 50%, #c5a0ff 62%, transparent) -40% 100%/45% 1px no-repeat;
  animation: tower-champion-title-stream 6s ease-in-out infinite;
}
.profile-skin.profile-skin--tower-top-1 .profile__title a {
  position: relative;
  z-index: 1;
}
.profile-skin.profile-skin--tower-top-1 .profile__title:nth-of-type(2n)::after {
  animation-delay: -2s;
}
.profile-skin.profile-skin--tower-top-1 .profile__title:nth-of-type(3n)::after {
  animation-delay: -4s;
}
.profile-skin.profile-skin--tower-top-1 .profile__title:hover::before {
  box-shadow: 0 0 14px rgba(255, 209, 113, 0.9);
}
.profile-skin.profile-skin--tower-top-1 .profile__activity-item,
.profile-skin.profile-skin--tower-top-1 .profile__gift-item,
.profile-skin.profile-skin--tower-top-1 .comments__send-form {
  box-shadow: inset 0 0 0 1px var(--border-color);
}
.profile-skin.profile-skin--tower-top-1 .profile__activity-bar--fill,
.profile-skin.profile-skin--tower-top-1 .profile__user-activity-bar--active {
  background: var(--tower-champion-gold);
  box-shadow: 0 0 12px rgba(219, 185, 109, 0.16);
}
.profile-skin.profile-skin--tower-top-1 .profile__cut {
  border-color: var(--secondary-purple-color);
  background: var(--light-bg);
}
.profile-skin.profile-skin--tower-top-1 .mobile-profile__wrapper {
  background: linear-gradient(180deg, #1c1a20, #10121a 360px) !important;
  box-shadow: 0 -1px 0 rgba(239, 212, 154, 0.35), 0 -16px 40px rgba(0, 0, 0, 0.25);
}
.profile-skin.profile-skin--tower-top-1 .mobile-profile__background::before {
  right: calc(50% - 80px);
  width: 160px;
  height: 94%;
}
.profile-skin.profile-skin--tower-top-1 .mobile-profile__background::after {
  background: radial-gradient(ellipse at 50% 28%, rgba(255, 202, 93, 0.32), transparent 70%), conic-gradient(from 220deg at 50% 40%, transparent 0deg 24deg, rgba(255, 218, 141, 0.16) 25deg 28deg, transparent 29deg 80deg, rgba(255, 218, 141, 0.12) 81deg 86deg, transparent 87deg 135deg, rgba(255, 218, 141, 0.12) 136deg 140deg, transparent 141deg), linear-gradient(0deg, #16151d, rgba(9, 11, 18, 0.55));
}
.profile-skin.profile-skin--tower-top-1 .mobile-profile__background-image::before, .profile-skin.profile-skin--tower-top-1 .mobile-profile__background-image::after {
  right: calc(50% - 110px);
  top: 0;
  width: 220px;
  height: 220px;
}
.profile-skin.profile-skin--tower-top-1 .mobile-profile__name::after {
  margin: 14px auto 0;
  max-width: 100%;
  font-size: 9px;
  letter-spacing: 1.3px;
}
.profile-skin.profile-skin--tower-top-1 .mobile-profile__stat {
  padding: 14px 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(90deg, transparent, rgba(219, 185, 109, 0.05), transparent);
}
.profile-skin.profile-skin--tower-top-1 .mobile-profile__column div:first-of-type {
  color: var(--title-color);
}
.profile-skin.profile-skin--tower-top-1 .mobile-profile__column + .mobile-profile__column {
  border-left: 1px solid var(--border-color);
}
@media screen and (max-width: 800px) {
  .profile-skin.profile-skin--tower-top-1 .profile__header::before,
  .profile-skin.profile-skin--tower-top-1 .profile__header::after {
    right: 10px;
    top: 60px;
    width: 190px;
    height: 190px;
    opacity: 0.5;
  }
  .profile-skin.profile-skin--tower-top-1 .profile__background {
    padding: 32px 24px;
  }
  .profile-skin.profile-skin--tower-top-1 .profile__background::before {
    right: 3%;
    width: 150px;
    opacity: 0.35;
  }
  .profile-skin.profile-skin--tower-top-1 .profile__wrapper {
    max-width: calc(100% - 150px);
  }
}
@media screen and (max-width: 550px) {
  .profile-skin.profile-skin--tower-top-1 .profile__background {
    padding: 36px 20px 24px;
    height: auto;
    min-height: 320px;
  }
  .profile-skin.profile-skin--tower-top-1 .profile__wrapper {
    max-width: 100%;
  }
  .profile-skin.profile-skin--tower-top-1 .profile__wrapper::after {
    margin: 14px auto 0;
    font-size: 9px;
    letter-spacing: 1px;
  }
  .profile-skin.profile-skin--tower-top-1 .profile__title {
    font-size: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .profile-skin.profile-skin--tower-top-1 .profile__header::before,
  .profile-skin.profile-skin--tower-top-1 .profile__header::after,
  .profile-skin.profile-skin--tower-top-1 .profile__background::before,
  .profile-skin.profile-skin--tower-top-1 .mobile-profile__background::before,
  .profile-skin.profile-skin--tower-top-1 .mobile-profile__background-image::before,
  .profile-skin.profile-skin--tower-top-1 .mobile-profile__background-image::after,
  .profile-skin.profile-skin--tower-top-1 .profile__name,
  .profile-skin.profile-skin--tower-top-1 .mobile-profile__name,
  .profile-skin.profile-skin--tower-top-1 .profile__wrapper::after,
  .profile-skin.profile-skin--tower-top-1 .mobile-profile__name::after,
  .profile-skin.profile-skin--tower-top-1 .profile__avatar::before,
  .profile-skin.profile-skin--tower-top-1 .profile__avatar::after,
  .profile-skin.profile-skin--tower-top-1 .mobile-profile__avatar::before,
  .profile-skin.profile-skin--tower-top-1 .mobile-profile__avatar::after,
  .profile-skin.profile-skin--tower-top-1 .profile__title::before,
  .profile-skin.profile-skin--tower-top-1 .profile__title::after {
    animation: none;
  }
  .profile-skin.profile-skin--tower-top-1 .profile__title::after {
    background-position: 50% 0, 50% 100%;
  }
}

@keyframes tower-champion-halo {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
@keyframes tower-champion-orbit {
  to {
    transform: rotate(360deg);
  }
}
@keyframes tower-champion-embers {
  0%, 100% {
    transform: translateY(6px);
    opacity: 0.35;
  }
  50% {
    transform: translateY(-18px);
    opacity: 1;
  }
}
@keyframes tower-champion-tower {
  0%, 100% {
    opacity: 0.65;
  }
  50% {
    opacity: 1;
  }
}
@keyframes tower-champion-crown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}
@keyframes tower-champion-shine {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
@keyframes tower-champion-title-gem {
  0%, 100% {
    transform: rotate(45deg) scale(0.85);
    opacity: 0.7;
  }
  50% {
    transform: rotate(225deg) scale(1);
    opacity: 1;
  }
}
@keyframes tower-champion-title-stream {
  0%, 8% {
    background-position: -120% 0, -120% 100%;
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  78% {
    opacity: 1;
  }
  92%, 100% {
    background-position: 220% 0, 220% 100%;
    opacity: 0;
  }
}
.profile-skin.profile-skin--card-battle-top-1 {
  --title-color: #f1f4ed !important;
  --main-text-color: #d0dfd9 !important;
  --secondary-text-color: #8fa9a2 !important;
  --icons-color: #bbd9d0 !important;
  --main-purple-color: #f05b70 !important;
  --secondary-purple-color: #a5f0df !important;
  --purple-btn-bg: #a82e45 !important;
  --light-bg: #0d1b1d !important;
  --medium-bg: #15282a !important;
  --dark-bg: rgba(5, 13, 16, .9) !important;
  --dark-grey-bg: #102023 !important;
  --grey-background: #071114 !important;
  --border-color: rgba(165, 240, 223, .18) !important;
  --seconday-bg-color: rgba(165, 240, 223, .05) !important;
  --chapters-hover: rgba(165, 240, 223, .08) !important;
  --main-border-radius: 4px !important;
  --profile-skin-background-1: #183538;
  --profile-skin-background-2: #071114;
  --profile-skin-background-deg: 135deg;
  --profile-skin-background:
      radial-gradient(ellipse at 90% 0, rgba(187, 41, 64, .13), transparent 45%),
      radial-gradient(ellipse at 0 35%, rgba(70, 169, 151, .1), transparent 50%),
      #071114;
  --card-champion-paper: #edf1e7;
  --card-champion-ink: #12272b;
  --card-champion-red: #c9344e;
  --card-champion-indices: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='154' height='218' viewBox='0 0 154 218'%3E%3Cg fill='%2312272b' font-family='Georgia,serif' font-size='23'%3E%3Ctext x='14' y='32'%3EA%3C/text%3E%3Ctext x='14' y='32' transform='rotate(180 77 109)'%3EA%3C/text%3E%3C/g%3E%3C/svg%3E");
  background: var(--profile-skin-background);
}
.profile-skin.profile-skin--card-battle-top-1 .main {
  background: transparent;
}
.profile-skin.profile-skin--card-battle-top-1 .header {
  background: #0a1619 !important;
  border-bottom: 1px solid var(--border-color);
}
.profile-skin.profile-skin--card-battle-top-1 .profile__header,
.profile-skin.profile-skin--card-battle-top-1 .mobile-profile__background-image {
  position: relative;
}
.profile-skin.profile-skin--card-battle-top-1 .profile__header::before, .profile-skin.profile-skin--card-battle-top-1 .profile__header::after,
.profile-skin.profile-skin--card-battle-top-1 .mobile-profile__background-image::before,
.profile-skin.profile-skin--card-battle-top-1 .mobile-profile__background-image::after {
  position: absolute;
  width: 154px;
  height: 218px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(237, 241, 231, 0.8);
  border-radius: 9px;
  background: var(--card-champion-indices) center/100% 100% no-repeat, var(--card-champion-paper);
  font-family: Georgia, serif;
  font-size: 112px;
  line-height: 1;
  pointer-events: none;
  transform-origin: 50% 85%;
  box-shadow: inset 0 0 0 7px var(--card-champion-paper), inset 0 0 0 8px rgba(18, 39, 43, 0.15), 0 18px 32px rgba(0, 0, 0, 0.4);
}
.profile-skin.profile-skin--card-battle-top-1 .profile__header::before,
.profile-skin.profile-skin--card-battle-top-1 .mobile-profile__background-image::before {
  content: "♦";
  z-index: 3;
  right: 7%;
  top: 69px;
  color: var(--card-champion-red);
  transform: rotate(15deg);
  animation: card-champion-red-hand 8s ease-in-out infinite;
}
.profile-skin.profile-skin--card-battle-top-1 .profile__header::after,
.profile-skin.profile-skin--card-battle-top-1 .mobile-profile__background-image::after {
  content: "♠";
  z-index: 4;
  right: calc(7% + 90px);
  top: 43px;
  color: var(--card-champion-ink);
  transform: rotate(-12deg);
  box-shadow: inset 0 0 0 7px var(--card-champion-paper), inset 0 0 0 8px rgba(18, 39, 43, 0.15), -5px 5px 0 #305e5d, 0 24px 40px rgba(0, 0, 0, 0.5);
  animation: card-champion-black-hand 7s ease-in-out infinite;
}
.profile-skin.profile-skin--card-battle-top-1 .profile__background,
.profile-skin.profile-skin--card-battle-top-1 .mobile-profile__background {
  position: relative;
  isolation: isolate;
  background-color: var(--light-bg);
  box-shadow: 0 0 0 1px var(--border-color), 0 16px 36px rgba(0, 0, 0, 0.3);
}
.profile-skin.profile-skin--card-battle-top-1 .profile__background::before,
.profile-skin.profile-skin--card-battle-top-1 .mobile-profile__background::before {
  content: "01";
  position: absolute;
  z-index: 2;
  right: 30px;
  bottom: -14px;
  color: rgba(240, 91, 112, 0.12);
  font-size: 210px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  letter-spacing: -20px;
  pointer-events: none;
}
.profile-skin.profile-skin--card-battle-top-1 .profile__background::after,
.profile-skin.profile-skin--card-battle-top-1 .mobile-profile__background::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 64%, rgba(201, 52, 78, 0.2) 64.1% 64.4%, transparent 64.5%), repeating-linear-gradient(115deg, transparent 0 44px, rgba(165, 240, 223, 0.025) 45px 46px), radial-gradient(ellipse at 82% 50%, rgba(40, 104, 97, 0.28), transparent 50%), linear-gradient(90deg, rgba(5, 14, 18, 0.84), rgba(5, 14, 18, 0.42) 58%, rgba(5, 14, 18, 0.28));
  box-shadow: inset 4px 0 0 var(--card-champion-red), inset 0 -3px 0 #203b3e;
}
.profile-skin.profile-skin--card-battle-top-1 .profile__background {
  height: 340px;
  padding: 40px 48px;
  align-items: center;
}
.profile-skin.profile-skin--card-battle-top-1 .profile__wrapper {
  max-width: calc(100% - 380px);
}
.profile-skin.profile-skin--card-battle-top-1 .profile__controls {
  z-index: 6;
}
.profile-skin.profile-skin--card-battle-top-1 .profile__controls a, .profile-skin.profile-skin--card-battle-top-1 .profile__controls button {
  color: var(--secondary-purple-color);
  background: rgba(7, 17, 20, 0.72);
  border-radius: 2px;
  box-shadow: 0 0 0 2px rgba(7, 17, 20, 0.72);
}
.profile-skin.profile-skin--card-battle-top-1 .profile__name,
.profile-skin.profile-skin--card-battle-top-1 .mobile-profile__name {
  color: var(--card-champion-paper);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-shadow: 3px 3px 0 rgba(201, 52, 78, 0.35);
}
.profile-skin.profile-skin--card-battle-top-1 .profile__info-label-type--user {
  border-radius: 2px;
  background: #173a39;
  color: var(--secondary-purple-color);
  box-shadow: inset 0 0 0 1px rgba(165, 240, 223, 0.2);
}
.profile-skin.profile-skin--card-battle-top-1 .profile__wrapper::after,
.profile-skin.profile-skin--card-battle-top-1 .mobile-profile__name::after {
  content: "№ 1  /  КАРТОЧНЫЕ БОИ";
  display: table;
  margin-top: 20px;
  padding: 10px 16px;
  border: 1px solid #f07282;
  border-radius: 2px;
  background: var(--card-champion-red);
  color: #fff2ef;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1.5px;
  text-shadow: none;
  box-shadow: 4px 4px 0 rgba(201, 52, 78, 0.22);
  pointer-events: none;
}
.profile-skin.profile-skin--card-battle-top-1 .profile__avatar,
.profile-skin.profile-skin--card-battle-top-1 .mobile-profile__avatar {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.profile-skin.profile-skin--card-battle-top-1 .profile__avatar::before,
.profile-skin.profile-skin--card-battle-top-1 .mobile-profile__avatar::before {
  content: "♠";
  position: absolute;
  z-index: 6;
  left: -14px;
  top: -17px;
  width: 27px;
  height: 36px;
  border: 1px solid #fff;
  border-radius: 3px;
  background: var(--card-champion-paper);
  color: var(--card-champion-red);
  font-family: Georgia, serif;
  font-size: 24px;
  line-height: 34px;
  text-align: center;
  transform: rotate(-9deg);
  box-shadow: 2px 3px 0 #792b3b;
  pointer-events: none;
}
.profile-skin.profile-skin--card-battle-top-1 .profile__avatar::after,
.profile-skin.profile-skin--card-battle-top-1 .mobile-profile__avatar::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 2px solid var(--card-champion-paper);
  border-radius: 7px;
  box-shadow: -4px 4px 0 var(--card-champion-red), 4px -4px 0 #36716d;
  pointer-events: none;
}
.profile-skin.profile-skin--card-battle-top-1 .profile__title {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 2px;
  border-left: 4px solid var(--card-champion-red);
  background: var(--card-champion-paper);
  color: var(--card-champion-ink);
  font-size: 17px;
  font-weight: 600;
  box-shadow: 3px 3px 0 #203a3d;
}
.profile-skin.profile-skin--card-battle-top-1 .profile__title::before {
  content: "♠";
  flex: 0 0 14px;
  margin-right: 10px;
  font-family: Georgia, serif;
  font-size: 21px;
  color: var(--card-champion-red);
  pointer-events: none;
}
.profile-skin.profile-skin--card-battle-top-1 .profile__title::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 36%, rgba(67, 159, 143, 0.16) 50%, transparent 64%) -100% 0/45% 100% no-repeat, linear-gradient(90deg, var(--card-champion-red) 0 50%, #38897f 50%) -100% 100%/35% 2px no-repeat;
  animation: card-champion-table-sweep 7s ease-in-out infinite;
}
.profile-skin.profile-skin--card-battle-top-1 .profile__title a {
  position: relative;
  color: #a62d44;
}
.profile-skin.profile-skin--card-battle-top-1 .profile__title:nth-of-type(2n)::before {
  content: "♦";
}
.profile-skin.profile-skin--card-battle-top-1 .profile__title:nth-of-type(2n)::after {
  animation-delay: -3s;
}
.profile-skin.profile-skin--card-battle-top-1 .profile__activity-item,
.profile-skin.profile-skin--card-battle-top-1 .profile__gift-item,
.profile-skin.profile-skin--card-battle-top-1 .comments__send-form {
  box-shadow: inset 0 0 0 1px var(--border-color), 3px 3px 0 rgba(0, 0, 0, 0.2);
}
.profile-skin.profile-skin--card-battle-top-1 .profile__activity-bar--fill,
.profile-skin.profile-skin--card-battle-top-1 .profile__user-activity-bar--active {
  background: linear-gradient(90deg, #b63249, #f06a7b);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}
.profile-skin.profile-skin--card-battle-top-1 .profile__cut {
  border-color: var(--secondary-purple-color);
  background: var(--light-bg);
}
.profile-skin.profile-skin--card-battle-top-1 .mobile-profile__background {
  overflow: hidden;
}
.profile-skin.profile-skin--card-battle-top-1 .mobile-profile__background::before {
  right: 18px;
  bottom: 2px;
  font-size: 150px;
  letter-spacing: -12px;
}
.profile-skin.profile-skin--card-battle-top-1 .mobile-profile__background::after {
  background: linear-gradient(115deg, transparent 64%, rgba(201, 52, 78, 0.14) 64.1% 64.4%, transparent 64.5%), linear-gradient(0deg, rgba(5, 14, 18, 0.65), rgba(5, 14, 18, 0.18) 55%);
}
.profile-skin.profile-skin--card-battle-top-1 .mobile-profile__background-image::before, .profile-skin.profile-skin--card-battle-top-1 .mobile-profile__background-image::after {
  width: 58px;
  height: 82px;
  font-size: 42px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 3px var(--card-champion-paper), inset 0 0 0 4px rgba(18, 39, 43, 0.15), 0 6px 12px rgba(0, 0, 0, 0.3);
}
.profile-skin.profile-skin--card-battle-top-1 .mobile-profile__background-image::before {
  right: 18px;
  top: 24px;
}
.profile-skin.profile-skin--card-battle-top-1 .mobile-profile__background-image::after {
  right: 60px;
  top: 16px;
}
.profile-skin.profile-skin--card-battle-top-1 .mobile-profile__wrapper {
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #0e2427, #0b171b 380px) !important;
  box-shadow: 0 -3px 0 #457b72;
}
.profile-skin.profile-skin--card-battle-top-1 .mobile-profile__name::after {
  margin: 15px auto 0;
  max-width: 100%;
  font-size: 9px;
  letter-spacing: 1.2px;
}
.profile-skin.profile-skin--card-battle-top-1 .mobile-profile__stat {
  gap: 5px;
  padding: 12px 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
.profile-skin.profile-skin--card-battle-top-1 .mobile-profile__column {
  padding: 8px 2px;
  border-radius: 2px;
  background: rgba(165, 240, 223, 0.04);
}
.profile-skin.profile-skin--card-battle-top-1 .mobile-profile__column div:first-of-type {
  color: var(--secondary-purple-color);
}
@media screen and (max-width: 1100px) {
  .profile-skin.profile-skin--card-battle-top-1 .profile__wrapper {
    max-width: calc(100% - 285px);
  }
  .profile-skin.profile-skin--card-battle-top-1 .profile__header::before, .profile-skin.profile-skin--card-battle-top-1 .profile__header::after {
    width: 130px;
    height: 184px;
    font-size: 92px;
  }
  .profile-skin.profile-skin--card-battle-top-1 .profile__header::before {
    right: 6%;
  }
  .profile-skin.profile-skin--card-battle-top-1 .profile__header::after {
    right: calc(6% + 62px);
  }
}
@media screen and (max-width: 800px) {
  .profile-skin.profile-skin--card-battle-top-1 .profile__background {
    padding: 32px 24px;
    height: auto;
    min-height: 340px;
  }
  .profile-skin.profile-skin--card-battle-top-1 .profile__header::before, .profile-skin.profile-skin--card-battle-top-1 .profile__header::after {
    opacity: 0.2;
  }
  .profile-skin.profile-skin--card-battle-top-1 .profile__wrapper {
    max-width: calc(100% - 125px);
  }
}
@media screen and (max-width: 550px) {
  .profile-skin.profile-skin--card-battle-top-1 .profile__header::before, .profile-skin.profile-skin--card-battle-top-1 .profile__header::after {
    display: none;
  }
  .profile-skin.profile-skin--card-battle-top-1 .profile__background {
    padding: 36px 20px 28px;
  }
  .profile-skin.profile-skin--card-battle-top-1 .profile__wrapper {
    max-width: 100%;
  }
  .profile-skin.profile-skin--card-battle-top-1 .profile__wrapper::after {
    margin: 16px auto 0;
    font-size: 9px;
    letter-spacing: 1px;
  }
  .profile-skin.profile-skin--card-battle-top-1 .profile__title {
    padding: 8px;
    font-size: 15px;
  }
  .profile-skin.profile-skin--card-battle-top-1 .profile__title::before {
    margin-right: 8px;
    flex-basis: 11px;
    font-size: 18px;
  }
  .profile-skin.profile-skin--card-battle-top-1 .profile__title a {
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .profile-skin.profile-skin--card-battle-top-1 .profile__header::before,
  .profile-skin.profile-skin--card-battle-top-1 .profile__header::after,
  .profile-skin.profile-skin--card-battle-top-1 .mobile-profile__background-image::before,
  .profile-skin.profile-skin--card-battle-top-1 .mobile-profile__background-image::after,
  .profile-skin.profile-skin--card-battle-top-1 .profile__title::after {
    animation: none;
  }
  .profile-skin.profile-skin--card-battle-top-1 .profile__title::after {
    background-position: 50% 0, 50% 100%;
  }
}

@keyframes card-champion-red-hand {
  0%, 100% {
    transform: translateY(0) rotate(15deg);
  }
  50% {
    transform: translateY(-9px) rotate(19deg);
  }
}
@keyframes card-champion-black-hand {
  0%, 100% {
    transform: translateY(0) rotate(-12deg);
  }
  50% {
    transform: translateY(-12px) rotate(-8deg);
  }
}
@keyframes card-champion-table-sweep {
  0%, 10% {
    background-position: -100% 0, -100% 100%;
    opacity: 0;
  }
  20%, 75% {
    opacity: 1;
  }
  90%, 100% {
    background-position: 200% 0, 200% 100%;
    opacity: 0;
  }
}
.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;
  }
}
.hide-card-actions .card-actions {
  display: none !important;
}

.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: 8px;
  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%;
  aspect-ratio: 2/3;
  -o-object-fit: contain;
     object-fit: contain;
  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: 720px;
  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: 3px;
  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, .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;
  padding-top: 8px;
  margin-top: -8px;
}
.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: 600;
  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: 700;
}
.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-show__event-frame-btn + .card-show__has-anim {
  top: 68px;
}

.card-show__event-frame-btn + .card-show__up-enable + .card-show__has-anim,
.card-show__up-enable + .card-show__event-frame-btn + .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;
}

.card-anim-frame {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

@supports (-webkit-touch-callout: none) {
  .card-show__wrapper > a > .card-anim-frame--preview {
    width: auto !important;
    height: 96.5% !important;
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
    -o-object-fit: fill;
       object-fit: fill;
  }
}
.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;
  }
}
.profile__friends-avatar {
  position: relative;
  overflow: visible;
}

.profile__friends-trade-lock {
  position: absolute;
  right: -5px;
  bottom: -4px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
  font-size: 11px;
  line-height: 1;
}
.profile__friends-trade-lock .icon {
  margin: 0;
  font-size: 11px;
  line-height: 1;
}
.profile__friends-trade-lock--closed {
  background: #e05252;
}
.profile__friends-trade-lock--friends {
  background: #43a967;
}

.cards-progress {
  display: grid;
  grid-template-columns: 42px minmax(70px, 1fr) auto 42px;
  align-items: center;
  gap: 12px;
}
.cards-progress__market {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  color: #67348f;
  background: rgba(255, 255, 255, 0.72);
  border: 2px solid rgba(103, 52, 143, 0.22);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(77, 38, 110, 0.08), inset 0 0 10px rgba(103, 52, 143, 0.05);
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.cards-progress__market svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cards-progress__market:hover {
  color: #542674;
  background: #fff;
  border-color: rgba(103, 52, 143, 0.45);
  transform: translateY(-1px);
}
.cards-progress__market:active {
  transform: scale(0.94);
}

@media (max-width: 600px) {
  .cards-progress {
    grid-template-columns: 36px minmax(45px, 1fr) auto 36px;
    gap: 8px;
  }
  .cards-progress__market {
    width: 36px;
    height: 36px;
  }
  .cards-progress__market svg {
    width: 18px;
    height: 18px;
  }
  .cards-progress__number {
    white-space: nowrap;
    font-size: 13px;
  }
}
.card-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  margin-top: 8px;
  /*
  |--------------------------------------------------------------------------
  | LOCK
  |--------------------------------------------------------------------------
  */
  /*
  |--------------------------------------------------------------------------
  | FAVORITE
  |--------------------------------------------------------------------------
  */
  /*
  |--------------------------------------------------------------------------
  | WANT
  |--------------------------------------------------------------------------
  */
  /*
  |--------------------------------------------------------------------------
  | REJECT
  |--------------------------------------------------------------------------
  */
}
.card-actions__btn {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 27px;
  padding: 0;
  margin: 0;
  background: #fff;
  border: 1px solid #e3e6eb;
  border-radius: 9px;
  color: #c5cad1;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}
.card-actions__btn svg {
  display: block;
  width: 20px;
  height: 20px;
  overflow: visible;
  pointer-events: none;
}
.card-actions__btn:hover {
  background: #fafbfc;
}
.card-actions__btn:active {
  transform: scale(0.95);
}
.card-actions__btn--lock svg .card-actions__lock-top {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
}
.card-actions__btn--lock svg .card-actions__lock-body {
  fill: currentColor;
}
.card-actions__btn--lock svg .card-actions__lock-hole {
  fill: #fff;
}
.card-actions__btn--lock.is-active {
  color: #0eaa65;
}
.card-actions__btn--favorite svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linejoin: round;
}
.card-actions__btn--favorite.is-active {
  color: #ffb31b;
}
.card-actions__btn--favorite.is-active svg path {
  fill: currentColor;
  stroke: currentColor;
}
.card-actions__btn--want svg circle,
.card-actions__btn--want svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.05;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card-actions__btn--want.is-active {
  color: #0eaa65;
}
.card-actions__btn--reject svg circle,
.card-actions__btn--reject svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.05;
  stroke-linecap: round;
}
.card-actions__btn--reject.is-active {
  color: #ff2533;
}

/*
|--------------------------------------------------------------------------
| DARK
|--------------------------------------------------------------------------
*/
body.dark .card-actions__btn {
  background: #25272c;
  border-color: #3a3d44;
  color: #747983;
  box-shadow: none;
}
body.dark .card-actions__btn:hover {
  background: #2a2d32;
}
body.dark .card-actions__btn--lock .card-actions__lock-hole {
  fill: #25272c;
}
body.dark .card-actions__btn--lock.is-active {
  color: #18b873;
}
body.dark .card-actions__btn--lock.is-active .card-actions__lock-hole {
  fill: #25272c;
}
body.dark .card-actions__btn--favorite.is-active {
  color: #ffb928;
}
body.dark .card-actions__btn--want.is-active {
  color: #18b873;
}
body.dark .card-actions__btn--reject.is-active {
  color: #ff3945;
}

/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/
@media screen and (max-width: 650px) {
  .card-actions {
    gap: 4px;
    margin-top: 6px;
  }
  .card-actions__btn {
    height: 25px;
    border-radius: 8px;
  }
  .card-actions__btn svg {
    width: 18px;
    height: 18px;
  }
}
@media screen and (max-width: 380px) {
  .card-actions {
    gap: 3px;
  }
  .card-actions__btn {
    height: 27px;
    border-radius: 7px;
  }
  .card-actions__btn svg {
    width: 17px;
    height: 17px;
  }
}
/* =========================================================
   CARD ACTIONS — INTERACTION
========================================================= */
.card-actions__btn {
  position: relative;
  -webkit-tap-highlight-color: transparent;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transform: translateZ(0);
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.18s ease, color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.card-actions__btn svg {
  display: block;
  transform-origin: center;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.18s ease;
}

/* =========================================================
   НАЖАТИЕ
========================================================= */
.card-actions__btn:active {
  transform: scale(0.9);
}

@media (hover: hover) {
  .card-actions__btn:hover {
    transform: translateY(-1px) scale(1.05);
  }
  .card-actions__btn:active {
    transform: translateY(0) scale(0.9);
  }
}
/* =========================================================
   LOADING
========================================================= */
.card-actions__btn.is-loading {
  pointer-events: none;
  opacity: 0.55;
  transform: scale(0.93);
}

.card-actions__btn.is-loading svg {
  animation: cardActionLoading 0.7s ease-in-out infinite alternate;
}

@keyframes cardActionLoading {
  from {
    transform: scale(0.85);
    opacity: 0.6;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
/* =========================================================
   LONG PRESS
========================================================= */
.card-actions__btn--lock.is-holding,
.card-actions__btn--reject.is-holding {
  transform: scale(0.88);
}

.card-actions__btn--lock.is-holding svg,
.card-actions__btn--reject.is-holding svg {
  animation: cardLockHolding 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes cardLockHolding {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.9);
  }
  75% {
    transform: scale(0.82);
  }
  100% {
    transform: scale(1.12);
  }
}
/* =========================================================
   LOCK OPEN/CLOSE
========================================================= */
.card-actions__lock-top {
  transform-box: fill-box;
  transform-origin: 15% 100%;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* открытый */
.card-actions__btn--lock:not(.is-active) .card-actions__lock-top {
  transform: translate(1.5px, 1px) rotate(18deg);
}

/* закрытый */
.card-actions__btn--lock.is-active .card-actions__lock-top {
  transform: translate(0, 0) rotate(0);
}

/* =========================================================
   SUCCESS LOCK
========================================================= */
.card-actions__btn--lock.is-success-animation svg {
  animation: cardLockSuccess 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.25);
}

@keyframes cardLockSuccess {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.78);
  }
  75% {
    transform: scale(1.13);
  }
  100% {
    transform: scale(1);
  }
}
/* =========================================================
   FAVORITE
========================================================= */
.card-actions__btn--favorite.is-success-animation svg {
  animation: cardFavoriteSuccess 0.48s cubic-bezier(0.18, 0.89, 0.32, 1.35);
}

@keyframes cardFavoriteSuccess {
  0% {
    transform: scale(1) rotate(0);
  }
  35% {
    transform: scale(0.72) rotate(-12deg);
  }
  68% {
    transform: scale(1.25) rotate(8deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}
.card-actions__btn--favorite.is-active.is-success-animation::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 2px solid currentColor;
  pointer-events: none;
  animation: cardFavoriteRing 0.48s ease-out forwards;
}

@keyframes cardFavoriteRing {
  0% {
    opacity: 0.65;
    transform: scale(0.4);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
/* =========================================================
   WANT
========================================================= */
.card-actions__btn--want.is-success-animation svg {
  animation: cardWantSuccess 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}

@keyframes cardWantSuccess {
  0% {
    transform: scale(1) rotate(0);
  }
  40% {
    transform: scale(0.72) rotate(-15deg);
  }
  72% {
    transform: scale(1.2) rotate(8deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}
/* =========================================================
   REJECT
========================================================= */
.card-actions__btn--reject.is-success-animation svg {
  animation: cardRejectSuccess 0.38s ease;
}

@keyframes cardRejectSuccess {
  0%, 100% {
    transform: translateX(0) scale(1);
  }
  25% {
    transform: translateX(-2px) scale(0.92);
  }
  50% {
    transform: translateX(2px) scale(1.08);
  }
  75% {
    transform: translateX(-1px) scale(0.97);
  }
}
/* =========================================================
   ERROR
========================================================= */
.card-actions__btn.is-error-animation {
  animation: cardActionError 0.32s ease;
}

@keyframes cardActionError {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-3px);
  }
  50% {
    transform: translateX(3px);
  }
  75% {
    transform: translateX(-2px);
  }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
  .card-actions__btn,
  .card-actions__btn svg,
  .card-actions__lock-top {
    transition: none !important;
  }
  .card-actions__btn,
  .card-actions__btn svg,
  .card-actions__btn::after {
    animation: none !important;
  }
}
/* =========================================================
   PACK BUY — VARIANT 7 FINAL
   ========================================================= */
.lootbox__middle--progress {
  --arrow-size: 18px;
  --pack-bg: #fff;
  --pack-border: #dedce5;
  --pack-hover: #faf9fc;
  display: flex;
  align-items: stretch;
  width: 100%;
  /*
   * Больше расстояние до "Купить"
   */
  margin: 14px 0 20px;
  padding: 0;
  /*
   * Внешняя рамка всей цепочки.
   * Именно она делает нормальные круглые
   * углы первого и последнего блока.
   */
  border: 1px solid var(--pack-border);
  border-radius: 12px;
  background: var(--pack-bg);
  overflow: hidden;
  isolation: isolate;
  /* =========================================================
     TEXT
     ========================================================= */
}
.lootbox__middle--progress .lootbox__middle-item {
  position: relative;
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  height: 56px;
  min-height: 56px;
  padding: 7px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /*
   * Никаких border у самих элементов.
   * Поэтому никаких вертикальных полос.
   */
  border: 0;
  border-radius: 0;
  background: var(--pack-bg);
  color: var(--main-text-color);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, filter 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  /*
   * Порядок наложения.
   *
   * Стрелка первого лежит поверх второго,
   * второго — поверх третьего.
   */
  /* =====================================================
     FIRST
     ===================================================== */
  /* =====================================================
     MIDDLE
     ===================================================== */
  /* =====================================================
     LAST
     ===================================================== */
  /* =====================================================
     РАЗДЕЛИТЕЛЬ

     Только две диагональные линии.
     НИКАКОЙ вертикальной линии у основания.
     ===================================================== */
  /* =====================================================
     HOVER
     ===================================================== */
  /* =====================================================
     ACTIVE
     ===================================================== */
}
.lootbox__middle--progress .lootbox__middle-item:nth-child(1) {
  z-index: 3;
}
.lootbox__middle--progress .lootbox__middle-item:nth-child(2) {
  z-index: 2;
}
.lootbox__middle--progress .lootbox__middle-item:nth-child(3) {
  z-index: 1;
}
.lootbox__middle--progress .lootbox__middle-item:first-child {
  padding-left: 14px;
  padding-right: calc(var(--arrow-size) + 14px);
  -webkit-clip-path: polygon(0 0, calc(100% - var(--arrow-size)) 0, 100% 50%, calc(100% - var(--arrow-size)) 100%, 0 100%);
          clip-path: polygon(0 0, calc(100% - var(--arrow-size)) 0, 100% 50%, calc(100% - var(--arrow-size)) 100%, 0 100%);
}
.lootbox__middle--progress .lootbox__middle-item:not(:first-child):not(:last-child) {
  /*
   * Нахлёст ровно на размер шеврона.
   */
  margin-left: calc(var(--arrow-size) * -1);
  padding-left: calc(var(--arrow-size) + 14px);
  padding-right: calc(var(--arrow-size) + 14px);
  -webkit-clip-path: polygon(0 0, calc(100% - var(--arrow-size)) 0, 100% 50%, calc(100% - var(--arrow-size)) 100%, 0 100%, var(--arrow-size) 50%);
          clip-path: polygon(0 0, calc(100% - var(--arrow-size)) 0, 100% 50%, calc(100% - var(--arrow-size)) 100%, 0 100%, var(--arrow-size) 50%);
}
.lootbox__middle--progress .lootbox__middle-item:last-child {
  margin-left: calc(var(--arrow-size) * -1);
  padding-left: calc(var(--arrow-size) + 14px);
  padding-right: 14px;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--arrow-size) 50%);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--arrow-size) 50%);
}
.lootbox__middle--progress .lootbox__middle-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--arrow-size);
  height: 100%;
  /*
   * Рисуем именно:
   *
   * \
   *  >
   * /
   *
   * без левой вертикальной стороны.
   */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='56' viewBox='0 0 18 56'%3E%3Cpath d='M0 0 L18 28 L0 56' fill='none' stroke='%23dedce5' stroke-width='1.1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 5;
}
.lootbox__middle--progress .lootbox__middle-item:hover {
  background: var(--pack-hover);
  /*
   * НЕ двигаем элемент.
   * Поэтому при hover геометрия вообще не меняется.
   */
  transform: none;
}
.lootbox__middle--progress .lootbox__middle-item--active {
  background: linear-gradient(135deg, #9346f7 0%, #8438f2 48%, #742ce7 100%);
  color: #fff;
  /*
   * Без drop-shadow на шевроне,
   * чтобы не появлялись дополнительные линии.
   */
  filter: none;
  /*
   * У активного разделитель не нужен.
   * Форма самого clip-path уже создаёт границу.
   */
}
.lootbox__middle--progress .lootbox__middle-item--active:not(:last-child)::after {
  display: none;
}
.lootbox__middle--progress .lootbox__middle-item--active:hover {
  background: linear-gradient(135deg, #984bf9 0%, #893df4 48%, #7830e9 100%);
}
.lootbox__middle--progress .lootbox__middle-item--active .lootbox__middle-count,
.lootbox__middle--progress .lootbox__middle-item--active .lootbox__middle-price {
  color: #fff;
}
.lootbox__middle--progress .lootbox__middle-item--active .diamond {
  filter: brightness(0) invert(1);
  opacity: 0.88;
}
.lootbox__middle--progress .lootbox__middle-count {
  position: relative;
  margin-bottom: 3px;
  font-size: 13px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--main-text-color);
  white-space: nowrap;
  z-index: 10;
}
.lootbox__middle--progress .lootbox__middle-price {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  color: var(--main-text-color);
  white-space: nowrap;
  z-index: 10;
}
.lootbox__middle--progress .lootbox__middle-price .diamond {
  width: 13px;
  height: 13px;
  margin-right: 4px;
  flex: 0 0 auto;
}

/* =========================================================
   BUY BUTTON
   ========================================================= */
.lootbox__footer--v7 {
  margin-top: 0;
}
.lootbox__footer--v7 .lootbox__buy-v7 {
  position: relative;
  width: 100%;
  height: 42px;
  min-height: 42px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(90deg, #7c3aed 0%, #873cf1 50%, #722fe5 100%) !important;
  color: #fff !important;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(112, 47, 220, 0.12);
  overflow: hidden;
  transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.lootbox__footer--v7 .lootbox__buy-v7:hover {
  filter: brightness(1.025);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(112, 47, 220, 0.17);
}
.lootbox__footer--v7 .lootbox__buy-v7:active {
  transform: scale(0.993);
}

.lootbox__buy-arrow {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  font-size: 19px;
  line-height: 1;
  font-weight: 300;
  opacity: 0.85;
  transition: transform 0.15s ease;
}

.lootbox__buy-v7:hover .lootbox__buy-arrow {
  transform: translate(2px, -50%);
}

/* =========================================================
   DUST BUTTON
   ========================================================= */
.lootbox__footer--dust {
  margin-top: 8px !important;
}
.lootbox__footer--dust .lootbox__open-dust-btn {
  height: 40px;
  min-height: 40px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(119, 49, 235, 0.19) !important;
  border-radius: 12px;
  background: rgba(119, 49, 235, 0.035) !important;
  color: #6036dc !important;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  box-shadow: none !important;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.lootbox__footer--dust .lootbox__open-dust-btn:hover {
  background: rgba(119, 49, 235, 0.065) !important;
  border-color: rgba(119, 49, 235, 0.3) !important;
  transform: translateY(-1px);
}
.lootbox__footer--dust .lootbox__open-dust-btn:active {
  transform: scale(0.993);
}

.lootbox__dust-button-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.lootbox__dust-button-icon svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   BONUS
   ========================================================= */
.lootbox-bonus {
  padding: 17px 18px;
  background: var(--light-bg);
  border: 1px solid rgba(25, 25, 40, 0.055);
  border-radius: 15px;
  box-shadow: 0 8px 24px rgba(21, 18, 35, 0.035);
}

.lootbox-bonus__title {
  margin-bottom: 13px;
  font-size: 18px;
  font-weight: 750;
}

.lootbox-bonus__item {
  gap: 10px;
}

.lootbox-bonus__dust {
  margin-top: 13px;
  padding-top: 12px;
}

/* =========================================================
   DARK THEME
   ========================================================= */
body.dark .lootbox-bonus {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.075);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
}
body.dark .lootbox__middle--progress {
  --pack-bg: #24262b;
  --pack-hover: #292c31;
  --pack-border: #41434b;
}
body.dark .lootbox__middle--progress .lootbox__middle-item {
  /*
   * Тёмная версия диагонального разделителя.
   */
}
body.dark .lootbox__middle--progress .lootbox__middle-item:not(:last-child)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='56' viewBox='0 0 18 56'%3E%3Cpath d='M0 0 L18 28 L0 56' fill='none' stroke='%2341434b' stroke-width='1.1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
body.dark .lootbox__middle--progress .lootbox__middle-item--active {
  background: linear-gradient(135deg, #8240df 0%, #7432d7 50%, #6427c1 100%);
  color: #fff;
}
body.dark .lootbox__middle--progress .lootbox__middle-item--active:not(:last-child)::after {
  display: none;
}
body.dark .lootbox__middle--progress .lootbox__middle-item--active:hover {
  background: linear-gradient(135deg, #8744e4 0%, #7936dc 50%, #682bc6 100%);
}
body.dark .lootbox__footer--v7 .lootbox__buy-v7 {
  background: linear-gradient(90deg, #6730c8 0%, #7435d8 50%, #6027ba 100%) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
body.dark .lootbox__footer--dust .lootbox__open-dust-btn {
  background: rgba(138, 86, 240, 0.055) !important;
  border-color: rgba(171, 132, 246, 0.17) !important;
  color: #ad8bf4 !important;
}
body.dark .lootbox__footer--dust .lootbox__open-dust-btn:hover {
  background: rgba(138, 86, 240, 0.09) !important;
  border-color: rgba(171, 132, 246, 0.28) !important;
}

/* =========================================================
   MOBILE
   ========================================================= */
@media screen and (max-width: 480px) {
  .lootbox__middle--progress {
    --arrow-size: 14px;
    /*
     * Тоже удвоенный нижний отступ
     */
    margin: 13px 0 18px;
  }
  .lootbox__middle--progress .lootbox__middle-item {
    height: 52px;
    min-height: 52px;
    padding-top: 6px;
    padding-bottom: 6px;
    /*
     * SVG автоматически масштабируется
     * под меньший шеврон.
     */
  }
  .lootbox__middle--progress .lootbox__middle-item:first-child {
    padding-left: 7px;
    padding-right: calc(var(--arrow-size) + 9px);
  }
  .lootbox__middle--progress .lootbox__middle-item:not(:first-child):not(:last-child) {
    padding-left: calc(var(--arrow-size) + 9px);
    padding-right: calc(var(--arrow-size) + 9px);
  }
  .lootbox__middle--progress .lootbox__middle-item:last-child {
    padding-left: calc(var(--arrow-size) + 9px);
    padding-right: 7px;
  }
  .lootbox__middle--progress .lootbox__middle-item:not(:last-child)::after {
    width: var(--arrow-size);
  }
  .lootbox__middle--progress .lootbox__middle-count {
    font-size: 12px;
  }
  .lootbox__middle--progress .lootbox__middle-price {
    font-size: 13px;
  }
  .lootbox__middle--progress .lootbox__middle-price .diamond {
    width: 12px;
    height: 12px;
    margin-right: 3px;
  }
  .lootbox__footer--v7 .lootbox__buy-v7 {
    height: 40px;
    min-height: 40px;
    border-radius: 10px;
    font-size: 13px;
  }
  .lootbox__footer--dust .lootbox__open-dust-btn {
    height: 38px;
    min-height: 38px;
    border-radius: 10px;
    font-size: 12px;
  }
  .lootbox__buy-arrow {
    right: 13px;
    font-size: 18px;
  }
}
.manga-cards__item-wrapper[data-is-special="1"] .manga-cards__image,
.manga-cards__item-wrapper[data-is-special="1"] video {
  transform: scale(1.06);
  transform-origin: center;
}

/*
|--------------------------------------------------------------------------
| READER CARD PROMO
|--------------------------------------------------------------------------
*/
.reader-card-promo {
  position: relative;
  overflow: hidden;
  width: calc(100% - 30px);
  max-width: 760px;
  margin: 28px auto;
  padding: 21px 24px 20px;
  box-sizing: border-box;
  border: 1px solid rgba(155, 58, 255, 0.32);
  border-radius: 21px;
  background: radial-gradient(circle at 2% 0%, rgba(143, 42, 255, 0.13), transparent 34%), radial-gradient(circle at 100% 10%, rgba(238, 57, 255, 0.09), transparent 31%), linear-gradient(145deg, #fff 0%, #fdfaff 52%, #f9f3ff 100%);
  box-shadow: none;
}

/*
|--------------------------------------------------------------------------
| BACKGROUND DECOR
|--------------------------------------------------------------------------
*/
.reader-card-promo::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -120px;
  right: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(133, 42, 255, 0.15) 0%, rgba(209, 68, 255, 0.06) 40%, transparent 70%);
  pointer-events: none;
  animation: readerPromoGlow 6s ease-in-out infinite alternate;
}

.reader-card-promo::after {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: -160px;
  left: -100px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(222, 54, 255, 0.09) 0%, transparent 68%);
  pointer-events: none;
  animation: readerPromoGlowSecond 7s ease-in-out infinite alternate;
}

/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
*/
.reader-card-promo__header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 18px;
}

.reader-card-promo__header-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 47px;
  height: 47px;
  flex: 0 0 47px;
  margin-right: 13px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(129, 31, 255, 0.15), rgba(231, 54, 255, 0.08));
  color: #8425ff;
  font-size: 25px;
  animation: readerPromoIcon 3.2s ease-in-out infinite;
}

.reader-card-promo__header-icon::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(146, 49, 255, 0.13);
  border-radius: 10px;
  pointer-events: none;
}

.reader-card-promo__header-content {
  min-width: 0;
  flex: 1;
}

.reader-card-promo__title {
  color: #222126;
  font-size: 21px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.reader-card-promo__description {
  margin-top: 4px;
  color: #77737d;
  font-size: 14px;
  line-height: 1.35;
}

.reader-card-promo__badge {
  flex-shrink: 0;
  margin-left: 12px;
  padding: 8px 13px;
  border: 1px solid rgba(224, 55, 255, 0.1);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(236, 64, 255, 0.14), rgba(174, 58, 255, 0.14));
  color: #d82bee;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.03em;
  animation: readerPromoBadge 2.8s ease-in-out infinite;
}

/*
|--------------------------------------------------------------------------
| CARDS
|--------------------------------------------------------------------------
*/
.reader-card-promo__cards {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  margin-bottom: 17px;
}

.reader-card-promo__card {
  display: block;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  transform-origin: center bottom;
}

/*
 * На телефоне hover почти бесполезен,
 * поэтому карты постоянно слегка оживают по очереди.
 */
.reader-card-promo__card:nth-child(1) {
  animation: readerPromoCardOne 5.4s ease-in-out infinite;
}

.reader-card-promo__card:nth-child(2) {
  animation: readerPromoCardTwo 5.4s 0.18s ease-in-out infinite;
}

.reader-card-promo__card:nth-child(3) {
  animation: readerPromoCardThree 5.4s 0.36s ease-in-out infinite;
}

.reader-card-promo__poster {
  position: relative;
  width: 85%;
  margin: 0 auto;
  aspect-ratio: 0.68;
  overflow: hidden;
  border: 1px solid rgba(88, 74, 105, 0.13);
  border-radius: 17px;
  background: #f1eef5;
  transform: translateZ(0);
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.22s ease;
}

.reader-card-promo__poster img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.28s ease, filter 0.28s ease;
}

/*
|--------------------------------------------------------------------------
| CARD SHINE
|--------------------------------------------------------------------------
*/
.reader-card-promo__poster::after {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: -65%;
  width: 36%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.33) 50%, rgba(255, 255, 255, 0.05) 75%, transparent 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: readerPromoCardShine 5.4s ease-in-out infinite;
}

.reader-card-promo__card:nth-child(2) .reader-card-promo__poster::after {
  animation-delay: 0.22s;
}

.reader-card-promo__card:nth-child(3) .reader-card-promo__poster::after {
  animation-delay: 0.44s;
}

/*
|--------------------------------------------------------------------------
| DESKTOP HOVER
|--------------------------------------------------------------------------
*/
.reader-card-promo__card:hover .reader-card-promo__poster,
.reader-card-promo__card:focus-visible .reader-card-promo__poster {
  transform: translateY(-5px) scale(1.025);
  border-color: rgba(147, 57, 255, 0.43);
}

.reader-card-promo__card:hover .reader-card-promo__poster img,
.reader-card-promo__card:focus-visible .reader-card-promo__poster img {
  transform: scale(1.025);
  filter: saturate(1.05);
}

/*
|--------------------------------------------------------------------------
| BUTTON
|--------------------------------------------------------------------------
*/
.reader-card-promo__button {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 42px;
  margin: 0;
  padding: 0 16px;
  box-sizing: border-box;
  overflow: hidden;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(100deg, #7425ed 0%, #882cff 48%, #982dff 100%);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.18s ease, filter 0.18s ease;
}

.reader-card-promo__button::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -55%;
  width: 30%;
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  animation: readerPromoButtonShine 4s ease-in-out infinite;
}

.reader-card-promo__button:hover {
  color: #fff;
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.reader-card-promo__button .icon {
  position: relative;
  font-size: 10px;
  animation: readerPromoArrow 1.5s ease-in-out infinite;
}

/*
|--------------------------------------------------------------------------
| DARK THEME
|--------------------------------------------------------------------------
*/
body.dark .reader-card-promo {
  border-color: rgba(167, 76, 255, 0.27);
  background: radial-gradient(circle at 2% 0%, rgba(132, 39, 255, 0.18), transparent 34%), radial-gradient(circle at 100% 10%, rgba(215, 55, 255, 0.1), transparent 31%), linear-gradient(145deg, #211f26 0%, #1d1b22 52%, #19181e 100%);
  box-shadow: none;
}
body.dark .reader-card-promo::before {
  background: radial-gradient(circle, rgba(139, 44, 255, 0.19) 0%, rgba(186, 60, 255, 0.08) 40%, transparent 70%);
}
body.dark .reader-card-promo::after {
  background: radial-gradient(circle, rgba(221, 64, 255, 0.1) 0%, transparent 68%);
}
body.dark .reader-card-promo__header-icon {
  background: linear-gradient(135deg, rgba(139, 45, 255, 0.23), rgba(225, 61, 255, 0.1));
  color: #ae64ff;
}
body.dark .reader-card-promo__header-icon::after {
  border-color: rgba(184, 102, 255, 0.15);
}
body.dark .reader-card-promo__title {
  color: #f4f2f6;
}
body.dark .reader-card-promo__description {
  color: #aaa6b0;
}
body.dark .reader-card-promo__badge {
  border-color: rgba(224, 82, 255, 0.09);
  background: linear-gradient(135deg, rgba(224, 67, 255, 0.17), rgba(164, 68, 255, 0.16));
  color: #e866fb;
}
body.dark .reader-card-promo__poster {
  border-color: rgba(255, 255, 255, 0.09);
  background: #27252c;
}
body.dark .reader-card-promo__card:hover .reader-card-promo__poster,
body.dark .reader-card-promo__card:focus-visible .reader-card-promo__poster {
  border-color: rgba(179, 94, 255, 0.45);
}
body.dark .reader-card-promo__button {
  background: linear-gradient(100deg, #7023dc 0%, #8228ed 48%, #932bf2 100%);
  color: #fff;
}

/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 600px) {
  .reader-card-promo {
    width: calc(100% - 18px);
    margin: 20px auto;
    padding: 15px 11px 12px;
    border-radius: 17px;
  }
  /*
  |--------------------------------------------------------------------------
  | Header mobile
  |--------------------------------------------------------------------------
  */
  .reader-card-promo__header {
    align-items: flex-start;
    margin-bottom: 13px;
  }
  .reader-card-promo__header-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    margin-right: 8px;
    border-radius: 11px;
    font-size: 20px;
  }
  .reader-card-promo__header-icon::after {
    inset: 3px;
    border-radius: 8px;
  }
  .reader-card-promo__title {
    padding-top: 1px;
    font-size: 15px;
    line-height: 1.18;
  }
  .reader-card-promo__description {
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.28;
  }
  .reader-card-promo__badge {
    margin-left: 5px;
    padding: 6px 8px;
    font-size: 8px;
  }
  /*
  |--------------------------------------------------------------------------
  | Cards mobile
  |--------------------------------------------------------------------------
  */
  .reader-card-promo__cards {
    gap: 4px;
    margin-bottom: 11px;
  }
  .reader-card-promo__poster {
    width: 87%;
    border-radius: 11px;
  }
  /*
   * На мобильном движение заметнее.
   */
  .reader-card-promo__card:nth-child(1) {
    animation-name: readerPromoCardMobileOne;
  }
  .reader-card-promo__card:nth-child(2) {
    animation-name: readerPromoCardMobileTwo;
  }
  .reader-card-promo__card:nth-child(3) {
    animation-name: readerPromoCardMobileThree;
  }
  /*
  |--------------------------------------------------------------------------
  | Button mobile
  |--------------------------------------------------------------------------
  */
  .reader-card-promo__button {
    height: 39px;
    border-radius: 10px;
    font-size: 12px;
  }
  .reader-card-promo__button .icon {
    font-size: 9px;
  }
}
/*
|--------------------------------------------------------------------------
| ANIMATIONS
|--------------------------------------------------------------------------
*/
/*
 * Фоновое свечение
 */
@keyframes readerPromoGlow {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-18px, 12px, 0) scale(1.1);
  }
}
@keyframes readerPromoGlowSecond {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(20px, -12px, 0) scale(1.08);
  }
}
/*
 * Иконка
 */
@keyframes readerPromoIcon {
  0%, 100% {
    transform: translateY(0) rotate(0);
  }
  45% {
    transform: translateY(-3px) rotate(-4deg);
  }
  55% {
    transform: translateY(-3px) rotate(3deg);
  }
}
/*
 * НОВИНКА
 */
@keyframes readerPromoBadge {
  0%, 70%, 100% {
    transform: scale(1);
  }
  78% {
    transform: scale(1.1);
  }
  87% {
    transform: scale(0.98);
  }
  94% {
    transform: scale(1.04);
  }
}
/*
|--------------------------------------------------------------------------
| DESKTOP CARDS
|--------------------------------------------------------------------------
*/
@keyframes readerPromoCardOne {
  0%, 60%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  68% {
    transform: translateY(-7px) rotate(-1deg);
  }
  75% {
    transform: translateY(1px) rotate(0.5deg);
  }
  82% {
    transform: translateY(0) rotate(0deg);
  }
}
@keyframes readerPromoCardTwo {
  0%, 64%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  72% {
    transform: translateY(-7px) rotate(0.8deg);
  }
  79% {
    transform: translateY(1px) rotate(-0.4deg);
  }
  86% {
    transform: translateY(0) rotate(0deg);
  }
}
@keyframes readerPromoCardThree {
  0%, 68%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  76% {
    transform: translateY(-7px) rotate(1deg);
  }
  83% {
    transform: translateY(1px) rotate(-0.5deg);
  }
  90% {
    transform: translateY(0) rotate(0deg);
  }
}
/*
|--------------------------------------------------------------------------
| MOBILE CARDS
|--------------------------------------------------------------------------
|
| Специально заметнее, чем desktop.
|
*/
@keyframes readerPromoCardMobileOne {
  0%, 52%, 100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  60% {
    transform: translateY(-9px) scale(1.035) rotate(-1.5deg);
  }
  68% {
    transform: translateY(2px) scale(0.995) rotate(0.7deg);
  }
  75% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
}
@keyframes readerPromoCardMobileTwo {
  0%, 58%, 100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  66% {
    transform: translateY(-9px) scale(1.035) rotate(1.2deg);
  }
  74% {
    transform: translateY(2px) scale(0.995) rotate(-0.6deg);
  }
  81% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
}
@keyframes readerPromoCardMobileThree {
  0%, 64%, 100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  72% {
    transform: translateY(-9px) scale(1.035) rotate(-1.2deg);
  }
  80% {
    transform: translateY(2px) scale(0.995) rotate(0.6deg);
  }
  87% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
}
/*
|--------------------------------------------------------------------------
| SHINE THROUGH CARDS
|--------------------------------------------------------------------------
*/
@keyframes readerPromoCardShine {
  0%, 58% {
    left: -65%;
    opacity: 0;
  }
  62% {
    opacity: 1;
  }
  77% {
    left: 135%;
    opacity: 0.9;
  }
  78%, 100% {
    left: 135%;
    opacity: 0;
  }
}
/*
|--------------------------------------------------------------------------
| BUTTON SHINE
|--------------------------------------------------------------------------
*/
@keyframes readerPromoButtonShine {
  0%, 60% {
    left: -55%;
    opacity: 0;
  }
  64% {
    opacity: 1;
  }
  83% {
    left: 130%;
    opacity: 1;
  }
  84%, 100% {
    left: 130%;
    opacity: 0;
  }
}
/*
|--------------------------------------------------------------------------
| BUTTON ARROW
|--------------------------------------------------------------------------
*/
@keyframes readerPromoArrow {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(4px);
  }
}
/*
|--------------------------------------------------------------------------
| REDUCED MOTION
|--------------------------------------------------------------------------
*/
@media (prefers-reduced-motion: reduce) {
  .reader-card-promo::before,
  .reader-card-promo::after,
  .reader-card-promo__header-icon,
  .reader-card-promo__badge,
  .reader-card-promo__card,
  .reader-card-promo__poster::after,
  .reader-card-promo__button::before,
  .reader-card-promo__button .icon {
    animation: none !important;
  }
  .reader-card-promo__poster,
  .reader-card-promo__poster img,
  .reader-card-promo__button {
    transition: none !important;
  }
}
/* =========================================================
   RATING PAGE
   ========================================================= */
.rating-page {
  padding-top: 28px;
  padding-bottom: 70px;
}
.rating-page__inner {
  width: 100%;
  max-width: 1030px;
  margin-left: auto;
  margin-right: auto;
}
.rating-page__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 30px;
}
.rating-page__header-main {
  min-width: 0;
}
.rating-page__overline {
  margin-bottom: 7px;
  color: var(--main-purple-color);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.rating-page__title {
  margin: 0;
  color: var(--main-text-color);
  font-size: 38px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1.2px;
}
.rating-page__description {
  max-width: 600px;
  margin-top: 10px;
  color: var(--secondary-text-color);
  font-size: 14px;
  line-height: 1.55;
}
.rating-page__place {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-shrink: 0;
  padding-bottom: 4px;
}
.rating-page__place-caption, .rating-page__place-type {
  color: var(--secondary-text-color);
  font-size: 12px;
}
.rating-page__place-number {
  color: var(--main-purple-color);
  font-size: 24px;
  font-weight: 800;
}
.rating-page__promo {
  width: 100%;
  max-width: 1030px;
  margin: 55px auto;
  min-width: 0;
}
.rating-page__comments {
  margin-top: 50px;
}

/* =========================================================
   NAV
   ========================================================= */
.rating-nav {
  position: relative;
  width: 100%;
  margin-bottom: 42px;
  overflow: hidden;
  border-bottom: 1px solid var(--border-color);
}
.rating-nav__scroll {
  display: flex;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 7px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  /* Firefox — скрыт */
  scrollbar-width: none !important;
  /* Chromium / Safari */
  /* Firefox */
  /* Chrome / Safari / Яндекс */
}
.rating-nav__scroll::-webkit-scrollbar {
  display: block !important;
  height: 0 !important;
}
.rating-nav__scroll::-webkit-scrollbar-track {
  background: transparent !important;
}
.rating-nav__scroll::-webkit-scrollbar-thumb {
  background: var(--purple-btn-bg) !important;
  border-radius: 100px;
}
.rating-nav__scroll:hover {
  scrollbar-width: thin !important;
  scrollbar-color: var(--main-purple-color) transparent !important;
}
.rating-nav__scroll:hover::-webkit-scrollbar {
  display: block !important;
  height: 5px !important;
}
.rating-nav__item {
  position: relative;
  flex: 0 0 auto;
  margin-right: 27px;
  padding: 0 0 10px;
  color: var(--secondary-text-color);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s ease;
}
.rating-nav__item:hover {
  color: var(--main-purple-color);
}
.rating-nav__item::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: var(--purple-btn-bg);
  border-radius: 3px 3px 0 0;
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.rating-nav__item--active {
  color: var(--main-text-color);
  font-weight: 700;
}
.rating-nav__item--active::after {
  transform: scaleX(1);
}
.rating-nav__item:last-child {
  margin-right: 0;
}

/* =========================================================
   SECTION HEADER
   ========================================================= */
.rating-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 25px;
}
.rating-section-head__small {
  margin-bottom: 3px;
  color: var(--main-purple-color);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.rating-section-head__title {
  margin: 0;
  color: var(--main-text-color);
  font-size: 24px;
  font-weight: 800;
}
.rating-section-head__type {
  padding-bottom: 3px;
  color: var(--secondary-text-color);
  font-size: 12px;
}

/* =========================================================
   TOP 3
   ========================================================= */
.rating-podium {
  margin-bottom: 52px;
}
.rating-podium__users {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 255px;
  padding: 35px 35px 26px;
  background: radial-gradient(circle at 50% 0, rgba(119, 44, 232, 0.12), transparent 52%), var(--medium-bg);
  border-radius: 22px;
}

.rating-leader {
  position: relative;
  display: flex;
  flex: 0 1 220px;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 18px 18px 15px;
  text-align: center;
}
.rating-leader--1 {
  order: 2;
  transform: translateY(-21px);
}
.rating-leader--1 .rating-leader__avatar {
  width: 104px;
  height: 104px;
}
.rating-leader--1 .rating-leader__place {
  color: #e4aa28;
  font-size: 26px;
}
.rating-leader--1 .rating-leader__value {
  font-size: 23px;
}
.rating-leader--2 {
  order: 1;
}
.rating-leader--2 .rating-leader__place {
  color: #8e96a8;
}
.rating-leader--3 {
  order: 3;
}
.rating-leader--3 .rating-leader__place {
  color: #b46d43;
}
.rating-leader__place {
  margin-bottom: 11px;
  color: var(--secondary-text-color);
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
}
.rating-leader__place span {
  margin-right: 1px;
  font-size: 0.62em;
  opacity: 0.7;
}
.rating-leader__avatar {
  position: relative;
  display: block;
  width: 82px;
  height: 82px;
  margin-bottom: 16px;
}
.rating-leader__avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
}
.rating-leader__frame {
  position: absolute;
  z-index: 2;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  max-width: none;
  -o-object-fit: contain;
     object-fit: contain;
  pointer-events: none;
}
.rating-leader__user {
  min-width: 0;
  width: 100%;
}
.rating-leader__name-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.rating-leader__name {
  overflow: hidden;
  color: var(--main-text-color);
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rating-leader__name:hover {
  color: var(--main-purple-color);
}
.rating-leader__status {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 5px;
  flex-shrink: 0;
}
.rating-leader__status img {
  max-width: 18px;
  max-height: 18px;
  -o-object-fit: contain;
     object-fit: contain;
}
.rating-leader__movement {
  margin-top: 5px;
  font-size: 10px;
  font-weight: 700;
}
.rating-leader__movement--up {
  color: var(--green-color);
}
.rating-leader__movement--down {
  color: var(--red-color);
}
.rating-leader__value {
  margin-top: 12px;
  color: var(--main-text-color);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}
.rating-leader__value-name {
  overflow: hidden;
  max-width: 100%;
  margin-top: 5px;
  color: var(--secondary-text-color);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rating-leader__bar {
  overflow: hidden;
  width: 100%;
  height: 3px;
  margin-top: 13px;
  background: var(--border-color);
  border-radius: 10px;
}
.rating-leader__bar-fill {
  height: 100%;
  background: var(--purple-btn-bg);
  border-radius: inherit;
}

/* =========================================================
   RANKING LIST
   ========================================================= */
.rating-ranking {
  margin-bottom: 50px;
}
.rating-ranking__header {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 190px;
  gap: 15px;
  padding: 0 12px 10px;
  color: var(--secondary-text-color);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}
.rating-ranking__header span:last-child {
  text-align: right;
}
.rating-ranking__list {
  border-top: 1px solid var(--border-color);
}
.rating-ranking__me-divider {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 28px 0 15px;
  color: var(--secondary-text-color);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
.rating-ranking__me-divider span {
  position: relative;
  z-index: 1;
  padding: 0 14px;
  background: var(--light-bg);
}
.rating-ranking__me-divider::before {
  content: "";
  position: absolute;
  top: 34px;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--border-color);
}

.rating-row {
  position: relative;
  display: grid;
  grid-template-columns: 58px 52px minmax(0, 1fr) 190px;
  align-items: center;
  gap: 15px;
  min-height: 78px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.18s ease, padding 0.18s ease;
}
.rating-row:hover {
  background: var(--medium-bg);
}
.rating-row--current {
  background: rgba(119, 44, 232, 0.07);
}
.rating-row--current::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 3px;
  background: var(--purple-btn-bg);
  border-radius: 3px;
}
.rating-row__place {
  display: flex;
  align-items: center;
  color: var(--secondary-text-color);
}
.rating-row__number {
  min-width: 25px;
  color: var(--main-text-color);
  font-size: 14px;
  font-weight: 700;
}
.rating-row__movement {
  margin-left: 3px;
  font-size: 11px;
  font-weight: 800;
}
.rating-row__movement--up {
  color: var(--green-color);
}
.rating-row__movement--down {
  color: var(--red-color);
}
.rating-row__avatar {
  position: relative;
  display: block;
  width: 48px;
  height: 48px;
}
.rating-row__avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 14px;
}
.rating-row__frame {
  position: absolute;
  z-index: 2;
  top: -7px;
  right: -7px;
  bottom: -7px;
  left: -7px;
  width: calc(100% + 14px);
  height: calc(100% + 14px);
  max-width: none;
  -o-object-fit: contain;
     object-fit: contain;
  pointer-events: none;
}
.rating-row__user {
  min-width: 0;
}
.rating-row__user-line {
  display: flex;
  align-items: center;
  min-width: 0;
}
.rating-row__name {
  overflow: hidden;
  color: var(--main-text-color);
  font-size: 14px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rating-row__name:hover {
  color: var(--main-purple-color);
}
.rating-row__status {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  flex-shrink: 0;
}
.rating-row__status img {
  max-width: 18px;
  max-height: 18px;
  -o-object-fit: contain;
     object-fit: contain;
}
.rating-row__you {
  margin-left: 7px;
  padding: 2px 6px;
  color: var(--main-purple-color);
  background: rgba(119, 44, 232, 0.08);
  border-radius: 6px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}
.rating-row__progress {
  overflow: hidden;
  width: 100%;
  max-width: 300px;
  height: 3px;
  margin-top: 8px;
  background: var(--border-color);
  border-radius: 20px;
}
.rating-row__progress-fill {
  height: 100%;
  background: var(--purple-btn-bg);
  border-radius: inherit;
}
.rating-row__value {
  min-width: 0;
  text-align: right;
}
.rating-row__value strong {
  display: block;
  overflow: hidden;
  color: var(--main-text-color);
  font-size: 14px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rating-row__value span {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--secondary-text-color);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   BEST COMMENT
   ========================================================= */
.rating-comment {
  position: relative;
  margin: 15px 0 50px;
  padding: 0 0 0 22px;
  border-left: 3px solid var(--purple-btn-bg);
}
.rating-comment__label {
  margin-bottom: 15px;
  color: var(--main-purple-color);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.rating-comment__body {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.rating-comment__avatar {
  display: block;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
}
.rating-comment__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 13px;
}
.rating-comment__content {
  min-width: 0;
  flex: 1;
}
.rating-comment__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.rating-comment__author {
  overflow: hidden;
  color: var(--main-text-color);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rating-comment__tips {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  color: var(--secondary-text-color);
  font-size: 11px;
  font-weight: 600;
}
.rating-comment__diamond {
  display: block;
  width: 8px;
  height: 8px;
  background: var(--purple-btn-bg);
  border-radius: 2px;
  transform: rotate(45deg);
}
.rating-comment__text {
  color: var(--secondary-text-color);
  font-size: 14px;
  line-height: 1.6;
}

/* =========================================================
   VOTE
   ========================================================= */
.rating-vote {
  margin: 55px 0;
  padding-top: 34px;
  border-top: 1px solid var(--border-color);
}
.rating-vote__header {
  margin-bottom: 25px;
}
.rating-vote__overline {
  margin-bottom: 5px;
  color: var(--main-purple-color);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.rating-vote__title-line {
  display: flex;
  align-items: center;
  gap: 9px;
}
.rating-vote__title {
  margin: 0;
  color: var(--main-text-color);
  font-size: 25px;
  font-weight: 800;
}
.rating-vote__help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--secondary-text-color);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  cursor: help;
}
.rating-vote__description {
  margin-top: 7px;
  color: var(--secondary-text-color);
  font-size: 13px;
}
.rating-vote__already {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--green-color);
  font-size: 12px;
  font-weight: 600;
}
.rating-vote__already-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #fff;
  background: var(--green-color);
  border-radius: 50%;
  font-size: 10px;
}
.rating-vote__form {
  width: 100%;
}
.rating-vote__users {
  border-top: 1px solid var(--border-color);
}
.rating-vote__option {
  display: block;
  margin: 0;
  cursor: pointer;
}
.rating-vote__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.rating-vote__option-content {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 22px;
  align-items: center;
  min-height: 57px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.18s ease, color 0.18s ease;
}
.rating-vote__option:hover .rating-vote__option-content {
  background: var(--medium-bg);
}
.rating-vote__index {
  color: var(--secondary-text-color);
  font-size: 11px;
  font-weight: 600;
}
.rating-vote__name {
  overflow: hidden;
  color: var(--main-text-color);
  font-size: 14px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rating-vote__check {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-color);
  border-radius: 50%;
}
.rating-vote__radio:checked + .rating-vote__option-content {
  background: rgba(119, 44, 232, 0.055);
}
.rating-vote__radio:checked + .rating-vote__option-content .rating-vote__check {
  border-color: var(--purple-btn-bg);
}
.rating-vote__radio:checked + .rating-vote__option-content .rating-vote__check::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  bottom: 3px;
  left: 3px;
  background: var(--purple-btn-bg);
  border-radius: 50%;
}
.rating-vote__radio:disabled + .rating-vote__option-content {
  cursor: default;
  opacity: 0.65;
}
.rating-vote__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 190px;
  min-height: 44px;
  margin: 22px 0 0 auto;
  padding: 0 25px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
}
.rating-vote__submit:disabled {
  cursor: default;
  opacity: 0.6;
}

/* =========================================================
   DARK
   ========================================================= */
body.dark .rating-podium__users {
  background: radial-gradient(circle at 50% 0, rgba(139, 0, 255, 0.16), transparent 55%), var(--medium-bg);
}
body.dark .rating-row--current {
  background: rgba(119, 44, 232, 0.11);
}
body.dark .rating-row__you {
  background: rgba(119, 44, 232, 0.14);
}
body.dark .rating-vote__radio:checked + .rating-vote__option-content {
  background: rgba(119, 44, 232, 0.1);
}

/* =========================================================
   TABLET
   ========================================================= */
@media only screen and (max-width: 768px) {
  .rating-page {
    padding-top: 18px;
  }
  .rating-page__header {
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 22px;
  }
  .rating-page__title {
    font-size: 31px;
  }
  .rating-page__description {
    font-size: 13px;
  }
  .rating-page__place {
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
  }
  .rating-page__place-caption {
    display: none;
  }
  .rating-page__place-number {
    font-size: 21px;
  }
  .rating-page__promo {
    margin: 40px 0;
  }
  .rating-nav {
    margin-right: -15px;
    margin-bottom: 35px;
    margin-left: -15px;
  }
  .rating-nav__scroll {
    padding: 0 15px;
  }
  .rating-nav__item {
    margin-right: 22px;
  }
  .rating-podium {
    margin-bottom: 38px;
  }
  .rating-podium__users {
    min-height: 220px;
    padding: 25px 10px 20px;
  }
  .rating-leader {
    flex-basis: 33.333%;
    padding-right: 7px;
    padding-left: 7px;
  }
  .rating-leader--1 {
    transform: translateY(-15px);
  }
  .rating-leader--1 .rating-leader__avatar {
    width: 86px;
    height: 86px;
  }
  .rating-leader__avatar {
    width: 68px;
    height: 68px;
  }
  .rating-leader__name {
    font-size: 12px;
  }
  .rating-leader__value {
    font-size: 17px;
  }
  .rating-leader__value-name {
    max-width: 120px;
  }
  .rating-ranking__header {
    grid-template-columns: 42px minmax(0, 1fr) 130px;
  }
  .rating-row {
    grid-template-columns: 42px 46px minmax(0, 1fr) 130px;
    gap: 10px;
    min-height: 70px;
  }
  .rating-row__avatar {
    width: 43px;
    height: 43px;
  }
}
/* =========================================================
   MOBILE
   ========================================================= */
@media only screen and (max-width: 520px) {
  .rating-page {
    padding-top: 12px;
    padding-bottom: 45px;
  }
  .rating-page__header {
    display: block;
    margin-bottom: 20px;
  }
  .rating-page__overline {
    font-size: 10px;
  }
  .rating-page__title {
    font-size: 28px;
    letter-spacing: -0.7px;
  }
  .rating-page__description {
    margin-top: 8px;
    font-size: 12px;
  }
  .rating-page__place {
    flex-direction: row;
    align-items: baseline;
    gap: 7px;
    margin-top: 14px;
  }
  .rating-page__place-caption {
    display: inline;
  }
  .rating-page__place-number {
    font-size: 17px;
  }
  .rating-page__place-type {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rating-page__promo {
    margin: 34px 0;
  }
  .rating-page__comments {
    margin-top: 35px;
  }
  .rating-nav {
    margin-bottom: 30px;
  }
  .rating-nav__item {
    margin-right: 20px;
    padding-bottom: 11px;
    font-size: 12px;
  }
  .rating-section-head {
    margin-bottom: 18px;
  }
  .rating-section-head__title {
    font-size: 20px;
  }
  .rating-section-head__type {
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rating-podium {
    margin-bottom: 32px;
  }
  .rating-podium__users {
    min-height: 185px;
    padding: 22px 2px 14px;
    border-radius: 17px;
  }
  .rating-leader {
    padding: 9px 3px;
  }
  .rating-leader--1 {
    transform: translateY(-10px);
  }
  .rating-leader--1 .rating-leader__avatar {
    width: 70px;
    height: 70px;
  }
  .rating-leader--1 .rating-leader__place {
    font-size: 21px;
  }
  .rating-leader__place {
    margin-bottom: 8px;
    font-size: 16px;
  }
  .rating-leader__avatar {
    width: 57px;
    height: 57px;
    margin-bottom: 11px;
  }
  .rating-leader__frame {
    top: -7px;
    right: -7px;
    bottom: -7px;
    left: -7px;
    width: calc(100% + 14px);
    height: calc(100% + 14px);
  }
  .rating-leader__name {
    max-width: 92px;
    /*font-size: 11px;*/
  }
  .rating-leader__status {
    width: 15px;
    height: 15px;
  }
  .rating-leader__status img {
    max-width: 15px;
    max-height: 15px;
  }
  .rating-leader__movement {
    font-size: 9px;
  }
  .rating-leader__value {
    margin-top: 9px;
    font-size: 15px;
  }
  .rating-leader__value-name {
    display: none;
  }
  .rating-leader__bar {
    width: 76%;
    margin-top: 9px;
  }
  .rating-ranking {
    margin-bottom: 38px;
  }
  .rating-ranking__header {
    display: none;
  }
  .rating-ranking__list {
    border-top: 1px solid var(--border-color);
  }
  .rating-row__place {
    gap: 2px;
  }
  .rating-row {
    grid-template-columns: 38px 42px minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 64px;
    padding: 8px 4px;
  }
  .rating-row__number {
    min-width: 0;
    font-size: 12px;
  }
  .rating-row__movement {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
  }
  .rating-row__movement--up {
    color: var(--green-color);
  }
  .rating-row__movement--down {
    color: var(--red-color);
  }
  .rating-row__avatar {
    width: 39px;
    height: 39px;
  }
  .rating-row__avatar-img {
    border-radius: 11px;
  }
  .rating-row__frame {
    top: -6px;
    right: -6px;
    bottom: -6px;
    left: -6px;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
  }
  .rating-row__name {
    /*font-size: 12px;*/
  }
  .rating-row__status {
    width: 16px;
    height: 16px;
    margin-left: 4px;
  }
  .rating-row__status img {
    max-width: 16px;
    max-height: 16px;
  }
  .rating-row__you {
    display: none;
  }
  .rating-row__progress {
    max-width: 170px;
    margin-top: 6px;
  }
  .rating-row__value {
    max-width: 74px;
  }
  .rating-row__value strong {
    font-size: 11px;
  }
  .rating-row__value span {
    display: none;
  }
  .rating-comment {
    margin-bottom: 35px;
    padding-left: 15px;
  }
  .rating-comment__body {
    gap: 10px;
  }
  .rating-comment__avatar {
    width: 39px;
    height: 39px;
  }
  .rating-comment__avatar img {
    border-radius: 10px;
  }
  .rating-comment__text {
    font-size: 12px;
    line-height: 1.55;
  }
  .rating-vote {
    margin: 38px 0;
    padding-top: 27px;
  }
  .rating-vote__title {
    font-size: 20px;
  }
  .rating-vote__description {
    font-size: 12px;
    line-height: 1.45;
  }
  .rating-vote__option-content {
    grid-template-columns: 35px minmax(0, 1fr) 20px;
    min-height: 52px;
    padding-right: 5px;
    padding-left: 5px;
  }
  .rating-vote__name {
    /*font-size: 12px;*/
  }
  .rating-vote__submit {
    width: 100%;
    min-width: 0;
    margin-top: 17px;
  }
}
/* =========================================================
   OLD RATING DIAMOND ANIMATION
   ОСТАВЛЯЕМ, ЧТОБЫ НИЧЕГО НЕ СЛОМАТЬ
   ========================================================= */
.diamond-rating {
  position: fixed;
  width: 30px;
  height: 30px;
  top: 0;
  z-index: 99;
  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;
}

@keyframes fall-rating {
  from {
    transform: translateY(-100px) rotate(0deg);
  }
  to {
    transform: translateY(100vh) rotate(360deg);
  }
}
@keyframes fadeOut-rating {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/* =========================================================
   PROMO INSIDE RATING
   ========================================================= */
.rating-page__promo .home-promo {
  width: 100%;
  min-width: 0;
}
.rating-page__promo .home-promo__grid {
  width: 100%;
  min-width: 0;
  /*
   * При ширине 1030 здесь уже хорошо
   * помещаются 3 крупных карточки.
   */
  grid-auto-columns: calc((100% - 28px) / 3);
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding-bottom: 8px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* По умолчанию scrollbar скрыт */
  scrollbar-width: none !important;
  /*
   * Появляется только когда мышь
   * находится непосредственно над витриной.
   */
}
.rating-page__promo .home-promo__grid::-webkit-scrollbar {
  display: block !important;
  height: 0 !important;
}
.rating-page__promo .home-promo__grid::-webkit-scrollbar-track {
  background: transparent !important;
}
.rating-page__promo .home-promo__grid::-webkit-scrollbar-thumb {
  background: var(--purple-btn-bg) !important;
  border-radius: 999px;
}
.rating-page__promo .home-promo__grid:hover {
  scrollbar-width: thin !important;
  scrollbar-color: var(--main-purple-color) transparent !important;
}
.rating-page__promo .home-promo__grid:hover::-webkit-scrollbar {
  display: block !important;
  height: 5px !important;
}
.rating-page__promo .home-promo-card {
  min-width: 0;
}

@media only screen and (max-width: 900px) {
  .rating-page__promo .home-promo__grid {
    grid-auto-columns: calc((100% - 12px) / 2);
  }
}
@media only screen and (max-width: 600px) {
  .rating-page__promo {
    max-width: none;
    margin-top: 34px;
    margin-bottom: 34px;
  }
  .rating-page__promo .home-promo__grid {
    /*
     * Специально не 100%.
     * Кусочек следующей карточки показывает,
     * что блок можно свайпать.
     */
    grid-auto-columns: 87%;
  }
  .rating-nav__scroll {
    /*
     * На телефоне scrollbar можно спрятать:
     * там естественный свайп и видна следующая вкладка.
     */
    padding-bottom: 0;
    scrollbar-width: none !important;
  }
  .rating-nav__scroll::-webkit-scrollbar {
    display: none !important;
  }
}
@media only screen and (max-width: 600px) {
  .rating-page__promo {
    max-width: none;
    margin-top: 34px;
    margin-bottom: 34px;
  }
  .rating-page__promo .home-promo__grid {
    grid-auto-columns: 87%;
    padding-bottom: 0;
    scrollbar-width: none !important;
  }
  .rating-page__promo .home-promo__grid::-webkit-scrollbar, .rating-page__promo .home-promo__grid:hover::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
  }
  .rating-nav__scroll {
    padding-bottom: 0;
    scrollbar-width: none !important;
  }
  .rating-nav__scroll::-webkit-scrollbar, .rating-nav__scroll:hover::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
  }
}
.card-create.cards-create--v2 {
  --card-create-accent: var(--secondary-purple-color);
  display: block;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto 36px;
}
.card-create.cards-create--v2 [hidden] {
  display: none !important;
}
.card-create.cards-create--v2 .card-create__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}
.card-create.cards-create--v2 .card-create__header .main-title {
  margin: 0 0 8px;
  font-size: 32px;
  line-height: 1.2;
  text-align: left;
}
.card-create.cards-create--v2 .card-create__header > .button {
  flex-shrink: 0;
}
.card-create.cards-create--v2 .card-create__subtitle {
  max-width: 650px;
  margin: 0;
  color: var(--secondary-text-color);
  font-size: 15px;
  line-height: 1.6;
}
.card-create.cards-create--v2 .card-create__workspace {
  display: grid;
  grid-template-columns: 356px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
}
.card-create.cards-create--v2 .card-create__preview, .card-create.cards-create--v2 .card-create__details, .card-create.cards-create--v2 .card-create__frames, .card-create.cards-create--v2 .card-create__submission, .card-create.cards-create--v2 .card-create__replace {
  min-width: 0;
  padding: 22px;
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  border-radius: 18px;
}
.card-create.cards-create--v2 .card-create__preview {
  position: sticky;
  top: 90px;
}
.card-create.cards-create--v2 .card-create__panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.card-create.cards-create--v2 .card-create__panel-heading .card-create__hint {
  margin: 0;
}
.card-create.cards-create--v2 .card-create__section-title {
  margin: 0;
  color: var(--title-color);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}
.card-create.cards-create--v2 .card-create__eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--card-create-accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.card-create.cards-create--v2 .card-create__hint {
  margin: 8px 0 0;
  color: var(--secondary-text-color);
  font-size: 13px;
  line-height: 1.5;
}
.card-create.cards-create--v2 .card-create__preview-stage {
  display: flex;
  justify-content: center;
  min-width: 0;
  padding: 10px;
  background: var(--medium-bg);
  background-image: radial-gradient(var(--border-color) 1px, transparent 1px);
  background-size: 12px 12px;
  border-radius: 14px;
}
.card-create.cards-create--v2 .card-create__wrapper {
  width: 288px;
  max-width: 100%;
  margin: 0;
  line-height: 0;
}
.card-create.cards-create--v2 .card-create__wrapper canvas {
  display: block;
  width: 288px;
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  touch-action: none;
}
.card-create.cards-create--v2 .card-create__zoom {
  margin-top: 20px;
}
.card-create.cards-create--v2 .card-create__zoom input[type=range] {
  display: block;
  width: 100%;
  height: 24px;
  margin: 6px 0 0;
  accent-color: var(--purple-btn-bg);
  cursor: pointer;
}
.card-create.cards-create--v2 .card-create__zoom-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--main-text-color);
  font-size: 13px;
  font-weight: 500;
}
.card-create.cards-create--v2 .card-create__zoom-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.card-create.cards-create--v2 .card-create__zoom-input {
  box-sizing: border-box;
  width: 64px;
  padding: 6px 8px;
  color: var(--main-text-color);
  background: var(--medium-bg);
  border: 1px solid var(--border-color);
  border-radius: 7px;
  font: inherit;
  text-align: right;
}
.card-create.cards-create--v2 .card-create__zoom-input:focus {
  border-color: var(--card-create-accent);
}
.card-create.cards-create--v2 .card-create__source {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border-color);
}
.card-create.cards-create--v2 .card-create__pages {
  gap: 8px;
  padding: 8px;
  border-radius: 12px;
}
.card-create.cards-create--v2 .card-create__pages-title {
  min-width: 0;
  font-size: 13px;
  text-align: center;
}
.card-create.cards-create--v2 .card-create__button {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  color: var(--main-text-color);
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  border-radius: 9px;
}
.card-create.cards-create--v2 .card-create__button--load-file {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 12px;
  font-size: 13px;
  font-weight: 500;
}
.card-create.cards-create--v2 .card-create__settings {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: auto;
  min-width: 0;
}
.card-create.cards-create--v2 .card-create__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
}
.card-create.cards-create--v2 .card-create__field {
  min-width: 0;
  margin: 0;
}
.card-create.cards-create--v2 .card-create__field form {
  margin: 0;
}
.card-create.cards-create--v2 .card-create__field--wide {
  grid-column: 1/-1;
}
.card-create.cards-create--v2 .card-create__label {
  display: block;
  margin-bottom: 8px;
  color: var(--main-text-color);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}
.card-create.cards-create--v2 .card-create__input-name, .card-create.cards-create--v2 .card-create__input-title, .card-create.cards-create--v2 .card-create__fzq, .card-create.cards-create--v2 .card-create__static-id-input, .card-create.cards-create--v2 .card-create__text {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 13px 14px;
  background: var(--medium-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.4;
  transition: border-color 0.15s ease;
}
.card-create.cards-create--v2 .card-create__input-name:focus, .card-create.cards-create--v2 .card-create__input-title:focus, .card-create.cards-create--v2 .card-create__fzq:focus, .card-create.cards-create--v2 .card-create__static-id-input:focus, .card-create.cards-create--v2 .card-create__text:focus {
  border-color: var(--card-create-accent);
}
.card-create.cards-create--v2 .card-create__input-title[readonly] {
  color: var(--secondary-text-color);
}
.card-create.cards-create--v2 .card-create__text {
  height: 88px;
  min-height: 88px;
  resize: vertical;
}
.card-create.cards-create--v2 .card-create__frames-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.card-create.cards-create--v2 .card-create__selection {
  max-width: 48%;
  padding: 6px 10px;
  color: var(--card-create-accent);
  background: var(--medium-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.card-create.cards-create--v2 .card-create__frame-tools {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  margin-bottom: 16px;
}
.card-create.cards-create--v2 .card-create__frame-search-form {
  min-width: 0;
  margin: 0;
}
.card-create.cards-create--v2 .card-create__frame-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  color: var(--icons-color);
}
.card-create.cards-create--v2 .card-create__frame-search-wrap > i {
  position: absolute;
  left: 14px;
  font-size: 19px;
  pointer-events: none;
}
.card-create.cards-create--v2 .card-create__frame-search-wrap input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 12px 14px 12px 42px;
  color: var(--main-text-color);
  background: var(--medium-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  outline: none;
  font-size: 14px;
}
.card-create.cards-create--v2 .card-create__frame-search-wrap input:focus {
  border-color: var(--card-create-accent);
}
.card-create.cards-create--v2 .card-create__frame-search-wrap input:-webkit-autofill {
  animation: card-create-frame-autofill 0.01s;
}
.card-create.cards-create--v2 .card-create__frame-search-wrap input:autofill {
  animation: card-create-frame-autofill 0.01s;
}
.card-create.cards-create--v2 .card-create__frame-filters {
  display: flex;
  gap: 6px;
  min-width: 0;
  padding: 3px 0 7px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.card-create.cards-create--v2 .card-create__frame-filter {
  flex-shrink: 0;
  min-width: 35px;
  padding: 8px 11px;
  color: var(--secondary-text-color);
  background: var(--medium-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.card-create.cards-create--v2 .card-create__frame-filter--active {
  color: #fff;
  background: var(--purple-btn-bg);
  border-color: var(--purple-btn-bg);
}
.card-create.cards-create--v2 .card-create__frames-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-height: 390px;
  padding: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--seconday-bg-color) transparent;
}
.card-create.cards-create--v2 .card-create__frames-grid::-webkit-scrollbar {
  width: 5px;
}
.card-create.cards-create--v2 .card-create__frames-grid::-webkit-scrollbar-thumb {
  background: var(--seconday-bg-color);
  border-radius: 5px;
}
.card-create.cards-create--v2 .card-create__rang-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 10px 8px;
  color: var(--main-text-color);
  background: var(--medium-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.card-create.cards-create--v2 .card-create__rang-item--active {
  color: var(--main-text-color);
  border-color: var(--card-create-accent);
  box-shadow: 0 0 0 1px var(--card-create-accent);
}
.card-create.cards-create--v2 .card-create__rang-item--active::after {
  content: "✓";
  position: absolute;
  top: 7px;
  right: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #fff;
  background: var(--purple-btn-bg);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
}
.card-create.cards-create--v2 .card-create__frame-thumbnail {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 110px;
}
.card-create.cards-create--v2 .card-create__frame-thumbnail--unavailable::before {
  content: "Рамка";
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 72px;
  height: 100%;
  color: var(--secondary-text-color);
  background: var(--light-bg);
  border: 1px dashed var(--border-color);
  border-radius: 5px;
  font-size: 11px;
}
.card-create.cards-create--v2 .card-create__frame-thumbnail img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  aspect-ratio: 2/3;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 5px;
}
.card-create.cards-create--v2 .card-create__rang-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  margin: 0;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  font-size: 11px;
  line-height: 1;
}
.card-create.cards-create--v2 .card-create__rang-item[data-rank=X] .card-create__rang-icon, .card-create.cards-create--v2 .card-create__rang-item[data-rank=K] .card-create__rang-icon, .card-create.cards-create--v2 .card-create__rang-item[data-rank=H] .card-create__rang-icon, .card-create.cards-create--v2 .card-create__rang-item[data-rank=N] .card-create__rang-icon, .card-create.cards-create--v2 .card-create__rang-item[data-rank=V] .card-create__rang-icon, .card-create.cards-create--v2 .card-create__rang-item[data-rank=L] .card-create__rang-icon, .card-create.cards-create--v2 .card-create__rang-item[data-rank=Q] .card-create__rang-icon, .card-create.cards-create--v2 .card-create__rang-item[data-rank=W] .card-create__rang-icon {
  background: var(--purple-btn-bg);
}
.card-create.cards-create--v2 .card-create__rang-text {
  display: block;
  min-height: 32px;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.card-create.cards-create--v2 .card-create__frames-empty {
  margin: 0;
  padding: 28px 16px;
  color: var(--secondary-text-color);
  background: var(--medium-bg);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}
.card-create.cards-create--v2 .card-create__frames-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
  color: var(--secondary-text-color);
  font-size: 12px;
  line-height: 1.5;
}
.card-create.cards-create--v2 .card-create__frames-footer .card-create__hint {
  margin: 0;
  font-size: 12px;
  text-align: right;
}
.card-create.cards-create--v2 .card-create__frames-footer [data-frame-count] {
  flex-shrink: 0;
}
.card-create.cards-create--v2 .card-create__finish {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.card-create.cards-create--v2 .card-create__finish .button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 10px;
  text-align: center;
}
.card-create.cards-create--v2 .card-create__finish .button--primary {
  flex: 1;
}
.card-create.cards-create--v2 .card-create__submission-note {
  margin: 0 0 14px;
  color: var(--secondary-text-color);
  font-size: 12px;
  line-height: 1.5;
}
.card-create.cards-create--v2 .card-create__replace {
  gap: 12px;
  margin-bottom: 24px;
}
.card-create.cards-create--v2 .card-create__replace-image {
  width: 120px;
  max-width: 100%;
  margin-top: 0;
}
.card-create.cards-create--v2 .card-create__replace .text {
  margin: 0;
  line-height: 1.5;
}
.card-create.cards-create--v2 button:focus-visible,
.card-create.cards-create--v2 a:focus-visible,
.card-create.cards-create--v2 input:focus-visible,
.card-create.cards-create--v2 textarea:focus-visible {
  outline: 2px solid var(--card-create-accent);
  outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .card-create.cards-create--v2 .card-create__rang-item:hover,
  .card-create.cards-create--v2 .card-create__frame-filter:hover,
  .card-create.cards-create--v2 .card-create__button:hover {
    border-color: var(--card-create-accent);
  }
}
@media screen and (max-width: 980px) {
  .card-create.cards-create--v2 .card-create__workspace {
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 20px;
  }
  .card-create.cards-create--v2 .card-create__preview {
    padding: 18px;
  }
  .card-create.cards-create--v2 .card-create__frames-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .card-create.cards-create--v2 .card-create__fields {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media screen and (max-width: 760px) {
  .card-create.cards-create--v2 {
    margin-bottom: 24px;
  }
  .card-create.cards-create--v2 .card-create__header {
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 20px;
  }
  .card-create.cards-create--v2 .card-create__header .main-title {
    font-size: 27px;
  }
  .card-create.cards-create--v2 .card-create__subtitle {
    font-size: 14px;
  }
  .card-create.cards-create--v2 .card-create__workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .card-create.cards-create--v2 .card-create__preview {
    position: static;
  }
  .card-create.cards-create--v2 .card-create__preview-stage {
    padding: 12px;
  }
  .card-create.cards-create--v2 .card-create__details,
  .card-create.cards-create--v2 .card-create__frames,
  .card-create.cards-create--v2 .card-create__submission,
  .card-create.cards-create--v2 .card-create__replace {
    padding: 18px;
  }
  .card-create.cards-create--v2 .card-create__settings {
    gap: 18px;
  }
  .card-create.cards-create--v2 .card-create__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .card-create.cards-create--v2 .card-create__frames-heading {
    gap: 10px;
  }
  .card-create.cards-create--v2 .card-create__section-title {
    font-size: 18px;
  }
  .card-create.cards-create--v2 .card-create__frames-grid {
    gap: 8px;
    max-height: 360px;
  }
  .card-create.cards-create--v2 .card-create__frame-thumbnail {
    height: 95px;
  }
  .card-create.cards-create--v2 .card-create__rang-item {
    padding: 9px 6px;
  }
}
@media screen and (max-width: 480px) {
  .card-create.cards-create--v2 .card-create__fields {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .card-create.cards-create--v2 .card-create__frames-footer {
    flex-direction: column;
    gap: 5px;
  }
  .card-create.cards-create--v2 .card-create__frames-footer .card-create__hint {
    text-align: left;
  }
  .card-create.cards-create--v2 .card-create__finish {
    flex-wrap: wrap;
  }
  .card-create.cards-create--v2 .card-create__finish .button--primary {
    flex-basis: 100%;
    order: -1;
  }
  .card-create.cards-create--v2 .card-create__finish > .button {
    width: 100%;
  }
}
@media screen and (max-width: 360px) {
  .card-create.cards-create--v2 .card-create__preview,
  .card-create.cards-create--v2 .card-create__details,
  .card-create.cards-create--v2 .card-create__frames,
  .card-create.cards-create--v2 .card-create__submission,
  .card-create.cards-create--v2 .card-create__replace {
    padding: 14px;
  }
  .card-create.cards-create--v2 .card-create__preview-stage {
    padding: 8px;
  }
  .card-create.cards-create--v2 .card-create__frames-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (prefers-reduced-motion: reduce) {
  .card-create.cards-create--v2 .card-create__rang-item,
  .card-create.cards-create--v2 .card-create__frame-filter,
  .card-create.cards-create--v2 .card-create__input-name,
  .card-create.cards-create--v2 .card-create__input-title,
  .card-create.cards-create--v2 .card-create__fzq,
  .card-create.cards-create--v2 .card-create__static-id-input,
  .card-create.cards-create--v2 .card-create__text {
    transition: none;
  }
}

@keyframes card-create-frame-autofill {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}
#toast-container > div.card-action-hint {
  width: 380px;
  max-width: calc(100vw - 24px);
  margin-bottom: max(12px, env(safe-area-inset-bottom));
  padding: 18px;
  border: 1px solid rgba(181, 158, 255, 0.3);
  border-radius: 20px;
  background: radial-gradient(ellipse at 0 0, #383052 0, transparent 65%), #1d1d2b !important;
  color: #f6f3ff;
  box-shadow: 0 12px 40px rgba(16, 12, 32, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  cursor: default;
}
#toast-container > div.card-action-hint::before {
  display: none;
}
#toast-container > div.card-action-hint .toast-message {
  margin: 0;
}
#toast-container > div.card-action-hint .toast-close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: #bcb6d0;
  opacity: 1;
  text-shadow: none;
  float: none;
}
#toast-container > div.card-action-hint .toast-close-button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
#toast-container > div.card-action-hint .toast-close-button:focus-visible {
  outline: 2px solid #c5adff;
  outline-offset: 2px;
}
#toast-container > div.card-action-hint .card-action-hint__eyebrow {
  margin: 0 30px 14px 0;
  color: #c7b0ff;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}
#toast-container > div.card-action-hint .card-action-hint__body {
  display: flex;
  align-items: center;
  gap: 14px;
}
#toast-container > div.card-action-hint .card-action-hint__gesture {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 56px;
  height: 60px;
  border: 1px solid rgba(193, 166, 255, 0.35);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(174, 136, 255, 0.22), rgba(174, 136, 255, 0.05));
  color: #d5c2ff;
  animation: card-action-hint-hold 1.6s ease-in-out 3;
}
#toast-container > div.card-action-hint .card-action-hint__gesture svg {
  width: 26px;
  height: 26px;
}
#toast-container > div.card-action-hint .card-action-hint__duration {
  position: absolute;
  bottom: -7px;
  padding: 0 6px;
  border: 1px solid #6b588e;
  border-radius: 6px;
  background: #3a2f50;
  color: #ece2ff;
  font-size: 9px;
  font-weight: 600;
  line-height: 16px;
}
#toast-container > div.card-action-hint .card-action-hint__copy {
  flex: 1;
  min-width: 0;
}
#toast-container > div.card-action-hint .card-action-hint__title {
  margin: 0 0 5px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
}
#toast-container > div.card-action-hint .card-action-hint__text {
  margin: 0;
  color: #c1bdce;
  font-size: 13px;
  line-height: 1.5;
}
#toast-container > div.card-action-hint .card-action-hint__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 19px;
  padding-top: 12px;
  border-top: 1px solid rgba(204, 187, 242, 0.12);
  font-size: 10px;
  line-height: 16px;
}
#toast-container > div.card-action-hint .card-action-hint__instruction {
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(180, 151, 246, 0.12);
  color: #d5c2ff;
  font-weight: 600;
}
#toast-container > div.card-action-hint .card-action-hint__note {
  color: #a7a0b7;
}

@keyframes card-action-hint-hold {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(178, 141, 255, 0);
  }
  45% {
    transform: scale(0.94);
    box-shadow: 0 0 0 5px rgba(178, 141, 255, 0.12);
  }
}
@media (prefers-reduced-motion: reduce) {
  #toast-container > div.card-action-hint .card-action-hint__gesture {
    animation: none;
  }
}
.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;
  }
}
.trade-push-banner {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 66px;
  margin: -5px 0 20px;
  padding: 11px 14px;
  border: 1px solid rgba(119, 44, 232, 0.15);
  border-radius: 14px;
  background: linear-gradient(100deg, rgba(119, 44, 232, 0.08) 0%, rgba(119, 44, 232, 0.035) 48%, rgba(119, 44, 232, 0.07) 100%), var(--light-bg);
  color: var(--main-text-color);
  text-decoration: none;
  box-shadow: 0 5px 16px rgba(35, 20, 60, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.trade-push-banner::before {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  left: -55px;
  top: -75px;
  border-radius: 50%;
  background: rgba(119, 44, 232, 0.08);
  pointer-events: none;
}
.trade-push-banner:hover {
  color: var(--main-text-color);
  text-decoration: none;
  border-color: rgba(119, 44, 232, 0.3);
  box-shadow: 0 7px 22px rgba(119, 44, 232, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}
.trade-push-banner:hover .trade-push-banner__button {
  transform: translateY(-1px);
}
.trade-push-banner__icon {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  border-radius: 50%;
  background: rgba(119, 44, 232, 0.12);
  color: var(--main-purple-color);
}
.trade-push-banner__icon span {
  font-size: 23px;
  font-weight: 400;
}
.trade-push-banner__content {
  min-width: 0;
  flex: 1;
}
.trade-push-banner__title {
  margin-bottom: 3px;
  font-size: 15px;
  line-height: 19px;
  font-weight: 600;
  color: var(--main-text-color);
}
.trade-push-banner__text {
  font-size: 13px;
  line-height: 17px;
  color: var(--secondary-text-color);
}
.trade-push-banner__button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 112px;
  height: 38px;
  margin-left: 18px;
  padding: 0 18px;
  border-radius: 10px;
  background: var(--purple-btn-bg);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 5px 13px rgba(119, 44, 232, 0.18);
  transition: transform 0.2s ease;
}
.trade-push-banner__arrow {
  display: none;
  flex-shrink: 0;
  color: var(--main-purple-color);
}

body.dark .trade-push-banner {
  border-color: rgba(158, 93, 255, 0.2);
  background: linear-gradient(100deg, rgba(119, 44, 232, 0.15) 0%, rgba(119, 44, 232, 0.055) 50%, rgba(119, 44, 232, 0.11) 100%), var(--light-bg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}
body.dark .trade-push-banner::before {
  background: rgba(150, 80, 255, 0.1);
}
body.dark .trade-push-banner:hover {
  border-color: rgba(158, 93, 255, 0.38);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 0 20px rgba(119, 44, 232, 0.06);
}
body.dark .trade-push-banner__icon {
  background: rgba(139, 65, 246, 0.18);
}

@media screen and (max-width: 600px) {
  .trade-push-banner {
    min-height: 60px;
    margin-bottom: 15px;
    padding: 10px 11px;
    border-radius: 12px;
  }
  .trade-push-banner__icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    margin-right: 10px;
  }
  .trade-push-banner__icon span {
    font-size: 21px;
  }
  .trade-push-banner__title {
    font-size: 14px;
    line-height: 17px;
    margin-bottom: 2px;
  }
  .trade-push-banner__text {
    font-size: 11px;
    line-height: 15px;
  }
  .trade-push-banner__button {
    display: none;
  }
  .trade-push-banner__arrow {
    display: block;
    margin-left: 5px;
    font-size: 23px;
  }
}
@media screen and (max-width: 360px) {
  .trade-push-banner {
    padding: 9px 10px;
  }
  .trade-push-banner__icon {
    width: 35px;
    height: 35px;
    flex-basis: 35px;
    margin-right: 8px;
  }
  .trade-push-banner__text {
    font-size: 10.5px;
    line-height: 14px;
  }
}
/* ==========================================================
   TRADE NOTIFICATION
   ========================================================== */
.notification-trade {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
  min-width: 0;
}

/* ==========================================================
   PENDING — карточки "Получите / Отдадите"
   ========================================================== */
.notification-trade__stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.notification-trade__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 9px 0 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.notification-trade__chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.notification-trade__chip-label {
  opacity: 0.78;
}

.notification-trade__chip-value {
  font-size: 13px;
  font-weight: 700;
  color: inherit;
}

/* Получите */
.notification-trade__chip--receive {
  color: #287c55;
  background: #f1faf5;
  border-color: #dcefe4;
}

.notification-trade__chip--receive .notification-trade__chip-icon {
  color: #287c55;
  background: #dff2e7;
}

/* Отдадите */
.notification-trade__chip--give {
  color: #a16824;
  background: #fff8ed;
  border-color: #f3e5cb;
}

.notification-trade__chip--give .notification-trade__chip-icon {
  color: #a16824;
  background: #f8e9cc;
}

/* ==========================================================
   КНОПКА "Открыть обмен"
   ========================================================== */
.notification-trade__open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 28px;
  padding: 0 10px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: rgba(137, 35, 255, 0.07);
  color: #891fff !important;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.notification-trade__open:hover {
  background: rgba(137, 35, 255, 0.12);
}

.notification-trade__open-arrow {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  transition: transform 0.15s ease;
}

.notification-trade__open:hover .notification-trade__open-arrow {
  transform: translateX(2px);
}

/* ==========================================================
   РЕЗУЛЬТАТ ОБМЕНА
   ========================================================== */
.notification-trade__result {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

/* ==========================================================
   STATUS BADGE
   ========================================================== */
.notification-trade__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 9px 0 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
}

.notification-trade__status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.notification-trade__status-icon--small {
  font-size: 10px;
}

/* Принято */
.notification-trade__status--accepted {
  color: #277c52;
  background: #f1faf5;
  border-color: #dcefe4;
}

.notification-trade__status--accepted .notification-trade__status-icon {
  color: #ffffff;
  background: #3a9a69;
}

/* Отклонено */
.notification-trade__status--rejected {
  color: #b64b4b;
  background: #fff5f5;
  border-color: #f2dddd;
}

.notification-trade__status--rejected .notification-trade__status-icon {
  color: #ffffff;
  background: #d46060;
}

/* Отменено */
.notification-trade__status--canceled {
  color: #777c85;
  background: #f6f6f7;
  border-color: #e7e7e9;
}

.notification-trade__status--canceled .notification-trade__status-icon {
  color: #777c85;
  background: #e6e6e8;
}

/* ==========================================================
   "Получили 4 · Отдали 2"
   ========================================================== */
.notification-trade__summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 8px;
  background: #f7f7f8;
  color: #737373;
  box-sizing: border-box;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.notification-trade__summary-part {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.notification-trade__summary-part strong {
  color: #333;
  font-size: 12px;
  font-weight: 700;
}

.notification-trade__summary-divider {
  color: #c0c0c0;
}

/* ==========================================================
   ВАЖНО ДЛЯ FLEX
   Не даём длинному контенту раздвигать уведомление
   ========================================================== */
.notifications__wrapper {
  min-width: 0;
}

.notifications__name {
  min-width: 0;
}

/* ==========================================================
   TABLET / MOBILE
   ========================================================== */
@media (max-width: 768px) {
  .notification-trade {
    gap: 7px;
    margin-top: 8px;
  }
  .notification-trade__stats {
    gap: 5px;
  }
  .notification-trade__chip {
    height: 27px;
    padding-right: 8px;
    border-radius: 7px;
  }
  .notification-trade__open {
    height: 27px;
    border-radius: 7px;
  }
  .notification-trade__status {
    min-height: 27px;
    border-radius: 7px;
  }
  .notification-trade__summary {
    min-height: 27px;
    border-radius: 7px;
  }
}
/* ==========================================================
   SMALL MOBILE
   ========================================================== */
@media (max-width: 520px) {
  /*
   * На телефоне мета-строка занимает нормальную ширину,
   * но каждый элемент остаётся компактным.
   */
  .notification-trade {
    width: 100%;
    align-items: flex-start;
    gap: 6px;
  }
  .notification-trade__stats {
    width: 100%;
    flex-wrap: nowrap;
    gap: 5px;
  }
  /*
   * Два бейджа делят строку поровну.
   * Поэтому даже на 320-360px ничего не слипается.
   */
  .notification-trade__chip {
    flex: 1 1 0;
    justify-content: flex-start;
    min-width: 0;
    height: 30px;
    padding-left: 7px;
    padding-right: 8px;
  }
  .notification-trade__chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /*
   * Кнопка идёт отдельной аккуратной строкой,
   * а не пытается втиснуться рядом с бейджами.
   */
  .notification-trade__open {
    width: auto;
    height: 30px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 1px;
  }
  /*
   * Для результата обмена статус и цифры
   * нормально переносятся друг под друга.
   */
  .notification-trade__result {
    width: 100%;
    gap: 6px;
  }
  .notification-trade__status {
    min-height: 30px;
  }
  .notification-trade__summary {
    min-height: 30px;
  }
}
/* ==========================================================
   VERY SMALL MOBILE
   ========================================================== */
@media (max-width: 370px) {
  .notification-trade__chip {
    gap: 4px;
    padding-left: 6px;
    padding-right: 6px;
    font-size: 11px;
  }
  .notification-trade__chip-icon {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
    font-size: 10px;
  }
  .notification-trade__chip-value {
    font-size: 12px;
  }
  .notification-trade__status {
    font-size: 10px;
  }
  .notification-trade__summary {
    gap: 5px;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 10px;
  }
}
/* ==========================================================
   DARK THEME — TRADE NOTIFICATION
   ========================================================== */
body.dark .notifications__item {
  border-radius: 14px;
  transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

body.dark .notifications__item:hover {
  background: rgba(255, 255, 255, 0.02);
}

body.dark .notifications__item--not-read {
  background: linear-gradient(90deg, rgba(117, 67, 160, 0.16) 0%, rgba(117, 67, 160, 0.08) 100%);
  border: 1px solid rgba(164, 101, 220, 0.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018);
}

body.dark .notifications__item--not-read:hover {
  background: linear-gradient(90deg, rgba(117, 67, 160, 0.2) 0%, rgba(117, 67, 160, 0.1) 100%);
  border-color: rgba(164, 101, 220, 0.22);
}

/* ==========================================================
   Основной текст
   ========================================================== */
body.dark .notifications__name {
  color: #ded9e4;
}

body.dark .notifications__name a {
  color: #b879f7;
  text-decoration: none;
}

body.dark .notifications__name a:hover {
  color: #ca98ff;
}

body.dark .notifications__date {
  color: #958e9e;
}

/* ==========================================================
   Trade block
   ========================================================== */
body.dark .notification-trade {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
  min-width: 0;
}

/* ==========================================================
   Получите / Отдадите
   ========================================================== */
body.dark .notification-trade__stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

body.dark .notification-trade__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 29px;
  padding: 0 9px 0 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

body.dark .notification-trade__chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

body.dark .notification-trade__chip-label {
  opacity: 0.82;
}

body.dark .notification-trade__chip-value {
  color: inherit;
  font-size: 13px;
  font-weight: 700;
}

/* Получите */
body.dark .notification-trade__chip--receive {
  color: #8bd9ae;
  background: rgba(37, 94, 65, 0.3);
  border-color: rgba(85, 166, 119, 0.22);
}

body.dark .notification-trade__chip--receive .notification-trade__chip-icon {
  color: #b5efd0;
  background: rgba(59, 137, 91, 0.34);
}

/* Отдадите */
body.dark .notification-trade__chip--give {
  color: #e4b779;
  background: rgba(102, 73, 33, 0.29);
  border-color: rgba(191, 139, 70, 0.22);
}

body.dark .notification-trade__chip--give .notification-trade__chip-icon {
  color: #f4ce9c;
  background: rgba(143, 100, 43, 0.35);
}

/* ==========================================================
   Открыть обмен
   ========================================================== */
body.dark .notification-trade__open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 29px;
  padding: 0 11px;
  border: 1px solid rgba(157, 86, 232, 0.16);
  border-radius: 8px;
  background: rgba(130, 49, 209, 0.13);
  color: #b368ef !important;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body.dark .notification-trade__open:hover {
  color: #c888ff !important;
  background: rgba(140, 57, 220, 0.19);
  border-color: rgba(179, 104, 239, 0.25);
}

body.dark .notification-trade__open-arrow {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  transition: transform 0.15s ease;
}

body.dark .notification-trade__open:hover .notification-trade__open-arrow {
  transform: translateX(2px);
}

/* ==========================================================
   RESULT
   ========================================================== */
body.dark .notification-trade__result {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

/* ==========================================================
   STATUS
   ========================================================== */
body.dark .notification-trade__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 29px;
  padding: 0 9px 0 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

body.dark .notification-trade__status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

/* Accepted */
body.dark .notification-trade__status--accepted {
  color: #89d9ac;
  background: rgba(37, 94, 65, 0.3);
  border-color: rgba(85, 166, 119, 0.22);
}

body.dark .notification-trade__status--accepted .notification-trade__status-icon {
  color: #102018;
  background: #72c997;
}

/* Rejected */
body.dark .notification-trade__status--rejected {
  color: #e9959c;
  background: rgba(105, 44, 51, 0.28);
  border-color: rgba(193, 87, 98, 0.22);
}

body.dark .notification-trade__status--rejected .notification-trade__status-icon {
  color: #241011;
  background: #db727c;
}

/* Canceled */
body.dark .notification-trade__status--canceled {
  color: #aaa4b0;
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.07);
}

body.dark .notification-trade__status--canceled .notification-trade__status-icon {
  color: #c6c0cc;
  background: rgba(255, 255, 255, 0.1);
}

/* ==========================================================
   Получили X · Отдали X
   ========================================================== */
body.dark .notification-trade__summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 29px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: #aaa3b3;
  box-sizing: border-box;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

body.dark .notification-trade__summary-part {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

body.dark .notification-trade__summary-part strong {
  color: #ebe6ef;
  font-size: 12px;
  font-weight: 700;
}

body.dark .notification-trade__summary-divider {
  color: #6f6878;
}

/* ==========================================================
   Кнопки справа
   ========================================================== */
body.dark .notifications__read-btn,
body.dark .notifications__delete {
  color: #9d97a5;
  transition: color 0.15s ease, opacity 0.15s ease;
}

body.dark .notifications__read-btn:hover {
  color: #b98aec;
}

body.dark .notifications__delete:hover {
  color: #d77d85;
}

/* ==========================================================
   FLEX FIX
   ========================================================== */
body.dark .notifications__wrapper,
body.dark .notifications__name {
  min-width: 0;
}

/* ==========================================================
   MOBILE
   ========================================================== */
@media (max-width: 520px) {
  body.dark .notification-trade {
    width: 100%;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
  }
  body.dark .notification-trade__stats {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
    gap: 6px;
  }
  body.dark .notification-trade__chip {
    width: 100%;
    min-width: 0;
    height: 31px;
    padding: 0 8px;
    justify-content: flex-start;
  }
  body.dark .notification-trade__chip-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.dark .notification-trade__open {
    height: 31px;
    margin-top: 1px;
    padding: 0 10px;
  }
  body.dark .notification-trade__result {
    width: 100%;
    gap: 6px;
  }
  body.dark .notification-trade__status,
  body.dark .notification-trade__summary {
    min-height: 31px;
  }
}
/* ==========================================================
   VERY SMALL MOBILE
   ========================================================== */
@media (max-width: 370px) {
  body.dark .notification-trade__stats {
    grid-template-columns: 1fr;
  }
  body.dark .notification-trade__chip {
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
  }
  body.dark .notification-trade__result {
    flex-direction: column;
    align-items: flex-start;
  }
  body.dark .notification-trade__summary {
    max-width: 100%;
    white-space: normal;
  }
}
/* ==========================================================
   TRADE PREVIEW MODALS
   ========================================================== */
body.trade-preview-lock {
  overflow: hidden;
}

/* ----------------------------------------------------------
   Overlay
   ---------------------------------------------------------- */
.trade-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(13, 10, 18, 0.58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

.trade-preview-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.trade-preview-overlay--cards {
  z-index: 10060;
  background: rgba(10, 8, 14, 0.72);
}

/* ----------------------------------------------------------
   Modal
   ---------------------------------------------------------- */
.trade-preview-modal {
  --tp-bg: #ffffff;
  --tp-bg-soft: #f7f7f9;
  --tp-bg-panel: #fafafd;
  --tp-border: #e8e6ec;
  --tp-border-soft: #efedf2;
  --tp-text: #28242d;
  --tp-text-soft: #89838e;
  --tp-purple: #8e38e8;
  --tp-purple-soft: rgba(142, 56, 232, .09);
  width: min(780px, 100%);
  max-height: min(820px, 100vh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--tp-border);
  border-radius: 22px;
  background: var(--tp-bg);
  color: var(--tp-text);
  box-shadow: 0 30px 90px rgba(20, 13, 31, 0.22);
  transform: translateY(12px) scale(0.985);
  transition: transform 0.2s ease;
}

.trade-preview-overlay.is-open .trade-preview-modal {
  transform: translateY(0) scale(1);
}

/* DARK */
body.dark .trade-preview-modal {
  --tp-bg: #171619;
  --tp-bg-soft: #1e1d21;
  --tp-bg-panel: #1c1b1f;
  --tp-border: rgba(255, 255, 255, .075);
  --tp-border-soft: rgba(255, 255, 255, .055);
  --tp-text: #eeeaf2;
  --tp-text-soft: #928c99;
  --tp-purple: #b268ef;
  --tp-purple-soft: rgba(147, 68, 222, .13);
  box-shadow: 0 35px 110px rgba(0, 0, 0, 0.58);
}

/* ----------------------------------------------------------
   Header
   ---------------------------------------------------------- */
.trade-preview-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px 19px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--tp-border-soft);
}

.trade-preview-modal__heading {
  min-width: 0;
}

.trade-preview-modal__eyebrow {
  margin-bottom: 5px;
  color: var(--tp-purple);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.11em;
}

.trade-preview-modal__title {
  margin: 0;
  color: var(--tp-text);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.trade-preview-modal__subtitle {
  margin-top: 9px;
  color: var(--tp-text-soft);
  font-size: 13px;
}

/* User */
.trade-preview-user {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.trade-preview-user img {
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 7px;
}

.trade-preview-user strong {
  color: var(--tp-text);
  font-weight: 600;
}

/* Close */
.trade-preview-modal__close {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--tp-border);
  border-radius: 11px;
  background: var(--tp-bg-soft);
  color: var(--tp-text-soft);
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.trade-preview-modal__close:hover {
  color: var(--tp-text);
  transform: scale(1.04);
}

/* ----------------------------------------------------------
   Body
   ---------------------------------------------------------- */
.trade-preview-modal__body {
  min-height: 0;
  padding: 20px 24px;
  overflow-y: auto;
}

/* ----------------------------------------------------------
   Exchange
   ---------------------------------------------------------- */
.trade-preview-exchange {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
}

/* ----------------------------------------------------------
   Side
   ---------------------------------------------------------- */
.trade-preview-side {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--tp-border);
  border-radius: 16px;
  background: var(--tp-bg-panel);
}

.trade-preview-side--receive {
  box-shadow: inset 0 2px 0 rgba(63, 166, 108, 0.18);
}

.trade-preview-side--give {
  box-shadow: inset 0 2px 0 rgba(204, 151, 68, 0.17);
}

.trade-preview-side__header {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 13px;
}

.trade-preview-side__header > div {
  display: flex;
  align-items: center;
  gap: 7px;
}

.trade-preview-side__label {
  color: var(--tp-text);
  font-size: 13px;
  font-weight: 650;
}

.trade-preview-side__count {
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 7px;
  background: var(--tp-bg-soft);
  color: var(--tp-text-soft);
  font-size: 11px;
  font-weight: 700;
}

/* all button */
.trade-preview-side__all {
  padding: 5px 7px;
  border: 0;
  background: transparent;
  color: var(--tp-purple);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

/* ----------------------------------------------------------
   Mini cards
   ---------------------------------------------------------- */
.trade-preview-side__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.trade-preview-card {
  min-width: 0;
}

.trade-preview-card__image {
  position: relative;
  aspect-ratio: 0.7;
  overflow: hidden;
  border-radius: 10px;
  background: var(--tp-bg-soft);
}

.trade-preview-card__image img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.trade-preview-card__rank,
.trade-all-card__rank {
  position: absolute;
  top: 5px;
  left: 5px;
  min-width: 21px;
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: 6px;
  background: rgba(15, 13, 17, 0.72);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

.trade-preview-card__level,
.trade-all-card__level {
  position: absolute;
  right: 5px;
  bottom: 5px;
  min-width: 24px;
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: 6px;
  background: rgba(138, 48, 222, 0.84);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

/* ----------------------------------------------------------
   +N more tile
   ---------------------------------------------------------- */
.trade-preview-more {
  position: relative;
  aspect-ratio: 0.7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px;
  border: 1px dashed rgba(137, 63, 203, 0.3);
  border-radius: 10px;
  background: var(--tp-purple-soft);
  color: var(--tp-purple);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.trade-preview-more:hover {
  transform: translateY(-2px);
  border-color: rgba(137, 63, 203, 0.52);
}

.trade-preview-more__number {
  font-size: 20px;
  font-weight: 750;
  line-height: 1;
}

.trade-preview-more__text {
  color: var(--tp-text-soft);
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}

/* ----------------------------------------------------------
   Arrow middle
   ---------------------------------------------------------- */
.trade-preview-exchange__middle {
  display: flex;
  align-items: center;
  justify-content: center;
}

.trade-preview-exchange__icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tp-border);
  border-radius: 50%;
  background: var(--tp-bg);
  color: var(--tp-text-soft);
  font-size: 17px;
}

/* ----------------------------------------------------------
   Warning
   ---------------------------------------------------------- */
.trade-preview-warning {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 14px;
  padding: 11px 12px;
  border-radius: 11px;
  background: var(--tp-bg-soft);
  color: var(--tp-text-soft);
  font-size: 11px;
  line-height: 1.45;
}

.trade-preview-warning__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(154, 98, 35, 0.12);
  color: #b57932;
  font-size: 11px;
  font-weight: 800;
}

/* ----------------------------------------------------------
   Footer
   ---------------------------------------------------------- */
.trade-preview-modal__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 9px;
  padding: 15px 24px 21px;
  flex-shrink: 0;
  border-top: 1px solid var(--tp-border-soft);
}

/* Actions */
.trade-preview-action {
  min-height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.trade-preview-action:hover {
  transform: translateY(-1px);
}

.trade-preview-action:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
}

/* Reject */
.trade-preview-action--reject {
  border-color: rgba(203, 77, 87, 0.13);
  background: rgba(203, 77, 87, 0.075);
  color: #c9525d;
}

/* Accept */
.trade-preview-action--accept {
  background: linear-gradient(135deg, #8e3be5, #7430d2);
  color: #ffffff;
  box-shadow: 0 7px 22px rgba(117, 48, 210, 0.18);
}

body.dark .trade-preview-action--accept {
  background: linear-gradient(135deg, #914ad3, #7130bb);
}

/* ----------------------------------------------------------
   Loading
   ---------------------------------------------------------- */
.trade-preview-loading {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  color: var(--tp-text-soft);
  font-size: 12px;
}

.trade-preview-loading__spinner {
  width: 28px;
  height: 28px;
  border: 2px solid var(--tp-border);
  border-top-color: var(--tp-purple);
  border-radius: 50%;
  animation: trade-preview-spin 0.7s linear infinite;
}

@keyframes trade-preview-spin {
  to {
    transform: rotate(360deg);
  }
}
/* ==========================================================
   ALL CARDS MODAL
   ========================================================== */
.trade-preview-modal--cards {
  width: min(860px, 100%);
}

/* Tabs */
.trade-preview-cards__tabs {
  display: flex;
  gap: 6px;
  padding: 13px 24px 0;
  background: var(--tp-bg);
}

.trade-preview-cards__tab {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--tp-border);
  border-radius: 9px;
  background: var(--tp-bg-soft);
  color: var(--tp-text-soft);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.trade-preview-cards__tab.is-active {
  border-color: rgba(142, 56, 232, 0.24);
  background: var(--tp-purple-soft);
  color: var(--tp-purple);
}

/* Grid */
.trade-preview-cards__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 13px;
}

/* Card */
.trade-all-card {
  min-width: 0;
}

.trade-all-card__image {
  position: relative;
  aspect-ratio: 0.7;
  overflow: hidden;
  border-radius: 11px;
  background: var(--tp-bg-soft);
}

.trade-all-card__image img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.trade-all-card__name {
  margin-top: 6px;
  overflow: hidden;
  color: var(--tp-text-soft);
  font-size: 10px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Finished */
.trade-preview-finished {
  display: flex;
  align-items: center;
  color: var(--tp-text);
  font-size: 13px;
  font-weight: 650;
}

.trade-preview-page-link {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--tp-purple-soft);
  color: var(--tp-purple) !important;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none !important;
}

/* ==========================================================
   MOBILE
   ========================================================== */
@media screen and (max-width: 680px) {
  .trade-preview-overlay {
    align-items: flex-end;
    padding: 10px 10px max(10px, env(safe-area-inset-bottom));
  }
  .trade-preview-modal {
    width: 100%;
    max-height: calc(100dvh - 20px);
    border-radius: 20px 20px 16px 16px;
  }
  .trade-preview-modal__header {
    padding: 18px 17px 15px;
  }
  .trade-preview-modal__title {
    font-size: 19px;
  }
  .trade-preview-modal__close {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
  .trade-preview-modal__body {
    padding: 15px 15px;
  }
  /*
   * На телефоне НЕ пытаемся
   * засунуть обе стороны рядом.
   */
  .trade-preview-exchange {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .trade-preview-exchange__middle {
    height: 26px;
  }
  .trade-preview-exchange__icon {
    width: 30px;
    height: 30px;
    transform: rotate(90deg);
  }
  .trade-preview-side {
    padding: 13px;
  }
  .trade-preview-side__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }
  .trade-preview-modal__footer {
    padding: 12px 15px 16px;
  }
  /* All cards */
  .trade-preview-cards__tabs {
    padding: 11px 15px 0;
  }
  .trade-preview-cards__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }
}
/* ==========================================================
   SMALL MOBILE
   ========================================================== */
@media screen and (max-width: 470px) {
  .trade-preview-side__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .trade-preview-modal__footer {
    grid-template-columns: 1fr;
  }
  /*
   * Главная кнопка сверху.
   */
  .trade-preview-action--accept {
    order: -1;
  }
  .trade-preview-cards__tabs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .trade-preview-cards__tab {
    min-width: 0;
    padding: 0 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .trade-preview-cards__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
  }
}
/* ==========================================================
   VERY SMALL
   ========================================================== */
@media screen and (max-width: 350px) {
  .trade-preview-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* ==========================================================
   RESET ДЛЯ КНОПКИ В УВЕДЕ
   ========================================================== */
button.notification-trade__open {
  font-family: inherit;
  cursor: pointer;
}

.trade-preview-modal__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 12px;
  margin-top: 9px;
}

.trade-preview-modal__subtitle {
  margin-top: 0;
}

.trade-preview-modal__page-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 27px;
  padding: 0 8px;
  border: 1px solid var(--tp-border);
  border-radius: 8px;
  background: var(--tp-bg-soft);
  color: var(--tp-text-soft) !important;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.trade-preview-modal__page-link:hover {
  color: var(--tp-purple) !important;
  border-color: rgba(142, 56, 232, 0.22);
  background: var(--tp-purple-soft);
}

.trade-preview-modal__page-link-icon {
  font-size: 12px;
  line-height: 1;
}

/* DARK */
body.dark .trade-preview-modal__page-link:hover {
  border-color: rgba(178, 104, 239, 0.25);
}

/* MOBILE */
@media screen and (max-width: 470px) {
  .trade-preview-modal__meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
  .trade-preview-modal__page-link {
    min-height: 28px;
  }
}
.trade-preview-card,
.trade-all-card {
  display: block;
  color: inherit !important;
  text-decoration: none !important;
}

.trade-preview-card__image,
.trade-all-card__image {
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.trade-preview-card:hover .trade-preview-card__image,
.trade-all-card:hover .trade-all-card__image {
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.12);
}

body.dark .trade-preview-card:hover .trade-preview-card__image,
body.dark .trade-all-card:hover .trade-all-card__image {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
}

/* ==========================================================
   AFTER ACCEPT
   ========================================================== */
.trade-accepted {
  min-width: 0;
}

/* Success */
.trade-accepted__success {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 15px;
  border: 1px solid rgba(62, 163, 105, 0.18);
  border-radius: 14px;
  background: rgba(62, 163, 105, 0.07);
}

.trade-accepted__success-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #49a971;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
}

.trade-accepted__success-title {
  color: var(--tp-text);
  font-size: 14px;
  font-weight: 700;
}

.trade-accepted__success-text {
  margin-top: 2px;
  color: var(--tp-text-soft);
  font-size: 11px;
}

/* Heading */
.trade-accepted__heading {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  margin-bottom: 10px;
  color: var(--tp-text);
  font-size: 12px;
  font-weight: 700;
}

.trade-accepted__heading span {
  min-width: 21px;
  height: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 7px;
  background: var(--tp-bg-soft);
  color: var(--tp-text-soft);
  font-size: 10px;
}

/* Cards */
.trade-accepted__cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.trade-accepted-card {
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--tp-border);
  border-radius: 12px;
  background: var(--tp-bg-panel);
  transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.trade-accepted-card__image {
  display: block;
  aspect-ratio: 0.7;
  overflow: hidden;
  border-radius: 8px;
  background: var(--tp-bg-soft);
}

.trade-accepted-card__image img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.trade-accepted-card__bottom {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
}

.trade-accepted-card__name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--tp-text-soft);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Single lock */
.trade-accepted-card__lock {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--tp-border);
  border-radius: 8px;
  background: var(--tp-bg-soft);
  color: var(--tp-text-soft);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.trade-accepted-card__lock:hover {
  color: var(--tp-purple);
  border-color: rgba(142, 56, 232, 0.25);
  background: var(--tp-purple-soft);
  transform: translateY(-1px);
}

.trade-accepted-card.is-locked {
  border-color: rgba(62, 163, 105, 0.18);
  background: rgba(62, 163, 105, 0.045);
}

.trade-accepted-card__lock.is-locked {
  color: #58b47d;
  border-color: rgba(62, 163, 105, 0.2);
  background: rgba(62, 163, 105, 0.09);
  cursor: default;
}

/* Hint */
.trade-accepted__hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  color: var(--tp-text-soft);
  font-size: 10px;
  line-height: 1.45;
}

.trade-accepted__hint-icon {
  flex-shrink: 0;
  color: var(--tp-purple);
}

/* Footer buttons */
.trade-accepted__done {
  border-color: var(--tp-border);
  background: var(--tp-bg-soft);
  color: var(--tp-text);
}

.trade-accepted__lock-all {
  border: 1px solid rgba(142, 56, 232, 0.19);
  background: var(--tp-purple-soft);
  color: var(--tp-purple);
}

.trade-accepted__lock-all.is-locked {
  border-color: rgba(62, 163, 105, 0.18);
  background: rgba(62, 163, 105, 0.08);
  color: #52a976;
}

/* DARK */
body.dark .trade-accepted__success {
  border-color: rgba(81, 178, 121, 0.18);
  background: rgba(45, 117, 75, 0.13);
}

body.dark .trade-accepted-card.is-locked {
  border-color: rgba(81, 178, 121, 0.17);
  background: rgba(45, 117, 75, 0.09);
}

/* MOBILE */
@media screen and (max-width: 680px) {
  .trade-accepted__cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }
}
@media screen and (max-width: 470px) {
  .trade-accepted__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .trade-accepted__success {
    padding: 12px;
  }
  .trade-accepted__success-icon {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
  }
  .trade-accepted-card {
    padding: 5px;
  }
}
.notification-trade__link {
  color: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.notification-trade__link:hover {
  text-decoration: underline;
  opacity: 0.8;
}

/* ==========================================================
   TRADE MODAL — CARD META
   ========================================================== */
.trade-preview-card__image,
.trade-all-card__image,
.trade-accepted-card__image {
  position: relative;
}

/* ==========================================================
   A+
   Как на обычном trade, но адаптировано под размеры модалки
   ========================================================== */
.trade-modal-card__aplus {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 25px;
  height: 20px;
  padding: 0 5px;
  border-radius: 6px;
  background: var(--main-purple-color);
  color: #fff;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  box-shadow: 0 3px 8px rgba(90, 25, 160, 0.2);
  pointer-events: none;
}

body.dark .trade-modal-card__aplus {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
}

/* ==========================================================
   Accepted level
   ========================================================== */
.trade-accepted-card__level {
  position: absolute;
  right: 5px;
  bottom: 5px;
  z-index: 9;
  min-width: 24px;
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: 6px;
  background: rgba(138, 48, 222, 0.84);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  pointer-events: none;
}

/* ==========================================================
   COPY RIBBON
   Helper уже отдаёт .card-copy-ribbon / .card-copy-number
   ========================================================== */
.trade-preview-card__image .card-copy-ribbon,
.trade-all-card__image .card-copy-ribbon,
.trade-accepted-card__image .card-copy-ribbon {
  z-index: 9;
}

.trade-preview-card:hover .card-copy-ribbon,
.trade-all-card:hover .card-copy-ribbon,
.trade-accepted-card:hover .card-copy-ribbon {
  opacity: 1;
  transform: translateX(-50%) translateY(-1px);
}

.trade-preview-card__image .card-copy-number,
.trade-all-card__image .card-copy-number,
.trade-accepted-card__image .card-copy-number {
  z-index: 9;
}

/* ==========================================================
   USER AVATAR + FRAME
   ========================================================== */
.trade-preview-user__avatar {
  position: relative;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
}

.trade-preview-user__avatar-image {
  width: 100% !important;
  height: 100% !important;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 6px !important;
}

.trade-preview-user__avatar-frame {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: contain;
     object-fit: contain;
  pointer-events: none;
  z-index: 2;
}

.trade-preview-user__text {
  min-width: 0;
}

.trade-preview-user__tag {
  margin-left: 3px;
  color: var(--tp-text-soft);
  font-size: 11px;
  font-weight: 600;
}

/* ==========================================================
   NEW CARD WARNING
   ========================================================== */
.trade-preview-warning--important {
  margin-top: 0;
  margin-bottom: 14px;
  border: 1px solid rgba(220, 153, 46, 0.24);
  background: rgba(220, 153, 46, 0.08);
  color: var(--tp-text-soft);
}

.trade-preview-warning--important .trade-preview-warning__icon {
  background: rgba(220, 153, 46, 0.14);
  color: #c88828;
}

.trade-preview-warning--important strong {
  display: block;
  margin-bottom: 2px;
  color: var(--tp-text);
  font-size: 11px;
}

/* ==========================================================
   MOBILE
   ========================================================== */
@media screen and (max-width: 470px) {
  .trade-modal-card__aplus {
    top: 4px;
    right: 4px;
    min-width: 23px;
    height: 19px;
    padding: 0 4px;
    font-size: 9px;
  }
  .trade-accepted-card__level,
  .trade-preview-card__level,
  .trade-all-card__level {
    right: 4px;
    bottom: 4px;
    min-width: 22px;
    height: 19px;
    font-size: 9px;
  }
}
.action-captcha {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.action-captcha.is-open {
  display: flex;
}

.action-captcha__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 13, 18, 0.72);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

.action-captcha__window {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 390px;
  padding: 30px 24px 26px;
  border-radius: 18px;
  background: var(--block-color, #fff);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.action-captcha__close {
  position: absolute;
  right: 14px;
  top: 10px;
  padding: 5px;
  border: 0;
  background: transparent;
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
}

.action-captcha__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin: 0 auto 14px;
  border-radius: 15px;
  background: rgba(110, 87, 255, 0.1);
}

.action-captcha__icon span {
  font-size: 28px;
}

.action-captcha__title {
  margin-bottom: 7px;
  font-size: 20px;
  font-weight: 700;
}

.action-captcha__text {
  max-width: 310px;
  margin: 0 auto 22px;
  font-size: 14px;
  line-height: 1.45;
  opacity: 0.65;
}

.action-captcha__widget {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 65px;
}

.action-captcha__loading {
  font-size: 13px;
  opacity: 0.55;
}

body.action-captcha-lock {
  overflow: hidden;
}

.trade__bulk-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.trade__bulk-actions .button {
  margin-bottom: 0;
}
.trade__bulk-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* ==========================================================
   SELECTABLE TRADE ROW
   ========================================================== */
.trade-select-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: stretch;
  margin-bottom: 15px;
  border-radius: 10px;
  transition: background 0.16s ease, box-shadow 0.16s ease;
  /*
   * У trade item уже есть margin-bottom.
   * Теперь margin задаёт сама selectable row.
   */
  /* ======================================================
     CHECK AREA
     ====================================================== */
}
.trade-select-row:last-child {
  margin-bottom: 0;
}
.trade-select-row.is-selected {
  background: rgba(119, 44, 232, 0.055);
  box-shadow: inset 0 0 0 1px rgba(119, 44, 232, 0.11);
}
.trade-select-row__content {
  min-width: 0;
}
.trade-select-row__content .trade__list-item {
  margin-bottom: 0;
}
.trade-select-row__check {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.trade-select-row__check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.trade-select-row__box {
  width: 19px;
  height: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 19px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--light-bg);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.trade-select-row__box::after {
  content: "✓";
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  transform: scale(0.65);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.trade-select-row__check:hover .trade-select-row__box {
  border-color: rgba(119, 44, 232, 0.45);
}
.trade-select-row__check input:checked + .trade-select-row__box {
  border-color: var(--purple-btn-bg);
  background: var(--purple-btn-bg);
  transform: scale(1.03);
}
.trade-select-row__check input:checked + .trade-select-row__box::after {
  opacity: 1;
  transform: scale(1);
}
.trade-select-row__check input:focus-visible + .trade-select-row__box {
  box-shadow: 0 0 0 3px rgba(119, 44, 232, 0.14);
}

/* ==========================================================
   MOBILE
   ========================================================== */
@media screen and (max-width: 600px) {
  .trade__bulk-actions {
    gap: 7px;
    margin-bottom: 14px;
  }
  .trade__bulk-form {
    gap: 7px;
  }
  .trade-select-row {
    grid-template-columns: 28px minmax(0, 1fr);
  }
  .trade-select-row__check {
    width: 28px;
  }
  .trade-select-row__box {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    border-radius: 5px;
  }
}
@media screen and (max-width: 430px) {
  .trade__bulk-actions {
    align-items: stretch;
  }
  .trade__bulk-actions > .button {
    width: 100%;
  }
  .trade__bulk-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .trade__bulk-form .button {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 12px;
  }
}
/* ==========================================================
   TRADE LIST — CLEAN MOBILE
   Добавить В САМЫЙ КОНЕЦ trade.scss
   ========================================================== */
@media screen and (max-width: 600px) {
  /* -------------------------------------------------------
     Общая ширина
     ------------------------------------------------------- */
  .trade {
    width: 100%;
  }
  .trade__inner {
    width: 100%;
    overflow: visible;
  }
  /* -------------------------------------------------------
     Верхние кнопки
     ------------------------------------------------------- */
  .trade__bulk-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
    margin-bottom: 18px;
  }
  .trade__bulk-actions > .button {
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 9px 14px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.15;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .trade__bulk-form {
    display: grid;
    /*
     * "Отменить выбранные" длиннее,
     * поэтому даём ему чуть больше места.
     */
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr);
    gap: 8px;
    width: 100%;
  }
  .trade__bulk-form .button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 8px 9px;
    font-size: 13px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .js-trades-selected-submit:disabled {
    opacity: 0.45;
    cursor: default;
  }
  /* -------------------------------------------------------
     Список
     ------------------------------------------------------- */
  .trade__list {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
  }
  /* -------------------------------------------------------
     Одна карточка обмена
     ------------------------------------------------------- */
  .trade-select-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
    margin: 0;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--light-bg);
    overflow: hidden;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  }
  .trade-select-row.is-selected {
    border-color: rgba(119, 44, 232, 0.28);
    background: rgba(119, 44, 232, 0.045);
    box-shadow: 0 0 0 2px rgba(119, 44, 232, 0.045);
  }
  /* -------------------------------------------------------
     Левая область checkbox
     ------------------------------------------------------- */
  .trade-select-row__check {
    width: 38px;
    height: 100%;
    min-height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-right: 1px solid var(--border-color);
    cursor: pointer;
  }
  .trade-select-row__box {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 6px;
    background: var(--medium-bg);
  }
  .trade-select-row__check input:checked + .trade-select-row__box {
    background: var(--purple-btn-bg);
    border-color: var(--purple-btn-bg);
  }
  /* -------------------------------------------------------
     Контент
     ------------------------------------------------------- */
  .trade-select-row__content {
    min-width: 0;
  }
  .trade-select-row__content .trade__list-item {
    display: flex;
    align-items: flex-start;
    width: 100%;
    min-height: 86px;
    margin: 0;
    padding: 13px 12px;
    border-radius: 0;
    background: transparent;
    overflow: visible;
  }
  .trade-select-row__content .trade__list-item:hover {
    background: transparent;
  }
  /* -------------------------------------------------------
     Аватар
     ------------------------------------------------------- */
  .trade__list-image {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    margin: 1px 10px 0 0;
  }
  .trade__list-image img {
    width: 42px;
    height: 42px;
    display: block;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 50%;
  }
  /* -------------------------------------------------------
     Текстовая часть
     ------------------------------------------------------- */
  .trade__list-info {
    width: 100%;
    min-width: 0;
  }
  /*
   * Самое важное исправление:
   * дата больше не пытается поместиться
   * справа от "Предложение обмена".
   */
  .trade__list-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 4px 6px;
    min-width: 0;
    margin-bottom: 6px;
    padding-right: 18px;
    color: var(--secondary-text-color);
    font-size: 12px;
    line-height: 1.25;
  }
  /*
   * Точка статуса остаётся справа,
   * но больше не отнимает ширину текста.
   */
  .trade__list-dot {
    position: absolute;
    top: 4px;
    right: 0;
    width: 8px;
    height: 8px;
    flex: none;
  }
  /*
   * Дата — отдельная строка.
   */
  .trade__list-date {
    order: 20;
    width: 100%;
    margin-left: 0;
    padding: 0;
    color: var(--secondary-text-color);
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
  }
  /*
   * Имя пользователя.
   * Не режем его искусственно в 250px,
   * как на desktop.
   */
  .trade__list-name {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    color: var(--main-text-color);
    font-size: 14px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .trade__list-name a {
    max-width: 100%;
    overflow: hidden;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
/* ==========================================================
   ОЧЕНЬ МАЛЕНЬКИЕ ЭКРАНЫ
   ========================================================== */
@media screen and (max-width: 380px) {
  /*
   * На реально узких телефонах не мучаем
   * две кнопки в одной строке.
   */
  .trade__bulk-form {
    grid-template-columns: 1fr;
  }
  .trade__bulk-form .button {
    font-size: 13px;
  }
  .trade-select-row {
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .trade-select-row__check {
    width: 34px;
    min-height: 82px;
  }
  .trade-select-row__content .trade__list-item {
    min-height: 82px;
    padding: 12px 10px;
  }
  .trade__list-image {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    margin-right: 9px;
  }
  .trade__list-image img {
    width: 38px;
    height: 38px;
  }
  .trade__list-header {
    font-size: 11.5px;
  }
  .trade__list-name {
    font-size: 13.5px;
  }
}
@media screen and (max-width: 600px) {
  .trade__list-header {
    -moz-column-gap: 2px;
         column-gap: 2px;
    row-gap: 3px;
  }
  .trade__list-header > i {
    margin-right: 0 !important;
  }
}
@media screen and (max-width: 600px) {
  .trade-select-row__content .trade__list-item {
    align-items: stretch;
  }
  .trade__list-image {
    align-self: center;
    margin-top: 0;
  }
  .trade__list-info {
    align-self: center;
  }
}
/* ==========================================================
   TRADE PRESET MESSAGES
   ========================================================== */
.trade-message-picker {
  width: 100%;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--dark-grey-bg);
}
.trade-message-picker__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.trade-message-picker__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--main-text-color);
}
.trade-message-picker__optional {
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--medium-bg);
  color: var(--secondary-text-color);
  font-size: 10px;
  line-height: 1;
}
.trade-message-picker__text {
  margin-bottom: 10px;
  color: var(--secondary-text-color);
  font-size: 12px;
  line-height: 1.4;
}
.trade-message-picker__select {
  width: 100%;
  min-height: 42px;
  margin: 0;
  cursor: pointer;
}
.trade-message-picker--reason {
  margin-top: 0;
  margin-bottom: 12px;
}

/* ==========================================================
   SAVED MESSAGE / REASON
   ========================================================== */
.trade-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  margin-bottom: 16px;
  padding: 13px 14px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--light-bg);
}
.trade-note__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  background: rgba(119, 44, 232, 0.1);
  color: var(--main-purple-color);
  font-size: 19px;
}
.trade-note__content {
  min-width: 0;
  flex: 1;
}
.trade-note__label {
  margin-bottom: 3px;
  color: var(--secondary-text-color);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.trade-note__text {
  color: var(--main-text-color);
  font-size: 14px;
  line-height: 1.4;
}
.trade-note--reason .trade-note__icon {
  background: rgba(210, 85, 85, 0.09);
  color: #cf6262;
}

body.dark .trade-message-picker,
body.dark .trade-note {
  border-color: rgba(255, 255, 255, 0.07);
}
body.dark .trade-note__icon {
  background: rgba(139, 65, 246, 0.16);
}
body.dark .trade-note--reason .trade-note__icon {
  background: rgba(194, 74, 84, 0.13);
  color: #df8189;
}

@media screen and (max-width: 600px) {
  .trade-message-picker {
    padding: 12px;
    border-radius: 12px;
  }
  .trade-message-picker__select {
    min-height: 44px;
    font-size: 14px;
  }
  .trade-note {
    gap: 9px;
    padding: 11px 12px;
    border-radius: 12px;
  }
  .trade-note__icon {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
    font-size: 17px;
  }
  .trade-note__text {
    font-size: 13px;
  }
}
.trade-message-picker select.trade-message-picker__select {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  min-height: 42px;
  margin: 0;
}

.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;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  background: linear-gradient(155deg, rgba(32, 39, 48, 0.97), rgba(13, 18, 25, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.25);
  color: #f4f6fa;
  overflow: hidden;
  animation: deck-selector-enter 0.18s ease-out;
}
.deck-selector__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding-bottom: 7px;
  flex-shrink: 0;
}
.deck-selector__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.deck-selector__close {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #c0c9d7;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
.deck-selector__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #526075 transparent;
}
.deck-selector__list::-webkit-scrollbar {
  width: 3px;
}
.deck-selector__list::-webkit-scrollbar-thumb {
  background: #526075;
  border-radius: 3px;
}
.deck-selector__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  min-height: 34px;
  margin: 0 0 5px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  color: #e2e7ef;
  text-align: left;
  font: inherit;
  font-size: 12px;
  line-height: 1.3;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.deck-selector__btn--active {
  background: rgba(69, 211, 156, 0.14);
  border-color: rgba(100, 226, 176, 0.38);
  color: #a1f2cb;
}
.deck-selector__btn:disabled {
  opacity: 0.55;
  cursor: wait;
}
.deck-selector__btn--added {
  animation: deck-selector-add 0.45s ease-out;
}
.deck-selector__btn--removed {
  animation: deck-selector-remove 0.45s ease-out;
}
.deck-selector__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.deck-selector__check {
  position: relative;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border: 1px solid #657083;
  border-radius: 5px;
  transition: background 0.18s, border-color 0.18s;
}
.deck-selector__check::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 4px;
  width: 4px;
  height: 7px;
  border: solid #102a22;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.2s;
}
.deck-selector__btn--active .deck-selector__check {
  background: #75e5b2;
  border-color: #75e5b2;
}
.deck-selector__btn--active .deck-selector__check::after {
  transform: rotate(45deg) scale(1);
}
.deck-selector__status {
  flex-shrink: 0;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 10px;
  line-height: 1.4;
  color: #9caabd;
}
.deck-selector__status--added {
  color: #91edbd;
}
.deck-selector__status--removed {
  color: #f6c28b;
}
.deck-selector__empty {
  display: block;
  padding: 8px 0;
  color: #a1f2cb;
  font-size: 12px;
}
.deck-selector__btn:focus-visible, .deck-selector__close:focus-visible, .deck-selector__empty:focus-visible {
  outline: 2px solid #a1f2cb;
  outline-offset: -2px;
}

@media (hover: hover) {
  .deck-selector__btn:hover {
    background: rgba(255, 255, 255, 0.12);
  }
  .deck-selector__btn--active:hover {
    background: rgba(69, 211, 156, 0.23);
  }
  .deck-selector__close:hover {
    background: rgba(255, 255, 255, 0.16);
  }
}
@keyframes deck-selector-enter {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes deck-selector-add {
  35% {
    background: rgba(69, 211, 156, 0.4);
    box-shadow: inset 0 0 0 1px #75e5b2;
  }
}
@keyframes deck-selector-remove {
  35% {
    background: rgba(243, 174, 104, 0.24);
    border-color: #f6c28b;
  }
}
@media (prefers-reduced-motion: reduce) {
  .deck-selector, .deck-selector__btn {
    animation: none;
  }
  .deck-selector__btn, .deck-selector__check, .deck-selector__check::after {
    transition: none;
  }
}
.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;
  }
}
.deck-modern__action--bump {
  width: auto;
  padding: 0 12px;
  gap: 6px;
  white-space: nowrap;
}

.deck__bump-arrow {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-1px);
}

.deck__bump-btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.deck-editor {
  width: 100%;
}
.deck-editor__inner {
  width: min(100%, 980px);
  margin: 0 auto;
}
.deck-editor__heading {
  margin-bottom: 28px;
  text-align: center;
}
.deck-editor__eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 10px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(119, 44, 232, 0.1);
  color: #8b4bea;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.deck-editor__title {
  margin: 0;
  color: var(--main-text-color);
  font-size: 34px;
  line-height: 1.15;
  font-weight: 750;
}
.deck-editor__subtitle {
  margin-top: 8px;
  color: var(--secondary-text-color);
  font-size: 14px;
  line-height: 1.5;
}
.deck-editor__panel {
  position: relative;
  margin-bottom: 18px;
  padding: 22px;
  border: 1px solid rgba(120, 120, 120, 0.11);
  border-radius: 22px;
  background: var(--light-bg);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.035);
}
.deck-editor__panel-header, .deck-editor__cards-header, .deck-editor__inventory-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 18px;
}
.deck-editor__panel-title {
  color: var(--main-text-color);
  font-size: 17px;
  line-height: 1.2;
  font-weight: 700;
}
.deck-editor__panel-subtitle {
  margin-top: 4px;
  color: var(--secondary-text-color);
  font-size: 12px;
  line-height: 1.45;
}
.deck-editor__field {
  margin-bottom: 14px;
}
.deck-editor__label {
  display: block;
  margin: 0 0 7px 2px;
  color: var(--secondary-text-color);
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
}
.deck-editor .deck__create-name {
  margin: 0;
}
.deck-editor .deck__create-name input {
  display: block;
  width: 100%;
  margin: 0;
  padding: 14px 15px;
  border: 1px solid rgba(120, 120, 120, 0.15);
  border-radius: 13px;
  outline: none;
  background: var(--medium-bg);
  color: var(--main-text-color);
  font-size: 15px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.deck-editor .deck__create-name input::-moz-placeholder {
  color: var(--secondary-text-color);
}
.deck-editor .deck__create-name input::placeholder {
  color: var(--secondary-text-color);
}
.deck-editor .deck__create-name input:focus {
  border-color: rgba(119, 44, 232, 0.55);
  box-shadow: 0 0 0 3px rgba(119, 44, 232, 0.09);
}
.deck-editor .deck__create-description {
  margin: 0;
}
.deck-editor .deck__create-description textarea {
  display: block;
  width: 100%;
  min-height: 110px;
  margin: 0;
  padding: 14px 15px;
  border: 1px solid rgba(120, 120, 120, 0.15);
  border-radius: 13px;
  outline: none;
  background: var(--medium-bg);
  color: var(--main-text-color);
  font-size: 14px;
  line-height: 1.55;
  resize: vertical;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.deck-editor .deck__create-description textarea::-moz-placeholder {
  color: var(--secondary-text-color);
}
.deck-editor .deck__create-description textarea::placeholder {
  color: var(--secondary-text-color);
}
.deck-editor .deck__create-description textarea:focus {
  border-color: rgba(119, 44, 232, 0.55);
  box-shadow: 0 0 0 3px rgba(119, 44, 232, 0.09);
}
.deck-editor__warning {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 !important;
  padding: 12px 14px !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, rgba(119, 44, 232, 0.12), rgba(160, 90, 255, 0.07)) !important;
  color: var(--main-text-color) !important;
  text-align: left !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}
.deck-editor__warning strong {
  display: block;
  margin-bottom: 2px;
  color: var(--main-text-color);
  font-size: 13px;
  font-weight: 700;
}
.deck-editor__warning span {
  display: block;
  color: var(--secondary-text-color);
  line-height: 1.4;
}
.deck-editor__warning-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #7b35e7;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
}
.deck-editor__settings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.deck-editor__setting {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(120, 120, 120, 0.11);
  border-radius: 14px;
  background: var(--medium-bg);
}
.deck-editor__setting-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--light-bg);
  color: #8c4be9;
  font-size: 15px;
  font-weight: 700;
}
.deck-editor__setting-content {
  min-width: 0;
  flex: 1;
}
.deck-editor__setting-content > label {
  display: block;
  margin: 0 0 5px;
  color: var(--secondary-text-color);
  font-size: 10px;
  line-height: 1;
  font-weight: 600;
}
.deck-editor__setting-content .default-select {
  width: 100%;
  margin: 0;
  border: none !important;
  background: transparent;
  color: var(--main-text-color);
  font-size: 13px;
  font-weight: 600;
}
.deck-editor__cards-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}
.deck-editor__counter {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  min-width: 68px;
  padding: 7px 10px;
  border-radius: 11px;
  background: var(--medium-bg);
  color: var(--secondary-text-color);
  font-size: 12px;
}
.deck-editor__counter strong {
  color: #8744eb;
  font-size: 17px;
  line-height: 1;
  font-weight: 800;
}
.deck-editor__progress {
  width: 100%;
  height: 4px;
  margin: -3px 0 15px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--medium-bg);
}
.deck-editor__progress-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7430e7, #a95cff);
  transition: width 0.25s ease;
}
.deck-editor__sort {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  color: var(--secondary-text-color);
  font-size: 11px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.deck-editor__sort input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.deck-editor__sort input:checked + .deck-editor__sort-switch {
  background: #7b35e7;
}
.deck-editor__sort input:checked + .deck-editor__sort-switch span {
  transform: translateX(14px);
}
.deck-editor__sort-switch {
  position: relative;
  display: inline-flex;
  width: 32px;
  height: 18px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(120, 120, 120, 0.3);
  transition: background 0.2s ease;
}
.deck-editor__sort-switch span {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease;
}
.deck-editor .deck__showcase {
  position: relative;
  min-height: 150px;
  margin: 0;
  padding: 12px;
  border-radius: 16px;
  background: var(--medium-bg);
}
.deck-editor .deck__showcase-list {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  gap: 10px;
  min-height: 126px;
  max-height: 390px;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
.deck-editor .deck__showcase-item {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 150%;
  aspect-ratio: auto;
  overflow: hidden;
  border-radius: 9px;
  background: var(--light-bg);
  cursor: pointer;
  transition: transform 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease;
}
.deck-editor .deck__showcase-item img,
.deck-editor .deck__showcase-item video {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: inherit !important;
}
.deck-editor .deck__showcase-item::after {
  content: "×";
  position: absolute;
  top: 5px;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  border-radius: 8px;
  background: rgba(15, 15, 15, 0.74);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.16s ease, transform 0.16s ease;
  pointer-events: none;
}
.deck-editor .deck__showcase-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.deck-editor .deck__showcase-item:hover::after {
  opacity: 1;
  transform: scale(1);
}
.deck-editor__empty {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  color: var(--secondary-text-color);
  pointer-events: none;
}
.deck-editor__empty strong {
  display: block;
  margin-bottom: 3px;
  color: var(--main-text-color);
  font-size: 13px;
}
.deck-editor__empty span {
  display: block;
  font-size: 11px;
}
.deck-editor__empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--light-bg);
  color: #8b4bea;
  font-size: 24px;
  font-weight: 300;
}
.deck-editor__inventory {
  margin-top: 24px;
}
.deck-editor__inventory-header {
  padding: 0 4px;
}
.deck-editor__increase {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 18px;
  padding: 15px 16px;
  border: 1px solid rgba(120, 120, 120, 0.11);
  border-radius: 17px;
  background: var(--light-bg);
}
.deck-editor__increase-info {
  display: flex;
  align-items: center;
  gap: 11px;
}
.deck-editor__increase-info strong {
  display: block;
  margin-bottom: 3px;
  color: var(--main-text-color);
  font-size: 13px;
}
.deck-editor__increase-info span {
  display: block;
  color: var(--secondary-text-color);
  font-size: 11px;
}
.deck-editor__increase-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(119, 44, 232, 0.11);
  color: #8848e9;
  font-size: 22px;
}
.deck-editor__increase-controls {
  margin: 0 !important;
  display: flex;
  align-items: stretch;
}
.deck-editor .deck__increase-price {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border-radius: 11px 0 0 11px;
  min-height: 42px;
}
.deck-editor .deck__increase-btn {
  min-height: 42px;
  border-radius: 0 11px 11px 0 !important;
}
.deck-editor__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(120, 120, 120, 0.11);
}
.deck-editor__footer-info {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--secondary-text-color);
  font-size: 11px;
}
.deck-editor__footer-dot {
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8a49ea;
}
.deck-editor__save {
  width: auto !important;
  min-width: 190px;
  padding: 12px 20px !important;
  border-radius: 12px !important;
  font-size: 14px;
  font-weight: 700;
}

.card-inventory-container--deck .card-filter-list__card {
  position: relative;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease, opacity 0.16s ease;
}
.card-inventory-container--deck .card-filter-list__card.card-filter-list__card--in-deck {
  z-index: 1;
  box-shadow: 0 0 0 2px #8b44ee, 0 0 0 5px rgba(139, 68, 238, 0.12);
  transform: translateZ(0);
}
.card-inventory-container--deck .card-filter-list__card.card-filter-list__card--in-deck img,
.card-inventory-container--deck .card-filter-list__card.card-filter-list__card--in-deck video {
  filter: brightness(0.82) saturate(0.82);
}
.card-inventory-container--deck .card-filter-list__card.card-filter-list__card--in-deck:hover {
  box-shadow: 0 0 0 2px #9955f5, 0 5px 18px rgba(106, 44, 194, 0.22);
}

.deck-inventory-badge {
  position: absolute;
  left: 50%;
  bottom: 7px;
  z-index: 50;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100% - 12px);
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(119, 44, 232, 0.94);
  color: #fff;
  box-shadow: 0 3px 12px rgba(75, 25, 150, 0.35);
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}

.deck-card-selected-animation {
  animation: deckCardSelected 0.42s ease;
}

@keyframes deckCardSelected {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(0.94);
  }
  75% {
    transform: scale(1.025);
  }
  100% {
    transform: scale(1);
  }
}
body.dark .deck-editor__panel, body.dark .deck-editor__increase {
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: none;
}
body.dark .deck-editor__setting {
  border-color: rgba(255, 255, 255, 0.06);
}
body.dark .deck-editor__footer {
  border-color: rgba(255, 255, 255, 0.07);
}
body.dark .deck-editor .deck__create-name input,
body.dark .deck-editor .deck__create-description textarea {
  border-color: rgba(255, 255, 255, 0.08);
}
body.dark .deck-editor__warning {
  background: linear-gradient(135deg, rgba(139, 68, 238, 0.18), rgba(139, 68, 238, 0.07)) !important;
}
body.dark .card-inventory-container--deck .card-filter-list__card.card-filter-list__card--in-deck {
  box-shadow: 0 0 0 2px #9b5af4, 0 0 0 5px rgba(155, 90, 244, 0.14);
}
body.dark .card-inventory-container--deck .card-filter-list__card.card-filter-list__card--in-deck:hover {
  box-shadow: 0 0 0 2px #aa70fa, 0 5px 20px rgba(117, 56, 202, 0.27);
}

@media screen and (max-width: 800px) {
  .deck-editor__settings {
    grid-template-columns: 1fr;
  }
  .deck-editor .deck__showcase-list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media screen and (max-width: 600px) {
  .deck-editor__inner {
    width: 100%;
  }
  .deck-editor__heading {
    margin-bottom: 20px;
  }
  .deck-editor__eyebrow {
    min-height: 24px;
    margin-bottom: 7px;
    padding: 4px 9px;
    font-size: 10px;
  }
  .deck-editor__title {
    font-size: 27px;
  }
  .deck-editor__subtitle {
    padding: 0 15px;
    font-size: 12px;
  }
  .deck-editor__panel {
    padding: 14px;
    border-radius: 17px;
  }
  .deck-editor__panel-header {
    margin-bottom: 15px;
  }
  .deck-editor__panel-title {
    font-size: 16px;
  }
  .deck-editor__panel-subtitle {
    font-size: 11px;
  }
  .deck-editor__settings {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .deck-editor__setting {
    padding: 9px;
  }
  .deck-editor__setting-icon {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
  }
  .deck-editor__cards-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 11px;
  }
  .deck-editor__cards-tools {
    width: 100%;
    justify-content: space-between;
  }
  .deck-editor .deck__showcase {
    min-height: 135px;
    padding: 9px;
    border-radius: 14px;
  }
  .deck-editor .deck__showcase-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    min-height: 115px;
    max-height: 350px;
  }
  .deck-editor .deck__showcase-item {
    border-radius: 7px;
  }
  .deck-editor .deck__showcase-item::after {
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    font-size: 15px;
    opacity: 1;
    transform: none;
  }
  .deck-editor__empty {
    padding: 15px;
  }
  .deck-editor__empty strong {
    font-size: 12px;
  }
  .deck-editor__empty span {
    font-size: 10px;
  }
  .deck-editor__empty-icon {
    width: 34px;
    height: 34px;
    font-size: 21px;
  }
  .deck-editor__inventory {
    margin-top: 20px;
  }
  .deck-editor__increase {
    align-items: stretch;
    flex-direction: column;
    padding: 13px;
  }
  .deck-editor__increase-controls {
    width: 100%;
  }
  .deck-editor .deck__increase-btn {
    flex: 1;
  }
  .deck-editor__footer {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }
  .deck-editor__footer-info {
    justify-content: center;
    text-align: center;
  }
  .deck-editor__save {
    width: 100% !important;
  }
  .card-inventory-container--deck .card-filter-list__card.card-filter-list__card--in-deck {
    box-shadow: 0 0 0 2px #8b44ee, 0 0 0 3px rgba(139, 68, 238, 0.12);
  }
  .deck-inventory-badge {
    bottom: 5px;
    padding: 4px 6px;
    font-size: 8px;
  }
}
@media screen and (max-width: 420px) {
  .deck-editor__title {
    font-size: 24px;
  }
  .deck-editor__subtitle {
    padding: 0 8px;
  }
  .deck-editor__panel {
    padding: 12px;
  }
  .deck-editor__sort > span:last-child {
    display: none;
  }
  .deck-editor__counter {
    min-width: 62px;
    padding: 6px 8px;
  }
  .deck-editor__counter strong {
    font-size: 16px;
  }
}
@media screen and (max-width: 480px) {
  .deck-editor .deck__showcase-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.deck-skin-preview {
  position: relative;
  z-index: 80;
  padding: 10px 0;
  background: #15131a;
  color: #fff;
}
.deck-skin-preview__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.deck-skin-preview__inner strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
}
.deck-skin-preview__inner span {
  display: block;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 11px;
}
.deck-skin-preview__close {
  flex-shrink: 0;
  padding: 7px 11px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.deck-skin-preview__close:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

@media screen and (max-width: 600px) {
  .deck-skin-preview__inner {
    align-items: flex-start;
  }
  .deck-skin-preview__close {
    font-size: 10px;
  }
}
.deck-skins {
  --skin-1: #17121d;
  --skin-2: #472068;
  --skin-3: #7b35e7;
  --skin-4: #d9c7ff;
  padding: 0 !important;
  overflow: hidden;
}
.deck-skins__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 20px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--main-text-color);
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease;
}
.deck-skins__toggle:hover {
  background: rgba(119, 44, 232, 0.04);
}
.deck-skins__toggle-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.deck-skins__toggle-icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(119, 44, 232, 0.14), rgba(169, 92, 255, 0.08));
  color: #8746ea;
  font-size: 18px;
  line-height: 1;
}
.deck-skins__toggle-text {
  min-width: 0;
}
.deck-skins__toggle-text strong {
  display: block;
  color: var(--main-text-color);
  font-size: 15px;
  line-height: 19px;
  font-weight: 750;
}
.deck-skins__toggle-text small {
  display: block;
  overflow: hidden;
  max-width: 560px;
  margin-top: 3px;
  color: var(--secondary-text-color);
  font-size: 11px;
  line-height: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.deck-skins__toggle-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.deck-skins__current-label {
  color: var(--secondary-text-color);
  font-size: 10px;
  font-weight: 600;
}
.deck-skins__current-name {
  max-width: 180px;
  overflow: hidden;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--medium-bg);
  color: var(--main-text-color);
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.deck-skins__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--secondary-text-color);
  font-size: 27px;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 0.2s ease, color 0.2s ease;
}
.deck-skins--open .deck-skins__toggle {
  background: rgba(119, 44, 232, 0.025);
}
.deck-skins--open .deck-skins__chevron {
  color: #8746ea;
  transform: rotate(90deg);
}
.deck-skins__collapse {
  display: none;
  padding: 18px 20px 20px;
  border-top: 1px solid rgba(120, 120, 120, 0.1);
}
.deck-skins__collapse-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 15px;
}
.deck-skins__collapse-head strong {
  display: block;
  color: var(--main-text-color);
  font-size: 13px;
  font-weight: 700;
}
.deck-skins__collapse-head > div:first-child > span {
  display: block;
  margin-top: 3px;
  color: var(--secondary-text-color);
  font-size: 10px;
  line-height: 1.4;
}
.deck-skins__price-hint {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--medium-bg);
  color: var(--main-text-color);
  font-size: 11px;
  font-weight: 700;
}
.deck-skins__price-hint > span:last-child {
  color: var(--secondary-text-color);
  font-weight: 500;
}
.deck-skins__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.deck-skins__item {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(120, 120, 120, 0.12);
  border-radius: 17px;
  background: var(--medium-bg);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.deck-skins__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 25px rgba(0, 0, 0, 0.08);
}
.deck-skins__item--active {
  border-color: rgba(119, 44, 232, 0.55);
  box-shadow: 0 0 0 3px rgba(119, 44, 232, 0.08);
}
.deck-skins__preview {
  position: relative;
  height: 104px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 82% 15%, color-mix(in srgb, var(--skin-3) 44%, transparent), transparent 40%), linear-gradient(135deg, var(--skin-1), var(--skin-2));
}
.deck-skins__preview-panel {
  width: 70%;
  min-height: 66px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: color-mix(in srgb, var(--skin-4) 18%, transparent);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}
.deck-skins__preview-panel--default {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(25, 25, 30, 0.08);
}
.deck-skins__preview-title {
  color: var(--skin-4);
  font-size: 16px;
  line-height: 1;
  font-weight: 800;
}
.deck-skins__default-logo {
  color: #18181d;
  font-size: 18px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.06em;
}
.deck-skins__default-logo span {
  color: #7b35e7;
}
.deck-skins__preview-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-top: 13px;
}
.deck-skins__preview-row span {
  display: block;
  height: 22px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--skin-4) 25%, transparent);
}
.deck-skins__preview-panel--default .deck-skins__preview-row span {
  background: #ececf2;
}
.deck-skins__palette {
  position: absolute;
  right: 9px;
  bottom: 8px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(10, 10, 15, 0.26);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}
.deck-skins__palette span {
  display: block;
  width: 11px;
  height: 11px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
}
.deck-skins__palette span:nth-child(1) {
  background: var(--skin-1);
}
.deck-skins__palette span:nth-child(2) {
  background: var(--skin-2);
}
.deck-skins__palette span:nth-child(3) {
  background: var(--skin-3);
}
.deck-skins__palette span:nth-child(4) {
  background: var(--skin-4);
}
.deck-skins__body {
  padding: 13px;
}
.deck-skins__name {
  color: var(--main-text-color);
  font-size: 14px;
  font-weight: 750;
}
.deck-skins__description {
  min-height: 34px;
  margin-top: 5px;
  color: var(--secondary-text-color);
  font-size: 11px;
  line-height: 1.45;
}
.deck-skins__status {
  min-height: 24px;
  display: flex;
  align-items: center;
  margin-top: 9px;
}
.deck-skins__price {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--main-text-color);
  font-size: 13px;
  font-weight: 750;
}
.deck-skins__owned {
  color: #28a96b;
  font-size: 11px;
  font-weight: 700;
}
.deck-skins__actions {
  display: flex;
  gap: 7px;
  margin-top: 10px;
}
.deck-skins__actions .button {
  flex: 1;
  min-width: 0;
  padding: 9px 8px !important;
  border-radius: 10px !important;
  font-size: 11px;
  text-align: center;
}
.deck-skins__preview-btn {
  border: 1px solid rgba(119, 44, 232, 0.2);
  background: transparent;
  color: var(--main-purple-color);
}
.deck-skins__preview-btn:hover {
  color: var(--main-purple-color);
  background: rgba(119, 44, 232, 0.07);
}
.deck-skins__item--default {
  --skin-1: #f7f7fa;
  --skin-2: #ffffff;
  --skin-3: #7b35e7;
  --skin-4: #18181d;
}
.deck-skins__item--soft {
  --skin-1: #f5efff;
  --skin-2: #e7dcff;
  --skin-3: #9b6cff;
  --skin-4: #ffffff;
}
.deck-skins__item--neon {
  --skin-1: #030617;
  --skin-2: #111a48;
  --skin-3: #00d9ff;
  --skin-4: #9a5cff;
}
.deck-skins__item--glass {
  --skin-1: #7fa0ff;
  --skin-2: #d3a7ff;
  --skin-3: #ffb6d1;
  --skin-4: #ffffff;
}
.deck-skins__item--gold {
  --skin-1: #090806;
  --skin-2: #2a2117;
  --skin-3: #d8a84d;
  --skin-4: #f7e5b8;
}
.deck-skins__item--manga {
  --skin-1: #f5f0e6;
  --skin-2: #d9d2c6;
  --skin-3: #111111;
  --skin-4: #ffffff;
}
.deck-skins__item--blueprint {
  --skin-1: #07266b;
  --skin-2: #0c4ba2;
  --skin-3: #74c7ff;
  --skin-4: #ffffff;
}
.deck-skins__item--newspaper {
  --skin-1: #eee8dc;
  --skin-2: #cfc6b6;
  --skin-3: #7f1d1d;
  --skin-4: #161616;
}
.deck-skins__item--terminal {
  --skin-1: #020603;
  --skin-2: #07180d;
  --skin-3: #32ff74;
  --skin-4: #b8ffc7;
}
.deck-skins__item--comic {
  --skin-1: #ffdc3e;
  --skin-2: #ff5f6d;
  --skin-3: #2f65ff;
  --skin-4: #ffffff;
}
.deck-skins__item--notebook {
  --skin-1: #fffdf5;
  --skin-2: #dceaff;
  --skin-3: #ef5570;
  --skin-4: #24334a;
}
.deck-skins__item--dossier {
  --skin-1: #bea46f;
  --skin-2: #6f5631;
  --skin-3: #b33428;
  --skin-4: #f1dfae;
}
.deck-skins__item--polaroid {
  --skin-1: #f9f5ec;
  --skin-2: #d9d1c5;
  --skin-3: #719bb9;
  --skin-4: #ffffff;
}
.deck-skins__item--hud {
  --skin-1: #03171a;
  --skin-2: #06353b;
  --skin-3: #39f2e3;
  --skin-4: #b7fff8;
}
.deck-skins__item--industrial {
  --skin-1: #181a1c;
  --skin-2: #34383c;
  --skin-3: #f2c037;
  --skin-4: #f5f5f5;
}
.deck-skins__item--arcade {
  --skin-1: #19082f;
  --skin-2: #071330;
  --skin-3: #ff4bd1;
  --skin-4: #2ffff2;
}
.deck-skins__item--noir {
  --skin-1: #090909;
  --skin-2: #323232;
  --skin-3: #8d8d8d;
  --skin-4: #ffffff;
}
.deck-skins__item--museum {
  --skin-1: #f1eadc;
  --skin-2: #c9b896;
  --skin-3: #775b36;
  --skin-4: #2b241c;
}
.deck-skins__item--sticker {
  --skin-1: #ffeff8;
  --skin-2: #dff8ff;
  --skin-3: #ff65a6;
  --skin-4: #5639df;
}
.deck-skins__item--gridpaper {
  --skin-1: #f4fbff;
  --skin-2: #cce5f3;
  --skin-3: #4a92bc;
  --skin-4: #17384d;
}
.deck-skins__item--origami {
  --skin-1: #ffe9df;
  --skin-2: #d8c9ff;
  --skin-3: #ee735d;
  --skin-4: #563b8c;
}
.deck-skins__item--retroos {
  --skin-1: #008080;
  --skin-2: #c0c0c0;
  --skin-3: #000080;
  --skin-4: #ffffff;
}
.deck-skins__item--cassette {
  --skin-1: #27242a;
  --skin-2: #d4a65b;
  --skin-3: #db4d67;
  --skin-4: #f6e7c8;
}
.deck-skins__item--postal {
  --skin-1: #f4e6ce;
  --skin-2: #d8c09a;
  --skin-3: #c34d4d;
  --skin-4: #355b8c;
}
.deck-skins__item--academia {
  --skin-1: #19130f;
  --skin-2: #392b20;
  --skin-3: #9b774a;
  --skin-4: #e9d5b0;
}
.deck-skins__item--shadowmonarch {
  --skin-1: #05030d;
  --skin-2: #17092f;
  --skin-3: #7b35ff;
  --skin-4: #6bdcff;
}
.deck-skins__item--tarot {
  --skin-1: #080b21;
  --skin-2: #1f1a45;
  --skin-3: #cda95b;
  --skin-4: #eee0a8;
}
.deck-skins__item--holofoil {
  --skin-1: #9de7ff;
  --skin-2: #f1b4ff;
  --skin-3: #83ffd4;
  --skin-4: #ffffff;
}
.deck-skins__item--shoji {
  --skin-1: #f3eee3;
  --skin-2: #cdbfa8;
  --skin-3: #b72727;
  --skin-4: #1e1b18;
}
.deck-skins__item--celestial {
  --skin-1: #07101f;
  --skin-2: #172f50;
  --skin-3: #bb8a54;
  --skin-4: #d8e8ff;
}
.deck-skins__item--softtoy {
  --skin-1: #f1d7ff;
  --skin-2: #bde6ff;
  --skin-3: #ff8dbc;
  --skin-4: #ffffff;
}
.deck-skins__item--runestone {
  --skin-1: #151817;
  --skin-2: #363b33;
  --skin-3: #d19a45;
  --skin-4: #f3d295;
}
.deck-skins__item--velvet {
  --skin-1: #220810;
  --skin-2: #59192b;
  --skin-3: #b98a4a;
  --skin-4: #f8e7c8;
}

body.dark .deck-skins__toggle:hover, body.dark .deck-skins--open .deck-skins__toggle {
  background: rgba(155, 90, 244, 0.055);
}
body.dark .deck-skins__collapse {
  border-color: rgba(255, 255, 255, 0.07);
}
body.dark .deck-skins__item {
  border-color: rgba(255, 255, 255, 0.07);
}

@media screen and (max-width: 800px) {
  .deck-skins__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .deck-skins__toggle-text small {
    max-width: 390px;
  }
}
@media screen and (max-width: 600px) {
  .deck-skins__toggle {
    padding: 14px;
  }
  .deck-skins__toggle-icon {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 16px;
  }
  .deck-skins__toggle-text strong {
    font-size: 14px;
  }
  .deck-skins__toggle-text small {
    max-width: 230px;
    font-size: 10px;
  }
  .deck-skins__current-label {
    display: none;
  }
  .deck-skins__current-name {
    max-width: 105px;
    padding: 6px 8px;
    font-size: 10px;
  }
  .deck-skins__chevron {
    width: 22px;
    height: 22px;
  }
  .deck-skins__collapse {
    padding: 14px;
  }
  .deck-skins__collapse-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }
}
@media screen and (max-width: 520px) {
  .deck-skins__list {
    grid-template-columns: 1fr;
  }
  .deck-skins__preview {
    height: 110px;
  }
  .deck-skins__actions .button {
    min-height: 39px;
  }
}
@media screen and (max-width: 420px) {
  .deck-skins__toggle {
    gap: 8px;
  }
  .deck-skins__toggle-main {
    gap: 9px;
  }
  .deck-skins__toggle-text small {
    display: none;
  }
  .deck-skins__current-name {
    max-width: 90px;
  }
}
.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;
}
@media screen and (max-width: 460px) {
  .club-request__name {
    text-align: center;
    margin-top: 10px;
  }
}
.club-request__status {
  font-size: 14px;
  color: var(--secondary-text-color);
}
.club-request__avatar {
  margin-right: 10px;
  width: 25px;
  height: 25px;
  flex-shrink: 0;
}
@media screen and (max-width: 460px) {
  .club-request__avatar {
    margin-right: 0;
  }
}
.club-request__avatar img {
  border-radius: 50%;
}
.club-request__controls {
  margin-left: auto;
  display: flex;
}
@media screen and (max-width: 460px) {
  .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: 460px) {
  .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__inner--rules {
  align-items: stretch;
  padding: 18px;
}
.club-boost__inner--notifications {
  align-items: stretch;
  padding: 0;
}
.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 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.club-boost__rule {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.club-boost__rule-icon, .club-boost__notification-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: var(--main-purple-color);
  background: rgba(139, 0, 255, 0.07);
}
.club-boost__rule-icon svg, .club-boost__notification-icon svg {
  width: 21px;
  height: 21px;
}
.club-boost__rule-label {
  margin-bottom: 4px;
  font-size: 13px;
  line-height: 18px;
  color: var(--secondary-text-color);
}
.club-boost__rule-value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 7px;
  font-size: 12px;
  line-height: 18px;
  color: var(--secondary-text-color);
}
.club-boost__rule-value strong {
  font-size: 24px;
  line-height: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--title-color);
}
.club-boost__rule-note {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--chapters-hover);
  color: var(--secondary-text-color);
  font-size: 13px;
  line-height: 18px;
}
.club-boost__rule-note svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.club-boost__notification {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
}
.club-boost__notification-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.club-boost__notification-title {
  color: var(--title-color);
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
}
.club-boost__notification-hint {
  color: var(--secondary-text-color);
  font-size: 13px;
  line-height: 18px;
}
.club-boost__notification-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.club-boost__notification-switch {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  height: 26px;
  border-radius: 20px;
  background: var(--border-color);
  transition: background-color 160ms ease;
}
.club-boost__notification-switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
  transition: transform 160ms ease;
}
.club-boost__notification-input:checked + .club-boost__notification-switch {
  background: var(--purple-btn-bg);
}
.club-boost__notification-input:checked + .club-boost__notification-switch::before {
  transform: translateX(18px);
}
.club-boost__notification-input:focus-visible + .club-boost__notification-switch {
  outline: 2px solid var(--main-purple-color);
  outline-offset: 3px;
}
@media (max-width: 520px) {
  .club-boost__rules {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .club-boost__notification {
    padding: 14px;
    gap: 10px;
  }
  .club-boost__notification-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .club-boost__notification-switch, .club-boost__notification-switch::before {
    transition: none;
  }
}
.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(--medium-bg);
  border: none;
  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__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--contributions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}
.club-history__entry {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--medium-bg);
}
.club-history__entry-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 78px;
}
.club-history__entry-media > img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 6px;
}
.club-history__entry-media--crystal {
  padding: 5px;
  border-radius: 10px;
  background: rgba(139, 0, 255, 0.06);
}
.club-history__entry-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.club-history__entry-title {
  color: var(--title-color);
  font-size: 15px;
  line-height: 21px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.club-history__entry-author {
  display: flex;
  align-items: center;
  gap: 7px;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  color: var(--secondary-text-color);
  font-size: 13px;
  line-height: 20px;
}
.club-history__entry-author img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.club-history__entry-author span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.club-history__entry-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.club-history__entry-kind {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--chapters-hover);
  color: var(--secondary-text-color);
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
}
.club-history__entry-kind--crystal {
  color: var(--secondary-purple-color);
  background: rgba(139, 0, 255, 0.08);
}
.club-history__entry-kind--auto {
  color: var(--green-color);
  background: rgba(0, 153, 51, 0.08);
}
.club-history__entry-date {
  color: var(--secondary-text-color);
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.club-history__empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--secondary-text-color);
  font-size: 14px;
}
@media (max-width: 560px) {
  .club-history__entry {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 8px 12px;
    padding: 12px;
  }
  .club-history__entry-media {
    grid-row: span 2;
    width: 48px;
    height: 68px;
  }
  .club-history__entry-main {
    gap: 5px;
  }
  .club-history__entry-meta {
    grid-column: 2;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 8px;
  }
}
.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-edit {
  max-width: 920px;
  margin: 0 auto;
  padding: 16px 0 30px;
}
.alliance-edit__title {
  margin-bottom: 18px;
}
.alliance-edit__panel, .alliance-edit__media-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.04);
}
.alliance-edit__panel {
  padding: 18px;
  margin-bottom: 20px;
}
.alliance-edit__row {
  margin-bottom: 12px;
}
.alliance-edit__label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  color: #555;
}
.alliance-edit .form__field {
  width: 100%;
  max-width: 100%;
  border-radius: 10px;
}
.alliance-edit__textarea {
  min-height: 82px;
  resize: vertical;
}
.alliance-edit__save {
  width: 100%;
  margin-top: 4px;
  border-radius: 10px;
}
.alliance-edit__media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.alliance-edit__media-card {
  padding: 18px;
  text-align: center;
}
.alliance-edit__media-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}
.alliance-edit__notice {
  display: inline-block;
  font-size: 13px;
  line-height: 1.35;
  color: #9a6b00;
  background: #fff6d8;
  border-radius: 8px;
  padding: 7px 10px;
  margin-bottom: 12px;
}
.alliance-edit__preview {
  display: block;
  width: 100%;
  max-width: 260px;
  height: 190px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 12px;
  margin: 0 auto 14px;
}
.alliance-edit__upload-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.alliance-edit__file {
  max-width: 320px !important;
}
.alliance-edit__upload-btn {
  border-radius: 10px;
  padding-left: 18px;
  padding-right: 18px;
}
@media (max-width: 760px) {
  .alliance-edit__media-grid {
    grid-template-columns: 1fr;
  }
  .alliance-edit__panel, .alliance-edit__media-card {
    padding: 14px;
  }
  .alliance-edit__preview {
    height: 170px;
  }
}

body.dark .alliance-edit__panel, body.dark .alliance-edit__media-card {
  background: #252526;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: none;
}
body.dark .alliance-edit__label {
  color: #cfcfcf;
}
body.dark .alliance-edit__media-title {
  color: #fff;
}
body.dark .alliance-edit__notice {
  background: rgba(255, 193, 7, 0.12);
  color: #ffd76a;
  border: 1px solid rgba(255, 193, 7, 0.25);
}
body.dark .alliance-edit__preview {
  background: rgba(255, 255, 255, 0.03);
}
body.dark .alliance-edit select.form__field,
body.dark .alliance-edit input.form__field,
body.dark .alliance-edit textarea.form__field {
  background: #1b1b1c;
  border-color: #3b3b3d;
  color: #fff;
}
body.dark .alliance-edit select.form__field:focus,
body.dark .alliance-edit input.form__field:focus,
body.dark .alliance-edit textarea.form__field:focus {
  border-color: var(--primary-color);
}
body.dark .alliance-edit select.form__field option {
  background: #1b1b1c;
  color: #fff;
}

.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;
}
.alliance__bonus-item[data-lvl="8"] .alliance__bonus-icon {
  background-color: #159c9a;
}
.alliance__bonus-item[data-lvl="9"] .alliance__bonus-icon {
  background-color: #772ce8;
}

.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;
  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__poster--crystal img {
  width: 56px;
  height: 64px;
  -o-object-fit: contain;
     object-fit: contain;
}
.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--crystal {
  color: var(--main-purple-color);
  background: rgba(139, 0, 255, 0.08);
}
.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: none;
  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: none;
  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: none;
  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: none;
  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: none;
  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;
}

.alliance-rewards {
  min-width: 0;
}
.alliance-rewards__header, .alliance-rewards__heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.alliance-rewards__header {
  justify-content: space-between;
}
.alliance-rewards__heading {
  flex: 1;
}
.alliance-rewards__heading > div:last-child {
  min-width: 0;
}
.alliance-rewards__badge {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #9758f2, #6328ce);
  color: #fff;
  font-size: 26px;
}
.alliance-rewards__eyebrow {
  margin-bottom: 3px;
  color: var(--secondary-text-color);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.alliance-rewards__title {
  margin: 0;
  color: var(--title-color);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}
.alliance-rewards__controls:not([hidden]) {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
}
.alliance-rewards__arrow {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--light-bg);
  color: var(--title-color);
  font-size: 22px;
  cursor: pointer;
}
.alliance-rewards__arrow:hover:not(:disabled) {
  background: rgba(119, 44, 232, 0.08);
  color: var(--secondary-purple-color);
}
.alliance-rewards__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}
.alliance-rewards__arrow:focus-visible {
  outline: 2px solid var(--purple-btn-bg);
  outline-offset: 2px;
}
.alliance-rewards__hint {
  margin: 12px 0 16px;
  color: var(--secondary-text-color);
  font-size: 13px;
  line-height: 1.5;
}
.alliance-rewards__progress {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--medium-bg);
}
.alliance-rewards__progress-header {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 9px;
  color: var(--secondary-text-color);
  font-size: 12px;
  line-height: 1.4;
}
.alliance-rewards__progress-header strong {
  margin-left: 4px;
  color: var(--title-color);
  font-weight: 600;
}
.alliance-rewards__progress-header span {
  font-variant-numeric: tabular-nums;
}
.alliance-rewards__bar {
  height: 7px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--border-color);
}
.alliance-rewards__bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #9758f2, #6368e9);
}
.alliance-rewards__list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 16px 0 12px;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(119, 44, 232, 0.25) transparent;
}
.alliance-rewards__list::-webkit-scrollbar {
  height: 5px;
}
.alliance-rewards__list::-webkit-scrollbar-thumb {
  background: rgba(119, 44, 232, 0.25);
  border-radius: 8px;
}
.alliance-rewards__list:focus-visible {
  outline: 2px solid var(--purple-btn-bg);
  outline-offset: 2px;
  border-radius: 12px;
}
.alliance-rewards__item {
  --reward-color: 119, 44, 232;
  display: flex;
  flex-direction: column;
  flex: 0 0 150px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--light-bg);
  text-align: center;
  scroll-snap-align: start;
}
.alliance-rewards__item[data-reward-type=essence] {
  --reward-color: 26, 153, 161;
}
.alliance-rewards__item[data-reward-type=dark_crystals] {
  --reward-color: 132, 73, 202;
}
.alliance-rewards__item[data-reward-type=crystal] {
  --reward-color: 83, 130, 218;
}
.alliance-rewards__item[data-reward-type=blessed_scroll] {
  --reward-color: 219, 153, 41;
}
.alliance-rewards__item[data-reward-type=card] {
  --reward-color: 212, 82, 141;
}
.alliance-rewards__item--next {
  border-color: rgba(119, 44, 232, 0.45);
  background: linear-gradient(160deg, rgba(119, 44, 232, 0.08), transparent 80%), var(--light-bg);
  box-shadow: inset 0 2px 0 rgba(119, 44, 232, 0.6);
}
.alliance-rewards__item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-height: 20px;
}
.alliance-rewards__number {
  color: var(--secondary-text-color);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.alliance-rewards__next {
  padding: 4px 6px;
  border-radius: 5px;
  background: var(--purple-btn-bg);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}
.alliance-rewards__image {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  height: 90px;
  margin: 6px 0;
  overflow: hidden;
  background: radial-gradient(ellipse at center, rgba(var(--reward-color), 0.16), transparent 68%);
  color: var(--secondary-purple-color);
  font-size: 36px;
}
.alliance-rewards__image img {
  display: block;
  width: 64px;
  max-width: 64px;
  height: 64px;
  max-height: 64px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 0;
  filter: drop-shadow(0 4px 5px rgba(var(--reward-color), 0.16));
}
.alliance-rewards__name {
  flex: 1;
  min-height: 40px;
  color: var(--title-color);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  overflow-wrap: anywhere;
}
.alliance-rewards__exp {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
  color: var(--secondary-text-color);
  font-size: 11px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.alliance-rewards__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 2px;
  color: var(--secondary-text-color);
  font-size: 11px;
  line-height: 1.5;
}
.alliance-rewards__footer .icon {
  font-size: 17px;
}
@media (max-width: 540px) {
  .alliance-rewards__header, .alliance-rewards__heading {
    gap: 8px;
  }
  .alliance-rewards__badge {
    flex-basis: 34px;
    height: 34px;
    font-size: 23px;
    border-radius: 10px;
  }
  .alliance-rewards__eyebrow {
    font-size: 10px;
  }
  .alliance-rewards__title {
    font-size: 17px;
  }
  .alliance-rewards__arrow {
    width: 30px;
    height: 32px;
  }
  .alliance-rewards__controls:not([hidden]) {
    gap: 4px;
  }
  .alliance-rewards__item {
    flex-basis: 140px;
    padding: 10px;
  }
  .alliance-rewards__image {
    height: 80px;
  }
}

.club-crystals,
.club-crystals__slot {
  --crystal-glow: #a78bfa;
}
.club-crystals[data-crystal-code=onslaught],
.club-crystals__slot[data-crystal-code=onslaught] {
  --crystal-glow: #ff5573;
}
.club-crystals[data-crystal-code=triumph],
.club-crystals__slot[data-crystal-code=triumph] {
  --crystal-glow: #519bff;
}
.club-crystals[data-crystal-code=fortitude],
.club-crystals__slot[data-crystal-code=fortitude] {
  --crystal-glow: #43dc91;
}
.club-crystals[data-crystal-code=abyss],
.club-crystals__slot[data-crystal-code=abyss] {
  --crystal-glow: #b57aff;
}
.club-crystals[data-crystal-code=ascension],
.club-crystals__slot[data-crystal-code=ascension] {
  --crystal-glow: #ffc857;
}
.club-crystals[data-crystal-code=aether],
.club-crystals__slot[data-crystal-code=aether] {
  --crystal-glow: #40dce8;
}

.club-crystals {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  align-items: stretch;
  gap: 10px;
  margin: 10px 0;
  color: var(--main-text-color);
}
.club-crystals__contribution, .club-crystals__inventory {
  min-width: 0;
  padding: 15px;
  border-radius: 10px;
  background: var(--light-bg);
}
.club-crystals__title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--title-color);
}
.club-crystals__inventory {
  display: flex;
  flex-direction: column;
}
.club-crystals__contribution {
  position: relative;
  overflow: hidden;
}
.club-crystals__contribution::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 15%, var(--crystal-glow) 50%, transparent 85%);
  opacity: 0;
  pointer-events: none;
}
.club-crystals__gem {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  padding: 0;
  border-radius: 8px;
}
.club-crystals__gem::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--crystal-glow), transparent 68%);
  opacity: 0;
  pointer-events: none;
}
.club-crystals__request {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
}
.club-crystals__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.club-crystals__heading .club-crystals__title {
  margin: 0;
}
.club-crystals__progress {
  flex-shrink: 0;
  color: var(--secondary-text-color);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.club-crystals__progress--weekend {
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--medium-bg);
  color: var(--main-purple-color);
  font-size: 11px;
  line-height: 16px;
}
.club-crystals__weekend {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
}
.club-crystals__weekend-art {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  color: var(--main-purple-color);
  background: radial-gradient(circle, rgba(139, 0, 255, 0.09), transparent 72%);
}
.club-crystals__weekend-gem {
  transform-box: fill-box;
  transform-origin: center;
  animation: club-crystal-weekend-float 5s ease-in-out infinite;
}
.club-crystals__weekend-spark {
  animation: club-crystal-weekend-spark 4s ease-in-out infinite;
}
.club-crystals__weekend-note {
  margin-top: 5px;
  color: var(--secondary-text-color);
  font-size: 12px;
  line-height: 1.5;
}
.club-crystals__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.4;
}
.club-crystals__replace {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--main-purple-color);
  font-size: inherit;
}
.club-crystals__replace:disabled {
  opacity: 0.45;
  cursor: default;
}
.club-crystals__replace:focus-visible {
  outline: 2px solid var(--main-purple-color);
  outline-offset: 3px;
}
.club-crystals__reset {
  color: var(--secondary-text-color);
}
.club-crystals__complete {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
}
.club-crystals__complete .club-crystals__feedback {
  min-width: 0;
  justify-content: flex-start;
  font-size: 12px;
  line-height: 16px;
}
.club-crystals__complete .club-crystals__reward {
  align-items: flex-start;
}
.club-crystals__complete-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--medium-bg);
  color: var(--main-purple-color);
}
.club-crystals__complete-details {
  min-width: 0;
}
.club-crystals__complete-bonus {
  margin-top: 3px;
  color: var(--main-purple-color);
  font-size: 12px;
  line-height: 16px;
}
.club-crystals__required-image {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 8px;
  -o-object-fit: contain;
     object-fit: contain;
}
.club-crystals__burst {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.club-crystals__burst::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid var(--crystal-glow);
  border-radius: 50%;
  animation: club-crystal-ring 0.65s ease-out both;
}
.club-crystals__burst i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 8px;
  margin: -4px 0 0 -2px;
  border-radius: 1px;
  background: var(--crystal-glow);
  box-shadow: 0 0 6px var(--crystal-glow);
  animation: club-crystal-spark 0.65s cubic-bezier(0.12, 0.65, 0.25, 1) both;
}
.club-crystals__feedback {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  min-width: min(100%, 220px);
  height: 36px;
}
.club-crystals__feedback.has-reward .club-crystals__reset {
  visibility: hidden;
}
.club-crystals__reward {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  position: absolute;
  inset: 0;
  z-index: 3;
  color: var(--main-purple-color);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  pointer-events: none;
  animation: club-crystal-reward 2.35s ease-out both;
}
.club-crystals.is-pending .club-crystals__gem::before {
  animation: club-crystal-charge 1s ease-in-out infinite;
}
.club-crystals.is-pending .club-crystals__required-image {
  animation: club-crystal-hover 1s ease-in-out infinite;
}
.club-crystals.is-offering .club-crystals__required-image {
  animation: club-crystal-offer 0.42s ease-in both;
}
.club-crystals.is-offering .club-crystals__gem::before {
  animation: club-crystal-charge 0.42s ease-in both;
}
.club-crystals.is-revealing .club-crystals__required-image {
  animation: club-crystal-reveal 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.club-crystals.is-revealing .club-crystals__details {
  animation: club-crystal-details 0.4s 0.12s ease-out both;
}
.club-crystals.is-revealing .club-crystals__contribution::after {
  animation: club-crystal-sweep 0.8s ease-out both;
}
.club-crystals.is-revealing .club-crystals__slot span {
  animation: club-crystal-count 0.45s 0.1s ease-out both;
}
.club-crystals__details {
  flex: 1;
  min-width: 0;
}
.club-crystals__name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.club-crystals__amount, .club-crystals__empty {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--secondary-text-color);
}
.club-crystals__amount span {
  white-space: nowrap;
}
.club-crystals__submit {
  padding: 8px 12px;
  flex-shrink: 0;
  font-size: 13px;
}
.club-crystals__submit:disabled {
  opacity: 0.45;
  cursor: default;
}
.club-crystals__stock {
  display: grid;
  flex: 1;
  align-content: center;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.club-crystals__slot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 54px;
  padding: 6px 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--main-text-color);
}
.club-crystals__slot.is-empty {
  color: var(--secondary-text-color);
}
.club-crystals__slot.is-empty .club-crystals__stock-image {
  opacity: 0.4;
  filter: grayscale(0.65);
}
.club-crystals__gem:focus-visible, .club-crystals__slot:focus-visible {
  outline: 2px solid var(--main-purple-color);
  outline-offset: 3px;
}
.club-crystals__gem:hover .club-crystals__required-image, .club-crystals__slot:hover .club-crystals__stock-image {
  filter: drop-shadow(0 0 4px var(--crystal-glow));
}
.club-crystals__stock-count {
  flex-shrink: 0;
  min-width: 2ch;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 20px;
  text-align: left;
}
.club-crystals__stock-image {
  width: 32px;
  min-width: 0;
  max-width: 100%;
  height: 32px;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (max-width: 600px) {
  .club-crystals {
    grid-template-columns: minmax(0, 1fr);
  }
  .club-crystals__stock {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
  }
  .club-crystals__slot {
    flex-direction: column;
    gap: 3px;
    padding: 6px 2px;
  }
  .club-crystals__stock-count {
    min-width: 0;
    line-height: 16px;
    text-align: center;
  }
  .club-crystals__request {
    gap: 8px;
  }
}

@keyframes club-crystal-charge {
  0%, 100% {
    opacity: 0.15;
    transform: scale(0.8);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
}
@keyframes club-crystal-weekend-float {
  0%, 100% {
    transform: translateY(2px) rotate(-4deg);
  }
  50% {
    transform: translateY(-2px) rotate(4deg);
  }
}
@keyframes club-crystal-weekend-spark {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}
@keyframes club-crystal-hover {
  0%, 100% {
    transform: translateY(0) rotate(-3deg);
  }
  50% {
    transform: translateY(-4px) rotate(3deg);
  }
}
@keyframes club-crystal-offer {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  35% {
    transform: scale(1.2) rotate(-12deg);
    opacity: 1;
  }
  100% {
    transform: scale(0.05) rotate(70deg);
    opacity: 0;
  }
}
@keyframes club-crystal-reveal {
  0% {
    transform: scale(0.15) rotate(-35deg);
    opacity: 0;
  }
  65% {
    transform: scale(1.18) rotate(6deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}
@keyframes club-crystal-ring {
  from {
    transform: scale(0.25);
    opacity: 0.9;
  }
  to {
    transform: scale(2.7);
    opacity: 0;
  }
}
@keyframes club-crystal-spark {
  from {
    transform: translate(0, 0) rotate(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(var(--spark-x), var(--spark-y)) rotate(var(--spark-turn)) scale(0.15);
    opacity: 0;
  }
}
@keyframes club-crystal-sweep {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  35% {
    opacity: 0.2;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}
@keyframes club-crystal-details {
  from {
    transform: translateY(6px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes club-crystal-count {
  0%, 100% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.25);
  }
}
@keyframes club-crystal-reward {
  0% {
    transform: translateY(4px) scale(0.8);
    opacity: 0;
  }
  20%, 70% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-4px) scale(0.95);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .club-crystals *,
  .club-crystals *::before,
  .club-crystals *::after,
  .club-crystal-modal__art img {
    animation: none !important;
  }
  .club-crystals__burst {
    display: none;
  }
}
.club-crystal-modal.modal--open .club-crystal-modal__art img {
  animation: club-crystal-modal-float 5s ease-in-out infinite;
}
.club-crystal-modal .modal__content {
  width: 420px;
  max-width: 92vw;
  overflow: hidden;
}
.club-crystal-modal .modal__body {
  padding: 28px 24px 24px;
}
.club-crystal-modal__art {
  display: grid;
  place-items: center;
  height: 168px;
  margin: -28px -24px 20px;
  background: radial-gradient(ellipse at center, rgba(139, 0, 255, 0.14), transparent 70%);
}
.club-crystal-modal__art img {
  width: 128px;
  height: 128px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(139, 0, 255, 0.18));
}
.club-crystal-modal__title {
  margin: 0 0 16px;
  color: var(--title-color);
  text-align: center;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.club-crystal-modal__badges {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.club-crystal-modal__badges span {
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--medium-bg);
  color: var(--secondary-text-color);
  font-size: 12px;
  line-height: 1.4;
}
.club-crystal-modal__badges strong {
  color: var(--main-text-color);
}
.club-crystal-modal__description {
  margin: 20px 0 0;
  color: var(--main-text-color);
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

@keyframes club-crystal-modal-float {
  0%, 100% {
    transform: perspective(600px) translateY(3px) rotateY(-20deg) rotateZ(-5deg);
  }
  50% {
    transform: perspective(600px) translateY(-6px) rotateY(20deg) rotateZ(5deg);
  }
}
.battle-finish-panel__rewards .battle-finish-panel__crystal {
  grid-column: 1/-1;
  background: linear-gradient(135deg, rgba(124, 76, 255, 0.2), rgba(64, 220, 232, 0.08));
  border-color: rgba(167, 139, 250, 0.28);
}
.battle-finish-panel__rewards .battle-finish-panel__crystal b {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.battle-finish-panel__rewards .battle-finish-panel__crystal img {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  -o-object-fit: contain;
     object-fit: contain;
}

: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;
  }
}
.ai-poster-generate-btn {
  margin-top: 10px;
}

.ai-poster-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ai-poster-modal.is-open {
  display: flex;
}

.ai-poster-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

.ai-poster-modal__dialog {
  position: relative;
  z-index: 2;
  width: min(900px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #fff;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}

.ai-poster-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.ai-poster-modal__title {
  font-size: 22px;
  font-weight: 700;
}

.ai-poster-modal__subtitle {
  margin-top: 4px;
  opacity: 0.65;
}

.ai-poster-modal__close {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 10px;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.ai-poster-modal__prompt {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(127, 84, 255, 0.08);
  margin-bottom: 20px;
  font-size: 13px;
  line-height: 1.5;
}

.ai-poster-modal__prompt-label {
  font-weight: 700;
  margin-bottom: 3px;
}

.ai-poster-modal__compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.ai-poster-modal__poster-title {
  font-weight: 600;
  margin-bottom: 8px;
}

.ai-poster-modal__poster img {
  display: block;
  width: 100%;
  max-height: 580px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.04);
}

.ai-poster-modal__generated {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.05);
}

.ai-poster-modal__generated img {
  width: 100%;
  height: 100%;
  max-height: 580px;
  -o-object-fit: contain;
     object-fit: contain;
}

.ai-poster-modal__empty {
  opacity: 0.55;
  font-size: 14px;
}

.ai-poster-modal__loader {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.88);
}

.ai-poster-modal__loader[hidden] {
  display: none;
}

.ai-poster-modal__spinner {
  width: 36px;
  height: 36px;
  border: 4px solid rgba(100, 70, 200, 0.18);
  border-top-color: #7f54ff;
  border-radius: 50%;
  animation: ai-poster-spin 0.75s linear infinite;
}

@keyframes ai-poster-spin {
  to {
    transform: rotate(360deg);
  }
}
.ai-poster-modal__error {
  padding: 11px 13px;
  margin-top: 16px;
  border-radius: 10px;
  background: rgba(220, 50, 50, 0.1);
  color: #d73232;
}

.ai-poster-modal__actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.ai-poster-btn--yes {
  background: #7451f8 !important;
}

.ai-poster-btn--regenerate {
  background: #444 !important;
}

body.ai-poster-modal-open {
  overflow: hidden;
}

/* DARK */
body.dark .ai-poster-modal__dialog {
  background: #1b1b1f;
  color: #fff;
}

body.dark .ai-poster-modal__prompt {
  background: rgba(133, 91, 255, 0.14);
}

body.dark .ai-poster-modal__generated,
body.dark .ai-poster-modal__poster img {
  background: rgba(255, 255, 255, 0.05);
}

body.dark .ai-poster-modal__loader {
  background: rgba(27, 27, 31, 0.92);
}

body.dark .ai-poster-modal__close {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

@media (max-width: 700px) {
  .ai-poster-modal {
    padding: 10px;
  }
  .ai-poster-modal__dialog {
    padding: 15px;
    border-radius: 14px;
    max-height: calc(100vh - 20px);
  }
  .ai-poster-modal__compare {
    grid-template-columns: 1fr;
  }
  .ai-poster-modal__generated {
    min-height: 300px;
  }
  .ai-poster-modal__actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .ai-poster-modal__actions button {
    width: 100%;
  }
}
.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: 1140px;
  margin: 0 auto;
  padding: 8px 0 32px;
  color: var(--main-text-color);
}
.ads-market h1, .ads-market h2, .ads-market p {
  margin: 0;
}
.ads-market h2 {
  color: var(--title-color);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
.ads-market button, .ads-market input, .ads-market select {
  font: inherit;
}
.ads-market button {
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.ads-market button:disabled {
  cursor: default;
  opacity: 0.45;
}
.ads-market button:focus-visible, .ads-market a:focus-visible, .ads-market input:focus-visible, .ads-market select:focus-visible {
  outline: 2px solid var(--secondary-purple-color);
  outline-offset: 3px;
}
.ads-market .icon {
  vertical-align: middle;
}
.ads-market__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--secondary-text-color);
}
.ads-market__hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 38px 44px;
  border-radius: 24px;
  background: radial-gradient(ellipse at 82% 55%, rgba(68, 177, 186, 0.2), transparent 40%), linear-gradient(115deg, #241238, #382049 55%, #162d38);
  color: #fff;
  overflow: hidden;
}
.ads-market__hero-copy {
  max-width: 650px;
}
.ads-market__eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.ads-market__hero .ads-market__eyebrow {
  color: #d3b6f6;
}
.ads-market__hero h1 {
  margin: 12px 0 14px;
  font-size: 42px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.8px;
  color: #fff;
}
.ads-market__hero p {
  max-width: 530px;
  line-height: 1.65;
  color: #ded7e8;
  font-size: 15px;
}
.ads-market__hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 25px;
  color: #d8cde4;
  font-size: 12px;
}
.ads-market__hero-facts strong {
  font-size: 17px;
  color: #fff;
  margin-right: 4px;
}
.ads-market__hero-art {
  flex: 0 0 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.ads-market__hero-art img {
  width: 180px;
  height: 210px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(23, 203, 228, 0.2));
  transform: rotate(8deg);
}
.ads-market__hero-art-label {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 1px;
  color: #bdebf0;
}
.ads-market__live {
  margin: 30px 0;
}
.ads-market__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.ads-market__section-head p {
  font-size: 12px;
  color: var(--secondary-text-color);
  margin-top: 5px;
  line-height: 1.5;
}
.ads-market__live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #21b78a;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 0 4px rgba(33, 183, 138, 0.1);
}
.ads-market__entry {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--secondary-text-color);
}
.ads-market__entry strong {
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  border-radius: 9px;
  padding: 7px 10px;
  color: var(--main-text-color);
  white-space: nowrap;
}
.ads-market__slots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.ads-market__slot {
  padding: 16px 18px;
  border: 1px solid var(--border-color);
  border-radius: var(--secondary-border-radius);
  background: var(--light-bg);
  min-width: 0;
}
.ads-market__slot--empty {
  border-style: dashed;
  background: var(--medium-bg);
}
.ads-market__slot-top {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  color: var(--secondary-text-color);
}
.ads-market__rank {
  font-weight: 700;
  font-size: 13px;
  color: var(--secondary-purple-color);
}
.ads-market__slot-icon {
  display: block;
  margin: 17px 0 10px;
  font-size: 25px;
  color: var(--secondary-purple-color);
}
.ads-market__slot--empty .ads-market__slot-icon {
  color: var(--secondary-text-color);
}
.ads-market__slot-name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--main-text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ads-market a.ads-market__slot-name:hover {
  color: var(--secondary-purple-color);
}
.ads-market__slot-price {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
}
.ads-market__slot-price > span {
  font-size: 11px;
  font-weight: 400;
  color: var(--secondary-text-color);
}
.ads-market__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: start;
  gap: 24px;
}
.ads-market__panel {
  padding: 26px;
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  min-width: 0;
}
.ads-market__balance {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  background: var(--medium-bg);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.ads-market__balance .icon {
  color: var(--secondary-purple-color);
  font-size: 17px;
}
.ads-market__field {
  margin-top: 24px;
}
.ads-market__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
}
.ads-market__types {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.ads-market__type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 4px;
  background: var(--light-bg);
  color: var(--secondary-text-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  font-size: 12px !important;
  transition: border-color 0.15s, background 0.15s;
}
.ads-market__type-btn .icon {
  font-size: 24px;
}
.ads-market__type-btn.is-active {
  border-color: var(--secondary-purple-color);
  color: var(--secondary-purple-color);
  background: rgba(139, 0, 255, 0.06);
}
.ads-market__type-btn:hover {
  border-color: var(--secondary-purple-color);
}
.ads-market__target {
  margin-top: 14px;
}
.ads-market__target-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  background: var(--medium-bg);
  min-width: 0;
}
.ads-market__target-card > .icon:first-child {
  font-size: 26px;
  color: var(--secondary-text-color);
}
.ads-market__target-card > div {
  flex: 1;
  min-width: 0;
}
.ads-market__target-card strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 14px;
}
.ads-market__target-card span {
  display: block;
  margin-top: 3px;
  color: var(--secondary-text-color);
  font-size: 11px;
}
.ads-market__target-card > .icon:last-child {
  color: var(--green-color);
  font-size: 20px;
}
.ads-market__select, .ads-market__target .ss-main {
  width: 100%;
  background: var(--light-bg);
  color: var(--main-text-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 14px 12px;
}
.ads-market__select {
  display: block;
}
.ads-market__hint {
  font-size: 13px;
  line-height: 1.6;
  padding: 12px 14px;
  background: var(--medium-bg);
  border-radius: 12px;
  color: var(--secondary-text-color);
}
.ads-market__hint a {
  color: var(--secondary-purple-color);
}
.ads-market__field--payment {
  padding-top: 22px;
  border-top: 1px solid var(--border-color);
}
.ads-market__amount {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
}
.ads-market__amount:focus-within {
  border-color: var(--secondary-purple-color);
}
.ads-market__amount > .icon {
  color: var(--secondary-purple-color);
  font-size: 24px;
}
.ads-market__amount input {
  width: 100%;
  min-width: 0;
  background: transparent;
  color: var(--main-text-color);
  font-size: 24px;
  font-weight: 700;
  border: 0;
  outline: 0;
}
.ads-market__amount > span {
  color: var(--secondary-text-color);
  font-size: 12px;
  white-space: nowrap;
}
.ads-market__presets {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.ads-market__presets button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--light-bg);
  color: var(--secondary-text-color);
  font-size: 12px;
}
.ads-market__presets button:hover {
  color: var(--secondary-purple-color);
  border-color: var(--secondary-purple-color);
}
.ads-market__beacon-input {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 14px 12px;
  border: 1px solid rgba(25, 171, 189, 0.25);
  border-radius: 12px;
  background: rgba(25, 171, 189, 0.04);
}
.ads-market__beacon-input > img {
  flex: 0 0 44px;
  width: 44px;
  height: 60px;
  -o-object-fit: contain;
     object-fit: contain;
}
.ads-market__beacon-input-copy {
  flex: 1;
  min-width: 0;
}
.ads-market__beacon-input-copy label {
  font-weight: 700;
  font-size: 13px;
}
.ads-market__beacon-input-copy span, .ads-market__beacon-input-copy small {
  display: block;
  margin-top: 4px;
  color: var(--secondary-text-color);
  font-size: 10px;
}
.ads-market__stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--light-bg);
  overflow: hidden;
}
.ads-market__stepper button {
  border: 0;
  width: 30px;
  height: 38px;
  background: transparent;
  font-size: 18px;
  color: var(--main-text-color);
}
.ads-market__stepper input {
  width: 38px;
  min-width: 0;
  padding: 0;
  text-align: center;
  border: 0;
  background: transparent;
  color: var(--main-text-color);
  font-size: 13px;
  font-weight: 700;
  -webkit-appearance: textfield;
          appearance: textfield;
  -moz-appearance: textfield;
}
.ads-market__stepper input::-webkit-inner-spin-button, .ads-market__stepper input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ads-market__total {
  padding: 18px;
  margin: 24px 0 18px;
  border-radius: 12px;
  background: rgba(139, 0, 255, 0.055);
}
.ads-market__total > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ads-market__total > div > span {
  font-size: 12px;
}
.ads-market__total strong {
  white-space: nowrap;
  font-size: 25px;
  color: var(--secondary-purple-color);
}
.ads-market__total p {
  color: var(--secondary-text-color);
  font-size: 11px;
  margin-top: 6px;
}
.ads-market__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--main-text-color);
  background: transparent;
  font-weight: 600;
  font-size: 12px;
}
.ads-market__btn--primary {
  width: 100%;
  padding: 15px 16px;
  background: var(--purple-btn-bg);
  border-color: transparent;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 5px 15px rgba(119, 44, 232, 0.16);
}
.ads-market__btn--primary:hover {
  background: #6822d3;
}
.ads-market__btn--primary .icon {
  font-size: 20px;
}
.ads-market__btn--ghost:hover {
  background: var(--medium-bg);
}
.ads-market__mini {
  margin-top: 12px !important;
  font-size: 11px;
  line-height: 1.6;
  color: var(--secondary-text-color);
  text-align: center;
}
.ads-market__error {
  margin-bottom: 14px !important;
  color: var(--red-color);
  font-size: 12px;
  line-height: 1.5;
}
.ads-market__preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}
.ads-market__preview > span {
  width: 100%;
  font-size: 11px;
  color: var(--secondary-text-color);
}
.ads-market__preview strong {
  font-size: 13px;
}
.ads-market__preview small {
  font-size: 11px;
  color: var(--secondary-text-color);
}
.ads-market__sidebar {
  display: grid;
  gap: 24px;
  min-width: 0;
}
.ads-market__beacon-card {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 24px;
  border: 1px solid rgba(25, 171, 189, 0.22);
  border-radius: 20px;
  background: radial-gradient(ellipse at 12% 35%, rgba(25, 171, 189, 0.1), transparent 60%), var(--light-bg);
}
.ads-market__beacon-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ads-market__beacon-visual img {
  width: 95px;
  height: 130px;
  -o-object-fit: contain;
     object-fit: contain;
}
.ads-market__beacon-card .ads-market__eyebrow {
  color: var(--secondary-text-color);
  font-size: 9px;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}
.ads-market__beacon-card h2 {
  font-size: 21px;
}
.ads-market__beacon-card p {
  margin-top: 10px;
  color: var(--secondary-text-color);
  font-size: 12px;
  line-height: 1.6;
}
.ads-market__beacon-owned {
  display: inline-block;
  margin-top: 12px;
  border: 1px solid var(--border-color);
  padding: 5px 9px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
}
.ads-market p.ads-market__beacon-note {
  grid-column: 1/-1;
  border-top: 1px solid var(--border-color);
  padding-top: 14px;
  margin-top: 0;
  font-size: 11px;
}
.ads-market__count {
  display: inline-block;
  margin-left: 4px;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--medium-bg);
  font-size: 12px;
  vertical-align: middle;
}
.ads-market__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 16px;
  text-align: center;
}
.ads-market__empty > .icon {
  font-size: 35px;
  margin-bottom: 14px;
  color: var(--secondary-purple-color);
}
.ads-market__empty > strong {
  font-size: 15px;
}
.ads-market__empty p {
  margin-top: 8px;
  max-width: 270px;
  line-height: 1.6;
  font-size: 12px;
  color: var(--secondary-text-color);
}
.ads-market__list {
  display: grid;
  gap: 12px;
  max-height: 640px;
  overflow-y: auto;
}
.ads-market__bid {
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
}
.ads-market__bid--paused {
  background: var(--medium-bg);
}
.ads-market__bid-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.ads-market__bid-type {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 11px;
  color: var(--secondary-text-color);
}
.ads-market__bid-type .icon {
  font-size: 17px;
}
.ads-market__status {
  font-size: 10px;
  padding: 4px 7px;
  border-radius: 6px;
  background: var(--medium-bg);
  color: var(--secondary-text-color);
}
.ads-market__status--active {
  color: var(--green-color);
  background: rgba(0, 153, 51, 0.08);
}
.ads-market__bid-name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 15px;
  margin-top: 11px;
  overflow-wrap: anywhere;
}
.ads-market__on-air {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  color: var(--secondary-purple-color);
}
.ads-market__bid-price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px;
}
.ads-market__bid-price strong {
  font-size: 18px;
  white-space: nowrap;
}
.ads-market__bid-price small, .ads-market__bid-price > span {
  font-size: 10px;
  font-weight: 400;
  color: var(--secondary-text-color);
}
.ads-market__bid-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.ads-market__guide {
  margin-top: 30px;
  padding: 26px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: var(--light-bg);
}
.ads-market__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 24px;
}
.ads-market__steps > div > span {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--secondary-purple-color);
  margin-bottom: 10px;
}
.ads-market__steps strong {
  font-size: 14px;
}
.ads-market__steps p {
  margin-top: 7px;
  line-height: 1.6;
  font-size: 12px;
  color: var(--secondary-text-color);
}
.ads-market__guide-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border-color);
}
.ads-market__guide-note .icon {
  font-size: 20px;
  color: var(--secondary-text-color);
}
.ads-market__guide-note p {
  font-size: 11px;
  line-height: 1.7;
  color: var(--secondary-text-color);
}
.ads-market__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 960px) {
  .ads-market__hero {
    padding: 32px;
    gap: 20px;
  }
  .ads-market__hero h1 {
    font-size: 36px;
  }
  .ads-market__hero-art {
    flex-basis: 160px;
  }
  .ads-market__hero-art img {
    width: 150px;
    height: 180px;
  }
  .ads-market__grid {
    gap: 16px;
  }
  .ads-market__panel, .ads-market__beacon-card {
    padding: 20px;
  }
  .ads-market__beacon-card {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
  }
  .ads-market__beacon-visual img {
    width: 72px;
    height: 104px;
  }
  .ads-market__beacon-card h2 {
    font-size: 18px;
  }
  .ads-market__beacon-input {
    flex-wrap: wrap;
  }
}
@media (max-width: 760px) {
  .ads-market__hero {
    padding: 28px 24px;
  }
  .ads-market__hero h1 {
    font-size: 32px;
  }
  .ads-market__hero-art {
    flex-basis: 130px;
  }
  .ads-market__hero-art img {
    width: 120px;
    height: 155px;
  }
  .ads-market__hero-art-label {
    font-size: 9px;
    text-align: center;
  }
  .ads-market__hero-facts {
    gap: 12px;
  }
  .ads-market__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ads-market__slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ads-market__beacon-card {
    grid-template-columns: 90px minmax(0, 1fr);
  }
  .ads-market__beacon-visual img {
    width: 90px;
    height: 120px;
  }
  .ads-market__beacon-input {
    flex-wrap: nowrap;
  }
  .ads-market__steps {
    gap: 20px;
  }
}
@media (max-width: 480px) {
  .ads-market {
    padding-top: 0;
  }
  .ads-market h2 {
    font-size: 18px;
  }
  .ads-market__back {
    margin-bottom: 16px;
  }
  .ads-market__hero {
    padding: 24px 20px;
    gap: 0;
    position: relative;
  }
  .ads-market__hero-copy {
    position: relative;
    z-index: 1;
  }
  .ads-market__hero h1 {
    font-size: 30px;
    max-width: 220px;
    margin-top: 12px;
  }
  .ads-market__hero p {
    font-size: 12px;
    max-width: 225px;
    margin-top: 15px;
  }
  .ads-market__hero .ads-market__eyebrow {
    font-size: 9px;
  }
  .ads-market__hero-art {
    position: absolute;
    right: -14px;
    top: 24px;
    opacity: 0.45;
  }
  .ads-market__hero-art img {
    width: 115px;
    height: 160px;
  }
  .ads-market__hero-art-label {
    display: none;
  }
  .ads-market__hero-facts {
    gap: 8px 14px;
    font-size: 10px;
  }
  .ads-market__hero-facts strong {
    font-size: 14px;
  }
  .ads-market__live {
    margin: 24px 0;
  }
  .ads-market__live > .ads-market__section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
  .ads-market__entry {
    font-size: 11px;
  }
  .ads-market__entry strong {
    padding: 4px 7px;
  }
  .ads-market__slot {
    padding: 14px;
  }
  .ads-market__slot-name {
    font-size: 13px;
  }
  .ads-market__slot-price {
    font-size: 13px;
  }
  .ads-market__slot-price > span {
    font-size: 10px;
  }
  .ads-market__panel, .ads-market__guide {
    padding: 20px 16px;
    border-radius: 16px;
  }
  .ads-market__section-head {
    gap: 8px;
  }
  .ads-market__section-head p {
    font-size: 11px;
  }
  .ads-market__balance {
    padding: 7px;
    font-size: 11px;
  }
  .ads-market__types {
    gap: 5px;
  }
  .ads-market__type-btn {
    font-size: 10px !important;
    padding: 12px 2px;
  }
  .ads-market__type-btn .icon {
    font-size: 22px;
  }
  .ads-market__beacon-input {
    gap: 7px;
    padding: 12px 8px;
  }
  .ads-market__beacon-input > img {
    flex-basis: 32px;
    width: 32px;
    height: 48px;
  }
  .ads-market__beacon-input-copy label {
    font-size: 12px;
  }
  .ads-market__beacon-input-copy span {
    font-size: 9px;
  }
  .ads-market__stepper button {
    width: 28px;
  }
  .ads-market__stepper input {
    width: 30px;
  }
  .ads-market__total {
    padding: 14px;
  }
  .ads-market__total strong {
    font-size: 22px;
  }
  .ads-market__total > div > span {
    font-size: 11px;
  }
  .ads-market__sidebar {
    gap: 16px;
  }
  .ads-market__beacon-card {
    padding: 20px 16px;
    border-radius: 16px;
  }
  .ads-market__steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .ads-market__steps > div {
    padding-left: 35px;
    position: relative;
  }
  .ads-market__steps > div > span {
    position: absolute;
    left: 0;
    top: 1px;
  }
}

.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;
  }
}
.market-request-edit__inventory {
  display: none;
  margin-top: 15px;
}
.market-request-edit.is-editing .market-request-edit__inventory {
  display: block;
}
.market-request-edit.is-editing .market-request-edit__main-actions {
  display: none;
}
.market-request-edit__main-actions, .market-request-edit__save-actions {
  display: flex;
  gap: 10px;
}
.market-request-edit__main-actions {
  margin-bottom: 16px;
}
.market-request-edit__main-actions .button, .market-request-edit__save-actions .button {
  flex: 1;
  min-width: 0;
}
.market-request-edit__remove {
  display: none;
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 2;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(15, 15, 18, 0.82);
  color: #fff;
  pointer-events: none;
}
.market-request-edit__remove i {
  font-size: 13px;
}

.card-pool--market-request-edit .card-pool__item {
  overflow: hidden;
}
.card-pool--market-request-edit .card-pool__item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: inherit;
}
.card-pool--market-request-edit.is-editing .card-pool__item {
  cursor: pointer;
}
.card-pool--market-request-edit.is-editing .card-pool__item:hover {
  transform: translateY(-2px);
  opacity: 0.85;
}

.market-request-show__delete-button {
  background: rgba(255, 75, 75, 0.14);
  color: #ff6262;
}
.market-request-show__delete-button:hover {
  background: rgba(255, 75, 75, 0.23);
}

@media screen and (max-width: 500px) {
  .market-request-edit__main-actions, .market-request-edit__save-actions {
    flex-direction: column;
  }
}
.card-pool--market-request-edit .card-pool__item {
  position: relative;
}
.card-pool--market-request-edit .card-pool__item > a {
  position: relative;
  z-index: 1;
  display: block;
}
.card-pool--market-request-edit .market-request-edit__remove {
  position: absolute;
  z-index: 10;
  top: 5px;
  right: 5px;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
}
.card-pool--market-request-edit .market-request-edit__remove i {
  pointer-events: none;
}

.market-request-edit__remove {
  display: none;
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 10;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  cursor: pointer;
}

.card-pool--market-request-edit.is-editing .market-request-edit__remove {
  display: flex;
}

.market-show__user {
  position: relative;
}
.market-show__enchant {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 38px;
  height: 24px;
  padding: 0 7px;
  border: 1px solid rgba(115, 87, 190, 0.2);
  border-radius: 12px;
  background: rgba(115, 87, 190, 0.1);
  color: #6750a4;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.market-show__enchant .icon {
  width: 13px;
  height: 13px;
  font-size: 13px;
}

.market-tabs__enchant {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  overflow: visible !important;
}

.market-tabs__enchant .icon {
  display: block;
  width: 18px;
  height: 18px;
  font-size: 18px;
}

.market-tabs__enchant-label {
  position: absolute;
  top: -5px;
  right: -3px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 17px;
  padding: 0 4px;
  box-sizing: border-box;
  border: 2px solid #fff;
  border-radius: 10px;
  background: #242424;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.tabs__nav {
  padding-top: 8px;
  margin-top: -8px;
}

.market-my-lots {
  --mml-text:
      var(--main-text-color);
  --mml-muted:
      var(--secondary-text-color);
  --mml-bg:
      var(--medium-bg);
  --mml-bg-hover:
      var(--light-bg);
  --mml-border:
      var(--border-color);
  --mml-purple:
      var(--purple-btn-bg);
  margin-bottom: 30px;
  /*
   |--------------------------------------------------------------------------
   | HEADER
   |--------------------------------------------------------------------------
   */
  /*
   |--------------------------------------------------------------------------
   | ACTIONS
   |--------------------------------------------------------------------------
   */
  /*
   |--------------------------------------------------------------------------
   | TOGGLE
   |--------------------------------------------------------------------------
   */
  /*
   * При закрытии стрелка смотрит вниз.
   */
  /*
   |--------------------------------------------------------------------------
   | CREATE
   |--------------------------------------------------------------------------
   */
  /*
   |--------------------------------------------------------------------------
   | COLLAPSIBLE BODY
   |--------------------------------------------------------------------------
   */
  /*
   * Внутренний wrapper нужен,
   * чтобы margin/padding не ломали height animation.
   */
  /*
   |--------------------------------------------------------------------------
   | COLLAPSED HEADER
   |--------------------------------------------------------------------------
   */
  /*
   |--------------------------------------------------------------------------
   | EMPTY
   |--------------------------------------------------------------------------
   */
}
.market-my-lots__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px;
}
.market-my-lots__heading {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}
.market-my-lots__title {
  margin: 0 !important;
}
.market-my-lots__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 23px;
  padding: 0 7px;
  color: var(--mml-purple);
  background: rgba(118, 40, 244, 0.1);
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.market-my-lots__actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 7px;
}
.market-my-lots__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 38px;
  padding: 0 9px 0 12px;
  color: var(--mml-muted);
  background: var(--mml-bg);
  border: 1px solid var(--mml-border);
  border-radius: 10px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}
.market-my-lots__toggle:hover {
  color: var(--mml-purple);
  background: var(--mml-bg-hover);
  border-color: rgba(118, 40, 244, 0.2);
}
.market-my-lots__toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.market-my-lots__toggle-icon svg {
  width: 16px;
  height: 16px;
}
.market-my-lots.is-collapsed .market-my-lots__toggle-icon {
  transform: rotate(180deg);
}
.market-my-lots__create {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 38px;
  margin: 0;
}
.market-my-lots__create-plus {
  display: none;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}
.market-my-lots__body {
  overflow: hidden;
  height: auto;
  opacity: 1;
  will-change: height, opacity;
  transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s ease;
}
.market-my-lots__body-inner {
  padding-bottom: 1px;
}
.market-my-lots.is-collapsed {
  margin-bottom: 24px;
}
.market-my-lots.is-collapsed .market-my-lots__header {
  margin-bottom: 0;
}
.market-my-lots.is-collapsed .market-my-lots__count {
  color: var(--mml-muted);
  background: var(--mml-bg);
}
.market-my-lots__empty {
  padding: 14px 16px;
  color: var(--mml-muted);
  background: var(--mml-bg);
  border-radius: 10px;
  font-size: 13px;
}

/*
 |--------------------------------------------------------------------------
 | MOBILE
 |--------------------------------------------------------------------------
 */
@media (max-width: 600px) {
  .market-my-lots {
    margin-bottom: 25px;
    /*
     * На телефоне оставляем
     * только красивую стрелку.
     */
  }
  .market-my-lots__header {
    gap: 7px;
    margin-bottom: 12px;
  }
  .market-my-lots__heading {
    gap: 6px;
  }
  .market-my-lots__title {
    font-size: 17px;
  }
  .market-my-lots__count {
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 7px;
    font-size: 9px;
  }
  .market-my-lots__actions {
    gap: 5px;
  }
  .market-my-lots__toggle {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 10px;
  }
  .market-my-lots__toggle-text {
    display: none;
  }
  .market-my-lots__toggle-icon {
    width: 19px;
    height: 19px;
  }
  .market-my-lots__toggle-icon svg {
    width: 17px;
    height: 17px;
  }
  .market-my-lots__create {
    min-height: 36px;
    padding-left: 11px;
    padding-right: 11px;
    font-size: 11px;
  }
  .market-my-lots.is-collapsed {
    margin-bottom: 20px;
  }
}
/*
 |--------------------------------------------------------------------------
 | VERY SMALL MOBILE
 |--------------------------------------------------------------------------
 */
@media (max-width: 370px) {
  .market-my-lots__create {
    width: 36px;
    min-width: 36px;
    padding: 0;
  }
  .market-my-lots__create span:last-child {
    display: none;
  }
  .market-my-lots__create-plus {
    display: block;
  }
}
.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/halloween/candy1.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/halloween/candy1.png") !important;
}
.event-gift-ball--2 {
  background-image: url("/assets/halloween/candy1.png") !important;
}
.event-gift-ball--3 {
  background-image: url("/assets/halloween/candy1.png") !important;
}
.event-gift-ball--4 {
  background-image: url("/assets/halloween/candy1.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/pumpkin.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/halloween/candy1.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);
}

.summer-gifts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 760px) {
  .summer-gifts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.summer-gifts__item {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 12px;
  background: radial-gradient(circle at 20% 15%, rgba(255, 211, 106, 0.24), transparent 36%), linear-gradient(135deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.035));
  color: var(--event-text);
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: 0.18s ease;
}
.summer-gifts__item:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 211, 106, 0.35);
}
.summer-gifts__image {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.summer-gifts__image img {
  max-width: 36px;
  max-height: 36px;
}
.summer-gifts__info {
  min-width: 0;
}
.summer-gifts__info b {
  display: block;
  font-size: 13px;
  line-height: 1.2;
}
.summer-gifts__info small {
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--event-muted);
  font-size: 12px;
  font-weight: 800;
}

.summer-gift-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.summer-gift-modal--open {
  display: flex;
}
.summer-gift-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.68);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.summer-gift-modal__card {
  position: relative;
  width: 100%;
  max-width: 430px;
  padding: 16px;
  border-radius: 24px;
  background: radial-gradient(circle at 20% 0%, rgba(255, 211, 106, 0.18), transparent 36%), linear-gradient(180deg, #3a2515, #17100b);
  border: 1px solid rgba(255, 255, 255, 0.13);
  color: var(--event-text);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}
.summer-gift-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}
.summer-gift-modal__top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
  padding-right: 38px;
}
.summer-gift-modal__image {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.09);
  display: flex;
  align-items: center;
  justify-content: center;
}
.summer-gift-modal__image img {
  max-width: 48px;
  max-height: 48px;
}
.summer-gift-modal__title {
  font-size: 18px;
  font-weight: 900;
  color: var(--event-accent);
}
.summer-gift-modal__price {
  margin-top: 5px;
  color: var(--event-muted);
  font-size: 12px;
  font-weight: 800;
}
.summer-gift-modal__field {
  position: relative;
  margin-top: 12px;
}
.summer-gift-modal__field label {
  display: block;
  margin-bottom: 6px;
  color: var(--event-muted);
  font-size: 12px;
  font-weight: 900;
}
.summer-gift-modal__field input,
.summer-gift-modal__field textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 15px;
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
  padding: 12px;
  outline: none;
}
.summer-gift-modal__field textarea {
  min-height: 94px;
  resize: vertical;
}
.summer-gift-modal__suggestions {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 72px;
  z-index: 5;
  max-height: 220px;
  overflow: auto;
  border-radius: 16px;
  background: #24170f;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.summer-gift-modal__suggestion {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  cursor: pointer;
  color: #fff;
}
.summer-gift-modal__suggestion:hover {
  background: rgba(255, 255, 255, 0.08);
}
.summer-gift-modal__suggestion img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.summer-gift-modal__suggestion b {
  font-size: 13px;
}
.summer-gift-modal__public {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--event-muted);
  font-size: 12px;
  font-weight: 800;
}
.summer-gift-modal__send {
  width: 100%;
  margin-top: 14px;
  min-height: 50px;
  border: 0;
  border-radius: 17px;
  background: linear-gradient(135deg, #ffb34a, #ff6b35, #f1523b);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
}

.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 {
  position: relative;
}
.card-level-up__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.card-level-up__eyebrow {
  margin-bottom: 5px;
  color: var(--purple-btn-bg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.card-level-up__heading-title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--title-color);
}
.card-level-up__i {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(119, 44, 232, 0.08);
  color: var(--purple-btn-bg);
  cursor: pointer;
}
.card-level-up__body {
  display: grid;
  grid-template-columns: 174px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.card-level-up__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 14px;
  border-radius: var(--secondary-border-radius);
  background: var(--medium-bg);
}
.card-level-up__selection-label {
  margin-bottom: 16px;
  color: var(--secondary-text-color);
  font-size: 11px;
  font-weight: 500;
  text-align: center;
}
.card-level-up__item {
  position: relative;
  width: 112px;
  flex-shrink: 0;
}
.card-level-up__item img {
  height: auto;
  border-radius: var(--main-border-radius);
}
.card-level-up__item .card-anim-frame {
  position: absolute;
  inset: 0;
  height: 100%;
  pointer-events: none;
}
.card-level-up__current-level {
  padding: 3px 9px;
  border-radius: 8px;
  color: var(--purple-btn-bg);
  background: rgba(119, 44, 232, 0.08);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.card-level-up__current-level[hidden] {
  display: none;
}
.card-level-up__item-footer {
  display: none;
  flex-direction: column;
  width: 100%;
  max-width: 230px;
  margin-top: 16px;
  padding: 12px;
  border-radius: 12px;
  background: var(--light-bg);
}
.card-level-up__stats-heading, .card-level-up__exp-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.card-level-up__stats-label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--secondary-text-color);
  font-size: 11px;
  font-weight: 500;
}
.card-level-up__stats-label i {
  color: var(--purple-btn-bg);
  font-size: 16px;
}
.card-level-up__exp-heading {
  margin: 12px 0 7px;
}
.card-level-up__item-level {
  font-weight: 600;
}
.card-level-up__item-exp {
  position: relative;
  width: 100%;
  height: 7px;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(119, 44, 232, 0.08);
}
.card-level-up__item-exp-text {
  color: var(--purple-btn-bg);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.card-level-up__item-exp-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, #b38aef, var(--purple-btn-bg));
  border-radius: inherit;
}
.card-level-up__exp-caption {
  color: var(--secondary-text-color);
  font-size: 11px;
}
.card-level-up__content {
  min-width: 0;
  padding-top: 4px;
}
.card-level-up__title {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 600;
  color: var(--title-color);
}
.card-level-up__info {
  margin-bottom: 14px;
  color: var(--secondary-text-color);
  font-size: 13px;
  line-height: 1.5;
}
.card-level-up__benefits {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
  color: var(--secondary-text-color);
  font-size: 12px;
}
.card-level-up__benefits b {
  color: var(--green-color);
  font-weight: 600;
}
.card-level-up__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.card-level-up__controls--scroll-enable .card-level-up__scroll-btn {
  display: flex;
}
.card-level-up .card-level-up__start-btn {
  min-height: 42px;
  padding: 10px 18px;
}
.card-level-up__scroll-btn {
  display: none;
}
.card-level-up .card-level-up__scroll-btn {
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 10px 14px;
  color: var(--secondary-text-color);
  background: var(--medium-bg);
}
.card-level-up .card-level-up__scroll-btn i {
  opacity: 0.35;
}
.card-level-up .card-level-up__scroll-btn--enable {
  color: var(--purple-btn-bg);
  background: rgba(119, 44, 232, 0.1);
}
.card-level-up .card-level-up__scroll-btn--enable i {
  opacity: 1;
}
.card-level-up__lower {
  margin-top: 24px;
  padding: 16px;
  border-radius: var(--main-border-radius);
  background: var(--medium-bg);
}
.card-level-up__lower[hidden] {
  display: none;
}
.card-level-up__lower-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.card-level-up__lower-title {
  color: var(--title-color);
  font-size: 14px;
  font-weight: 600;
}
.card-level-up__lower-price {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
}
.card-level-up__lower-price span {
  color: var(--secondary-text-color);
  font-size: 11px;
  font-weight: 400;
}
.card-level-up__lower-note {
  color: var(--secondary-text-color);
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 14px;
}
.card-level-up__lower-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}
.card-level-up__lower-field {
  flex: 1;
  min-width: 130px;
}
.card-level-up__lower-field span {
  display: block;
  margin-bottom: 5px;
  color: var(--secondary-text-color);
  font-size: 11px;
}
.card-level-up__lower-level {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 30px 0 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--main-border-radius);
  background-color: var(--light-bg);
  color: var(--main-text-color);
  font-size: 13px;
  cursor: pointer;
}
.card-level-up__lower-level:focus {
  outline: 2px solid var(--purple-btn-bg);
  outline-offset: 2px;
}
.card-level-up .card-level-up__lower-btn {
  min-height: 40px;
  padding: 10px 14px;
  background: var(--light-bg);
  color: var(--main-text-color);
  box-shadow: inset 0 0 0 1px var(--border-color);
  font-size: 12px;
}
.card-level-up .card-level-up__lower-btn:hover {
  color: var(--purple-btn-bg);
  box-shadow: inset 0 0 0 1px var(--purple-btn-bg);
}
.card-level-up--busy .card-level-up__controls,
.card-level-up--busy .card-level-up__lower-controls {
  pointer-events: none;
  opacity: 0.6;
}
.card-level-up__bar--fill {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 3px;
  max-width: 100%;
  background: var(--purple-btn-bg);
  border-radius: 3px;
  pointer-events: none;
}
@media (max-width: 600px) {
  .card-level-up__heading {
    position: relative;
    justify-content: center;
    padding: 0 36px;
    margin-bottom: 20px;
    text-align: center;
  }
  .card-level-up__i {
    position: absolute;
    right: 0;
  }
  .card-level-up__heading-title {
    font-size: 23px;
  }
  .card-level-up__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .card-level-up__left {
    padding: 16px;
  }
  .card-level-up__item {
    width: 100px;
  }
  .card-level-up__selection-label {
    margin-bottom: 12px;
  }
  .card-level-up__content {
    padding-top: 0;
    text-align: center;
  }
  .card-level-up__benefits {
    margin-bottom: 16px;
    align-items: center;
  }
  .card-level-up__controls {
    justify-content: center;
  }
  .card-level-up__lower-field {
    text-align: left;
  }
  .card-level-up__lower {
    margin-top: 20px;
    padding: 14px;
  }
}

@media (max-width: 600px) {
  .card-level-auto__heading,
  .card-level-auto__actions {
    justify-content: center;
  }
  .card-level-auto__subtitle,
  .card-level-auto__title,
  .card-level-auto__hint {
    text-align: center;
  }
}
.card-level-up__feedback {
  min-height: 22px;
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--secondary-text-color);
}
.card-level-up__feedback[data-result=success] {
  color: var(--green-color);
}
.card-level-up__feedback[data-result=failure] {
  color: var(--secondary-text-color);
}
.card-level-up__effect {
  position: absolute;
  z-index: 5;
  top: 48%;
  left: 0;
  width: 100%;
  color: #fff;
  font-size: 25px;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
}
.card-level-up--success .card-level-up__item {
  animation: card-level-success 0.8s ease-out;
}
.card-level-up--failure .card-level-up__item {
  animation: card-level-failure 0.45s ease-out;
}
.card-level-up--level-gained .card-level-up__item {
  animation: card-level-gained 1s ease-out;
}
.card-level-up--success .card-level-up__effect, .card-level-up--failure .card-level-up__effect {
  animation: card-level-float 1.1s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .card-level-up .card-level-up__item,
  .card-level-up .card-level-up__effect {
    animation: none;
  }
}

@keyframes card-level-success {
  0%, 100% {
    transform: translateY(0);
    filter: drop-shadow(0 0 0 transparent);
  }
  35% {
    transform: translateY(-4px) scale(1.035);
    filter: drop-shadow(0 0 12px rgba(0, 153, 51, 0.45));
  }
}
@keyframes card-level-failure {
  0%, 100% {
    transform: translateX(0);
  }
  20%, 60% {
    transform: translateX(-3px);
  }
  40%, 80% {
    transform: translateX(3px);
  }
}
@keyframes card-level-gained {
  0%, 100% {
    transform: translateY(0);
    filter: drop-shadow(0 0 0 transparent);
  }
  40% {
    transform: translateY(-6px) scale(1.06);
    filter: drop-shadow(0 0 16px rgba(119, 44, 232, 0.6));
  }
}
@keyframes card-level-float {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.85);
  }
  20%, 55% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-30px) scale(1.04);
  }
}
.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: 100%;
  max-width: 800px;
  overflow: hidden;
}
.card-level__workbench {
  padding: 26px;
  margin-bottom: 20px;
  background: var(--light-bg);
  border-radius: var(--secondary-border-radius);
}
@media (max-width: 600px) {
  .card-level__workbench {
    padding: 20px 16px;
  }
}

.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;
}

/* =========================================================
   НАБОР СВИТКОВ
   Новая структура для Blade с:
   .scroll-pack__top
   .scroll-pack__body
   .scroll-pack__offer
   .scroll-pack__bottom
========================================================= */
.card-level__inventory {
  background: var(--light-bg);
  border-radius: var(--main-border-radius);
  padding: 20px;
}
@media (max-width: 700px) {
  .card-level__inventory {
    padding: 15px;
  }
}

.scroll-pack {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-top: 24px;
  margin-bottom: 40px;
  padding: 24px;
  border: none;
  border-radius: var(--main-border-radius);
  background: var(--light-bg);
  /* По просьбе: никаких теней у основного блока */
  box-shadow: none;
}

/* Очень лёгкий фоновой акцент, без тени */
.scroll-pack::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -180px;
  right: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(111, 76, 255, 0.08) 0%, rgba(111, 76, 255, 0) 68%);
  pointer-events: none;
}

.scroll-pack--promo::after,
.scroll-pack--sale-today::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -150px;
  bottom: -220px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 174, 47, 0.07) 0%, rgba(245, 174, 47, 0) 68%);
  pointer-events: none;
}

/* =========================================================
   ВЕРХНЯЯ СТРОКА
========================================================= */
.scroll-pack__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.scroll-pack__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: -moz-max-content;
  width: max-content;
  padding: 7px 12px;
  border: 1px solid rgba(111, 76, 255, 0.18);
  border-radius: 999px;
  background: rgba(111, 76, 255, 0.08);
  color: #7154ff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.scroll-pack__eyebrow-icon {
  font-size: 11px;
  line-height: 1;
}

/* =========================================================
   СРОК АКЦИИ
========================================================= */
.scroll-pack__timer {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 7px 11px;
  border: 1px solid rgba(238, 171, 49, 0.38);
  border-radius: 14px;
  background: rgba(238, 171, 49, 0.07);
}

.scroll-pack__timer-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  background: rgba(238, 171, 49, 0.12);
}

.scroll-pack__timer-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: #e8a82f;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scroll-pack__timer-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.scroll-pack__timer-label {
  color: var(--secondary-text-color);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.scroll-pack__timer-content strong {
  color: var(--main-text-color);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.scroll-pack__timer-content strong span {
  color: var(--secondary-text-color);
  font-weight: 700;
}

/* =========================================================
   ОСНОВНОЙ РЯД
========================================================= */
.scroll-pack__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
}

.scroll-pack__main {
  min-width: 0;
}

.scroll-pack__title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.scroll-pack__title {
  margin: 0;
  color: var(--title-color);
  font-size: 29px;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.scroll-pack__sale-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid rgba(236, 170, 49, 0.15);
  border-radius: 9px;
  background: rgba(236, 170, 49, 0.1);
  color: #e4a32b;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
}

.scroll-pack__sale-badge span {
  font-size: 10px;
}

/* =========================================================
   ХАРАКТЕРИСТИКИ ПАКА
========================================================= */
.scroll-pack__features {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 16px;
}

.scroll-pack__feature {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.scroll-pack__feature-value {
  color: #674cff;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.scroll-pack__feature-label {
  color: var(--secondary-text-color);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
}

.scroll-pack__feature--blessed .scroll-pack__feature-value {
  color: #e5a52d;
}

.scroll-pack__feature-divider {
  width: 1px;
  height: 22px;
  background: var(--border-color);
}

/* =========================================================
   ЦЕНА
========================================================= */
.scroll-pack__offer {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 184px;
  min-height: 92px;
  padding: 14px 18px;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: var(--medium-bg);
  /* Без теней */
  box-shadow: none;
}

.scroll-pack__old-price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 3px;
  color: var(--secondary-text-color);
}

.scroll-pack__old-price span {
  position: relative;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.scroll-pack__old-price span::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: 50%;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
  transform: rotate(-6deg);
}

.scroll-pack__old-price small {
  font-size: 9px;
  font-weight: 600;
}

.scroll-pack__current-price {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.scroll-pack__current-price strong {
  color: var(--title-color);
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.045em;
}

.scroll-pack__current-price span {
  color: var(--secondary-text-color);
  font-size: 12px;
  font-weight: 750;
}

.scroll-pack__discount {
  position: absolute;
  top: -9px;
  right: -8px;
  padding: 5px 8px;
  border-radius: 9px;
  background: #f3aa2c;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

/* =========================================================
   НИЖНЯЯ СТРОКА / КНОПКА
========================================================= */
.scroll-pack__bottom {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border-color);
}

/*
 * Важно:
 * класс .button в проекте задаёт свои цвета.
 * Поэтому здесь намеренно перебиваем фон/цвет/бордер.
 */
.scroll-pack .scroll-pack__buy {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: auto;
  min-width: 218px;
  min-height: 48px;
  margin: 0;
  padding: 6px 7px 6px 17px;
  overflow: hidden;
  border: 0 !important;
  border-radius: 13px;
  background: var(--purple-btn-bg) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-family: inherit;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.scroll-pack .scroll-pack__buy:hover {
  background: var(--purple-btn-bg) !important;
  color: #fff !important;
  filter: brightness(1.07);
  transform: translateY(-1px);
}

.scroll-pack .scroll-pack__buy:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

.scroll-pack .scroll-pack__buy:focus {
  outline: none;
}

.scroll-pack .scroll-pack__buy-text {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.scroll-pack .scroll-pack__buy-price {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 73px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.scroll-pack .scroll-pack__buy-price span {
  color: #ffe49b;
  font-size: 9px;
}

.scroll-pack__buy-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.15) 40%, transparent 70%);
  transform: translateX(-120%);
  animation: scrollPackShine 2.8s infinite;
}

@keyframes scrollPackShine {
  0% {
    transform: translateX(-120%);
  }
  55%, 100% {
    transform: translateX(120%);
  }
}
.scroll-pack__bottom-info {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--secondary-text-color);
  font-size: 11px;
  font-weight: 650;
}

.scroll-pack__bottom-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: #e7a52c;
}

/* =========================================================
   РЕЗУЛЬТАТ ДРОПА
========================================================= */
.scroll-pack__result {
  margin-top: 0;
}

.scroll-pack__result:not(:empty) {
  margin-top: 22px;
}

.scroll-pack__empty {
  opacity: 0.6;
}

.scroll-drop {
  margin-top: 0;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--main-border-radius);
  background: transparent;
}

.scroll-drop__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.scroll-drop__title {
  color: var(--title-color);
  font-size: 16px;
  font-weight: 800;
}

.scroll-drop__time {
  color: var(--secondary-text-color);
  font-size: 12px;
}

.scroll-drop__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(64px, 1fr));
  gap: 10px;
}

.scroll-chip {
  position: relative;
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--medium-bg);
  text-align: center;
}

.scroll-chip img {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 6px;
}

.scroll-chip__cap {
  color: var(--main-text-color);
  font-size: 12px;
  opacity: 0.85;
}

.scroll-chip--blag {
  border-color: rgba(226, 180, 73, 0.75);
  /* Свечение только у благого предмета, не у основного блока */
  box-shadow: 0 0 0 1px rgba(226, 180, 73, 0.3) inset, 0 7px 18px rgba(226, 180, 73, 0.14);
}

.scroll-chip--blag::after {
  content: "благ";
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--light-bg);
  color: #b98412;
  font-size: 10px;
}

.scroll-drop__totals {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-color);
}

.scroll-total {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--medium-bg);
}

.scroll-total img {
  width: 20px;
  height: 20px;
}

.scroll-total__n {
  font-weight: 700;
}

.scroll-total__blag {
  font-size: 12px;
  opacity: 0.8;
}

/* =========================================================
   TABLET
========================================================= */
@media (max-width: 700px) {
  .scroll-pack {
    padding: 20px;
  }
  .scroll-pack__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 17px;
  }
  .scroll-pack__offer {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 14px;
  }
  .scroll-pack__old-price {
    margin: 0;
  }
  .scroll-pack__discount {
    position: static;
    margin-left: auto;
  }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 560px) {
  .scroll-pack {
    margin-top: 20px;
    margin-bottom: 28px;
    padding: 16px;
    border-radius: 16px;
  }
  .scroll-pack::before,
  .scroll-pack--promo::after,
  .scroll-pack--sale-today::after {
    opacity: 0.75;
  }
  .scroll-pack__top {
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
  }
  .scroll-pack__eyebrow {
    padding: 6px 9px;
    font-size: 10px;
    letter-spacing: 0.04em;
  }
  .scroll-pack__timer {
    gap: 6px;
    min-height: 36px;
    padding: 5px 7px;
    border-radius: 10px;
  }
  .scroll-pack__timer-icon {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
    border-radius: 7px;
  }
  .scroll-pack__timer-icon svg {
    width: 14px;
    height: 14px;
  }
  .scroll-pack__timer-label {
    display: none;
  }
  .scroll-pack__timer-content strong {
    font-size: 11px;
  }
  .scroll-pack__title-row {
    align-items: center;
    gap: 8px;
  }
  .scroll-pack__title {
    font-size: 24px;
  }
  .scroll-pack__sale-badge {
    padding: 4px 6px;
    font-size: 8px;
  }
  .scroll-pack__features {
    gap: 9px;
    margin-top: 13px;
  }
  .scroll-pack__feature {
    gap: 5px;
  }
  .scroll-pack__feature-value {
    font-size: 17px;
  }
  .scroll-pack__feature-label {
    font-size: 11px;
  }
  .scroll-pack__feature-divider {
    height: 18px;
  }
  .scroll-pack__offer {
    gap: 9px;
    padding: 11px 12px;
    border-radius: 13px;
  }
  .scroll-pack__old-price span {
    font-size: 11px;
  }
  .scroll-pack__old-price small {
    display: none;
  }
  .scroll-pack__current-price {
    gap: 6px;
  }
  .scroll-pack__current-price strong {
    font-size: 26px;
  }
  .scroll-pack__current-price span {
    font-size: 11px;
  }
  .scroll-pack__discount {
    padding: 5px 7px;
    font-size: 10px;
  }
  .scroll-pack__bottom {
    display: block;
    margin-top: 17px;
    padding-top: 15px;
  }
  .scroll-pack .scroll-pack__buy {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding-left: 15px;
    border-radius: 12px;
  }
  .scroll-pack .scroll-pack__buy-text {
    font-size: 14px;
  }
  .scroll-pack .scroll-pack__buy-price {
    height: 34px;
    min-width: 70px;
    font-size: 14px;
  }
  .scroll-pack__bottom-info {
    justify-content: center;
    width: 100%;
    margin-top: 10px;
    font-size: 10px;
  }
  .scroll-drop {
    padding: 12px;
  }
  .scroll-drop__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
}
/* =========================================================
   VERY SMALL
========================================================= */
@media (max-width: 380px) {
  .scroll-pack {
    padding: 14px;
  }
  .scroll-pack__top {
    align-items: flex-start;
  }
  .scroll-pack__eyebrow {
    max-width: 155px;
  }
  .scroll-pack__timer-content strong span {
    display: none;
  }
  .scroll-pack__title {
    font-size: 22px;
  }
  .scroll-pack__features {
    align-items: flex-start;
  }
  .scroll-pack__feature-label {
    font-size: 10px;
  }
}
/* Оверлей пака */
.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: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--border-color);
  color: var(--main-text-color);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.card-level-auto__heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.card-level-auto__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(119, 44, 232, 0.08);
  color: var(--purple-btn-bg);
  font-size: 20px;
}
.card-level-auto__title {
  font-size: 17px;
  font-weight: 600;
  color: var(--title-color);
  margin-bottom: 4px;
}
.card-level-auto__subtitle {
  color: var(--secondary-text-color);
  font-size: 12px;
  line-height: 1.4;
}
.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);
}

.card-filter-form__enchant {
  position: relative;
}
.card-filter-form__enchant::after {
  content: attr(data-label);
  position: absolute;
  top: -5px;
  right: -6px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border: 2px solid #fff;
  border-radius: 10px;
  background: #242424;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  box-sizing: border-box;
  pointer-events: none;
}
.card-filter-form__enchant.card-filter-form__btn--active::after {
  background: #fff;
  color: #7928e8;
  border-color: #7928e8;
}

@media (min-width: 701px) {
  .scroll-pack {
    padding: 18px 20px;
    margin-top: 18px;
    margin-bottom: 28px;
    border-radius: 16px;
  }
  .scroll-pack__top {
    margin-bottom: 15px;
    gap: 12px;
  }
  .scroll-pack__eyebrow {
    padding: 6px 10px;
    font-size: 10px;
  }
  .scroll-pack__timer {
    min-height: 38px;
    padding: 5px 9px;
    gap: 7px;
    border-radius: 11px;
  }
  .scroll-pack__timer-icon {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
  }
  .scroll-pack__timer-icon svg {
    width: 14px;
    height: 14px;
  }
  .scroll-pack__timer-label {
    font-size: 8px;
  }
  .scroll-pack__timer-content strong {
    font-size: 11px;
  }
  .scroll-pack__body {
    gap: 22px;
  }
  .scroll-pack__title {
    font-size: 24px;
  }
  .scroll-pack__sale-badge {
    padding: 4px 7px;
    font-size: 8px;
  }
  .scroll-pack__features {
    margin-top: 11px;
    gap: 11px;
  }
  .scroll-pack__feature-value {
    font-size: 17px;
  }
  .scroll-pack__feature-label {
    font-size: 11px;
  }
  .scroll-pack__feature-divider {
    height: 18px;
  }
  .scroll-pack__offer {
    min-width: 150px;
    min-height: 70px;
    padding: 10px 14px;
    border-radius: 14px;
  }
  .scroll-pack__old-price {
    margin-bottom: 1px;
  }
  .scroll-pack__old-price span {
    font-size: 10px;
  }
  .scroll-pack__old-price small {
    font-size: 8px;
  }
  .scroll-pack__current-price strong {
    font-size: 25px;
  }
  .scroll-pack__current-price span {
    font-size: 10px;
  }
  .scroll-pack__discount {
    top: -7px;
    right: -6px;
    padding: 4px 6px;
    font-size: 9px;
    border-radius: 7px;
  }
  .scroll-pack__bottom {
    margin-top: 15px;
    padding-top: 14px;
    gap: 12px;
  }
  .scroll-pack .scroll-pack__buy {
    min-width: 188px;
    min-height: 42px;
    padding: 5px 6px 5px 14px;
    border-radius: 11px;
  }
  .scroll-pack .scroll-pack__buy-text {
    font-size: 12px;
  }
  .scroll-pack .scroll-pack__buy-price {
    min-width: 63px;
    height: 31px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 12px;
  }
  .scroll-pack__bottom-info {
    font-size: 10px;
  }
  .scroll-pack__result:not(:empty) {
    margin-top: 16px;
  }
  .scroll-drop {
    padding: 11px;
  }
  .scroll-drop__title {
    font-size: 14px;
  }
  .scroll-drop__grid {
    gap: 8px;
  }
}
.card-inventory-container--level .card-filter-list__card--level-selected {
  outline: 3px solid var(--purple-btn-bg);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(119, 44, 232, 0.12);
}
.card-inventory-container--level .card-filter-list__selection-check {
  position: absolute;
  z-index: 8;
  top: 5px;
  left: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  border: 2px solid var(--light-bg);
  border-radius: 50%;
  background: var(--purple-btn-bg);
  color: #fff;
  font-size: 15px;
  pointer-events: none;
}

@media (max-width: 400px) {
  .card-level-auto__row {
    grid-template-columns: minmax(0, 1fr);
  }
  .card-level-up__lower-btn {
    width: 100%;
  }
}
.card-level-help {
  padding: 24px 16px;
}
.card-level-help .modal__inner {
  width: 100%;
  max-width: 560px;
}
.card-level-help .modal__content {
  width: 100%;
}
.card-level-help .modal__body {
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  padding: 28px;
  border-radius: inherit;
  overscroll-behavior: contain;
}
.card-level-help .modal__close {
  top: 18px;
  right: 18px;
  width: 30px;
  height: 30px;
}
.card-level-help__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 28px;
}
.card-level-help__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(119, 44, 232, 0.09);
  color: var(--purple-btn-bg);
  font-size: 24px;
}
.card-level-help__eyebrow {
  margin-bottom: 4px;
  color: var(--purple-btn-bg);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.card-level-help__title {
  margin: 0;
  color: var(--title-color);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.2;
}
.card-level-help__intro, .card-level-help__text, .card-level-help__footnote {
  margin: 10px 0 0;
  color: var(--secondary-text-color);
  font-size: 13px;
  line-height: 1.6;
}
.card-level-help__intro {
  margin-top: 16px;
}
.card-level-help__section {
  margin-top: 24px;
}
.card-level-help__section-title {
  margin: 0 0 12px;
  color: var(--title-color);
  font-size: 15px;
  font-weight: 600;
}
.card-level-help__prices, .card-level-help__results {
  display: grid;
  gap: 10px;
}
.card-level-help__prices {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.card-level-help__results {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.card-level-help__price, .card-level-help__result {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 13px;
  border-radius: 12px;
  background: var(--medium-bg);
}
.card-level-help__price span, .card-level-help__result span {
  color: var(--secondary-text-color);
  font-size: 11px;
  line-height: 1.4;
}
.card-level-help__price strong {
  color: var(--title-color);
  font-size: 22px;
  font-weight: 700;
}
.card-level-help__price small {
  display: block;
  margin-top: 3px;
  color: var(--secondary-text-color);
  font-size: 10px;
  font-weight: 400;
}
.card-level-help__result strong {
  color: var(--main-text-color);
  font-size: 16px;
  font-weight: 600;
}
.card-level-help__result--success {
  background: rgba(0, 153, 51, 0.07);
}
.card-level-help__result--success strong {
  color: var(--green-color);
}
.card-level-help__scroll {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
  font-size: 13px;
}
.card-level-help__scroll strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.card-level-help__scroll > span {
  color: var(--secondary-text-color);
  font-size: 12px;
  line-height: 1.5;
}
.card-level-help__badge {
  padding: 3px 6px;
  border-radius: 6px;
  color: var(--purple-btn-bg);
  background: rgba(119, 44, 232, 0.09);
  font-size: 10px;
}
.card-level-help__steps {
  margin: 18px 0 14px;
  padding: 0;
  list-style: none;
  counter-reset: card-help-step;
}
.card-level-help__steps li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 9px;
  font-size: 12px;
  line-height: 1.5;
  counter-increment: card-help-step;
}
.card-level-help__steps li::before {
  content: counter(card-help-step);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--medium-bg);
  color: var(--purple-btn-bg);
  font-size: 10px;
  font-weight: 600;
}
.card-level-help__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  color: var(--main-text-color);
  background: rgba(119, 44, 232, 0.06);
  font-size: 12px;
  line-height: 1.5;
}
.card-level-help__note i {
  color: var(--purple-btn-bg);
  font-size: 17px;
}
.card-level-help__footnote {
  margin-top: 20px;
  font-size: 11px;
}
.card-level-help .card-level-help__done {
  width: 100%;
  margin-top: 20px;
  min-height: 42px;
}
@media (max-width: 600px) {
  .card-level-help .modal__body {
    padding: 22px 18px;
  }
  .card-level-help .modal__close {
    top: 14px;
    right: 14px;
  }
  .card-level-help__title {
    font-size: 20px;
  }
  .card-level-help__icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }
  .card-level-help__prices {
    gap: 7px;
  }
  .card-level-help__price, .card-level-help__result {
    padding: 11px;
  }
  .card-level-help__result strong {
    font-size: 14px;
  }
}

.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;
}

.battle-screen--tactics {
  position: relative;
}

.battle-screen--tactics .battle-screen__turn--manual {
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 60%;
  min-width: 0;
  padding: 5px 11px;
  border-color: rgba(177, 151, 255, 0.25);
  color: #cec5e1;
  background: rgba(177, 151, 255, 0.08);
  font-size: 16px;
  line-height: 1.1;
  transition: color 0.18s, background 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.battle-screen--tactics .battle-screen__turn--manual svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.battle-screen--tactics .battle-screen__turn--manual [data-battle-status-text] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-battle-page[data-manual-turn-state] .battle-side--player, .card-battle-page[data-manual-turn-state] .battle-control__center {
  transition: border-color 0.18s, box-shadow 0.18s;
}
.card-battle-page[data-manual-turn-state][data-manual-turn-state=mine] .battle-screen__turn--manual {
  border-color: #ffe6a5;
  color: #241a08;
  background: linear-gradient(135deg, #ffe6a5, #ffc568);
  box-shadow: 0 0 0 2px rgba(255, 213, 137, 0.12), 0 0 22px rgba(255, 197, 104, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.035em;
  animation: battle-manual-turn-enter 0.45s ease-out both;
}
.card-battle-page[data-manual-turn-state][data-manual-turn-state=mine] .battle-side--player {
  border-color: rgba(154, 250, 191, 0.8);
  box-shadow: 0 0 0 1px rgba(154, 250, 191, 0.12), 0 0 22px rgba(90, 255, 166, 0.1), inset 0 0 28px rgba(90, 255, 166, 0.09);
}
.card-battle-page[data-manual-turn-state][data-manual-turn-state=mine] .battle-control__center {
  border-color: rgba(154, 250, 191, 0.65);
  box-shadow: 0 0 18px rgba(90, 255, 166, 0.08), inset 0 1px 0 rgba(154, 250, 191, 0.1);
}
.card-battle-page[data-manual-turn-state][data-manual-turn-state=mine] .battle-control__round, .card-battle-page[data-manual-turn-state][data-manual-turn-state=mine] .battle-side--player .battle-player__label {
  color: #b3f8cf;
}

.battle-arena--tactics .battle-manual--limited:not(.battle-manual--urgent) .battle-manual__timer {
  color: #ffd589;
}

@keyframes battle-manual-turn-enter {
  from {
    opacity: 0.55;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.battle-side__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.battle-tactics {
  margin: 0 0 7px;
}
.battle-tactics[hidden], .battle-tactics [hidden] {
  display: none !important;
}
.battle-tactics svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.battle-tactics button {
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.battle-tactics button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.battle-tactics__buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}
.battle-tactics__button {
  --tactic-color: #ffd589;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  min-height: 48px;
  padding: 5px 3px;
  border: 1px solid rgba(255, 213, 137, 0.28);
  border-radius: 11px;
  color: var(--tactic-color);
  background: linear-gradient(150deg, rgba(255, 213, 137, 0.15), rgba(255, 213, 137, 0.035));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: background 0.16s, border-color 0.16s, opacity 0.16s;
}
.battle-tactics__button span {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
}
.battle-tactics__button--boost {
  --tactic-color: #cbb4ff;
  border-color: rgba(185, 148, 255, 0.28);
  background: linear-gradient(150deg, rgba(161, 115, 255, 0.22), rgba(161, 115, 255, 0.045));
}
.battle-tactics__button--heal {
  --tactic-color: #9ef1c1;
  border-color: rgba(116, 237, 174, 0.28);
  background: linear-gradient(150deg, rgba(92, 225, 152, 0.18), rgba(92, 225, 152, 0.035));
}
.battle-tactics__button[aria-expanded=true], .battle-tactics__button:hover:not(:disabled) {
  border-color: var(--tactic-color);
  background: rgba(255, 255, 255, 0.11);
}
.battle-tactics__button:disabled {
  opacity: 0.4;
  cursor: default;
}
.battle-tactics__button--resting {
  border-style: dashed;
}
.battle-tactics__status {
  display: block;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 10px;
  line-height: 1.25;
  text-wrap: balance;
}
.battle-tactics__overlay {
  position: fixed;
  inset: 0;
  z-index: 10040;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
  background: rgba(3, 6, 15, 0.72);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}
.battle-tactics__dialog {
  width: min(420px, 100%);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px;
  border: 1px solid rgba(255, 213, 137, 0.32);
  border-radius: 20px;
  background: radial-gradient(circle at top left, rgba(135, 93, 234, 0.18), transparent 65%), #141526;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-align: left;
  animation: battle-tactics-dialog 0.2s ease-out;
}
.battle-tactics__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.battle-tactics__head b {
  display: block;
  font-size: 21px;
  line-height: 1.2;
}
.battle-tactics__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #ffd589;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.battle-tactics__close {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: #e4def3;
  background: rgba(255, 255, 255, 0.05);
}
.battle-tactics__intro, .battle-tactics__rule {
  margin: 12px 0;
  color: #bcbacf;
  font-size: 13px;
  line-height: 1.45;
}
.battle-tactics__rule {
  margin-bottom: 0;
  color: #a6a3bd;
  font-size: 12px;
}
.battle-tactics__choices {
  display: grid;
  gap: 8px;
}
.battle-tactics__choice {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 76px;
  padding: 12px;
  border: 1px solid rgba(255, 213, 137, 0.18);
  border-radius: 13px;
  background: rgba(255, 213, 137, 0.04);
  color: #fff;
  text-align: left;
  transition: background 0.16s, border-color 0.16s;
}
.battle-tactics__choice svg {
  width: 30px;
  height: 30px;
  color: #ffd589;
}
.battle-tactics__choice b {
  display: block;
  font-size: 15px;
  line-height: 1.25;
}
.battle-tactics__choice small {
  display: block;
  margin-top: 4px;
  color: #bfbbd0;
  font-size: 12px;
  line-height: 1.4;
}
.battle-tactics__choice:hover {
  border-color: rgba(255, 213, 137, 0.6);
  background: rgba(255, 213, 137, 0.1);
}
.battle-tactics__pick {
  position: fixed;
  z-index: 10035;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: min(520px, 100vw - 20px);
  padding: 9px 10px 9px 14px;
  border: 1px solid rgba(203, 180, 255, 0.45);
  border-radius: 15px;
  background: rgba(21, 18, 40, 0.97);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  text-align: left;
}
.battle-tactics__pick b {
  display: block;
  color: #eee5ff;
  font-size: 14px;
  line-height: 1.2;
}
.battle-tactics__pick span {
  display: block;
  margin-top: 3px;
  color: #c8bfdc;
  font-size: 12px;
  line-height: 1.3;
}
.battle-tactics__pick button {
  min-height: 44px;
  flex: 0 0 auto;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 11px;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  font-size: 12px;
  font-weight: 700;
}
.battle-tactics__enemy {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 213, 137, 0.35);
  border-radius: 999px;
  background: rgba(255, 213, 137, 0.1);
  color: #ffd589;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.battle-tactics__enemy[hidden] {
  display: none;
}
.battle-tactics__enemy svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.battle-tactics__badge {
  position: absolute;
  z-index: 12;
  top: 8px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid #ffd589;
  border-radius: 9px;
  color: #ffd589;
  background: rgba(26, 18, 35, 0.94);
  box-shadow: 0 2px 14px rgba(255, 213, 137, 0.2);
  pointer-events: none;
}
.battle-tactics__badge[hidden] {
  display: none;
}
.battle-tactics__badge svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.battle-tactics__badge--boost {
  left: 6px;
  right: auto;
  border-color: #cbb4ff;
  color: #cbb4ff;
  box-shadow: 0 2px 14px rgba(203, 180, 255, 0.2);
}

.battle-arena--tactics .battle-control {
  width: min(100%, 940px);
  grid-template-columns: minmax(0, 200px) minmax(0, 500px) minmax(0, 200px);
  gap: 10px;
}
.battle-arena--tactics .battle-control__center {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "meta meta" "tactics actions" "feedback feedback";
  align-items: center;
  gap: 5px 8px;
  padding: 9px 10px;
  border-radius: 14px;
}
.battle-arena--tactics .battle-control__meta {
  grid-area: meta;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 18px;
}
.battle-arena--tactics .battle-control__round {
  flex: 0 0 auto;
  margin: 0;
  font-size: 11px;
}
.battle-arena--tactics .battle-manual {
  flex: 1;
  justify-content: flex-end;
  gap: 14px;
  margin: 0;
  font-size: 11px;
}
.battle-arena--tactics .battle-manual__notice {
  display: none;
}
.battle-arena--tactics .battle-tactics {
  display: contents;
}
.battle-arena--tactics .battle-tactics__buttons {
  grid-area: tactics;
  gap: 5px;
}
.battle-arena--tactics .battle-tactics__button {
  flex-direction: row;
  gap: 5px;
  min-height: 44px;
  padding: 5px;
}
.battle-arena--tactics .battle-tactics__button span {
  font-size: 12px;
}
.battle-arena--tactics .battle-tactics__button svg {
  width: 18px;
  height: 18px;
}
.battle-arena--tactics .battle-control__buttons {
  grid-area: actions;
  display: grid;
  grid-template-columns: 44px 44px;
  align-items: center;
  gap: 4px;
}
.battle-arena--tactics .battle-control__button {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}
.battle-arena--tactics .battle-control__button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.battle-arena--tactics .battle-control__button--surrender {
  color: #e0acb5;
}
.battle-arena--tactics .battle-control__button--sync {
  grid-column: 1/-1;
  width: auto;
  padding: 0 10px;
}
.battle-arena--tactics .battle-control__button[hidden] {
  display: none;
}
.battle-arena--tactics .battle-control__button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.battle-arena--tactics .battle-control__text, .battle-arena--tactics .battle-tactics__status {
  grid-area: feedback;
  max-width: calc(50% - 5px);
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  line-height: 1.4;
}
.battle-arena--tactics .battle-control__text {
  justify-self: start;
  text-align: left;
}
.battle-arena--tactics .battle-tactics__status {
  justify-self: end;
  text-align: right;
}
.battle-arena--tactics .battle-tactics__pick {
  position: absolute;
  top: 29px;
  right: 6px;
  bottom: 5px;
  left: 6px;
  width: auto;
  transform: none;
  padding: 6px 8px;
  border-radius: 10px;
}
.battle-arena--tactics .battle-tactics__pick span {
  font-size: 11px;
  line-height: 1.25;
}
.battle-arena--tactics .battle-control__center:has([data-tactic-pick]:not([hidden])) .battle-tactics__buttons, .battle-arena--tactics .battle-control__center:has([data-tactic-pick]:not([hidden])) .battle-control__buttons,
.battle-arena--tactics .battle-control__center:has([data-tactic-pick]:not([hidden])) .battle-control__text, .battle-arena--tactics .battle-control__center:has([data-tactic-pick]:not([hidden])) .battle-tactics__status {
  visibility: hidden;
}

.battle-card--tactic-target {
  outline: 2px solid #d0b6ff;
  outline-offset: 2px;
  box-shadow: 0 0 20px rgba(178, 141, 255, 0.35);
  cursor: pointer;
}
.battle-card--tactic-target:focus-visible {
  outline-color: #fff;
}

.battle-tactic-fx, .battle-tactic-reveal {
  --tactic-fx-color: #ffd589;
  color: var(--tactic-fx-color);
  pointer-events: none;
}
.battle-tactic-fx--boost, .battle-tactic-reveal--boost {
  --tactic-fx-color: #c6a8ff;
}
.battle-tactic-fx--heal, .battle-tactic-fx--mend, .battle-tactic-reveal--heal, .battle-tactic-reveal--mend {
  --tactic-fx-color: #85ffc0;
}
.battle-tactic-fx--trap, .battle-tactic-reveal--trap {
  --tactic-fx-color: #ff7c96;
}
.battle-tactic-fx--mirror, .battle-tactic-reveal--mirror {
  --tactic-fx-color: #83e4ff;
}

.battle-tactic-fx {
  position: absolute;
  inset: 0;
  z-index: 14;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 66%);
  animation: battle-tactic-flash 0.6s ease-out both;
}
.battle-tactic-fx__ring {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-shadow: 0 0 16px currentColor, inset 0 0 12px currentColor;
  animation: battle-tactic-ring 0.6s ease-out both;
}
.battle-tactic-fx__symbol {
  display: grid;
  place-items: center;
  width: clamp(28px, 55%, 56px);
  aspect-ratio: 1;
  filter: drop-shadow(0 0 8px currentColor);
  animation: battle-tactic-symbol 0.6s ease-out both;
}
.battle-tactic-fx__symbol svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.battle-tactic-fx__spark {
  position: absolute;
  left: calc(50% - 3px);
  top: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 9px currentColor;
  --spark-angle: calc(var(--spark-index) * 60deg);
  animation: battle-tactic-spark 0.6s ease-out both;
}

.battle-tactic-reveal {
  position: absolute;
  z-index: 10036;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 20px);
  padding: 12px 18px;
  border: 1px solid currentColor;
  border-radius: 16px;
  background: rgba(15, 12, 28, 0.96);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  animation: battle-tactic-flash 0.66s ease-out both;
}
.battle-tactic-reveal__symbol {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
}
.battle-tactic-reveal__symbol svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.battle-tactic-reveal__label {
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}

.battle-tactic-projectile {
  position: absolute;
  z-index: 10034;
  height: 5px;
  color: #ff7c96;
  transform-origin: left center;
  pointer-events: none;
}
.battle-tactic-projectile--mirror {
  color: #83e4ff;
}
.battle-tactic-projectile__beam {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, currentColor 25%, #fff 90%, currentColor);
  box-shadow: 0 0 12px currentColor, 0 0 24px currentColor;
  transform-origin: left center;
  animation: battle-tactic-projectile 0.35s ease-out both;
}

@keyframes battle-tactics-dialog {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes battle-tactic-flash {
  0% {
    opacity: 0;
  }
  18%, 70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes battle-tactic-ring {
  from {
    opacity: 1;
    transform: scale(0.35);
  }
  to {
    opacity: 0;
    transform: scale(1.65);
  }
}
@keyframes battle-tactic-symbol {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  25%, 65% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.12);
  }
}
@keyframes battle-tactic-spark {
  from {
    opacity: 1;
    transform: rotate(var(--spark-angle)) translateX(10px);
  }
  to {
    opacity: 0;
    transform: rotate(var(--spark-angle)) translateX(58px) scale(0.3);
  }
}
@keyframes battle-tactic-projectile {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }
  35% {
    opacity: 1;
    transform: scaleX(1);
  }
  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}
@media (max-width: 768px) {
  .battle-screen--tactics .battle-screen__turn--manual {
    gap: 5px;
    padding: 4px 7px;
    font-size: 13px;
  }
  .battle-screen--tactics .battle-screen__turn--manual svg {
    width: 15px;
    height: 15px;
  }
  .battle-arena--tactics .battle-control {
    grid-template-columns: 1fr 1fr;
    gap: 5px;
  }
  .battle-arena--tactics .battle-control__center {
    padding: 6px;
    gap: 4px;
  }
  .battle-arena--tactics .battle-control__meta {
    gap: 8px;
  }
  .battle-arena--tactics .battle-control__round {
    font-size: 10px;
  }
  .battle-arena--tactics .battle-manual {
    gap: 10px;
    font-size: 10px;
  }
  .battle-arena--tactics .battle-tactics__button {
    flex-direction: column;
    gap: 2px;
    padding: 3px 1px;
  }
  .battle-arena--tactics .battle-tactics__button span {
    font-size: 10px;
  }
  .battle-arena--tactics .battle-tactics__button svg {
    width: 17px;
    height: 17px;
  }
  .battle-arena--tactics .battle-tactics__buttons {
    gap: 3px;
  }
  .battle-arena--tactics .battle-control__text {
    display: none;
  }
  .battle-arena--tactics .battle-tactics__status {
    max-width: 100%;
    justify-self: center;
    text-align: center;
  }
  .battle-tactics {
    margin-bottom: 6px;
  }
  .battle-tactics__button {
    min-height: 44px;
    flex-direction: row;
    gap: 5px;
  }
  .battle-tactics__button span {
    font-size: 12px;
  }
  .battle-tactics__button svg {
    width: 17px;
    height: 17px;
  }
  .battle-tactics__status {
    font-size: 10px;
  }
  .battle-tactics__badge {
    width: 22px;
    height: 22px;
    top: 5px;
    right: 4px;
    border-radius: 7px;
  }
  .battle-tactics__badge svg {
    width: 15px;
    height: 15px;
  }
  .battle-tactics__badge--boost {
    right: auto;
    left: 4px;
  }
  .battle-tactics__enemy {
    font-size: 9px;
    padding: 4px 5px;
    gap: 2px;
  }
  .battle-tactics__enemy svg {
    width: 13px;
    height: 13px;
  }
  .battle-tactic-reveal {
    padding: 10px 13px;
  }
  .battle-tactic-reveal__label {
    font-size: 14px;
  }
}
@media (max-width: 768px) and (max-height: 700px) {
  .battle-arena.battle-arena--tactics {
    grid-template-rows: minmax(142px, 1fr) auto minmax(142px, 1fr);
  }
  .battle-arena--tactics .battle-manual__notice {
    display: none;
  }
  .battle-tactics__status {
    font-size: 9px;
  }
}
@media (min-width: 769px) and (max-height: 700px) {
  .battle-arena.battle-arena--tactics {
    grid-template-rows: minmax(165px, 1fr) auto minmax(165px, 1fr);
  }
  .battle-arena--tactics .battle-control__text, .battle-arena--tactics .battle-manual__notice {
    display: none;
  }
  .battle-arena--tactics .battle-tactics__status {
    max-width: 100%;
    justify-self: center;
    text-align: center;
  }
}
@media (max-height: 500px) and (min-width: 641px) {
  .battle-arena.battle-arena--tactics {
    grid-template-columns: minmax(0, 1fr) minmax(200px, 0.8fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
  }
  .battle-arena--tactics .battle-control {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
  }
  .battle-arena--tactics .battle-control__center {
    width: 100%;
    grid-template-areas: "meta meta" "tactics tactics" "feedback actions";
  }
  .battle-arena--tactics .battle-control__meta {
    gap: 5px;
  }
  .battle-arena--tactics .battle-manual {
    gap: 5px;
    font-size: 9px;
  }
  .battle-arena--tactics .battle-manual__progress {
    font-size: 8px;
  }
  .battle-arena--tactics .battle-control__round {
    font-size: 9px;
  }
  .battle-arena--tactics .battle-tactics__button {
    flex-direction: column;
    gap: 2px;
    padding: 3px;
  }
  .battle-arena--tactics .battle-tactics__button span {
    font-size: 10px;
  }
  .battle-arena--tactics .battle-tactics__status {
    max-width: 100%;
    font-size: 9px;
    text-align: left;
    justify-self: start;
  }
  .battle-arena--tactics .battle-control__buttons {
    gap: 2px;
  }
  .battle-arena--tactics .battle-control__text, .battle-arena--tactics .battle-manual__notice {
    display: none;
  }
  .battle-arena--tactics .battle-buff {
    width: 100%;
    padding: 5px;
  }
  .battle-arena--tactics .battle-buff__text span {
    display: none;
  }
  .battle-arena--tactics .battle-side__head {
    gap: 4px;
  }
  .battle-arena--tactics .battle-player {
    flex: 1;
    gap: 5px;
  }
  .battle-arena--tactics .battle-player__avatar {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
  }
  .battle-arena--tactics .battle-player__name {
    max-width: 100%;
  }
  .battle-arena--tactics .battle-side__cards {
    --battle-card-reserved-height: 155px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, min(105px, (100cqh - var(--battle-card-reserved-height)) * 74 / 218) * 2 + var(--battle-card-gap));
    gap: 5px;
  }
  .battle-arena--tactics .battle-player__rank {
    display: none;
  }
  .battle-tactics__enemy span {
    display: none;
  }
  .battle-tactics__button {
    flex-direction: column;
  }
  .battle-tactics__button span {
    font-size: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .card-battle-page[data-manual-turn-state][data-manual-turn-state=mine] .battle-screen__turn--manual {
    animation: none;
  }
  .battle-tactics__dialog, .battle-tactic-fx, .battle-tactic-reveal,
  .battle-tactic-fx__ring, .battle-tactic-fx__symbol, .battle-tactic-fx__spark, .battle-tactic-projectile__beam {
    animation-duration: 0.18s;
    animation-timing-function: linear;
  }
  .battle-tactic-fx__ring, .battle-tactic-fx__symbol, .battle-tactic-fx__spark {
    animation: none;
  }
}
.card-battle-page {
  height: 100dvh;
  overflow: hidden;
}
.card-battle-page .header,
.card-battle-page .footer,
.card-battle-page .site-banner {
  display: none;
}

.card-battle-page[data-manual-turn-state] .battle-turn-notice {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  width: min(340px, 100vw - 32px);
  padding: 21px 24px;
  border: 1px solid rgba(255, 230, 165, 0.85);
  border-radius: 20px;
  color: #ffe6a5;
  background: radial-gradient(ellipse at top, rgba(255, 197, 104, 0.2), transparent 75%), linear-gradient(135deg, #272035, #151221);
  box-shadow: 0 12px 42px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 230, 165, 0.15), 0 0 28px rgba(255, 197, 104, 0.16);
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}
.card-battle-page[data-manual-turn-state] .battle-turn-notice[hidden] {
  display: none;
}
.card-battle-page[data-manual-turn-state] .battle-turn-notice *, .card-battle-page[data-manual-turn-state] .battle-turn-notice::before, .card-battle-page[data-manual-turn-state] .battle-turn-notice::after {
  pointer-events: none;
}
.card-battle-page[data-manual-turn-state] .battle-turn-notice--visible {
  animation: battle-turn-notice 1s ease-out both;
}
.card-battle-page[data-manual-turn-state] .battle-turn-notice__icon {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  height: 48px;
  border: 1px solid rgba(255, 230, 165, 0.4);
  border-radius: 15px;
  color: #241a08;
  background: linear-gradient(135deg, #ffe6a5, #ffc568);
  box-shadow: 0 0 18px rgba(255, 197, 104, 0.18);
}
.card-battle-page[data-manual-turn-state] .battle-turn-notice__icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card-battle-page[data-manual-turn-state] .battle-turn-notice__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
}
.card-battle-page[data-manual-turn-state] .battle-turn-notice__title {
  font-size: 34px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.025em;
}
.card-battle-page[data-manual-turn-state] .battle-turn-notice__hint {
  color: rgba(255, 246, 222, 0.8);
  font-size: 12px;
  line-height: 1.35;
}

@keyframes battle-turn-notice {
  0% {
    opacity: 0;
    transform: translate(-50%, -45%) scale(0.94);
  }
  15%, 75% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -55%) scale(0.98);
  }
}
@media (max-width: 480px) {
  .card-battle-page[data-manual-turn-state] .battle-turn-notice {
    gap: 12px;
    padding: 18px;
    border-radius: 18px;
  }
  .card-battle-page[data-manual-turn-state] .battle-turn-notice__icon {
    flex-basis: 44px;
    height: 44px;
  }
  .card-battle-page[data-manual-turn-state] .battle-turn-notice__title {
    font-size: 30px;
  }
  .card-battle-page[data-manual-turn-state] .battle-turn-notice__hint {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .card-battle-page[data-manual-turn-state] .battle-turn-notice--visible {
    animation-name: battle-turn-notice-fade;
  }
}
@keyframes battle-turn-notice-fade {
  0%, 100% {
    opacity: 0;
  }
  15%, 75% {
    opacity: 1;
  }
}
.battle-card--tired {
  opacity: 0.86;
}
.battle-card--tired .battle-card__image {
  filter: grayscale(0.35) brightness(0.82);
}
.battle-card--tired .battle-card__stats span {
  color: #d07996;
  background: rgba(208, 121, 150, 0.14);
}

.battle-card__tired {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 8px;
  z-index: 5;
  padding: 5px 7px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #d07996, #7b4df2);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

.battle-screen {
  width: 100%;
  height: 100dvh;
  box-sizing: border-box;
  padding: 10px 14px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  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;
  gap: 12px;
  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 {
  max-width: 60%;
  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);
  text-align: center;
  overflow-wrap: anywhere;
}

.battle-arena {
  width: min(100%, 1180px);
  flex: 1;
  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 {
  --battle-card-gap: 10px;
  --battle-card-reserved-height: 122px;
  width: 100%;
  max-width: 622px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--battle-card-gap);
  overflow: visible;
}

@supports (height: 1cqh) and (container-type: size) {
  .battle-arena {
    grid-template-rows: minmax(260px, 1fr) auto minmax(260px, 1fr);
  }
  .battle-side {
    min-height: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    container-type: size;
  }
  .battle-side__head {
    flex: 0 0 auto;
  }
  .battle-side__cards {
    width: min(100%, min(148px, (100cqh - var(--battle-card-reserved-height)) * 74 / 109) * 4 + var(--battle-card-gap) * 3);
    flex: 0 0 auto;
    margin: auto;
  }
}
.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: minmax(0, 240px) minmax(0, 220px) minmax(0, 240px);
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.battle-control__center {
  min-width: 0;
  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 {
    --battle-card-gap: 4px;
    --battle-card-reserved-height: 92px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  @supports (height: 1cqh) and (container-type: size) {
    .battle-arena {
      grid-template-rows: minmax(190px, 1fr) auto minmax(190px, 1fr);
    }
  }
  .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 (min-width: 769px) and (max-height: 800px) {
  .battle-screen {
    padding-top: 6px;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }
  .battle-screen__top {
    margin-bottom: 4px;
  }
  .battle-arena {
    gap: 8px;
  }
  .battle-side {
    padding: 6px;
  }
  .battle-side__head {
    margin-bottom: 4px;
  }
  .battle-side__cards {
    --battle-card-reserved-height: 98px;
  }
  @supports (height: 1cqh) and (container-type: size) {
    .battle-arena {
      grid-template-rows: minmax(200px, 1fr) auto minmax(200px, 1fr);
    }
  }
  .battle-card__body {
    padding: 4px;
  }
  .battle-card__seal {
    margin-bottom: 3px;
    padding: 3px;
    font-size: 8px;
  }
  .battle-card__hp {
    height: 13px;
    margin-bottom: 4px;
  }
  .battle-card__hp-value {
    font-size: 8px;
  }
  .battle-card__stats {
    gap: 3px;
  }
  .battle-card__stats span {
    padding: 3px 1px;
    font-size: 7px;
    font-size: clamp(7px, 3cqh, 9px);
  }
  .battle-control__center {
    padding: 8px;
  }
  .battle-control__round {
    margin-bottom: 3px;
    font-size: 10px;
  }
  .battle-control__text {
    min-height: 28px;
    margin-bottom: 6px;
    font-size: 11px;
  }
}
@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 {
    --battle-card-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 #b197ff;
  box-shadow: 0 0 24px rgba(177, 151, 255, 0.5);
  transform: translateY(-4px);
}

.battle-card--manual-ready, .battle-card--manual-target {
  cursor: pointer;
}
.battle-card--manual-ready:focus-visible, .battle-card--manual-target:focus-visible {
  outline: 2px solid #c5ffdc;
  outline-offset: 3px;
}
.battle-card--manual-target {
  outline: 2px solid #c5ffdc;
  box-shadow: 0 0 16px rgba(90, 255, 166, 0.25);
}
.battle-card--manual-used .battle-card__image {
  filter: saturate(0.35) brightness(0.7);
}
.battle-card--manual-used .battle-card__image::after {
  content: "Ход использован";
  position: absolute;
  inset: auto 4px 4px;
  padding: 5px 2px;
  border-radius: 8px;
  color: #fff;
  background: rgba(16, 9, 31, 0.85);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
}

.battle-manual {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  margin-bottom: 6px;
  font-size: 10px;
}
.battle-manual[hidden] {
  display: none;
}
.battle-manual__progress {
  color: rgba(255, 255, 255, 0.7);
}
.battle-manual__timer {
  color: #c5ffdc;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.battle-manual--urgent .battle-manual__timer {
  color: #f68aa6;
}
.battle-manual__notice {
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 9px;
  line-height: 1.3;
}

.battle-control__button--surrender, .battle-control__button--sync {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.battle-control__button:disabled {
  opacity: 0.45;
  cursor: default;
}
.battle-control__button[hidden] {
  display: none;
}

.battle-finish-panel__rewards--tournament {
  grid-template-columns: minmax(0, 1fr);
  text-align: center;
}

.battle-finish-panel__note {
  max-width: 320px;
  margin: 12px auto;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .battle-card--manual-used .battle-card__image::after {
    padding: 3px 1px;
    font-size: 7px;
  }
}
.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;
}

body.deck-page[class*=deck-theme-] {
  --dt-bg: #f5f5f7;
  --dt-bg-pattern: none;
  --dt-text: #17171b;
  --dt-muted: #72727d;
  --dt-accent: #8b35f1;
  --dt-accent2: #b16cff;
  --dt-accent-rgb: 139, 53, 241;
  --dt-header: rgba(255,255,255,.92);
  --dt-footer: rgba(255,255,255,.88);
  --dt-surface: rgba(255,255,255,.92);
  --dt-surface2: rgba(248,248,251,.94);
  --dt-surface3: rgba(244,244,248,.96);
  --dt-border: rgba(20,20,28,.10);
  --dt-divider: rgba(20,20,28,.08);
  --dt-shadow: 0 18px 50px rgba(20,20,30,.10);
  --dt-shadow-small: 0 8px 24px rgba(20,20,30,.08);
  --dt-radius-xl: 24px;
  --dt-radius-lg: 18px;
  --dt-radius-md: 14px;
  --dt-radius-sm: 10px;
  --dt-input: rgba(255,255,255,.96);
  --dt-button-text: #fff;
  --dt-font: inherit;
  color: var(--dt-text) !important;
  background: var(--dt-bg) !important;
  font-family: var(--dt-font);
  position: relative;
  min-height: 100vh;
}

body.deck-page[class*=deck-theme-]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--dt-bg-pattern);
}

body.deck-page[class*=deck-theme-] .wrapper {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

body.deck-page[class*=deck-theme-] .main {
  background: transparent !important;
}

body.deck-page[class*=deck-theme-] .header {
  background: var(--dt-header) !important;
  border-bottom: 1px solid var(--dt-border) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.035);
  color: var(--dt-text) !important;
}

body.deck-page[class*=deck-theme-] .header__link,
body.deck-page[class*=deck-theme-] .header__item,
body.deck-page[class*=deck-theme-] .logo,
body.deck-page[class*=deck-theme-] .header__link-sub a {
  color: var(--dt-text) !important;
}

body.deck-page[class*=deck-theme-] .logo span,
body.deck-page[class*=deck-theme-] .header__link--active,
body.deck-page[class*=deck-theme-] .header__link:hover,
body.deck-page[class*=deck-theme-] .header__item:hover,
body.deck-page[class*=deck-theme-] .header__link-sub a:hover {
  color: var(--dt-accent) !important;
}

body.deck-page[class*=deck-theme-] .header__link-sub {
  background: var(--dt-surface) !important;
  border: 1px solid var(--dt-border) !important;
  box-shadow: var(--dt-shadow-small) !important;
}

body.deck-page[class*=deck-theme-] .footer {
  margin-top: 42px;
  background: var(--dt-footer) !important;
  border-top: 1px solid var(--dt-border) !important;
  color: var(--dt-muted) !important;
}

body.deck-page[class*=deck-theme-] .footer__item,
body.deck-page[class*=deck-theme-] .footer__desc,
body.deck-page[class*=deck-theme-] .footer__desc-link {
  color: var(--dt-muted) !important;
}

body.deck-page[class*=deck-theme-] .footer__item:hover,
body.deck-page[class*=deck-theme-] .footer__desc-link:hover {
  color: var(--dt-accent) !important;
}

body.deck-page[class*=deck-theme-] .deck__inner {
  width: min(100%, 880px);
}

body.deck-page[class*=deck-theme-] .back-link {
  color: var(--dt-accent) !important;
  font-weight: 700;
}

body.deck-page[class*=deck-theme-] .deck-modern {
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
  padding: 20px;
  border: 1px solid var(--dt-border) !important;
  border-radius: var(--dt-radius-xl) !important;
  background: var(--dt-surface) !important;
  box-shadow: var(--dt-shadow) !important;
  color: var(--dt-text) !important;
}

body.deck-page[class*=deck-theme-] .deck-modern__title,
body.deck-page[class*=deck-theme-] .deck-modern__stat strong,
body.deck-page[class*=deck-theme-] .deck-modern__user,
body.deck-page[class*=deck-theme-] .deck-modern__action {
  color: var(--dt-text) !important;
}

body.deck-page[class*=deck-theme-] .deck-modern__desc,
body.deck-page[class*=deck-theme-] .deck-modern__stat span {
  color: var(--dt-muted) !important;
}

body.deck-page[class*=deck-theme-] .deck-modern__stat {
  background: var(--dt-surface2) !important;
  border: 1px solid var(--dt-border) !important;
  border-radius: var(--dt-radius-lg) !important;
  box-shadow: none !important;
}

body.deck-page[class*=deck-theme-] .deck-modern__user,
body.deck-page[class*=deck-theme-] .deck-modern__action {
  background: var(--dt-surface2) !important;
  border: 1px solid var(--dt-border) !important;
  box-shadow: none !important;
}

body.deck-page[class*=deck-theme-] .deck-modern__action:hover {
  background: var(--dt-accent) !important;
  border-color: var(--dt-accent) !important;
  color: var(--dt-button-text) !important;
}

body.deck-page[class*=deck-theme-] .deck__list {
  position: relative;
  overflow: hidden;
  padding: 12px;
  border: 1px solid var(--dt-border) !important;
  border-radius: var(--dt-radius-xl) !important;
  background: var(--dt-surface) !important;
  box-shadow: var(--dt-shadow) !important;
}

body.deck-page[class*=deck-theme-] .deck__item {
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

body.deck-page[class*=deck-theme-] .deck__item:hover {
  transform: translateY(-3px);
  box-shadow: var(--dt-shadow-small);
}

body.deck-page[class*=deck-theme-] .deck__item img,
body.deck-page[class*=deck-theme-] .deck__item video {
  filter: none !important;
}

body.deck-page[class*=deck-theme-] .secondary-title {
  color: var(--dt-text) !important;
  font-family: var(--dt-font);
}

body.deck-page[class*=deck-theme-] .comments {
  position: relative;
  padding: 16px;
  border: 1px solid var(--dt-border) !important;
  border-radius: var(--dt-radius-xl) !important;
  background: var(--dt-surface) !important;
  box-shadow: var(--dt-shadow) !important;
  color: var(--dt-text) !important;
}

body.deck-page[class*=deck-theme-] .comments__sort-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

body.deck-page[class*=deck-theme-] .comments__change-sort {
  padding: 9px 13px;
  border: 1px solid var(--dt-border) !important;
  border-radius: 999px !important;
  background: var(--dt-surface2) !important;
  color: var(--dt-muted) !important;
  font-weight: 700;
}

body.deck-page[class*=deck-theme-] .comments__change-sort--active,
body.deck-page[class*=deck-theme-] .comments__change-sort:hover {
  border-color: rgba(var(--dt-accent-rgb), 0.34) !important;
  background: rgba(var(--dt-accent-rgb), 0.12) !important;
  color: var(--dt-accent) !important;
}

body.deck-page[class*=deck-theme-] .comments__send-form {
  padding: 14px;
  border: 1px solid var(--dt-border) !important;
  border-radius: var(--dt-radius-lg) !important;
  background: var(--dt-surface2) !important;
}

body.deck-page[class*=deck-theme-] .comments__send-form textarea {
  width: 100%;
  min-height: 120px;
  padding: 15px 16px;
  border: 1px solid var(--dt-border) !important;
  border-radius: var(--dt-radius-md) !important;
  outline: none !important;
  background: var(--dt-input) !important;
  color: var(--dt-text) !important;
  font: inherit;
  line-height: 1.5;
  box-shadow: none !important;
}

body.deck-page[class*=deck-theme-] .comments__send-form textarea::-moz-placeholder {
  color: var(--dt-muted) !important;
  opacity: 0.78;
}

body.deck-page[class*=deck-theme-] .comments__send-form textarea::placeholder {
  color: var(--dt-muted) !important;
  opacity: 0.78;
}

body.deck-page[class*=deck-theme-] .comments__send-form textarea:focus {
  border-color: var(--dt-accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--dt-accent-rgb), 0.12) !important;
}

body.deck-page[class*=deck-theme-] .comments__actions {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--dt-divider) !important;
}

body.deck-page[class*=deck-theme-] .comments__actions-btn {
  border: 1px solid var(--dt-border) !important;
  background: var(--dt-surface3) !important;
  color: var(--dt-text) !important;
}

body.deck-page[class*=deck-theme-] .comments__actions-btn:hover {
  background: var(--dt-accent) !important;
  border-color: var(--dt-accent) !important;
  color: var(--dt-button-text) !important;
}

body.deck-page[class*=deck-theme-] .comments__close-form-btn {
  color: var(--dt-muted) !important;
}

body.deck-page[class*=deck-theme-] .comments__send-btn {
  background: var(--dt-accent) !important;
  color: var(--dt-button-text) !important;
  border-color: var(--dt-accent) !important;
  box-shadow: none !important;
}

body.deck-page[class*=deck-theme-] .comments__selected-sticker {
  border: 1px solid var(--dt-border) !important;
  background: var(--dt-surface3) !important;
  color: var(--dt-text) !important;
}

body.deck-page[class*=deck-theme-] .comments__selected-sticker-title {
  color: var(--dt-text) !important;
}

body.deck-page[class*=deck-theme-] .comments__selected-sticker-text,
body.deck-page[class*=deck-theme-] .comments__selected-sticker-remove {
  color: var(--dt-muted) !important;
}

body.deck-page[class*=deck-theme-] .comments__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

body.deck-page[class*=deck-theme-] .comments__inner {
  padding: 14px;
  border: 1px solid var(--dt-border) !important;
  border-radius: var(--dt-radius-lg) !important;
  background: var(--dt-surface2) !important;
  box-shadow: none !important;
  color: var(--dt-text) !important;
}

body.deck-page[class*=deck-theme-] .comments__name,
body.deck-page[class*=deck-theme-] .comments__body,
body.deck-page[class*=deck-theme-] .comments__rating-number {
  color: var(--dt-text) !important;
}

body.deck-page[class*=deck-theme-] .comments__date,
body.deck-page[class*=deck-theme-] .comments__reply-btn,
body.deck-page[class*=deck-theme-] .comments__controls-btn,
body.deck-page[class*=deck-theme-] .comments__rating-btn {
  color: var(--dt-muted) !important;
}

body.deck-page[class*=deck-theme-] .comments__name:hover,
body.deck-page[class*=deck-theme-] .comments__reply-btn:hover,
body.deck-page[class*=deck-theme-] .comments__controls-btn:hover,
body.deck-page[class*=deck-theme-] .comments__rating-btn:hover {
  color: var(--dt-accent) !important;
}

body.deck-page[class*=deck-theme-] .comments__club-tag {
  color: var(--dt-accent) !important;
}

body.deck-page[class*=deck-theme-] .comments__rating {
  border: 1px solid var(--dt-border) !important;
  border-radius: 999px;
  background: var(--dt-surface3) !important;
}

body.deck-page[class*=deck-theme-] .comments__footer {
  border-top-color: var(--dt-divider) !important;
}

body.deck-page[class*=deck-theme-] .comments__children {
  border-left-color: rgba(var(--dt-accent-rgb), 0.2) !important;
}

@media screen and (max-width: 700px) {
  body.deck-page[class*=deck-theme-] .deck-modern,
  body.deck-page[class*=deck-theme-] .deck__list,
  body.deck-page[class*=deck-theme-] .comments {
    border-radius: 18px !important;
  }
  body.deck-page[class*=deck-theme-] .comments {
    padding: 11px;
  }
  body.deck-page[class*=deck-theme-] .comments__send-form {
    padding: 10px;
  }
  body.deck-page[class*=deck-theme-] .comments__send-form textarea {
    min-height: 104px;
    padding: 13px;
  }
}
body.deck-page.deck-theme-soft {
  --dt-bg: linear-gradient(180deg, #fbfbff 0%, #f2f3fa 100%);
  --dt-bg-pattern:
      radial-gradient(circle at 12% 5%, rgba(150,110,255,.14), transparent 24%),
      radial-gradient(circle at 88% 12%, rgba(255,155,205,.12), transparent 20%);
  --dt-text: #191925;
  --dt-muted: #707384;
  --dt-accent: #8b42f4;
  --dt-accent2: #bc74ff;
  --dt-accent-rgb: 139,66,244;
  --dt-header: rgba(255,255,255,.90);
  --dt-footer: rgba(255,255,255,.86);
  --dt-surface: rgba(255,255,255,.92);
  --dt-surface2: #f8f8fc;
  --dt-surface3: #f2f2f7;
  --dt-input: #fff;
  --dt-shadow: 0 22px 60px rgba(72,58,120,.09);
}

body.deck-page.deck-theme-neon {
  --dt-bg: #040615;
  --dt-bg-pattern:
      linear-gradient(rgba(97,79,255,.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(97,79,255,.07) 1px, transparent 1px),
      radial-gradient(circle at 20% 0%, rgba(131,60,255,.23), transparent 28%),
      radial-gradient(circle at 80% 5%, rgba(0,206,255,.12), transparent 24%);
  --dt-text: #f3f5ff;
  --dt-muted: #98a1cc;
  --dt-accent: #9b4dff;
  --dt-accent2: #21cfff;
  --dt-accent-rgb: 155,77,255;
  --dt-header: rgba(4,7,23,.92);
  --dt-footer: rgba(4,7,23,.92);
  --dt-surface: rgba(8,13,38,.94);
  --dt-surface2: rgba(12,18,50,.96);
  --dt-surface3: rgba(17,23,58,.96);
  --dt-input: rgba(4,8,27,.98);
  --dt-border: rgba(108,97,255,.24);
  --dt-divider: rgba(108,97,255,.16);
  --dt-shadow: 0 0 0 1px rgba(126,99,255,.12), 0 24px 70px rgba(0,0,0,.55), 0 0 38px rgba(155,77,255,.10);
}

body.deck-page.deck-theme-neon .deck-modern,
body.deck-page.deck-theme-neon .deck__list,
body.deck-page.deck-theme-neon .comments {
  box-shadow: 0 0 0 1px rgba(82, 201, 255, 0.12), 0 0 30px rgba(145, 73, 255, 0.16), 0 24px 60px rgba(0, 0, 0, 0.48) !important;
}

body.deck-page.deck-theme-glass {
  --dt-bg: linear-gradient(135deg, #9db4ff 0%, #d0b8ff 46%, #ffc8da 100%);
  --dt-bg-pattern:
      radial-gradient(circle at 10% 8%, rgba(255,255,255,.30), transparent 18%),
      radial-gradient(circle at 82% 16%, rgba(255,255,255,.18), transparent 22%);
  --dt-text: #24213c;
  --dt-muted: #67617e;
  --dt-accent: #6d45e8;
  --dt-accent2: #3d79f2;
  --dt-accent-rgb: 109,69,232;
  --dt-header: rgba(255,255,255,.54);
  --dt-footer: rgba(255,255,255,.50);
  --dt-surface: rgba(255,255,255,.58);
  --dt-surface2: rgba(255,255,255,.44);
  --dt-surface3: rgba(255,255,255,.36);
  --dt-input: rgba(255,255,255,.72);
  --dt-border: rgba(255,255,255,.54);
  --dt-divider: rgba(42,36,70,.10);
  --dt-shadow: 0 22px 65px rgba(59,44,105,.18);
}

body.deck-page.deck-theme-glass .header,
body.deck-page.deck-theme-glass .deck-modern,
body.deck-page.deck-theme-glass .deck__list,
body.deck-page.deck-theme-glass .comments,
body.deck-page.deck-theme-glass .footer {
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
}

body.deck-page.deck-theme-gold {
  --dt-bg: linear-gradient(180deg, #090807 0%, #15110d 100%);
  --dt-bg-pattern:
      radial-gradient(circle at 50% 0%, rgba(240,188,85,.14), transparent 28%),
      repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 1px, transparent 1px 9px);
  --dt-text: #f4e9d1;
  --dt-muted: #baa98a;
  --dt-accent: #eac06b;
  --dt-accent2: #9e681c;
  --dt-accent-rgb: 234,192,107;
  --dt-header: rgba(10,9,8,.94);
  --dt-footer: rgba(10,9,8,.94);
  --dt-surface: rgba(25,20,16,.96);
  --dt-surface2: rgba(32,25,19,.98);
  --dt-surface3: rgba(21,17,13,.98);
  --dt-input: rgba(13,11,9,.99);
  --dt-border: rgba(234,192,107,.20);
  --dt-divider: rgba(234,192,107,.12);
  --dt-shadow: 0 26px 70px rgba(0,0,0,.50);
}

body.deck-page.deck-theme-gold .deck-modern,
body.deck-page.deck-theme-gold .comments,
body.deck-page.deck-theme-gold .deck__list {
  border-width: 1px !important;
  box-shadow: inset 0 0 0 1px rgba(234, 192, 107, 0.05), var(--dt-shadow) !important;
}

body.deck-page.deck-theme-manga {
  --dt-bg: #f4efe4;
  --dt-bg-pattern:
      radial-gradient(circle, rgba(0,0,0,.055) 1px, transparent 1.4px) 0 0 / 12px 12px,
      linear-gradient(180deg, rgba(255,255,255,.38), rgba(0,0,0,.02));
  --dt-text: #111;
  --dt-muted: #5f5b54;
  --dt-accent: #111;
  --dt-accent2: #444;
  --dt-accent-rgb: 17,17,17;
  --dt-header: rgba(248,244,235,.96);
  --dt-footer: rgba(239,233,221,.96);
  --dt-surface: rgba(250,247,240,.98);
  --dt-surface2: rgba(245,240,232,.98);
  --dt-surface3: rgba(239,233,224,.98);
  --dt-input: rgba(255,255,255,.96);
  --dt-border: rgba(0,0,0,.18);
  --dt-divider: rgba(0,0,0,.11);
  --dt-shadow: 7px 7px 0 rgba(0,0,0,.09);
  --dt-radius-xl: 7px;
  --dt-radius-lg: 6px;
  --dt-radius-md: 5px;
  --dt-radius-sm: 3px;
}

body.deck-page.deck-theme-manga .deck-modern,
body.deck-page.deck-theme-manga .deck__list,
body.deck-page.deck-theme-manga .comments {
  border: 2px solid #171717 !important;
}

body.deck-page.deck-theme-manga .deck-modern::after,
body.deck-page.deck-theme-manga .comments::after {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  border: 1px dashed rgba(0, 0, 0, 0.16);
}

body.deck-page.deck-theme-manga .secondary-title,
body.deck-page.deck-theme-manga .deck-modern__title {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

body.deck-page.deck-theme-blueprint {
  --dt-bg: #0a4f87;
  --dt-bg-pattern:
      linear-gradient(rgba(255,255,255,.075) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.075) 1px, transparent 1px),
      linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  --dt-text: #f3fbff;
  --dt-muted: #b9daed;
  --dt-accent: #ffffff;
  --dt-accent2: #9ce7ff;
  --dt-accent-rgb: 156,231,255;
  --dt-header: rgba(6,59,104,.96);
  --dt-footer: rgba(6,59,104,.96);
  --dt-surface: rgba(5,64,112,.90);
  --dt-surface2: rgba(6,73,126,.94);
  --dt-surface3: rgba(4,57,101,.96);
  --dt-input: rgba(3,53,95,.96);
  --dt-border: rgba(224,248,255,.32);
  --dt-divider: rgba(224,248,255,.18);
  --dt-shadow: 0 20px 48px rgba(0,26,54,.28);
  --dt-radius-xl: 3px;
  --dt-radius-lg: 3px;
  --dt-radius-md: 2px;
}

body.deck-page.deck-theme-blueprint::before {
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
}

body.deck-page.deck-theme-blueprint .deck-modern,
body.deck-page.deck-theme-blueprint .comments,
body.deck-page.deck-theme-blueprint .deck__list {
  border-style: dashed !important;
}

body.deck-page.deck-theme-blueprint .deck-modern__stat {
  border-style: dashed !important;
}

body.deck-page.deck-theme-newspaper {
  --dt-bg: #e9e4d8;
  --dt-bg-pattern: repeating-linear-gradient(0deg, rgba(0,0,0,.022) 0 1px, transparent 1px 4px);
  --dt-text: #181716;
  --dt-muted: #65615b;
  --dt-accent: #7d1616;
  --dt-accent2: #2b2926;
  --dt-accent-rgb: 125,22,22;
  --dt-header: rgba(237,233,223,.97);
  --dt-footer: rgba(232,227,216,.97);
  --dt-surface: rgba(246,243,236,.98);
  --dt-surface2: rgba(239,235,227,.99);
  --dt-surface3: rgba(233,229,220,.99);
  --dt-input: #fbfaf6;
  --dt-border: rgba(24,23,22,.22);
  --dt-divider: rgba(24,23,22,.13);
  --dt-shadow: 0 10px 0 rgba(0,0,0,.055);
  --dt-radius-xl: 0px;
  --dt-radius-lg: 0px;
  --dt-radius-md: 0px;
  --dt-radius-sm: 0px;
  --dt-font: Georgia, "Times New Roman", serif;
}

body.deck-page.deck-theme-newspaper .deck-modern,
body.deck-page.deck-theme-newspaper .comments,
body.deck-page.deck-theme-newspaper .deck__list {
  border-top: 5px double var(--dt-text) !important;
  border-bottom: 5px double var(--dt-text) !important;
}

body.deck-page.deck-theme-newspaper .deck-modern__title,
body.deck-page.deck-theme-newspaper .secondary-title {
  text-transform: uppercase;
  letter-spacing: -0.04em;
}

body.deck-page.deck-theme-newspaper .comments__change-sort {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

body.deck-page.deck-theme-terminal {
  --dt-bg: #020704;
  --dt-bg-pattern:
      repeating-linear-gradient(0deg, rgba(50,255,116,.035) 0 1px, transparent 1px 3px),
      linear-gradient(90deg, rgba(50,255,116,.045) 1px, transparent 1px);
  --dt-text: #baffc8;
  --dt-muted: #71ba7d;
  --dt-accent: #35ff72;
  --dt-accent2: #13c857;
  --dt-accent-rgb: 53,255,114;
  --dt-header: rgba(2,8,4,.98);
  --dt-footer: rgba(2,8,4,.98);
  --dt-surface: rgba(5,14,8,.98);
  --dt-surface2: rgba(7,18,10,.99);
  --dt-surface3: rgba(6,15,9,.99);
  --dt-input: #010402;
  --dt-border: rgba(53,255,114,.22);
  --dt-divider: rgba(53,255,114,.12);
  --dt-shadow: 0 0 0 1px rgba(53,255,114,.06), 0 20px 60px rgba(0,0,0,.58);
  --dt-radius-xl: 6px;
  --dt-radius-lg: 5px;
  --dt-radius-md: 4px;
  --dt-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

body.deck-page.deck-theme-terminal .deck-modern::before {
  content: "> deck.open --user";
  display: block;
  margin: -4px 0 14px;
  color: var(--dt-accent);
  font-size: 12px;
}

body.deck-page.deck-theme-terminal .secondary-title::before {
  content: "> ";
  color: var(--dt-accent);
}

body.deck-page.deck-theme-comic {
  --dt-bg: #f7e64b;
  --dt-bg-pattern: radial-gradient(circle, rgba(28,28,28,.15) 1.2px, transparent 1.5px) 0 0 / 10px 10px;
  --dt-text: #171717;
  --dt-muted: #4b4b4b;
  --dt-accent: #ff3f3f;
  --dt-accent2: #336cff;
  --dt-accent-rgb: 255,63,63;
  --dt-header: #fffdf2;
  --dt-footer: #fffdf2;
  --dt-surface: #fffdf7;
  --dt-surface2: #f8f3df;
  --dt-surface3: #fff3b0;
  --dt-input: #fff;
  --dt-border: #171717;
  --dt-divider: rgba(23,23,23,.18);
  --dt-shadow: 8px 8px 0 #171717;
  --dt-radius-xl: 18px;
  --dt-radius-lg: 14px;
  --dt-radius-md: 12px;
}

body.deck-page.deck-theme-comic .deck-modern,
body.deck-page.deck-theme-comic .deck__list,
body.deck-page.deck-theme-comic .comments {
  border: 3px solid #171717 !important;
}

body.deck-page.deck-theme-comic .deck-modern__stat,
body.deck-page.deck-theme-comic .comments__inner,
body.deck-page.deck-theme-comic .comments__send-form {
  border: 2px solid #171717 !important;
}

body.deck-page.deck-theme-comic .secondary-title,
body.deck-page.deck-theme-comic .deck-modern__title {
  text-shadow: 2px 2px 0 #fff;
  transform: rotate(-1deg);
}

body.deck-page.deck-theme-notebook {
  --dt-bg: #f9fbff;
  --dt-bg-pattern:
      linear-gradient(90deg, transparent 0 74px, rgba(231,77,77,.20) 74px 76px, transparent 76px),
      repeating-linear-gradient(0deg, transparent 0 31px, rgba(75,127,190,.13) 31px 32px);
  --dt-text: #213047;
  --dt-muted: #65758d;
  --dt-accent: #e34f59;
  --dt-accent2: #3f7fc9;
  --dt-accent-rgb: 227,79,89;
  --dt-header: rgba(255,255,255,.95);
  --dt-footer: rgba(255,255,255,.95);
  --dt-surface: rgba(255,255,255,.92);
  --dt-surface2: rgba(249,251,255,.96);
  --dt-surface3: rgba(242,247,255,.96);
  --dt-input: rgba(255,255,255,.98);
  --dt-border: rgba(50,87,129,.18);
  --dt-divider: rgba(50,87,129,.11);
  --dt-shadow: 0 12px 35px rgba(40,76,120,.09);
  --dt-radius-xl: 6px;
  --dt-radius-lg: 6px;
  --dt-radius-md: 5px;
}

body.deck-page.deck-theme-notebook .deck-modern,
body.deck-page.deck-theme-notebook .deck__list,
body.deck-page.deck-theme-notebook .comments {
  border-left: 5px solid rgba(227, 79, 89, 0.65) !important;
}

body.deck-page.deck-theme-dossier {
  --dt-bg: #cbc1a9;
  --dt-bg-pattern: repeating-linear-gradient(135deg, rgba(60,48,35,.035) 0 1px, transparent 1px 7px);
  --dt-text: #2b261d;
  --dt-muted: #6d6354;
  --dt-accent: #9f2d23;
  --dt-accent2: #6d4b2a;
  --dt-accent-rgb: 159,45,35;
  --dt-header: #d9cfb9;
  --dt-footer: #c7baa0;
  --dt-surface: #e9dfca;
  --dt-surface2: #dfd3bc;
  --dt-surface3: #d7c9b0;
  --dt-input: #f0e7d5;
  --dt-border: rgba(62,48,31,.24);
  --dt-divider: rgba(62,48,31,.14);
  --dt-shadow: 0 16px 0 rgba(71,56,35,.08);
  --dt-radius-xl: 4px;
  --dt-radius-lg: 4px;
  --dt-radius-md: 3px;
}

body.deck-page.deck-theme-dossier .deck-modern::before {
  content: "DECK FILE";
  position: absolute;
  top: 0;
  right: 22px;
  padding: 5px 12px 7px;
  background: #bba77f;
  color: #4c3e2b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

body.deck-page.deck-theme-dossier .comments::before {
  content: "COMMENTS LOG";
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 8px;
  border: 1px solid rgba(80, 61, 39, 0.32);
  color: #70553a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  transform: rotate(-1deg);
}

body.deck-page.deck-theme-polaroid {
  --dt-bg: linear-gradient(135deg, #d8eef3 0%, #f5e4dc 100%);
  --dt-bg-pattern: radial-gradient(circle at 18% 8%, rgba(255,255,255,.28), transparent 18%);
  --dt-text: #272727;
  --dt-muted: #6f6f6f;
  --dt-accent: #2f6f8b;
  --dt-accent2: #e27f79;
  --dt-accent-rgb: 47,111,139;
  --dt-header: rgba(255,255,255,.90);
  --dt-footer: rgba(255,255,255,.88);
  --dt-surface: #fff;
  --dt-surface2: #fbfbfb;
  --dt-surface3: #f4f4f4;
  --dt-input: #fff;
  --dt-border: rgba(0,0,0,.08);
  --dt-divider: rgba(0,0,0,.07);
  --dt-shadow: 0 18px 30px rgba(60,66,70,.16);
  --dt-radius-xl: 2px;
  --dt-radius-lg: 2px;
  --dt-radius-md: 2px;
}

body.deck-page.deck-theme-polaroid .deck__item {
  outline: 7px solid #fff;
  outline-offset: -7px;
}

body.deck-page.deck-theme-polaroid .deck__item:nth-child(4n+1) {
  transform: rotate(-0.6deg);
}

body.deck-page.deck-theme-polaroid .deck__item:nth-child(4n+2) {
  transform: rotate(0.7deg);
}

body.deck-page.deck-theme-polaroid .deck__item:nth-child(4n+3) {
  transform: rotate(-0.3deg);
}

body.deck-page.deck-theme-polaroid .deck__item:nth-child(4n) {
  transform: rotate(0.4deg);
}

body.deck-page.deck-theme-polaroid .deck__item:hover {
  transform: translateY(-5px) rotate(0deg);
}

body.deck-page.deck-theme-hud {
  --dt-bg: #071015;
  --dt-bg-pattern:
      linear-gradient(rgba(67,233,255,.055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(67,233,255,.055) 1px, transparent 1px),
      radial-gradient(circle at 50% 0%, rgba(0,211,255,.14), transparent 28%);
  --dt-text: #dbfbff;
  --dt-muted: #86b7c2;
  --dt-accent: #43e9ff;
  --dt-accent2: #17b7d5;
  --dt-accent-rgb: 67,233,255;
  --dt-header: rgba(5,14,19,.95);
  --dt-footer: rgba(5,14,19,.95);
  --dt-surface: rgba(8,20,27,.96);
  --dt-surface2: rgba(10,27,36,.98);
  --dt-surface3: rgba(7,22,29,.98);
  --dt-input: rgba(3,12,17,.99);
  --dt-border: rgba(67,233,255,.22);
  --dt-divider: rgba(67,233,255,.12);
  --dt-shadow: 0 20px 60px rgba(0,0,0,.44);
  --dt-radius-xl: 0px;
  --dt-radius-lg: 0px;
  --dt-radius-md: 0px;
}

body.deck-page.deck-theme-hud .deck-modern,
body.deck-page.deck-theme-hud .deck__list,
body.deck-page.deck-theme-hud .comments {
  -webkit-clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
          clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}

body.deck-page.deck-theme-hud .deck-modern__stat,
body.deck-page.deck-theme-hud .comments__inner,
body.deck-page.deck-theme-hud .comments__send-form {
  -webkit-clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
          clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

body.deck-page.deck-theme-industrial {
  --dt-bg: #202226;
  --dt-bg-pattern: repeating-linear-gradient(135deg, rgba(255,194,28,.055) 0 14px, transparent 14px 28px);
  --dt-text: #f1f1ee;
  --dt-muted: #a8a9a5;
  --dt-accent: #ffc21c;
  --dt-accent2: #ff8a00;
  --dt-accent-rgb: 255,194,28;
  --dt-header: #1b1d20;
  --dt-footer: #191b1e;
  --dt-surface: #292c30;
  --dt-surface2: #32353a;
  --dt-surface3: #25282c;
  --dt-input: #1d1f22;
  --dt-border: rgba(255,194,28,.22);
  --dt-divider: rgba(255,255,255,.08);
  --dt-shadow: 0 22px 60px rgba(0,0,0,.40);
  --dt-radius-xl: 8px;
  --dt-radius-lg: 6px;
  --dt-radius-md: 5px;
}

body.deck-page.deck-theme-industrial .deck-modern,
body.deck-page.deck-theme-industrial .comments,
body.deck-page.deck-theme-industrial .deck__list {
  border-top: 5px solid var(--dt-accent) !important;
}

body.deck-page.deck-theme-industrial .deck-modern::before,
body.deck-page.deck-theme-industrial .comments::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5px;
  background: repeating-linear-gradient(135deg, #ffc21c 0 12px, #161719 12px 24px);
}

body.deck-page.deck-theme-arcade {
  --dt-bg: #160627;
  --dt-bg-pattern:
      linear-gradient(rgba(0,255,244,.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,255,244,.07) 1px, transparent 1px),
      radial-gradient(circle at 50% 0%, rgba(255,0,179,.22), transparent 24%);
  --dt-text: #fff1ff;
  --dt-muted: #c7add6;
  --dt-accent: #ff4bd2;
  --dt-accent2: #2ffff2;
  --dt-accent-rgb: 255,75,210;
  --dt-header: rgba(17,5,31,.96);
  --dt-footer: rgba(17,5,31,.96);
  --dt-surface: rgba(28,9,49,.96);
  --dt-surface2: rgba(36,12,62,.98);
  --dt-surface3: rgba(23,7,42,.98);
  --dt-input: rgba(10,3,19,.99);
  --dt-border: rgba(255,75,210,.22);
  --dt-divider: rgba(47,255,242,.12);
  --dt-shadow: 7px 7px 0 rgba(47,255,242,.10), -7px -7px 0 rgba(255,75,210,.08), 0 24px 65px rgba(0,0,0,.50);
  --dt-radius-xl: 2px;
  --dt-radius-lg: 2px;
  --dt-radius-md: 2px;
}

body.deck-page.deck-theme-arcade .deck-modern__title,
body.deck-page.deck-theme-arcade .secondary-title {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

body.deck-page.deck-theme-noir {
  --dt-bg: #111216;
  --dt-bg-pattern:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.05), transparent 26%),
      repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px);
  --dt-text: #f1f1f1;
  --dt-muted: #a9a9ad;
  --dt-accent: #fff;
  --dt-accent2: #929292;
  --dt-accent-rgb: 255,255,255;
  --dt-header: rgba(13,14,17,.97);
  --dt-footer: rgba(13,14,17,.97);
  --dt-surface: rgba(25,26,31,.98);
  --dt-surface2: rgba(31,32,38,.99);
  --dt-surface3: rgba(20,21,25,.99);
  --dt-input: #0f1013;
  --dt-border: rgba(255,255,255,.09);
  --dt-divider: rgba(255,255,255,.07);
  --dt-shadow: 0 28px 70px rgba(0,0,0,.48);
  --dt-radius-xl: 0px;
  --dt-radius-lg: 0px;
  --dt-radius-md: 0px;
}

body.deck-page.deck-theme-noir .deck-modern,
body.deck-page.deck-theme-noir .comments,
body.deck-page.deck-theme-noir .deck__list {
  border-left: 4px solid #fff !important;
}

body.deck-page.deck-theme-noir .secondary-title,
body.deck-page.deck-theme-noir .deck-modern__title {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0.02em;
}

body.deck-page.deck-theme-museum {
  --dt-bg: #eee8dc;
  --dt-bg-pattern: radial-gradient(circle at 50% 0%, rgba(255,255,255,.35), transparent 30%);
  --dt-text: #27231d;
  --dt-muted: #756c5d;
  --dt-accent: #7c5a2f;
  --dt-accent2: #b59662;
  --dt-accent-rgb: 124,90,47;
  --dt-header: #f5f1e8;
  --dt-footer: #e8dfcf;
  --dt-surface: #faf7f1;
  --dt-surface2: #f0eadf;
  --dt-surface3: #e8e0d2;
  --dt-input: #fffdf8;
  --dt-border: rgba(69,55,38,.18);
  --dt-divider: rgba(69,55,38,.10);
  --dt-shadow: 0 18px 40px rgba(72,54,34,.10);
  --dt-radius-xl: 2px;
  --dt-radius-lg: 2px;
  --dt-radius-md: 2px;
  --dt-font: Georgia, "Times New Roman", serif;
}

body.deck-page.deck-theme-museum .deck-modern,
body.deck-page.deck-theme-museum .deck__list,
body.deck-page.deck-theme-museum .comments {
  outline: 1px solid rgba(124, 90, 47, 0.28);
  outline-offset: -7px;
  border: 1px solid rgba(124, 90, 47, 0.34) !important;
}

body.deck-page.deck-theme-museum .deck-modern__stat {
  background: transparent !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

body.deck-page.deck-theme-sticker {
  --dt-bg: linear-gradient(135deg, #fff4aa 0%, #c9f7ff 48%, #ffd5ee 100%);
  --dt-bg-pattern: radial-gradient(circle, rgba(255,255,255,.42) 2px, transparent 2.5px) 0 0 / 22px 22px;
  --dt-text: #2d2942;
  --dt-muted: #6c6681;
  --dt-accent: #ff5ca8;
  --dt-accent2: #6857ff;
  --dt-accent-rgb: 255,92,168;
  --dt-header: rgba(255,255,255,.90);
  --dt-footer: rgba(255,255,255,.88);
  --dt-surface: rgba(255,255,255,.94);
  --dt-surface2: rgba(255,255,255,.90);
  --dt-surface3: rgba(250,250,255,.92);
  --dt-input: #fff;
  --dt-border: rgba(88,72,140,.12);
  --dt-divider: rgba(88,72,140,.08);
  --dt-shadow: 0 18px 0 rgba(255,255,255,.45), 0 24px 55px rgba(100,70,140,.12);
  --dt-radius-xl: 34px;
  --dt-radius-lg: 24px;
  --dt-radius-md: 18px;
}

body.deck-page.deck-theme-sticker .deck-modern {
  transform: rotate(-0.25deg);
}

body.deck-page.deck-theme-sticker .deck__list {
  transform: rotate(0.2deg);
}

body.deck-page.deck-theme-sticker .comments {
  transform: rotate(-0.15deg);
}

body.deck-page.deck-theme-sticker .comments__inner {
  transform: rotate(0.08deg);
}

body.deck-page.deck-theme-gridpaper {
  --dt-bg: #f7fbff;
  --dt-bg-pattern:
      linear-gradient(rgba(53,111,172,.10) 1px, transparent 1px),
      linear-gradient(90deg, rgba(53,111,172,.10) 1px, transparent 1px),
      linear-gradient(rgba(53,111,172,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(53,111,172,.04) 1px, transparent 1px);
  --dt-text: #26354a;
  --dt-muted: #6a7d95;
  --dt-accent: #356fac;
  --dt-accent2: #e74e56;
  --dt-accent-rgb: 53,111,172;
  --dt-header: rgba(255,255,255,.94);
  --dt-footer: rgba(255,255,255,.94);
  --dt-surface: rgba(255,255,255,.90);
  --dt-surface2: rgba(250,253,255,.96);
  --dt-surface3: rgba(245,249,253,.96);
  --dt-input: rgba(255,255,255,.98);
  --dt-border: rgba(53,111,172,.16);
  --dt-divider: rgba(53,111,172,.10);
  --dt-shadow: 0 14px 36px rgba(53,81,117,.09);
  --dt-radius-xl: 4px;
  --dt-radius-lg: 4px;
  --dt-radius-md: 4px;
}

body.deck-page.deck-theme-gridpaper::before {
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
}

body.deck-page.deck-theme-origami {
  --dt-bg: #f3efe8;
  --dt-bg-pattern:
      linear-gradient(30deg, rgba(128,94,180,.07) 12%, transparent 12.5%, transparent 87%, rgba(128,94,180,.07) 87.5%, rgba(128,94,180,.07)),
      linear-gradient(150deg, rgba(95,150,190,.07) 12%, transparent 12.5%, transparent 87%, rgba(95,150,190,.07) 87.5%, rgba(95,150,190,.07));
  --dt-text: #332f38;
  --dt-muted: #7a7480;
  --dt-accent: #7b5bb7;
  --dt-accent2: #4d90ac;
  --dt-accent-rgb: 123,91,183;
  --dt-header: rgba(251,248,243,.94);
  --dt-footer: rgba(242,236,228,.94);
  --dt-surface: rgba(255,253,249,.96);
  --dt-surface2: rgba(247,243,237,.98);
  --dt-surface3: rgba(240,235,228,.98);
  --dt-input: #fff;
  --dt-border: rgba(90,73,120,.13);
  --dt-divider: rgba(90,73,120,.08);
  --dt-shadow: 14px 14px 0 rgba(95,77,120,.06);
  --dt-radius-xl: 0px;
  --dt-radius-lg: 0px;
  --dt-radius-md: 0px;
}

body.deck-page.deck-theme-origami .deck-modern,
body.deck-page.deck-theme-origami .deck__list,
body.deck-page.deck-theme-origami .comments {
  -webkit-clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
          clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}

body.deck-page.deck-theme-retroos {
  --dt-bg: #b8b8b8;
  --dt-bg-pattern: repeating-linear-gradient(45deg, rgba(255,255,255,.10) 0 1px, transparent 1px 3px);
  --dt-text: #111;
  --dt-muted: #4d4d4d;
  --dt-accent: #000080;
  --dt-accent2: #1084d0;
  --dt-accent-rgb: 0,0,128;
  --dt-header: #c0c0c0;
  --dt-footer: #c0c0c0;
  --dt-surface: #c0c0c0;
  --dt-surface2: #d5d5d5;
  --dt-surface3: #e4e4e4;
  --dt-input: #fff;
  --dt-border: #606060;
  --dt-divider: #8f8f8f;
  --dt-shadow: 2px 2px 0 #404040;
  --dt-radius-xl: 0px;
  --dt-radius-lg: 0px;
  --dt-radius-md: 0px;
  --dt-radius-sm: 0px;
  --dt-font: Tahoma, Arial, sans-serif;
}

body.deck-page.deck-theme-retroos .deck-modern,
body.deck-page.deck-theme-retroos .deck__list,
body.deck-page.deck-theme-retroos .comments,
body.deck-page.deck-theme-retroos .comments__inner,
body.deck-page.deck-theme-retroos .comments__send-form {
  border-top: 2px solid #fff !important;
  border-left: 2px solid #fff !important;
  border-right: 2px solid #505050 !important;
  border-bottom: 2px solid #505050 !important;
}

body.deck-page.deck-theme-retroos .deck-modern::before {
  content: "Deck Viewer";
  display: block;
  margin: -14px -14px 14px;
  padding: 7px 10px;
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

body.deck-page.deck-theme-cassette {
  --dt-bg: #e6d65b;
  --dt-bg-pattern:
      repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0 2px, transparent 2px 7px),
      linear-gradient(180deg, rgba(255,255,255,.20), rgba(0,0,0,.04));
  --dt-text: #201f1c;
  --dt-muted: #5f5b51;
  --dt-accent: #e94755;
  --dt-accent2: #278b8a;
  --dt-accent-rgb: 233,71,85;
  --dt-header: #f1e77c;
  --dt-footer: #d8c84e;
  --dt-surface: #ece5c7;
  --dt-surface2: #d9d2b8;
  --dt-surface3: #c9c1a8;
  --dt-input: #f9f6ea;
  --dt-border: rgba(34,31,25,.28);
  --dt-divider: rgba(34,31,25,.16);
  --dt-shadow: 0 14px 0 rgba(0,0,0,.12);
  --dt-radius-xl: 16px;
  --dt-radius-lg: 10px;
  --dt-radius-md: 8px;
}

body.deck-page.deck-theme-cassette .deck-modern {
  border-top: 10px solid #2b2a27 !important;
  border-bottom: 10px solid #2b2a27 !important;
}

body.deck-page.deck-theme-cassette .deck-modern::before,
body.deck-page.deck-theme-cassette .deck-modern::after {
  content: "";
  position: absolute;
  top: 12px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #2b2a27;
  box-shadow: 0 0 0 4px #b7ae94;
}

body.deck-page.deck-theme-cassette .deck-modern::before {
  left: 16px;
}

body.deck-page.deck-theme-cassette .deck-modern::after {
  right: 16px;
}

body.deck-page.deck-theme-postal {
  --dt-bg: #efe8d8;
  --dt-bg-pattern:
      radial-gradient(circle at 30px 30px, rgba(120,92,57,.05) 0 1px, transparent 1.5px) 0 0 / 36px 36px,
      linear-gradient(180deg, rgba(255,255,255,.25), rgba(0,0,0,.025));
  --dt-text: #2f2921;
  --dt-muted: #756859;
  --dt-accent: #b23939;
  --dt-accent2: #386d9a;
  --dt-accent-rgb: 178,57,57;
  --dt-header: #f4eee1;
  --dt-footer: #e7ddcc;
  --dt-surface: #fbf6eb;
  --dt-surface2: #f1eadc;
  --dt-surface3: #e8dece;
  --dt-input: #fffaf0;
  --dt-border: rgba(78,60,40,.20);
  --dt-divider: rgba(78,60,40,.12);
  --dt-shadow: 0 16px 34px rgba(79,58,38,.11);
  --dt-radius-xl: 1px;
  --dt-radius-lg: 1px;
  --dt-radius-md: 1px;
}

body.deck-page.deck-theme-postal .deck-modern,
body.deck-page.deck-theme-postal .comments,
body.deck-page.deck-theme-postal .deck__list {
  outline: 4px dotted rgba(95, 72, 47, 0.28);
  outline-offset: -8px;
}

body.deck-page.deck-theme-postal .deck-modern::before {
  content: "AIR MAIL";
  position: absolute;
  top: 14px;
  right: 18px;
  padding: 4px 8px;
  border: 2px solid rgba(178, 57, 57, 0.55);
  color: #b23939;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  transform: rotate(5deg);
}

body.deck-page.deck-theme-academia {
  --dt-bg: #1c1714;
  --dt-bg-pattern:
      radial-gradient(circle at 50% 0%, rgba(173,119,61,.10), transparent 24%),
      repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 1px, transparent 1px 6px);
  --dt-text: #eadfcf;
  --dt-muted: #a99680;
  --dt-accent: #b37a46;
  --dt-accent2: #6d8d6b;
  --dt-accent-rgb: 179,122,70;
  --dt-header: rgba(24,19,16,.97);
  --dt-footer: rgba(24,19,16,.97);
  --dt-surface: rgba(39,31,26,.98);
  --dt-surface2: rgba(47,38,31,.99);
  --dt-surface3: rgba(32,26,22,.99);
  --dt-input: rgba(20,16,13,.99);
  --dt-border: rgba(179,122,70,.18);
  --dt-divider: rgba(179,122,70,.10);
  --dt-shadow: 0 24px 60px rgba(0,0,0,.44);
  --dt-radius-xl: 4px;
  --dt-radius-lg: 3px;
  --dt-radius-md: 2px;
  --dt-font: Georgia, "Times New Roman", serif;
}

body.deck-page.deck-theme-academia .deck-modern,
body.deck-page.deck-theme-academia .comments,
body.deck-page.deck-theme-academia .deck__list {
  border: 1px solid rgba(179, 122, 70, 0.32) !important;
  box-shadow: inset 0 0 0 5px rgba(179, 122, 70, 0.035), var(--dt-shadow) !important;
}

body.deck-page.deck-theme-academia .secondary-title,
body.deck-page.deck-theme-academia .deck-modern__title {
  letter-spacing: -0.025em;
}

body.deck-page.deck-theme-shadowmonarch {
  --dt-bg: #030510;
  --dt-bg-pattern:
      radial-gradient(circle at 50% -10%, rgba(110, 65, 255, .24), transparent 32%),
      radial-gradient(circle at 90% 18%, rgba(0, 196, 255, .09), transparent 22%),
      linear-gradient(rgba(118, 94, 255, .045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(118, 94, 255, .045) 1px, transparent 1px);
  --dt-text: #f4f1ff;
  --dt-muted: #9996b8;
  --dt-accent: #9c5cff;
  --dt-accent2: #4edcff;
  --dt-accent-rgb: 156, 92, 255;
  --dt-header: rgba(4, 6, 18, .92);
  --dt-footer: rgba(3, 5, 15, .95);
  --dt-surface: rgba(8, 10, 28, .94);
  --dt-surface2: rgba(13, 16, 39, .96);
  --dt-surface3: rgba(17, 20, 48, .96);
  --dt-border: rgba(126, 98, 255, .25);
  --dt-divider: rgba(126, 98, 255, .13);
  --dt-shadow: 0 22px 70px rgba(0,0,0,.62), 0 0 34px rgba(120,72,255,.10);
  --dt-shadow-small: 0 10px 26px rgba(0,0,0,.42), 0 0 18px rgba(120,72,255,.10);
  --dt-input: rgba(5, 7, 22, .98);
  --dt-button-text: #fff;
  --dt-radius-xl: 2px;
  --dt-radius-lg: 2px;
  --dt-radius-md: 2px;
  --dt-radius-sm: 2px;
}

body.deck-page.deck-theme-shadowmonarch .deck-modern,
body.deck-page.deck-theme-shadowmonarch .deck__list,
body.deck-page.deck-theme-shadowmonarch .comments {
  -webkit-clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
          clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  box-shadow: var(--dt-shadow) !important;
}

body.deck-page.deck-theme-shadowmonarch .deck-modern::before,
body.deck-page.deck-theme-shadowmonarch .comments::before {
  content: "SYSTEM";
  position: absolute;
  top: 8px;
  right: 14px;
  z-index: 3;
  color: rgba(78, 220, 255, 0.72);
  font-size: 9px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.24em;
  pointer-events: none;
}

body.deck-page.deck-theme-shadowmonarch .deck-modern::after,
body.deck-page.deck-theme-shadowmonarch .deck__list::after,
body.deck-page.deck-theme-shadowmonarch .comments::after {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 0;
  border: 1px solid rgba(78, 220, 255, 0.08);
  -webkit-clip-path: inherit;
          clip-path: inherit;
  pointer-events: none;
}

body.deck-page.deck-theme-shadowmonarch .deck-modern > *,
body.deck-page.deck-theme-shadowmonarch .deck__list > *,
body.deck-page.deck-theme-shadowmonarch .comments > * {
  position: relative;
  z-index: 1;
}

body.deck-page.deck-theme-shadowmonarch .deck-modern__stat {
  position: relative;
  background: linear-gradient(180deg, rgba(24, 26, 62, 0.96), rgba(10, 12, 32, 0.96)) !important;
  box-shadow: inset 0 0 20px rgba(92, 77, 255, 0.08) !important;
}

body.deck-page.deck-theme-shadowmonarch .deck-modern__stat::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--dt-accent2), transparent);
  opacity: 0.7;
}

body.deck-page.deck-theme-shadowmonarch .secondary-title,
body.deck-page.deck-theme-shadowmonarch .deck-modern__title {
  text-shadow: 0 0 18px rgba(156, 92, 255, 0.32);
}

body.deck-page.deck-theme-tarot {
  --dt-bg: #090b19;
  --dt-bg-pattern:
      radial-gradient(circle, rgba(222, 190, 122, .18) 1px, transparent 1.5px) 0 0 / 34px 34px,
      radial-gradient(circle at 50% 0%, rgba(60, 72, 141, .20), transparent 28%),
      linear-gradient(180deg, #0b0d1d 0%, #080a15 100%);
  --dt-text: #eee4cd;
  --dt-muted: #a89d88;
  --dt-accent: #d8b66a;
  --dt-accent2: #8569c7;
  --dt-accent-rgb: 216, 182, 106;
  --dt-header: rgba(9, 11, 25, .94);
  --dt-footer: rgba(8, 10, 20, .96);
  --dt-surface: rgba(15, 17, 34, .96);
  --dt-surface2: rgba(19, 21, 40, .96);
  --dt-surface3: rgba(24, 26, 47, .96);
  --dt-border: rgba(216, 182, 106, .22);
  --dt-divider: rgba(216, 182, 106, .12);
  --dt-shadow: 0 24px 60px rgba(0,0,0,.46);
  --dt-shadow-small: 0 10px 26px rgba(0,0,0,.30);
  --dt-input: rgba(10,12,25,.98);
  --dt-button-text: #15101d;
  --dt-font: Georgia, "Times New Roman", serif;
  --dt-radius-xl: 22px;
  --dt-radius-lg: 14px;
}

body.deck-page.deck-theme-tarot .deck-modern,
body.deck-page.deck-theme-tarot .deck__list,
body.deck-page.deck-theme-tarot .comments {
  outline: 1px solid rgba(216, 182, 106, 0.08);
  outline-offset: -7px;
}

body.deck-page.deck-theme-tarot .deck-modern::before,
body.deck-page.deck-theme-tarot .comments::before {
  content: "✦";
  position: absolute;
  left: 50%;
  top: 5px;
  z-index: 2;
  transform: translateX(-50%);
  color: var(--dt-accent);
  font-size: 13px;
  opacity: 0.8;
  pointer-events: none;
}

body.deck-page.deck-theme-tarot .deck-modern__stats {
  gap: 18px;
}

body.deck-page.deck-theme-tarot .deck-modern__stat {
  border-radius: 4px !important;
  transform: skewX(-2deg);
}

body.deck-page.deck-theme-tarot .deck-modern__stat > * {
  display: block;
  transform: skewX(2deg);
}

body.deck-page.deck-theme-tarot .comments__change-sort {
  border-radius: 4px !important;
  letter-spacing: 0.08em;
}

body.deck-page.deck-theme-holofoil {
  --dt-bg:
      linear-gradient(135deg, #f1f7ff 0%, #f9efff 35%, #effffd 68%, #fff6eb 100%);
  --dt-bg-pattern:
      conic-gradient(from 30deg at 20% 15%, rgba(99,186,255,.16), rgba(255,117,223,.12), rgba(106,255,217,.14), rgba(255,220,118,.12), rgba(99,186,255,.16));
  --dt-text: #23263d;
  --dt-muted: #727792;
  --dt-accent: #725cff;
  --dt-accent2: #00b9cf;
  --dt-accent-rgb: 114, 92, 255;
  --dt-header: rgba(249, 251, 255, .78);
  --dt-footer: rgba(249, 251, 255, .78);
  --dt-surface: rgba(255,255,255,.68);
  --dt-surface2: rgba(255,255,255,.56);
  --dt-surface3: rgba(255,255,255,.50);
  --dt-border: rgba(91, 100, 150, .15);
  --dt-divider: rgba(91, 100, 150, .10);
  --dt-shadow: 0 20px 50px rgba(83,85,130,.12);
  --dt-shadow-small: 0 8px 22px rgba(83,85,130,.11);
  --dt-input: rgba(255,255,255,.78);
  --dt-button-text: #fff;
  --dt-radius-xl: 30px;
  --dt-radius-lg: 22px;
  --dt-radius-md: 18px;
}

body.deck-page.deck-theme-holofoil .header,
body.deck-page.deck-theme-holofoil .deck-modern,
body.deck-page.deck-theme-holofoil .deck__list,
body.deck-page.deck-theme-holofoil .comments,
body.deck-page.deck-theme-holofoil .footer {
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}

body.deck-page.deck-theme-holofoil .deck-modern::before,
body.deck-page.deck-theme-holofoil .comments::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 10%, rgba(122, 236, 255, 0.12) 28%, rgba(255, 120, 220, 0.12) 46%, rgba(255, 231, 130, 0.1) 64%, transparent 84%);
  pointer-events: none;
}

body.deck-page.deck-theme-holofoil .deck-modern > *,
body.deck-page.deck-theme-holofoil .comments > * {
  position: relative;
  z-index: 1;
}

body.deck-page.deck-theme-holofoil .deck-modern__stat,
body.deck-page.deck-theme-holofoil .comments__inner {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), inset 0 -1px 0 rgba(95, 92, 180, 0.06) !important;
}

body.deck-page.deck-theme-shoji {
  --dt-bg: #f4efe4;
  --dt-bg-pattern:
      linear-gradient(rgba(76,61,47,.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(76,61,47,.08) 1px, transparent 1px),
      linear-gradient(180deg, rgba(255,255,255,.42), rgba(239,232,218,.48));
  --dt-text: #28231f;
  --dt-muted: #766d65;
  --dt-accent: #c73a36;
  --dt-accent2: #8e2926;
  --dt-accent-rgb: 199, 58, 54;
  --dt-header: rgba(247,242,232,.94);
  --dt-footer: rgba(241,235,223,.95);
  --dt-surface: rgba(252,249,242,.93);
  --dt-surface2: rgba(246,241,231,.94);
  --dt-surface3: rgba(241,235,224,.95);
  --dt-border: rgba(57,47,40,.16);
  --dt-divider: rgba(57,47,40,.10);
  --dt-shadow: 0 14px 38px rgba(74,58,42,.09);
  --dt-shadow-small: 0 7px 18px rgba(74,58,42,.08);
  --dt-input: rgba(255,253,248,.96);
  --dt-button-text: #fff;
  --dt-radius-xl: 0px;
  --dt-radius-lg: 0px;
  --dt-radius-md: 0px;
  --dt-radius-sm: 0px;
}

body.deck-page.deck-theme-shoji::before {
  background-size: 72px 72px, 72px 72px, auto;
}

body.deck-page.deck-theme-shoji .deck-modern,
body.deck-page.deck-theme-shoji .deck__list,
body.deck-page.deck-theme-shoji .comments {
  border-width: 1px 4px !important;
}

body.deck-page.deck-theme-shoji .deck-modern::after,
body.deck-page.deck-theme-shoji .comments::after {
  content: "印";
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 3;
  display: flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(199, 58, 54, 0.58);
  color: rgba(199, 58, 54, 0.78);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  transform: rotate(-4deg);
  pointer-events: none;
}

body.deck-page.deck-theme-shoji .secondary-title,
body.deck-page.deck-theme-shoji .deck-modern__title {
  letter-spacing: 0.08em;
}

body.deck-page.deck-theme-celestial {
  --dt-bg: #08131c;
  --dt-bg-pattern:
      radial-gradient(circle at 15% 20%, rgba(255,255,255,.28) 1px, transparent 1.4px) 0 0 / 47px 47px,
      radial-gradient(circle at 80% 30%, rgba(255,255,255,.18) 1px, transparent 1.2px) 0 0 / 61px 61px,
      radial-gradient(circle at 50% -10%, rgba(69,109,145,.28), transparent 34%);
  --dt-text: #e6edf0;
  --dt-muted: #879ca7;
  --dt-accent: #d99b67;
  --dt-accent2: #8bc8dc;
  --dt-accent-rgb: 217, 155, 103;
  --dt-header: rgba(6, 18, 27, .92);
  --dt-footer: rgba(6, 17, 25, .95);
  --dt-surface: rgba(10, 27, 39, .94);
  --dt-surface2: rgba(14, 34, 48, .94);
  --dt-surface3: rgba(16, 40, 55, .95);
  --dt-border: rgba(139, 200, 220, .16);
  --dt-divider: rgba(139, 200, 220, .10);
  --dt-shadow: 0 20px 54px rgba(0,0,0,.38);
  --dt-shadow-small: 0 9px 24px rgba(0,0,0,.28);
  --dt-input: rgba(6,20,29,.98);
  --dt-button-text: #101820;
  --dt-radius-xl: 26px;
  --dt-radius-lg: 18px;
}

body.deck-page.deck-theme-celestial .deck-modern,
body.deck-page.deck-theme-celestial .comments {
  isolation: isolate;
}

body.deck-page.deck-theme-celestial .deck-modern::before,
body.deck-page.deck-theme-celestial .comments::before {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  right: -72px;
  top: -74px;
  z-index: 0;
  border: 1px solid rgba(217, 155, 103, 0.2);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(139, 200, 220, 0.035), 0 0 0 45px rgba(217, 155, 103, 0.025);
  pointer-events: none;
}

body.deck-page.deck-theme-celestial .deck-modern::after,
body.deck-page.deck-theme-celestial .comments::after {
  content: "✦";
  position: absolute;
  right: 40px;
  top: 38px;
  z-index: 1;
  color: var(--dt-accent);
  opacity: 0.75;
  pointer-events: none;
}

body.deck-page.deck-theme-celestial .deck-modern > *,
body.deck-page.deck-theme-celestial .comments > * {
  position: relative;
  z-index: 2;
}

body.deck-page.deck-theme-softtoy {
  --dt-bg: linear-gradient(180deg, #dff1ff 0%, #efe4ff 52%, #ffe8f1 100%);
  --dt-bg-pattern:
      radial-gradient(circle at 16% 14%, rgba(255,255,255,.58), transparent 20%),
      radial-gradient(circle at 85% 8%, rgba(255,255,255,.42), transparent 17%);
  --dt-text: #35324d;
  --dt-muted: #77718f;
  --dt-accent: #7556ff;
  --dt-accent2: #ff6fae;
  --dt-accent-rgb: 117, 86, 255;
  --dt-header: rgba(242,247,255,.88);
  --dt-footer: rgba(247,241,255,.90);
  --dt-surface: rgba(248,249,255,.88);
  --dt-surface2: rgba(239,241,252,.94);
  --dt-surface3: rgba(232,235,249,.96);
  --dt-border: rgba(91,82,135,.10);
  --dt-divider: rgba(91,82,135,.08);
  --dt-shadow: 0 16px 38px rgba(86,75,135,.14), inset 0 2px 0 rgba(255,255,255,.80);
  --dt-shadow-small: 0 8px 18px rgba(86,75,135,.11), inset 0 1px 0 rgba(255,255,255,.82);
  --dt-input: rgba(255,255,255,.92);
  --dt-button-text: #fff;
  --dt-radius-xl: 34px;
  --dt-radius-lg: 24px;
  --dt-radius-md: 20px;
  --dt-radius-sm: 16px;
}

body.deck-page.deck-theme-softtoy .deck-modern__stat,
body.deck-page.deck-theme-softtoy .deck-modern__user,
body.deck-page.deck-theme-softtoy .deck-modern__action,
body.deck-page.deck-theme-softtoy .comments__change-sort,
body.deck-page.deck-theme-softtoy .comments__actions-btn,
body.deck-page.deck-theme-softtoy .comments__inner {
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.75), inset 0 -2px 5px rgba(74, 66, 120, 0.04), 0 6px 14px rgba(86, 75, 135, 0.08) !important;
}

body.deck-page.deck-theme-softtoy .deck-modern__action:hover,
body.deck-page.deck-theme-softtoy .comments__send-btn {
  background: linear-gradient(135deg, var(--dt-accent), var(--dt-accent2)) !important;
}

body.deck-page.deck-theme-softtoy .deck__item:hover {
  transform: translateY(-5px) scale(1.015);
}

body.deck-page.deck-theme-runestone {
  --dt-bg:
      radial-gradient(circle at 30% 10%, rgba(180,133,61,.08), transparent 25%),
      linear-gradient(180deg, #1c1c1b 0%, #121312 100%);
  --dt-bg-pattern:
      repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 2px, transparent 2px 8px);
  --dt-text: #e8e0ce;
  --dt-muted: #99917f;
  --dt-accent: #d59a48;
  --dt-accent2: #8c6330;
  --dt-accent-rgb: 213, 154, 72;
  --dt-header: rgba(24,24,22,.95);
  --dt-footer: rgba(19,20,18,.96);
  --dt-surface: rgba(38,38,34,.97);
  --dt-surface2: rgba(45,45,40,.98);
  --dt-surface3: rgba(50,49,43,.98);
  --dt-border: rgba(213,154,72,.18);
  --dt-divider: rgba(213,154,72,.10);
  --dt-shadow: 0 18px 48px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.02);
  --dt-shadow-small: 0 8px 20px rgba(0,0,0,.36);
  --dt-input: rgba(28,29,26,.98);
  --dt-button-text: #17140f;
  --dt-radius-xl: 4px;
  --dt-radius-lg: 4px;
  --dt-radius-md: 3px;
  --dt-radius-sm: 2px;
}

body.deck-page.deck-theme-runestone .deck-modern,
body.deck-page.deck-theme-runestone .deck__list,
body.deck-page.deck-theme-runestone .comments {
  -webkit-clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
          clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
}

body.deck-page.deck-theme-runestone .deck-modern::before,
body.deck-page.deck-theme-runestone .comments::before {
  content: "◇ ᚱ ◇";
  position: absolute;
  left: 50%;
  top: 7px;
  z-index: 2;
  transform: translateX(-50%);
  color: rgba(213, 154, 72, 0.52);
  font-size: 10px;
  letter-spacing: 0.2em;
  pointer-events: none;
}

body.deck-page.deck-theme-runestone .secondary-title,
body.deck-page.deck-theme-runestone .deck-modern__title {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

body.deck-page.deck-theme-velvet {
  --dt-bg:
      radial-gradient(circle at 50% -10%, rgba(190,85,90,.16), transparent 30%),
      linear-gradient(180deg, #250d14 0%, #17080d 100%);
  --dt-bg-pattern:
      repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 1px, transparent 1px 8px);
  --dt-text: #fff1dc;
  --dt-muted: #c2aa99;
  --dt-accent: #d7aa5f;
  --dt-accent2: #8d3042;
  --dt-accent-rgb: 215, 170, 95;
  --dt-header: rgba(37,13,20,.94);
  --dt-footer: rgba(28,9,14,.96);
  --dt-surface: rgba(55,18,28,.95);
  --dt-surface2: rgba(66,23,34,.96);
  --dt-surface3: rgba(74,26,38,.97);
  --dt-border: rgba(215,170,95,.18);
  --dt-divider: rgba(215,170,95,.10);
  --dt-shadow: 0 24px 64px rgba(0,0,0,.46);
  --dt-shadow-small: 0 9px 24px rgba(0,0,0,.30);
  --dt-input: rgba(37,12,19,.98);
  --dt-button-text: #24120d;
  --dt-font: Georgia, "Times New Roman", serif;
  --dt-radius-xl: 18px;
  --dt-radius-lg: 12px;
  --dt-radius-md: 8px;
}

body.deck-page.deck-theme-velvet .deck-modern,
body.deck-page.deck-theme-velvet .deck__list,
body.deck-page.deck-theme-velvet .comments {
  border: 1px solid rgba(215, 170, 95, 0.24) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.46), inset 0 0 0 4px rgba(215, 170, 95, 0.025) !important;
}

body.deck-page.deck-theme-velvet .deck-modern::before,
body.deck-page.deck-theme-velvet .comments::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 8px;
  height: 1px;
  z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(215, 170, 95, 0.55), transparent);
  pointer-events: none;
}

body.deck-page.deck-theme-velvet .deck-modern__stat {
  background: linear-gradient(180deg, rgba(78, 31, 42, 0.96), rgba(53, 18, 28, 0.96)) !important;
}

body.deck-page.deck-theme-velvet .secondary-title,
body.deck-page.deck-theme-velvet .deck-modern__title {
  font-weight: 700;
  letter-spacing: 0.01em;
}

body.deck-page[class*=deck-theme-] .comments .comments__send-form textarea,
body.dark.deck-page[class*=deck-theme-] .comments .comments__send-form textarea {
  display: block;
  width: 100% !important;
  height: auto;
  min-height: 70px !important;
  max-height: none;
  margin: 0 !important;
  padding: 4px 2px 10px !important;
  resize: none !important;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--dt-text) !important;
  box-shadow: none !important;
  caret-color: var(--dt-accent);
  font-family: var(--dt-font) !important;
  font-size: 15px;
  line-height: 1.5;
}

body.deck-page[class*=deck-theme-] .comments .comments__send-form textarea::-moz-placeholder, body.dark.deck-page[class*=deck-theme-] .comments .comments__send-form textarea::-moz-placeholder {
  color: var(--dt-muted) !important;
  opacity: 0.82 !important;
}

body.deck-page[class*=deck-theme-] .comments .comments__send-form textarea::placeholder,
body.dark.deck-page[class*=deck-theme-] .comments .comments__send-form textarea::placeholder {
  color: var(--dt-muted) !important;
  opacity: 0.82 !important;
}

body.deck-page[class*=deck-theme-] .comments .comments__send-form textarea:focus,
body.dark.deck-page[class*=deck-theme-] .comments .comments__send-form textarea:focus {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.deck-page[class*=deck-theme-] .comments .comments__send-form:not(.comments__send-form--mini),
body.dark.deck-page[class*=deck-theme-] .comments .comments__send-form:not(.comments__send-form--mini) {
  color: var(--dt-text) !important;
}

body.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini,
body.dark.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  width: 100%;
  min-height: 52px;
  padding: 8px 12px !important;
  cursor: pointer;
  color: var(--dt-text) !important;
  background: var(--dt-surface2) !important;
  border-color: var(--dt-border) !important;
}

body.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini textarea,
body.dark.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini textarea {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  resize: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--dt-text) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  caret-color: var(--dt-accent);
  font-family: var(--dt-font) !important;
  font-size: 14px !important;
  line-height: 22px !important;
}

body.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini textarea::-moz-placeholder, body.dark.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini textarea::-moz-placeholder {
  color: var(--dt-muted) !important;
  opacity: 0.82 !important;
}

body.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini textarea::placeholder,
body.dark.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini textarea::placeholder {
  color: var(--dt-muted) !important;
  opacity: 0.82 !important;
}

body.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini textarea:focus,
body.dark.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini textarea:focus {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini .comments__actions,
body.dark.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini .comments__actions {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini .comments__actions-list,
body.dark.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini .comments__actions-list {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 7px !important;
  margin: 0 !important;
}

body.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini .comments__actions-btn,
body.dark.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini .comments__actions-btn {
  flex: 0 0 34px !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--dt-border) !important;
  border-radius: 50% !important;
  background: var(--dt-surface3) !important;
  color: var(--dt-muted) !important;
  box-shadow: none !important;
}

body.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini .comments__actions-btn:hover,
body.dark.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini .comments__actions-btn:hover {
  opacity: 1 !important;
  transform: none !important;
  border-color: rgba(var(--dt-accent-rgb), 0.34) !important;
  background: rgba(var(--dt-accent-rgb), 0.12) !important;
  color: var(--dt-accent) !important;
}

body.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini .comments__actions-buttons,
body.dark.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini .comments__actions-buttons {
  display: none !important;
}

body.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini .comments__summon-list:empty,
body.dark.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini .comments__summon-list:empty,
body.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini .comments__selected-sticker:not(.comments__selected-sticker--active),
body.dark.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini .comments__selected-sticker:not(.comments__selected-sticker--active) {
  display: none !important;
}

body.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini:has(.comments__selected-sticker--active),
body.dark.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini:has(.comments__selected-sticker--active) {
  flex-wrap: wrap !important;
}

body.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini .comments__selected-sticker--active,
body.dark.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini .comments__selected-sticker--active {
  flex: 1 0 100%;
  order: 3;
  color: var(--dt-text) !important;
  background: var(--dt-surface3) !important;
  border-color: var(--dt-border) !important;
}

body.deck-page[class*=deck-theme-] .comments .comments__selected-sticker-remove,
body.dark.deck-page[class*=deck-theme-] .comments .comments__selected-sticker-remove {
  background: var(--dt-surface) !important;
  color: var(--dt-muted) !important;
}

@media screen and (max-width: 700px) {
  body.deck-page[class*=deck-theme-] .comments .comments__send-form textarea,
  body.dark.deck-page[class*=deck-theme-] .comments .comments__send-form textarea {
    min-height: 70px !important;
    padding: 4px 2px 9px !important;
  }
  body.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini,
  body.dark.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini {
    min-height: 50px;
    padding: 7px 9px !important;
    gap: 7px !important;
  }
  body.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini textarea,
  body.dark.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini textarea {
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 22px !important;
  }
  body.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini .comments__actions-list,
  body.dark.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini .comments__actions-list {
    gap: 5px !important;
  }
  body.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini .comments__actions-btn,
  body.dark.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini .comments__actions-btn {
    flex-basis: 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
  }
}
@media screen and (max-width: 480px) {
  body.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini,
  body.dark.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini {
    gap: 5px !important;
  }
  body.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini .comments__actions {
    max-width: 153px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  body.deck-page[class*=deck-theme-] .comments .comments__send-form.comments__send-form--mini .comments__actions::-webkit-scrollbar {
    display: none;
  }
}
body.deck-page[class*=deck-theme-] .tippy-box[data-theme~=dropdown],
body.deck-page[class*=deck-theme-] .tippy-box[data-theme~=sticker-list],
body.deck-page[class*=deck-theme-] .tippy-box[data-theme~=user-mini-profile],
body.dark.deck-page[class*=deck-theme-] .tippy-box[data-theme~=dropdown],
body.dark.deck-page[class*=deck-theme-] .tippy-box[data-theme~=sticker-list],
body.dark.deck-page[class*=deck-theme-] .tippy-box[data-theme~=user-mini-profile] {
  color: var(--dt-text) !important;
}

body.deck-page[class*=deck-theme-] .tippy-box[data-theme~=dropdown],
body.dark.deck-page[class*=deck-theme-] .tippy-box[data-theme~=dropdown] {
  overflow: hidden;
  border: 1px solid var(--dt-border) !important;
  border-radius: var(--dt-radius-lg) !important;
  background: var(--dt-surface) !important;
  box-shadow: var(--dt-shadow) !important;
}

body.deck-page[class*=deck-theme-] .tippy-box[data-theme~=dropdown] > .tippy-content,
body.dark.deck-page[class*=deck-theme-] .tippy-box[data-theme~=dropdown] > .tippy-content {
  padding: 0 !important;
  color: var(--dt-text) !important;
  background: transparent !important;
}

body.deck-page[class*=deck-theme-] .tippy-box[data-theme~=dropdown] > .tippy-arrow::before,
body.dark.deck-page[class*=deck-theme-] .tippy-box[data-theme~=dropdown] > .tippy-arrow::before {
  color: var(--dt-surface) !important;
}

body.deck-page[class*=deck-theme-] .dropdown__content,
body.deck-page[class*=deck-theme-] .menu.menu--profile,
body.dark.deck-page[class*=deck-theme-] .dropdown__content,
body.dark.deck-page[class*=deck-theme-] .menu.menu--profile {
  background: var(--dt-surface) !important;
  color: var(--dt-text) !important;
}

body.deck-page[class*=deck-theme-] .menu--profile .menu__inner,
body.dark.deck-page[class*=deck-theme-] .menu--profile .menu__inner {
  background: transparent !important;
  color: var(--dt-text) !important;
}

body.deck-page[class*=deck-theme-] .menu--profile .menu__header,
body.dark.deck-page[class*=deck-theme-] .menu--profile .menu__header {
  background: transparent !important;
  color: var(--dt-text) !important;
  border-color: var(--dt-divider) !important;
}

body.deck-page[class*=deck-theme-] .menu--profile .menu__avatar,
body.dark.deck-page[class*=deck-theme-] .menu--profile .menu__avatar {
  background: var(--dt-surface2) !important;
  border-color: var(--dt-border) !important;
}

body.deck-page[class*=deck-theme-] .menu--profile .menu__name,
body.deck-page[class*=deck-theme-] .menu--profile .menu__balance,
body.deck-page[class*=deck-theme-] .menu--profile .menu__balance a,
body.dark.deck-page[class*=deck-theme-] .menu--profile .menu__name,
body.dark.deck-page[class*=deck-theme-] .menu--profile .menu__balance,
body.dark.deck-page[class*=deck-theme-] .menu--profile .menu__balance a {
  color: var(--dt-text) !important;
}

body.deck-page[class*=deck-theme-] .menu--profile .menu__balance,
body.dark.deck-page[class*=deck-theme-] .menu--profile .menu__balance {
  opacity: 0.9;
}

body.deck-page[class*=deck-theme-] .menu--profile .menu__balance a,
body.dark.deck-page[class*=deck-theme-] .menu--profile .menu__balance a {
  border-bottom-color: var(--dt-accent) !important;
}

body.deck-page[class*=deck-theme-] .menu--profile .diamond,
body.dark.deck-page[class*=deck-theme-] .menu--profile .diamond {
  color: var(--dt-accent) !important;
}

body.deck-page[class*=deck-theme-] .menu--profile .menu__ascension-row,
body.dark.deck-page[class*=deck-theme-] .menu--profile .menu__ascension-row {
  background: var(--dt-surface2) !important;
  color: var(--dt-text) !important;
  border: 1px solid var(--dt-border) !important;
  box-shadow: none !important;
}

body.deck-page[class*=deck-theme-] .menu--profile .menu__ascension-row:hover,
body.dark.deck-page[class*=deck-theme-] .menu--profile .menu__ascension-row:hover {
  background: var(--dt-surface3) !important;
  border-color: rgba(var(--dt-accent-rgb), 0.34) !important;
}

body.deck-page[class*=deck-theme-] .menu--profile .menu__ascension-row-icon,
body.deck-page[class*=deck-theme-] .menu--profile .menu__ascension-row-level,
body.deck-page[class*=deck-theme-] .menu--profile .menu__ascension-row-arrow,
body.dark.deck-page[class*=deck-theme-] .menu--profile .menu__ascension-row-icon,
body.dark.deck-page[class*=deck-theme-] .menu--profile .menu__ascension-row-level,
body.dark.deck-page[class*=deck-theme-] .menu--profile .menu__ascension-row-arrow {
  color: var(--dt-accent) !important;
}

body.deck-page[class*=deck-theme-] .menu--profile .menu__ascension-row-title,
body.dark.deck-page[class*=deck-theme-] .menu--profile .menu__ascension-row-title {
  color: var(--dt-text) !important;
}

body.deck-page[class*=deck-theme-] .menu--profile .menu__packs,
body.dark.deck-page[class*=deck-theme-] .menu--profile .menu__packs {
  background: linear-gradient(135deg, rgba(var(--dt-accent-rgb), 0.14), rgba(var(--dt-accent-rgb), 0.06)) !important;
  border: 1px solid rgba(var(--dt-accent-rgb), 0.24) !important;
  color: var(--dt-text) !important;
  box-shadow: none !important;
}

body.deck-page[class*=deck-theme-] .menu--profile .menu__packs:hover,
body.dark.deck-page[class*=deck-theme-] .menu--profile .menu__packs:hover {
  background: linear-gradient(135deg, rgba(var(--dt-accent-rgb), 0.22), rgba(var(--dt-accent-rgb), 0.1)) !important;
}

body.deck-page[class*=deck-theme-] .menu--profile .menu__packs-icon,
body.dark.deck-page[class*=deck-theme-] .menu--profile .menu__packs-icon {
  background: var(--dt-accent) !important;
  color: var(--dt-button-text) !important;
}

body.deck-page[class*=deck-theme-] .menu--profile .menu__packs-title,
body.dark.deck-page[class*=deck-theme-] .menu--profile .menu__packs-title {
  color: var(--dt-text) !important;
}

body.deck-page[class*=deck-theme-] .menu--profile .menu__packs-text,
body.dark.deck-page[class*=deck-theme-] .menu--profile .menu__packs-text {
  color: var(--dt-muted) !important;
}

body.deck-page[class*=deck-theme-] .menu--profile .menu__packs-arrow,
body.dark.deck-page[class*=deck-theme-] .menu--profile .menu__packs-arrow {
  color: var(--dt-accent) !important;
}

body.deck-page[class*=deck-theme-] .menu--profile .menu__item,
body.dark.deck-page[class*=deck-theme-] .menu--profile .menu__item {
  background: transparent !important;
  color: var(--dt-text) !important;
  border-color: transparent !important;
}

body.deck-page[class*=deck-theme-] .menu--profile .menu__item i,
body.deck-page[class*=deck-theme-] .menu--profile .menu__item .icon,
body.dark.deck-page[class*=deck-theme-] .menu--profile .menu__item i,
body.dark.deck-page[class*=deck-theme-] .menu--profile .menu__item .icon {
  color: var(--dt-muted) !important;
}

body.deck-page[class*=deck-theme-] .menu--profile .menu__item:hover,
body.dark.deck-page[class*=deck-theme-] .menu--profile .menu__item:hover {
  background: var(--dt-surface2) !important;
  color: var(--dt-accent) !important;
}

body.deck-page[class*=deck-theme-] .menu--profile .menu__item:hover i,
body.deck-page[class*=deck-theme-] .menu--profile .menu__item:hover .icon,
body.dark.deck-page[class*=deck-theme-] .menu--profile .menu__item:hover i,
body.dark.deck-page[class*=deck-theme-] .menu--profile .menu__item:hover .icon {
  color: var(--dt-accent) !important;
}

body.deck-page[class*=deck-theme-] .menu--profile .menu__item--custom,
body.dark.deck-page[class*=deck-theme-] .menu--profile .menu__item--custom {
  background: var(--dt-accent) !important;
  color: var(--dt-button-text) !important;
  border-color: var(--dt-accent) !important;
}

body.deck-page[class*=deck-theme-] .menu--profile .menu__item--custom i,
body.dark.deck-page[class*=deck-theme-] .menu--profile .menu__item--custom i {
  color: var(--dt-button-text) !important;
}

body.deck-page[class*=deck-theme-] .menu--profile .menu__item--custom:hover,
body.dark.deck-page[class*=deck-theme-] .menu--profile .menu__item--custom:hover {
  filter: brightness(1.08);
  color: var(--dt-button-text) !important;
}

body.deck-page[class*=deck-theme-] .menu--profile .menu__divider,
body.dark.deck-page[class*=deck-theme-] .menu--profile .menu__divider {
  background: var(--dt-divider) !important;
  border-color: var(--dt-divider) !important;
}

body.deck-page[class*=deck-theme-] .tippy-box[data-theme~=sticker-list],
body.dark.deck-page[class*=deck-theme-] .tippy-box[data-theme~=sticker-list] {
  overflow: hidden !important;
  border: 1px solid var(--dt-border) !important;
  border-radius: var(--dt-radius-xl) !important;
  background: var(--dt-surface) !important;
  color: var(--dt-text) !important;
  box-shadow: var(--dt-shadow) !important;
}

body.deck-page[class*=deck-theme-] .tippy-box[data-theme~=sticker-list] > .tippy-content,
body.dark.deck-page[class*=deck-theme-] .tippy-box[data-theme~=sticker-list] > .tippy-content {
  padding: 0 !important;
  background: transparent !important;
  color: var(--dt-text) !important;
}

body.deck-page[class*=deck-theme-] .sticker-picker,
body.dark.deck-page[class*=deck-theme-] .sticker-picker {
  background: var(--dt-surface) !important;
  color: var(--dt-text) !important;
}

body.deck-page[class*=deck-theme-] .sticker-picker__top,
body.dark.deck-page[class*=deck-theme-] .sticker-picker__top {
  background: var(--dt-surface) !important;
  border-bottom-color: var(--dt-divider) !important;
}

body.deck-page[class*=deck-theme-] .sticker-picker__heading,
body.deck-page[class*=deck-theme-] .sticker__title,
body.dark.deck-page[class*=deck-theme-] .sticker-picker__heading,
body.dark.deck-page[class*=deck-theme-] .sticker__title {
  color: var(--dt-text) !important;
}

body.deck-page[class*=deck-theme-] .sticker-picker__subtitle,
body.deck-page[class*=deck-theme-] .sticker-picker__pack-status,
body.dark.deck-page[class*=deck-theme-] .sticker-picker__subtitle,
body.dark.deck-page[class*=deck-theme-] .sticker-picker__pack-status {
  color: var(--dt-muted) !important;
}

body.deck-page[class*=deck-theme-] .sticker-picker__close,
body.dark.deck-page[class*=deck-theme-] .sticker-picker__close {
  background: var(--dt-surface2) !important;
  color: var(--dt-muted) !important;
  border: 1px solid var(--dt-border) !important;
}

body.deck-page[class*=deck-theme-] .sticker-picker__close:hover,
body.dark.deck-page[class*=deck-theme-] .sticker-picker__close:hover {
  background: var(--dt-surface3) !important;
  color: var(--dt-accent) !important;
}

body.deck-page[class*=deck-theme-] .sticker__pack,
body.dark.deck-page[class*=deck-theme-] .sticker__pack {
  background: var(--dt-surface2) !important;
  border-bottom-color: var(--dt-divider) !important;
}

body.deck-page[class*=deck-theme-] .sticker__pack .sticker__pack-item,
body.dark.deck-page[class*=deck-theme-] .sticker__pack .sticker__pack-item {
  color: var(--dt-muted) !important;
  background: transparent !important;
  border-color: transparent !important;
}

body.deck-page[class*=deck-theme-] .sticker__pack .sticker__pack-item:hover,
body.dark.deck-page[class*=deck-theme-] .sticker__pack .sticker__pack-item:hover {
  background: var(--dt-surface3) !important;
  border-color: var(--dt-border) !important;
}

body.deck-page[class*=deck-theme-] .sticker__pack .sticker__pack-item.tabs__item--active,
body.dark.deck-page[class*=deck-theme-] .sticker__pack .sticker__pack-item.tabs__item--active {
  background: rgba(var(--dt-accent-rgb), 0.11) !important;
  border-color: rgba(var(--dt-accent-rgb), 0.35) !important;
  color: var(--dt-text) !important;
}

body.deck-page[class*=deck-theme-] .sticker__pack-image,
body.dark.deck-page[class*=deck-theme-] .sticker__pack-image {
  background: var(--dt-surface3) !important;
  border: 1px solid var(--dt-border) !important;
}

body.deck-page[class*=deck-theme-] .sticker__pack-badge,
body.dark.deck-page[class*=deck-theme-] .sticker__pack-badge {
  color: var(--dt-muted) !important;
}

body.deck-page[class*=deck-theme-] .sticker__pack-badge--owned,
body.deck-page[class*=deck-theme-] .sticker-picker__pack-status--owned,
body.dark.deck-page[class*=deck-theme-] .sticker__pack-badge--owned,
body.dark.deck-page[class*=deck-theme-] .sticker-picker__pack-status--owned {
  color: var(--dt-accent) !important;
}

body.deck-page[class*=deck-theme-] .sticker-picker__pack-head,
body.dark.deck-page[class*=deck-theme-] .sticker-picker__pack-head {
  background: var(--dt-surface) !important;
}

body.deck-page[class*=deck-theme-] .sticker-picker__shop-link,
body.dark.deck-page[class*=deck-theme-] .sticker-picker__shop-link {
  background: rgba(var(--dt-accent-rgb), 0.12) !important;
  color: var(--dt-accent) !important;
  border: 1px solid rgba(var(--dt-accent-rgb), 0.18) !important;
}

body.deck-page[class*=deck-theme-] .sticker-picker__shop-link:hover,
body.dark.deck-page[class*=deck-theme-] .sticker-picker__shop-link:hover {
  background: rgba(var(--dt-accent-rgb), 0.2) !important;
  color: var(--dt-accent) !important;
}

body.deck-page[class*=deck-theme-] .sticker__list,
body.dark.deck-page[class*=deck-theme-] .sticker__list {
  background: var(--dt-surface) !important;
  scrollbar-color: var(--dt-border) transparent !important;
}

body.deck-page[class*=deck-theme-] .sticker__item,
body.dark.deck-page[class*=deck-theme-] .sticker__item {
  background: transparent !important;
  border-color: transparent !important;
}

body.deck-page[class*=deck-theme-] .sticker__item:hover,
body.dark.deck-page[class*=deck-theme-] .sticker__item:hover {
  background: var(--dt-surface2) !important;
  border-color: var(--dt-border) !important;
}

body.deck-page[class*=deck-theme-] .sticker__list--lock .sticker__item::after,
body.dark.deck-page[class*=deck-theme-] .sticker__list--lock .sticker__item::after {
  background: color-mix(in srgb, var(--dt-surface3) 90%, #000 10%) !important;
  color: var(--dt-text) !important;
  border: 1px solid var(--dt-border) !important;
}

body.deck-page[class*=deck-theme-] .sticker__item-shop,
body.dark.deck-page[class*=deck-theme-] .sticker__item-shop {
  background: var(--dt-accent) !important;
  color: var(--dt-button-text) !important;
}

body.deck-page[class*=deck-theme-] .sticker-picker__loading,
body.deck-page[class*=deck-theme-] .sticker-picker__error,
body.dark.deck-page[class*=deck-theme-] .sticker-picker__loading,
body.dark.deck-page[class*=deck-theme-] .sticker-picker__error {
  background: var(--dt-surface) !important;
  color: var(--dt-muted) !important;
}

body.deck-page[class*=deck-theme-] .sticker-picker__loading span,
body.dark.deck-page[class*=deck-theme-] .sticker-picker__loading span {
  background: var(--dt-accent) !important;
}

body.deck-page[class*=deck-theme-] .sticker-picker img,
body.deck-page[class*=deck-theme-] .sticker-picker tgs-player,
body.dark.deck-page[class*=deck-theme-] .sticker-picker img,
body.dark.deck-page[class*=deck-theme-] .sticker-picker tgs-player {
  filter: none !important;
}

body.deck-page[class*=deck-theme-] .tippy-box[data-theme~=user-mini-profile],
body.dark.deck-page[class*=deck-theme-] .tippy-box[data-theme~=user-mini-profile] {
  background: transparent !important;
  box-shadow: none !important;
}

body.deck-page[class*=deck-theme-] .user-mini-profile,
body.dark.deck-page[class*=deck-theme-] .user-mini-profile {
  background: var(--dt-surface) !important;
  color: var(--dt-text) !important;
  border-color: var(--dt-border) !important;
  box-shadow: var(--dt-shadow) !important;
}

body.deck-page[class*=deck-theme-] .user-mini-profile__name,
body.deck-page[class*=deck-theme-] .user-mini-profile__club-title,
body.deck-page[class*=deck-theme-] .user-mini-profile__stat-content strong,
body.deck-page[class*=deck-theme-] .user-mini-profile__tower-value,
body.dark.deck-page[class*=deck-theme-] .user-mini-profile__name,
body.dark.deck-page[class*=deck-theme-] .user-mini-profile__club-title,
body.dark.deck-page[class*=deck-theme-] .user-mini-profile__stat-content strong,
body.dark.deck-page[class*=deck-theme-] .user-mini-profile__tower-value {
  color: var(--dt-text) !important;
}

body.deck-page[class*=deck-theme-] .user-mini-profile__activity,
body.deck-page[class*=deck-theme-] .user-mini-profile__about,
body.deck-page[class*=deck-theme-] .user-mini-profile__meta-item,
body.deck-page[class*=deck-theme-] .user-mini-profile__club-subtitle,
body.deck-page[class*=deck-theme-] .user-mini-profile__stat-content span,
body.deck-page[class*=deck-theme-] .user-mini-profile__tower-label,
body.dark.deck-page[class*=deck-theme-] .user-mini-profile__activity,
body.dark.deck-page[class*=deck-theme-] .user-mini-profile__about,
body.dark.deck-page[class*=deck-theme-] .user-mini-profile__meta-item,
body.dark.deck-page[class*=deck-theme-] .user-mini-profile__club-subtitle,
body.dark.deck-page[class*=deck-theme-] .user-mini-profile__stat-content span,
body.dark.deck-page[class*=deck-theme-] .user-mini-profile__tower-label {
  color: var(--dt-muted) !important;
}

body.deck-page[class*=deck-theme-] .user-mini-profile__meta-item,
body.deck-page[class*=deck-theme-] .user-mini-profile__stat,
body.deck-page[class*=deck-theme-] .user-mini-profile__club,
body.deck-page[class*=deck-theme-] .user-mini-profile__tower,
body.dark.deck-page[class*=deck-theme-] .user-mini-profile__meta-item,
body.dark.deck-page[class*=deck-theme-] .user-mini-profile__stat,
body.dark.deck-page[class*=deck-theme-] .user-mini-profile__club,
body.dark.deck-page[class*=deck-theme-] .user-mini-profile__tower {
  background: var(--dt-surface2) !important;
  border-color: var(--dt-border) !important;
}

body.deck-page[class*=deck-theme-] .user-mini-profile__meta-icon,
body.deck-page[class*=deck-theme-] .user-mini-profile__stat-icon,
body.deck-page[class*=deck-theme-] .user-mini-profile__tower-icon,
body.dark.deck-page[class*=deck-theme-] .user-mini-profile__meta-icon,
body.dark.deck-page[class*=deck-theme-] .user-mini-profile__stat-icon,
body.dark.deck-page[class*=deck-theme-] .user-mini-profile__tower-icon {
  color: var(--dt-accent) !important;
}

body.deck-page[class*=deck-theme-] .user-mini-profile__button--messages,
body.deck-page[class*=deck-theme-] .user-mini-profile__button--trade,
body.dark.deck-page[class*=deck-theme-] .user-mini-profile__button--messages,
body.dark.deck-page[class*=deck-theme-] .user-mini-profile__button--trade {
  background: rgba(var(--dt-accent-rgb), 0.08) !important;
  border-color: rgba(var(--dt-accent-rgb), 0.22) !important;
  color: var(--dt-accent) !important;
}

body.deck-page[class*=deck-theme-] .user-mini-profile__button--primary,
body.dark.deck-page[class*=deck-theme-] .user-mini-profile__button--primary {
  background: linear-gradient(135deg, var(--dt-accent), var(--dt-accent2)) !important;
  color: var(--dt-button-text) !important;
}

body.deck-page[class*=deck-theme-] .rating-info,
body.deck-page[class*=deck-theme-] .tip-popup,
body.dark.deck-page[class*=deck-theme-] .rating-info,
body.dark.deck-page[class*=deck-theme-] .tip-popup {
  background: var(--dt-surface) !important;
  color: var(--dt-text) !important;
  border: 1px solid var(--dt-border) !important;
  box-shadow: var(--dt-shadow-small) !important;
}

body.deck-page[class*=deck-theme-] .rating-info__name,
body.deck-page[class*=deck-theme-] .tip-popup__name,
body.dark.deck-page[class*=deck-theme-] .rating-info__name,
body.dark.deck-page[class*=deck-theme-] .tip-popup__name {
  color: var(--dt-text) !important;
}

body.deck-page[class*=deck-theme-] .rating-info__user:hover,
body.dark.deck-page[class*=deck-theme-] .rating-info__user:hover {
  background: var(--dt-surface2) !important;
}

body.deck-page[class*=deck-theme-] #modal-tenor .modal__content,
body.deck-page[class*=deck-theme-] #modal-tenor .modal__body,
body.deck-page[class*=deck-theme-] #modal-tenor .modal-tenor,
body.dark.deck-page[class*=deck-theme-] #modal-tenor .modal__content,
body.dark.deck-page[class*=deck-theme-] #modal-tenor .modal__body,
body.dark.deck-page[class*=deck-theme-] #modal-tenor .modal-tenor {
  background: var(--dt-surface) !important;
  color: var(--dt-text) !important;
  border-color: var(--dt-border) !important;
}

body.deck-page[class*=deck-theme-] #modal-tenor .modal-tenor__input input,
body.dark.deck-page[class*=deck-theme-] #modal-tenor .modal-tenor__input input {
  background: var(--dt-surface2) !important;
  color: var(--dt-text) !important;
  border-color: var(--dt-border) !important;
}

body.deck-page[class*=deck-theme-] #modal-tenor .modal-tenor__input input:focus,
body.dark.deck-page[class*=deck-theme-] #modal-tenor .modal-tenor__input input:focus {
  border-color: var(--dt-accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--dt-accent-rgb), 0.1) !important;
}

body.deck-page[class*=deck-theme-] #modal-tenor .modal-tenor__powered,
body.dark.deck-page[class*=deck-theme-] #modal-tenor .modal-tenor__powered {
  color: var(--dt-muted) !important;
}

body.deck-page.deck-theme-manga .tippy-box[data-theme~=dropdown],
body.deck-page.deck-theme-manga .tippy-box[data-theme~=sticker-list],
body.deck-page.deck-theme-manga .menu--profile .menu__ascension-row,
body.deck-page.deck-theme-manga .menu--profile .menu__packs,
body.deck-page.deck-theme-manga .sticker__pack .sticker__pack-item.tabs__item--active,
body.deck-page.deck-theme-manga .user-mini-profile {
  border: 2px solid var(--dt-text) !important;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.13) !important;
}

body.deck-page.deck-theme-terminal .tippy-box[data-theme~=dropdown],
body.deck-page.deck-theme-terminal .tippy-box[data-theme~=sticker-list],
body.deck-page.deck-theme-terminal .menu--profile .menu__ascension-row,
body.deck-page.deck-theme-terminal .menu--profile .menu__packs,
body.deck-page.deck-theme-terminal .user-mini-profile {
  border-radius: 4px !important;
}

body.deck-page.deck-theme-terminal .menu--profile,
body.deck-page.deck-theme-terminal .sticker-picker,
body.deck-page.deck-theme-terminal .user-mini-profile {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

body.deck-page.deck-theme-brutal .tippy-box[data-theme~=dropdown],
body.deck-page.deck-theme-brutal .tippy-box[data-theme~=sticker-list],
body.deck-page.deck-theme-brutal .user-mini-profile {
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42) !important;
}

body.deck-page.deck-theme-glass .tippy-box[data-theme~=dropdown],
body.deck-page.deck-theme-glass .tippy-box[data-theme~=sticker-list],
body.deck-page.deck-theme-glass .user-mini-profile,
body.deck-page.deck-theme-glass .sticker-picker,
body.deck-page.deck-theme-glass .menu--profile {
  backdrop-filter: blur(22px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.15) !important;
}

body.deck-page.deck-theme-shadowmonarch .tippy-box[data-theme~=dropdown],
body.deck-page.deck-theme-shadowmonarch .tippy-box[data-theme~=sticker-list],
body.deck-page.deck-theme-shadowmonarch .user-mini-profile {
  box-shadow: 0 0 0 1px rgba(var(--dt-accent-rgb), 0.22), 0 0 32px rgba(var(--dt-accent-rgb), 0.14), 0 22px 60px rgba(0, 0, 0, 0.55) !important;
}

body.deck-page.deck-theme-shadowmonarch .menu--profile .menu__item:hover,
body.deck-page.deck-theme-shadowmonarch .sticker__item:hover {
  box-shadow: inset 3px 0 0 var(--dt-accent) !important;
}

body.deck-page.deck-theme-newspaper .tippy-box[data-theme~=dropdown],
body.deck-page.deck-theme-newspaper .tippy-box[data-theme~=sticker-list],
body.deck-page.deck-theme-editorial .tippy-box[data-theme~=dropdown],
body.deck-page.deck-theme-editorial .tippy-box[data-theme~=sticker-list] {
  border-radius: 2px !important;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.08) !important;
}

body.deck-page.deck-theme-retroos .tippy-box[data-theme~=dropdown],
body.deck-page.deck-theme-retroos .tippy-box[data-theme~=sticker-list],
body.deck-page.deck-theme-retroos .user-mini-profile {
  border-radius: 0 !important;
  border-width: 2px !important;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.6), inset -1px -1px 0 rgba(0, 0, 0, 0.25), 5px 5px 0 rgba(0, 0, 0, 0.22) !important;
}

body.deck-page[class*=deck-theme-] #modal-cards.modal.modal--open .manga-cards__container .manga-cards__wrapper .manga-cards__info,
body.dark.deck-page[class*=deck-theme-] #modal-cards.modal.modal--open .manga-cards__container .manga-cards__wrapper .manga-cards__info {
  background: var(--dt-surface) !important;
  background-color: var(--dt-surface) !important;
  color: var(--dt-text) !important;
  border-color: var(--dt-border) !important;
  font-family: var(--dt-font) !important;
}

body.deck-page[class*=deck-theme-] #modal-cards.modal.modal--open .manga-cards__info .manga-cards__name,
body.dark.deck-page[class*=deck-theme-] #modal-cards.modal.modal--open .manga-cards__info .manga-cards__name {
  color: var(--dt-text) !important;
  font-family: var(--dt-font) !important;
}

body.deck-page[class*=deck-theme-] #modal-cards.modal.modal--open .manga-cards__info .manga-cards__link,
body.dark.deck-page[class*=deck-theme-] #modal-cards.modal.modal--open .manga-cards__info .manga-cards__link {
  color: var(--dt-muted) !important;
}

body.deck-page[class*=deck-theme-] #modal-cards.modal.modal--open .manga-cards__info .manga-cards__link:hover,
body.dark.deck-page[class*=deck-theme-] #modal-cards.modal.modal--open .manga-cards__info .manga-cards__link:hover,
body.deck-page[class*=deck-theme-] #modal-cards.modal.modal--open .manga-cards__info .manga-cards__text a,
body.dark.deck-page[class*=deck-theme-] #modal-cards.modal.modal--open .manga-cards__info .manga-cards__text a {
  color: var(--dt-accent) !important;
}

body.deck-page[class*=deck-theme-] #modal-cards.modal.modal--open .manga-cards__info .manga-cards__text,
body.dark.deck-page[class*=deck-theme-] #modal-cards.modal.modal--open .manga-cards__info .manga-cards__text,
body.deck-page[class*=deck-theme-] #modal-cards.modal.modal--open .manga-cards__info .manga-cards__text span,
body.dark.deck-page[class*=deck-theme-] #modal-cards.modal.modal--open .manga-cards__info .manga-cards__text span {
  color: var(--dt-muted) !important;
}

body.deck-page[class*=deck-theme-] #modal-cards .manga-cards__controls .button,
body.dark.deck-page[class*=deck-theme-] #modal-cards .manga-cards__controls .button {
  background: var(--dt-surface2) !important;
  background-color: var(--dt-surface2) !important;
  color: var(--dt-text) !important;
  border-color: var(--dt-border) !important;
  box-shadow: none !important;
}

body.deck-page[class*=deck-theme-] #modal-cards .manga-cards__controls .button i,
body.dark.deck-page[class*=deck-theme-] #modal-cards .manga-cards__controls .button i {
  color: inherit !important;
}

body.deck-page[class*=deck-theme-] #modal-cards .manga-cards__controls .button:hover,
body.dark.deck-page[class*=deck-theme-] #modal-cards .manga-cards__controls .button:hover,
body.deck-page[class*=deck-theme-] #modal-cards .manga-cards__controls .modal-card-fav--active,
body.dark.deck-page[class*=deck-theme-] #modal-cards .manga-cards__controls .modal-card-fav--active {
  background: var(--dt-accent) !important;
  background-color: var(--dt-accent) !important;
  border-color: var(--dt-accent) !important;
  color: var(--dt-button-text) !important;
}

body.deck-page[class*=deck-theme-] #modal-cards .modal__close,
body.dark.deck-page[class*=deck-theme-] #modal-cards .modal__close,
body.deck-page[class*=deck-theme-] #modal-cards .modal__edit,
body.dark.deck-page[class*=deck-theme-] #modal-cards .modal__edit {
  background: var(--dt-surface2) !important;
  background-color: var(--dt-surface2) !important;
  color: var(--dt-text) !important;
  border-color: var(--dt-border) !important;
  box-shadow: none !important;
}

body.deck-page[class*=deck-theme-] #modal-cards .modal__close i,
body.dark.deck-page[class*=deck-theme-] #modal-cards .modal__close i,
body.deck-page[class*=deck-theme-] #modal-cards .modal__edit i,
body.dark.deck-page[class*=deck-theme-] #modal-cards .modal__edit i {
  color: inherit !important;
}

body.deck-page[class*=deck-theme-] #modal-cards .modal__close:hover,
body.dark.deck-page[class*=deck-theme-] #modal-cards .modal__close:hover,
body.deck-page[class*=deck-theme-] #modal-cards .modal__edit:hover,
body.dark.deck-page[class*=deck-theme-] #modal-cards .modal__edit:hover {
  background: var(--dt-accent) !important;
  background-color: var(--dt-accent) !important;
  border-color: var(--dt-accent) !important;
  color: var(--dt-button-text) !important;
}

body.deck-page[class*=deck-theme-] #modal-cards .manga-cards__report,
body.dark.deck-page[class*=deck-theme-] #modal-cards .manga-cards__report {
  background: var(--dt-surface2) !important;
  background-color: var(--dt-surface2) !important;
  color: var(--dt-text) !important;
  border-color: var(--dt-border) !important;
}

body.deck-page[class*=deck-theme-] #modal-cards .modal-report .default-select,
body.dark.deck-page[class*=deck-theme-] #modal-cards .modal-report .default-select,
body.deck-page[class*=deck-theme-] #modal-cards .modal-report textarea,
body.dark.deck-page[class*=deck-theme-] #modal-cards .modal-report textarea,
body.deck-page[class*=deck-theme-] #modal-cards .modal-report .form__field,
body.dark.deck-page[class*=deck-theme-] #modal-cards .modal-report .form__field {
  background: var(--dt-input) !important;
  background-color: var(--dt-input) !important;
  color: var(--dt-text) !important;
  border-color: var(--dt-border) !important;
}

body.deck-page[class*=deck-theme-] #modal-cards .modal-report textarea::-moz-placeholder, body.dark.deck-page[class*=deck-theme-] #modal-cards .modal-report textarea::-moz-placeholder {
  color: var(--dt-muted) !important;
}

body.deck-page[class*=deck-theme-] #modal-cards .modal-report textarea::placeholder,
body.dark.deck-page[class*=deck-theme-] #modal-cards .modal-report textarea::placeholder {
  color: var(--dt-muted) !important;
}

body.deck-page[class*=deck-theme-] #modal-cards .manga-cards__report > .button,
body.dark.deck-page[class*=deck-theme-] #modal-cards .manga-cards__report > .button,
body.deck-page[class*=deck-theme-] #modal-cards .modal-report__send-btn,
body.dark.deck-page[class*=deck-theme-] #modal-cards .modal-report__send-btn {
  background: var(--dt-accent) !important;
  background-color: var(--dt-accent) !important;
  color: var(--dt-button-text) !important;
  border-color: var(--dt-accent) !important;
}

body.deck-page[class*=deck-theme-] #modal-cards .manga-cards__copy,
body.dark.deck-page[class*=deck-theme-] #modal-cards .manga-cards__copy,
body.deck-page[class*=deck-theme-] #modal-cards .manga-cards__badge,
body.dark.deck-page[class*=deck-theme-] #modal-cards .manga-cards__badge,
body.deck-page[class*=deck-theme-] #modal-cards .manga-cards__reward,
body.dark.deck-page[class*=deck-theme-] #modal-cards .manga-cards__reward {
  background: var(--dt-surface2) !important;
  background-color: var(--dt-surface2) !important;
  color: var(--dt-text) !important;
  border-color: var(--dt-border) !important;
}

body.deck-page[class*=deck-theme-] #modal-cards .manga-cards__placeholder img,
body.dark.deck-page[class*=deck-theme-] #modal-cards .manga-cards__placeholder img,
body.deck-page[class*=deck-theme-] #modal-cards video,
body.dark.deck-page[class*=deck-theme-] #modal-cards video,
body.deck-page[class*=deck-theme-] #modal-cards .card-anim-frame,
body.dark.deck-page[class*=deck-theme-] #modal-cards .card-anim-frame {
  filter: none !important;
}

.guest-reg-promo,
.guest-reg-promo * {
  box-sizing: border-box;
}

.guest-reg-promo {
  --promo-purple: #a875ff;
  --promo-purple-2: #d35cff;
  --promo-blue: #62baff;
  --promo-pink: #ff789f;
  --promo-text: #f6f7ff;
  --promo-muted: #aeb5d0;
  --promo-line: rgba(161, 174, 224, .18);
  --promo-panel: rgba(14, 20, 45, .80);
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}
.guest-reg-promo--open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.guest-reg-promo__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 7, 16, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.guest-reg-promo__dialog {
  position: relative;
  width: min(1280px, 100vw - 44px);
  max-height: calc(100dvh - 44px);
  overflow: hidden auto;
  border-radius: 28px;
  color: var(--promo-text);
  background: #090d1e;
  border: 1px solid rgba(160, 175, 230, 0.15);
  box-shadow: 0 34px 110px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  scrollbar-width: none;
  transform: translateY(8px) scale(0.992);
  transition: transform 0.2s ease;
  isolation: isolate;
}
.guest-reg-promo__dialog::-webkit-scrollbar {
  display: none;
}
.guest-reg-promo__dialog::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg, rgba(7, 10, 26, 0.9) 0%, rgba(7, 10, 26, 0.69) 48%, rgba(7, 10, 26, 0.78) 100%), linear-gradient(180deg, rgba(7, 10, 26, 0.15) 0%, rgba(7, 10, 26, 0.78) 100%), url("/assets/guest-registration/bg-desktop.webp") center/cover no-repeat;
}
.guest-reg-promo__dialog::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 74% 18%, rgba(167, 88, 255, 0.12), transparent 27%), radial-gradient(circle at 21% 76%, rgba(66, 155, 255, 0.1), transparent 28%);
}
.guest-reg-promo--open .guest-reg-promo__dialog {
  transform: translateY(0) scale(1);
}
.guest-reg-promo__close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 12, 29, 0.82);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.guest-reg-promo__close svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.guest-reg-promo__close:hover {
  background: rgba(21, 29, 60, 0.96);
  border-color: rgba(255, 255, 255, 0.24);
  transform: scale(1.04);
}
.guest-reg-promo__content {
  position: relative;
  z-index: 2;
  padding: 54px 56px 38px;
}
.guest-reg-promo__top {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(560px, 1.18fr);
  gap: 48px;
  align-items: center;
}
.guest-reg-promo__copy {
  min-width: 0;
  padding-bottom: 6px;
}
.guest-reg-promo__brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 28px;
}
.guest-reg-promo__brand-mark {
  display: block;
  font-size: clamp(33px, 3vw, 47px);
  line-height: 0.95;
  letter-spacing: -2.3px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 28px rgba(168, 117, 255, 0.12);
}
.guest-reg-promo__brand-mark span {
  color: var(--promo-purple);
}
.guest-reg-promo__brand-sub {
  display: block;
  margin-top: 9px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(215, 219, 240, 0.48);
}
.guest-reg-promo__title {
  margin: 0;
  max-width: 480px;
  color: #fff;
  font-size: clamp(44px, 4.4vw, 67px);
  line-height: 0.99;
  letter-spacing: -0.052em;
  font-weight: 900;
}
.guest-reg-promo__title span {
  background: linear-gradient(90deg, #72c9ff 0%, #9a8bff 45%, #dc74f5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.guest-reg-promo__lead {
  max-width: 500px;
  margin: 24px 0 0;
  color: rgba(228, 232, 248, 0.72);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 500;
}
.guest-reg-promo__mini-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  color: rgba(211, 217, 238, 0.48);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.guest-reg-promo__mini-stats i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
}
.guest-reg-promo__showcase {
  min-width: 0;
  padding: 24px 0 4px;
}
.guest-reg-promo__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  align-items: end;
  width: 100%;
  max-width: 660px;
  margin-left: auto;
}
.guest-reg-promo__card {
  position: relative;
  min-width: 0;
  height: clamp(245px, 22vw, 330px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.28));
}
.guest-reg-promo__card img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center bottom;
     object-position: center bottom;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
}
.guest-reg-promo__card--yoruichi {
  transform: translateY(6px) rotate(-1.7deg);
}
.guest-reg-promo__card--gojo {
  transform: translateY(-4px) rotate(0.8deg);
}
.guest-reg-promo__card--makima {
  transform: translateY(5px) rotate(-0.8deg);
}
.guest-reg-promo__card--meimei {
  transform: translateY(1px) rotate(1.4deg);
}
.guest-reg-promo__showcase-caption {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 8px;
  color: rgba(211, 216, 238, 0.45);
  font-size: 11px;
  font-weight: 600;
}
.guest-reg-promo__showcase-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8f70ff;
  box-shadow: 0 0 13px rgba(143, 112, 255, 0.72);
}
.guest-reg-promo__features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 34px;
}
.guest-reg-promo__feature {
  min-width: 0;
  min-height: 94px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px 17px;
  border: 1px solid var(--promo-line);
  border-radius: 18px;
  background: rgba(13, 19, 43, 0.72);
  color: var(--promo-text);
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  cursor: pointer;
}
.guest-reg-promo__feature-icon {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.guest-reg-promo__feature-icon svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.guest-reg-promo__feature-icon--purple {
  color: #b58aff;
  background: rgba(136, 90, 255, 0.12);
}
.guest-reg-promo__feature-icon--blue {
  color: #73c9ff;
  background: rgba(72, 155, 255, 0.11);
}
.guest-reg-promo__feature-icon--pink {
  color: #ff89aa;
  background: rgba(255, 112, 150, 0.1);
}
.guest-reg-promo__feature-icon--violet {
  color: #c090ff;
  background: rgba(167, 107, 255, 0.11);
}
.guest-reg-promo__feature-copy {
  display: block;
  min-width: 0;
}
.guest-reg-promo__feature-copy strong,
.guest-reg-promo__feature-copy small {
  display: block;
}
.guest-reg-promo__feature-copy strong {
  margin-bottom: 5px;
  color: #f7f8ff;
  font-size: 14px;
  line-height: 1.15;
  font-weight: 800;
}
.guest-reg-promo__feature-copy small {
  color: rgba(210, 216, 239, 0.62);
  font-size: 11.5px;
  line-height: 1.35;
  font-weight: 500;
}
.guest-reg-promo__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 26px;
}
.guest-reg-promo__register {
  width: min(460px, 100%);
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 15px 26px;
  border-radius: 19px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
  font-weight: 850;
  background: linear-gradient(105deg, #725aff 0%, #a34cff 48%, #d554e7 100%);
  box-shadow: 0 14px 34px rgba(107, 70, 255, 0.28), 0 0 25px rgba(207, 76, 245, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.guest-reg-promo__register svg {
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.guest-reg-promo__register:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 18px 42px rgba(107, 70, 255, 0.36), 0 0 32px rgba(207, 76, 245, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.36);
}
.guest-reg-promo__register:active {
  transform: translateY(0);
}
.guest-reg-promo__register-user {
  width: 24px;
  height: 24px;
}
.guest-reg-promo__register-arrow {
  width: 20px;
  height: 20px;
}
.guest-reg-promo__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  color: rgba(218, 223, 241, 0.47);
  font-size: 11.5px;
  font-weight: 500;
}
.guest-reg-promo__meta i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}
.guest-reg-promo__continue {
  margin-top: 7px;
  padding: 5px 2px 4px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: rgba(223, 227, 244, 0.59);
  font: inherit;
  font-size: 11.5px;
  line-height: 1;
  cursor: pointer;
}

body.guest-reg-promo-open {
  overflow: hidden !important;
}

@media (max-width: 1080px) {
  .guest-reg-promo__content {
    padding: 46px 40px 34px;
  }
  .guest-reg-promo__top {
    grid-template-columns: minmax(0, 0.8fr) minmax(500px, 1.2fr);
    gap: 28px;
  }
  .guest-reg-promo__feature {
    padding: 14px;
    gap: 12px;
  }
  .guest-reg-promo__feature-icon {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
  }
}
@media (max-width: 900px) {
  .guest-reg-promo {
    padding: 0;
    align-items: stretch;
  }
  .guest-reg-promo__backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #060916;
  }
  .guest-reg-promo__dialog {
    width: 100%;
    max-height: 100dvh;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .guest-reg-promo__dialog::before {
    background: linear-gradient(180deg, rgba(7, 10, 27, 0.76) 0%, rgba(7, 10, 27, 0.9) 62%, rgba(7, 10, 27, 0.98) 100%), url("/assets/guest-registration/bg-mobile.webp") center top/cover no-repeat;
  }
  .guest-reg-promo__content {
    min-height: 100dvh;
    padding: max(22px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
  }
  .guest-reg-promo__close {
    position: fixed;
    top: max(14px, env(safe-area-inset-top));
    right: 14px;
    width: 40px;
    height: 40px;
  }
  .guest-reg-promo__top {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  .guest-reg-promo__copy {
    padding: 0 4px;
  }
  .guest-reg-promo__brand {
    margin-bottom: 20px;
    padding-right: 52px;
  }
  .guest-reg-promo__brand-mark {
    font-size: 35px;
    letter-spacing: -1.8px;
  }
  .guest-reg-promo__brand-sub {
    margin-top: 7px;
    font-size: 8.5px;
  }
  .guest-reg-promo__title {
    max-width: none;
    font-size: clamp(40px, 12vw, 58px);
    line-height: 0.98;
  }
  .guest-reg-promo__lead {
    margin-top: 17px;
    max-width: 630px;
    font-size: 13.5px;
    line-height: 1.55;
  }
  .guest-reg-promo__mini-stats {
    display: none;
  }
  .guest-reg-promo__showcase {
    padding: 2px 0 0;
  }
  .guest-reg-promo__cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    max-width: 100%;
    margin: 0;
  }
  .guest-reg-promo__card {
    height: clamp(150px, 40vw, 220px);
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.22));
  }
  .guest-reg-promo__card--yoruichi, .guest-reg-promo__card--gojo, .guest-reg-promo__card--makima, .guest-reg-promo__card--meimei {
    transform: none;
  }
  .guest-reg-promo__showcase-caption {
    display: none;
  }
  .guest-reg-promo__features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 19px;
  }
  .guest-reg-promo__feature {
    min-height: 82px;
    padding: 12px;
    gap: 11px;
    border-radius: 15px;
  }
  .guest-reg-promo__feature-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }
  .guest-reg-promo__feature-icon svg {
    width: 25px;
    height: 25px;
  }
  .guest-reg-promo__feature-copy strong {
    font-size: 12.5px;
    margin-bottom: 4px;
  }
  .guest-reg-promo__feature-copy small {
    font-size: 10.5px;
  }
  .guest-reg-promo__footer {
    margin-top: 20px;
    padding-bottom: 4px;
  }
  .guest-reg-promo__register {
    width: 100%;
    min-height: 60px;
    border-radius: 17px;
    font-size: 16px;
  }
}
@media (max-width: 520px) {
  .guest-reg-promo__content {
    padding-left: 14px;
    padding-right: 14px;
  }
  .guest-reg-promo__brand-mark {
    font-size: 31px;
  }
  .guest-reg-promo__title {
    font-size: clamp(37px, 11.7vw, 48px);
  }
  .guest-reg-promo__lead {
    font-size: 12.7px;
  }
  .guest-reg-promo__card {
    height: clamp(132px, 39vw, 178px);
  }
  .guest-reg-promo__features {
    gap: 8px;
  }
  .guest-reg-promo__feature {
    min-height: 78px;
    padding: 10px;
    gap: 9px;
  }
  .guest-reg-promo__feature-icon {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }
  .guest-reg-promo__feature-copy strong {
    font-size: 11.8px;
  }
  .guest-reg-promo__feature-copy small {
    font-size: 9.8px;
  }
  .guest-reg-promo__register {
    min-height: 58px;
    font-size: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .guest-reg-promo,
  .guest-reg-promo__dialog,
  .guest-reg-promo__close,
  .guest-reg-promo__register {
    transition: none !important;
  }
}
/* v4: фикс CTA — глобальные стили ссылок сайта больше не могут затемнить текст */
.guest-reg-promo .guest-reg-promo__register,
.guest-reg-promo .guest-reg-promo__register:link,
.guest-reg-promo .guest-reg-promo__register:visited,
.guest-reg-promo .guest-reg-promo__register:hover,
.guest-reg-promo .guest-reg-promo__register:focus,
.guest-reg-promo .guest-reg-promo__register:focus-visible,
.guest-reg-promo .guest-reg-promo__register:active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
}

.guest-reg-promo .guest-reg-promo__register > span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.guest-reg-promo .guest-reg-promo__register svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Hover только свечением. Кнопка не двигается и не меняет геометрию. */
@media (hover: hover) and (pointer: fine) {
  .guest-reg-promo .guest-reg-promo__register:hover {
    transform: none !important;
    filter: none !important;
    background: linear-gradient(105deg, #7b63ff 0%, #ae55ff 48%, #df5aec 100%) !important;
    border-color: rgba(255, 255, 255, 0.58) !important;
    box-shadow: 0 16px 38px rgba(107, 70, 255, 0.34), 0 0 34px rgba(207, 76, 245, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
  }
}
.guest-reg-promo .guest-reg-promo__register:active {
  transform: none !important;
  filter: none !important;
}

/*! 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-button-alt::before {
  content: "\e72f";
}

.icon-search::before {
  content: "\e8b6";
}

.icon-tower::before {
  content: "\f25b";
}

.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;
  }
}