/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
@layer properties;
.home-page {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 0 8px 40px;
  overflow: visible;
  --home-page-max-width: 1280px;
  --hub-nav-max-width: 860px;
  --hub-nav-width: min(100%, var(--hub-nav-max-width));
  --hub-nav-height: 50px;
  --hub-nav-padding-x: 34px;
  --hub-nav-gap: 0;
  --hub-nav-item-height: 42px;
  --hub-nav-font-size: 15px;
  --home-gold: #d8bd7a;
  --home-gold-soft: #f0dfad;
  --home-border: rgba(215, 188, 122, 0.7);
  --home-border-soft: rgba(255, 231, 169, 0.28);
  --home-bg: rgba(5, 8, 10, 0.82);
  --home-bg-deep: rgba(1, 3, 5, 0.92);
}
.home-page .mz-hub-nav {
  margin-bottom: 18px;
}
.home-page-nav__panel {
  max-width: var(--hub-nav-max-width);
}
.home-page-nav__list {
  position: relative;
  justify-content: center;
  gap: 0;
}
.home-page-nav__active {
  top: calc(50% + var(--hub-nav-active-shift-y, -1px));
  left: 0;
  width: 104px;
  height: var(--hub-nav-active-height, 46px);
  opacity: 0;
  background: url("/ui/active_nav_menu.png") center center / 100% 100% no-repeat;
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1), width 0.36s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}
.home-page-nav__item {
  flex: 0 1 180px;
  min-width: 150px;
  max-width: 210px;
  height: var(--hub-nav-item-height);
  padding: 0 14px;
  overflow: visible;
}
.home-page-nav__label {
  top: 1px;
}
.home-page-nav__divider {
  width: 22px;
  height: 44px;
  flex: 0 0 22px;
  opacity: 0.85;
}
.home-page-nav__divider img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.home-page__shell {
  position: relative;
  width: 100%;
  max-width: var(--home-page-max-width);
  margin: 0 auto;
  display: grid;
  gap: 20px;
  overflow: visible;
}
.home-journal-card {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.home-journal-card__inner {
  position: relative;
  width: 100%;
  min-width: 0;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.home-journal-card__media {
  --home-image-inset-x: 2.5%;
  --home-image-inset-top: 4.5%;
  --home-image-inset-bottom: 1.1%;
  --home-image-position-x: 58%;
  --home-image-position-y: center;
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 4096 / 1050;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: hidden;
}
.home-journal-card__image {
  position: absolute;
  z-index: 1;
  left: var(--home-image-inset-x);
  top: var(--home-image-inset-top);
  width: calc(100% - (var(--home-image-inset-x) * 2));
  height: calc(100% - var(--home-image-inset-top) - var(--home-image-inset-bottom));
  display: block;
  object-fit: cover;
  object-position: var(--home-image-position-x) var(--home-image-position-y);
  transform: none;
  filter: none;
  opacity: 1;
  pointer-events: none;
  user-select: none;
}
.home-journal-card__image-overlay {
  position: absolute;
  z-index: 2;
  left: var(--home-image-inset-x);
  top: var(--home-image-inset-top);
  width: calc(100% - (var(--home-image-inset-x) * 2));
  height: calc(100% - var(--home-image-inset-top) - var(--home-image-inset-bottom));
  background: linear-gradient( 90deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.04) 34%, rgba(0, 0, 0, 0.04) 66%, rgba(0, 0, 0, 0.28) ), linear-gradient( 180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.02) 45%, rgba(0, 0, 0, 0.24) );
  pointer-events: none;
  user-select: none;
}
.home-journal-card__image-content {
  position: absolute;
  z-index: 3;
  left: calc(var(--home-image-inset-x) + 4%);
  right: calc(var(--home-image-inset-x) + 4%);
  top: 50%;
  transform: translateY(-50%);
  min-height: 1px;
  pointer-events: none;
}
.home-journal-card__frame {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center center;
  transform: none;
  filter: none;
  opacity: 1;
  pointer-events: none;
  user-select: none;
}
.home-journal-card__media::before, .home-journal-card__media::after {
  content: none;
}
.home-journal-card__body {
  --home-body-width: 97%;
  --home-body-overlap-y: 9px;
  --home-body-min-height: 845px;
  --home-body-padding-top: 25px;
  --home-body-padding-x: 25px;
  --home-body-padding-bottom: 64px;
  position: relative;
  z-index: 1;
  width: var(--home-body-width);
  min-width: 0;
  min-height: var(--home-body-min-height);
  margin: calc(var(--home-body-overlap-y) * -1) auto 0;
  padding: var(--home-body-padding-top) var(--home-body-padding-x) var(--home-body-padding-bottom);
  box-sizing: border-box;
  text-align: center;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-image: url("/ui/content_frame.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
  overflow: visible;
}
.home-journal-card__body > * {
  position: relative;
  z-index: 2;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.home-news-section-title {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 12px;
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: center;
  align-items: center;
  gap: 6px;
  overflow: visible;
}
.home-news-section-title__text {
  color: #f4e4bd;
  font-family: "Cormorant SC", serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 1), 0 0 10px rgba(226, 190, 115, 0.18);
}
.home-news-section-title__line {
  height: 25px;
  aspect-ratio: 1725 / 184;
  background-image: url("/news/text_divider_right.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  pointer-events: none;
}
.home-news-section-title__line--left {
  transform: scaleX(-1);
}
.home-news-feed {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
  overflow: visible;
}
.home-news-feed--news {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-news-feed--promotions {
  grid-template-columns: minmax(0, 1fr);
}
.home-news-frame {
  width: 100%;
  min-width: 0;
  overflow: visible;
}
.home-news-frame--wide {
  grid-column: 1 / -1;
}
.home-news-card {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 112px;
  display: grid;
  grid-template-columns: minmax(132px, 37%) minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  padding: 7px 9px;
  color: rgba(232, 225, 207, 0.86);
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}
.home-news-card--with-image {
  grid-template-columns: minmax(132px, 37%) minmax(0, 1fr);
}
.home-news-card--text {
  grid-template-columns: minmax(0, 1fr);
  min-height: 112px;
}
.home-news-card--text .home-news-card__content {
  padding: 8px 9px;
}
.home-news-card--text .home-news-card__excerpt {
  max-width: 100%;
  -webkit-line-clamp: 3;
}
.home-news-card--wide {
  min-height: 118px;
  grid-template-columns: minmax(210px, 285px) minmax(0, 1fr);
  padding: 8px 10px;
}
.home-news-card--wide .home-news-card__media-frame {
  min-height: 100px;
}
.home-news-card--wide .home-news-card__content {
  padding-right: 8px;
}
.home-news-card--wide .home-news-card__title {
  font-size: 21px;
}
.home-news-card--wide .home-news-card__excerpt {
  -webkit-line-clamp: 2;
}
.home-news-feed--promotions .home-news-card {
  min-height: 140px;
}
.home-news-feed--promotions .home-news-card--with-image {
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
}
.home-news-card__media {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: stretch;
  text-decoration: none;
  overflow: visible;
}
.home-news-card__media-frame {
  position: relative;
  width: 100%;
  min-height: 94px;
  aspect-ratio: 840 / 350;
  margin: 0;
  padding: 3px;
  isolation: isolate;
  background: linear-gradient( 180deg, rgba(255, 225, 156, 0.08), transparent 24%, transparent 76%, rgba(90, 55, 30, 0.1) ), linear-gradient(180deg, #30251a 0%, #151d1e 30%, #0c1111 100%);
  border: 1px solid rgba(206, 150, 78, 0.36);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(255, 236, 185, 0.055), inset 0 0 9px rgba(0, 0, 0, 0.48);
}
.home-news-card__media-frame::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient( 90deg, transparent, rgba(244, 204, 126, 0.48), transparent ) center top / 74% 1px no-repeat, linear-gradient( 90deg, transparent, rgba(244, 204, 126, 0.22), transparent ) center bottom / 74% 1px no-repeat, linear-gradient( 180deg, transparent, rgba(244, 204, 126, 0.13), transparent ) left center / 1px 62% no-repeat, linear-gradient( 180deg, transparent, rgba(244, 204, 126, 0.13), transparent ) right center / 1px 62% no-repeat;
}
.home-news-card__media-frame::after {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: 5;
  pointer-events: none;
  border: 1px solid rgba(75, 130, 136, 0.15);
}
.home-news-card__media-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  background: linear-gradient( 90deg, rgba(7, 10, 12, 0.95) 0%, rgba(28, 40, 41, 0.72) 46%, rgba(7, 10, 12, 0.44) 100% );
  border: 1px solid rgba(227, 174, 92, 0.14);
  box-shadow: inset 0 0 0 1px rgba(78, 142, 148, 0.08), inset 0 0 11px rgba(0, 0, 0, 0.54);
}
.home-news-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: none;
  transform: none;
  transition: transform 0.28s ease, filter 0.28s ease;
  user-select: none;
  pointer-events: none;
}
.home-news-card__media:hover .home-news-card__image {
  transform: scale(1.035);
  filter: brightness(1.08);
}
.home-news-card__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1px 0;
  text-align: left;
}
.home-news-card__top {
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.home-news-card__badge {
  position: relative;
  width: fit-content;
  min-width: 52px;
  padding: 3px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  border: 1px solid rgba(217, 172, 108, 0.3);
  background: linear-gradient( 180deg, rgba(45, 48, 45, 0.88) 0%, rgba(18, 20, 20, 0.94) 100% );
  box-shadow: inset 0 0 8px rgba(217, 172, 108, 0.15), inset 0 1px 0 rgba(255, 232, 186, 0.055), 0 2px 4px rgba(0, 0, 0, 0.5);
  color: #f1ddb1;
  font-family: "Cormorant SC", serif;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.95), 0 0 6px rgba(255, 221, 150, 0.18);
}
.home-news-card__badge::before, .home-news-card__badge::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #ffdda0;
  box-shadow: 0 0 3px #ffdda0;
  transform: translateY(-50%);
}
.home-news-card__badge::before {
  left: -4px;
}
.home-news-card__badge::after {
  right: -4px;
}
.home-news-card__title {
  margin: 0 0 5px;
  font-family: "Cormorant SC", serif;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}
.home-news-card__title a {
  color: #f4e4bd;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 1), 0 0 9px rgba(226, 190, 115, 0.14);
  transition: color 0.22s ease, text-shadow 0.22s ease;
}
.home-news-card__title a:hover {
  color: #fff1ca;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 1), 0 0 12px rgba(255, 221, 148, 0.28);
}
.home-news-card__excerpt {
  max-width: 100%;
  margin: 0;
  color: rgba(226, 222, 209, 0.78);
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.86);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-news-card__bottom {
  margin-top: 7px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: rgba(206, 199, 178, 0.78);
  font-family: "Cormorant SC", serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.home-news-card__info {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.home-news-card__info img {
  width: 12px;
  height: 12px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}
.home-news-card__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(218, 186, 118, 0.7);
  box-shadow: 0 0 6px rgba(218, 186, 118, 0.3);
}
.home-news-card__read-more {
  --news-read-btn-w: 115px;
  --news-read-btn-x: 2px;
  --news-read-btn-y: 2px;
  position: relative;
  width: var(--news-read-btn-w);
  min-width: var(--news-read-btn-w);
  max-width: var(--news-read-btn-w);
  aspect-ratio: 895 / 160;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: url("/sidebar/sidebar_button.png") center center / 100% 100% no-repeat;
  color: #f5e6bd;
  text-decoration: none;
  text-transform: uppercase;
  filter: none;
  box-shadow: none;
  transform: translate(var(--news-read-btn-x), var(--news-read-btn-y));
  transition: filter 0.22s ease, transform 0.22s ease, color 0.22s ease;
}
.home-news-card__read-more-label {
  position: relative;
  top: 0;
  max-width: calc(var(--news-read-btn-w) - 32px);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Cormorant SC", serif;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
  text-align: center;
  color: inherit;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.95), 0 0 6px rgba(255, 224, 150, 0.2);
  pointer-events: none;
}
.home-news-card__read-more:hover {
  color: #fff3cf;
  filter: brightness(1.08);
  transform: translate(var(--news-read-btn-x), calc(var(--news-read-btn-y) - 1px));
}
.home-news-card__read-more--cta {
  margin-left: 0;
}
@media (max-width: 1560px) {
  .home-page {
    --home-page-max-width: 100%;
    --hub-nav-max-width: 800px;
    --hub-nav-height: 50px;
    --hub-nav-padding-x: 30px;
    --hub-nav-font-size: 14px;
  }
  .home-page__shell {
    gap: 18px;
  }
  .home-page-nav__item {
    flex-basis: 170px;
    min-width: 140px;
    max-width: 200px;
    padding: 0 12px;
  }
  .home-page-nav__divider {
    width: 20px;
    height: 40px;
    flex-basis: 20px;
  }
  .home-journal-card__body {
    --home-body-width: 97%;
    --home-body-overlap-y: 18px;
    --home-body-min-height: 855px;
    --home-body-padding-top: 25px;
    --home-body-padding-x: 25px;
    --home-body-padding-bottom: 64px;
  }
}
@media (max-width: 1280px) {
  .home-page {
    padding: 0 6px 36px;
    --home-page-max-width: 100%;
    --hub-nav-max-width: 740px;
    --hub-nav-height: 48px;
    --hub-nav-padding-x: 26px;
    --hub-nav-font-size: 13px;
  }
  .home-page .mz-hub-nav {
    margin-bottom: 16px;
  }
  .home-page__shell {
    gap: 16px;
  }
  .home-page-nav__item {
    flex-basis: 160px;
    min-width: 130px;
    max-width: 190px;
    height: 38px;
    padding: 0 10px;
  }
  .home-page-nav__divider {
    width: 18px;
    height: 36px;
    flex-basis: 18px;
  }
  .home-page-nav__active {
    height: 42px;
  }
  .home-journal-card__body {
    --home-body-width: 97%;
    --home-body-overlap-y: 16px;
    --home-body-min-height: 760px;
    --home-body-padding-top: 25px;
    --home-body-padding-x: 25px;
    --home-body-padding-bottom: 54px;
  }
  .home-news-feed {
    max-width: 1040px;
    gap: 12px;
  }
  .home-news-card {
    grid-template-columns: minmax(120px, 36%) minmax(0, 1fr);
    padding: 7px 8px;
  }
  .home-news-card__title {
    font-size: 16px;
  }
  .home-news-card__excerpt {
    font-size: 12px;
  }
  .home-news-card__read-more {
    --news-read-btn-w: 110px;
  }
  .home-news-card__read-more-label {
    font-size: 8px;
  }
}
@media (max-width: 980px) {
  .home-page {
    padding: 0 6px 34px;
    --home-page-max-width: 100%;
    --hub-nav-max-width: 640px;
    --hub-nav-height: 46px;
    --hub-nav-padding-x: 22px;
    --hub-nav-font-size: 12px;
  }
  .home-page .mz-hub-nav {
    margin-bottom: 14px;
  }
  .home-page__shell {
    gap: 14px;
  }
  .home-page-nav__item {
    flex-basis: 145px;
    min-width: 115px;
    max-width: 175px;
    height: 34px;
    padding: 0 8px;
  }
  .home-page-nav__divider {
    width: 14px;
    height: 30px;
    flex-basis: 14px;
  }
  .home-page-nav__active {
    height: 36px;
  }
  .home-journal-card__body {
    --home-body-width: 97%;
    --home-body-overlap-y: 14px;
    --home-body-min-height: 680px;
    --home-body-padding-top: 22px;
    --home-body-padding-x: 20px;
    --home-body-padding-bottom: 44px;
  }
  .home-news-section-title {
    gap: 10px;
  }
  .home-news-section-title__text {
    font-size: 20px;
  }
  .home-news-feed--news {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-news-feed {
    max-width: 860px;
    gap: 13px;
  }
  .home-news-card, .home-news-card--with-image, .home-news-card--wide, .home-news-feed--promotions .home-news-card--with-image {
    grid-template-columns: minmax(165px, 230px) minmax(0, 1fr);
  }
  .home-news-card {
    padding: 9px;
  }
  .home-news-card__title {
    font-size: 19px;
  }
  .home-news-card__excerpt {
    font-size: 13px;
    -webkit-line-clamp: 3;
  }
  .home-news-card__bottom {
    font-size: 11px;
  }
  .home-news-card__info img {
    width: 13px;
    height: 13px;
  }
  .home-news-card__read-more {
    --news-read-btn-w: 120px;
  }
  .home-news-card__read-more-label {
    font-size: 8px;
  }
}
@media (max-width: 640px) {
  .home-page {
    padding: 0 4px 28px;
    --home-page-max-width: 100%;
    --hub-nav-max-width: 100%;
    --hub-nav-width: 100%;
    --hub-nav-height: 42px;
    --hub-nav-padding-x: 14px;
    --hub-nav-gap: 0;
    --hub-nav-font-size: 11px;
  }
  .home-page .mz-hub-nav {
    margin-bottom: 12px;
  }
  .home-page-nav__panel {
    width: 100%;
    max-width: 100%;
  }
  .home-page-nav__item {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
    height: 30px;
    padding: 0 6px;
    font-size: var(--hub-nav-font-size);
  }
  .home-page-nav__label {
    position: relative;
    top: 1px;
    width: auto;
    height: auto;
    clip-path: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .home-page-nav__divider {
    width: 8px;
    height: 22px;
    flex-basis: 8px;
  }
  .home-page-nav__active {
    height: 30px;
  }
  .home-page__shell {
    gap: 12px;
  }
  .home-journal-card__body {
    --home-body-width: 98%;
    --home-body-overlap-y: 10px;
    --home-body-min-height: 540px;
    --home-body-padding-top: 18px;
    --home-body-padding-x: 16px;
    --home-body-padding-bottom: 38px;
  }
  .home-journal-card__media {
    --home-image-inset-x: 2.2%;
    --home-image-inset-top: 4.2%;
    --home-image-inset-bottom: 6.2%;
  }
  .home-news-section-title {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .home-news-section-title__line {
    display: none;
  }
  .home-news-section-title__text {
    font-size: 18px;
  }
  .home-news-card, .home-news-card--with-image, .home-news-card--wide, .home-news-feed--promotions .home-news-card--with-image {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-news-card {
    padding: 10px;
  }
  .home-news-card__media-frame {
    min-height: 120px;
  }
  .home-news-card__content {
    text-align: center;
  }
  .home-news-card__top, .home-news-card__bottom {
    justify-content: center;
  }
  .home-news-card__read-more {
    margin-left: 0;
  }
  .home-news-card__title {
    font-size: 19px;
  }
  .home-news-card__excerpt {
    max-width: 100%;
    font-size: 13px;
  }
}
@media (max-width: 420px) {
  .home-page {
    padding: 0 3px 24px;
    --hub-nav-height: 38px;
    --hub-nav-padding-x: 10px;
    --hub-nav-font-size: 10px;
  }
  .home-page .mz-hub-nav {
    margin-bottom: 10px;
  }
  .home-page-nav__item {
    height: 26px;
    padding: 0 4px;
  }
  .home-page-nav__divider {
    width: 5px;
    height: 18px;
    flex-basis: 5px;
  }
  .home-page-nav__active {
    height: 27px;
  }
  .home-journal-card__body {
    --home-body-width: 100%;
    --home-body-overlap-y: 8px;
    --home-body-min-height: 460px;
    --home-body-padding-top: 16px;
    --home-body-padding-x: 12px;
    --home-body-padding-bottom: 34px;
  }
  .home-journal-card__media {
    --home-image-inset-x: 2%;
    --home-image-inset-top: 4%;
    --home-image-inset-bottom: 6%;
  }
  .home-news-card {
    padding: 9px;
  }
  .home-news-card__badge {
    min-width: 50px;
    font-size: 10px;
  }
  .home-news-card__title {
    font-size: 17px;
  }
  .home-news-card__excerpt {
    font-size: 12px;
  }
  .home-news-card__bottom {
    gap: 6px;
    font-size: 11px;
  }
  .home-news-card__info img {
    width: 12px;
    height: 12px;
  }
  .home-news-card__read-more {
    --news-read-btn-w: 108px;
  }
  .home-news-card__read-more-label {
    font-size: 7px;
  }
}
.home-server-detail {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 5px 8px 18px;
  isolation: isolate;
  overflow: visible;
}
.home-server-detail__gradient {
  position: absolute;
  z-index: 0;
  inset: -78px 0 0;
  pointer-events: none;
  background: radial-gradient( ellipse closest-side at 50% 12%, rgba(25, 36, 40, 0.94), rgba(8, 10, 12, 0.04) ), radial-gradient( circle at 50% 18%, rgba(62, 183, 212, 0.1), transparent 30% ), radial-gradient( circle at 18% 42%, rgba(218, 177, 99, 0.045), transparent 34% ), radial-gradient( circle at 82% 52%, rgba(66, 138, 154, 0.08), transparent 32% );
}
.home-server-detail__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 0.82fr minmax(0, 1.95fr) 0.82fr;
  gap: 10px;
  align-items: stretch;
  height: 640px;
  max-height: 640px;
}
.home-server-center {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(205px, auto) minmax(428px, 1fr);
  gap: 10px;
}
.home-server-right {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(100px, auto) minmax(533px, 1fr);
  gap: 10px;
}
.home-server-panel {
  --server-corner-size: 82px;
  --server-corner-offset-x: -1px;
  --server-corner-offset-y: -1px;
  position: relative;
  width: 100%;
  min-width: 0;
  height: 100%;
  border: 1px solid rgb(52 56 54 / 54%);
  background-color: #1b2125;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.38);
  isolation: isolate;
  overflow: visible;
  transition: border-color 0.32s ease, box-shadow 0.32s ease, filter 0.32s ease;
}
.home-server-panel::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: linear-gradient( 180deg, #1b2125 0%, #1d2327 24%, #22292e 52%, #2c343a 78%, #30383e 100% );
}
.home-server-panel::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 7px;
  pointer-events: none;
  background: linear-gradient( 90deg, transparent, rgba(196, 185, 152, 0.16), transparent ) center top / calc(100% - 72px) 1px no-repeat, linear-gradient( 90deg, transparent, rgba(147, 115, 65, 0.16), transparent ) center bottom / calc(100% - 72px) 1px no-repeat, linear-gradient( 180deg, transparent, rgba(147, 115, 65, 0.1), transparent ) left center / 1px calc(100% - 72px) no-repeat, linear-gradient( 180deg, transparent, rgba(147, 115, 65, 0.1), transparent ) right center / 1px calc(100% - 72px) no-repeat;
}
.home-server-panel__surface {
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.home-server-panel__inner {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.home-server-panel__corner {
  position: absolute;
  z-index: 20;
  width: var(--server-corner-size);
  height: var(--server-corner-size);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.58));
}
.home-server-panel--tall .home-server-panel__corner {
  background-image: url("/header/angel4.png");
}
.home-server-panel__corner--tl {
  top: var(--server-corner-offset-y);
  left: var(--server-corner-offset-x);
}
.home-server-panel__corner--tr {
  top: var(--server-corner-offset-y);
  right: var(--server-corner-offset-x);
  transform: scaleX(-1);
}
.home-server-panel__corner--bl {
  bottom: var(--server-corner-offset-y);
  left: var(--server-corner-offset-x);
  transform: scaleY(-1);
}
.home-server-panel__corner--br {
  right: var(--server-corner-offset-x);
  bottom: var(--server-corner-offset-y);
  transform: scale(-1, -1);
}
.home-server-panel__hoverbar {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px);
  border-top: 1px solid rgba(49, 39, 30, 0);
  background: linear-gradient(180deg, rgb(29 35 38), rgb(22 29 32));
  box-shadow: 0 -8px 18px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(196, 185, 152, 0.06);
  pointer-events: none;
  transition: opacity 0.34s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), border-top-color 0.34s ease;
}
.home-server-panel__hoverlink {
  width: 100%;
  height: 58px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #937341;
  text-decoration: none;
  text-transform: uppercase;
  font-family: "Cormorant SC", serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-align: center;
  transition: color 0.22s ease, text-shadow 0.22s ease;
}
.home-server-panel__hoverarrow {
  position: relative;
  top: -1px;
  color: #d5c089;
  font-size: 20px;
  line-height: 1;
}
.home-server-panel--interactive:hover .home-server-panel__hoverbar {
  opacity: 1;
  transform: translateY(0);
  border-top-color: rgb(195 167 129);
  pointer-events: auto;
}
.home-server-panel--interactive:hover .home-server-panel__hoverlink {
  color: #c4b998;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 1), 0 0 8px rgba(255, 224, 150, 0.16);
}
.home-server-panel--world {
  min-height: 640px;
}
.home-server-world {
  --world-shield-size: 135px;
  --world-shield-y: 8px;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.home-server-world__art {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 12px 4px;
  overflow: visible;
}
.home-server-world__shield-host {
  position: relative !important;
  width: var(--world-shield-size) !important;
  min-width: var(--world-shield-size) !important;
  max-width: var(--world-shield-size) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  flex: 0 0 auto !important;
  opacity: 0.5;
  transform: translateY(var(--world-shield-y)) !important;
  filter: none !important;
  box-shadow: none !important;
}
.home-server-world__shield.mz-magic-shield {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}
.home-server-world__shield .mz-magic-shield__base {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  filter: none !important;
  box-shadow: none !important;
}
.home-server-world__shield .mz-magic-shield__veins-canvas {
  width: 100% !important;
  height: 100% !important;
  opacity: 0.96;
  filter: none !important;
  box-shadow: none !important;
}
.home-server-world__shield .mz-magic-shield__veins-soft {
  opacity: 0.38;
}
.home-server-world__shield .mz-magic-shield__inner-aura {
  opacity: 0.28;
}
.home-server-world__shield .mz-magic-shield__crystal-glow {
  opacity: 0.52;
}
.home-server-world__bottom {
  padding: 4px 16px 76px;
  transform: translateY(-18px);
  text-align: center;
}
.home-server-world__bottom h3 {
  margin: 0 0 10px;
  color: rgba(191, 167, 122, 0.72);
  font-family: "Cormorant SC", serif;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 1), 0 0 10px rgba(226, 190, 115, 0.14);
}
.home-server-world__bottom p {
  max-width: 190px;
  margin: 0 auto 10px;
  color: #ffe8ba;
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.92);
}
.home-server-world__bottom strong {
  color: #ffdda0;
  font-weight: 900;
}
.home-server-panel--intro {
  min-height: 205px;
}
.home-server-intro {
  position: relative;
  height: 100%;
  min-height: 0;
  padding: 20px 28px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.home-server-intro__errtel-host {
  position: relative;
  width: min(46%, 190px);
  max-width: 190px;
  display: block;
  margin: 0 auto 6px;
  opacity: 0.56;
  filter: none !important;
  box-shadow: none !important;
}
.home-server-intro__errtel.mz-magic-scroll {
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  margin: 0 !important;
  top: auto !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
}
.home-server-intro__errtel .mz-magic-scroll__base {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
  filter: none !important;
  box-shadow: none !important;
}
.home-server-intro__errtel .mz-magic-scroll__canvas {
  width: 100% !important;
  height: 100% !important;
  opacity: 0.96;
  filter: none !important;
  box-shadow: none !important;
}
.home-server-intro h2 {
  margin: 2px 0 8px;
  color: rgba(191, 167, 122, 0.72);
  font-family: "Cormorant SC", serif;
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 1), 0 0 14px rgba(226, 190, 115, 0.18);
}
.home-server-intro p {
  max-width: 620px;
  margin: 0 auto 7px;
  color: #ffe8ba;
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.92);
}
.home-server-intro__bottom-divider {
  width: min(75%, 180px);
  height: auto;
  max-height: 24px;
  margin: 8px auto 0;
  display: block;
  object-fit: contain;
  pointer-events: none;
}
.home-server-panel--story {
  min-height: 428px;
}
.home-server-story {
  height: 100%;
  min-height: 0;
  padding: 22px 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.home-server-story p {
  max-width: 680px;
  margin: 0 0 10px;
  color: #ffe8ba;
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.92);
}
.home-server-story__button.menu-btn-long {
  width: 220px;
  height: 44px;
  min-width: 0;
  max-width: min(220px, 100%);
  margin: 12px auto 0;
  padding: 0;
  display: inline-block;
  aspect-ratio: auto;
  color: #f3dfb6;
  text-decoration: none;
  text-transform: uppercase;
  filter: none;
  box-shadow: none;
  transform: none;
}
.home-server-story__button.menu-btn-long .menu-btn-long__label {
  padding: 0 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16px;
  color: #f3dfb6;
}
.home-server-story__button.menu-btn-long:hover {
  color: #fff1ca;
  filter: none;
  transform: none;
}
.home-server-story__button.menu-btn-long:hover .menu-btn-long__label {
  color: #fff1ca;
}
.home-server-panel--type {
  min-height: 100px;
}
.home-server-type {
  height: 100%;
  min-height: 0;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.home-server-type img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.66)) drop-shadow(0 0 8px rgba(255, 224, 150, 0.09));
}
.home-server-type__text {
  min-width: 0;
  text-align: left;
}
.home-server-type__text span {
  display: block;
  margin-bottom: 5px;
  color: rgba(191, 167, 122, 0.72);
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85), 0 0 7px rgba(217, 172, 108, 0.08);
  transition: color 0.22s ease, text-shadow 0.22s ease;
}
.home-server-type__text strong {
  display: block;
  margin-bottom: 4px;
  color: #efe2bc;
  font-family: "Cormorant SC", serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.03em;
}
.home-server-type__text em {
  display: block;
  color: #e8d4a5;
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.home-server-panel--info {
  min-height: 533px;
}
.home-server-info-card {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.home-server-info-card__art {
  flex: 1 1 auto;
  min-height: 0;
  padding: 8px 8px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.home-server-info-card__staff-host {
  width: min(30%, 78px);
  max-width: 78px;
  display: block;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
}
.home-server-info-card__staff.mz-magic-staff {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
}
.home-server-info-card__staff .mz-magic-staff__base {
  opacity: 0.68 !important;
  filter: brightness(0.9) !important;
  box-shadow: none !important;
}
.home-server-info-card__staff .mz-magic-staff__handle-canvas {
  opacity: 0.74 !important;
  filter: none !important;
  box-shadow: none !important;
}
.home-server-info-card__staff .mz-magic-staff__core-canvas {
  opacity: 0.72 !important;
  filter: none !important;
  box-shadow: none !important;
}
.home-server-info-card__staff .mz-magic-staff__spark {
  filter: none !important;
  box-shadow: none !important;
}
.home-server-info-card__staff .mz-magic-staff__core-ray {
  filter: blur(1.35px) !important;
}
.home-server-info-card__staff .mz-magic-staff__beam {
  filter: blur(3px) !important;
}
.home-server-info-card__staff .mz-magic-staff__crystal-glow {
  filter: blur(2px) !important;
}
.home-server-info-card__bottom {
  padding: 4px 16px 76px;
  text-align: center;
}
.home-server-info-card__bottom strong {
  display: block;
  color: rgba(191, 167, 122, 0.72);
  font-family: "Cormorant SC", serif;
  font-size: 21px;
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 1), 0 0 12px rgba(226, 190, 115, 0.15);
}
.home-server-info-card__bottom p {
  max-width: 190px;
  margin: 9px auto 0;
  color: #ffe8ba;
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.92);
}
.home-server-mini-divider {
  width: min(70%, 160px);
  margin: 10px auto 0;
  display: block;
  opacity: 0.82;
}
.mz-magic-shield {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  isolation: isolate;
  transform: translateZ(0);
  filter: none !important;
  box-shadow: none !important;
}
.mz-magic-shield__base {
  position: relative;
  z-index: 5;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  filter: none !important;
  box-shadow: none !important;
}
.mz-magic-shield__inner-aura {
  position: absolute;
  z-index: 6;
  inset: 18% 12% 10%;
  pointer-events: none;
  background: radial-gradient( circle at 50% 72%, rgba(58, 205, 245, 0.15), transparent 30% ), radial-gradient( circle at 50% 42%, rgba(72, 170, 220, 0.07), transparent 46% ), linear-gradient( 180deg, transparent 0%, rgba(40, 150, 205, 0.05) 64%, rgba(90, 225, 240, 0.1) 100% );
  clip-path: polygon( 50% 0%, 91% 10%, 100% 34%, 94% 68%, 50% 100%, 6% 68%, 0% 34%, 9% 10% );
  mix-blend-mode: screen;
  filter: blur(15px);
  opacity: 0.42;
  animation: mzMagicShieldAura 9s ease-in-out infinite;
}
.mz-magic-shield__veins-soft {
  position: absolute;
  z-index: 8;
  inset: 0;
  pointer-events: none;
  background: linear-gradient( 180deg, rgba(20, 90, 120, 0.3), rgba(38, 145, 170, 0.34) 48%, rgba(24, 92, 130, 0.26) );
  opacity: 0.42;
  mix-blend-mode: screen;
  -webkit-mask-image: var(--mz-shield-mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-image: var(--mz-shield-mask);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
  filter: brightness(0.88) saturate(1.22);
  animation: mzMagicShieldVeinSoftBreath 6.2s ease-in-out infinite;
}
.mz-magic-shield__veins-canvas {
  position: absolute;
  z-index: 9;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.92;
  mix-blend-mode: screen;
  filter: none !important;
  box-shadow: none !important;
}
.mz-magic-shield__crystal-glow {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: 7.2%;
  width: 11.4%;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  pointer-events: none;
  clip-path: polygon( 50% 0%, 100% 50%, 50% 100%, 0% 50% );
  background: radial-gradient( circle, rgba(230, 255, 255, 0.86) 0%, rgba(85, 220, 245, 0.48) 30%, rgba(20, 145, 210, 0.2) 56%, transparent 78% );
  mix-blend-mode: screen;
  filter: blur(4px);
  opacity: 0.54;
  animation: mzMagicShieldCrystalBreath 4.8s ease-in-out infinite;
}
.mz-magic-shield__crystal-core {
  position: absolute;
  z-index: 21;
  left: 50%;
  top: 7.2%;
  width: 10.5%;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  pointer-events: none;
  clip-path: polygon( 50% 0%, 100% 50%, 50% 100%, 0% 50% );
  background: linear-gradient( 135deg, transparent 0%, rgba(180, 250, 255, 0.22) 36%, rgba(55, 205, 235, 0.11) 52%, transparent 100% );
  mix-blend-mode: screen;
  opacity: 0.5;
  animation: mzMagicShieldCrystalCoreShift 6.2s ease-in-out infinite;
}
.mz-magic-shield__crystal-shine {
  position: absolute;
  z-index: 22;
  left: 50%;
  top: 7.2%;
  width: 10.5%;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  pointer-events: none;
  clip-path: polygon( 50% 0%, 100% 50%, 50% 100%, 0% 50% );
  overflow: hidden;
}
.mz-magic-shield__crystal-shine::before {
  content: "";
  position: absolute;
  left: -58%;
  top: -32%;
  width: 38%;
  height: 165%;
  background: linear-gradient( 90deg, transparent, rgba(235, 255, 255, 0.78), rgba(120, 240, 250, 0.4), transparent );
  transform: rotate(24deg);
  opacity: 0;
  animation: mzMagicShieldCrystalShine 7.6s ease-in-out infinite;
}
.mz-magic-scroll {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  isolation: isolate;
  transform: translateZ(0);
  filter: none !important;
  box-shadow: none !important;
}
.mz-magic-scroll__base {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  filter: none !important;
  box-shadow: none !important;
}
.mz-magic-scroll__canvas {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: none !important;
  box-shadow: none !important;
}
.mz-magic-staff {
  --staff-spark-gem-1-left: 50%;
  --staff-spark-gem-1-top: 31.85%;
  --staff-spark-gem-1-size: 52px;
  --staff-spark-gem-1-rotate: 10deg;
  --staff-spark-gem-2-left: 50%;
  --staff-spark-gem-2-top: 42.55%;
  --staff-spark-gem-2-size: 38px;
  --staff-spark-gem-2-rotate: -16deg;
  --staff-spark-handle-left: 50%;
  --staff-spark-handle-top: 46.95%;
  --staff-spark-handle-size: 28px;
  --staff-spark-handle-rotate: 8deg;
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  isolation: isolate;
  transform: translateZ(0);
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
}
.mz-magic-staff__base {
  position: relative;
  z-index: 5;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
}
.mz-magic-staff__handle-canvas, .mz-magic-staff__core-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: none !important;
  box-shadow: none !important;
}
.mz-magic-staff__handle-canvas {
  z-index: 8;
  opacity: 0.86;
}
.mz-magic-staff__core-canvas {
  z-index: 18;
  opacity: 0.78;
}
.mz-magic-staff__beam {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 21.5%;
  width: 7%;
  height: 58%;
  transform: translateX(-50%);
  pointer-events: none;
  border-radius: 999px;
  background: linear-gradient( 180deg, transparent 0%, rgba(45, 175, 220, 0.035) 16%, rgba(95, 220, 235, 0.11) 50%, rgba(35, 145, 210, 0.045) 82%, transparent 100% );
  mix-blend-mode: screen;
  filter: blur(3px);
  opacity: 0.22;
  box-shadow: none !important;
  animation: mzStaffBeamBreath 5.6s ease-in-out infinite;
}
.mz-magic-staff__core-ray {
  position: absolute;
  z-index: 14;
  left: 50%;
  top: 21.2%;
  width: 7.5%;
  height: 28%;
  transform: translateX(-50%);
  pointer-events: none;
  border-radius: 999px;
  background: linear-gradient( 180deg, transparent 0%, rgba(90, 220, 235, 0) 18%, rgba(135, 238, 238, 0.38) 47%, rgba(55, 185, 225, 0.18) 58%, transparent 100% );
  background-size: 100% 270%;
  background-position: 50% -135%;
  mix-blend-mode: screen;
  filter: blur(1.4px);
  opacity: 0;
  box-shadow: none !important;
  animation: mzStaffCoreEmitDown 6.2s ease-in-out infinite;
}
.mz-magic-staff__crystal-glow {
  position: absolute;
  z-index: 12;
  left: 50%;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  pointer-events: none;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background: radial-gradient( circle, rgba(160, 245, 245, 0.42) 0%, rgba(70, 205, 230, 0.24) 30%, rgba(20, 125, 195, 0.11) 58%, transparent 78% );
  mix-blend-mode: screen;
  filter: blur(2px);
  opacity: 0.13;
  box-shadow: none !important;
  animation: mzStaffCrystalBreath 6s ease-in-out infinite;
}
.mz-magic-staff__crystal-glow--top {
  top: 4.6%;
  width: 10%;
  opacity: 0.13;
}
.mz-magic-staff__crystal-glow--middle {
  top: 46.1%;
  width: 8.2%;
  opacity: 0.14;
  animation-delay: -1.2s;
}
.mz-magic-staff__crystal-glow--bottom-big {
  top: 86.4%;
  width: 15.5%;
  opacity: 0.2;
  animation-delay: -2.4s;
}
.mz-magic-staff__crystal-glow--tip {
  top: 97.1%;
  width: 7%;
  opacity: 0.16;
  animation-delay: -3.2s;
}
.mz-magic-staff__spark {
  position: absolute;
  z-index: 30;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%) rotate(0deg) scale(0.2);
  transform-origin: center center;
  pointer-events: none;
  opacity: 0;
  background: var(--mz-staff-spark-soft) center / 100% 100% no-repeat, var(--mz-staff-spark-burst) center / 100% 100% no-repeat;
  mix-blend-mode: screen;
  filter: none !important;
  box-shadow: none !important;
}
.mz-magic-staff__spark--gem-1 {
  left: var(--staff-spark-gem-1-left, 50%);
  top: var(--staff-spark-gem-1-top, 31.85%);
  width: var(--staff-spark-gem-1-size, 52px);
  height: var(--staff-spark-gem-1-size, 52px);
  animation: mzStaffSparkGem1 6.2s ease-in-out infinite;
}
.mz-magic-staff__spark--gem-2 {
  left: var(--staff-spark-gem-2-left, 50%);
  top: var(--staff-spark-gem-2-top, 42.55%);
  width: var(--staff-spark-gem-2-size, 38px);
  height: var(--staff-spark-gem-2-size, 38px);
  animation: mzStaffSparkGem2 6.2s ease-in-out infinite;
}
.mz-magic-staff__spark--handle {
  left: var(--staff-spark-handle-left, 50%);
  top: var(--staff-spark-handle-top, 46.95%);
  width: var(--staff-spark-handle-size, 28px);
  height: var(--staff-spark-handle-size, 28px);
  animation: mzStaffSparkHandle 6.2s ease-in-out infinite;
}
.mz-magic-staff__handle-ignition {
  position: absolute;
  z-index: 16;
  left: 50%;
  top: 47%;
  width: 10%;
  height: 10%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient( circle, rgba(135, 238, 238, 0.28) 0%, rgba(55, 185, 225, 0.14) 38%, transparent 78% );
  mix-blend-mode: screen;
  filter: blur(3px);
  opacity: 0;
  box-shadow: none !important;
  animation: mzStaffHandleIgnition 6.2s ease-in-out infinite;
}
@keyframes mzMagicShieldAura {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.99);
  }
  50% {
    opacity: 0.46;
    transform: scale(1.03);
  }
}
@keyframes mzMagicShieldVeinSoftBreath {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.5;
  }
}
@keyframes mzMagicShieldCrystalBreath {
  0%, 100% {
    opacity: 0.46;
    transform: translateX(-50%) scale(0.96);
  }
  50% {
    opacity: 0.78;
    transform: translateX(-50%) scale(1.07);
  }
}
@keyframes mzMagicShieldCrystalCoreShift {
  0%, 100% {
    opacity: 0.34;
    filter: brightness(1);
  }
  46% {
    opacity: 0.66;
    filter: brightness(1.14);
  }
  70% {
    opacity: 0.46;
  }
}
@keyframes mzMagicShieldCrystalShine {
  0%, 72%, 100% {
    opacity: 0;
    transform: translateX(0);
  }
  78% {
    opacity: 0.8;
  }
  88% {
    opacity: 0;
    transform: translateX(315%);
  }
}
@keyframes mzStaffBeamBreath {
  0%, 100% {
    opacity: 0.14;
    transform: translateX(-50%) scaleY(0.96);
  }
  50% {
    opacity: 0.26;
    transform: translateX(-50%) scaleY(1.04);
  }
}
@keyframes mzStaffCrystalBreath {
  0%, 100% {
    opacity: 0.1;
    transform: translateX(-50%) scale(0.96);
  }
  50% {
    opacity: 0.23;
    transform: translateX(-50%) scale(1.05);
  }
}
@keyframes mzStaffCoreEmitDown {
  0%, 50%, 100% {
    opacity: 0;
    background-position: 50% -135%;
  }
  58% {
    opacity: 0.32;
  }
  80% {
    opacity: 0.13;
    background-position: 50% 145%;
  }
  92% {
    opacity: 0;
    background-position: 50% 180%;
  }
}
@keyframes mzStaffSparkGem1 {
  0%, 61%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--staff-spark-gem-1-rotate, 10deg)) scale(0.2);
  }
  64% {
    opacity: 0.68;
    transform: translate(-50%, -50%) rotate(var(--staff-spark-gem-1-rotate, 10deg)) scale(0.92);
  }
  69% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--staff-spark-gem-1-rotate, 10deg)) scale(1.08);
  }
}
@keyframes mzStaffSparkGem2 {
  0%, 68%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--staff-spark-gem-2-rotate, -16deg)) scale(0.2);
  }
  71% {
    opacity: 0.62;
    transform: translate(-50%, -50%) rotate(var(--staff-spark-gem-2-rotate, -16deg)) scale(0.9);
  }
  76% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--staff-spark-gem-2-rotate, -16deg)) scale(1.05);
  }
}
@keyframes mzStaffSparkHandle {
  0%, 75%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--staff-spark-handle-rotate, 8deg)) scale(0.2);
  }
  78% {
    opacity: 0.58;
    transform: translate(-50%, -50%) rotate(var(--staff-spark-handle-rotate, 8deg)) scale(0.88);
  }
  83% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--staff-spark-handle-rotate, 8deg)) scale(1.02);
  }
}
@keyframes mzStaffHandleIgnition {
  0%, 74%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.75);
  }
  79% {
    opacity: 0.36;
    transform: translate(-50%, -50%) scale(0.96);
  }
  84% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.1);
  }
}
@media (min-width: 768px) {
  .home-server-panel--hover-left:hover, .home-server-panel--hover-right:hover {
    z-index: 9;
    border-color: rgba(196, 185, 152, 0.34);
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.45), 0 0 18px rgba(78, 185, 210, 0.1);
    filter: brightness(1.035);
  }
}
@media (max-width: 1180px) {
  .home-server-detail__grid {
    height: auto;
    max-height: none;
    grid-template-columns: 0.9fr minmax(0, 1.8fr);
  }
  .home-server-right {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(95px, auto);
  }
  .home-server-panel--world {
    min-height: 600px;
  }
  .home-server-panel--story {
    min-height: 390px;
  }
  .home-server-panel--info {
    min-height: 300px;
  }
  .home-server-info-card__staff-host {
    width: min(18%, 72px);
    max-width: 72px;
  }
}
@media (max-width: 820px) {
  .home-server-detail {
    padding: 10px 4px 12px;
  }
  .home-server-detail__grid, .home-server-center, .home-server-right {
    height: auto;
    max-height: none;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 7px;
  }
  .home-server-panel, .home-server-panel--world, .home-server-panel--intro, .home-server-panel--story, .home-server-panel--type, .home-server-panel--info {
    height: auto;
    min-height: 0;
  }
  .home-server-panel--tall {
    --server-corner-size: 58px;
    --server-corner-offset-x: -6px;
    --server-corner-offset-y: -7px;
  }
  .home-server-panel__surface, .home-server-panel__inner {
    min-height: 0;
  }
  .home-server-panel__hoverbar {
    height: 48px;
    opacity: 1;
    transform: translateY(0);
    border-top-color: rgba(49, 39, 30, 1);
    pointer-events: auto;
  }
  .home-server-panel__hoverlink {
    height: 48px;
    padding: 0 14px;
    font-size: 13px;
    letter-spacing: 0.12em;
  }
  .home-server-world {
    --world-shield-size: 112px;
    --world-shield-y: -4px;
  }
  .home-server-world__art {
    flex: 0 0 auto;
    min-height: 124px;
    max-height: 124px;
    padding: 8px 12px 0;
    align-items: center;
  }
  .home-server-world__bottom {
    padding: 0 16px 58px;
    transform: none;
    text-align: center;
  }
  .home-server-world__bottom h3 {
    margin-bottom: 8px;
    font-size: 22px;
    line-height: 1.04;
  }
  .home-server-world__bottom p {
    max-width: 230px;
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 1.32;
  }
  .home-server-intro {
    min-height: 0;
    padding: 14px 18px 16px;
  }
  .home-server-intro__errtel-host {
    width: min(56vw, 190px);
    max-width: 190px;
    margin-bottom: 7px;
  }
  .home-server-intro h2 {
    margin: 0 0 8px;
    font-size: 25px;
    line-height: 1.02;
  }
  .home-server-intro p {
    max-width: 520px;
    margin-bottom: 7px;
    font-size: 15px;
    line-height: 1.32;
  }
  .home-server-intro__bottom-divider {
    width: min(58%, 145px);
    max-height: 22px;
    margin-top: 7px;
  }
  .home-server-story {
    min-height: 0;
    padding: 16px 18px 18px;
  }
  .home-server-story p {
    max-width: 560px;
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 1.32;
  }
  .home-server-story__button.menu-btn-long {
    width: 210px;
    height: 42px;
    max-width: 86%;
    margin-top: 9px;
  }
  .home-server-story__button.menu-btn-long .menu-btn-long__label {
    padding: 0 16px;
    font-size: 10px;
  }
  .home-server-type {
    min-height: 0;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    padding: 11px 16px;
  }
  .home-server-type img {
    width: 40px;
    height: 40px;
  }
  .home-server-type__text {
    text-align: left;
  }
  .home-server-type__text span {
    font-size: 12px;
  }
  .home-server-type__text strong {
    font-size: 21px;
  }
  .home-server-type__text em {
    font-size: 13px;
  }
  .home-server-info-card__art {
    flex: 0 0 auto;
    height: clamp(190px, 32vw, 240px);
    min-height: 0;
    max-height: none;
    padding: 8px 8px 0;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }
  .home-server-info-card__staff-host {
    width: clamp(46px, 10vw, 64px);
    max-width: 64px;
  }
  .home-server-info-card__bottom {
    padding: 2px 16px 58px;
  }
  .home-server-info-card__bottom strong {
    font-size: 22px;
    line-height: 1.08;
  }
  .home-server-info-card__bottom p {
    max-width: 230px;
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.32;
  }
  .home-server-mini-divider {
    width: min(58%, 135px);
    margin-top: 9px;
  }
}
@media (max-width: 520px) {
  .home-server-detail {
    padding: 8px 2px 10px;
  }
  .home-server-detail__grid, .home-server-center, .home-server-right {
    gap: 15px;
  }
  .home-server-panel--tall {
    --server-corner-size: 52px;
    --server-corner-offset-x: -5px;
    --server-corner-offset-y: -6px;
  }
  .home-server-panel::after {
    inset: 6px;
    background: linear-gradient( 90deg, transparent, rgba(196, 185, 152, 0.13), transparent ) center top / calc(100% - 54px) 1px no-repeat, linear-gradient( 90deg, transparent, rgba(147, 115, 65, 0.13), transparent ) center bottom / calc(100% - 54px) 1px no-repeat, linear-gradient( 180deg, transparent, rgba(147, 115, 65, 0.08), transparent ) left center / 1px calc(100% - 54px) no-repeat, linear-gradient( 180deg, transparent, rgba(147, 115, 65, 0.08), transparent ) right center / 1px calc(100% - 54px) no-repeat;
  }
  .home-server-world {
    --world-shield-size: 80px;
    --world-shield-y: -2px;
  }
  .home-server-world__art {
    min-height: 110px;
    max-height: 110px;
    padding-top: 7px;
  }
  .home-server-world__bottom {
    padding: 0 14px 56px;
  }
  .home-server-world__bottom h3 {
    font-size: 21px;
  }
  .home-server-world__bottom p {
    max-width: 220px;
    font-size: 14px;
    line-height: 1.3;
  }
  .home-server-intro {
    padding: 13px 16px 15px;
  }
  .home-server-intro__errtel-host {
    width: min(62vw, 170px);
    max-width: 170px;
    margin-bottom: 6px;
  }
  .home-server-intro h2 {
    font-size: 24px;
  }
  .home-server-intro p {
    font-size: 14px;
    line-height: 1.3;
  }
  .home-server-story {
    padding: 15px 15px 17px;
  }
  .home-server-story p {
    font-size: 14px;
    line-height: 1.3;
  }
  .home-server-story__button.menu-btn-long {
    width: 200px;
    height: 40px;
    max-width: 88%;
  }
  .home-server-story__button.menu-btn-long .menu-btn-long__label {
    padding: 0 15px;
    font-size: 9px;
  }
  .home-server-type {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    padding: 11px 14px;
  }
  .home-server-type__text {
    text-align: center;
  }
  .home-server-info-card__art {
    height: clamp(170px, 45vw, 210px);
    min-height: 0;
    max-height: none;
    padding: 7px 8px 0;
    overflow: visible;
  }
  .home-server-info-card__staff-host {
    width: clamp(40px, 12vw, 54px);
    max-width: 54px;
  }
  .home-server-info-card__bottom {
    padding: 2px 14px 56px;
  }
  .home-server-info-card__bottom strong {
    font-size: 21px;
  }
  .home-server-info-card__bottom p {
    max-width: 220px;
    font-size: 14px;
    line-height: 1.3;
  }
}
.news-detail-page {
  width: 100%;
  min-width: 0;
  padding: 0 8px 46px;
  overflow: visible;
}
.news-detail-shell {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  overflow: visible;
}
.news-detail-frame {
  position: relative;
  width: 97%;
  min-width: 0;
  min-height: 760px;
  margin: 0 auto;
  padding: 68px 74px 76px;
  box-sizing: border-box;
  background-image: url("/ui/content_frame.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
  color: #d7ccaf;
  overflow: visible;
}
.news-detail-frame--empty {
  min-height: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.news-detail-frame > * {
  position: relative;
  z-index: 2;
}
.news-detail-header {
  max-width: 850px;
  margin: 0 auto 28px;
  text-align: center;
}
.news-detail-meta {
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  color: rgba(206, 199, 178, 0.8);
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.news-detail-badge {
  min-width: 62px;
  min-height: 24px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(217, 172, 108, 0.3);
  background: linear-gradient( 180deg, rgba(45, 48, 45, 0.88) 0%, rgba(18, 20, 20, 0.94) 100% );
  box-shadow: inset 0 0 8px rgba(217, 172, 108, 0.15), inset 0 1px 0 rgba(255, 232, 186, 0.055), 0 2px 4px rgba(0, 0, 0, 0.5);
  color: #f1ddb1;
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.news-detail-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.news-detail-info img {
  width: 15px;
  height: 15px;
  object-fit: contain;
  opacity: 0.9;
}
.news-detail-title {
  margin: 0 0 16px;
  color: #d4b06a;
  font-family: "Cormorant SC", serif;
  font-size: clamp(30px, 3.4vw, 50px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 1), 0 0 16px rgba(226, 190, 115, 0.2);
}
.news-detail-short {
  max-width: 760px;
  margin: 0 auto;
  color: #d7ccaf;
  font-family: "Cormorant SC", serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.news-detail-media {
  max-width: 860px;
  margin: 0 auto 30px;
}
.news-detail-media__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 6;
  padding: 5px;
  border: 1px solid rgba(206, 150, 78, 0.42);
  background: linear-gradient( 180deg, rgba(255, 225, 156, 0.08), transparent 24%, transparent 76%, rgba(90, 55, 30, 0.1) ), linear-gradient(180deg, #30251a 0%, #151d1e 30%, #0c1111 100%);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 236, 185, 0.055), inset 0 0 9px rgba(0, 0, 0, 0.48);
  overflow: hidden;
}
.news-detail-media__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  pointer-events: none;
}
.news-detail-content {
  max-width: 830px;
  margin: 0 auto;
  color: #d7ccaf;
  font-family: "Cormorant SC", serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.62;
  letter-spacing: 0.025em;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.news-detail-content p {
  margin: 0;
}
.news-detail-content p + p {
  margin-top: 16px;
}
.news-detail-section-title {
  width: 100%;
  max-width: 720px;
  margin: 34px auto 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  overflow: visible;
}
.news-detail-section-title span:not(.news-detail-section-title__line) {
  color: #d4b06a;
  font-family: "Cormorant SC", serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}
.news-detail-section-title__line {
  height: 16px;
  background: url("/news/text_divider_right.png") center center / 100% 100% no-repeat;
  pointer-events: none;
}
.news-detail-section-title__line--left {
  transform: scaleX(-1);
}
.news-detail-details__text {
  max-width: 780px;
  margin: 0 auto;
  color: #cfc3a4;
  font-family: "Cormorant SC", serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.58;
  letter-spacing: 0.02em;
  text-align: center;
}
.news-detail-details__text p {
  margin: 0;
}
.news-detail-details__text p + p {
  margin-top: 12px;
}
.news-detail-gallery__grid {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.news-detail-gallery figure {
  margin: 0;
  min-width: 0;
  padding: 5px;
  border: 1px solid rgba(206, 150, 78, 0.34);
  background: linear-gradient(180deg, #1b2125, #30383e);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.38);
}
.news-detail-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}
.news-detail-gallery figcaption {
  padding: 8px 6px 4px;
  color: rgba(215, 204, 175, 0.82);
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}
.news-detail-actions {
  max-width: 720px;
  margin: 34px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}
.news-detail-back, .news-detail-cta {
  min-width: 210px;
  padding: 11px 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(147, 115, 65, 0.9);
  background: linear-gradient( 180deg, #2c3840 0%, #1c2428 58%, #181f22 100% );
  color: #d7bc7b;
  text-decoration: none;
  text-transform: uppercase;
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.1em;
  box-shadow: inset 0 0 0 1px rgba(196, 185, 152, 0.05), inset 0 0 12px rgba(0, 0, 0, 0.45);
  transition: color 0.22s ease, border-color 0.22s ease, filter 0.22s ease;
}
.news-detail-back:hover, .news-detail-cta:hover {
  color: #f2dfb0;
  border-color: rgba(196, 185, 152, 0.7);
  filter: brightness(1.08);
}
@media (max-width: 980px) {
  .news-detail-frame {
    width: 98%;
    padding: 54px 44px 62px;
  }
  .news-detail-title {
    font-size: clamp(26px, 4vw, 40px);
  }
  .news-detail-short, .news-detail-content {
    font-size: 16px;
  }
  .news-detail-gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .news-detail-page {
    padding: 0 4px 34px;
  }
  .news-detail-frame {
    width: 100%;
    min-height: 0;
    padding: 38px 20px 46px;
  }
  .news-detail-meta {
    font-size: 12px;
  }
  .news-detail-title {
    font-size: 25px;
    letter-spacing: 0.055em;
  }
  .news-detail-short, .news-detail-content, .news-detail-details__text {
    font-size: 14px;
    line-height: 1.52;
  }
  .news-detail-media__frame {
    aspect-ratio: 16 / 8;
  }
  .news-detail-section-title {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .news-detail-section-title__line {
    display: none;
  }
  .news-detail-gallery__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .news-detail-back, .news-detail-cta {
    width: 100%;
    min-width: 0;
    font-size: 13px;
  }
}
.updates-archive-page {
  width: 100%;
  min-width: 0;
  padding: 0 8px 46px;
  overflow: visible;
}
.updates-archive-shell {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  overflow: visible;
}
.updates-archive-frame {
  position: relative;
  width: 97%;
  min-width: 0;
  min-height: 855px;
  margin: 0 auto;
  padding: 46px 46px 64px;
  box-sizing: border-box;
  background-image: url("/ui/content_frame.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
  color: #d7ccaf;
  overflow: visible;
}
.updates-archive-frame > * {
  position: relative;
  z-index: 2;
}
.updates-archive-header {
  max-width: 820px;
  margin: 0 auto 24px;
  text-align: center;
}
.updates-archive-seal {
  position: relative;
  width: fit-content;
  min-width: 126px;
  margin: 0 auto 14px;
  padding: 5px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  border: 1px solid rgba(217, 172, 108, 0.32);
  background: linear-gradient( 180deg, rgba(25, 34, 39, 0.92) 0%, rgba(30, 41, 46, 0.94) 100% );
  box-shadow: inset 0 0 8px rgba(217, 172, 108, 0.15), inset 0 1px 0 rgba(255, 232, 186, 0.055), 0 2px 4px rgba(0, 0, 0, 0.5);
  color: #f1ddb1;
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.95), 0 0 6px rgba(255, 221, 150, 0.18);
}
.updates-archive-seal::before, .updates-archive-seal::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #ffdda0;
  box-shadow: 0 0 3px #ffdda0;
  transform: translateY(-50%);
}
.updates-archive-seal::before {
  left: -4px;
}
.updates-archive-seal::after {
  right: -4px;
}
.update-title-divider {
  width: min(280px, 82%);
  height: 14px;
  margin: 7px auto 9px;
  background: url("/ui/divider_horinozntal_gray.png") center / contain no-repeat;
  opacity: 0.72;
  pointer-events: none;
  filter: drop-shadow(0 0 7px rgba(0, 0, 0, 0.45));
}
.updates-archive-grid {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px 12px;
  overflow: visible;
}
.updates-archive-card {
  position: relative;
  min-width: 0;
  overflow: visible;
}
.updates-archive-card__link {
  position: relative;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  overflow: visible;
  transition: transform 0.26s ease, filter 0.26s ease;
}
.updates-archive-card__link:hover {
  transform: translateY(-3px);
  filter: brightness(1.04);
}
.updates-archive-card__surface {
  position: relative;
  width: 100%;
  aspect-ratio: 600 / 695;
  padding: 16px 13px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url("/ui/archive_card.png") center center / 100% 100% no-repeat;
  text-align: center;
  overflow: hidden;
}
.updates-archive-card__media {
  display: block;
  width: 100%;
  max-width: 92px;
  margin: 0 auto 8px;
  overflow: visible;
}
.updates-archive-card__media-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 3px;
  display: block;
  isolation: isolate;
  background: linear-gradient( 180deg, rgba(255, 225, 156, 0.08), transparent 24%, transparent 76%, rgba(90, 55, 30, 0.1) ), linear-gradient(180deg, #30251a 0%, #151d1e 30%, #0c1111 100%);
  border: 1px solid rgba(206, 150, 78, 0.36);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(255, 236, 185, 0.055), inset 0 0 9px rgba(0, 0, 0, 0.48);
  overflow: hidden;
}
.updates-archive-card__media-frame::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient( 90deg, transparent, rgba(244, 204, 126, 0.48), transparent ) center top / 74% 1px no-repeat, linear-gradient( 90deg, transparent, rgba(244, 204, 126, 0.22), transparent ) center bottom / 74% 1px no-repeat, linear-gradient( 180deg, transparent, rgba(244, 204, 126, 0.13), transparent ) left center / 1px 62% no-repeat, linear-gradient( 180deg, transparent, rgba(244, 204, 126, 0.13), transparent ) right center / 1px 62% no-repeat;
}
.updates-archive-card__media-frame::after {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: 5;
  pointer-events: none;
  border: 1px solid rgba(75, 130, 136, 0.15);
}
.updates-archive-card__media-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  background: linear-gradient( 90deg, rgba(7, 10, 12, 0.95) 0%, rgba(28, 40, 41, 0.72) 46%, rgba(7, 10, 12, 0.44) 100% );
  border: 1px solid rgba(227, 174, 92, 0.14);
  box-shadow: inset 0 0 0 1px rgba(78, 142, 148, 0.08), inset 0 0 11px rgba(0, 0, 0, 0.54);
}
.updates-archive-card__media-inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.28s ease, filter 0.28s ease;
  user-select: none;
  pointer-events: none;
}
.updates-archive-card__link:hover .updates-archive-card__media-inner img {
  transform: scale(1.04);
  filter: brightness(1.08);
}
.updates-archive-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 30%, rgba(75, 130, 136, 0.14), transparent 54%), #111a1f;
  color: #d4b06a;
  font-family: "Cormorant SC", serif;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.updates-archive-card__meta {
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  color: rgba(206, 199, 178, 0.78);
  font-family: "Cormorant SC", serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.updates-archive-card__badge {
  position: relative;
  width: fit-content;
  min-width: 50px;
  padding: 3px 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  border: 1px solid rgba(217, 172, 108, 0.3);
  background: linear-gradient( 180deg, rgba(45, 48, 45, 0.88) 0%, rgba(18, 20, 20, 0.94) 100% );
  box-shadow: inset 0 0 8px rgba(217, 172, 108, 0.15), inset 0 1px 0 rgba(255, 232, 186, 0.055), 0 2px 4px rgba(0, 0, 0, 0.5);
  color: #f1ddb1;
  font-family: "Cormorant SC", serif;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.updates-archive-card__badge::before, .updates-archive-card__badge::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #ffdda0;
  box-shadow: 0 0 3px #ffdda0;
  transform: translateY(-50%);
}
.updates-archive-card__badge::before {
  left: -4px;
}
.updates-archive-card__badge::after {
  right: -4px;
}
.updates-archive-card__date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
}
.updates-archive-card__date img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}
.updates-archive-card__text {
  color: #d7ccaf;
  font-family: "Cormorant SC", serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.86);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.updates-archive-card__hover {
  position: relative;
  width: calc(100% - 6px);
  height: 0;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 2.5px solid rgba(196, 145, 78, 0.62);
  border-right: 2.5px solid rgba(196, 145, 78, 0.62);
  border-bottom: 2.5px solid rgba(226, 183, 112, 0.68);
  background: linear-gradient(180deg, rgb(50 58 66) 0%, rgb(46 57 62 / 78%) 58%, rgb(31 40 44 / 86%) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 232, 186, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.55), 0 5px 12px rgba(0, 0, 0, 0.34);
  transition: height 0.32s ease, opacity 0.24s ease, transform 0.32s ease;
  opacity: 0;
  transform: translateY(-2px);
}
.updates-archive-card__hover::before, .updates-archive-card__hover::after {
  content: "";
  position: absolute;
  bottom: -1px;
  width: 28px;
  height: 1px;
  background: linear-gradient( 90deg, rgba(255, 232, 174, 0.88), rgba(174, 121, 62, 0.18) );
  pointer-events: none;
}
.updates-archive-card__hover::before {
  left: 0;
}
.updates-archive-card__hover::after {
  right: 0;
  transform: scaleX(-1);
}
.updates-archive-card__link:hover .updates-archive-card__hover {
  height: 38px;
  opacity: 1;
  transform: translateY(0);
}
.updates-archive-card__read-more {
  width: 98px !important;
  min-width: 98px !important;
  max-width: 98px !important;
  height: 25px !important;
  min-height: 25px !important;
  margin: 0 !important;
}
.updates-archive-card__read-more .menu-btn-md__label {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: none;
}
.updates-archive-empty {
  padding: 30px;
  border: 1px solid rgb(52 56 54 / 54%);
  background: linear-gradient( 180deg, #1b2125 0%, #22292e 55%, #30383e 100% );
  color: #d7ccaf;
  font-family: "Cormorant SC", serif;
  font-size: 18px;
  text-align: center;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.38);
}
.updates-archive-pagination {
  width: 100%;
  max-width: 700px;
  margin: 28px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.updates-archive-pagination__pages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.updates-archive-pagination__btn, .updates-archive-pagination__page {
  min-width: 34px;
  min-height: 30px;
  padding: 5px 12px;
  border: 1px solid rgba(147, 115, 65, 0.65);
  background: linear-gradient( 180deg, #2c3840 0%, #1c2428 58%, #181f22 100% );
  color: #d7bc7b;
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.22s ease, border-color 0.22s ease, filter 0.22s ease, opacity 0.22s ease;
}
.updates-archive-pagination__btn:hover:not(:disabled), .updates-archive-pagination__page:hover, .updates-archive-pagination__page--active {
  color: #f2dfb0;
  border-color: rgba(196, 185, 152, 0.7);
  filter: brightness(1.08);
}
.updates-archive-pagination__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.updates-archive-card__mobile-button {
  display: none !important;
}
@media (max-width: 640px) {
  .updates-archive-frame {
    width: 100%;
    min-height: 0;
    padding: 32px 14px 42px;
  }
  .updates-archive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 8px;
  }
  .updates-archive-card {
    max-width: none;
    margin: 0;
  }
  .updates-archive-card__surface {
    aspect-ratio: 600 / 720;
    padding: 10px 8px 11px;
  }
  .updates-archive-card__media {
    max-width: 66px;
    margin-bottom: 5px;
  }
  .updates-archive-card__meta {
    margin-bottom: 4px;
    gap: 4px;
    font-size: 9px;
  }
  .updates-archive-card__badge {
    min-width: 42px;
    padding: 2px 7px;
    font-size: 8.5px;
    letter-spacing: 0.05em;
  }
  .updates-archive-card__date {
    gap: 4px;
    font-size: 8.5px;
    line-height: 1;
  }
  .updates-archive-card__date img {
    width: 13px;
    height: 13px;
  }
  .updates-archive-card__text {
    margin-top: 4px;
    font-size: 9.5px;
    line-height: 1.18;
    -webkit-line-clamp: 3;
  }
  .updates-archive-card__hover {
    display: none;
  }
  .updates-archive-card__mobile-button {
    display: inline-flex !important;
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
    height: 29px !important;
    min-height: 29px !important;
    margin: 5px auto 0 !important;
  }
  .updates-archive-card__mobile-button .menu-btn-md__label {
    font-size: 8.5px;
    letter-spacing: 0.03em;
    text-transform: none;
  }
  .updates-archive-pagination {
    margin-top: 22px;
    gap: 8px;
  }
  .updates-archive-pagination__btn, .updates-archive-pagination__page {
    min-width: 30px;
    min-height: 28px;
    padding: 4px 9px;
    font-size: 11px;
  }
}
@media (max-width: 460px) {
  .updates-archive-frame {
    padding: 30px 10px 38px;
  }
  .updates-archive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 6px;
  }
  .updates-archive-card__surface {
    aspect-ratio: 600 / 700;
    padding: 9px 7px 10px;
  }
  .updates-archive-card__media {
    max-width: 60px;
    margin-bottom: 4px;
  }
  .updates-archive-card__badge {
    min-width: 38px;
    padding: 2px 6px;
    font-size: 8px;
  }
  .updates-archive-card__date {
    font-size: 8px;
  }
  .updates-archive-card__date img {
    width: 12px;
    height: 12px;
  }
  .updates-archive-card__text {
    font-size: 9px;
    line-height: 1.16;
    -webkit-line-clamp: 3;
  }
  .updates-archive-card__mobile-button {
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    height: 27px !important;
    min-height: 27px !important;
    margin-top: 4px !important;
  }
  .updates-archive-card__mobile-button .menu-btn-md__label {
    font-size: 8px;
  }
  .updates-archive-seal {
    min-width: 100px;
    font-size: 12px;
  }
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
.\@container\/card-header {
  container-type: inline-size;
  container-name: card-header;
}
.pointer-events-none {
  pointer-events: none;
}
.invisible {
  visibility: hidden;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.relative {
  position: relative;
}
.top-1\/2 {
  top: calc(1/2 * 100%);
}
.top-\[50\%\] {
  top: 50%;
}
.left-1\/2 {
  left: calc(1/2 * 100%);
}
.left-\[50\%\] {
  left: 50%;
}
.z-10 {
  z-index: 10;
}
.z-50 {
  z-index: 50;
}
.col-start-2 {
  grid-column-start: 2;
}
.row-span-2 {
  grid-row: span 2 / span 2;
}
.row-start-1 {
  grid-row-start: 1;
}
.container {
  width: 100%;
}
.block {
  display: block;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.inline-flex {
  display: inline-flex;
}
.h-full {
  height: 100%;
}
.w-auto {
  width: auto;
}
.w-full {
  width: 100%;
}
.max-w-\[calc\(100\%-2rem\)\] {
  max-width: calc(100% - 2rem);
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.-translate-x-1\/2 {
  --tw-translate-x: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-x-\[-50\%\] {
  --tw-translate-x: -50%;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-y-1\/2 {
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-y-\[-50\%\] {
  --tw-translate-y: -50%;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.transform {
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.cursor-pointer {
  cursor: pointer;
}
.resize {
  resize: both;
}
.auto-rows-min {
  grid-auto-rows: min-content;
}
.grid-rows-\[auto_auto\] {
  grid-template-rows: auto auto;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-center {
  align-items: center;
}
.items-start {
  align-items: flex-start;
}
.justify-center {
  justify-content: center;
}
.self-start {
  align-self: flex-start;
}
.justify-self-end {
  justify-self: flex-end;
}
.overflow-hidden {
  overflow: hidden;
}
.rounded-\[3px\] {
  border-radius: 3px;
}
.border {
  border-style: var(--tw-border-style);
  border-width: 1px;
}
.border-0 {
  border-style: var(--tw-border-style);
  border-width: 0px;
}
.bg-transparent {
  background-color: transparent;
}
.object-contain {
  object-fit: contain;
}
.text-center {
  text-align: center;
}
.leading-none {
  --tw-leading: 1;
  line-height: 1;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.text-\[\#00fb00\] {
  color: #00fb00;
}
.text-\[\#18f178\] {
  color: #18f178;
}
.text-\[\#78a8f0\] {
  color: #78a8f0;
}
.text-\[\#a860f0\] {
  color: #a860f0;
}
.text-\[\#cfd3dc\] {
  color: #cfd3dc;
}
.text-\[\#f618f6\] {
  color: #f618f6;
}
.text-\[\#ffd54a\] {
  color: #ffd54a;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.opacity-70 {
  opacity: 70%;
}
.opacity-90 {
  opacity: 90%;
}
.shadow-none {
  --tw-shadow: 0 0 #0000;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.outline {
  outline-style: var(--tw-outline-style);
  outline-width: 1px;
}
.filter {
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.transition-\[color\,box-shadow\] {
  transition-property: color,box-shadow;
  transition-timing-function: var(--tw-ease, ease);
  transition-duration: var(--tw-duration, 0s);
}
.transition-all {
  transition-property: all;
  transition-timing-function: var(--tw-ease, ease);
  transition-duration: var(--tw-duration, 0s);
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, ease);
  transition-duration: var(--tw-duration, 0s);
}
.duration-200 {
  --tw-duration: 200ms;
  transition-duration: 200ms;
}
.outline-none {
  --tw-outline-style: none;
  outline-style: none;
}
.select-none {
  -webkit-user-select: none;
  user-select: none;
}
.group-data-\[disabled\=true\]\:pointer-events-none {
  &:is(:where(.group)[data-disabled="true"] *) {
    pointer-events: none;
  }
}
.group-data-\[disabled\=true\]\:opacity-50 {
  &:is(:where(.group)[data-disabled="true"] *) {
    opacity: 50%;
  }
}
.peer-disabled\:cursor-not-allowed {
  &:is(:where(.peer):disabled ~ *) {
    cursor: not-allowed;
  }
}
.peer-disabled\:opacity-50 {
  &:is(:where(.peer):disabled ~ *) {
    opacity: 50%;
  }
}
.file\:inline-flex {
  &::file-selector-button {
    display: inline-flex;
  }
}
.file\:border-0 {
  &::file-selector-button {
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
}
.file\:bg-transparent {
  &::file-selector-button {
    background-color: transparent;
  }
}
.hover\:underline {
  &:hover {
    @media (hover: hover) {
      text-decoration-line: underline;
    }
  }
}
.hover\:opacity-100 {
  &:hover {
    @media (hover: hover) {
      opacity: 100%;
    }
  }
}
.focus\:ring-2 {
  &:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
}
.focus\:ring-offset-2 {
  &:focus {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }
}
.focus\:outline-hidden {
  &:focus {
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
  }
}
.focus-visible\:ring-\[3px\] {
  &:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
}
.disabled\:pointer-events-none {
  &:disabled {
    pointer-events: none;
  }
}
.disabled\:cursor-not-allowed {
  &:disabled {
    cursor: not-allowed;
  }
}
.disabled\:opacity-50 {
  &:disabled {
    opacity: 50%;
  }
}
.has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\] {
  &:has(*[data-slot="card-action"]) {
    grid-template-columns: 1fr auto;
  }
}
.data-\[orientation\=horizontal\]\:h-px {
  &[data-orientation="horizontal"] {
    height: 1px;
  }
}
.data-\[orientation\=horizontal\]\:w-full {
  &[data-orientation="horizontal"] {
    width: 100%;
  }
}
.data-\[orientation\=vertical\]\:h-full {
  &[data-orientation="vertical"] {
    height: 100%;
  }
}
.data-\[orientation\=vertical\]\:w-px {
  &[data-orientation="vertical"] {
    width: 1px;
  }
}
.\[\&_svg\]\:pointer-events-none {
  & svg {
    pointer-events: none;
  }
}
.\[\&_svg\]\:shrink-0 {
  & svg {
    flex-shrink: 0;
  }
}
html {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}
body {
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: url("/ui/texture_one.jpg") left top / auto repeat;
  font-family: "Cormorant SC", serif;
  overflow: visible;
}
body[data-scroll-lock] {
  overflow-y: scroll !important;
  padding-right: 0 !important;
}
body[data-state="open"] {
  overflow-y: scroll !important;
  padding-right: 0 !important;
}
html[data-scroll-lock] {
  overflow-y: scroll !important;
}
html[data-state="open"] {
  overflow-y: scroll !important;
}
.mu-profile-grid {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  gap: 27px;
  align-items: start;
  justify-content: center;
}
.mu-profile-grid--noinv {
  grid-template-columns: 1fr;
  grid-template-areas: "avatar"
    "main";
}
.mu-profile-grid--with-inv {
  grid-template-columns: 1fr;
  grid-template-areas: "avatar"
    "inventory"
    "main";
}
.mu-profile-area-avatar {
  grid-area: avatar;
}
.mu-profile-area-inventory {
  grid-area: inventory;
}
.mu-profile-area-main {
  grid-area: main;
}
@media (min-width: 980px) {
  .mu-profile-grid--noinv {
    grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
    grid-template-areas: "avatar main";
  }
  .mu-profile-grid--with-inv {
    grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
    grid-template-areas: "avatar inventory"
      "main main";
  }
}
.mu-action-row {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.mu-action-row .menu-btn-sm {
  margin-top: 0;
}
@media (min-width: 1280px) {
  .mu-profile-grid--with-inv {
    grid-template-columns: minmax(320px, 360px) minmax(320px, 420px) minmax(0, 1fr);
    grid-template-areas: "avatar inventory main";
  }
}
.mu-profile-card {
  width: 100%;
}
.mu-profile-main {
  width: 100%;
  max-width: 560px;
  justify-self: center;
}
.mu-profile-avatar .mu-avatar-frame {
  margin: 0 auto;
}
.mu-link-clean {
  text-decoration: none;
  color: inherit;
}
.mu-link-clean:hover {
  text-decoration: none;
}
.main-content {
  padding: 65px 0;
  border-radius: 8px;
  color: white;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.layout-grid {
  display: grid;
  grid-template-columns: minmax(240px, 280px)
    minmax(0, 1fr)
    minmax(240px, 280px);
  gap: 20px;
  width: 100%;
  max-width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
  flex: 1 0 auto;
}
.sidebar-left,
.sidebar-right,
.main-content {
  min-width: 0;
}
.auth-link {
  color: #e7c88c;
  transition: 0.2s ease;
}
.auth-link:hover {
  color: #fff;
  text-shadow: 0 0 6px rgba(255, 230, 180, 0.8);
}
.auth-page-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 40px;
  padding-bottom: 40px;
}
.mu-dialog {
  background: url("/main_bg.png") center/cover no-repeat;
  padding: 20px;
  border-radius: 12px;
  border: 2px solid #c7a875;
  color: #ecd7b9;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.7);
  width: 500px;
  max-width: 90%;
  margin: 0 auto;
}
.mu-dialog form {
  margin-bottom: 18px;
}
@media (max-width: 1440px) {
  .layout-grid {
    grid-template-columns: minmax(210px, 240px)
      minmax(0, 1fr)
      minmax(210px, 240px);
    gap: 18px;
    padding: 31px 18px;
  }
}
@media (max-width: 1280px) {
  .layout-grid {
    grid-template-columns: minmax(190px, 220px)
      minmax(0, 1fr)
      minmax(190px, 220px);
    gap: 16px;
    padding: 28px 16px;
  }
}
@media (max-width: 1024px) {
  .layout-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas: "left"
      "main"
      "right";
    gap: 14px;
    padding: 12px;
  }
  .sidebar-left {
    grid-area: left;
  }
  .sidebar-right {
    grid-area: right;
  }
  .main-content {
    grid-area: main;
  }
}
.mz-footer {
  position: relative;
  isolation: isolate;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
  margin-top: 18px;
  padding: 15px 20px 17px;
  color: #ecdcb7;
  background: radial-gradient(circle at 50% 0%, rgba(236, 201, 137, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(53, 45, 39, 0.96), rgba(28, 24, 19, 0.98));
  border-top: 1px solid rgba(236, 201, 137, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 240, 0.08),
    inset 0 10px 18px rgba(0, 0, 0, 0.22),
    0 -8px 20px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 10;
}
.mz-footer::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(137, 109, 74, 0.35),
    rgba(236, 201, 137, 0.78),
    rgba(255, 255, 240, 0.42),
    rgba(236, 201, 137, 0.78),
    rgba(137, 109, 74, 0.35),
    transparent
  );
  pointer-events: none;
  z-index: -1;
}
.mz-footer::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: min(620px, 88vw);
  height: 56px;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center top,
    rgba(236, 201, 137, 0.14),
    rgba(197, 154, 107, 0.05) 42%,
    transparent 72%
  );
  pointer-events: none;
  z-index: -1;
}
.mz-footer__inner {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
}
.mz-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.mz-footer__logo {
  font-family: "Cinzel", "Cormorant SC", Georgia, serif;
  font-size: 17px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #f3d288;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.95),
    0 -1px 0 rgba(255, 245, 205, 0.18),
    0 0 8px rgba(236, 201, 137, 0.18);
}
.mz-footer__tagline {
  font-size: 11px;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: rgba(236, 220, 183, 0.68);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}
.mz-footer__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 0;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.mz-footer__nav a {
  color: rgba(236, 220, 183, 0.76);
  text-decoration: none;
  transition: color 0.18s ease,
    text-shadow 0.18s ease;
}
.mz-footer__nav a:hover,
.mz-footer__nav a:focus-visible {
  color: #fff6d8;
  text-decoration: none;
  outline: none;
  text-shadow: 0 0 8px rgba(236, 201, 137, 0.48),
    0 1px 2px rgba(0, 0, 0, 0.85);
}
.mz-footer__divider {
  width: 1px;
  height: 12px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(236, 201, 137, 0.48),
    transparent
  );
}
.mz-footer__copyright {
  font-size: 11px;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(236, 220, 183, 0.55);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}
@media (max-width: 1024px) {
  .mz-footer {
    margin-top: 14px;
    padding: 14px 14px 16px;
  }
  .mz-footer__inner {
    gap: 6px;
  }
  .mz-footer__logo {
    font-size: 16px;
  }
}
@media (max-width: 640px) {
  .mz-footer {
    margin-top: 12px;
    padding: 13px 12px 15px;
  }
  .mz-footer__logo {
    font-size: 15px;
    letter-spacing: 0.13em;
  }
  .mz-footer__tagline {
    max-width: 290px;
    font-size: 10px;
    letter-spacing: 0.04em;
  }
  .mz-footer__nav {
    flex-wrap: wrap;
    gap: 7px;
    font-size: 10px;
    letter-spacing: 0.035em;
  }
  .mz-footer__copyright {
    max-width: 290px;
    font-size: 10px;
  }
}
@media (max-width: 420px) {
  .mz-footer__nav {
    max-width: 280px;
  }
  .mz-footer__divider {
    display: none;
  }
}
.menu-btn,
.menu-btn-sm,
.menu-btn-round,
.menu-btn-md,
.menu-btn-romb,
.menu-btn-long {
  position: relative;
  display: inline-block;
  border: none;
  outline: none;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background-image: var(--btn-base);
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.18s ease,
    filter 0.18s ease;
}
.menu-btn::before,
.menu-btn-sm::before,
.menu-btn-round::before,
.menu-btn-md::before,
.menu-btn-romb::before,
.menu-btn-long::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--btn-mid) center / 100% 100% no-repeat;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.menu-btn::after,
.menu-btn-sm::after,
.menu-btn-round::after,
.menu-btn-md::after,
.menu-btn-romb::after,
.menu-btn-long::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: var(--btn-top) center / 100% 100% no-repeat;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.menu-btn:not(.is-active):not(:disabled):hover::before,
.menu-btn-sm:not(.is-active):not(:disabled):hover::before,
.menu-btn-round:not(.is-active):not(:disabled):hover::before,
.menu-btn-md:not(.is-active):not(:disabled):hover::before,
.menu-btn-romb:not(.is-active):not(:disabled):hover::before,
.menu-btn-long:not(.is-active):not(:disabled):hover::before {
  opacity: 1;
}
.menu-btn:not(.is-active):not(:disabled):hover::after,
.menu-btn-sm:not(.is-active):not(:disabled):hover::after,
.menu-btn-round:not(.is-active):not(:disabled):hover::after,
.menu-btn-md:not(.is-active):not(:disabled):hover::after,
.menu-btn-romb:not(.is-active):not(:disabled):hover::after,
.menu-btn-long:not(.is-active):not(:disabled):hover::after {
  opacity: 0;
}
.menu-btn.is-active::before,
.menu-btn-sm.is-active::before,
.menu-btn-round.is-active::before,
.menu-btn-md.is-active::before,
.menu-btn-romb.is-active::before,
.menu-btn-long.is-active::before {
  opacity: 0;
}
.menu-btn.is-active::after,
.menu-btn-sm.is-active::after,
.menu-btn-round.is-active::after,
.menu-btn-md.is-active::after,
.menu-btn-romb.is-active::after,
.menu-btn-long.is-active::after {
  opacity: 1;
}
.menu-btn:active::before,
.menu-btn-sm:active::before,
.menu-btn-round:active::before,
.menu-btn-md:active::before,
.menu-btn-romb:active::before,
.menu-btn-long:active::before {
  opacity: 0;
}
.menu-btn:active::after,
.menu-btn-sm:active::after,
.menu-btn-round:active::after,
.menu-btn-md:active::after,
.menu-btn-romb:active::after,
.menu-btn-long:active::after {
  opacity: 1;
}
.menu-btn:disabled,
.menu-btn-sm:disabled,
.menu-btn-round:disabled,
.menu-btn-md:disabled,
.menu-btn-romb:disabled,
.menu-btn-long:disabled,
.menu-btn.is-disabled,
.menu-btn-sm.is-disabled,
.menu-btn-round.is-disabled,
.menu-btn-md.is-disabled,
.menu-btn-romb.is-disabled,
.menu-btn-long.is-disabled {
  opacity: 0.58;
  pointer-events: none;
  cursor: default;
  filter: grayscale(0.08);
}
.menu-btn__label,
.menu-btn-sm__label,
.menu-btn-round__label,
.menu-btn-md__label,
.menu-btn-romb__label,
.menu-btn-long__label {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  font-family: "Cormorant SC", serif;
  font-weight: 600;
  line-height: 1;
  color: #f3dfb6;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.85),
    0 0 6px rgba(0, 0, 0, 0.35);
}
.menu-btn-round {
  width: 54px;
  height: 54px;
  margin: 0;
  border-radius: 999px;
}
.menu-btn-round--brown {
  --btn-base: url("/ui/button_round_brown_1.png");
  --btn-mid: url("/ui/button_round_brown_2.png");
  --btn-top: url("/ui/button_round_brown_3.png");
}
.menu-btn-round--blue {
  --btn-base: url("/ui/button_round_blue_1.png");
  --btn-mid: url("/ui/button_round_blue_2.png");
  --btn-top: url("/ui/button_round_blue_3.png");
}
.menu-btn-round__label {
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.menu-btn {
  width: 150px;
  height: 48px;
  margin: 10px auto 0 auto;
}
.menu-btn--brown {
  --btn-base: url("/ui/button_brown_1.png");
  --btn-mid: url("/ui/button_brown_2.png");
  --btn-top: url("/ui/button_brown_3.png");
}
.menu-btn--blue {
  --btn-base: url("/ui/button_blue_1.png");
  --btn-mid: url("/ui/button_blue_2.png");
  --btn-top: url("/ui/button_blue_3.png");
}
.menu-btn__label {
  padding: 0 14px;
  font-size: 14px;
}
.menu-btn-sm {
  width: 130px;
  height: 40px;
  margin: 8px 0 0 0;
}
.menu-btn-sm--brown {
  --btn-base: url("/ui/button_brown_1.png");
  --btn-mid: url("/ui/button_brown_2.png");
  --btn-top: url("/ui/button_brown_3.png");
}
.menu-btn-sm--blue {
  --btn-base: url("/ui/button_blue_1.png");
  --btn-mid: url("/ui/button_blue_2.png");
  --btn-top: url("/ui/button_blue_3.png");
}
.menu-btn-sm__label {
  padding: 0 12px;
  font-size: 13px;
}
.menu-btn-md {
  width: 190px;
  height: 52px;
  margin: 10px auto 0 auto;
}
.menu-btn-md--blue {
  --btn-base: url("/ui/button_medium_blue_1.png");
  --btn-mid: url("/ui/button_medium_blue_2.png");
  --btn-top: url("/ui/button_medium_blue_3.png");
}
.menu-btn-md--brown {
  --btn-base: url("/ui/button_medium_brown_1.png");
  --btn-mid: url("/ui/button_medium_brown_2.png");
  --btn-top: url("/ui/button_medium_brown_3.png");
}
.menu-btn-md--gray {
  --btn-base: url("/ui/button_medium_gray_1.png");
  --btn-mid: url("/ui/button_medium_gray_2.png");
  --btn-top: url("/ui/button_medium_gray_3.png");
}
.menu-btn-md--red {
  --btn-base: url("/ui/button_medium_red_1.png");
  --btn-mid: url("/ui/button_medium_red_2.png");
  --btn-top: url("/ui/button_medium_red_3.png");
}
.menu-btn-md--brown {
  --btn-base: url("/ui/button_medium_brown_1.png");
  --btn-mid: url("/ui/button_medium_brown_2.png");
  --btn-top: url("/ui/button_medium_brown_3.png");
}
.menu-btn-md__label {
  padding: 0 18px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.menu-btn-long {
  width: 260px;
  height: 52px;
  margin: 10px auto 0 auto;
}
.menu-btn-long--blue {
  --btn-base: url("/ui/button_long_blue_1.png");
  --btn-mid: url("/ui/button_long_blue_2.png");
  --btn-top: url("/ui/button_long_blue_3.png");
}
.menu-btn-long--red {
  --btn-base: url("/ui/button_long_red_1.png");
  --btn-mid: url("/ui/button_long_red_2.png");
  --btn-top: url("/ui/button_long_red_3.png");
}
.menu-btn-long--gray {
  --btn-base: url("/ui/button_long_gray_1.png");
  --btn-mid: url("/ui/button_long_gray_2.png");
  --btn-top: url("/ui/button_long_gray_3.png");
}
.menu-btn-long--brown {
  --btn-base: url("/ui/button_long_brown_1.png");
  --btn-mid: url("/ui/button_long_brown_2.png");
  --btn-top: url("/ui/button_long_brown_3.png");
}
.menu-btn-long__label {
  padding: 0 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.menu-btn-romb {
  width: 190px;
  height: 47px;
  margin: 0 auto;
  --btn-base: url("/ui/button_romb_gray_3.png");
  --btn-mid: url("/ui/button_romb_gray_2.png");
  --btn-top: url("/ui/button_romb_gray_1.png");
}
.menu-btn-romb--gray {
  --btn-base: url("/ui/button_romb_gray_3.png");
  --btn-mid: url("/ui/button_romb_gray_2.png");
  --btn-top: url("/ui/button_romb_gray_1.png");
}
.menu-btn-romb__label {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  color: #f3dfb6;
  font-family: "Cormorant SC", serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.045em;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9),
    0 0 7px rgba(255, 232, 186, 0.12);
}
.mu-input {
  width: 100%;
  height: 40px;
  display: block;
  padding: 0 14px;
  margin-bottom: 12px;
  box-sizing: border-box;
  border: 2px double #e4b47a;
  background: linear-gradient(#36291e, #1c1a17);
  color: #ecd7b9;
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.78),
    inset 0 0 12px rgba(255, 220, 150, 0.04),
    0 2px 8px rgba(0, 0, 0, 0.35);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.85);
  transition: border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}
.mu-input::placeholder {
  color: rgba(236, 215, 185, 0.52);
  opacity: 1;
}
.mu-input:hover {
  border-color: rgba(236, 215, 185, 0.58);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.82),
    inset 0 0 14px rgba(255, 220, 150, 0.06),
    0 0 8px rgba(236, 215, 185, 0.08);
}
.mu-input:focus {
  outline: none;
  border-color: rgba(236, 215, 185, 0.82);
  background: linear-gradient(180deg, rgba(28, 38, 43, 0.96), rgba(10, 15, 18, 0.98));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.9),
    inset 0 0 14px rgba(255, 220, 150, 0.08),
    0 0 10px rgba(236, 215, 185, 0.2);
}
.mu-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.mu-input[type="number"]::-webkit-inner-spin-button,
.mu-input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.mu-input[type="number"] {
  -moz-appearance: textfield;
}
.account-form {
  margin-top: 22px;
  width: 100%;
}
.account-form--password {
  display: flex;
  justify-content: flex-start;
}
.account-form__fields {
  width: 100%;
  max-width: 340px;
}
.account-form__actions {
  display: flex;
  justify-content: flex-start;
  padding-top: 8px;
}
.account-form__submit.menu-btn,
.account-form__submit.menu-btn-md,
.account-form__submit.menu-btn-long {
  margin: 0;
}
@media (max-width: 640px) {
  .account-form__fields {
    max-width: 100%;
  }
  .mu-input {
    height: 38px;
    font-size: 14px;
  }
  .account-form__actions {
    justify-content: flex-start;
  }
}
button[data-slot="dialog-close"] {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.account-characters-panel,
.character-profile-shell,
.character-profile-page,
.account-page-grid {
  overflow: visible;
}
.account-characters-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.account-character-skeleton {
  height: 160px;
}
.account-page-grid .characters-grid {
  width: 100%;
  max-width: 100%;
  margin: 28px auto 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-content: center;
  justify-items: center;
  align-items: start;
  column-gap: clamp(14px, 1.4vw, 22px);
  row-gap: 62px;
  padding-left: 4px;
  padding-right: 4px;
  box-sizing: border-box;
  overflow: visible;
}
.characters-grid > .character-card {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
}
.character-avatar-wrap {
  --avatar-size: 82px;
  --avatar-glow-size: calc(var(--avatar-size) + 6px);
  --char-frame-width: 88px;
  --char-frame-height: 88px;
  --char-frame-shift-x: 0px;
  --char-frame-shift-y: 0px;
  --char-frame-hover-width: 102px;
  --char-frame-hover-height: 103px;
  --char-frame-hover-shift-x: 0px;
  --char-frame-hover-shift-y: 0px;
  position: relative;
  width: var(--avatar-size);
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  overflow: visible;
}
.character-avatar {
  position: relative;
  z-index: 2;
  width: var(--avatar-size);
  height: var(--avatar-size);
  margin: 0 auto;
  border: none;
  border-radius: 50%;
  background: transparent;
  overflow: visible;
  transition: transform 0.2s ease,
    box-shadow 0.2s ease;
}
.character-avatar::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--char-frame-width);
  height: var(--char-frame-height);
  transform: translate(-50%, -50%)
    translate(
      var(--char-frame-shift-x),
      var(--char-frame-shift-y)
    );
  pointer-events: none;
  background: url("/ui/char_frame.png") center / contain no-repeat;
  z-index: 0;
  opacity: 1;
  transition: opacity 0.25s ease;
}
.character-avatar::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--char-frame-hover-width);
  height: var(--char-frame-hover-height);
  transform: translate(-50%, -50%)
    translate(
      var(--char-frame-hover-shift-x),
      var(--char-frame-hover-shift-y)
    );
  pointer-events: none;
  background: url("/ui/char_frame_hover.png") center / contain no-repeat;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.character-avatar-img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--avatar-size);
  height: var(--avatar-size);
  transform: translate(-50%, -50%);
  object-fit: cover;
  border-radius: 50%;
  z-index: 1;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6);
  transition: transform 0.2s ease,
    box-shadow 0.2s ease;
}
.character-avatar-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--avatar-glow-size);
  height: var(--avatar-glow-size);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  box-shadow: inset 0 0 16px rgba(210, 180, 120, 0.46);
  transition: opacity 0.3s ease-in-out;
}
.character-info-frame {
  position: relative;
  z-index: 4;
  width: min(152px, 100%);
  min-height: 74px;
  margin-top: 10px;
  padding: 10px 13px 11px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: url("/ui/account_name_frame.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.35))
    drop-shadow(0 0 7px rgba(190, 145, 78, 0.12));
  overflow: visible;
  transition: filter 0.35s ease;
}
.character-info-name {
  width: 100%;
  font-family: "Cormorant SC", serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.05;
  color: #f4dfb5;
  -webkit-text-fill-color: #f4dfb5;
  text-shadow: 0 1px 0 rgba(60, 32, 12, 0.8),
    0 0 7px rgba(255, 224, 160, 0.20);
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: normal;
  background: none;
  background-image: none;
  background-blend-mode: normal;
  -webkit-background-clip: initial;
  background-clip: initial;
  transition: color 0.35s ease,
    -webkit-text-fill-color 0.35s ease,
    text-shadow 0.35s ease,
    filter 0.35s ease;
}
.character-info-divider {
  width: 72%;
  height: 1px;
  margin: 5px auto 4px;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(224, 176, 121, 0.25),
      rgba(255, 244, 190, 0.82),
      rgba(224, 176, 121, 0.25),
      transparent
    );
  box-shadow: 0 0 6px rgba(239, 198, 124, 0.35);
}
.character-info-location-row {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: "Cormorant SC", serif;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
.character-info-place,
.character-info-coords {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.character-info-place {
  color: #cdbb99;
}
.character-info-coords {
  color: #9f6a45;
}
.character-name {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 120px;
  margin-top: 8px;
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.15;
  color: #f3dfb6;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@keyframes pulseGlow {
  0% {
    background-color: rgba(210, 180, 120, 0.10);
  }
  50% {
    background-color: rgba(210, 180, 120, 0.30);
  }
  100% {
    background-color: rgba(210, 180, 120, 0.10);
  }
}
.character-avatar-wrap:hover .character-avatar::before {
  opacity: 0;
}
.character-avatar-wrap:hover .character-avatar::after {
  opacity: 1;
}
.character-avatar-wrap:hover .character-avatar-img {
  transform: translate(-50%, -50%) scale(1.015);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.7);
}
.character-avatar-wrap:hover .character-avatar-glow {
  opacity: 1;
  animation: pulseGlow 2s infinite ease-in-out;
}
.account-page-grid .characters-grid .character-card:hover .character-info-frame {
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.38))
    drop-shadow(0 0 7px rgba(159, 106, 69, 0.20));
}
.account-page-grid .characters-grid .character-card:hover .character-info-name {
  color: #e1c29c !important;
  -webkit-text-fill-color: #e1c29c !important;
  background: none !important;
  background-image: none !important;
  background-blend-mode: normal !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  text-shadow: 0 1px 0 rgba(32, 17, 8, 0.95),
    0 0 5px rgba(159, 106, 69, 0.45),
    0 0 10px rgba(159, 106, 69, 0.28),
    0 0 16px rgba(159, 106, 69, 0.16);
  filter: drop-shadow(0 0 2px rgba(159, 106, 69, 0.32));
}
@media (max-width: 1024px) and (min-width: 641px) {
  .account-characters-skeleton-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .account-page-grid .characters-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: clamp(14px, 1.6vw, 24px) !important;
    row-gap: 52px !important;
    padding-left: 2px;
    padding-right: 2px;
  }
  .character-avatar-wrap {
    --avatar-size: 74px;
    --avatar-glow-size: calc(var(--avatar-size) + 6px);
    --char-frame-width: 80px;
    --char-frame-height: 80px;
    --char-frame-shift-x: 0px;
    --char-frame-shift-y: 0px;
    --char-frame-hover-width: 94px;
    --char-frame-hover-height: 95px;
    --char-frame-hover-shift-x: 0px;
    --char-frame-hover-shift-y: 0px;
  }
  .character-info-frame {
    width: min(142px, 100%);
    min-height: 70px;
    margin-top: 9px;
    padding: 9px 11px 10px;
  }
  .character-info-name {
    font-size: 12px;
  }
  .character-info-location-row {
    gap: 5px;
    font-size: 10.8px;
  }
}
@media (max-width: 640px) {
  .account-characters-skeleton-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  .account-character-skeleton {
    height: 132px;
  }
  .account-page-grid .characters-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 8px !important;
    row-gap: 20px !important;
    width: 100%;
    margin: 20px auto 0;
    padding-left: 1px;
    padding-right: 1px;
  }
  .characters-grid > .character-card {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
  }
  .character-avatar-wrap {
    --avatar-size: 58px;
    --avatar-glow-size: calc(var(--avatar-size) + 6px);
    --char-frame-width: 64px;
    --char-frame-height: 64px;
    --char-frame-shift-x: 0px;
    --char-frame-shift-y: 0px;
    --char-frame-hover-width: 76px;
    --char-frame-hover-height: 77px;
    --char-frame-hover-shift-x: 0px;
    --char-frame-hover-shift-y: 0px;
  }
  .account-page-grid .character-avatar {
    width: var(--avatar-size) !important;
    height: var(--avatar-size) !important;
  }
  .character-info-frame {
    width: min(104px, 100%);
    min-height: 66px;
    margin-top: 7px;
    padding: 7px 9px 8px;
  }
  .character-info-name {
    font-size: 11px;
    line-height: 1.05;
  }
  .character-info-divider {
    width: 68%;
    margin: 4px auto 4px;
  }
  .character-info-location-row {
    flex-direction: column;
    gap: 2px;
    font-size: 10px;
    line-height: 1.05;
    white-space: normal;
    overflow: visible;
  }
  .character-info-place,
  .character-info-coords {
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }
  .character-avatar-wrap:hover .character-avatar-img {
    transform: translate(-50%, -50%) scale(1.01);
  }
}
@media (max-width: 480px) {
  .account-page-grid .characters-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 6px !important;
    row-gap: 18px !important;
    padding-left: 0;
    padding-right: 0;
  }
  .character-avatar-wrap {
    --avatar-size: 54px;
    --avatar-glow-size: calc(var(--avatar-size) + 6px);
    --char-frame-width: 60px;
    --char-frame-height: 60px;
    --char-frame-shift-x: 0px;
    --char-frame-shift-y: 0px;
    --char-frame-hover-width: 72px;
    --char-frame-hover-height: 73px;
    --char-frame-hover-shift-x: 0px;
    --char-frame-hover-shift-y: 0px;
  }
  .account-page-grid .character-avatar {
    width: var(--avatar-size) !important;
    height: var(--avatar-size) !important;
  }
  .character-info-frame {
    width: min(98px, 100%);
    min-height: 66px;
    margin-top: 6px;
    padding: 7px 8px 8px;
  }
  .character-info-name {
    font-size: 10.5px;
  }
  .character-info-location-row {
    font-size: 9.5px;
  }
  .character-avatar-glow {
    box-shadow: inset 0 0 12px rgba(210, 180, 120, 0.42);
  }
}
@media (max-width: 360px) {
  .account-page-grid .characters-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 4px !important;
    row-gap: 16px !important;
  }
  .character-avatar-wrap {
    --avatar-size: 50px;
    --avatar-glow-size: calc(var(--avatar-size) + 6px);
    --char-frame-width: 56px;
    --char-frame-height: 56px;
    --char-frame-hover-width: 68px;
    --char-frame-hover-height: 69px;
  }
  .account-page-grid .character-avatar {
    width: var(--avatar-size) !important;
    height: var(--avatar-size) !important;
  }
  .character-info-frame {
    width: min(92px, 100%);
    min-height: 64px;
    padding: 6px 7px 7px;
  }
  .character-info-name {
    font-size: 10px;
  }
  .character-info-location-row {
    font-size: 9px;
  }
}
:root {
  --mu-card-width: 150px;
  --mu-card-gap-x: 12px;
  --mu-card-gap-y: 18px;
}
.mu-items-grid-wrap,
.mu-items-grid-wrap--tight,
.mu-items-grid-wrap--owned {
  width: 100%;
  max-width: 100%;
  padding: 5px 0 0;
  box-sizing: border-box;
  overflow: visible;
}
.mu-items-grid {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(var(--mu-card-width, 150px), var(--mu-card-width, 150px))
  );
  column-gap: var(--mu-card-gap-x, 12px);
  row-gap: var(--mu-card-gap-y, 18px);
  justify-content: center;
  justify-items: center;
  box-sizing: border-box;
  overflow: visible;
}
.mu-items-grid:not(.mu-items-grid--market):not(.mu-items-grid--market-full) {
  max-width: calc((var(--mu-card-width, 150px) * 4) + (var(--mu-card-gap-x, 12px) * 3));
}
.mu-items-grid--tall,
.mu-items-grid--owned {
  row-gap: var(--mu-card-gap-y, 18px);
}
.mu-items-grid--store {
  max-width: calc((var(--mu-card-width, 150px) * 3) + (var(--mu-card-gap-x, 12px) * 2));
}
.mu-item-card {
  --price-corner-w: 42%;
  --price-corner-top: -11px;
  --price-corner-left: -11px;
  --price-value-left: 0%;
  --price-value-top: 22%;
  --price-value-width: 100%;
  --price-currency-left: 0%;
  --price-currency-top: 49%;
  --price-currency-width: 100%;
  width: var(--mu-card-width, 150px);
  min-height: 205px;
  position: relative;
  box-sizing: border-box;
  padding: 14px 10px 9px;
  border: 0;
  border-radius: 0;
  background-image: url("/ui/mu_item_card.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.34),
    0 2px 7px rgba(0, 0, 0, 0.18);
  backdrop-filter: none;
  filter: none;
  transition: transform 0.16s ease,
    filter 0.16s ease,
    box-shadow 0.16s ease,
    background-image 0.16s ease;
}
@media (hover: hover) and (pointer: fine) {
  .mu-item-card:hover {
    background-image: url("/ui/mu_item_card_hover.png");
    transform: translateY(-1px);
  }
  .mu-item-card:hover .mu-item-avatar img {
    filter: brightness(1.03)
      saturate(1.02)
      drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
  }
  .mu-item-card:hover .mu-item-title {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95),
      0 0 4px rgba(235, 197, 124, 0.18);
  }
}
.mu-item-card:focus-visible {
  outline: none;
  background-image: url("/ui/mu_item_card_hover.png");
  transform: translateY(-1px);
  box-shadow: 0 9px 18px rgba(0, 0, 0, 0.38),
    0 2px 7px rgba(0, 0, 0, 0.24);
}
.mu-items-grid::before,
.market-grid-wrap::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  background-image: url("/ui/mu_item_card_hover.png");
}
.mu-item-price-frame {
  position: absolute;
  top: var(--price-corner-top);
  left: var(--price-corner-left);
  width: var(--price-corner-w);
  aspect-ratio: 600 / 400;
  display: block;
  box-sizing: border-box;
  background-image: url("/ui/cards/item_price_frame.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 5;
}
.mu-item-price-frame__value {
  position: absolute;
  left: var(--price-value-left);
  top: var(--price-value-top);
  width: var(--price-value-width);
  color: #f3dfb6;
  font-family: "Cormorant SC", serif;
  font-size: clamp(8px, 0.72vw, 10px);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: rotate(var(--price-rotate));
  transform-origin: center center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.95),
    0 0 5px rgba(0, 0, 0, 0.45);
}
.mu-item-price-frame__currency {
  position: absolute;
  left: var(--price-currency-left);
  top: var(--price-currency-top);
  width: var(--price-currency-width);
  color: #9dd6ff;
  font-family: "Cormorant SC", serif;
  font-size: clamp(6px, 0.5vw, 8px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.45px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: rotate(var(--price-rotate));
  transform-origin: center center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.95),
    0 0 5px rgba(0, 0, 0, 0.45);
}
.mu-item-price-frame__currency--gold {
  color: #f0d27a;
}
.mu-item-price-frame__currency--done {
  color: #7dff98;
}
.mu-item-avatar,
.mu-item-avatar--framed,
.mu-item-avatar--owned {
  width: 76px;
  height: 76px;
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  margin: 0 auto 6px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background-image: url("/ui/mu_item_frame.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  box-shadow: none;
}
.mu-item-avatar img,
.mu-item-avatar--framed img,
.mu-item-avatar--owned img {
  width: 45px;
  height: 45px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7));
}
.mu-item-avatar__stack {
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  transform: translateX(-50%) rotate(45deg);
  background: linear-gradient(
      180deg,
      rgba(14, 14, 14, 0.98),
      rgba(0, 0, 0, 0.96)
    );
  border: 1px solid rgba(238, 203, 139, 0.95);
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(77, 53, 22, 0.9),
    0 0 5px rgba(236, 204, 140, 0.12);
  z-index: 4;
}
.mu-item-avatar__stack span {
  display: block;
  transform: rotate(-45deg);
  color: #f5e39a;
  font-family: "Cormorant SC", serif;
  font-weight: 700;
  font-size: 9px;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9);
}
.mu-item-name-frame {
  width: 100%;
  min-height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px 5px;
  margin-top: 1px;
  box-sizing: border-box;
  background-image: url("/ui/item_name_frame.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.mu-item-title {
  margin: 0;
  min-height: 0;
  max-width: 100%;
  text-align: center;
  font-family: "Cormorant SC", serif;
  font-weight: 700;
  font-size: 10px;
  line-height: 1.05;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85),
    0 0 6px rgba(0, 0, 0, 0.24);
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.mu-item-description {
  margin-top: 5px;
  min-height: 26px;
  color: rgba(214, 220, 232, 0.9);
  font-family: "Cormorant SC", serif;
  font-size: 9px;
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.mu-item-parts {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  min-height: 22px;
  flex-wrap: wrap;
}
.mu-item-part {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: url("/ui/cards/set_item_frame.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  display: grid;
  place-items: center;
  position: relative;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24);
  transition: filter 0.14s ease,
    transform 0.14s ease;
}
.mu-item-part:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}
.mu-item-part img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
}
.mu-item-part--submitted {
  filter: brightness(1.15)
    drop-shadow(0 0 4px rgba(0, 251, 0, 0.35));
}
.mu-item-part-badge {
  position: absolute;
  bottom: -5px;
  right: -5px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.55);
  color: #f3dfb6;
  font-family: "Cormorant SC", serif;
  font-weight: 700;
  font-size: 8px;
  line-height: 1;
  display: grid;
  place-items: center;
}
.mu-item-spacer {
  height: 21px;
  margin-top: 6px;
}
.mu-item-divider {
  height: 1px;
  margin: 8px 0 6px;
  background: linear-gradient(
      90deg,
      rgba(199, 168, 117, 0) 0%,
      rgba(199, 168, 117, 0.42) 18%,
      rgba(236, 215, 185, 0.55) 50%,
      rgba(199, 168, 117, 0.42) 82%,
      rgba(199, 168, 117, 0) 100%
    );
}
.mu-item-footnote {
  min-height: 20px;
  text-align: center;
  color: #e8ceadd4;
  font-family: "Cormorant SC", serif;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.1px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
}
.menu-btn.mu-item-card-btn {
  width: 70px;
  height: 22px;
  display: block;
  margin: 2px auto 4px;
  flex: 0 0 auto;
}
.menu-btn.mu-item-card-btn .menu-btn__label {
  font-size: 9px;
  padding: 0 4px;
  letter-spacing: 0;
}
.menu-btn.mu-item-card-btn:disabled {
  opacity: 0.58;
  pointer-events: none;
  cursor: default;
}
.mu-item-action,
.mu-item-progress,
.mu-item-static,
.mu-item-placeholder {
  width: 100%;
  height: 25px;
  border-radius: 0;
  border: 1px solid rgba(199, 168, 117, 0.2);
  background: linear-gradient(
      180deg,
      rgba(20, 26, 31, 0.9),
      rgba(8, 12, 15, 0.92)
    );
  color: #cfd3dc;
  font-family: "Cormorant SC", serif;
  font-weight: 700;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.2px;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 8px rgba(255, 220, 150, 0.03),
    0 2px 6px rgba(0, 0, 0, 0.22);
}
.mu-item-action {
  cursor: pointer;
  color: #b7c7ff;
}
.mu-item-action--danger {
  color: #ffcccc;
  background: linear-gradient(
      180deg,
      rgba(40, 10, 10, 0.9),
      rgba(22, 6, 6, 0.92)
    );
}
.mu-item-action:disabled,
.mu-item-progress:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.mu-item-progress {
  position: relative;
  overflow: hidden;
}
.mu-item-progress--clickable {
  cursor: pointer;
}
.mu-item-progress__fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: linear-gradient(
      90deg,
      rgba(199, 168, 117, 0.92),
      rgba(255, 200, 120, 0.92)
    );
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.28);
  transition: width 0.25s ease;
}
.mu-item-progress--done .mu-item-progress__fill {
  background: linear-gradient(
      90deg,
      rgba(0, 251, 0, 0.55),
      rgba(0, 251, 0, 0.85)
    );
}
.mu-item-progress__label {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}
.market-card-price-edit {
  position: relative;
  z-index: 4;
  width: 118px;
  margin: 7px auto 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.market-price-edit-btn {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 118px;
  height: 32px;
  padding: 3px 8px 4px;
  display: grid;
  grid-template-rows: 11px 1fr;
  align-items: center;
  justify-items: center;
  border: 1px solid rgba(180, 136, 78, 0.48);
  border-radius: 0;
  background: radial-gradient(
      circle at 50% 0%,
      rgba(255, 220, 145, 0.1),
      transparent 54%
    ),
    linear-gradient(
      180deg,
      rgba(24, 18, 12, 0.92),
      rgba(6, 5, 4, 0.88)
    );
  color: #f1d49b;
  box-shadow: inset 0 1px 0 rgba(255, 226, 166, 0.07),
    inset 0 0 0 1px rgba(255, 215, 150, 0.035),
    inset 0 -8px 14px rgba(0, 0, 0, 0.42),
    0 2px 7px rgba(0, 0, 0, 0.34);
  cursor: pointer;
  overflow: hidden;
  box-sizing: border-box;
  transition: border-color 0.16s ease,
    box-shadow 0.16s ease,
    filter 0.16s ease,
    transform 0.16s ease;
}
.market-price-edit-btn::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 0;
  height: 1px;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 226, 166, 0.34),
      transparent
    );
  pointer-events: none;
}
.market-price-edit-btn:hover {
  border-color: rgba(226, 178, 100, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 226, 166, 0.1),
    inset 0 0 0 1px rgba(255, 215, 150, 0.055),
    inset 0 -8px 14px rgba(0, 0, 0, 0.42),
    0 0 10px rgba(226, 178, 100, 0.12);
  filter: brightness(1.08);
}
.market-price-edit-btn:active {
  transform: scale(0.97);
}
.market-price-edit-btn.has-price {
  border-color: rgba(226, 178, 100, 0.68);
  background: radial-gradient(
      circle at 50% 0%,
      rgba(255, 220, 145, 0.14),
      transparent 54%
    ),
    linear-gradient(
      180deg,
      rgba(39, 27, 15, 0.94),
      rgba(8, 6, 4, 0.9)
    );
}
.market-price-edit-btn__label {
  position: relative;
  z-index: 1;
  max-width: 100%;
  color: #a88d66;
  font-family: "Cormorant SC", serif;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
}
.market-price-edit-btn__value {
  position: relative;
  z-index: 1;
  max-width: 100%;
  color: #f1d49b;
  font-family: "Cormorant SC", serif;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 5px rgba(255, 220, 145, 0.1);
}
.market-price-edit-btn.has-price .market-price-edit-btn__value {
  color: #ffe0a1;
}
.market-price-editor-backdrop {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  width: 100dvw;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(1px);
}
.market-price-editor {
  position: relative;
  width: min(320px, 100%);
  max-width: 100%;
  padding: 17px 18px 16px;
  box-sizing: border-box;
  border: 1px solid rgba(217, 172, 108, 0.52);
  border-radius: 0;
  background: radial-gradient(
      circle at 50% 0%,
      rgba(255, 220, 150, 0.08),
      transparent 48%
    ),
    linear-gradient(
      180deg,
      rgba(18, 13, 9, 0.98),
      rgba(5, 4, 3, 0.98)
    );
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.68),
    0 0 18px rgba(205, 154, 84, 0.08),
    inset 0 0 0 1px rgba(255, 224, 168, 0.035),
    inset 0 -18px 26px rgba(0, 0, 0, 0.38);
  overflow: hidden;
}
.market-price-editor::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 1px;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 226, 166, 0.42),
      transparent
    );
  pointer-events: none;
}
.market-price-editor__title {
  margin: 0 0 8px;
  color: #ffe8ba;
  font-family: "Cormorant SC", serif;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95),
    0 0 8px rgba(255, 221, 160, 0.1);
}
.market-price-editor__item {
  min-height: 18px;
  margin: 0 auto 12px;
  max-width: 100%;
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.12;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
}
.market-price-editor__field {
  position: relative;
  width: 100%;
  height: 38px;
  margin: 0 auto 11px;
  border: 1px solid rgba(180, 136, 78, 0.52);
  background: linear-gradient(
      180deg,
      rgba(4, 4, 4, 0.82),
      rgba(0, 0, 0, 0.68)
    );
  box-shadow: inset 0 1px 0 rgba(255, 226, 166, 0.06),
    inset 0 -8px 14px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
}
.market-price-editor__input {
  width: 100%;
  height: 100%;
  padding: 0 12px;
  border: 0;
  outline: none;
  background: transparent;
  color: #ffe0a1;
  font-family: "Cormorant SC", serif;
  font-size: 17px;
  font-weight: 900;
  line-height: 38px;
  text-align: center;
  box-sizing: border-box;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 5px rgba(255, 220, 145, 0.1);
}
.market-price-editor__input::placeholder {
  color: #80694b;
  opacity: 1;
}
.market-price-editor__currency {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 13px;
}
.market-price-editor__currency-btn,
.market-price-editor__fixed-currency {
  height: 32px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(180, 136, 78, 0.34);
  border-radius: 0;
  background: linear-gradient(
      180deg,
      rgba(21, 16, 11, 0.86),
      rgba(5, 4, 3, 0.86)
    );
  color: #d8bc8a;
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 226, 166, 0.045),
    0 2px 6px rgba(0, 0, 0, 0.24);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
  box-sizing: border-box;
}
.market-price-editor__currency-btn {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.16s ease,
    color 0.16s ease,
    filter 0.16s ease;
}
.market-price-editor__currency-btn:hover {
  color: #ffe0a1;
  border-color: rgba(226, 178, 100, 0.62);
  filter: brightness(1.08);
}
.market-price-editor__currency-btn.is-active {
  color: #fff0c6;
  border-color: rgba(226, 178, 100, 0.86);
  background: linear-gradient(
      180deg,
      rgba(54, 38, 22, 0.92),
      rgba(17, 12, 8, 0.9)
    );
  box-shadow: inset 0 1px 0 rgba(255, 226, 166, 0.08),
    0 0 10px rgba(226, 178, 100, 0.1);
}
.market-price-editor__currency-btn img,
.market-price-editor__fixed-currency img {
  width: 15px;
  height: 15px;
  object-fit: contain;
  flex: 0 0 auto;
}
.market-price-editor__fixed-currency {
  width: 100%;
  margin: 0 0 13px;
  color: #fff0c6;
  border-color: rgba(226, 178, 100, 0.62);
}
.market-price-editor__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.market-price-editor__actions .menu-btn {
  width: 94px;
  height: 27px;
  min-height: 27px;
  margin: 0 !important;
}
.market-price-editor__actions .menu-btn__label {
  font-size: 9px;
  line-height: 1;
}
@media (max-width: 560px) {
  .market-card-price-edit {
    width: 112px;
  }
  .market-price-edit-btn {
    width: 112px;
    height: 31px;
  }
  .market-price-editor-backdrop {
    left: 0;
    top: 0;
    right: auto;
    bottom: auto;
    width: 100dvw;
    height: 100dvh;
    min-width: 100dvw;
    min-height: 100dvh;
    padding: max(10px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
  }
  .market-price-editor {
    width: min(300px, 100%);
    max-width: 100%;
    padding: 16px 15px 15px;
    box-sizing: border-box;
  }
  .market-price-editor__title {
    font-size: 14px;
  }
  .market-price-editor__item {
    font-size: 11px;
  }
  .market-price-editor__input {
    font-size: 16px;
  }
  .market-price-editor__currency-btn,
  .market-price-editor__fixed-currency {
    height: 31px;
    font-size: 11px;
  }
  .market-price-editor__actions {
    gap: 7px;
  }
  .market-price-editor__actions .menu-btn {
    width: 88px;
    height: 26px;
    min-height: 26px;
  }
  .market-price-editor__actions .menu-btn__label {
    font-size: 8px;
  }
}
.mu-card-pagination {
  width: 100%;
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  user-select: none;
}
.mu-card-pagination__pages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.mu-card-pagination__page,
.mu-card-pagination__arrow {
  position: relative;
  width: 30px;
  height: 30px;
  min-width: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: url("/ui/pag_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  color: #ecd7b9;
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.95),
    0 0 5px rgba(236, 215, 185, 0.22);
  box-shadow: none;
  cursor: pointer;
  transition: color 0.16s ease,
    filter 0.16s ease,
    opacity 0.16s ease,
    transform 0.16s ease;
}
.mu-card-pagination__arrow {
  font-size: 22px;
  padding-bottom: 2px;
}
.mu-card-pagination__page:hover,
.mu-card-pagination__arrow:hover {
  color: #fff4d4;
  filter: brightness(1.16);
  transform: translateY(-1px);
}
.mu-card-pagination__page.is-active {
  color: #fff4d4;
  background-image: url("/ui/pag_bg_active.png");
  filter: brightness(1.08)
    drop-shadow(0 0 5px rgba(236, 215, 185, 0.28));
  cursor: default;
}
.mu-card-pagination__page:disabled,
.mu-card-pagination__arrow:disabled {
  opacity: 0.35;
  cursor: default;
  filter: grayscale(0.3) brightness(0.8);
  transform: none;
}
.mu-card-over {
  position: absolute;
  inset: 0;
  z-index: 8;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  outline: none;
  cursor: pointer;
  background: linear-gradient(
      180deg,
      rgba(2, 4, 7, 0.64) 0%,
      rgba(2, 4, 7, 0.54) 42%,
      rgba(2, 4, 7, 0.48) 100%
    );
  transition: background 0.16s ease,
    filter 0.16s ease;
}
.mu-card-over::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      circle at 50% 42%,
      rgba(255, 228, 172, 0.13) 0%,
      rgba(255, 228, 172, 0.06) 20%,
      transparent 48%
    );
  pointer-events: none;
}
.mu-card-over:hover {
  background: linear-gradient(
      180deg,
      rgba(2, 4, 7, 0.72) 0%,
      rgba(2, 4, 7, 0.62) 42%,
      rgba(2, 4, 7, 0.56) 100%
    );
}
.mu-card-over__icon {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.62))
    drop-shadow(0 0 9px rgba(233, 201, 140, 0.2));
  transition: transform 0.16s ease,
    filter 0.16s ease;
}
.mu-card-over:hover .mu-card-over__icon {
  transform: scale(1.04);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.68))
    drop-shadow(0 0 13px rgba(233, 201, 140, 0.28));
}
.mu-card-over:active .mu-card-over__icon {
  transform: scale(0.96);
}
.mu-card-over__bg {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
  pointer-events: none;
}
.mu-card-over__check {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  object-fit: contain;
  pointer-events: none;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 7px rgba(255, 231, 186, 0.18));
}
.account-characters-panel,
.character-profile-shell,
.account-page-grid {
  overflow: visible;
}
@media (max-width: 980px) {
  .mu-items-grid:not(.mu-items-grid--market):not(.mu-items-grid--market-full) {
    --mu-card-width: 140px;
    --mu-card-gap-x: 10px;
    --mu-card-gap-y: 16px;
  }
  .mu-item-card {
    --price-corner-w: 42%;
    --price-corner-top: -10px;
    --price-corner-left: -10px;
    --price-value-left: 0%;
    --price-value-top: 22%;
    --price-value-width: 100%;
    --price-currency-left: 0%;
    --price-currency-top: 49%;
    --price-currency-width: 100%;
    min-height: 198px;
    padding: 13px 9px 8px;
  }
  .mu-item-price-frame__value {
    font-size: 9.5px;
  }
  .mu-item-price-frame__currency {
    font-size: 7.5px;
    letter-spacing: 0.38px;
  }
  .mu-item-avatar,
  .mu-item-avatar--framed,
  .mu-item-avatar--owned {
    width: 72px;
    height: 72px;
    margin-bottom: 6px;
  }
  .mu-item-avatar img,
  .mu-item-avatar--framed img,
  .mu-item-avatar--owned img {
    width: 42px;
    height: 42px;
  }
  .mu-item-name-frame {
    min-height: 30px;
    padding: 4px 7px 5px;
  }
  .mu-item-title {
    font-size: 9px;
  }
  .menu-btn.mu-item-card-btn {
    width: 67px;
    height: 21px;
  }
  .menu-btn.mu-item-card-btn .menu-btn__label {
    font-size: 7px;
    padding: 0 4px;
  }
}
@media (max-width: 640px) {
  .mu-items-grid:not(.mu-items-grid--market):not(.mu-items-grid--market-full) {
    --mu-card-width: 133px;
    --mu-card-gap-x: 10px;
    --mu-card-gap-y: 14px;
    max-width: calc((var(--mu-card-width) * 2) + var(--mu-card-gap-x));
    grid-template-columns: repeat(2, var(--mu-card-width));
  }
  .mu-items-grid--store {
    max-width: calc((var(--mu-card-width) * 2) + var(--mu-card-gap-x));
  }
  .mu-item-card {
    --price-corner-w: 42%;
    --price-corner-top: -9px;
    --price-corner-left: -9px;
    --price-value-left: 0%;
    --price-value-top: 22%;
    --price-value-width: 100%;
    --price-currency-left: 0%;
    --price-currency-top: 49%;
    --price-currency-width: 100%;
    min-height: 190px;
    padding: 12px 8px 8px;
  }
  .mu-item-price-frame__value {
    font-size: 9px;
  }
  .mu-item-price-frame__currency {
    font-size: 7px;
    letter-spacing: 0.32px;
  }
  .mu-item-avatar,
  .mu-item-avatar--framed,
  .mu-item-avatar--owned {
    width: 68px;
    height: 68px;
    margin-bottom: 5px;
  }
  .mu-item-avatar img,
  .mu-item-avatar--framed img,
  .mu-item-avatar--owned img {
    width: 40px;
    height: 40px;
  }
  .mu-item-name-frame {
    min-height: 29px;
    padding: 4px 7px 5px;
  }
  .mu-item-title {
    font-size: 9px;
  }
  .mu-item-footnote {
    font-size: 9px;
  }
  .menu-btn.mu-item-card-btn {
    width: 65px;
    height: 20px;
    margin: 2px auto 4px;
  }
  .menu-btn.mu-item-card-btn .menu-btn__label {
    font-size: 7px;
    padding: 0 3px;
  }
  .exchange-actions {
    gap: 8px;
  }
  .exchange-text,
  .exchange-warning,
  .exchange-message {
    font-size: 13px;
  }
  .mu-card-pagination {
    margin-top: 14px;
    gap: 8px;
  }
  .mu-card-pagination__pages {
    gap: 5px;
  }
  .mu-card-pagination__page,
  .mu-card-pagination__arrow {
    width: 27px;
    height: 27px;
    min-width: 27px;
    font-size: 12px;
  }
  .mu-card-pagination__arrow {
    font-size: 20px;
  }
}
@media (max-width: 420px) {
  .mu-item-card {
    --price-corner-w: 42%;
    --price-corner-top: -8px;
    --price-corner-left: -8px;
    --price-value-left: 0%;
    --price-value-top: 22%;
    --price-value-width: 100%;
    --price-currency-left: 0%;
    --price-currency-top: 49%;
    --price-currency-width: 100%;
  }
  .mu-item-price-frame__value {
    font-size: 8.5px;
  }
  .mu-item-price-frame__currency {
    font-size: 6.6px;
    letter-spacing: 0.26px;
  }
}
@media (max-width: 330px) {
  .mu-items-grid:not(.mu-items-grid--market):not(.mu-items-grid--market-full),
  .mu-items-grid--store {
    grid-template-columns: var(--mu-card-width);
    max-width: var(--mu-card-width);
  }
  .mu-item-card {
    --price-corner-w: 43%;
    --price-corner-top: -7px;
    --price-corner-left: -7px;
  }
  .mu-item-price-frame__value {
    font-size: 8px;
  }
  .mu-item-price-frame__currency {
    font-size: 6.2px;
    letter-spacing: 0.22px;
  }
}
.mu-card-over {
  position: absolute;
  inset: 0;
  z-index: 8;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  outline: none;
  cursor: pointer;
  background: linear-gradient(
      180deg,
      rgba(2, 4, 7, 0.64) 0%,
      rgba(2, 4, 7, 0.54) 42%,
      rgba(2, 4, 7, 0.48) 100%
    );
  transition: background 0.16s ease,
    filter 0.16s ease;
}
.mu-card-over::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      circle at 50% 42%,
      rgba(255, 228, 172, 0.13) 0%,
      rgba(255, 228, 172, 0.06) 20%,
      transparent 48%
    );
  pointer-events: none;
}
.mu-card-over:hover {
  background: linear-gradient(
      180deg,
      rgba(2, 4, 7, 0.72) 0%,
      rgba(2, 4, 7, 0.62) 42%,
      rgba(2, 4, 7, 0.56) 100%
    );
}
.mu-card-over__icon {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.62))
    drop-shadow(0 0 9px rgba(233, 201, 140, 0.2));
  transition: transform 0.16s ease,
    filter 0.16s ease;
}
.mu-card-over:hover .mu-card-over__icon {
  transform: scale(1.04);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.68))
    drop-shadow(0 0 13px rgba(233, 201, 140, 0.28));
}
.mu-card-over:active .mu-card-over__icon {
  transform: scale(0.96);
}
.mu-card-over__bg {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
  pointer-events: none;
}
.mu-card-over__check {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  object-fit: contain;
  pointer-events: none;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 7px rgba(255, 231, 186, 0.18));
}
.mu-item-form-row {
  position: relative;
  z-index: 4;
  width: 122px;
  height: 32px;
  margin: 7px auto 4px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 0;
  border: 1px solid rgba(180, 136, 78, 0.52);
  background: linear-gradient(
      180deg,
      rgba(27, 21, 15, 0.27),
      rgba(7, 6, 5, 0.42)
    );
  box-shadow: inset 0 1px 0 rgba(255, 226, 166, 0.08),
    inset 0 0 0 1px rgba(255, 215, 150, 0.035),
    inset 0 -8px 14px rgba(0, 0, 0, 0.42),
    0 2px 7px rgba(0, 0, 0, 0.34);
}
.mu-item-form-row::before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 0;
  height: 1px;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 226, 166, 0.34),
      transparent
    );
  pointer-events: none;
}
.mu-item-input,
.mu-item-select {
  width: 100%;
  height: 30px;
  min-width: 0;
  border: 0;
  outline: none;
  border-radius: 0;
  background: transparent;
  color: #e8c992;
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 30px;
  box-shadow: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  transition: color 0.16s ease,
    text-shadow 0.16s ease,
    filter 0.16s ease;
}
.mu-item-input {
  padding: 0 7px;
  text-align: left;
}
.mu-item-input::placeholder {
  color: #9b8260;
  opacity: 0.92;
}
.mu-item-input:focus {
  color: #ffe6ad;
  text-shadow: 0 0 6px rgba(255, 220, 145, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.95);
}
.mu-item-select {
  padding: 0 14px 0 4px;
  cursor: pointer;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
  color: #ffe0a1;
  border-left: 1px solid rgba(180, 136, 78, 0.42);
  background-image: url("/ui/min.png");
  background-repeat: no-repeat;
  background-position: right 5px center;
  background-size: 8px 8px;
}
.mu-item-select:focus {
  color: #fff0c6;
}
.mu-item-select--static {
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  user-select: none;
  color: #ffe0a1;
  border-left: 1px solid rgba(180, 136, 78, 0.42);
  background-image: none;
}
.mu-item-select--static span {
  display: block;
  width: 100%;
  text-align: center;
  white-space: normal;
  font-family: "Cormorant SC", serif;
  font-size: 10px;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: #f2d19a;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 5px rgba(255, 220, 145, 0.08);
}
.mu-item-form-row:focus-within {
  border-color: rgba(226, 178, 100, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 226, 166, 0.1),
    inset 0 0 0 1px rgba(255, 215, 150, 0.055),
    inset 0 -8px 14px rgba(0, 0, 0, 0.42),
    0 0 10px rgba(226, 178, 100, 0.12);
}
.donate-page .menu-btn,
.donate-page .menu-btn-sm {
  margin: 0 !important;
  flex: 0 0 auto;
}
.donate-page .donate-actions-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.donate-page .donate-actions-row--between {
  justify-content: space-between;
}
.price-icon {
  width: 14px;
  height: 14px;
  margin-left: 6px;
  vertical-align: -2px;
  opacity: 0.95;
}
.donate-page .donate-selected-row {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 110px auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.donate-page .donate-selected-qty {
  font-weight: 600;
  font-family: "Cormorant SC", serif;
  color: #f3dfb6;
}
.donate-page .donate-selected-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Cormorant SC", serif;
  color: #ffffff;
}
.donate-page .donate-selected-price {
  justify-self: end;
  white-space: nowrap;
  font-family: "Cormorant SC", serif;
  color: #ffffff;
}
.donate-page .donate-selected-actions {
  justify-self: end;
  display: flex;
  gap: 6px;
  align-items: center;
}
.donate-page {
  min-width: 0;
}
.donate-page .char-stats-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
@media (max-width: 1024px) {
  .header-bar {
    height: auto;
    min-height: 320px;
    padding-bottom: 14px;
    padding-top: 36px !important;
    background-size: cover;
    background-position: center center;
  }
  .header-logo {
    animation: none !important;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    text-align: center;
    margin-top: 4px;
    z-index: 5;
    display: block;
  }
  .header-logo > span {
    margin: 0 auto;
    display: inline-block;
  }
  .header-logo img {
    width: 120px;
    max-width: 80vw;
    height: auto;
  }
  .header-logo:hover img {
    transform: none;
  }
  .sidebar-right,
  #sidebar-right {
    width: 100% !important;
    max-width: 100% !important;
  }
  .layout-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas: "left"
      "main"
      "right";
    gap: 14px;
    padding: 12px;
  }
  .sidebar-left {
    grid-area: left;
  }
  .sidebar-right {
    grid-area: right;
  }
  .main-content {
    grid-area: main;
  }
  .sidebar {
    width: 100%;
    max-width: 100%;
  }
  .sidebar,
  .main-content,
  .mu-panel,
  .mu-dialog {
    max-width: 100%;
  }
  .menu-bar {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 6px 6px 6px;
  }
  .menu-bar::-webkit-scrollbar {
    display: none;
  }
  .menu-btn {
    width: 92px;
    height: 35px;
    margin-top: 0;
  }
  .menu-btn__label {
    font-size: 11px;
  }
  .char-card-right,
  .char-stats-card {
    width: 100%;
  }
  .char-stats-row {
    flex-wrap: nowrap;
    align-items: center;
  }
  .char-stats-row .char-stats-input,
  .char-stats-row .char-stats-value {
    width: auto;
    margin-left: auto;
  }
  .char-stats-card--with-avatar {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .mu-avatar-frame {
    width: 220px;
    height: 280px;
  }
  .char-stats-label {
    width: auto;
    min-width: 110px;
    font-size: 15px;
  }
  .char-stats-value {
    font-size: 16px !important;
  }
  .menu-btn-sm {
    width: 92px;
    height: 36px;
    margin-top: 0;
  }
  .menu-btn-sm__label {
    font-size: 11px;
  }
  .auth-page-wrapper {
    align-items: flex-start;
    padding-top: 24px;
    padding-bottom: 32px;
  }
  .account-topbar__inner {
    padding: 8px 14px;
    font-size: 13px;
    gap: 18px;
  }
  .account-topbar__icon {
    width: 22px;
    height: 22px;
  }
  .mu-panel {
    padding: 16px;
  }
  .mu-proficiency__top {
    grid-template-columns: 1fr;
  }
  .mu-proficiency__stats {
    text-align: left;
  }
  .language-switcher {
    top: auto !important;
    left: auto !important;
    right: auto !important;
    gap: 8px;
    z-index: 30;
    position: relative !important;
    width: 100%;
    justify-content: flex-start;
    padding-left: 12px;
    margin: 6px 0 6px;
  }
  .language-switcher a {
    width: 22px;
    height: 22px;
  }
  .language-switcher .flag-wrap {
    width: 22px;
    height: 22px;
  }
}
@media (max-width: 480px) {
  .header-logo img {
    width: 100px;
  }
}
@media (max-width: 1024px) and (max-height: 450px) {
  .header-bar {
    height: 140px;
  }
  .header-logo img {
    width: 150px;
  }
  .menu-bar {
    gap: 8px;
  }
  .menu-btn {
    width: 112px;
    height: 38px;
    margin-top: 6px;
  }
}
.character-main-card__frame {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  position: relative;
  padding: 12px 10px 12px;
  border: 2px solid rgba(184, 140, 78, 0.82);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(6, 18, 31, 0.96), rgba(2, 8, 15, 0.97));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04),
    inset 0 18px 35px rgba(44, 84, 120, 0.08),
    0 14px 35px rgba(0,0,0,0.32);
}
.character-main-card__class {
  margin: 0 auto 10px;
  width: 94%;
  padding: 7px 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: #f3dfb6;
  border: 1px solid rgba(199,168,117,0.55);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(28, 16, 9, 0.9), rgba(7, 9, 14, 0.94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08),
    0 6px 18px rgba(0,0,0,0.35);
}
.character-main-card__avatar-wrap {
  width: 80%;
  min-width: 0;
  max-width: 80%;
  aspect-ratio: 0.72 / 1;
  overflow: hidden;
  border-radius: 5px;
  border: 2px solid rgba(199,168,117,0.52);
  background: radial-gradient(circle at top, rgba(79, 93, 173, 0.22), rgba(6, 12, 20, 0.96) 70%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04),
    inset 0 -30px 45px rgba(0,0,0,0.32);
  margin: 0 auto;
}
.character-main-card__avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.character-main-card__name {
  margin-top: 10px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #ecd9b0;
  text-shadow: 0 2px 12px rgba(0,0,0,0.75);
}
.character-main-card__meta {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(199,168,117,0.2);
}
.character-main-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: #d8c7a2;
  font-size: 14px;
}
.character-main-card__row strong {
  color: #fff2d2;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.character-main-card__reset {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}
.character-main-card__reset .menu-btn-sm {
  width: 148px;
  height: 36px;
}
.character-stats-list-v2 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  justify-content: flex-start;
}
.character-stats-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 8px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(90deg, rgba(255,255,255,0.015), rgba(255,255,255,0));
}
.character-stats-item span {
  font-size: 14px;
  font-weight: 500;
  color: #f0deba;
}
.character-stats-item strong {
  font-size: 15px;
  font-weight: 700;
  color: #fff2d2;
  white-space: nowrap;
}
.character-equipment-panel__body {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding-top: 2px;
  overflow: hidden;
}
.character-equipment-panel .character-profile-equipment-body,
.character-equipment-panel .character-profile-equipment-body--compact {
  padding: 0;
  background: transparent;
  border: none;
  min-height: auto;
}
.character-equipment-panel [class*="equipment"],
.character-equipment-panel [class*="inventory"] {
  width: 100%;
  max-width: 100%;
}
.character-equipment-panel__body > div:first-child {
  transform-origin: top left;
  transform: scale(0.62);
}
.character-equipment-panel {
  min-height: 330px;
}
@media (max-width: 479px) {
  .character-profile-page--dashboard {
    padding: 12px 8px 16px;
  }
  .character-profile-grid-v2 {
    gap: 10px;
  }
  .character-side-panel__title,
  .character-panel-title {
    font-size: 14px;
  }
  .character-side-btn__label,
  .character-stats-item span,
  .character-stats-item strong,
  .character-main-card__row,
  .character-main-card__row strong {
    font-size: 13px;
  }
  .character-bottom-action span {
    font-size: 15px;
  }
}
.character-profile-loading,
.character-profile-loading-inline {
  color: #f3dfb6;
  font-family: "Cormorant SC", serif;
  font-size: 18px;
}
.character-equipment-panel {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
.character-equipment-panel__body {
  --eq-board-w: 420px;
  --eq-board-h: 364px;
  --eq-scale: 0.62;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
  padding-top: 2px;
}
.character-equipment-panel__body > div:first-child {
  flex: 0 0 auto;
  transform: scale(var(--eq-scale));
  transform-origin: top center;
  margin: 0 auto;
}
.character-equipment-panel {
  min-height: calc(var(--eq-board-h, 364px) * var(--eq-scale, 0.62) + 40px);
}
@media (min-width: 981px) {
  .character-equipment-panel__body {
    --eq-scale: 0.62;
  }
}
@media (max-width: 980px) {
  .character-equipment-panel__body {
    --eq-scale: 0.82;
  }
  .character-equipment-panel {
    min-height: calc(364px * 0.82 + 30px);
  }
}
@media (max-width: 767px) {
  .character-equipment-panel__body {
    --eq-scale: 0.68;
  }
  .character-equipment-panel {
    min-height: calc(364px * 0.68 + 24px);
  }
}
@media (max-width: 560px) {
  .character-equipment-panel__body {
    --eq-scale: 0.58;
  }
  .character-equipment-panel {
    min-height: calc(364px * 0.58 + 20px);
  }
}
@media (max-width: 420px) {
  .character-equipment-panel__body {
    --eq-scale: 0.5;
  }
  .character-equipment-panel {
    min-height: calc(364px * 0.5 + 16px);
  }
}
.character-profile-grid-v2--change-class {
  display: grid;
  grid-template-columns: 220px 240px minmax(0, 1fr);
  gap: 14px;
}
.character-side-panel {
  max-width: 220px;
}
.character-main-card {
  max-width: 240px;
}
.character-main-card__frame {
  max-width: 240px;
  margin: 0 auto;
}
.character-main-card--compact .character-main-card__avatar-wrap {
  aspect-ratio: 0.78 / 1;
}
.character-main-card--compact .character-main-card__frame {
  padding-bottom: 14px;
  margin-top: 8px;
}
.character-side-panel,
.character-main-card,
.character-change-class-panel {
  min-width: 0;
}
@media (max-width: 1200px) {
  .character-profile-grid-v2--change-class {
    grid-template-columns: 200px 220px minmax(0, 1fr);
  }
  .character-side-panel {
    max-width: 200px;
  }
  .character-main-card,
  .character-main-card__frame {
    max-width: 220px;
  }
}
@media (max-width: 980px) {
  .character-profile-grid-v2--change-class {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .character-side-panel,
  .character-main-card,
  .character-main-card__frame,
  .character-change-class-panel {
    max-width: 100%;
    width: 100%;
  }
}
.char-stats-card,
.char-stats-row,
.char-stats-label,
.char-stats-value,
.char-stats-input,
.stat-input-area {
  min-width: 0;
}
.char-stats-row {
  flex-wrap: nowrap;
}
.stat-input-area {
  flex-wrap: nowrap;
  max-width: 100%;
}
.char-stats-input {
  max-width: 100%;
  box-sizing: border-box;
}
@media (max-width: 980px) {
  .char-stats-label {
    min-width: 90px;
    font-size: 14px;
  }
  .char-stats-value {
    font-size: 14px;
  }
  .char-stats-input {
    width: 96px;
    padding: 5px 8px;
    font-size: 13px;
  }
  .stat-btn {
    width: 34px;
    height: 28px;
    font-size: 13px;
  }
  .stat-input-area {
    gap: 4px;
    padding-left: 4px;
  }
}
@media (max-width: 767px) {
  .char-stats-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px 0;
  }
  .char-stats-label {
    min-width: 0;
    width: 100%;
    font-size: 14px;
    line-height: 1.2;
  }
  .char-stats-value {
    margin-left: 0;
    width: 100%;
    text-align: left;
    font-size: 14px;
  }
  .stat-input-area {
    width: 100%;
    margin-left: 0;
    padding-left: 0;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 6px;
  }
  .char-stats-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    padding: 6px 8px;
    font-size: 13px;
  }
  .stat-btn {
    flex: 0 0 42px;
    width: 42px;
    height: 30px;
    font-size: 12px;
    padding: 0;
  }
  .char-stats-row .mu-input {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
}
@media (max-width: 479px) {
  .char-stats-card {
    padding: 0;
  }
  .char-stats-row {
    gap: 8px;
    padding: 9px 0;
  }
  .char-stats-label {
    font-size: 13px;
  }
  .char-stats-value {
    font-size: 13px;
  }
  .stat-input-area {
    gap: 4px;
  }
  .stat-btn {
    flex: 0 0 38px;
    width: 38px;
    height: 28px;
    font-size: 11px;
    border-radius: 5px;
  }
  .char-stats-input {
    padding: 5px 6px;
    font-size: 12px;
  }
}
.account-page-grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.account-characters-panel {
  min-width: 0;
}
.account-characters-empty {
  margin-top: 16px;
  color: #cdbb9a;
  font-size: 1rem;
}
@media (max-width: 991px) {
  .account-page-grid {
    grid-template-columns: 1fr;
  }
}
:root {
  --mu-filter-glow-color: #d2b478;
  --mu-filter-border: rgba(199, 168, 117, 0.45);
  --mu-filter-border-active: #c7a875;
  --mu-filter-bg: rgba(0, 0, 0, 0.12);
  --mu-filter-text: #f3dfb6;
  --mu-filter-size: 50px;
  --mu-filter-radius: 50%;
}
.mu-class-filter {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
.mu-class-filter__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.mu-class-filter__list--row {
  flex-wrap: nowrap;
}
.mu-class-filter__grid {
  display: grid;
  gap: 8px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}
.mu-class-filter__grid--4 {
  grid-template-columns: repeat(4, var(--mu-filter-size));
}
.mu-class-filter__btn {
  position: relative;
  width: var(--mu-filter-size);
  height: var(--mu-filter-size);
  padding: 0;
  border: none;
  border-radius: var(--mu-filter-radius);
  background: transparent;
  cursor: pointer;
  overflow: visible;
  z-index: 1;
  transition: transform 0.18s ease,
    filter 0.18s ease;
}
.mu-class-filter__btn:hover,
.mu-class-filter__btn.is-active {
  z-index: 50;
}
.mu-class-filter__btn:hover {
  transform: scale(1.04);
}
.mu-class-filter__btn:active {
  transform: scale(0.97);
}
.mu-class-filter__frame {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.24s ease,
    transform 0.24s ease;
}
.mu-class-filter__btn:hover .mu-class-filter__frame,
.mu-class-filter__btn.is-active .mu-class-filter__frame {
  opacity: 1;
  transform: scale(1);
}
.mu-class-filter__frame-img {
  width: 106%;
  height: 106%;
  display: block;
  object-fit: contain;
}
.mu-class-filter__content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6);
  transition: box-shadow 0.2s ease,
    background-color 0.2s ease;
}
.mu-class-filter__content::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  box-shadow: inset 0 0 20px rgba(210, 180, 120, 0.5);
}
.mu-class-filter__btn:hover .mu-class-filter__content {
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.7);
}
.mu-class-filter__btn:hover .mu-class-filter__content::after {
  opacity: 1;
  animation: muClassFilterPulseGlow 2s infinite ease-in-out;
}
.mu-class-filter__btn.is-active .mu-class-filter__content::after {
  opacity: 0;
  animation: none;
}
.mu-class-filter__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 50%;
  position: relative;
  z-index: 1;
}
.mu-class-filter__all-row {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.mu-class-filter__all-btn {
  min-width: 82px;
  height: 31px;
}
.tooltip {
  position: relative;
}
.tooltip::after {
  content: attr(data-title);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translate(-50%, 4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 9999;
  min-width: 72px;
  max-width: min(240px, calc(100vw - 32px));
  width: max-content;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  text-align: center;
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.25;
  color: #f0dfbf;
  background: linear-gradient(#413221 0%, #1c1a17 100%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(224, 191, 121, 0.95),
    inset 0 0 0 3px rgba(8, 10, 12, 0.98),
    inset 0 0 0 4px rgba(224, 191, 121, 0.28),
    inset 0 0 14px rgba(255, 210, 140, 0.03);
  will-change: opacity, transform;
  backface-visibility: hidden;
  transition: opacity 0.12s ease,
    transform 0.12s ease,
    visibility 0s linear 0.12s;
}
.tooltip:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.12s ease,
    transform 0.12s ease,
    visibility 0s linear 0s;
}
.tooltip:not([data-title])::after,
.tooltip[data-title=""]::after {
  display: none;
}
@media (max-width: 768px) {
  .tooltip::after {
    font-size: 11px;
    padding: 9px 12px;
    max-width: min(190px, calc(100vw - 24px));
  }
}
[data-sonner-toaster] {
  z-index: 99999 !important;
}
.mu-system-toast {
  --mu-toast-icon: url("/icons/info.png");
  position: relative !important;
  width: min(520px, calc(100vw - 32px)) !important;
  min-width: min(280px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  margin-top: 96px !important;
  padding: 13px 18px 13px 48px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 5px !important;
  color: #f0dfbf !important;
  font-family: "Cormorant SC", Georgia, serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.32 !important;
  text-align: left !important;
  background: radial-gradient(
      circle at 50% 0%,
      rgba(255, 220, 150, 0.09),
      transparent 58%
    ),
    linear-gradient(
      180deg,
      rgba(65, 50, 33, 0.94),
      rgba(28, 26, 23, 0.98)
    ) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.52),
    inset 0 0 0 1px rgba(224, 191, 121, 0.88),
    inset 0 0 0 3px rgba(8, 10, 12, 0.98),
    inset 0 0 0 4px rgba(224, 191, 121, 0.24),
    inset 0 0 16px rgba(255, 210, 140, 0.045) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 8px rgba(255, 220, 150, 0.1) !important;
  overflow: hidden !important;
}
.mu-system-toast::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 1px;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 226, 166, 0.38),
      transparent
    );
  pointer-events: none;
}
.mu-system-toast::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-image: var(--mu-toast-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.92;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9))
    drop-shadow(0 0 6px rgba(255, 220, 150, 0.16));
  pointer-events: none;
}
.mu-system-toast [data-icon],
.mu-system-toast [data-sonner-toast-icon] {
  display: none !important;
}
.mu-system-toast [data-content],
.mu-system-toast [data-title],
.mu-system-toast [data-description] {
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
}
.mu-system-toast [data-title] {
  font-weight: 800 !important;
}
.mu-system-toast--blue {
  --mu-toast-icon: url("/icons/info.png");
  color: #d9edf7 !important;
  background: radial-gradient(
      circle at 50% 0%,
      rgba(120, 190, 220, 0.13),
      transparent 58%
    ),
    linear-gradient(
      180deg,
      rgba(35, 60, 72, 0.92),
      rgba(18, 24, 29, 0.98)
    ) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.52),
    inset 0 0 0 1px rgba(135, 185, 205, 0.84),
    inset 0 0 0 3px rgba(8, 10, 12, 0.98),
    inset 0 0 0 4px rgba(135, 185, 205, 0.2),
    inset 0 0 16px rgba(120, 190, 220, 0.07) !important;
}
.mu-system-toast--green {
  --mu-toast-icon: url("/icons/check.png");
  color: #def3cf !important;
  background: radial-gradient(
      circle at 50% 0%,
      rgba(150, 210, 120, 0.13),
      transparent 58%
    ),
    linear-gradient(
      180deg,
      rgba(44, 67, 36, 0.92),
      rgba(15, 23, 13, 0.98)
    ) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.52),
    inset 0 0 0 1px rgba(155, 190, 115, 0.84),
    inset 0 0 0 3px rgba(8, 10, 12, 0.98),
    inset 0 0 0 4px rgba(155, 190, 115, 0.2),
    inset 0 0 16px rgba(150, 210, 120, 0.07) !important;
}
.mu-system-toast--red {
  --mu-toast-icon: url("/icons/denie.png");
  color: #f3d5ca !important;
  background: radial-gradient(
      circle at 50% 0%,
      rgba(210, 100, 80, 0.14),
      transparent 58%
    ),
    linear-gradient(
      180deg,
      rgba(72, 35, 30, 0.94),
      rgba(24, 10, 9, 0.98)
    ) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.52),
    inset 0 0 0 1px rgba(190, 115, 95, 0.84),
    inset 0 0 0 3px rgba(8, 10, 12, 0.98),
    inset 0 0 0 4px rgba(190, 115, 95, 0.2),
    inset 0 0 16px rgba(210, 100, 80, 0.07) !important;
}
.mu-system-toast--yellow {
  --mu-toast-icon: url("/icons/warn.png");
  color: #f4e2bd !important;
  background: radial-gradient(
      circle at 50% 0%,
      rgba(225, 180, 95, 0.14),
      transparent 58%
    ),
    linear-gradient(
      180deg,
      rgba(76, 58, 32, 0.94),
      rgba(26, 19, 10, 0.98)
    ) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.52),
    inset 0 0 0 1px rgba(214, 181, 120, 0.88),
    inset 0 0 0 3px rgba(8, 10, 12, 0.98),
    inset 0 0 0 4px rgba(214, 181, 120, 0.22),
    inset 0 0 16px rgba(225, 180, 95, 0.07) !important;
}
.mu-system-toast button {
  font-family: "Cormorant SC", Georgia, serif !important;
}
.mu-system-toast [data-close-button] {
  right: 7px !important;
  top: 7px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 0 !important;
  border: 1px solid rgba(224, 191, 121, 0.45) !important;
  background: linear-gradient(
      180deg,
      rgba(35, 26, 16, 0.95),
      rgba(8, 6, 4, 0.98)
    ) !important;
  color: #f0dfbf !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(0, 0, 0, 0.75) !important;
}
@media (max-width: 768px) {
  .mu-system-toast {
    width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
    margin-top: 72px !important;
    padding: 12px 14px 12px 44px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    border-radius: 4px !important;
  }
  .mu-system-toast::before {
    left: 13px;
    width: 21px;
    height: 21px;
  }
  .mu-system-toast::after {
    left: 14px;
    right: 14px;
  }
}
@media (max-width: 420px) {
  .mu-system-toast {
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
    margin-top: 62px !important;
    padding: 11px 12px 11px 40px !important;
    font-size: 12.5px !important;
    line-height: 1.28 !important;
  }
  .mu-system-toast::before {
    left: 11px;
    width: 20px;
    height: 20px;
  }
}
.mu-alert {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 14px;
  padding: 8px 10px 8px 39px;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #f0dfbf;
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  border: 1px solid rgba(255, 120, 90, 0.32);
  border-radius: 12px;
  background: linear-gradient(#413221 0%, #1c1a17 100%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(224, 191, 121, 0.95),
    inset 0 0 0 3px rgba(8, 10, 12, 0.98),
    inset 0 0 0 4px rgba(224, 191, 121, 0.28),
    inset 0 0 14px rgba(255, 210, 140, 0.04);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 8px rgba(255, 220, 150, 0.12);
}
.mu-alert::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background-image: url("/icons/info.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.9;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85))
    drop-shadow(0 0 5px rgba(255, 220, 150, 0.16));
  pointer-events: none;
}
.mu-alert > span {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}
.mu-alert--blue {
  color: #d9edf7;
  background: radial-gradient(
      circle at 50% 0%,
      rgba(120, 190, 220, 0.12),
      transparent 58%
    ),
    linear-gradient(
      180deg,
      rgba(35, 60, 72, 0.92),
      rgba(18, 24, 29, 0.96)
    );
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(135, 185, 205, 0.85),
    inset 0 0 0 3px rgba(8, 10, 12, 0.98),
    inset 0 0 0 4px rgba(135, 185, 205, 0.2),
    inset 0 0 16px rgba(120, 190, 220, 0.06);
}
.mu-alert--blue::before {
  background-image: url("/icons/info.png");
}
.mu-alert--green {
  color: #def3cf;
  background: radial-gradient(
      circle at 50% 0%,
      rgba(150, 210, 120, 0.12),
      transparent 58%
    ),
    linear-gradient(
      180deg,
      rgba(44, 67, 36, 0.92),
      rgba(15, 23, 13, 0.96)
    );
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(155, 190, 115, 0.85),
    inset 0 0 0 3px rgba(8, 10, 12, 0.98),
    inset 0 0 0 4px rgba(155, 190, 115, 0.2),
    inset 0 0 16px rgba(150, 210, 120, 0.06);
}
.mu-alert--green::before {
  background-image: url("/icons/check.png");
}
.mu-alert--red {
  color: #f3d5ca;
  background: radial-gradient(
      circle at 50% 0%,
      rgba(210, 100, 80, 0.13),
      transparent 58%
    ),
    linear-gradient(
      180deg,
      rgba(72, 35, 30, 0.92),
      rgba(24, 10, 9, 0.96)
    );
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(190, 115, 95, 0.85),
    inset 0 0 0 3px rgba(8, 10, 12, 0.98),
    inset 0 0 0 4px rgba(190, 115, 95, 0.2),
    inset 0 0 16px rgba(210, 100, 80, 0.06);
}
.mu-alert--red::before {
  background-image: url("/icons/denie.png");
}
.mu-alert--yellow {
  color: #f4e2bd;
  background: radial-gradient(
      circle at 50% 0%,
      rgba(225, 180, 95, 0.13),
      transparent 58%
    ),
    linear-gradient(
      180deg,
      rgba(76, 58, 32, 0.92),
      rgba(26, 19, 10, 0.96)
    );
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(214, 181, 120, 0.9),
    inset 0 0 0 3px rgba(8, 10, 12, 0.98),
    inset 0 0 0 4px rgba(214, 181, 120, 0.22),
    inset 0 0 16px rgba(225, 180, 95, 0.06);
}
.mu-alert--yellow::before {
  background-image: url("/icons/warn.png");
}
.mu-alert--no-icon {
  padding-left: 18px;
  padding-right: 18px;
}
.mu-alert--no-icon::before {
  display: none;
}
.mu-alert--compact {
  min-height: 38px;
  padding-top: 9px;
  padding-bottom: 9px;
  font-size: 13px;
}
.mu-alert--compact::before {
  width: 19px;
  height: 19px;
}
@media (max-width: 768px) {
  .mu-alert {
    min-height: 42px;
    padding: 10px 14px 10px 42px;
    font-size: 13px;
    line-height: 1.3;
    text-align: left;
  }
  .mu-alert::before {
    left: 13px;
    width: 20px;
    height: 20px;
  }
  .mu-alert--no-icon {
    padding-left: 14px;
    padding-right: 14px;
  }
}
:root {
  --header-top-offset: 0px;
  --banner-height: 550px;
  --top-panel-shift: 0px;
  --bottom-banner-panel-shift-y: clamp(22%, 3vw + 20%, 44%);
  --menu-panel-width: clamp(520px, 62vw, 1180px);
  --menu-panel-height: 83px;
  --menu-panel-shift-x: 0px;
  --menu-panel-shift-y: 8px;
  --menu-safe-side-space: 70px;
  --menu-center-gap: 112px;
  --menu-center-safe-gap: 112px;
  --menu-item-font-size: 19px;
  --menu-item-color: #f0e2bb;
  --menu-item-height: 58px;
  --menu-item-padding-x: 10px;
  --menu-group-gap: 14px;
  --menu-divider-width: 14px;
  --menu-divider-height: 38px;
  --menu-divider-shift-y: 0px;
  --header-side-btn-size: 105px;
  --header-left-btn-shift-x: -50px;
  --header-left-btn-shift-y: 8px;
  --header-right-btn-shift-x: 50px;
  --header-right-btn-shift-y: 8px;
  --bottom-logo-btn-width: 300px;
  --bottom-logo-btn-height: 80px;
  --bottom-logo-btn-shift-x: 0px;
  --bottom-logo-btn-shift-y: 55px;
  --bottom-logo-btn-bottom: clamp(0px, 0.6vw, 8px);
  --active-menu-height: 48px;
  --active-menu-min-width: 170px;
  --content-min-height: 0px;
  --z-banner: 10;
  --z-top-panel: 20;
  --z-bottom-panel: 90;
  --z-menu-panel: 100;
  --z-menu-links: 110;
  --z-side-buttons: 120;
  --z-bottom-logo-btn: 140;
  --z-header: 50;
  --z-after-fill: 1;
}
.page-shell {
  position: relative;
  width: 100%;
}
.mz-header {
  position: relative;
  width: 100%;
  height: calc(var(--header-top-offset) + var(--banner-height));
  overflow: visible;
  isolation: isolate;
  z-index: var(--z-header);
}
.mz-header__banner {
  position: absolute;
  top: var(--header-top-offset);
  left: 0;
  width: 100%;
  height: var(--banner-height);
  z-index: var(--z-banner);
  overflow: visible;
  background: #0c1722;
}
.mz-header__banner-picture {
  display: block;
  width: 100%;
  height: 100%;
}
.mz-header__banner-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.mz-header__banner-top-panel,
.mz-header__banner-bottom-panel {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
  overflow: visible;
}
.mz-header__banner-top-panel {
  top: 0;
  z-index: var(--z-top-panel);
  transform: translateY(var(--top-panel-shift));
}
.mz-header__banner-bottom-panel {
  bottom: 0;
  z-index: var(--z-bottom-panel);
  transform: translateY(var(--bottom-banner-panel-shift-y));
  transform-origin: center top;
}
.mz-header__banner-top-panel img,
.mz-header__banner-bottom-frame {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.mz-header__banner-bottom-wrap {
  position: relative;
  width: 100%;
  overflow: visible;
  pointer-events: none;
}
.mz-header__banner-bottom-wrap {
  position: relative;
}
.mz-header__banner-bottom-frame,
.mz-header__banner-bottom-frame-hover {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}
.mz-header__banner-bottom-frame {
  position: relative;
  z-index: 1;
}
.mz-header__banner-bottom-frame-hover {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.mz-header__bottom-logo-hitbox {
  position: absolute;
  left: 50%;
  bottom: var(--bottom-logo-btn-bottom);
  width: var(--bottom-logo-btn-width);
  height: var(--bottom-logo-btn-height);
  transform: translate(
    calc(-50% + var(--bottom-logo-btn-shift-x)),
    var(--bottom-logo-btn-shift-y)
  );
  z-index: calc(var(--z-bottom-logo-btn) + 5);
  pointer-events: auto;
  display: block;
  text-decoration: none;
  background: transparent;
  outline: none;
}
.mz-header__bottom-logo-hitbox::before,
.mz-header__bottom-logo-hitbox::after {
  display: none !important;
  content: none !important;
}
.mz-header__banner:has(.mz-header__bottom-logo-hitbox:hover)
  .mz-header__banner-bottom-frame-hover,
.mz-header__banner:has(.mz-header__bottom-logo-hitbox:focus-visible)
  .mz-header__banner-bottom-frame-hover {
  opacity: 1;
}
.mz-header__banner:has(.mz-header__bottom-logo-hitbox:active)
  .mz-header__banner-bottom-frame-hover {
  opacity: 0.82;
}
.mz-header__bottom-logo-hitbox:focus-visible {
  outline: none;
}
.mz-header__menu-layer {
  position: absolute;
  top: calc(var(--header-top-offset) + var(--menu-panel-shift-y));
  left: 0;
  width: 100%;
  height: var(--menu-panel-height);
  z-index: var(--z-menu-panel);
  pointer-events: none;
}
.mz-header__menu-panel {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--menu-panel-width);
  height: var(--menu-panel-height);
  transform: translateX(calc(-50% + var(--menu-panel-shift-x)));
  z-index: 1;
  pointer-events: none;
  background: url("/header/menu_panel.png") center center / 100% 100% no-repeat;
}
.mz-header__side-btn {
  position: absolute;
  top: 50%;
  width: var(--header-side-btn-size);
  height: var(--header-side-btn-size);
  z-index: var(--z-side-buttons);
  pointer-events: auto;
  transition: transform 0.22s ease;
  text-decoration: none;
}
.mz-header__side-btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.mz-header__side-btn--left {
  left: 50%;
  transform: translateX(calc(
      -50%
      - (var(--menu-panel-width) / 2)
      + (var(--header-side-btn-size) / 2)
      + var(--header-left-btn-shift-x)
    ))
    translateY(calc(-50% + var(--header-left-btn-shift-y)));
}
.mz-header__side-btn--right {
  left: 50%;
  transform: translateX(calc(
      -50%
      + (var(--menu-panel-width) / 2)
      - (var(--header-side-btn-size) / 2)
      + var(--header-right-btn-shift-x)
    ))
    translateY(calc(-50% + var(--header-right-btn-shift-y)));
}
.mz-header__side-btn--left:hover,
.mz-header__side-btn--left:focus-visible {
  transform: translateX(calc(
      -50%
      - (var(--menu-panel-width) / 2)
      + (var(--header-side-btn-size) / 2)
      + var(--header-left-btn-shift-x)
    ))
    translateY(calc(-50% + var(--header-left-btn-shift-y) - 3px));
}
.mz-header__side-btn--right:hover,
.mz-header__side-btn--right:focus-visible {
  transform: translateX(calc(
      -50%
      + (var(--menu-panel-width) / 2)
      - (var(--header-side-btn-size) / 2)
      + var(--header-right-btn-shift-x)
    ))
    translateY(calc(-50% + var(--header-right-btn-shift-y) - 3px));
}
.mz-header__nav-wrap {
  position: relative;
  z-index: var(--z-menu-links);
  width: var(--menu-panel-width);
  height: 100%;
  margin: 0 auto;
  pointer-events: auto;
}
.mz-header__nav-inner {
  position: relative;
  width: 100%;
  height: 100%;
  padding-inline: var(--menu-safe-side-space);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mz-nav {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.mz-nav__active {
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--active-menu-min-width);
  height: var(--active-menu-height);
  transform: translate3d(0, -50%, 0);
  transform-origin: center center;
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.25s ease;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  will-change: transform, width;
}
.mz-nav__active img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.28));
  user-select: none;
  -webkit-user-drag: none;
}
.mz-nav__list {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr)
    var(--menu-divider-width)
    minmax(0, 1fr)
    minmax(var(--menu-center-safe-gap), var(--menu-center-gap))
    minmax(0, 1fr)
    var(--menu-divider-width)
    minmax(0, 1fr);
  justify-content: stretch;
  align-items: center;
  column-gap: var(--menu-group-gap);
}
.mz-nav__list > li {
  min-width: 0;
}
.mz-nav__list > li:nth-child(1),
.mz-nav__list > li:nth-child(3),
.mz-nav__list > li:nth-child(5),
.mz-nav__list > li:nth-child(7) {
  justify-self: stretch;
  min-width: 0;
  display: flex;
  justify-content: center;
}
.mz-nav__list > li:nth-child(2),
.mz-nav__list > li:nth-child(6) {
  justify-self: center;
}
.mz-nav__list > li:nth-child(4) {
  justify-self: stretch;
  min-width: var(--menu-center-safe-gap);
}
.mz-nav__gap {
  width: 100%;
  height: 1px;
  pointer-events: none;
}
.mz-nav__divider {
  width: var(--menu-divider-width);
  height: var(--menu-divider-height);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(var(--menu-divider-shift-y));
  pointer-events: none;
}
.mz-nav__divider img {
  display: block;
  width: 150%;
  height: 150%;
  object-fit: contain;
  opacity: 0.9;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.mz-nav__item {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: var(--menu-item-height);
  padding-inline: var(--menu-item-padding-x);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  white-space: nowrap;
  text-decoration: none;
  text-align: center;
  font-family: "Cormorant SC", Georgia, serif;
  font-size: clamp(9px, var(--menu-item-font-size), 22px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--menu-item-color);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.95),
    0 -1px 0 rgba(255, 238, 190, 0.18),
    0 2px 3px rgba(0, 0, 0, 0.75);
  transition: color 0.22s ease,
    text-shadow 0.26s ease;
}
.mz-nav__item:focus-visible {
  outline: none;
}
.mz-nav__item.is-current,
.mz-nav__item:hover,
.mz-nav__item:focus-visible {
  color: #fff4d4;
}
.mz-nav__label {
  position: relative;
  top: -1px;
  display: block;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  transition: color 0.22s ease,
    text-shadow 0.28s ease;
}
.mz-nav__item:hover .mz-nav__label,
.mz-nav__item:focus-visible .mz-nav__label,
.mz-nav__item.is-current .mz-nav__label {
  text-shadow: 0 1px 0 rgba(0, 0, 0, 1),
    0 -1px 0 rgba(255, 245, 205, 0.28),
    0 2px 4px rgba(0, 0, 0, 0.85),
    0 0 8px rgba(255, 220, 150, 0.26),
    0 0 16px rgba(120, 210, 255, 0.16);
}
.mz-nav__center-control {
  position: absolute;
  left: 50%;
  top: 51%;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mz-lang-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 60px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  isolation: isolate;
  margin-bottom: 7px;
}
.mz-lang-switch img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.mz-lang-switch:focus-visible {
  outline: none;
}
@keyframes mzLangSwitchSheen {
  0% {
    transform: translateX(-140%) skewX(-14deg);
    opacity: 0;
  }
  12%,
  55% {
    opacity: 1;
  }
  100% {
    transform: translateX(140%) skewX(-14deg);
    opacity: 0;
  }
}
.mz-lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: max-content;
  max-width: 260px;
  padding: 10px 10px 9px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 20;
  transition: opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s ease;
  background: url("/ui/vertical_tooltip_bg.png") center / 100% 100% no-repeat;
}
.mz-lang-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mz-lang-dropdown__item {
  width: 100%;
  min-width: max-content;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  margin: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #eadfbe;
  text-align: left;
  cursor: pointer;
  transition: color 0.18s ease;
}
.mz-lang-dropdown__item + .mz-lang-dropdown__item {
  margin-top: 2px;
}
.mz-lang-dropdown__item:hover,
.mz-lang-dropdown__item:focus-visible,
.mz-lang-dropdown__item.is-current {
  background: transparent;
  box-shadow: none;
  outline: none;
  color: #fff2cd;
}
@keyframes mzFlagRingPulse {
  0% {
    filter: drop-shadow(0 0 0 rgba(120, 185, 255, 0))
      drop-shadow(0 0 0 rgba(120, 185, 255, 0));
  }
  50% {
    filter: drop-shadow(0 0 4px rgba(120, 185, 255, 0.28))
      drop-shadow(0 0 9px rgba(120, 185, 255, 0.18));
  }
  100% {
    filter: drop-shadow(0 0 0 rgba(120, 185, 255, 0))
      drop-shadow(0 0 0 rgba(120, 185, 255, 0));
  }
}
.mz-lang-dropdown__flag {
  position: relative;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mz-lang-dropdown__flag-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.2s ease,
    filter 0.2s ease;
}
.mz-lang-dropdown__flag-icon {
  position: relative;
  z-index: 1;
  width: 24px !important;
  height: 24px !important;
  object-fit: cover;
  border-radius: 50%;
  filter: brightness(0.86) saturate(0.95);
  transition: filter 0.2s ease;
}
.mz-lang-dropdown__item:hover .mz-lang-dropdown__flag-frame,
.mz-lang-dropdown__item:focus-visible .mz-lang-dropdown__flag-frame {
  transform: scale(1.03);
  animation: mzFlagRingPulse 1.6s ease-in-out infinite;
}
.mz-lang-dropdown__item:hover .mz-lang-dropdown__flag-icon,
.mz-lang-dropdown__item:focus-visible .mz-lang-dropdown__flag-icon {
  filter: brightness(0.98) saturate(1.04);
}
.mz-lang-dropdown__item.is-current .mz-lang-dropdown__flag-frame {
  filter: none;
}
.mz-lang-dropdown__label {
  display: inline-block;
  width: auto;
  font-size: 14px;
  line-height: 1.1;
  white-space: nowrap;
}
html[lang="es"],
html[lang="pt"] {
  --menu-panel-width: clamp(760px, 70vw, 1180px);
  --menu-center-gap: 132px;
  --menu-center-safe-gap: 132px;
  --menu-group-gap: 10px;
  --menu-item-font-size: 16px;
  --menu-item-padding-x: 4px;
}
html[lang="es"] .mz-nav__item,
html[lang="pt"] .mz-nav__item {
  letter-spacing: 0.025em;
}
.mz-header__after-fill {
  position: relative;
  z-index: var(--z-after-fill);
  min-height: var(--content-min-height);
}
.mz-mobile-header {
  display: none !important;
}
@media (max-width: 1366px) {
  :root {
    --banner-height: 500px;
    --menu-panel-width: clamp(620px, 78vw, 1020px);
    --menu-panel-height: 83px;
    --menu-safe-side-space: 90px;
    --menu-center-gap: 140px;
    --menu-center-safe-gap: 140px;
    --menu-group-gap: 12px;
    --menu-item-font-size: 16px;
    --menu-item-height: 54px;
    --menu-item-padding-x: 5px;
    --menu-divider-width: 12px;
    --menu-divider-height: 34px;
    --header-side-btn-size: 94px;
    --header-left-btn-shift-x: -34px;
    --header-right-btn-shift-x: 34px;
    --bottom-logo-btn-width: 300px;
  }
  .mz-lang-switch {
    width: 54px;
    height: 54px;
  }
  html[lang="es"],
  html[lang="pt"] {
    --menu-panel-width: clamp(700px, 82vw, 1040px);
    --menu-center-gap: 126px;
    --menu-center-safe-gap: 126px;
    --menu-group-gap: 8px;
    --menu-item-font-size: 14px;
    --menu-item-padding-x: 3px;
  }
  html[lang="es"] .mz-nav__item,
  html[lang="pt"] .mz-nav__item {
    letter-spacing: 0.018em;
  }
}
@media (max-width: 1180px) {
  :root {
    --banner-height: 460px;
    --menu-panel-width: clamp(560px, calc(100vw - 44px), 900px);
    --menu-panel-height: 78px;
    --menu-safe-side-space: 76px;
    --menu-center-gap: 104px;
    --menu-center-safe-gap: 104px;
    --menu-group-gap: 8px;
    --menu-item-font-size: 13px;
    --menu-item-height: 48px;
    --menu-item-padding-x: 3px;
    --menu-divider-width: 10px;
    --menu-divider-height: 30px;
    --header-side-btn-size: 76px;
    --header-left-btn-shift-x: -18px;
    --header-right-btn-shift-x: 18px;
    --header-left-btn-shift-y: 5px;
    --header-right-btn-shift-y: 5px;
    --bottom-banner-panel-shift-y: 28%;
    --bottom-logo-btn-width: 240px;
    --bottom-logo-btn-height: 66px;
    --bottom-logo-btn-bottom: 2px;
    --bottom-logo-btn-shift-y: -4px;
    --active-menu-height: 40px;
    --active-menu-min-width: 118px;
  }
  .mz-lang-switch {
    width: 48px;
    height: 48px;
  }
  html[lang="es"],
  html[lang="pt"] {
    --menu-panel-width: clamp(590px, calc(100vw - 36px), 930px);
    --menu-center-gap: 104px;
    --menu-center-safe-gap: 104px;
    --menu-group-gap: 6px;
    --menu-item-font-size: 11.5px;
    --menu-item-padding-x: 2px;
  }
  html[lang="es"] .mz-nav__item,
  html[lang="pt"] .mz-nav__item {
    letter-spacing: 0.008em;
  }
}
@media (max-width: 980px) {
  :root {
    --banner-height: 400px;
    --menu-panel-width: clamp(500px, calc(100vw - 28px), 760px);
    --menu-panel-height: 70px;
    --menu-safe-side-space: 60px;
    --menu-center-gap: 78px;
    --menu-center-safe-gap: 78px;
    --menu-group-gap: 6px;
    --menu-item-font-size: 10.5px;
    --menu-item-height: 42px;
    --menu-item-padding-x: 2px;
    --menu-divider-width: 8px;
    --menu-divider-height: 26px;
    --header-side-btn-size: 62px;
    --header-left-btn-shift-x: -10px;
    --header-right-btn-shift-x: 10px;
    --header-left-btn-shift-y: 2px;
    --header-right-btn-shift-y: 2px;
    --bottom-banner-panel-shift-y: 22%;
    --bottom-logo-btn-width: 205px;
    --bottom-logo-btn-height: 58px;
    --active-menu-height: 34px;
    --active-menu-min-width: 96px;
  }
  .mz-lang-switch {
    width: 42px;
    height: 42px;
  }
  .mz-nav__item {
    letter-spacing: 0.03em;
  }
  html[lang="es"],
  html[lang="pt"] {
    --menu-center-gap: 82px;
    --menu-center-safe-gap: 82px;
    --menu-group-gap: 4px;
    --menu-item-font-size: 9.5px;
    --menu-item-padding-x: 1px;
  }
  html[lang="es"] .mz-nav__item,
  html[lang="pt"] .mz-nav__item {
    letter-spacing: 0;
  }
}
@media (max-width: 820px) and (min-width: 601px) {
  :root {
    --banner-height: 360px;
    --menu-panel-width: calc(100vw - 18px);
    --menu-panel-height: 64px;
    --menu-panel-shift-y: 6px;
    --menu-safe-side-space: 50px;
    --menu-center-gap: 64px;
    --menu-center-safe-gap: 64px;
    --menu-group-gap: 4px;
    --menu-item-font-size: 9.5px;
    --menu-item-height: 38px;
    --menu-item-padding-x: 1px;
    --menu-divider-width: 7px;
    --menu-divider-height: 22px;
    --header-side-btn-size: 54px;
    --header-left-btn-shift-x: -6px;
    --header-right-btn-shift-x: 6px;
    --header-left-btn-shift-y: 0px;
    --header-right-btn-shift-y: 0px;
    --bottom-banner-panel-shift-y: 18%;
    --bottom-logo-btn-width: 180px;
    --bottom-logo-btn-height: 52px;
    --bottom-logo-btn-shift-y: -2px;
    --active-menu-height: 30px;
    --active-menu-min-width: 84px;
  }
  .mz-lang-switch {
    width: 36px;
    height: 36px;
  }
  .mz-nav__item {
    letter-spacing: 0.012em;
  }
  html[lang="es"],
  html[lang="pt"] {
    --menu-center-gap: 66px;
    --menu-center-safe-gap: 66px;
    --menu-group-gap: 3px;
    --menu-item-font-size: 8.8px;
    --menu-item-padding-x: 1px;
  }
  html[lang="es"] .mz-nav__item,
  html[lang="pt"] .mz-nav__item {
    letter-spacing: 0;
  }
}
@media (max-width: 932px) and (orientation: landscape) and (max-height: 520px) {
  :root {
    --banner-height: clamp(250px, 62vh, 330px);
    --menu-panel-width: clamp(390px, 65vw, 620px);
    --menu-panel-height: 62px;
    --menu-panel-shift-y: 6px;
    --menu-safe-side-space: 34px;
    --menu-center-gap: clamp(58px, 8vw, 82px);
    --menu-center-safe-gap: 58px;
    --menu-group-gap: 4px;
    --menu-item-font-size: 8.8px;
    --menu-item-height: 36px;
    --menu-item-padding-x: 1px;
    --menu-divider-width: 9px;
    --menu-divider-height: 28px;
    --menu-divider-shift-y: 0px;
    --header-side-btn-size: 62px;
    --header-left-btn-shift-y: 0px;
    --header-right-btn-shift-y: 0px;
    --header-side-btn-gap-to-panel: -10px;
    --bottom-banner-panel-shift-y: 14%;
    --bottom-logo-btn-width: 150px;
    --bottom-logo-btn-height: 44px;
    --bottom-logo-btn-shift-y: -2px;
    --active-menu-height: 30px;
    --active-menu-min-width: 78px;
    --mobile-header-bottom-width: 100vw;
    --mobile-header-bottom-height: 60px;
    --mobile-header-bottom-overlap: 30px;
    --mobile-header-bottom-content-gap: 10px;
    --mobile-bottom-logo-btn-width: 160px;
    --mobile-bottom-logo-btn-height: 54px;
    --mobile-bottom-logo-btn-shift-y: -1px;
  }
  .mz-header {
    height: calc(
      var(--header-top-offset) +
      var(--banner-height) +
      var(--mobile-header-bottom-overlap) +
      var(--mobile-header-bottom-content-gap)
    );
    overflow: visible;
  }
  .mz-header__banner {
    height: var(--banner-height);
    overflow: visible;
  }
  .mz-header__banner-image {
    object-position: center top;
  }
  .mz-header__menu-layer {
    top: calc(var(--header-top-offset) + var(--menu-panel-shift-y));
    height: var(--menu-panel-height);
    z-index: 220;
    overflow: visible;
  }
  .mz-header__menu-panel {
    width: var(--menu-panel-width);
    height: var(--menu-panel-height);
  }
  .mz-header__nav-wrap {
    width: var(--menu-panel-width);
    height: 100%;
    z-index: 230;
    overflow: visible;
  }
  .mz-header__nav-inner {
    padding-inline: var(--menu-safe-side-space);
    overflow: visible;
  }
  .mz-nav {
    z-index: 230;
    overflow: visible;
  }
  .mz-nav__list {
    grid-template-columns: minmax(0, 1fr)
      var(--menu-divider-width)
      minmax(0, 1fr)
      minmax(var(--menu-center-safe-gap), var(--menu-center-gap))
      minmax(0, 1fr)
      var(--menu-divider-width)
      minmax(0, 1fr);
    column-gap: var(--menu-group-gap);
    justify-content: stretch;
    align-items: center;
  }
  .mz-nav__list > li:nth-child(1),
  .mz-nav__list > li:nth-child(3),
  .mz-nav__list > li:nth-child(5),
  .mz-nav__list > li:nth-child(7) {
    justify-self: stretch;
    min-width: 0;
    display: flex;
    justify-content: center;
  }
  .mz-nav__list > li:nth-child(2),
  .mz-nav__list > li:nth-child(6) {
    justify-self: center;
  }
  .mz-nav__list > li:nth-child(4) {
    justify-self: stretch;
    min-width: var(--menu-center-safe-gap);
  }
  .mz-nav__item {
    width: 100%;
    min-width: 0;
    min-height: var(--menu-item-height);
    padding-inline: var(--menu-item-padding-x);
    justify-content: center;
    text-align: center;
    font-size: var(--menu-item-font-size);
    letter-spacing: 0.006em;
  }
  html[lang="es"],
  html[lang="pt"] {
    --menu-center-gap: 62px;
    --menu-center-safe-gap: 62px;
    --menu-group-gap: 3px;
    --menu-item-font-size: 8px;
    --menu-item-padding-x: 0px;
  }
  html[lang="es"] .mz-nav__item,
  html[lang="pt"] .mz-nav__item {
    letter-spacing: 0;
  }
  .mz-nav__divider {
    width: var(--menu-divider-width);
    height: var(--menu-divider-height);
    transform: translateY(var(--menu-divider-shift-y));
  }
  .mz-nav__divider img {
    opacity: 1;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55))
      drop-shadow(0 0 4px rgba(235, 205, 140, 0.12));
  }
  .mz-nav__center-control {
    z-index: 260;
    overflow: visible;
  }
  .mz-lang-switch {
    width: 32px;
    height: 32px;
  }
  .mz-lang-dropdown {
    z-index: 9999;
  }
  .mz-header__side-btn {
    width: var(--header-side-btn-size);
    height: var(--header-side-btn-size);
    z-index: 240;
  }
  .mz-header__side-btn--left {
    left: calc(
      50%
      - (var(--menu-panel-width) / 2)
      - var(--header-side-btn-size)
      - var(--header-side-btn-gap-to-panel)
    );
    transform: translateY(calc(-50% + var(--header-left-btn-shift-y)));
  }
  .mz-header__side-btn--right {
    left: calc(
      50%
      + (var(--menu-panel-width) / 2)
      + var(--header-side-btn-gap-to-panel)
    );
    right: auto;
    transform: translateY(calc(-50% + var(--header-right-btn-shift-y)));
  }
  .mz-header__side-btn--left:hover,
  .mz-header__side-btn--left:focus-visible {
    transform: translateY(calc(-50% + var(--header-left-btn-shift-y) - 3px));
  }
  .mz-header__side-btn--right:hover,
  .mz-header__side-btn--right:focus-visible {
    transform: translateY(calc(-50% + var(--header-right-btn-shift-y) - 3px));
  }
  .mz-header__banner-bottom-panel,
  .mz-header__bottom-logo-hitbox {
    display: none !important;
  }
  .mz-mobile-header {
    position: absolute;
    top: var(--header-top-offset);
    left: 0;
    right: 0;
    display: block !important;
    height: var(--banner-height);
    z-index: 80;
    pointer-events: none;
    overflow: visible !important;
    isolation: isolate;
  }
  .mz-mobile-header__top-panel,
  .mz-mobile-header__side-btn,
  .mz-mobile-header__drawer {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .mz-mobile-header__bottom-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--mobile-header-bottom-overlap) * -1);
    width: 100vw;
    height: var(--mobile-header-bottom-height);
    transform: none;
    z-index: 90;
    pointer-events: none;
    overflow: visible;
    background: url("/header/landscape_panel_header_btm.png")
      center center / 100% 100%
      no-repeat;
  }
  .mz-mobile-header__bottom-bg {
    display: none !important;
  }
  .mz-mobile-header__bottom-logo-hitbox {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--mobile-bottom-logo-btn-width);
    height: var(--mobile-bottom-logo-btn-height);
    transform: translate(
      -50%,
      calc(-50% + var(--mobile-bottom-logo-btn-shift-y))
    );
    z-index: 3;
    display: block;
    pointer-events: auto;
    text-decoration: none;
    border-radius: 999px;
    background: transparent;
    outline: none;
  }
  .mz-mobile-header__bottom-logo-hitbox::before {
    content: "";
    position: absolute;
    inset: 6px 12px;
    border-radius: inherit;
    opacity: 0;
    transform: scale(0.96);
    pointer-events: none;
    transition: opacity 0.25s ease,
      transform 0.25s ease,
      filter 0.25s ease;
    background: radial-gradient(
        circle at center,
        rgba(196, 214, 224, 0.1) 0%,
        rgba(165, 190, 204, 0.07) 30%,
        rgba(132, 156, 170, 0.04) 52%,
        transparent 78%
      );
    filter: blur(4px)
      drop-shadow(0 0 8px rgba(170, 195, 210, 0.08))
      drop-shadow(0 0 14px rgba(140, 165, 180, 0.04));
  }
  .mz-mobile-header__bottom-logo-hitbox:hover::before,
  .mz-mobile-header__bottom-logo-hitbox:focus-visible::before {
    opacity: 1;
    transform: scale(1.02);
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  :root {
    --banner-height: clamp(300px, 82vw, 390px);
    --mobile-banner-image-shift-y: 10px;
    --mobile-header-top-panel-width: 100%;
    --mobile-header-top-panel-height: 70px;
    --mobile-header-side-btn-size: 67px;
    --mobile-header-side-btn-top: clamp(17px, 3.2vw, 22px);
    --mobile-header-side-btn-x: clamp(28px, 8vw, 62px);
    --mobile-header-drawer-width: clamp(350px, 86vw, 570px);
    --mobile-header-drawer-ratio: 1318 / 180;
    --mobile-header-drawer-top: calc(var(--mobile-header-top-panel-height) - 9px);
    --mobile-header-bottom-width: min(100vw, 660px);
    --mobile-header-bottom-height: 70px;
    --mobile-header-bottom-overlap: 35px;
    --mobile-header-bottom-content-gap: 10px;
    --mobile-bottom-logo-btn-width: 190px;
    --mobile-bottom-logo-btn-height: 64px;
    --mobile-bottom-logo-btn-shift-y: -2px;
    --mobile-header-menu-btn-size: 33px;
    --mobile-header-title-gap: 36px;
    --mobile-header-title-size: clamp(13px, 3.55vw, 19px);
    --mobile-drawer-menu-gap: clamp(14px, 4vw, 34px);
    --mobile-drawer-row-gap: 4px;
    --mobile-flag-size: 25px;
    --mobile-flag-icon-size: 21px;
  }
  .mz-header {
    height: calc(
      var(--header-top-offset) +
      var(--banner-height) +
      var(--mobile-header-bottom-overlap) +
      var(--mobile-header-bottom-content-gap)
    );
    overflow: visible;
  }
  .mz-header__banner {
    height: var(--banner-height);
    overflow: visible;
    background: #0c1722;
  }
  .mz-header__banner-picture {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .mz-header__banner-image {
    display: block;
    width: 100%;
    height: calc(100% + var(--mobile-banner-image-shift-y));
    object-fit: cover;
    object-position: left top;
    transform: translateY(var(--mobile-banner-image-shift-y));
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }
  .mz-header__banner-top-panel,
  .mz-header__banner-bottom-panel,
  .mz-header__menu-layer,
  .mz-header__bottom-logo-hitbox {
    display: none !important;
  }
  .mz-mobile-header {
    position: absolute;
    top: var(--header-top-offset);
    left: 0;
    right: 0;
    display: block !important;
    height: var(--banner-height);
    z-index: calc(var(--z-menu-panel) + 20);
    pointer-events: none;
    overflow: visible !important;
    isolation: isolate;
  }
  .mz-mobile-header__top-panel {
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--mobile-header-top-panel-width);
    height: var(--mobile-header-top-panel-height);
    transform: translateX(-50%);
    z-index: 120;
    pointer-events: none;
    overflow: visible !important;
  }
  .mz-mobile-header__top-panel > img {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }
  .mz-mobile-header__title {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    font-family: "Cormorant SC", Georgia, serif;
    font-size: var(--mobile-header-title-size);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.052em;
    color: #f4e9c8;
    white-space: nowrap;
    pointer-events: none;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 1),
      0 -1px 0 rgba(255, 245, 205, 0.22),
      0 3px 5px rgba(0, 0, 0, 0.78);
  }
  .mz-mobile-header__title--left {
    right: auto;
    transform: translate(calc(-100% - var(--mobile-header-title-gap)), -50%);
  }
  .mz-mobile-header__title--right {
    right: auto;
    transform: translate(var(--mobile-header-title-gap), -50%);
  }
  .mz-mobile-header__menu-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--mobile-header-menu-btn-size);
    height: var(--mobile-header-menu-btn-size);
    transform: translate(-50%, -50%);
    z-index: 5;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    outline: none;
    transition: transform 0.22s ease,
      filter 0.22s ease;
  }
  .mz-mobile-header__menu-btn img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }
  .mz-mobile-header__menu-btn:hover,
  .mz-mobile-header__menu-btn:focus-visible {
    transform: translate(-50%, -50%) scale(1.04);
  }
  .mz-mobile-header.is-open .mz-mobile-header__menu-btn {
    filter: drop-shadow(0 0 8px rgba(255, 225, 160, 0.3))
      drop-shadow(0 0 14px rgba(94, 220, 238, 0.2));
  }
  .mz-mobile-header__side-btn {
    position: absolute;
    top: var(--mobile-header-side-btn-top);
    width: var(--mobile-header-side-btn-size);
    height: var(--mobile-header-side-btn-size);
    z-index: 130;
    pointer-events: auto;
    text-decoration: none;
    transition: transform 0.22s ease,
      filter 0.22s ease;
  }
  .mz-mobile-header__side-btn img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }
  .mz-mobile-header__side-btn--left {
    left: var(--mobile-header-side-btn-x);
  }
  .mz-mobile-header__side-btn--right {
    right: var(--mobile-header-side-btn-x);
  }
  .mz-mobile-header__side-btn--right img {
    transform: scaleX(-1);
  }
  .mz-mobile-header__side-btn:hover,
  .mz-mobile-header__side-btn:focus-visible {
    filter: drop-shadow(0 0 7px rgba(255, 224, 160, 0.24))
      drop-shadow(0 0 12px rgba(75, 210, 230, 0.13));
  }
  .mz-mobile-header__side-btn--left:hover,
  .mz-mobile-header__side-btn--left:focus-visible,
  .mz-mobile-header__side-btn--right:hover,
  .mz-mobile-header__side-btn--right:focus-visible {
    transform: translateY(-2px);
  }
  .mz-mobile-header__drawer {
    position: absolute;
    top: var(--mobile-header-drawer-top);
    left: 50%;
    width: var(--mobile-header-drawer-width);
    max-width: calc(100vw - 10px);
    aspect-ratio: var(--mobile-header-drawer-ratio);
    height: auto;
    transform: translateX(-50%) translateY(-14px);
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: visible !important;
    clip-path: none !important;
    transition: opacity 0.22s ease,
      visibility 0.22s ease,
      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .mz-mobile-header.is-open .mz-mobile-header__drawer {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .mz-mobile-header__drawer-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }
  .mz-mobile-header__drawer-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 7px 24px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--mobile-drawer-row-gap);
    overflow: visible !important;
  }
  .mz-mobile-header__menu-row {
    position: relative;
    z-index: 3;
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mobile-drawer-menu-gap);
    overflow: visible !important;
  }
  .mz-mobile-header__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 16px;
    text-decoration: none;
    font-family: "Cormorant SC", Georgia, serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.022em;
    color: #eadfbe;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 1),
      0 -1px 0 rgba(255, 238, 190, 0.15),
      0 2px 4px rgba(0, 0, 0, 0.8);
    transition: color 0.2s ease,
      text-shadow 0.22s ease,
      transform 0.22s ease;
  }
  .mz-mobile-header__link:hover,
  .mz-mobile-header__link:focus-visible,
  .mz-mobile-header__link.is-current {
    color: #fff2cd;
    outline: none;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 1),
      0 -1px 0 rgba(255, 245, 205, 0.26),
      0 2px 4px rgba(0, 0, 0, 0.86),
      0 0 8px rgba(255, 220, 150, 0.24),
      0 0 14px rgba(120, 210, 255, 0.14);
  }
  .mz-mobile-header__lang-row {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, 1.4vw, 8px);
    width: 100%;
    pointer-events: auto;
  }
  .mz-mobile-header__lang {
    position: relative;
    width: var(--mobile-flag-size);
    height: var(--mobile-flag-size);
    flex: 0 0 var(--mobile-flag-size);
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    outline: none;
    opacity: 0.74;
    transition: opacity 0.18s ease,
      transform 0.18s ease,
      filter 0.18s ease;
  }
  .mz-mobile-header__flag {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--mobile-flag-size);
    height: var(--mobile-flag-size);
  }
  .mz-mobile-header__flag-frame {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }
  .mz-mobile-header__flag-icon {
    position: relative;
    z-index: 1;
    width: var(--mobile-flag-icon-size) !important;
    height: var(--mobile-flag-icon-size) !important;
    object-fit: cover;
    border-radius: 50%;
    filter: brightness(0.86) saturate(0.95);
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    transition: filter 0.18s ease;
  }
  .mz-mobile-header__lang:hover,
  .mz-mobile-header__lang:focus-visible,
  .mz-mobile-header__lang.is-current {
    opacity: 1;
    transform: translateY(-1px) scale(1.04);
    filter: drop-shadow(0 0 4px rgba(120, 185, 255, 0.24))
      drop-shadow(0 0 8px rgba(255, 225, 160, 0.14));
  }
  .mz-mobile-header__lang:hover .mz-mobile-header__flag-icon,
  .mz-mobile-header__lang:focus-visible .mz-mobile-header__flag-icon,
  .mz-mobile-header__lang.is-current .mz-mobile-header__flag-icon {
    filter: brightness(0.98) saturate(1.04);
  }
  .mz-mobile-header__bottom-panel {
    position: absolute;
    left: 50%;
    bottom: calc(var(--mobile-header-bottom-overlap) * -1);
    width: var(--mobile-header-bottom-width);
    height: var(--mobile-header-bottom-height);
    transform: translateX(-50%);
    z-index: 70;
    pointer-events: none;
    overflow: visible;
  }
  .mz-mobile-header__bottom-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }
  .mz-mobile-header__bottom-logo-hitbox {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--mobile-bottom-logo-btn-width);
    height: var(--mobile-bottom-logo-btn-height);
    transform: translate(-50%, calc(-50% + var(--mobile-bottom-logo-btn-shift-y)));
    z-index: 3;
    display: block;
    pointer-events: auto;
    text-decoration: none;
    border-radius: 999px;
    background: transparent;
    outline: none;
  }
  .mz-mobile-header__bottom-logo-hitbox::before {
    content: "";
    position: absolute;
    inset: 6px 12px;
    border-radius: inherit;
    opacity: 0;
    transform: scale(0.96);
    pointer-events: none;
    transition: opacity 0.25s ease,
      transform 0.25s ease,
      filter 0.25s ease;
    background: radial-gradient(
        circle at center,
        rgba(196, 214, 224, 0.1) 0%,
        rgba(165, 190, 204, 0.07) 30%,
        rgba(132, 156, 170, 0.04) 52%,
        transparent 78%
      );
    filter: blur(4px)
      drop-shadow(0 0 8px rgba(170, 195, 210, 0.08))
      drop-shadow(0 0 14px rgba(140, 165, 180, 0.04));
  }
  .mz-mobile-header__bottom-logo-hitbox:hover::before,
  .mz-mobile-header__bottom-logo-hitbox:focus-visible::before {
    opacity: 1;
    transform: scale(1.02);
  }
}
@media (max-width: 430px) and (orientation: portrait) {
  :root {
    --banner-height: clamp(280px, 82vw, 360px);
    --mobile-banner-image-shift-y: 8px;
    --mobile-header-top-panel-height: 63px;
    --mobile-header-side-btn-size: clamp(54px, 14vw, 60px);
    --mobile-header-side-btn-top: clamp(17px, 4.8vw, 20px);
    --mobile-header-side-btn-x: clamp(18px, 7.5vw, 32px);
    --mobile-header-drawer-width: clamp(286px, 87vw, 374px);
    --mobile-header-drawer-ratio: 1318 / 245;
    --mobile-header-drawer-top: calc(var(--mobile-header-top-panel-height) - 8px);
    --mobile-header-bottom-height: 64px;
    --mobile-header-bottom-overlap: 32px;
    --mobile-header-bottom-content-gap: 10px;
    --mobile-bottom-logo-btn-width: clamp(145px, 42vw, 165px);
    --mobile-bottom-logo-btn-height: clamp(52px, 14vw, 58px);
    --mobile-bottom-logo-btn-shift-y: -1px;
    --mobile-header-menu-btn-size: clamp(28px, 8vw, 31px);
    --mobile-header-title-gap: clamp(25px, 7.2vw, 31px);
    --mobile-header-title-size: clamp(10px, 3.15vw, 14px);
    --mobile-drawer-menu-gap: clamp(7px, 2.7vw, 18px);
    --mobile-drawer-row-gap: 7px;
    --mobile-flag-size: clamp(21px, 5.4vw, 23px);
    --mobile-flag-icon-size: clamp(17px, 4.5vw, 19px);
  }
  .mz-mobile-header__drawer-content {
    padding: 6px 13px 5px;
  }
  .mz-mobile-header__link {
    font-size: 9px;
    min-height: 14px;
    letter-spacing: 0.01em;
  }
  .mz-mobile-header__lang-row {
    gap: clamp(3px, 1vw, 4px);
  }
}
:root {
  --hub-nav-max-width: 980px;
  --hub-nav-width: min(100%, var(--hub-nav-max-width));
  --hub-nav-height: 50px;
  --hub-nav-padding-x: 34px;
  --hub-nav-gap: 10px;
  --hub-nav-item-height: 42px;
  --hub-nav-item-padding-x: 10px;
  --hub-nav-item-gap: 8px;
  --hub-nav-icon-size: 23px;
  --hub-nav-font-size: 12px;
  --hub-nav-divider-width: 18px;
  --hub-nav-divider-height: 34px;
  --hub-nav-divider-shift-y: 4px;
  --hub-nav-active-height: 46px;
  --hub-nav-active-min-width: 104px;
  --hub-nav-active-shift-y: -1px;
}
.mz-hub-nav {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  z-index: 50;
  overflow: visible;
}
.mz-hub-nav__panel {
  position: relative;
  width: var(--hub-nav-width);
  max-width: var(--hub-nav-max-width);
  min-height: var(--hub-nav-height);
  padding: 0 var(--hub-nav-padding-x);
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("/ui/hub_bar_panel.png") center center / 100% 100% no-repeat;
  overflow: visible;
}
.mz-hub-nav__list {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0;
  height: var(--hub-nav-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hub-nav-gap);
  overflow: visible;
  scrollbar-width: none;
}
.mz-hub-nav__list::-webkit-scrollbar {
  display: none;
}
.mz-hub-nav__active {
  position: absolute;
  top: calc(50% + var(--hub-nav-active-shift-y));
  left: 0;
  width: var(--hub-nav-active-min-width);
  height: var(--hub-nav-active-height);
  transform: translate3d(0, -50%, 0);
  background: url("/ui/active_nav_menu.png") center center / 100% 100% no-repeat;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease;
}
.mz-hub-nav__item {
  position: relative;
  z-index: 2;
  min-width: 0;
  flex: 1 1 0;
  height: var(--hub-nav-item-height);
  padding: 0 var(--hub-nav-item-padding-x);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hub-nav-item-gap);
  white-space: nowrap;
  border: 0;
  background: transparent;
  color: #efe2bd;
  text-decoration: none;
  font-family: "Cormorant SC", Georgia, serif;
  font-size: var(--hub-nav-font-size);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.95),
    0 -1px 0 rgba(255, 238, 190, 0.18),
    0 2px 3px rgba(0, 0, 0, 0.75);
  cursor: pointer;
  transition: color 0.22s ease,
    text-shadow 0.25s ease,
    filter 0.25s ease,
    opacity 0.2s ease;
}
.mz-hub-nav__item:hover,
.mz-hub-nav__item:focus-visible,
.mz-hub-nav__item.is-active {
  color: #fff4d4;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 1),
    0 -1px 0 rgba(255, 245, 205, 0.28),
    0 2px 4px rgba(0, 0, 0, 0.85),
    0 0 8px rgba(255, 220, 150, 0.26);
  outline: none;
}
.mz-hub-nav__icon {
  width: var(--hub-nav-icon-size);
  height: var(--hub-nav-icon-size);
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
}
.mz-hub-nav__label {
  position: relative;
  top: 1px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mz-hub-nav__divider {
  position: relative;
  z-index: 2;
  width: var(--hub-nav-divider-width);
  height: var(--hub-nav-divider-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--hub-nav-divider-width);
  transform: translateY(var(--hub-nav-divider-shift-y));
  opacity: 0.9;
  pointer-events: none;
}
.mz-hub-nav__divider img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}
.mz-hub-nav__item.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.mz-hub-nav__item.is-disabled .mz-hub-nav__icon {
  filter: grayscale(0.3)
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
}
.mz-hub-nav__item--logout {
  color: #efe2bd;
}
.mz-hub-nav__item--logout:hover,
.mz-hub-nav__item--logout:focus-visible {
  color: #fff4d4;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 1),
    0 0 8px rgba(255, 220, 150, 0.28),
    0 0 16px rgba(120, 210, 255, 0.18);
}
@media (max-width: 1280px) {
  :root {
    --hub-nav-max-width: 920px;
    --hub-nav-height: 48px;
    --hub-nav-padding-x: 26px;
    --hub-nav-gap: 8px;
    --hub-nav-item-height: 40px;
    --hub-nav-item-padding-x: 8px;
    --hub-nav-item-gap: 7px;
    --hub-nav-icon-size: 21px;
    --hub-nav-font-size: 13px;
    --hub-nav-divider-width: 10px;
    --hub-nav-divider-height: 30px;
    --hub-nav-active-height: 42px;
    --hub-nav-active-min-width: 96px;
  }
}
@media (max-width: 1140px) {
  :root {
    --hub-nav-max-width: 840px;
    --hub-nav-height: 44px;
    --hub-nav-padding-x: 20px;
    --hub-nav-gap: 6px;
    --hub-nav-item-height: 36px;
    --hub-nav-item-padding-x: 6px;
    --hub-nav-item-gap: 6px;
    --hub-nav-icon-size: 19px;
    --hub-nav-font-size: 12px;
    --hub-nav-divider-width: 8px;
    --hub-nav-divider-height: 26px;
    --hub-nav-active-height: 38px;
    --hub-nav-active-min-width: 88px;
  }
}
@media (max-width: 980px) {
  :root {
    --hub-nav-max-width: 760px;
    --hub-nav-width: min(100%, var(--hub-nav-max-width));
    --hub-nav-height: 42px;
    --hub-nav-padding-x: 18px;
    --hub-nav-gap: 6px;
    --hub-nav-item-height: 30px;
    --hub-nav-item-padding-x: 6px;
    --hub-nav-item-gap: 5px;
    --hub-nav-icon-size: 18px;
    --hub-nav-font-size: 11px;
    --hub-nav-divider-width: 8px;
    --hub-nav-divider-height: 26px;
    --hub-nav-active-height: 32px;
    --hub-nav-active-min-width: 84px;
    --hub-nav-active-shift-y: -1px;
  }
  .mz-hub-nav {
    margin-bottom: 12px;
  }
  .mz-hub-nav__panel {
    justify-content: flex-start;
  }
  .mz-hub-nav__list {
    justify-content: flex-start;
  }
}
@media (max-width: 640px) {
  :root {
    --hub-nav-max-width: 100%;
    --hub-nav-width: 100%;
    --hub-nav-height: 38px;
    --hub-nav-padding-x: 14px;
    --hub-nav-gap: 5px;
    --hub-nav-item-height: 26px;
    --hub-nav-item-padding-x: 0;
    --hub-nav-item-gap: 0;
    --hub-nav-icon-size: 26px;
    --hub-nav-divider-width: 6px;
    --hub-nav-divider-height: 20px;
    --hub-nav-active-height: 28px;
    --hub-nav-active-min-width: 32px;
    --hub-nav-active-shift-y: 2px;
  }
  .mz-hub-nav {
    width: 100%;
    margin-bottom: 10px;
    padding: 0;
    overflow: visible;
  }
  .mz-hub-nav__panel {
    width: 100%;
    max-width: 100%;
    min-height: var(--hub-nav-height);
    height: var(--hub-nav-height);
    padding: 0 var(--hub-nav-padding-x);
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("/ui/hub_bar_panel.png") center center / 100% 100% no-repeat;
    overflow: visible;
  }
  .mz-hub-nav__list {
    width: 100%;
    height: var(--hub-nav-height);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--hub-nav-gap);
    overflow: visible;
    scrollbar-width: none;
  }
  .mz-hub-nav__item {
    flex: 0 0 auto;
    width: 28px;
    min-width: 28px;
    height: var(--hub-nav-item-height);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    letter-spacing: 0;
    overflow: visible;
  }
  .mz-hub-nav__icon {
    width: var(--hub-nav-icon-size);
    height: var(--hub-nav-icon-size);
  }
  .mz-hub-nav__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .mz-hub-nav__divider {
    width: var(--hub-nav-divider-width);
    height: var(--hub-nav-divider-height);
    flex: 0 0 var(--hub-nav-divider-width);
  }
  .mz-hub-nav__divider img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .mz-hub-nav__active {
    width: var(--hub-nav-active-min-width);
    height: var(--hub-nav-active-height);
  }
  .mz-hub-nav__item.tooltip::after {
    top: calc(100% + 10px);
  }
}
@media (max-width: 420px) {
  :root {
    --hub-nav-height: 37px;
    --hub-nav-padding-x: 12px;
    --hub-nav-gap: 4px;
    --hub-nav-item-height: 24px;
    --hub-nav-icon-size: 25px;
    --hub-nav-divider-width: 5px;
    --hub-nav-divider-height: 18px;
    --hub-nav-active-height: 26px;
    --hub-nav-active-min-width: 30px;
  }
  .mz-hub-nav {
    margin-bottom: 8px;
  }
  .mz-hub-nav__item {
    width: 26px;
    min-width: 26px;
  }
  .mz-hub-nav__label {
    top: 0;
  }
}
.gems-section {
  width: 100%;
  margin-bottom: 18px;
  padding: 14px 16px;
  background: transparent;
  border: 1px solid rgba(199, 168, 117, 0.18);
  border-radius: 0;
  box-shadow: inset 0 0 12px rgba(255, 220, 150, 0.035),
    0 4px 14px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
}
.gems-input.mu-input {
  width: 140px;
  margin-bottom: 10px;
}
.gems-rate {
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  color: #ecd7b9;
  opacity: 0.92;
}
.gems-rate__selected {
  margin-top: 4px;
}
.gems-rate strong {
  color: #fff1c8;
  font-weight: 700;
}
.gems-method-label {
  margin-bottom: 8px;
  font-family: "Cormorant SC", serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: #ecd7b9;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.95),
    0 0 6px rgba(236, 215, 185, 0.2);
}
.gems-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.gems-method {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px 0 0;
  border: 0;
  background: transparent;
  color: #ecd7b9;
  font-family: "Cormorant SC", serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.95),
    0 0 6px rgba(236, 215, 185, 0.16);
  transition: color 0.16s ease,
    filter 0.16s ease,
    opacity 0.16s ease;
}
.gems-method:hover,
.gems-method.is-active {
  color: #fff1c8;
}
.gems-method.is-active .gems-method__text {
  font-weight: 700;
}
.gems-method__check {
  position: relative;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: inline-block;
  background-color: transparent;
  background-image: url("/ui/check_box.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
}
.gems-method__check::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  background-color: transparent;
  background-image: url("/ui/check_icon.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.14s ease;
}
.gems-method.is-active .gems-method__check::after {
  opacity: 1;
}
.gems-method__text {
  position: relative;
  top: 1px;
}
.gems-payment-slot {
  width: 200px;
  min-height: 52px;
  margin-top: 14px;
}
.gems-paypal-wrap,
.gems-freekassa-wrap {
  width: 200px;
}
.gems-paypal-buttons {
  width: 200px;
  min-height: 35px;
}
.gems-paypal-buttons > div,
.gems-paypal-buttons iframe {
  width: 200px !important;
  max-width: 200px !important;
}
.gems-freekassa-btn {
  width: 200px;
  height: 35px;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 4px;
  background-image: url("/icons/freekassa.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  cursor: pointer;
  transition: opacity 0.16s ease,
    transform 0.12s ease,
    filter 0.16s ease;
}
.gems-freekassa-btn:hover:not(:disabled) {
  filter: brightness(1.08);
}
.gems-freekassa-btn:active:not(:disabled) {
  transform: scale(0.98);
}
.gems-freekassa-btn:disabled {
  opacity: 0.75;
  cursor: default;
}
.gems-loading {
  margin-top: 10px;
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(236, 215, 185, 0.82);
}
.gems-legal {
  width: 100%;
  margin-top: 18px;
  padding: 14px 16px;
  background: transparent;
  border: 1px solid rgba(199, 168, 117, 0.18);
  border-radius: 0;
  box-shadow: inset 0 0 12px rgba(255, 220, 150, 0.025),
    0 4px 14px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}
.gems-legal__text {
  white-space: pre-line;
  margin-bottom: 12px;
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(236, 215, 185, 0.86);
}
.gems-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.gems-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  color: #ecd7b9;
  text-decoration: none;
  font-family: "Cormorant SC", serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.95),
    0 0 6px rgba(236, 215, 185, 0.18);
  transition: color 0.16s ease,
    filter 0.16s ease,
    transform 0.16s ease;
}
.gems-contact-btn:hover {
  color: #fff1c8;
  filter: brightness(1.08);
}
.gems-contact-btn:active {
  transform: translateY(1px);
}
.gems-contact-btn__icon-frame {
  position: relative;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-image: url("/ui/button_round_brown_3.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.55));
}
.gems-contact-btn__icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.75));
}
.gems-contact-btn__label {
  position: relative;
  top: 1px;
}
@media (max-width: 640px) {
  .gems-page {
    max-width: 100%;
  }
  .gems-page__header {
    margin-bottom: 14px;
  }
  .gems-section {
    padding: 12px;
  }
  .gems-input.mu-input {
    width: 100%;
  }
  .gems-methods {
    gap: 10px;
  }
  .gems-method {
    font-size: 14px;
  }
  .gems-method__check {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }
  .gems-method__check::after {
    width: 17px;
    height: 17px;
  }
  .gems-paypal-buttons {
    max-width: 140px;
  }
  .gems-freekassa-btn {
    width: 200px;
    max-width: 100%;
  }
  .gems-legal {
    padding: 12px;
  }
  .gems-contact {
    gap: 12px;
  }
  .gems-contact-btn__icon-frame {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
  .gems-contact-btn__icon {
    width: 18px;
    height: 18px;
  }
  .gems-contact-btn {
    font-size: 14px;
  }
}
.mu-items-page-message {
  color: #f3dfb6;
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  line-height: 1.3;
  margin: 0;
}
.exchange-panel {
  width: 100%;
  margin-bottom: 18px;
}
.exchange-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.exchange-action-btn {
  margin: 0;
}
.exchange-text {
  color: rgba(236, 215, 185, 0.86);
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
}
.exchange-warning {
  margin-top: 8px;
  color: #ff7b7b;
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.exchange-message {
  margin: 0;
  color: #f3dfb6;
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 400;
}
.exchange-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
.character-profile-page--dashboard .mu-items-grid-wrap--exchange {
  width: 100%;
  max-width: 100%;
  padding: 5px 0 0;
  box-sizing: border-box;
  overflow: visible;
}
.character-profile-page--dashboard .mu-items-grid--exchange {
  --mu-card-width: 150px;
  --mu-card-gap-x: 12px;
  --mu-card-gap-y: 18px;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(var(--mu-card-width), var(--mu-card-width))
  );
  column-gap: var(--mu-card-gap-x);
  row-gap: var(--mu-card-gap-y);
  justify-content: center;
  justify-items: center;
  box-sizing: border-box;
  overflow: visible;
}
.character-side-panel__title,
.character-panel-title {
  position: relative;
  color: #f2dfb6;
  text-transform: uppercase;
  text-shadow: 0 2px 10px #000c;
  overflow-wrap: anywhere;
  min-width: 0;
  margin-bottom: 12px;
  padding-bottom: 8px;
  font-family: Cormorant SC, serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.05;
  border-bottom: none;
}
.character-side-panel__title::after,
.character-panel-title::after {
  content: "";
  position: absolute;
  left: -12px;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(143, 109, 73, 0.50), transparent);
  box-shadow: 0 0 12px rgba(143, 109, 73, 0.08);
}
.character-side-btn__label,
.character-main-card__class,
.character-main-card__name,
.character-main-card__row,
.character-main-card__row strong,
.character-stats-item span,
.character-stats-item strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: "Cormorant SC", serif;
}
.cp-section-title {
  position: relative;
  color: #f2dfb6;
  text-shadow: 0 2px 10px #000c;
  overflow-wrap: anywhere;
  min-width: 0;
  margin-bottom: 12px;
  padding-bottom: 8px;
  font-family: "Cormorant SC", serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.05;
  border-bottom: none;
}
.cp-section-title::after {
  content: "";
  position: absolute;
  left: -12px;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(143, 109, 73, 0.50), transparent);
  box-shadow: 0 0 12px rgba(143, 109, 73, 0.08);
}
.account-shell {
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: center;
  padding: 12px 10px 48px;
  margin: 0;
  box-sizing: border-box;
}
.account-shell__frame {
  --account-ui-font: "Cormorant SC", serif;
  --account-frame-width: 1260px;
  --account-hud-width: 99.5%;
  --account-hud-left: 0.25%;
  --account-hud-height: 92px;
  --account-hud-overlap: -28px;
  --account-content-width: 98.4%;
  --account-content-left: 0.8%;
  --account-body-padding-x: 32px;
  --account-body-padding-top: 25px;
  --account-body-padding-bottom: 40px;
  --account-topbar-safe-right: 48px;
  --topbar-cut: 34px;
  position: relative;
  width: min(var(--account-frame-width), 100%);
  max-width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: visible;
}
.account-shell__hud-frame {
  position: relative;
  z-index: 5;
  width: var(--account-hud-width);
  min-height: var(--account-hud-height);
  left: var(--account-hud-left);
  margin: 0 0 var(--account-hud-overlap);
  padding: 0;
  box-sizing: border-box;
  overflow: visible;
  background: none;
  isolation: isolate;
}
.account-shell__hud-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("/ui/hud_panel.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
.account-shell__hud-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background-image: url("/ui/hud_panel.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
.account-shell__head {
  position: relative;
  min-height: var(--account-hud-height);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 0 10px 52px;
  box-sizing: border-box;
  overflow: visible !important;
}
.account-shell__head::before,
.account-shell__head::after {
  display: none;
  content: none;
}
.account-shell__title {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 38%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  font-family: var(--account-ui-font);
  line-height: 1;
  text-align: left;
  white-space: nowrap;
  overflow: visible !important;
}
.account-shell__title::after {
  display: none;
  content: none;
}
.account-shell__title-inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  min-width: 0;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.account-shell__title-inner::before {
  content: "";
  position: absolute;
  left: 32px;
  right: 0;
  bottom: -7px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
      90deg,
      rgba(126, 88, 49, 0.08),
      rgba(224, 176, 121, 0.46),
      rgba(255, 235, 182, 0.32),
      transparent
    );
  opacity: 0.9;
}
.account-shell__title-inner::after {
  display: none;
  content: none;
}
.account-shell__title-icon {
  position: relative;
  z-index: 2;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: block;
  object-fit: contain;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: translateY(-1px);
  filter: drop-shadow(0 1px 0 rgba(82, 52, 25, 0.95))
    drop-shadow(0 2px 5px rgba(0, 0, 0, 0.65))
    drop-shadow(0 0 6px rgba(224, 176, 121, 0.18));
}
.account-shell__title-inner > span {
  position: relative;
  z-index: 2;
  display: inline-block;
  min-width: 0;
  margin: 0;
  font-family: var(--account-ui-font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(
      180deg,
      #fff9de 0%,
      #f4d894 36%,
      #c58a4a 68%,
      #6b4024 100%
    );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0.25px rgba(255, 247, 222, 0.18);
  filter: drop-shadow(0 1px 0 rgba(82, 52, 25, 0.95))
    drop-shadow(0 2px 7px rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 5px rgba(224, 176, 121, 0.12));
}
.account-shell,
.account-shell__frame,
.account-shell__hud-frame,
.account-shell__head,
.account-shell__title,
.account-shell__title-inner,
.account-shell__topbar,
.account-shell__topbar .account-topbar,
.account-shell__topbar .account-topbar__inner,
.account-shell__topbar .account-topbar-elements,
.account-shell__topbar .account-topbar__item,
.account-shell__topbar .account-topbar__tip,
.account-shell__topbar .account-topbar__login {
  overflow: visible !important;
}
.account-shell__topbar {
  position: relative;
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  max-width: min(860px, 74%);
  padding: 9px 18px 10px 22px;
  margin: 0 var(--account-topbar-safe-right) 0 auto;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
  overflow: visible !important;
  isolation: auto;
}
.account-shell__topbar::before {
  content: "";
  position: absolute;
  top: -8px;
  right: -33px;
  bottom: 0px;
  left: -8px;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(88 68 47) 0%, rgb(19 14 12) 100%);
  box-shadow: inset 0 1px 0 rgba(230, 181, 112, 0.1),
    inset 0 -1px 0 rgba(92, 58, 30, 0.18),
    0 4px 10px rgba(0, 0, 0, 0.18);
  clip-path: polygon(
      var(--topbar-cut) 0,
      100% 0,
      100% 100%,
      0 100%
    );
}
.account-shell__topbar::after {
  content: "";
  position: absolute;
  top: -8px;
  right: -33px;
  bottom: 0px;
  left: -8px;
  pointer-events: none;
  clip-path: polygon(
      var(--topbar-cut) 0,
      100% 0,
      100% 100%,
      0 100%
    );
  background: linear-gradient(
      90deg,
      rgba(255, 238, 184, 0.18) 0%,
      rgba(224, 176, 121, 0.55) 36%,
      rgba(255, 238, 184, 0.72) 58%,
      rgba(108, 72, 38, 0.42) 100%
    )
    var(--topbar-cut) 0 /
    calc(100% - var(--topbar-cut)) 1px
    no-repeat,

    linear-gradient(
      180deg,
      rgba(255, 238, 184, 0.65) 0%,
      rgba(224, 176, 121, 0.45) 45%,
      rgba(108, 72, 38, 0.42) 100%
    )
    100% 0 /
    1px 100%
    no-repeat,

    linear-gradient(
      90deg,
      rgba(108, 72, 38, 0.44) 0%,
      rgba(224, 176, 121, 0.46) 44%,
      rgba(255, 238, 184, 0.28) 100%
    )
    0 100% /
    100% 1px
    no-repeat,

    linear-gradient(
      to bottom right,
      transparent calc(50% - 1.2px),
      rgba(255, 238, 184, 0.75) calc(50% - 0.45px),
      rgba(224, 176, 121, 0.68) 50%,
      rgba(108, 72, 38, 0.56) calc(50% + 0.45px),
      transparent calc(50% + 1.2px)
    )
    0 0 /
    var(--topbar-cut) 100%
    no-repeat;
  filter: drop-shadow(0 0 3px rgba(224, 176, 121, 0.16));
}
.account-shell__topbar > * {
  position: relative;
  min-width: 0;
  max-width: 100%;
}
.account-shell__topbar .account-topbar,
.account-shell__topbar .account-topbar__inner {
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.account-shell__topbar .account-topbar-elements {
  width: auto !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0 !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.account-shell__topbar .account-topbar__item {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px;
  min-width: 0;
  padding: 0 13px;
  font-family: var(--account-ui-font);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: #d8b982;
  white-space: nowrap;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: 0 1px 0 rgba(42, 24, 10, 0.95),
    0 2px 5px rgba(0, 0, 0, 0.68),
    0 0 5px rgba(224, 176, 121, 0.12);
  transition: color 0.18s ease,
    text-shadow 0.18s ease,
    filter 0.18s ease;
  overflow: visible !important;
}
.account-shell__topbar .account-topbar__item:first-child {
  padding-left: 0;
}
.account-shell__topbar .account-topbar__item:last-child {
  padding-right: 0;
}
.account-shell__topbar .account-topbar__item:hover,
.account-shell__topbar a:hover,
.account-shell__topbar button:hover {
  color: #efd7a5;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: 0 1px 0 rgba(42, 24, 10, 0.95),
    0 2px 5px rgba(0, 0, 0, 0.7),
    0 0 8px rgba(224, 176, 121, 0.18);
}
.account-shell__topbar a::before,
.account-shell__topbar a::after,
.account-shell__topbar a:hover::before,
.account-shell__topbar a:hover::after,
.account-shell__topbar button::before,
.account-shell__topbar button::after,
.account-shell__topbar button:hover::before,
.account-shell__topbar button:hover::after {
  display: none;
}
.account-shell__topbar .account-topbar__item + .account-topbar__item::before,
.account-shell__topbar .account-topbar__item + .account-topbar__item::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1px;
  transform: translateY(-50%)
    rotate(14deg);
  transform-origin: center center;
  pointer-events: none;
  background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(91, 62, 36, 0.12) 10%,
      rgba(224, 176, 121, 0.42) 50%,
      rgba(91, 62, 36, 0.12) 90%,
      transparent 100%
    );
  box-shadow: 0 0 4px rgba(224, 176, 121, 0.1);
}
.account-shell__topbar .account-topbar__item + .account-topbar__item::before {
  left: 0;
  height: 25px;
}
.account-shell__topbar .account-topbar__item + .account-topbar__item::after {
  left: 5px;
  height: 15px;
  opacity: 0.86;
}
.account-shell__topbar .account-topbar__tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible !important;
}
.account-shell__topbar .account-topbar__tip--icon-only {
  gap: 0;
}
.account-shell__topbar .account-topbar__button {
  appearance: none;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  background: transparent;
  border: 0;
  outline: none;
  box-shadow: none;
}
.account-shell__topbar .account-topbar__button:focus,
.account-shell__topbar .account-topbar__tip:focus {
  outline: none;
}
.account-shell__topbar .account-topbar__button:focus-visible,
.account-shell__topbar .account-topbar__tip:focus-visible {
  filter: drop-shadow(0 0 5px rgba(224, 176, 121, 0.22));
}
.account-shell__topbar .account-topbar__login {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  overflow: visible !important;
}
.account-shell__topbar .account-topbar__icon,
.account-shell__topbar .account-topbar__status-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex: 0 0 32px;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 1px 0 rgba(42, 24, 10, 0.95))
    drop-shadow(0 2px 5px rgba(0, 0, 0, 0.64))
    drop-shadow(0 0 5px rgba(224, 176, 121, 0.13));
  opacity: 1;
  transition: filter 0.18s ease,
    transform 0.18s ease;
}
.account-shell__topbar .account-topbar__currency-icon {
  width: 35px;
  height: 35px;
  flex-basis: 35px;
}
.account-shell__topbar .account-topbar__vote-icon {
  width: 35px;
  height: 35px;
  flex-basis: 35px;
}
.account-shell__topbar .account-topbar__vip-icon,
.account-shell__topbar .account-topbar__invis-icon {
  width: 35px;
  height: 35px;
  flex-basis: 35px;
}
.account-shell__topbar .account-topbar__status-icon {
  width: 35px;
  height: 35px;
  flex-basis: 35px;
}
.account-shell__topbar .account-topbar__item:hover .account-topbar__icon,
.account-shell__topbar .account-topbar__item:hover .account-topbar__status-icon,
.account-shell__topbar .account-topbar__tip:focus .account-topbar__icon,
.account-shell__topbar .account-topbar__tip:focus .account-topbar__status-icon {
  filter: drop-shadow(0 1px 0 rgba(42, 24, 10, 0.95))
    drop-shadow(0 2px 5px rgba(0, 0, 0, 0.68))
    drop-shadow(0 0 8px rgba(224, 176, 121, 0.24));
  transform: translateY(-1px);
}
.account-shell__topbar .account-topbar__icon--active,
.account-shell__topbar .account-topbar__icon--inactive,
.account-shell__topbar .account-topbar__icon--online,
.account-shell__topbar .account-topbar__icon--offline {
  opacity: 1;
}
.account-shell__topbar .account-topbar__amount,
.account-shell__topbar .account-topbar__login-name,
.account-shell__topbar .account-topbar__value,
.account-shell__topbar strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f1d8a4;
  font-family: var(--account-ui-font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(42, 24, 10, 0.95),
    0 2px 5px rgba(0, 0, 0, 0.65),
    0 0 6px rgba(224, 176, 121, 0.16);
}
.account-shell__topbar .account-topbar__login-name {
  max-width: 130px;
  color: #e3c78d;
}
.account-shell__topbar .tooltip {
  position: relative;
  z-index: 50;
  overflow: visible !important;
}
.account-shell__topbar .tooltip::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 2px);
  transform: translate(-50%, 4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 52;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 7px solid rgba(224, 191, 121, 0.95);
  will-change: opacity, transform;
  backface-visibility: hidden;
  transition: opacity 0.12s ease,
    transform 0.12s ease,
    visibility 0s linear 0.12s;
}
.account-shell__topbar .tooltip::after {
  content: attr(data-title);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translate(-50%, 4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 51;
  min-width: 72px;
  max-width: min(260px, calc(100vw - 32px));
  width: max-content;
  white-space: pre-line;
  overflow-wrap: break-word;
  word-break: normal;
  text-align: center;
  padding: 10px 14px;
  font-family: var(--account-ui-font);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  color: #f0dfbf;
  background: linear-gradient(#413221 0%, #1c1a17 100%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(224, 191, 121, 0.95),
    inset 0 0 0 3px rgba(8, 10, 12, 0.98),
    inset 0 0 0 4px rgba(224, 191, 121, 0.28),
    inset 0 0 14px rgba(255, 210, 140, 0.03);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9),
    0 0 6px rgba(224, 176, 121, 0.14);
  will-change: opacity, transform;
  backface-visibility: hidden;
  transition: opacity 0.12s ease,
    transform 0.12s ease,
    visibility 0s linear 0.12s;
}
.account-shell__topbar .tooltip:hover::before,
.account-shell__topbar .tooltip:hover::after,
.account-shell__topbar .tooltip:focus::before,
.account-shell__topbar .tooltip:focus::after,
.account-shell__topbar .tooltip:focus-within::before,
.account-shell__topbar .tooltip:focus-within::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.12s ease,
    transform 0.12s ease,
    visibility 0s linear 0s;
}
.account-shell__topbar .tooltip:not([data-title])::before,
.account-shell__topbar .tooltip:not([data-title])::after,
.account-shell__topbar .tooltip[data-title=""]::before,
.account-shell__topbar .tooltip[data-title=""]::after {
  display: none !important;
  content: none !important;
}
.account-shell__content-frame {
  position: relative;
  z-index: 2;
  width: var(--account-content-width);
  min-height: 1040px;
  height: auto;
  left: var(--account-content-left);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: visible;
  background-image: url("/ui/content_frame.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
}
.account-shell__content-frame > * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.account-shell__body {
  position: relative;
  z-index: 3;
  width: 100%;
  min-height: 970px;
  height: auto;
  padding: var(--account-body-padding-top)
    var(--account-body-padding-x)
    var(--account-body-padding-bottom);
  box-sizing: border-box;
  overflow: visible;
}
.account-shell__body > * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.account-shell__content-frame .layout-grid {
  display: grid;
  grid-template-columns: minmax(240px, 280px)
    minmax(0, 1fr)
    minmax(240px, 280px);
  gap: 20px;
  width: 100%;
  max-width: 100%;
  padding: 0;
  box-sizing: border-box;
  height: auto;
  min-height: 0;
  max-height: none;
}
.account-shell__content-frame .layout-grid > * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.character-profile-page,
.character-profile-page--dashboard,
.character-profile-shell,
.account-page-grid,
.account-characters-panel,
.cp-character-page {
  box-sizing: border-box;
}
.character-profile-page,
.character-profile-page--dashboard,
.character-profile-shell,
.account-page-grid,
.account-characters-panel,
.cp-character-page,
.cp-character-layout {
  overflow: visible;
}
.character-profile-page--dashboard {
  width: 100%;
  min-width: 0;
  padding: 18px 0 22px;
  overflow-x: hidden;
}
.character-profile-shell {
  width: 100%;
  min-width: 0;
  margin: 0 auto;
}
.account-page-grid {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.account-characters-panel {
  min-width: 0;
}
.cp-side-nav {
  --cp-nav-icon-size: 56px;
  --cp-nav-icon-img-size: 27px;
  --cp-nav-text-size: 14px;
  --cp-nav-long-text-size: 13px;
  --cp-nav-tab-min-h: 64px;
  --cp-nav-tab-gap: 12px;
  --cp-nav-tab-pad-y: 6px;
  --cp-nav-tab-pad-x: 8px;
  align-self: start;
  width: 100%;
  min-width: 0;
  padding: 8px 0;
}
.cp-side-nav-inner {
  position: relative;
  padding: 22px 0 22px 18px;
  margin-top: 18px;
}
.cp-side-nav-inner::before,
.cp-side-nav-inner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 14px;
  height: 1px;
  pointer-events: none;
}
.cp-side-nav-inner::before {
  top: 0;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(193, 152, 102, 0.52),
      transparent
    );
  box-shadow: 0 0 10px rgba(193, 152, 102, 0.1);
}
.cp-tabs-list {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cp-side-tab {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: var(--cp-nav-tab-min-h);
  display: grid;
  grid-template-columns: var(--cp-nav-icon-size) minmax(0, 1fr);
  align-items: center;
  gap: var(--cp-nav-tab-gap);
  padding: var(--cp-nav-tab-pad-y)
    var(--cp-nav-tab-pad-x)
    var(--cp-nav-tab-pad-y)
    0;
  margin: 0;
  border: 0;
  outline: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  font-family: "Cormorant SC", serif;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.24s ease,
    opacity 0.24s ease,
    filter 0.24s ease;
}
button.cp-side-tab {
  border: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
}
button.cp-side-tab:focus,
button.cp-side-tab:focus-visible,
.cp-side-tab:focus,
.cp-side-tab:focus-visible {
  outline: none;
}
button.cp-side-tab:disabled {
  color: inherit;
  opacity: 1;
}
.cp-side-tab:hover {
  transform: translateX(2px);
}
.cp-side-tab.is-disabled {
  pointer-events: none;
  opacity: 0.46;
  filter: grayscale(0.1);
}
.cp-side-tab.is-active {
  opacity: 1;
}
.cp-side-tab__icon {
  position: relative;
  width: var(--cp-nav-icon-size);
  height: var(--cp-nav-icon-size);
  min-width: var(--cp-nav-icon-size);
  display: grid;
  place-items: center;
  isolation: isolate;
}
.cp-side-tab__icon-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("/ui/tab_romb2.svg")
    center / contain
    no-repeat;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.34));
  transition: transform 0.45s ease,
    filter 0.45s ease,
    opacity 0.45s ease;
}
.cp-side-tab__icon-glow {
  position: absolute;
  inset: -2px;
  z-index: 0;
  background: url("/ui/tab_romb2.svg")
    center / contain
    no-repeat;
  opacity: 0;
  transform: scale(1.01);
  pointer-events: none;
  transition: opacity 0.45s ease,
    transform 0.45s ease,
    filter 0.45s ease;
}
.cp-side-tab__icon-edge {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease,
    transform 0.45s ease,
    filter 0.45s ease;
}
.cp-side-tab__icon-edge::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      135deg,
      #694f29a1 0%,
      #ab87334d 26%,
      #3d331f73 50%,
      #4332238c 74%,
      #3f3817bd 100%
    );
  -webkit-mask: url("/ui/tab_romb2.svg")
    center / contain
    no-repeat;
  mask: url("/ui/tab_romb2.svg")
    center / contain
    no-repeat;
  mix-blend-mode: screen;
}
.cp-side-tab__icon-edge::after {
  content: "";
  position: absolute;
  inset: 1px;
  background: linear-gradient(
      221deg,
      #28687fde 0%,
      #256078 35%,
      #205468bf 65%,
      #1a2022 100%
    );
  -webkit-mask: url("/ui/tab_romb2.svg")
    center / contain
    no-repeat;
  mask: url("/ui/tab_romb2.svg")
    center / contain
    no-repeat;
  mix-blend-mode: screen;
}
.cp-side-tab__icon-image {
  position: relative;
  z-index: 3;
  width: var(--cp-nav-icon-img-size);
  height: var(--cp-nav-icon-img-size);
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.75));
}
.cp-side-tab__text-wrap {
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
}
.cp-side-tab__text {
  min-width: 0;
  max-width: 100%;
  color: #bfa77a;
  font-size: var(--cp-nav-text-size);
  font-weight: 700;
  line-height: 1.05;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  text-align: left;
  pointer-events: none;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
  transition: color 0.45s ease,
    text-shadow 0.45s ease;
}
.cp-side-tab.is-long-label .cp-side-tab__text {
  font-size: var(--cp-nav-long-text-size);
  line-height: 1.04;
}
.cp-side-tab:hover .cp-side-tab__text,
.cp-side-tab.is-active .cp-side-tab__text {
  color: #e1c29c;
  text-shadow: 0 0 6px rgba(171, 82, 53, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.32);
}
.cp-side-tab.is-disabled .cp-side-tab__text {
  color: rgba(191, 167, 122, 0.72);
}
.cp-side-tab:hover .cp-side-tab__icon-glow,
.cp-side-tab.is-active .cp-side-tab__icon-glow {
  opacity: 0.92;
  animation: cpDiamondGlowShift 5.8s ease-in-out infinite alternate,
    cpDiamondGlowPulse 3.8s ease-in-out infinite;
}
.cp-side-tab:hover .cp-side-tab__icon-edge,
.cp-side-tab.is-active .cp-side-tab__icon-edge {
  opacity: 0.98;
  animation: cpDiamondEdgeShift 5.8s ease-in-out infinite alternate,
    cpDiamondEdgePulse 3.8s ease-in-out infinite;
}
.cp-side-tab:hover .cp-side-tab__icon-bg,
.cp-side-tab.is-active .cp-side-tab__icon-bg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 6px rgba(52, 100, 118, 0.34));
}
.cp-side-nav--account .cp-side-tab__icon-edge::before {
  background: linear-gradient(
      135deg,
      #563a268a 0%,
      #7a54378f 26%,
      #2b1f178a 50%,
      #3a261d78 74%,
      #311e1670 100%
    );
}
.cp-side-nav--account .cp-side-tab__icon-edge::after {
  background: linear-gradient(
      221deg,
      #b07a4480 0%,
      #9a643a75 35%,
      #6c472a8c 65%,
      #3f2a1c80 100%
    );
}
.character-horizontal-nav .account-page-grid {
  display: block;
  width: 100%;
  min-width: 0;
}
.character-horizontal-nav .cp-side-nav {
  --cp-nav-icon-size: 56px;
  --cp-nav-icon-img-size: 27px;
  --cp-nav-text-size: 14px;
  --cp-nav-long-text-size: 13px;
  --cp-nav-tab-min-h: 64px;
  --cp-nav-tab-gap: 10px;
  --cp-nav-tab-pad-y: 6px;
  --cp-nav-tab-pad-x: 10px;
  width: 100%;
  min-width: 0;
  padding: 0;
}
.character-horizontal-nav .cp-side-nav-inner {
  padding: 12px 0 10px;
  margin-top: 0;
}
.character-horizontal-nav .cp-side-nav-inner::before,
.character-horizontal-nav .cp-side-nav-inner::after {
  right: 0;
}
.character-horizontal-nav .cp-tabs-list {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  justify-content: center;
  align-items: stretch;
}
.character-horizontal-nav .cp-side-tab {
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: var(--cp-nav-tab-min-h);
  grid-template-columns: var(--cp-nav-icon-size) minmax(0, 1fr);
  gap: var(--cp-nav-tab-gap);
  padding: var(--cp-nav-tab-pad-y)
    var(--cp-nav-tab-pad-x);
  justify-self: stretch;
}
.character-horizontal-nav .cp-side-tab:hover {
  transform: translateY(-1px);
}
.character-horizontal-nav .cp-side-tab__text-wrap {
  min-width: 0;
  max-width: 100%;
}
.character-horizontal-nav .cp-side-tab__text {
  font-size: var(--cp-nav-text-size);
  line-height: 1.05;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  text-align: left;
}
.character-horizontal-nav .cp-side-tab.is-long-label .cp-side-tab__text {
  font-size: var(--cp-nav-long-text-size);
  line-height: 1.04;
}
@media (max-width: 1560px) and (min-width: 981px) {
  .cp-side-nav,
  .character-horizontal-nav .cp-side-nav {
    --cp-nav-icon-size: 48px;
    --cp-nav-icon-img-size: 23px;
    --cp-nav-text-size: 12.5px;
    --cp-nav-long-text-size: 11.6px;
    --cp-nav-tab-min-h: 56px;
    --cp-nav-tab-gap: 8px;
    --cp-nav-tab-pad-y: 5px;
    --cp-nav-tab-pad-x: 8px;
    width: 100%;
    min-width: 0;
    padding: 0;
  }
  .cp-side-nav-inner,
  .character-horizontal-nav .cp-side-nav-inner {
    padding: 10px 0 8px;
    margin-top: 0;
  }
  .cp-side-nav-inner::before,
  .cp-side-nav-inner::after,
  .character-horizontal-nav .cp-side-nav-inner::before,
  .character-horizontal-nav .cp-side-nav-inner::after {
    right: 0;
  }
  .cp-tabs-list,
  .character-horizontal-nav .cp-tabs-list {
    width: 100%;
    max-width: 760px;
    min-width: 0;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px 10px;
    justify-content: center;
    justify-items: stretch;
    align-items: stretch;
  }
  .cp-side-tab,
  .character-horizontal-nav .cp-side-tab {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: var(--cp-nav-tab-min-h);
    grid-template-columns: var(--cp-nav-icon-size) minmax(0, 1fr);
    gap: var(--cp-nav-tab-gap);
    padding: var(--cp-nav-tab-pad-y)
      var(--cp-nav-tab-pad-x);
    justify-self: stretch;
  }
  .cp-side-tab:hover,
  .character-horizontal-nav .cp-side-tab:hover {
    transform: translateY(-1px);
  }
  .cp-side-tab__icon,
  .character-horizontal-nav .cp-side-tab__icon {
    width: var(--cp-nav-icon-size);
    height: var(--cp-nav-icon-size);
    min-width: var(--cp-nav-icon-size);
  }
  .cp-side-tab__icon-image,
  .character-horizontal-nav .cp-side-tab__icon-image {
    width: var(--cp-nav-icon-img-size);
    height: var(--cp-nav-icon-img-size);
  }
  .cp-side-tab__text-wrap,
  .character-horizontal-nav .cp-side-tab__text-wrap {
    min-width: 0;
    max-width: 100%;
    display: flex;
    align-items: center;
  }
  .cp-side-tab__text,
  .character-horizontal-nav .cp-side-tab__text {
    font-size: var(--cp-nav-text-size);
    line-height: 1.05;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    text-align: left;
  }
  .cp-side-tab.is-long-label .cp-side-tab__text,
  .character-horizontal-nav .cp-side-tab.is-long-label .cp-side-tab__text {
    font-size: var(--cp-nav-long-text-size);
    line-height: 1.04;
  }
}
@media (max-width: 980px) and (min-width: 641px) {
  .cp-side-nav,
  .character-horizontal-nav .cp-side-nav {
    --cp-nav-icon-size: 56px;
    --cp-nav-icon-img-size: 27px;
    --cp-nav-text-size: 14px;
    --cp-nav-long-text-size: 13px;
    --cp-nav-tab-min-h: 64px;
    --cp-nav-tab-gap: 10px;
    --cp-nav-tab-pad-y: 6px;
    --cp-nav-tab-pad-x: 10px;
    padding: 0;
  }
  .cp-side-nav-inner,
  .character-horizontal-nav .cp-side-nav-inner {
    padding: 14px 0;
    margin-top: 0;
  }
  .cp-side-nav-inner::before,
  .cp-side-nav-inner::after,
  .character-horizontal-nav .cp-side-nav-inner::before,
  .character-horizontal-nav .cp-side-nav-inner::after {
    right: 0;
  }
  .character-horizontal-nav .cp-tabs-list {
    width: 100%;
    max-width: 520px;
    min-width: 0;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .character-horizontal-nav .cp-side-tab {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: var(--cp-nav-tab-min-h);
    grid-template-columns: var(--cp-nav-icon-size) minmax(0, 1fr);
    gap: var(--cp-nav-tab-gap);
    padding: var(--cp-nav-tab-pad-y)
      var(--cp-nav-tab-pad-x);
  }
}
@media (max-width: 640px) {
  .cp-side-nav,
  .character-horizontal-nav .cp-side-nav {
    --cp-nav-icon-size: 52px;
    --cp-nav-icon-img-size: 25px;
    --cp-nav-tab-min-h: 52px;
    --cp-nav-tab-gap: 0;
    --cp-nav-tab-pad-y: 0;
    --cp-nav-tab-pad-x: 0;
    width: 100%;
    min-width: 0;
    padding: 0;
  }
  .cp-side-nav-inner,
  .character-horizontal-nav .cp-side-nav-inner {
    padding: 12px 0;
    margin-top: 0;
  }
  .cp-side-nav-inner::before,
  .cp-side-nav-inner::after,
  .character-horizontal-nav .cp-side-nav-inner::before,
  .character-horizontal-nav .cp-side-nav-inner::after {
    right: 0;
  }
  .cp-tabs-list,
  .character-horizontal-nav .cp-tabs-list {
    width: 100%;
    max-width: calc((var(--cp-nav-icon-size) * 3) + 28px);
    min-width: 0;
    margin-inline: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 24px;
    max-width: calc((var(--cp-nav-icon-size) * 3) + 48px);
  }
  .cp-side-tab,
  .character-horizontal-nav .cp-side-tab {
    width: var(--cp-nav-icon-size);
    min-width: var(--cp-nav-icon-size);
    max-width: var(--cp-nav-icon-size);
    height: var(--cp-nav-icon-size);
    min-height: var(--cp-nav-icon-size);
    max-height: var(--cp-nav-icon-size);
    flex: 0 0 var(--cp-nav-icon-size);
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    gap: 0;
    padding: 0;
    margin: 0;
    justify-self: center;
    align-self: center;
    text-align: center;
  }
  .cp-side-tab:hover,
  .character-horizontal-nav .cp-side-tab:hover {
    transform: translateY(-1px);
  }
  .cp-side-tab__icon,
  .character-horizontal-nav .cp-side-tab__icon {
    width: var(--cp-nav-icon-size);
    height: var(--cp-nav-icon-size);
    min-width: var(--cp-nav-icon-size);
    display: grid;
    place-items: center;
    justify-self: center;
    align-self: center;
  }
  .cp-side-tab__icon-image,
  .character-horizontal-nav .cp-side-tab__icon-image {
    width: var(--cp-nav-icon-img-size);
    height: var(--cp-nav-icon-img-size);
  }
  .cp-side-tab__text-wrap,
  .cp-side-tab__text,
  .character-horizontal-nav .cp-side-tab__text-wrap,
  .character-horizontal-nav .cp-side-tab__text {
    display: none;
  }
}
@keyframes cpDiamondGlowShift {
  0% {
    filter: blur(2px)
      brightness(1.1)
      saturate(1.04)
      drop-shadow(0 0 3px rgba(151, 88, 47, 0.22))
      drop-shadow(0 0 6px rgba(86, 47, 30, 0.12));
  }
  50% {
    filter: blur(2px)
      brightness(1.18)
      saturate(1.1)
      drop-shadow(0 0 4px rgba(171, 78, 48, 0.28))
      drop-shadow(0 0 7px rgba(125, 63, 38, 0.16));
  }
  100% {
    filter: blur(2px)
      brightness(1.14)
      saturate(1.08)
      drop-shadow(0 0 4px rgba(78, 44, 29, 0.24))
      drop-shadow(0 0 6px rgba(58, 31, 22, 0.14));
  }
}
@keyframes cpDiamondGlowPulse {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.018);
  }
  100% {
    opacity: 0.76;
    transform: scale(1);
  }
}
@keyframes cpDiamondEdgeShift {
  0% {
    filter: brightness(1.12)
      saturate(1.04)
      contrast(1.06);
  }
  25% {
    filter: brightness(1.18)
      saturate(1.08)
      contrast(1.1)
      hue-rotate(-6deg);
  }
  50% {
    filter: brightness(1.24)
      saturate(1.14)
      contrast(1.14)
      hue-rotate(-14deg);
  }
  75% {
    filter: brightness(1.18)
      saturate(1.1)
      contrast(1.1)
      hue-rotate(4deg);
  }
  100% {
    filter: brightness(1.14)
      saturate(1.06)
      contrast(1.08)
      hue-rotate(10deg);
  }
}
@keyframes cpDiamondEdgePulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.006);
  }
  100% {
    transform: scale(1);
  }
}
.account-shell__head--no-topbar {
  justify-content: center;
}
.account-shell__head--no-topbar .account-shell__title {
  justify-content: center;
}
.account-shell__head--no-topbar .account-shell__title-inner::before {
  left: 0;
}
@media (max-width: 1560px) and (min-width: 981px) {
  .account-shell {
    padding: 18px 10px 40px;
  }
  .account-shell__frame {
    --account-frame-width: 1040px;
    --account-hud-width: 100%;
    --account-hud-left: 0%;
    --account-hud-height: 86px;
    --account-hud-overlap: -24px;
    --account-content-width: 98.9%;
    --account-content-left: 0.55%;
    --account-body-padding-x: 24px;
    --account-body-padding-top: 20px;
    --account-body-padding-bottom: 16px;
    --account-topbar-safe-right: 34px;
    --topbar-cut: 34px;
  }
  .account-shell__content-frame {
    min-height: 1040px;
  }
  .account-shell__body {
    min-height: 1040px;
  }
  .account-shell__head {
    min-height: var(--account-hud-height);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 0 8px 36px;
    overflow: visible !important;
  }
  .account-shell__title {
    flex: 0 0 175px;
    max-width: 175px;
    justify-content: flex-start;
    text-align: left;
    white-space: normal;
  }
  .account-shell__title-inner {
    justify-content: flex-start;
  }
  .account-shell__title-inner::before {
    left: 30px;
    right: 0;
    bottom: -7px;
  }
  .account-shell__title-icon {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }
  .account-shell__title-inner > span {
    max-width: 112px;
    white-space: normal;
    line-height: 1.06;
    font-size: 15px;
    letter-spacing: 0.065em;
  }
  .account-shell__topbar {
    max-width: calc(100% - 190px);
    margin: 0 var(--account-topbar-safe-right) 0 auto;
    padding: 8px 14px 9px 18px;
  }
  .account-shell__topbar .account-topbar__item {
    padding: 0 9px;
    font-size: 12px;
  }
  .account-shell__topbar .account-topbar__icon,
  .account-shell__topbar .account-topbar__status-icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }
  .account-shell__topbar .account-topbar__currency-icon,
  .account-shell__topbar .account-topbar__vote-icon {
    width: 33px;
    height: 33px;
    flex-basis: 33px;
  }
  .account-shell__topbar .account-topbar__vip-icon,
  .account-shell__topbar .account-topbar__invis-icon {
    width: 35px;
    height: 35px;
    flex-basis: 35px;
  }
  .account-shell__topbar .account-topbar__amount,
  .account-shell__topbar .account-topbar__login-name,
  .account-shell__topbar .account-topbar__value,
  .account-shell__topbar strong {
    font-size: 13px;
  }
  .account-shell__topbar .account-topbar__login-name {
    max-width: 95px;
  }
  .account-page-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}
@media (max-width: 980px) and (min-width: 641px) {
  .account-shell {
    padding: 24px 10px 40px;
  }
  .account-shell__frame {
    --account-frame-width: 860px;
    --account-hud-width: 100%;
    --account-hud-left: 0%;
    --account-hud-height: 82px;
    --account-hud-overlap: -22px;
    --account-content-width: 98.6%;
    --account-content-left: 0.7%;
    --account-body-padding-x: 18px;
    --account-body-padding-top: 16px;
    --account-body-padding-bottom: 14px;
    --account-topbar-safe-right: 24px;
    --topbar-cut: 30px;
  }
  .account-shell__content-frame {
    min-height: 1040px;
  }
  .account-shell__body {
    min-height: 1040px;
  }
  .account-shell__head {
    min-height: var(--account-hud-height);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 0 8px 30px;
    overflow: visible !important;
  }
  .account-shell__title {
    flex: 0 0 150px;
    max-width: 150px;
    justify-content: flex-start;
    text-align: left;
    white-space: normal;
  }
  .account-shell__title-inner {
    justify-content: flex-start;
  }
  .account-shell__title-inner::before {
    left: 29px;
    right: 0;
    bottom: -7px;
  }
  .account-shell__title-icon {
    width: 21px;
    height: 21px;
    flex-basis: 21px;
  }
  .account-shell__title-inner > span {
    max-width: 95px;
    white-space: normal;
    line-height: 1.06;
    font-size: 14px;
    letter-spacing: 0.055em;
  }
  .account-shell__topbar {
    max-width: calc(100% - 160px);
    margin: 0 var(--account-topbar-safe-right) 0 auto;
    padding: 7px 12px 8px 15px;
  }
  .account-shell__topbar .account-topbar__item {
    padding: 0 7px;
    font-size: 12px;
  }
  .account-shell__topbar .account-topbar__item + .account-topbar__item::before {
    height: 22px;
  }
  .account-shell__topbar .account-topbar__item + .account-topbar__item::after {
    height: 12px;
    left: 4px;
  }
  .account-shell__topbar .account-topbar__icon,
  .account-shell__topbar .account-topbar__status-icon {
    width: 21px;
    height: 21px;
    flex-basis: 21px;
  }
  .account-shell__topbar .account-topbar__currency-icon,
  .account-shell__topbar .account-topbar__vote-icon {
    width: 23px;
    height: 23px;
    flex-basis: 23px;
  }
  .account-shell__topbar .account-topbar__vip-icon,
  .account-shell__topbar .account-topbar__invis-icon {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }
  .account-shell__topbar .account-topbar__amount,
  .account-shell__topbar .account-topbar__login-name,
  .account-shell__topbar .account-topbar__value,
  .account-shell__topbar strong {
    font-size: 12px;
  }
  .account-shell__topbar .account-topbar__login-name {
    max-width: 70px;
  }
  .account-page-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
@media (max-width: 980px) and (max-height: 560px) and (orientation: landscape) {
  .account-shell {
    padding: 8px 8px 30px;
  }
  .account-shell__frame {
    --account-frame-width: 100%;
    --account-hud-width: 100%;
    --account-hud-left: 0%;
    --account-hud-height: 74px;
    --account-hud-overlap: -18px;
    --account-content-width: 98.8%;
    --account-content-left: 0.6%;
    --account-body-padding-x: 16px;
    --account-body-padding-top: 14px;
    --account-body-padding-bottom: 14px;
    --account-topbar-safe-right: 14px;
    --topbar-cut: 24px;
  }
  .account-shell__hud-frame {
    width: var(--account-hud-width);
    min-height: var(--account-hud-height);
    left: var(--account-hud-left);
    margin: 0 0 var(--account-hud-overlap);
    overflow: visible !important;
  }
  .account-shell__content-frame {
    min-height: 0;
  }
  .account-shell__body {
    min-height: 0;
    height: auto;
  }
  .account-shell__head {
    min-height: var(--account-hud-height);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 0 7px 24px;
    overflow: visible !important;
  }
  .account-shell__title {
    flex: 0 0 138px;
    max-width: 138px;
    justify-content: flex-start;
    text-align: left;
    white-space: normal;
    overflow: visible !important;
  }
  .account-shell__title-inner {
    justify-content: flex-start;
    gap: 7px;
  }
  .account-shell__title-inner::before {
    left: 26px;
    right: 0;
    bottom: -6px;
  }
  .account-shell__title-icon {
    width: 19px;
    height: 19px;
    flex-basis: 19px;
  }
  .account-shell__title-inner > span {
    max-width: 88px;
    white-space: normal;
    line-height: 1.03;
    font-size: 12px;
    letter-spacing: 0.04em;
  }
  .account-shell__topbar {
    width: auto;
    max-width: calc(100% - 148px);
    flex: 1 1 auto;
    margin: 0 var(--account-topbar-safe-right) 0 auto;
    padding: 7px 10px 8px 13px;
    overflow: visible !important;
  }
  .account-shell__topbar::before,
  .account-shell__topbar::after {
    top: -10px;
    right: -10px;
    bottom: -4px;
    left: 0;
  }
  .account-shell__topbar .account-topbar,
  .account-shell__topbar .account-topbar__inner {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  .account-shell__topbar .account-topbar-elements {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    gap: 0 !important;
    overflow: visible !important;
  }
  .account-shell__topbar .account-topbar__item {
    width: 100%;
    min-width: 0;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0;
    padding: 0 5px;
    font-size: 11px;
    line-height: 1;
    overflow: visible !important;
  }
  .account-shell__topbar .account-topbar__item + .account-topbar__item::before {
    left: 0;
    height: 20px;
  }
  .account-shell__topbar .account-topbar__item + .account-topbar__item::after {
    left: 4px;
    height: 12px;
    opacity: 0.82;
  }
  .account-shell__topbar .account-topbar__tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-width: 0;
    max-width: 100%;
    overflow: visible !important;
  }
  .account-shell__topbar .account-topbar__amount,
  .account-shell__topbar .account-topbar__login {
    display: none !important;
  }
  .account-shell__topbar .account-topbar__icon,
  .account-shell__topbar .account-topbar__status-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    object-fit: contain;
  }
  .account-shell__topbar .account-topbar__currency-icon,
  .account-shell__topbar .account-topbar__vote-icon {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }
  .account-shell__topbar .account-topbar__vip-icon,
  .account-shell__topbar .account-topbar__invis-icon {
    width: 21px;
    height: 21px;
    flex-basis: 21px;
  }
  .account-shell__topbar .account-topbar__status-icon {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
  }
  .account-shell__topbar .tooltip {
    position: relative;
    z-index: 1000;
    overflow: visible !important;
  }
  .account-shell__topbar .tooltip::before {
    position: absolute;
    left: 50%;
    top: calc(100% + 2px);
    transform: translate(-50%, 4px);
    z-index: 10001;
  }
  .account-shell__topbar .tooltip::after {
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    max-width: min(210px, calc(100vw - 24px));
    width: max-content;
    transform: translate(-50%, 4px);
    z-index: 10000;
    white-space: pre-line;
    overflow-wrap: break-word;
    word-break: normal;
    font-size: 11px;
    line-height: 1.25;
    padding: 9px 12px;
  }
  .account-shell__topbar .tooltip:hover::before,
  .account-shell__topbar .tooltip:hover::after,
  .account-shell__topbar .tooltip:focus::before,
  .account-shell__topbar .tooltip:focus::after,
  .account-shell__topbar .tooltip:focus-within::before,
  .account-shell__topbar .tooltip:focus-within::after {
    transform: translate(-50%, 0);
  }
  .account-shell__topbar .account-topbar__item:first-child .tooltip::after {
    left: 0;
    transform: translate(0, 4px);
  }
  .account-shell__topbar .account-topbar__item:first-child .tooltip:hover::after,
  .account-shell__topbar .account-topbar__item:first-child .tooltip:focus::after,
  .account-shell__topbar .account-topbar__item:first-child .tooltip:focus-within::after {
    transform: translate(0, 0);
  }
  .account-shell__topbar .account-topbar__item:last-child .tooltip::after {
    left: auto;
    right: 0;
    transform: translate(0, 4px);
  }
  .account-shell__topbar .account-topbar__item:last-child .tooltip:hover::after,
  .account-shell__topbar .account-topbar__item:last-child .tooltip:focus::after,
  .account-shell__topbar .account-topbar__item:last-child .tooltip:focus-within::after {
    transform: translate(0, 0);
  }
  .account-shell__content-frame .layout-grid {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    gap: 16px;
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .account-shell__content-frame .layout-grid > * {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    max-height: none;
  }
  .account-page-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
@media (max-width: 760px) and (max-height: 430px) and (orientation: landscape) {
  .account-shell__frame {
    --account-hud-height: 70px;
    --account-hud-overlap: -16px;
    --account-topbar-safe-right: 10px;
    --topbar-cut: 20px;
  }
  .account-shell__head {
    gap: 6px;
    padding: 0 0 6px 18px;
  }
  .account-shell__title {
    flex-basis: 118px;
    max-width: 118px;
  }
  .account-shell__title-icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
  }
  .account-shell__title-inner {
    gap: 6px;
  }
  .account-shell__title-inner > span {
    max-width: 72px;
    font-size: 11px;
    line-height: 1.02;
    letter-spacing: 0.035em;
  }
  .account-shell__title-inner::before {
    left: 24px;
    bottom: -5px;
  }
  .account-shell__topbar {
    max-width: calc(100% - 124px);
    padding: 6px 8px 7px 11px;
  }
  .account-shell__topbar::before,
  .account-shell__topbar::after {
    top: -9px;
    right: -8px;
    bottom: -4px;
  }
  .account-shell__topbar .account-topbar__item {
    padding: 0 3px;
  }
  .account-shell__topbar .account-topbar__icon,
  .account-shell__topbar .account-topbar__status-icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
  }
  .account-shell__topbar .account-topbar__currency-icon,
  .account-shell__topbar .account-topbar__vote-icon {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
  }
  .account-shell__topbar .account-topbar__vip-icon,
  .account-shell__topbar .account-topbar__invis-icon {
    width: 19px;
    height: 19px;
    flex-basis: 19px;
  }
  .account-shell__topbar .tooltip::after {
    max-width: min(190px, calc(100vw - 20px));
    font-size: 10.5px;
    line-height: 1.22;
    padding: 8px 10px;
  }
}
@media (max-width: 640px) {
  .account-shell {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    overflow: visible;
  }
  .account-shell__frame {
    --account-frame-width: 100%;
    --account-hud-width: 104%;
    --account-hud-left: -2%;
    --account-hud-height: 132px;
    --account-hud-overlap: -20px;
    --account-content-width: 100%;
    --account-content-left: 0%;
    --account-body-padding-x: 16px;
    --account-body-padding-top: 14px;
    --account-body-padding-bottom: 18px;
    --account-topbar-safe-right: 0;
    --topbar-cut: 0px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .account-shell__hud-frame {
    width: var(--account-hud-width);
    min-height: var(--account-hud-height);
    left: var(--account-hud-left);
    margin: 0 0 var(--account-hud-overlap);
    background: none;
    isolation: isolate;
    overflow: visible !important;
  }
  .account-shell__hud-frame::before,
  .account-shell__hud-frame::after {
    background-image: url("/ui/mobile_hud_frame.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
  }
  .account-shell__content-frame {
    width: var(--account-content-width);
    min-height: 0;
    left: var(--account-content-left);
    background-image: url("/ui/mobile_content_frame.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
  }
  .account-shell__body {
    min-height: 0;
    height: auto;
  }
  .account-shell__head {
    position: relative;
    z-index: 30;
    min-height: var(--account-hud-height);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 10px 18px 24px;
    text-align: center;
    overflow: visible !important;
  }
  .account-shell__title {
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0;
    text-align: center;
    white-space: normal;
    overflow: visible !important;
  }
  .account-shell__title-inner {
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .account-shell__title-inner::before {
    display: none;
    content: none;
  }
  .account-shell__title::after {
    content: "";
    width: min(240px, 72vw);
    height: 14px;
    display: block;
    background-image: url("/ui/cards/card_devider_down.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    pointer-events: none;
    filter: drop-shadow(0 1px 0 rgba(42, 24, 10, 0.95))
      drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
  }
  .account-shell__title-icon {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    object-fit: contain;
    transform: translateY(-1px);
  }
  .account-shell__title-inner > span {
    max-width: calc(100vw - 92px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.055em;
    text-transform: uppercase;
  }
  .account-shell__topbar {
    position: relative;
    width: min(94%, 430px);
    max-width: 430px;
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 0 8px;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    clip-path: none !important;
    overflow: visible !important;
    isolation: auto;
  }
  .account-shell__topbar::before,
  .account-shell__topbar::after {
    display: none !important;
    content: none !important;
  }
  .account-shell__topbar > * {
    position: relative;
    z-index: 2;
  }
  .account-shell__topbar .account-topbar,
  .account-shell__topbar .account-topbar__inner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  .account-shell__topbar .account-topbar-elements {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  .account-shell__topbar .account-topbar__item {
    position: relative;
    width: 100%;
    min-width: 0;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0;
    padding: 0 4px;
    font-size: 11px;
    line-height: 1;
    overflow: visible !important;
  }
  .account-shell__topbar .account-topbar__item + .account-topbar__item::before,
  .account-shell__topbar .account-topbar__item + .account-topbar__item::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 1px;
    transform: translateY(-50%)
      rotate(14deg);
    transform-origin: center center;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(224, 176, 121, 0.28) 50%,
        transparent 100%
      );
    box-shadow: 0 0 4px rgba(224, 176, 121, 0.08);
  }
  .account-shell__topbar .account-topbar__item + .account-topbar__item::before {
    left: 0;
    height: 21px;
  }
  .account-shell__topbar .account-topbar__item + .account-topbar__item::after {
    left: 4px;
    height: 13px;
    opacity: 0.82;
  }
  .account-shell__topbar .account-topbar__tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-width: 0;
    max-width: 100%;
    overflow: visible !important;
  }
  .account-shell__topbar .account-topbar__amount,
  .account-shell__topbar .account-topbar__login {
    display: none !important;
  }
  .account-shell__topbar .account-topbar__icon,
  .account-shell__topbar .account-topbar__status-icon {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    object-fit: contain;
  }
  .account-shell__topbar .account-topbar__currency-icon,
  .account-shell__topbar .account-topbar__vote-icon {
    width: 23px;
    height: 23px;
    flex-basis: 23px;
  }
  .account-shell__topbar .account-topbar__vip-icon,
  .account-shell__topbar .account-topbar__invis-icon {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }
  .account-shell__topbar .account-topbar__item--login {
    gap: 0;
  }
  .account-shell__topbar .tooltip {
    position: relative;
    z-index: 1000;
    overflow: visible !important;
  }
  .account-shell__topbar .tooltip::before {
    position: absolute;
    left: 50%;
    top: calc(100% + 2px);
    transform: translate(-50%, 4px);
    z-index: 10001;
  }
  .account-shell__topbar .tooltip::after {
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    max-width: min(200px, calc(100vw - 24px));
    width: max-content;
    transform: translate(-50%, 4px);
    z-index: 10000;
    white-space: pre-line;
    overflow-wrap: break-word;
    word-break: normal;
    font-size: 11px;
    line-height: 1.25;
    padding: 9px 12px;
  }
  .account-shell__topbar .tooltip:hover::before,
  .account-shell__topbar .tooltip:hover::after,
  .account-shell__topbar .tooltip:focus::before,
  .account-shell__topbar .tooltip:focus::after,
  .account-shell__topbar .tooltip:focus-within::before,
  .account-shell__topbar .tooltip:focus-within::after {
    transform: translate(-50%, 0);
  }
  .account-shell__topbar .account-topbar__item:first-child .tooltip::after {
    left: 0;
    transform: translate(0, 4px);
  }
  .account-shell__topbar .account-topbar__item:first-child .tooltip:hover::after,
  .account-shell__topbar .account-topbar__item:first-child .tooltip:focus::after,
  .account-shell__topbar .account-topbar__item:first-child .tooltip:focus-within::after {
    transform: translate(0, 0);
  }
  .account-shell__topbar .account-topbar__item:last-child .tooltip::after {
    left: auto;
    right: 0;
    transform: translate(0, 4px);
  }
  .account-shell__topbar .account-topbar__item:last-child .tooltip:hover::after,
  .account-shell__topbar .account-topbar__item:last-child .tooltip:focus::after,
  .account-shell__topbar .account-topbar__item:last-child .tooltip:focus-within::after {
    transform: translate(0, 0);
  }
  .account-shell__content-frame .layout-grid {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    gap: 20px;
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .account-shell__content-frame .layout-grid > * {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    max-height: none;
  }
  .account-page-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
@media (max-width: 480px) {
  .account-shell__frame {
    --account-hud-height: 126px;
    --account-hud-overlap: -28px;
    --account-body-padding-x: 12px;
    --account-body-padding-top: 14px;
    --account-body-padding-bottom: 24px;
    min-height: 0;
  }
  .account-shell__head {
    gap: 5px;
    padding: 22px 12px 22px;
  }
  .account-shell__title-icon {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
  }
  .account-shell__title-inner > span {
    font-size: 14px;
    letter-spacing: 0.045em;
  }
  .account-shell__title::after {
    width: min(220px, 74vw);
    height: 13px;
  }
  .account-shell__topbar {
    width: min(96%, 390px);
    padding: 0 6px;
  }
  .account-shell__topbar .account-topbar__item {
    padding: 0 3px;
    gap: 0;
  }
  .account-shell__topbar .account-topbar__tip {
    gap: 0;
  }
  .account-shell__topbar .account-topbar__icon,
  .account-shell__topbar .account-topbar__status-icon {
    width: 19px;
    height: 19px;
    flex-basis: 19px;
  }
  .account-shell__topbar .account-topbar__currency-icon,
  .account-shell__topbar .account-topbar__vote-icon {
    width: 21px;
    height: 21px;
    flex-basis: 21px;
  }
  .account-shell__topbar .account-topbar__vip-icon,
  .account-shell__topbar .account-topbar__invis-icon {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
  }
  .account-shell__topbar .tooltip::after {
    max-width: min(190px, calc(100vw - 20px));
    font-size: 10.5px;
    padding: 8px 11px;
  }
  .account-shell__content-frame .layout-grid {
    gap: 16px;
  }
}
.cs-stat-input-area {
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 58px;
  gap: 8px;
  align-items: center;
}
.cs-stat-action {
  height: 34px;
  border: 1px solid rgba(193, 152, 102, 0.22);
  border-radius: 7px;
  background: transparent;
  color: #ecd7b9;
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: border-color 0.16s ease,
    transform 0.12s ease,
    color 0.16s ease,
    background 0.16s ease;
}
.cs-stat-action:hover {
  border-color: rgba(236, 215, 185, 0.42);
  color: #fff1d2;
  background: rgba(255, 255, 255, 0.02);
}
.cs-stat-action:active {
  transform: translateY(1px);
}
.cs-stat-field {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(193, 152, 102, 0.2);
  border-radius: 8px;
  background: transparent;
  color: #fff2cf;
  font-family: "Cormorant SC", serif;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  transition: border-color 0.16s ease,
    background 0.16s ease;
}
.cs-stat-field:focus {
  outline: none;
  border-color: rgba(236, 215, 185, 0.36);
  background: rgba(255, 255, 255, 0.02);
}
.cs-stat-field::-webkit-outer-spin-button,
.cs-stat-field::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cs-stat-field[type="number"] {
  -moz-appearance: textfield;
}
.cs-editor-actions {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
}
.cs-editor-actions .menu-btn {
  margin: 0;
}
@media (max-width: 1560px) and (min-width: 981px) {
  .cs-page-layout {
    grid-template-columns: minmax(190px, 238px) minmax(0, 1fr);
    gap: 20px;
  }
  .cs-character-col {
    width: 100%;
    max-width: 238px;
  }
  .cs-editor-panel {
    width: 100%;
    min-width: 0;
  }
}
@media (max-width: 980px) {
  .cs-page-layout {
    grid-template-columns: 1fr;
    gap: 18px;
    justify-items: center;
  }
  .cs-character-col {
    max-width: 230px;
    justify-self: center;
  }
  .cs-editor-panel {
    width: min(100%, 720px);
    justify-self: center;
  }
  .cs-stat-row {
    grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
  }
}
@media (max-width: 767px) {
  .cs-editor-card {
    padding: 4px 0 0;
  }
  .cs-free-points-frame {
    min-height: 78px;
    margin-bottom: 16px;
  }
  .cs-free-points-frame__inner {
    min-height: 78px;
    padding: 14px 16px 12px;
  }
  .cs-free-points-frame__label {
    font-size: 15px;
  }
  .cs-free-points-frame__value {
    font-size: 24px;
  }
  .cs-stat-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 0;
  }
  .cs-stat-row__left {
    gap: 10px;
  }
  .cs-stat-input-area {
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    gap: 6px;
  }
  .cs-stat-action {
    height: 32px;
    font-size: 12px;
  }
  .cs-stat-field {
    height: 36px;
    font-size: 15px;
  }
  .cs-editor-actions {
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .cs-free-points-frame {
    min-height: 72px;
  }
  .cs-free-points-frame__inner {
    min-height: 71px;
    padding: 12px 14px 10px;
  }
  .cs-free-points-frame__label {
    font-size: 14px;
  }
  .cs-free-points-frame__value {
    font-size: 21px;
  }
  .cs-stat-row__label {
    font-size: 14px;
  }
  .cs-stat-input-area {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
  }
  .cs-stat-action {
    height: 30px;
    font-size: 11px;
  }
  .cs-stat-field {
    height: 34px;
    font-size: 14px;
    padding: 0 8px;
  }
}
.sidebar-left {
  width: 100%;
  display: flex;
  justify-content: center;
  align-self: start;
}
.sidebar {
  --sidebar-max-width: 280px;
  position: relative;
  width: 100%;
  max-width: var(--sidebar-max-width);
  height: 1250px;
  padding: 20px 16px 22px;
  box-sizing: border-box;
  overflow: visible;
  background: url("/ui/sidebar_left.png") no-repeat center top / 100% 100%;
}
.sidebar-content {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 10px;
}
.sidebar-muted {
  color: rgba(255, 232, 186, 0.46);
  font-size: 13px;
  text-align: center;
  font-family: "Cormorant SC", serif;
  padding: 10px 0;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.sidebar-left-top-media-inset {
  position: relative;
  z-index: 5;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 25px !important;
  margin-right: 0;
  margin-bottom: 5px;
  margin-left: 0;
  padding: 0;
  overflow: visible;
  background: none;
  border: 0;
  box-shadow: none;
}
.sidebar-left-media-inset-bronze-frame {
  position: relative;
  width: 100%;
  max-width: 230px;
  aspect-ratio: 840 / 350;
  margin: 0;
  padding: 5px;
  isolation: isolate;
  background: linear-gradient(
      180deg,
      rgba(255, 225, 156, 0.11),
      transparent 24%,
      transparent 76%,
      rgba(90, 55, 30, 0.14)
    ),
    linear-gradient(
      180deg,
      #3b2a1c 0%,
      #182022 28%,
      #101516 100%
    );
  border: 1px solid rgba(206, 150, 78, 0.46);
  box-shadow: 0 7px 14px rgba(0, 0, 0, 0.48),
    inset 0 0 0 1px rgba(255, 236, 185, 0.08),
    inset 0 0 12px rgba(0, 0, 0, 0.54);
}
.sidebar-left-media-inset-bronze-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(
      90deg,
      rgba(7, 10, 12, 0.95) 0%,
      rgba(28, 40, 41, 0.72) 46%,
      rgba(7, 10, 12, 0.44) 100%
    );
  border: 1px solid rgba(227, 174, 92, 0.2);
  box-shadow: inset 0 0 0 1px rgba(78, 142, 148, 0.12),
    inset 0 0 15px rgba(0, 0, 0, 0.58);
}
.sidebar-left-media-inset-bronze-frame::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(244, 204, 126, 0.62),
      transparent
    ) center top / 76% 1px no-repeat,

    linear-gradient(
      90deg,
      transparent,
      rgba(244, 204, 126, 0.36),
      transparent
    ) center bottom / 76% 1px no-repeat,

    linear-gradient(
      180deg,
      transparent,
      rgba(244, 204, 126, 0.2),
      transparent
    ) left center / 1px 66% no-repeat,

    linear-gradient(
      180deg,
      transparent,
      rgba(244, 204, 126, 0.2),
      transparent
    ) right center / 1px 66% no-repeat;
}
.sidebar-left-media-inset-bronze-frame::after {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 5;
  pointer-events: none;
  border: 1px solid rgba(75, 130, 136, 0.2);
}
.sidebar-left-media-inset-bronze-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  pointer-events: none;
  filter: none;
  transform: none;
  transition: none;
}
.sidebar-widget-container {
  position: relative;
  width: 100%;
  margin-top: 5px;
  margin-bottom: 5px;
}
.sidebar-badge-header {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 10;
  width: 175px;
  aspect-ratio: 210 / 54;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
}
.sidebar-badge-header__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px #000)
    drop-shadow(0 0 8px rgba(191, 140, 72, 0.12));
}
.sidebar-badge-header__text {
  position: relative;
  z-index: 2;
  margin-top: -2px;
  color: #ffdda0;
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  text-shadow: 0 0 8px #000,
    0 0 10px rgba(217, 172, 108, 0.32);
}
.sidebar-siege-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px 0 2px;
}
.siege-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  align-items: start;
  gap: 4px;
  min-height: 46px;
  padding: 7px 8px 6px;
  overflow: hidden;
  border-radius: 4px;
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.018) 0%,
      rgba(255, 216, 148, 0.035) 48%,
      rgba(255, 255, 255, 0.014) 100%
    );
  border: 1px solid rgba(191, 167, 122, 0.12);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 232, 186, 0.035);
  transition: border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}
.siege-row::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 0;
  height: 1px;
  opacity: 0.65;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 221, 160, 0.16),
      transparent
    );
}
.siege-row::after {
  content: "";
  position: absolute;
  right: -18px;
  top: 50%;
  width: 64px;
  height: 44px;
  opacity: 0.18;
  pointer-events: none;
  transform: translateY(-50%);
  background: radial-gradient(
      ellipse at center,
      rgba(255, 196, 92, 0.42) 0%,
      rgba(255, 196, 92, 0.11) 42%,
      transparent 72%
    );
  filter: blur(10px);
}
.siege-row:hover {
  border-color: rgba(191, 167, 122, 0.25);
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 0%,
      rgba(255, 216, 148, 0.055) 48%,
      rgba(255, 255, 255, 0.018) 100%
    );
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 232, 186, 0.05);
}
.siege-row--owner::after {
  background: radial-gradient(
      ellipse at center,
      rgba(112, 162, 181, 0.5) 0%,
      rgba(112, 162, 181, 0.13) 43%,
      transparent 74%
    );
}
.siege-row--stage::after {
  background: radial-gradient(
      ellipse at center,
      rgba(112, 162, 181, 0.5) 0%,
      rgba(112, 162, 181, 0.13) 43%,
      transparent 74%
    );
}
.siege-label {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  color: rgba(191, 167, 122, 0.68);
  font-family: "Cormorant SC", serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85),
    0 0 7px rgba(217, 172, 108, 0.08);
  transition: color 0.22s ease,
    text-shadow 0.22s ease;
}
.siege-value {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  color: #9ed7ec;
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 8px rgba(255, 221, 160, 0.18),
    0 1px 0 rgba(0, 0, 0, 0.8);
  transition: color 0.22s ease,
    text-shadow 0.22s ease;
}
.siege-value--owner {
  color: #9ed7ec;
  text-shadow: 0 0 8px rgba(112, 162, 181, 0.34),
    0 1px 0 rgba(0, 0, 0, 0.85);
}
.siege-row:hover .siege-label {
  color: rgba(255, 221, 160, 0.76);
}
.siege-row:hover .siege-value {
  color: #b8ecff;
  text-shadow: 0 0 9px rgba(112, 162, 181, 0.45), 0 1px 0 rgba(0, 0, 0, 0.9);
}
.siege-row:hover .siege-value--owner {
  color: #b8ecff;
  text-shadow: 0 0 9px rgba(112, 162, 181, 0.45),
    0 1px 0 rgba(0, 0, 0, 0.9);
}
.siege-divider {
  height: 1px;
  margin: 2px 0 1px;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(217, 172, 108, 0.22),
      rgba(255, 221, 160, 0.34),
      rgba(217, 172, 108, 0.22),
      transparent
    );
  box-shadow: 0 0 8px rgba(217, 172, 108, 0.06);
}
.siege-timer-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 1px;
}
.siege-label-timer {
  display: block;
  margin-bottom: 0;
  color: rgba(191, 167, 122, 0.56);
  font-family: "Cormorant SC", serif;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.siege-timer-seal,
.reset-value-seal {
  position: relative;
  width: fit-content;
  min-width: 42px;
  margin: 0 auto;
  padding: 4px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  border: 1px solid rgba(217, 172, 108, 0.3);
  background: linear-gradient(
      180deg,
      rgba(55, 48, 39, 0.78) 0%,
      rgba(25, 24, 23, 0.82) 100%
    );
  box-shadow: inset 0 0 8px rgba(217, 172, 108, 0.15),
    inset 0 1px 0 rgba(255, 232, 186, 0.055),
    0 2px 4px rgba(0, 0, 0, 0.5);
}
.siege-timer-seal::before,
.siege-timer-seal::after,
.reset-value-seal::before,
.reset-value-seal::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #ffdda0;
  box-shadow: 0 0 3px #ffdda0;
  transform: translateY(-50%);
}
.siege-timer-seal::before,
.reset-value-seal::before {
  left: -4px;
}
.siege-timer-seal::after,
.reset-value-seal::after {
  right: -4px;
}
.siege-countdown,
.reset-value-digits {
  color: #ffdda0;
  font-family: "Cormorant SC", serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.035em;
  text-shadow: 0 0 10px rgba(217, 172, 108, 0.4),
    0 1px 0 rgba(0, 0, 0, 0.9);
}
.reset-value-digits {
  font-size: 13px;
}
.arca-content {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 4px 0 2px;
  overflow: visible !important;
}
.arca-winners-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 0;
  overflow: visible !important;
}
.arca-winner-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: visible !important;
}
.arca-winner-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 58px 31px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 4px 8px;
  overflow: visible !important;
  border-radius: 4px;
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.018) 0%,
      rgba(255, 216, 148, 0.034) 48%,
      rgba(255, 255, 255, 0.012) 100%
    );
  border: 1px solid rgba(191, 167, 122, 0.12);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 232, 186, 0.035);
  transition: border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}
.arca-winner-row::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 0;
  height: 1px;
  opacity: 0.6;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 221, 160, 0.14),
      transparent
    );
}
.arca-winner-row::after {
  content: "";
  position: absolute;
  top: 0;
  right: -4px;
  bottom: 0;
  width: 60px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.16;
  filter: blur(10px);
  border-radius: 0 4px 4px 0;
}
.arca-winner-row:hover {
  z-index: 100;
  border-color: rgba(191, 167, 122, 0.28);
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.026) 0%,
      rgba(255, 216, 148, 0.058) 48%,
      rgba(255, 255, 255, 0.016) 100%
    );
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 232, 186, 0.05);
}
.arca-winner-guild {
  position: relative;
  z-index: 2;
  min-width: 0;
  color: #bfa77a;
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85);
}
.arca-winner-row:hover .arca-winner-guild {
  color: #ffdda0;
}
.arca-tower-icon-shell {
  position: relative;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(
      circle at 50% 42%,
      rgba(255, 221, 160, 0.12) 0%,
      rgba(255, 221, 160, 0.045) 45%,
      rgba(0, 0, 0, 0.16) 100%
    );
  box-shadow: inset 0 0 0 1px rgba(255, 221, 160, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.32);
}
.arca-tower-icon-mini {
  width: 30px;
  height: 30px;
  object-fit: contain;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 5px rgba(255, 221, 160, 0.08));
}
.arca-tower-name-mini {
  position: relative;
  z-index: 50;
  min-width: 0;
  color: #ffe8ba;
  font-family: "Cormorant SC", serif;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  cursor: help;
  white-space: nowrap;
  overflow: visible !important;
  text-overflow: clip;
  text-shadow: 0 0 8px rgba(255, 221, 160, 0.15),
    0 1px 0 rgba(0, 0, 0, 0.9);
}
.arca-tower-name-mini.tooltip {
  position: relative;
  z-index: 999;
  overflow: visible !important;
  margin-left: 5px;
}
.arca-tower-name-mini.tooltip::after {
  top: calc(100% + 10px) !important;
  bottom: auto !important;
  left: 50% !important;
  width: max-content;
  min-width: 72px;
  max-width: 220px;
  white-space: nowrap !important;
  text-align: center;
  z-index: 9999 !important;
  pointer-events: none;
  transform: translate(-50%, -5px) !important;
}
.arca-tower-name-mini.tooltip:hover::after {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate(-50%, 0) !important;
}
.arca-divider {
  margin-top: 1px;
}
.arca-timer-block {
  padding-top: 0;
}
.arca-row--fire::after {
  background: radial-gradient(
      circle at right,
      rgba(255, 78, 32, 0.72),
      transparent 72%
    );
}
.arca-row--water::after {
  background: radial-gradient(
      circle at right,
      rgba(0, 150, 255, 0.72),
      transparent 72%
    );
}
.arca-row--wind::after {
  background: radial-gradient(
      circle at right,
      rgba(0, 255, 120, 0.62),
      transparent 72%
    );
}
.arca-row--earth::after {
  background: radial-gradient(
      circle at right,
      rgba(200, 140, 40, 0.68),
      transparent 72%
    );
}
.arca-row--darkness::after {
  background: radial-gradient(
      circle at right,
      rgba(140, 0, 255, 0.68),
      transparent 72%
    );
}
.sidebar-reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar-reset-item {
  display: flex;
  align-items: center;
  padding: 3px 0;
  position: relative;
}
.reset-rank-romb {
  width: 30px;
  height: 30px;
  margin-right: 12px;
  background: url("/ui/tab_romb2.svg") center / contain no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffdda0;
  font-family: "Cormorant SC", serif;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.reset-name-box {
  flex-grow: 1;
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  min-width: 0;
}
.reset-name-text {
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 700;
  color: #ffe8ba;
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  overflow: visible !important;
  transition: color 0.22s ease;
}
.reset-name-text::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #ffdda0 50%,
    transparent 100%
  );
  transform: scaleX(0);
  transform-origin: center;
  transition: 0.4s;
}
.sidebar-reset-item:hover .reset-name-text::after {
  transform: scaleX(1);
}
.sidebar-reset-item:hover .reset-name-text {
  color: #ffdda0;
}
.reset-value-seal {
  margin-left: 10px;
  min-width: 38px;
  height: 22px;
}
@media (max-width: 1440px) {
  .sidebar {
    --sidebar-max-width: 250px;
    height: auto;
    min-height: 1100px;
    padding: 20px 12px 22px;
  }
  .sidebar-badge-header {
    width: 140px;
  }
  .sidebar-badge-header__text {
    font-size: 10px;
  }
  .sidebar-left-media-inset-bronze-frame {
    max-width: 220px;
    padding: 5px;
  }
  .arca-winner-row {
    grid-template-columns: 52px 29px minmax(0, 1fr);
    gap: 5px;
    padding-left: 7px;
    padding-right: 7px;
  }
  .arca-winner-guild {
    font-size: 11px;
  }
  .arca-tower-name-mini {
    font-size: 9.5px;
  }
  .siege-label {
    font-size: 10px;
  }
  .siege-value {
    max-width: 92px;
    font-size: 11px;
  }
}
@media (max-width: 768px) {
  .sidebar {
    --sidebar-max-width: 100%;
    max-width: 450px;
    height: auto;
    min-height: 0;
    padding: 20px 15px 25px;
  }
  .sidebar-content {
    margin-top: 18px;
  }
  .sidebar-left-top-media-inset {
    margin-top: 28px !important;
    margin-bottom: 8px;
  }
  .sidebar-left-media-inset-bronze-frame {
    width: 100%;
    max-width: 250px;
    margin-left: 0;
    margin-right: 0;
    padding: 5px;
  }
  .arca-winner-row {
    grid-template-columns: 74px 34px minmax(0, 1fr);
  }
  .arca-winner-guild {
    font-size: 12px;
  }
  .arca-tower-name-mini {
    font-size: 11px;
  }
  .siege-label {
    font-size: 11px;
  }
  .siege-value {
    max-width: 130px;
    font-size: 12px;
  }
}
@media (max-width: 520px) {
  .sidebar-left-top-media-inset {
    margin-top: 26px !important;
    margin-bottom: 8px;
  }
  .sidebar-left-media-inset-bronze-frame {
    max-width: 225px;
    padding: 4px;
  }
  .sidebar-left-media-inset-bronze-inner {
    box-shadow: inset 0 0 0 1px rgba(78, 142, 148, 0.1),
      inset 0 0 12px rgba(0, 0, 0, 0.54);
  }
  .sidebar-left-media-inset-bronze-frame::before {
    inset: 3px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(244, 204, 126, 0.56),
        transparent
      ) center top / 74% 1px no-repeat,

      linear-gradient(
        90deg,
        transparent,
        rgba(244, 204, 126, 0.32),
        transparent
      ) center bottom / 74% 1px no-repeat,

      linear-gradient(
        180deg,
        transparent,
        rgba(244, 204, 126, 0.18),
        transparent
      ) left center / 1px 62% no-repeat,

      linear-gradient(
        180deg,
        transparent,
        rgba(244, 204, 126, 0.18),
        transparent
      ) right center / 1px 62% no-repeat;
  }
  .sidebar-left-media-inset-bronze-frame::after {
    inset: 4px;
  }
}
@media (max-width: 380px) {
  .sidebar-left-top-media-inset {
    margin-top: 24px !important;
    margin-bottom: 7px;
  }
  .sidebar-left-media-inset-bronze-frame {
    max-width: 205px;
    padding: 4px;
  }
}
@media (max-width: 768px) {
  .siege-row,
  .siege-row--owner,
  .siege-row--stage {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-items: start;
    justify-items: center;
    gap: 4px;
    min-height: 46px;
    padding: 7px 8px 6px;
    text-align: center;
  }
  .siege-row .siege-label,
  .siege-row--owner .siege-label,
  .siege-row--stage .siege-label {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-self: center;
    font-size: 11px;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .siege-row .siege-value,
  .siege-row--owner .siege-value,
  .siege-row--stage .siege-value {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-self: center;
    font-size: 12px;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .siege-value--owner {
    max-width: 100%;
  }
}
@media (max-width: 520px) {
  .siege-row,
  .siege-row--owner,
  .siege-row--stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    justify-items: center;
    gap: 4px;
    padding: 7px 8px 6px;
  }
  .siege-row .siege-label,
  .siege-row--owner .siege-label,
  .siege-row--stage .siege-label {
    font-size: 10.5px;
    text-align: center;
  }
  .siege-row .siege-value,
  .siege-row--owner .siege-value,
  .siege-row--stage .siege-value {
    font-size: 12px;
    text-align: center;
  }
}
@media (max-width: 380px) {
  .siege-row,
  .siege-row--owner,
  .siege-row--stage {
    gap: 3px;
    padding: 7px 7px 6px;
  }
  .siege-row .siege-label,
  .siege-row--owner .siege-label,
  .siege-row--stage .siege-label {
    font-size: 10px;
  }
  .siege-row .siege-value,
  .siege-row--owner .siege-value,
  .siege-row--stage .siege-value {
    font-size: 11.5px;
  }
}
.sidebar-right {
  width: 100%;
  display: flex;
  justify-content: center;
  align-self: start;
}
.sidebar--right {
  --sidebar-max-width: 280px;
  background: url("/ui/sidebar_right.png") no-repeat center top / 100% 100%;
}
.sidebar--right .sidebar-content {
  margin-top: 10px;
  gap: 3px;
}
.sidebar--right .sidebar-widget-container,
.sidebar-widget-container--right {
  margin-top: 5px;
  margin-bottom: 5px;
}
.sidebar-top-media-inset {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 25px !important;
  margin-right: 0;
  margin-bottom: 15px;
  margin-left: 0;
  padding: 0;
  overflow: visible;
  background: none;
  border: 0;
  box-shadow: none;
}
.sidebar-media-inset-bronze-frame {
  position: relative;
  width: 100%;
  max-width: 230px;
  aspect-ratio: 840 / 350;
  margin: 0;
  padding: 5px;
  isolation: isolate;
  background: linear-gradient(
      180deg,
      rgba(255, 225, 156, 0.11),
      transparent 24%,
      transparent 76%,
      rgba(90, 55, 30, 0.14)
    ),
    linear-gradient(
      180deg,
      #3b2a1c 0%,
      #182022 28%,
      #101516 100%
    );
  border: 1px solid rgba(206, 150, 78, 0.46);
  box-shadow: 0 7px 14px rgba(0, 0, 0, 0.48),
    inset 0 0 0 1px rgba(255, 236, 185, 0.08),
    inset 0 0 12px rgba(0, 0, 0, 0.54);
}
.sidebar-media-inset-bronze-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(
      90deg,
      rgba(7, 10, 12, 0.95) 0%,
      rgba(28, 40, 41, 0.72) 46%,
      rgba(7, 10, 12, 0.44) 100%
    );
  border: 1px solid rgba(227, 174, 92, 0.2);
  box-shadow: inset 0 0 0 1px rgba(78, 142, 148, 0.12),
    inset 0 0 15px rgba(0, 0, 0, 0.58);
}
.sidebar-media-inset-bronze-frame::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(244, 204, 126, 0.62),
      transparent
    ) center top / 76% 1px no-repeat,

    linear-gradient(
      90deg,
      transparent,
      rgba(244, 204, 126, 0.36),
      transparent
    ) center bottom / 76% 1px no-repeat,

    linear-gradient(
      180deg,
      transparent,
      rgba(244, 204, 126, 0.2),
      transparent
    ) left center / 1px 66% no-repeat,

    linear-gradient(
      180deg,
      transparent,
      rgba(244, 204, 126, 0.2),
      transparent
    ) right center / 1px 66% no-repeat;
}
.sidebar-media-inset-bronze-frame::after {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 5;
  pointer-events: none;
  border: 1px solid rgba(75, 130, 136, 0.2);
}
.sidebar-media-inset-bronze-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  pointer-events: none;
  filter: none;
  transform: none;
  transition: none;
}
.sidebar-widget-container--server .sidebar-badge-header__text {
  color: #ffe6ad;
  text-shadow: 0 0 8px #000,
    0 0 12px rgba(255, 221, 160, 0.36),
    0 0 18px rgba(255, 185, 90, 0.12);
}
.sidebar--right .sidebar-list,
.sidebar-list--right,
.sidebar-list--server {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sidebar-list--server .sidebar-list-item {
  position: relative;
  min-height: 34px;
  padding: 6px 8px;
  overflow: hidden;
  border-radius: 4px;
  background: radial-gradient(
      ellipse at 88% 50%,
      rgba(255, 221, 160, 0.07) 0%,
      transparent 55%
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.022) 0%,
      rgba(255, 216, 148, 0.052) 48%,
      rgba(255, 255, 255, 0.016) 100%
    );
  border: 1px solid rgba(217, 172, 108, 0.16);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 232, 186, 0.05),
    inset 0 0 10px rgba(255, 221, 160, 0.025);
  transition: border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}
.sidebar-list--server .sidebar-list-item::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 0;
  height: 1px;
  opacity: 0.76;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 221, 160, 0.22),
      transparent
    );
}
.sidebar-list--server .sidebar-list-item::after {
  content: "";
  position: absolute;
  right: -20px;
  top: 50%;
  width: 70px;
  height: 48px;
  opacity: 0.2;
  pointer-events: none;
  transform: translateY(-50%);
  background: radial-gradient(
      ellipse at center,
      rgba(255, 196, 92, 0.46) 0%,
      rgba(255, 196, 92, 0.12) 42%,
      transparent 72%
    );
  filter: blur(10px);
}
.sidebar-list--server .sidebar-list-item:hover {
  border-color: rgba(217, 172, 108, 0.34);
  background: radial-gradient(
      ellipse at 88% 50%,
      rgba(255, 221, 160, 0.11) 0%,
      transparent 56%
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 216, 148, 0.07) 48%,
      rgba(255, 255, 255, 0.02) 100%
    );
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 232, 186, 0.07),
    inset 0 0 14px rgba(255, 221, 160, 0.045);
}
.sidebar-list-item--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.sidebar--right .sidebar-list-label,
.sidebar--right .sidebar-list-item span:first-child {
  position: relative;
  z-index: 2;
  min-width: 0;
  color: rgba(191, 167, 122, 0.72);
  font-family: "Cormorant SC", serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85),
    0 0 7px rgba(217, 172, 108, 0.08);
  transition: color 0.22s ease,
    text-shadow 0.22s ease;
}
.sidebar-list-value,
.sidebar-online {
  position: relative;
  z-index: 2;
  color: #ffe8ba;
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
  text-align: right;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(255, 221, 160, 0.18),
    0 1px 0 rgba(0, 0, 0, 0.8);
  transition: color 0.22s ease,
    text-shadow 0.22s ease;
}
.sidebar-list--server .sidebar-list-item:hover .sidebar-list-label,
.sidebar-list--server .sidebar-list-item:hover span:first-child {
  color: rgba(255, 221, 160, 0.78);
}
.sidebar-list-item--season::after {
  background: radial-gradient(
      ellipse at center,
      rgba(255, 196, 92, 0.5) 0%,
      rgba(255, 196, 92, 0.13) 43%,
      transparent 74%
    );
}
.sidebar-list-item--online::after {
  background: radial-gradient(
      ellipse at center,
      rgba(112, 162, 181, 0.58) 0%,
      rgba(112, 162, 181, 0.14) 43%,
      transparent 74%
    );
}
.sidebar-online {
  color: #9ed7ec;
  text-shadow: 0 0 8px rgba(112, 162, 181, 0.38),
    0 1px 0 rgba(0, 0, 0, 0.9);
}
.sidebar-list-item--online:hover .sidebar-online {
  color: #b8ecff;
  text-shadow: 0 0 10px rgba(112, 162, 181, 0.5),
    0 1px 0 rgba(0, 0, 0, 0.95);
}
.sidebar-list-item--classes::after {
  background: radial-gradient(
      ellipse at center,
      rgba(180, 137, 255, 0.38) 0%,
      rgba(180, 137, 255, 0.11) 43%,
      transparent 74%
    );
}
.sidebar-list-item--resets::after {
  background: radial-gradient(
      ellipse at center,
      rgba(255, 221, 160, 0.46) 0%,
      rgba(255, 221, 160, 0.11) 43%,
      transparent 74%
    );
}
.sidebar-list-item:hover .sidebar-list-value {
  color: #ffdda0;
  text-shadow: 0 0 9px rgba(255, 221, 160, 0.34),
    0 1px 0 rgba(0, 0, 0, 0.95);
}
.sidebar-event-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sidebar-event-list--right {
  gap: 5px;
}
.sidebar-event-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 5px 8px;
  overflow: hidden;
  border-radius: 4px;
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.018) 0%,
      rgba(255, 216, 148, 0.032) 48%,
      rgba(255, 255, 255, 0.014) 100%
    );
  border: 1px solid rgba(191, 167, 122, 0.12);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 232, 186, 0.035);
  transition: border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}
.sidebar-event-item::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 0;
  height: 1px;
  opacity: 0.6;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 221, 160, 0.14),
      transparent
    );
}
.sidebar-event-item::after {
  content: "";
  position: absolute;
  right: -20px;
  top: 50%;
  width: 68px;
  height: 44px;
  opacity: 0.15;
  pointer-events: none;
  transform: translateY(-50%);
  background: radial-gradient(
      ellipse at center,
      rgba(255, 196, 92, 0.42) 0%,
      rgba(255, 196, 92, 0.11) 42%,
      transparent 72%
    );
  filter: blur(10px);
}
.sidebar-event-item:hover {
  border-color: rgba(191, 167, 122, 0.26);
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.026) 0%,
      rgba(255, 216, 148, 0.055) 48%,
      rgba(255, 255, 255, 0.016) 100%
    );
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 232, 186, 0.05);
}
.sidebar-event-name {
  position: relative;
  z-index: 2;
  min-width: 0;
  color: #ffe8ba;
  font-family: "Cormorant SC", serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 8px rgba(255, 221, 160, 0.13),
    0 1px 0 rgba(0, 0, 0, 0.9);
  transition: color 0.22s ease,
    text-shadow 0.22s ease;
}
.sidebar-event-item:hover .sidebar-event-name {
  color: #ffdda0;
}
.event-timer-seal {
  position: relative;
  z-index: 2;
  width: fit-content;
  min-width: 54px;
  height: 22px;
  padding: 3px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  border: 1px solid rgba(217, 172, 108, 0.3);
  background: linear-gradient(
      180deg,
      rgba(55, 48, 39, 0.78) 0%,
      rgba(25, 24, 23, 0.82) 100%
    );
  box-shadow: inset 0 0 8px rgba(217, 172, 108, 0.15),
    inset 0 1px 0 rgba(255, 232, 186, 0.055),
    0 2px 4px rgba(0, 0, 0, 0.5);
}
.event-timer-seal::before,
.event-timer-seal::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #ffdda0;
  box-shadow: 0 0 3px #ffdda0;
  transform: translateY(-50%);
}
.event-timer-seal::before {
  left: -4px;
}
.event-timer-seal::after {
  right: -4px;
}
.event-timer-digits {
  color: #ffdda0;
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.025em;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(217, 172, 108, 0.36),
    0 1px 0 rgba(0, 0, 0, 0.9);
}
.sidebar-market-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: visible !important;
}
.sidebar-market-item {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 3px 7px 3px 5px;
  overflow: visible !important;
  border-radius: 4px;
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.015) 0%,
      rgba(255, 216, 148, 0.026) 48%,
      rgba(255, 255, 255, 0.012) 100%
    );
  border: 1px solid rgba(191, 167, 122, 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 232, 186, 0.03);
  transition: border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}
.sidebar-market-item::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 0;
  height: 1px;
  opacity: 0.55;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 221, 160, 0.12),
      transparent
    );
}
.sidebar-market-item::after {
  content: "";
  position: absolute;
  right: -20px;
  top: 50%;
  width: 58px;
  height: 38px;
  opacity: 0.12;
  pointer-events: none;
  transform: translateY(-50%);
  background: radial-gradient(
      ellipse at center,
      rgba(255, 196, 92, 0.38) 0%,
      rgba(255, 196, 92, 0.09) 42%,
      transparent 72%
    );
  filter: blur(10px);
}
.sidebar-market-item:hover {
  border-color: rgba(191, 167, 122, 0.24);
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.022) 0%,
      rgba(255, 216, 148, 0.045) 48%,
      rgba(255, 255, 255, 0.016) 100%
    );
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 232, 186, 0.05);
}
.sidebar-market-tip {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: block;
  cursor: help;
  overflow: visible !important;
}
.sidebar-market-tip.tooltip::after {
  top: calc(100% + 10px) !important;
  bottom: auto !important;
  left: 50% !important;
  width: max-content;
  min-width: 72px;
  max-width: 220px;
  white-space: nowrap !important;
  text-align: center;
  z-index: 9999 !important;
  pointer-events: none;
  transform: translate(-50%, -5px) !important;
}
.sidebar-market-tip.tooltip:hover::after {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate(-50%, 0) !important;
}
.sidebar-market-icon {
  position: relative;
  z-index: 2;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(
      circle at 50% 42%,
      rgba(255, 221, 160, 0.12) 0%,
      rgba(255, 221, 160, 0.04) 45%,
      rgba(0, 0, 0, 0.2) 100%
    );
  border: 1px solid rgba(217, 172, 108, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 232, 186, 0.02),
    0 1px 3px rgba(0, 0, 0, 0.32);
  transition: border-color 0.18s ease,
    box-shadow 0.18s ease;
}
.sidebar-market-icon-img {
  display: block;
  max-width: 19px;
  max-height: 19px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.52))
    drop-shadow(0 0 4px rgba(255, 221, 160, 0.07));
}
.sidebar-market-icon-empty {
  width: 9px;
  height: 9px;
  display: block;
  transform: rotate(45deg);
  border: 1px solid rgba(255, 221, 160, 0.32);
  background: rgba(255, 221, 160, 0.045);
  box-shadow: 0 0 5px rgba(255, 221, 160, 0.07);
}
.sidebar-market-name {
  position: relative;
  z-index: 2;
  min-width: 0;
  max-width: 100%;
  display: inline-block;
  padding-bottom: 1px;
  font-family: "Cormorant SC", serif;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
  text-shadow: 0 0 8px rgba(255, 221, 160, 0.11),
    0 1px 0 rgba(0, 0, 0, 0.9);
  transition: color 0.22s ease,
    text-shadow 0.22s ease;
}
.sidebar-market-name::after {
  display: none;
}
.sidebar-market-item:hover .sidebar-market-icon {
  border-color: rgba(255, 221, 160, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255, 232, 186, 0.04),
    0 1px 4px rgba(0, 0, 0, 0.38),
    0 0 7px rgba(255, 221, 160, 0.07);
}
@media (max-width: 1440px) {
  .sidebar--right {
    --sidebar-max-width: 250px;
  }
  .sidebar--right .sidebar-badge-header {
    width: 140px;
  }
  .sidebar--right .sidebar-badge-header__text {
    font-size: 10px;
  }
  .sidebar--right .sidebar-list-label,
  .sidebar--right .sidebar-list-item span:first-child {
    font-size: 10px;
  }
  .sidebar-list-value,
  .sidebar-online {
    font-size: 11px;
  }
  .sidebar-list--server .sidebar-list-item {
    min-height: 32px;
    padding: 5px 7px;
  }
  .sidebar-event-item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    padding-left: 7px;
    padding-right: 7px;
  }
  .sidebar-event-name {
    font-size: 10px;
  }
  .event-timer-seal {
    min-width: 50px;
    padding-left: 7px;
    padding-right: 7px;
  }
  .event-timer-digits {
    font-size: 11px;
  }
  .sidebar-market-item {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 5px;
    min-height: 27px;
    padding: 3px 6px 3px 5px;
  }
  .sidebar-market-icon {
    width: 21px;
    height: 21px;
  }
  .sidebar-market-icon-img {
    max-width: 18px;
    max-height: 18px;
  }
  .sidebar-market-name {
    font-size: 10px;
  }
  .sidebar-media-inset-bronze-frame {
    max-width: 220px;
    padding: 5px;
  }
}
@media (max-width: 768px) {
  .sidebar--right {
    --sidebar-max-width: 100%;
    max-width: 450px;
    height: auto;
    min-height: 0;
    padding: 20px 15px 25px;
  }
  .sidebar--right .sidebar-content {
    margin-top: 18px;
  }
  .sidebar--right .sidebar-badge-header {
    width: 175px;
  }
  .sidebar--right .sidebar-badge-header__text {
    font-size: 12px;
  }
  .sidebar--right .sidebar-list-label,
  .sidebar--right .sidebar-list-item span:first-child {
    font-size: 11px;
  }
  .sidebar-list-value,
  .sidebar-online {
    font-size: 12px;
  }
  .sidebar-event-name {
    font-size: 11px;
  }
  .event-timer-digits {
    font-size: 12px;
  }
  .sidebar-market-item {
    grid-template-columns: 26px minmax(0, 1fr);
    min-height: 30px;
  }
  .sidebar-market-icon {
    width: 24px;
    height: 24px;
  }
  .sidebar-market-icon-img {
    max-width: 21px;
    max-height: 21px;
  }
  .sidebar-market-name {
    font-size: 12px;
  }
  .sidebar-top-media-inset {
    margin-top: 28px !important;
    margin-bottom: 8px;
  }
  .sidebar-media-inset-bronze-frame {
    width: 100%;
    max-width: 250px;
    margin-left: 0;
    margin-right: 0;
    padding: 5px;
  }
}
@media (max-width: 520px) {
  .sidebar-top-media-inset {
    margin-top: 26px !important;
    margin-bottom: 8px;
  }
  .sidebar-media-inset-bronze-frame {
    max-width: 225px;
    padding: 4px;
  }
  .sidebar-media-inset-bronze-inner {
    box-shadow: inset 0 0 0 1px rgba(78, 142, 148, 0.1),
      inset 0 0 12px rgba(0, 0, 0, 0.54);
  }
  .sidebar-media-inset-bronze-frame::before {
    inset: 3px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(244, 204, 126, 0.56),
        transparent
      ) center top / 74% 1px no-repeat,

      linear-gradient(
        90deg,
        transparent,
        rgba(244, 204, 126, 0.32),
        transparent
      ) center bottom / 74% 1px no-repeat,

      linear-gradient(
        180deg,
        transparent,
        rgba(244, 204, 126, 0.18),
        transparent
      ) left center / 1px 62% no-repeat,

      linear-gradient(
        180deg,
        transparent,
        rgba(244, 204, 126, 0.18),
        transparent
      ) right center / 1px 62% no-repeat;
  }
  .sidebar-media-inset-bronze-frame::after {
    inset: 4px;
  }
}
@media (max-width: 380px) {
  .sidebar-top-media-inset {
    margin-top: 24px !important;
    margin-bottom: 7px;
  }
  .sidebar-media-inset-bronze-frame {
    max-width: 205px;
    padding: 4px;
  }
}
@media (max-width: 1024px) and (orientation: landscape) and (max-height: 520px) {
  .layout-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas: "left"
      "main"
      "right";
    gap: 14px;
    padding: 12px;
    max-height: none;
    box-sizing: border-box;
  }
  .sidebar-left {
    grid-area: left;
  }
  .sidebar-right {
    grid-area: right;
  }
  .main-content {
    grid-area: main;
  }
  .sidebar-left,
  .sidebar-right {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block;
    box-sizing: border-box;
    overflow: visible;
  }
  .sidebar,
  .sidebar--right {
    --sidebar-max-width: 100%;
    --sidebar-landscape-inset: 20px;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto;
    min-height: 0;
    padding: 20px 15px 25px;
    box-sizing: border-box;
    zoom: 1 !important;
    transform: none !important;
    overflow: visible;
  }
  .sidebar-content,
  .sidebar--right .sidebar-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-top: 18px;
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--sidebar-landscape-inset);
    padding-right: var(--sidebar-landscape-inset);
    gap: 5px;
    box-sizing: border-box;
    overflow: visible;
  }
  .sidebar-widget-container,
  .sidebar-widget-container--right,
  .sidebar--right .sidebar-widget-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-top: 6px;
    margin-bottom: 6px;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    overflow: visible;
  }
  .sidebar-widget-container > *,
  .sidebar-widget-container--right > *,
  .sidebar--right .sidebar-widget-container > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .sidebar .ornate-frame,
  .sidebar--right .ornate-frame,
  .sidebar .ornate-frame-root,
  .sidebar--right .ornate-frame-root,
  .sidebar [class*="ornate-frame"],
  .sidebar--right [class*="ornate-frame"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    overflow: visible;
  }
  .sidebar .ornate-frame-content,
  .sidebar--right .ornate-frame-content,
  .sidebar [class*="ornate-frame-content"],
  .sidebar--right [class*="ornate-frame-content"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: visible;
  }
  .sidebar .ornate-frame > *,
  .sidebar--right .ornate-frame > *,
  .sidebar .ornate-frame-root > *,
  .sidebar--right .ornate-frame-root > *,
  .sidebar .ornate-frame-content > *,
  .sidebar--right .ornate-frame-content > * {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .sidebar-left-top-media-inset,
.sidebar-top-media-inset {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-top: 35px !important;
    margin-bottom: 10px;
    padding-left: calc(var(--sidebar-landscape-inset) + 5px);
    padding-right: calc(var(--sidebar-landscape-inset) + 5px);
    box-sizing: border-box;
    overflow: visible;
  }
  .sidebar-left-media-inset-bronze-frame,
.sidebar-media-inset-bronze-frame {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 5px;
    box-sizing: border-box;
    transform: none !important;
  }
  .sidebar-left-media-inset-bronze-frame::before,
.sidebar-media-inset-bronze-frame::before {
    inset: 4px;
  }
  .sidebar-left-media-inset-bronze-frame::after,
.sidebar-media-inset-bronze-frame::after {
    inset: 5px;
  }
  .sidebar-left-media-inset-bronze-inner,
.sidebar-media-inset-bronze-inner {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
  }
  .sidebar-left-media-inset-bronze-img,
.sidebar-media-inset-bronze-img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    box-sizing: border-box;
  }
  .sidebar-badge-header,
  .sidebar--right .sidebar-badge-header {
    width: 175px;
    max-width: calc(100% - 28px);
  }
  .sidebar-badge-header__text,
  .sidebar--right .sidebar-badge-header__text {
    font-size: 12px;
  }
  .siege-row,
  .siege-row--owner,
  .siege-row--stage {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-items: start;
    justify-items: center;
    gap: 4px;
    min-height: 46px;
    padding: 7px 10px 6px;
    text-align: center;
    box-sizing: border-box;
  }
  .siege-row .siege-label,
  .siege-row--owner .siege-label,
  .siege-row--stage .siege-label,
  .siege-row .siege-value,
  .siege-row--owner .siege-value,
  .siege-row--stage .siege-value {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-self: center;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
  }
  .siege-row .siege-label,
  .siege-row--owner .siege-label,
  .siege-row--stage .siege-label {
    font-size: 11px;
    line-height: 1.1;
  }
  .siege-row .siege-value,
  .siege-row--owner .siege-value,
  .siege-row--stage .siege-value {
    font-size: 12px;
    line-height: 1.1;
  }
  .siege-value--owner {
    max-width: 100%;
  }
  .siege-timer-block {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .arca-content,
  .arca-winners-container,
  .arca-winner-group {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-items: center;
    box-sizing: border-box;
    overflow: visible !important;
  }
  .arca-winner-row {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
    align-items: center;
    justify-items: center;
    gap: 8px;
    padding: 5px 10px;
    box-sizing: border-box;
    overflow: visible !important;
  }
  .arca-winner-guild {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-self: end;
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .arca-tower-icon-shell {
    justify-self: center;
  }
  .arca-tower-name-mini {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
    justify-self: start;
    font-size: 11px;
    text-align: left;
    white-space: nowrap;
    overflow: visible !important;
    text-overflow: clip;
  }
  .arca-tower-name-mini.tooltip {
    margin-left: 0;
  }
  .arca-divider,
  .arca-timer-block {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
  .sidebar--right .sidebar-list,
  .sidebar-list--right,
  .sidebar-list--server,
  .sidebar-event-list,
  .sidebar-event-list--right,
  .sidebar-market-list {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .sidebar-list--server .sidebar-list-item,
  .sidebar-event-item,
  .sidebar-market-item {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }
  .sidebar-list-item--split {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .sidebar--right .sidebar-list-label,
  .sidebar--right .sidebar-list-item span:first-child {
    font-size: 11px;
  }
  .sidebar-list-value,
  .sidebar-online {
    font-size: 12px;
  }
  .sidebar-event-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .sidebar-event-name {
    font-size: 11px;
  }
  .event-timer-digits {
    font-size: 12px;
  }
  .sidebar-market-item {
    grid-template-columns: 26px minmax(0, 1fr);
    min-height: 30px;
  }
  .sidebar-market-icon {
    width: 24px;
    height: 24px;
  }
  .sidebar-market-icon-img {
    max-width: 21px;
    max-height: 21px;
  }
  .sidebar-market-name {
    font-size: 12px;
  }
}
@media (max-width: 768px) and (orientation: portrait) {
  .sidebar,
  .sidebar--right {
    background: url("/ui/sidebar_mobile.png") no-repeat center top / 100% 100% !important;
  }
}
@media (max-width: 1024px) and (orientation: landscape) and (max-height: 520px) {
  .sidebar,
  .sidebar--right {
    background: url("/ui/sidebar_landscape.png") no-repeat center top / 100% 100% !important;
  }
}
@media (max-width: 768px) and (orientation: portrait) {
  .arca-content,
  .arca-winners-container,
  .arca-winner-group {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-items: center;
    box-sizing: border-box;
    overflow: visible !important;
  }
  .arca-winner-row {
    width: calc(100% - 14px);
    max-width: calc(100% - 14px);
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
    align-items: center;
    justify-items: center;
    gap: 7px;
    padding: 5px 9px;
    box-sizing: border-box;
    overflow: visible !important;
  }
  .arca-winner-guild {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-self: end;
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .arca-tower-icon-shell {
    justify-self: center;
    width: 34px;
    height: 34px;
  }
  .arca-tower-icon-mini {
    width: 30px;
    height: 30px;
  }
  .arca-tower-name-mini {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
    justify-self: start;
    font-size: 11px;
    text-align: left;
    white-space: nowrap;
    overflow: visible !important;
    text-overflow: clip;
  }
  .arca-tower-name-mini.tooltip {
    margin-left: 0;
  }
  .arca-divider,
  .arca-timer-block {
    width: calc(100% - 14px);
    max-width: calc(100% - 14px);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
}
.login-page {
  --login-text: #ecd7b9;
  --login-text-soft: #cdb38e;
  --login-text-dim: #9e815b;
  --login-gold-1: #f4ddad;
  --login-gold-2: #d7b478;
  --login-gold-3: #8a623c;
  --login-gold-4: #5c3e24;
  --login-blue-1: rgba(156, 212, 255, 0.18);
  --login-blue-2: rgba(117, 186, 244, 0.28);
  --login-input-bg-top: #413221;
  --login-input-bg-bottom: #1c1a17;
  --login-input-bg-focus-top: #4b3a26;
  --login-input-bg-focus-bottom: #201b16;
  --login-input-text: #e7d2af;
  --login-input-text-focus: #fff0cb;
  --login-input-placeholder: rgba(215, 194, 166, 0.58);
  --auth-frame-width: 608px;
  --auth-form-width: 310px;
  min-height: calc(100dvh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px 48px;
  box-sizing: border-box;
}
.login-frame {
  width: min(var(--auth-frame-width), 100%);
  min-height: 576px;
  position: relative;
  background: url("/ui/login_frame.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 18px 35px rgba(0, 0, 0, 0.45));
  box-sizing: border-box;
}
.login-frame__inner {
  width: 100%;
  min-height: 576px;
  padding: clamp(62px, 5.6vw, 77px)
    clamp(46px, 5.6vw, 66px)
    clamp(51px, 4.8vw, 67px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
.login-head {
  text-align: center;
  margin-bottom: 22px;
}
.login-title-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.login-title-hero {
  position: relative;
  display: inline-block;
  margin: 0;
  line-height: 1;
  font-family: "Cormorant SC", serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(
    180deg,
    #f8efcf 0%,
    #e3c78d 48%,
    #a6703f 78%,
    #5f3d23 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0.35px rgba(255, 247, 222, 0.22);
}
.login-title-hero::before {
  display: none;
  content: none;
}
.login-subtitle {
  margin: 14px 0 0;
  color: var(--login-text-soft);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.login-form {
  width: min(100%, var(--auth-form-width));
  max-width: var(--auth-form-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.login-form > * {
  width: 100%;
  min-width: 0;
}
.login-form-item {
  margin: 0;
  width: 100%;
  min-width: 0;
}
.login-label {
  display: block;
  margin-bottom: 7px;
  color: var(--login-text-soft);
  font-family: "Cormorant SC", serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.login-input-frame {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 48px;
  margin: 0;
  display: block;
  overflow: hidden;
  box-sizing: border-box;
  background: linear-gradient(
    180deg,
    var(--login-input-bg-top) 0%,
    var(--login-input-bg-bottom) 100%
  );
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(224, 191, 121, 0.92),
    inset 0 0 0 3px rgba(8, 10, 12, 0.96),
    inset 0 0 0 4px rgba(224, 191, 121, 0.24),
    inset 0 0 14px rgba(255, 210, 140, 0.035);
  transition: box-shadow 0.18s ease,
    filter 0.18s ease,
    transform 0.14s ease,
    background 0.18s ease;
}
.login-input-frame::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4px;
  background: linear-gradient(
      180deg,
      rgba(255, 226, 164, 0.055) 0%,
      rgba(255, 226, 164, 0.012) 42%,
      rgba(0, 0, 0, 0.2) 100%
    );
  pointer-events: none;
}
.login-input-frame::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 4px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 232, 179, 0.36) 18%,
    rgba(255, 232, 179, 0.48) 50%,
    rgba(255, 232, 179, 0.36) 82%,
    transparent 100%
  );
  opacity: 0.62;
  pointer-events: none;
}
.input_dark {
  background: linear-gradient(
    180deg,
    var(--login-input-bg-top) 0%,
    var(--login-input-bg-bottom) 100%
  );
}
.input_dark .login-input-shell {
  color: var(--login-input-text);
}
.input_light {
  background: linear-gradient(
    180deg,
    var(--login-input-bg-focus-top) 0%,
    var(--login-input-bg-focus-bottom) 100%
  );
  transform: translateY(-1px);
  filter: drop-shadow(0 0 8px rgba(236, 195, 118, 0.12))
    drop-shadow(0 0 18px rgba(255, 210, 140, 0.05));
  box-shadow: 0 9px 20px rgba(0, 0, 0, 0.46),
    inset 0 0 0 1px rgba(241, 210, 143, 0.98),
    inset 0 0 0 3px rgba(8, 10, 12, 0.98),
    inset 0 0 0 4px rgba(241, 210, 143, 0.34),
    inset 0 0 16px rgba(255, 219, 150, 0.08),
    inset 0 0 28px rgba(129, 187, 255, 0.035);
}
.input_light::after {
  opacity: 0.9;
}
.input_light .login-input-shell {
  color: var(--login-input-text-focus);
}
.login-input-frame:hover {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.44),
    inset 0 0 0 1px rgba(235, 202, 132, 0.96),
    inset 0 0 0 3px rgba(8, 10, 12, 0.98),
    inset 0 0 0 4px rgba(235, 202, 132, 0.3),
    inset 0 0 14px rgba(255, 210, 140, 0.05);
}
.login-input-frame:has(.login-input-shell[aria-invalid="true"]) {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.46),
    inset 0 0 0 1px rgba(255, 154, 154, 0.92),
    inset 0 0 0 3px rgba(8, 10, 12, 0.98),
    inset 0 0 0 4px rgba(255, 154, 154, 0.22),
    inset 0 0 14px rgba(255, 90, 90, 0.08);
}
.login-input-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 20px;
  display: block;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  font-size: 12px;
  line-height: 48px;
  letter-spacing: 0.035em;
  appearance: none;
  -webkit-appearance: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.42);
}
.login-input-shell::placeholder {
  color: var(--login-input-placeholder);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.38);
}
.login-input-shell:focus {
  outline: none;
}
.login-input-shell:-webkit-autofill,
.login-input-shell:-webkit-autofill:hover,
.login-input-shell:-webkit-autofill:focus {
  -webkit-text-fill-color: #f4dfb9;
  caret-color: #f4dfb9;
  transition: background-color 9999s ease-in-out 0s;
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  box-shadow: 0 0 0 1000px transparent inset;
}
.login-error {
  margin-top: 6px;
  color: #f3a8a8;
  font-size: 13px;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
  text-align: center;
}
.login-options-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 2px;
  margin-bottom: 8px;
}
.login-checkbox-item {
  margin: 0;
}
.login-forgot-link {
  font-size: 12px;
  white-space: nowrap;
}
.mu-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.mu-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.mu-check__box {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  position: relative;
  background: url("/ui/check_box_sq.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 8px rgba(244, 214, 161, 0.08));
  transition: transform 0.14s ease,
    filter 0.18s ease,
    opacity 0.18s ease;
}
.mu-check__box::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: url("/ui/check_icon.png") center / 13px 13px no-repeat;
  opacity: 0;
  transform: scale(0.72);
  transition: opacity 0.16s ease,
    transform 0.16s ease;
}
.mu-check input:checked + .mu-check__box::after {
  opacity: 1;
  transform: scale(1);
}
.mu-check:hover .mu-check__box {
  transform: translateY(-1px);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 10px rgba(244, 214, 161, 0.18));
}
.mu-check__label {
  color: var(--login-text);
  font-size: 13px;
  line-height: 1.1;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.login-mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 2px;
  margin-bottom: 2px;
}
.login-mode-check.is-active .mu-check__label {
  color: #fff0c8;
  text-shadow: 0 0 8px rgba(255, 224, 168, 0.18),
    0 1px 6px rgba(0, 0, 0, 0.42);
}
.login-submit-btn {
  margin: 8px auto 0;
}
.login-submit-btn__label {
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-submit-word {
  position: relative;
  display: inline-block;
  letter-spacing: 0.08em;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  color: #f2d49a96;
  background: linear-gradient(
      180deg,
      #fffef1 0%,
      #fff1c6 16%,
      #f6db9c 38%,
      #d6a865 60%,
      #fff0c6 82%,
      #fffef0 100%
    );
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 12px rgba(255, 230, 166, 0.24),
    0 0 24px rgba(255, 205, 120, 0.18),
    0 2px 0 rgba(59, 37, 20, 0.72);
  animation: loginWordPulse 2.2s ease-in-out infinite;
}
.login-submit-word::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 74%;
  height: 7px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255, 228, 157, 0.42), transparent 72%);
  filter: blur(4px);
  pointer-events: none;
}
@keyframes loginWordPulse {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.16);
  }
}
.login-inline-action {
  border: 0;
  padding: 0;
  background: transparent;
  color: #dfc091;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(223, 192, 145, 0.45);
  transition: color 0.16s ease,
    text-shadow 0.16s ease,
    opacity 0.16s ease,
    transform 0.14s ease,
    text-decoration-color 0.16s ease;
}
.login-inline-action:hover,
.login-inline-action.is-active {
  color: #fff0c8;
  text-shadow: 0 0 8px rgba(255, 224, 168, 0.18),
    0 1px 6px rgba(0, 0, 0, 0.42);
  text-decoration-color: rgba(255, 240, 200, 0.78);
}
.login-inline-action:hover {
  transform: translateY(-1px);
}
.auth-link {
  color: #dfc091;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(223, 192, 145, 0.45);
  transition: color 0.16s ease,
    text-shadow 0.16s ease,
    opacity 0.16s ease,
    text-decoration-color 0.16s ease;
}
.auth-link:hover {
  color: #fff0c8;
  text-shadow: 0 0 8px rgba(255, 224, 168, 0.18),
    0 1px 6px rgba(0, 0, 0, 0.42);
  text-decoration-color: rgba(255, 240, 200, 0.78);
}
.auth-link--strong {
  font-weight: 600;
}
.login-register {
  margin-top: 16px;
  text-align: center;
  color: var(--login-text-soft);
  font-size: 13px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.register-page {
  --auth-form-width: 310px;
}
.register-page .register-frame {
  min-height: 700px;
  background: url("/ui/login_frame1.png") center / 85% 90% no-repeat;
}
.register-page .register-frame__inner {
  min-height: 700px;
  align-items: center;
}
.register-page .register-head {
  margin-bottom: 20px;
}
.register-page .register-form,
.register-page .login-form {
  width: min(100%, var(--auth-form-width));
  max-width: var(--auth-form-width);
  margin: 0 auto;
  gap: 10px;
  min-width: 0;
}
.register-page .register-form > *,
.register-page .login-form > * {
  width: 100%;
  min-width: 0;
}
.register-page .login-form-item,
.register-page .register-legal-item {
  width: 100%;
  min-width: 0;
}
.register-page .register-input-frame {
  position: relative;
}
.register-page .register-input-frame--hint .tooltip {
  z-index: 5;
}
.register-page .register-input-shell--hint {
  padding-right: 40px;
}
.register-legal-item {
  margin-top: 4px;
}
.register-legal-check {
  width: 100%;
  align-items: flex-start;
  gap: 10px;
}
.register-legal-text {
  color: var(--login-text);
  font-size: 12px;
  line-height: 1.35;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.register-legal-check .mu-check__box {
  margin-top: 1px;
}
.register-page .login-options-row {
  width: 100%;
}
.register-page .login-submit-btn {
  margin-top: 10px;
}
.register-page .login-register {
  width: min(100%, var(--auth-form-width));
  max-width: var(--auth-form-width);
  margin: 16px auto 0;
}
.register-page .menu-btn-long:disabled,
.register-page .menu-btn-long.is-disabled {
  opacity: 0.58;
  pointer-events: none;
  cursor: default;
  filter: grayscale(0.08);
}
.register-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.register-input-row .login-input-frame {
  flex: 1 1 auto;
  min-width: 0;
}
.register-input-row .tooltip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.forgot-page {
  --auth-form-width: 310px;
}
.forgot-page .forgot-frame {
  width: min(var(--auth-frame-width), 100%);
  min-height: 374px;
  background: url("/ui/login_frame2.png") center / 100% 100% no-repeat;
}
.forgot-page .forgot-frame__inner {
  min-height: 374px;
  align-items: center;
  justify-content: center;
  padding: clamp(36px, 3.7vw, 48px)
    clamp(42px, 5vw, 60px)
    clamp(34px, 3.5vw, 44px);
}
.forgot-page .forgot-head {
  width: min(100%, 340px);
  max-width: 340px;
  margin: 0 auto 14px;
  text-align: center;
}
.forgot-page .login-title-hero {
  font-size: 23px;
}
.forgot-page .login-subtitle {
  margin-top: 10px;
  font-size: 10px;
  line-height: 1.25;
}
.forgot-page .forgot-form,
.forgot-page .login-form {
  width: min(100%, var(--auth-form-width));
  max-width: var(--auth-form-width);
  margin: 0 auto;
  gap: 8px;
  min-width: 0;
}
.forgot-page .forgot-form > *,
.forgot-page .login-form > * {
  width: 100%;
  min-width: 0;
}
.forgot-page .login-form-item {
  width: 100%;
  min-width: 0;
}
.forgot-page .login-label {
  margin-bottom: 5px;
  font-size: 13px;
}
.forgot-page .login-input-frame {
  height: 42px;
}
.forgot-page .login-input-shell {
  height: 42px;
  padding: 0 18px;
  line-height: 42px;
  font-size: 12px;
}
.forgot-page .login-error {
  margin-top: 4px;
  font-size: 12px;
}
.forgot-page .forgot-submit-btn {
  margin-top: 8px;
}
.forgot-page .forgot-back {
  width: min(100%, var(--auth-form-width));
  max-width: var(--auth-form-width);
  margin: 12px auto 0;
  text-align: center;
}
.reset-password-page .login-submit-word {
  font-size: 12px;
  letter-spacing: 0.055em;
}
@media (max-width: 768px) {
  .login-page {
    --auth-frame-width: 560px;
    --auth-form-width: 330px;
    min-height: calc(100dvh - 90px);
    padding: 20px 12px 34px;
  }
  .login-frame {
    width: min(var(--auth-frame-width), calc(100vw - 24px));
    min-height: 500px;
  }
  .login-frame__inner {
    min-height: 500px;
    padding: 50px 36px 40px;
  }
  .login-options-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .login-mode-switch {
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .register-page .register-frame {
    width: min(var(--auth-frame-width), calc(100vw - 24px));
    min-height: 610px;
    background: url("/ui/login_frame1.png") center / 100% 100% no-repeat;
  }
  .register-page .register-frame__inner {
    min-height: 610px;
    padding: 46px 36px 38px;
  }
  .forgot-page .forgot-frame {
    width: min(var(--auth-frame-width), calc(100vw - 24px));
    min-height: 350px;
    background: url("/ui/login_frame2.png") center / 100% 100% no-repeat;
  }
  .forgot-page .forgot-frame__inner {
    min-height: 350px;
    padding: 34px 34px 32px;
  }
  .forgot-page .forgot-head {
    margin-bottom: 12px;
  }
  .forgot-page .login-title-hero {
    font-size: 22px;
  }
}
@media (max-width: 520px) {
  .login-page {
    --auth-frame-width: calc(100vw - 24px);
    --auth-form-width: min(320px, calc(100vw - 76px));
    min-height: calc(100dvh - 76px);
    padding: 16px 12px 28px;
    align-items: flex-start;
  }
  .login-frame,
  .register-page .register-frame,
  .forgot-page .forgot-frame {
    width: var(--auth-frame-width);
    max-width: var(--auth-frame-width);
    background-size: 100% 100%;
  }
  .login-frame {
    min-height: 455px;
  }
  .login-frame__inner {
    min-height: 455px;
    padding: 50px 34px 34px;
  }
  .login-head {
    margin-bottom: 16px;
  }
  .login-title-hero {
    font-size: 23px;
    letter-spacing: 0.06em;
  }
  .login-subtitle {
    margin-top: 10px;
    font-size: 10px;
    line-height: 1.25;
    letter-spacing: 0.1em;
  }
  .login-form,
  .register-page .login-form,
  .register-page .register-form,
  .forgot-page .login-form,
  .forgot-page .forgot-form {
    width: var(--auth-form-width);
    max-width: var(--auth-form-width);
  }
  .login-label {
    margin-bottom: 5px;
    font-size: 12px;
    letter-spacing: 0.05em;
  }
  .login-input-frame {
    height: 40px;
  }
  .login-input-shell {
    height: 40px;
    line-height: 40px;
    padding: 0 16px;
    font-size: 11px;
  }
  .login-mode-switch {
    gap: 8px;
  }
  .mu-check__label {
    font-size: 12px;
  }
  .login-options-row {
    gap: 8px;
    margin-bottom: 6px;
  }
  .login-inline-action,
  .login-forgot-link,
  .auth-link {
    font-size: 12px;
  }
  .login-submit-word {
    font-size: 12px;
    letter-spacing: 0.055em;
  }
  .login-register {
    width: var(--auth-form-width);
    max-width: var(--auth-form-width);
    margin: 12px auto 0;
    font-size: 12px;
  }
  .register-page {
    --auth-form-width: min(320px, calc(100vw - 76px));
  }
  .register-page .register-frame {
    min-height: 555px;
    background: url("/ui/login_frame1.png") center / 100% 100% no-repeat;
  }
  .register-page .register-frame__inner {
    min-height: 555px;
    padding: 38px 34px 30px;
  }
  .register-page .register-head {
    margin-bottom: 14px;
  }
  .register-page .register-form,
  .register-page .login-form {
    gap: 7px;
  }
  .register-page .login-input-frame {
    height: 38px;
  }
  .register-page .login-input-shell {
    height: 38px;
    line-height: 38px;
    padding: 0 14px;
    font-size: 11px;
  }
  .register-input-row {
    gap: 8px;
  }
  .register-legal-item {
    margin-top: 2px;
  }
  .register-legal-check {
    gap: 8px;
  }
  .register-legal-text {
    font-size: 10.5px;
    line-height: 1.28;
  }
  .register-page .login-submit-btn {
    margin-top: 7px;
  }
  .register-page .login-register {
    width: var(--auth-form-width);
    max-width: var(--auth-form-width);
    margin-top: 11px;
  }
  .forgot-page {
    --auth-form-width: min(320px, calc(100vw - 76px));
  }
  .forgot-page .forgot-frame {
    min-height: 330px;
    background: url("/ui/login_frame2.png") center / 100% 100% no-repeat;
  }
  .forgot-page .forgot-frame__inner {
    min-height: 330px;
    padding: 30px 34px 28px;
  }
  .forgot-page .forgot-head {
    margin-bottom: 10px;
  }
  .forgot-page .login-title-hero {
    font-size: 20px;
  }
  .forgot-page .forgot-form,
  .forgot-page .login-form {
    gap: 7px;
  }
  .forgot-page .login-label {
    font-size: 11.5px;
    margin-bottom: 4px;
  }
  .forgot-page .login-input-frame {
    height: 38px;
  }
  .forgot-page .login-input-shell {
    height: 38px;
    line-height: 38px;
    padding: 0 14px;
    font-size: 11px;
  }
  .forgot-page .forgot-back {
    width: var(--auth-form-width);
    max-width: var(--auth-form-width);
    margin-top: 10px;
    font-size: 12px;
  }
  .reset-password-page .login-submit-word {
    font-size: 10.8px;
    letter-spacing: 0.025em;
  }
}
@media (max-width: 380px) {
  .login-page {
    --auth-frame-width: calc(100vw - 18px);
    --auth-form-width: min(300px, calc(100vw - 64px));
    padding-left: 9px;
    padding-right: 9px;
  }
  .login-frame,
  .register-page .register-frame,
  .forgot-page .forgot-frame {
    width: var(--auth-frame-width);
    max-width: var(--auth-frame-width);
  }
  .login-frame {
    min-height: 438px;
  }
  .login-frame__inner {
    min-height: 438px;
    padding: 52px 28px 30px;
  }
  .login-title-hero {
    font-size: 20px;
  }
  .login-input-frame {
    height: 38px;
  }
  .login-input-shell {
    height: 38px;
    line-height: 38px;
    padding: 0 13px;
  }
  .register-page .register-frame {
    min-height: 535px;
  }
  .register-page .register-frame__inner {
    min-height: 535px;
    padding: 34px 28px 28px;
  }
  .register-page .register-form,
  .register-page .login-form {
    gap: 6px;
  }
  .forgot-page .forgot-frame {
    min-height: 318px;
  }
  .forgot-page .forgot-frame__inner {
    min-height: 318px;
    padding: 28px 28px 26px;
  }
  .forgot-page .login-title-hero {
    font-size: 19px;
  }
}
@media (max-width: 1024px) and (orientation: landscape) and (max-height: 520px) {
  .login-page {
    --auth-frame-width: min(620px, calc(100vw - 24px));
    --auth-form-width: 340px;
    min-height: auto;
    padding: 12px;
    align-items: center;
  }
  .login-frame {
    width: var(--auth-frame-width);
    min-height: 390px;
  }
  .login-frame__inner {
    min-height: 520px;
    padding: 50px 58px 30px;
  }
  .login-head {
    margin-bottom: 14px;
  }
  .login-title-hero {
    font-size: 22px;
  }
  .login-form {
    gap: 8px;
  }
  .login-label {
    margin-bottom: 4px;
    font-size: 12px;
  }
  .login-input-frame {
    height: 38px;
  }
  .login-input-shell {
    height: 38px;
    line-height: 38px;
    padding: 0 15px;
    font-size: 11px;
  }
  .login-options-row {
    margin-bottom: 4px;
  }
  .login-submit-btn {
    margin-top: 5px;
  }
  .login-register {
    margin-top: 10px;
    font-size: 12px;
  }
  .register-page {
    --auth-frame-width: min(680px, calc(100vw - 24px));
    --auth-form-width: 390px;
  }
  .register-page .register-frame {
    width: var(--auth-frame-width);
    min-height: 430px;
    background: url("/ui/login_frame1.png") center / 100% 100% no-repeat;
  }
  .register-page .register-frame__inner {
    min-height: 430px;
    padding: 28px 76px 24px;
  }
  .register-page .register-head {
    margin-bottom: 10px;
  }
  .register-page .register-form,
  .register-page .login-form {
    gap: 5px;
  }
  .register-page .login-input-frame {
    height: 34px;
  }
  .register-page .login-input-shell {
    height: 34px;
    line-height: 34px;
    padding: 0 14px;
    font-size: 11px;
  }
  .register-legal-text {
    font-size: 10.5px;
    line-height: 1.22;
  }
  .forgot-page {
    --auth-frame-width: min(560px, calc(100vw - 24px));
    --auth-form-width: 330px;
  }
  .forgot-page .forgot-frame {
    width: var(--auth-frame-width);
    min-height: 300px;
    background: url("/ui/login_frame2.png") center / 100% 100% no-repeat;
  }
  .forgot-page .forgot-frame__inner {
    min-height: 300px;
    padding: 26px 58px 24px;
  }
  .forgot-page .login-title-hero {
    font-size: 20px;
  }
  .forgot-page .forgot-head {
    margin-bottom: 9px;
  }
  .forgot-page .forgot-form,
  .forgot-page .login-form {
    gap: 6px;
  }
  .forgot-page .login-input-frame {
    height: 36px;
  }
  .forgot-page .login-input-shell {
    height: 36px;
    line-height: 36px;
    padding: 0 14px;
    font-size: 11px;
  }
  .forgot-page .forgot-back {
    margin-top: 9px;
  }
}
.reset-password-page .login-submit-word {
  font-size: 12px;
  letter-spacing: 0.055em;
}
@media (max-width: 520px) {
  .reset-password-page .login-submit-word {
    font-size: 11px;
    letter-spacing: 0.035em;
  }
}
.market-page {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  --market-sidebar-width: 290px;
  --market-layout-gap: 24px;
  --mu-filter-size: 41px;
  --mu-filter-radius: 50%;
  --mu-card-width: 150px;
  --mu-card-gap-x: 18px;
  --mu-card-gap-y: 18px;
  padding-left: 10px;
  padding-right: 10px;
}
.market-page .tooltip {
  position: relative;
}
.market-page .tooltip::after {
  content: attr(data-title);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  min-width: 72px;
  max-width: 220px;
  width: max-content;
  padding: 9px 12px;
  color: #f0dfbf;
  background: linear-gradient(#413221 0%, #1c1a17 100%);
  font-family: "Cormorant SC", serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, 4px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(224, 191, 121, 0.95),
    inset 0 0 0 3px rgba(8, 10, 12, 0.98),
    inset 0 0 0 4px rgba(224, 191, 121, 0.28),
    inset 0 0 14px rgba(255, 210, 140, 0.03);
  transition: opacity 0.12s ease,
    transform 0.12s ease,
    visibility 0s linear 0.12s;
}
.market-page .tooltip:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.12s ease,
    transform 0.12s ease,
    visibility 0s linear 0s;
}
.market-page {
  --mu-filter-size: 49px;
}
.market-page .market-class-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 5px;
  justify-items: center;
  align-items: center;
  column-gap: 9px;
  row-gap: 9px;
  position: relative;
  z-index: 1;
}
.market-page .market-class-grid--4x4 {
  grid-template-columns: repeat(4, 1fr);
}
.market-page .market-class-all-row {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 18px;
}
.market-page .market-type-btn.market-class-all-btn {
  position: relative;
  min-width: 145px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(202, 166, 105, 0.24);
  border-radius: 0;
  background: linear-gradient(
      rgba(2, 9, 12, 0.24),
      rgba(2, 9, 12, 0.24)
    ),
    url("/ui/char_actions_bg.png") center center / 100% 100% no-repeat;
  color: #d9c09b;
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.42);
  cursor: pointer;
  transition: color 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease,
    transform 0.14s ease;
}
.market-page .market-type-btn.market-class-all-btn:hover {
  color: #ffe7b8;
  border-color: rgba(228, 185, 111, 0.58);
  background: linear-gradient(
      rgba(70, 45, 22, 0.38),
      rgba(10, 7, 5, 0.34)
    ),
    url("/ui/char_actions_bg.png") center center / 100% 100% no-repeat;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 232, 176, 0.16),
    inset 0 -1px 8px rgba(232, 170, 74, 0.12),
    0 0 10px rgba(255, 191, 91, 0.16);
  text-shadow: 0 0 6px rgba(255, 214, 145, 0.35);
}
.market-page .market-type-btn.market-class-all-btn.is-active {
  color: #fff3d0;
  border-color: rgba(244, 197, 116, 0.78);
  background: linear-gradient(
      rgba(96, 59, 24, 0.52),
      rgba(22, 12, 6, 0.48)
    ),
    url("/ui/char_actions_bg.png") center center / 100% 100% no-repeat;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 238, 190, 0.22),
    inset 0 -1px 10px rgba(255, 182, 74, 0.20),
    0 0 14px rgba(255, 191, 91, 0.24);
  text-shadow: 0 0 7px rgba(255, 220, 150, 0.45);
  outline: 1px solid rgba(255, 225, 160, 0.18);
  outline-offset: -3px;
}
.market-page .market-type-btn.market-class-all-btn.is-active:hover {
  color: #fff8e4;
  border-color: rgba(255, 216, 145, 0.9);
  background: linear-gradient(
      rgba(116, 70, 27, 0.58),
      rgba(28, 15, 7, 0.52)
    ),
    url("/ui/char_actions_bg.png") center center / 100% 100% no-repeat;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.50),
    inset 0 1px 0 rgba(255, 242, 204, 0.28),
    inset 0 -1px 12px rgba(255, 190, 84, 0.26),
    0 0 16px rgba(255, 201, 106, 0.32);
  text-shadow: 0 0 8px rgba(255, 226, 164, 0.58);
}
.market-page .mu-class-filter__frame {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.24s ease,
    transform 0.24s ease;
  margin-left: -2px;
}
.market-page .mu-class-filter__btn:hover .mu-class-filter__frame,
.market-page .mu-class-filter__btn.is-active .mu-class-filter__frame {
  opacity: 1;
  transform: scale(1);
}
.market-page .mu-class-filter__frame-img {
  width: 106%;
  height: 106%;
  display: block;
  object-fit: contain;
}
.market-page .mu-class-filter__content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.62);
  transition: box-shadow 0.2s ease,
    background-color 0.2s ease;
}
.market-page .mu-class-filter__content::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 0 0 16px rgba(210, 180, 120, 0.46);
  transition: opacity 0.3s ease-in-out;
}
.market-page .mu-class-filter__btn:hover .mu-class-filter__content {
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.72);
}
.market-page .mu-class-filter__btn:hover .mu-class-filter__content::after {
  opacity: 1;
  animation: muClassFilterPulseGlow 2s infinite ease-in-out;
}
.market-page .mu-class-filter__btn.is-active .mu-class-filter__content::after {
  opacity: 0;
  animation: none;
}
.market-page .mu-class-filter__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 50%;
}
@keyframes muClassFilterPulseGlow {
  0% {
    background-color: rgba(210, 180, 120, 0.1);
  }
  50% {
    background-color: rgba(210, 180, 120, 0.3);
  }
  100% {
    background-color: rgba(210, 180, 120, 0.1);
  }
}
.market-page .market-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--market-sidebar-width)) minmax(0, 1fr);
  gap: var(--market-layout-gap);
  align-items: start;
  min-width: 0;
}
.market-page .market-sidebar,
.market-page .market-main {
  min-width: 0;
}
.market-page .market-sidebar {
  width: 100%;
  padding-left: 0;
}
.market-page .market-sidebar--secondary {
  max-width: var(--market-sidebar-width);
}
.market-page .market-main {
  width: 100%;
  min-width: 0;
  overflow: visible;
}
.market-page .market-mobile-filter-block {
  display: none;
}
.market-page .market-sidebar .ornate-frame-wrapper,
.market-page .market-mobile-filter-block .ornate-frame-wrapper {
  margin-bottom: 18px;
}
.market-page .market-sidebar .ornate-frame-inner,
.market-page .market-mobile-filter-block .ornate-frame-inner {
  padding-top: 14px;
}
.market-page .market-main__top {
  width: 100%;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 10px;
}
.market-page .market-page__controls {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 140px 140px 140px;
  justify-content: end;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  box-sizing: border-box;
}
.market-page .market-search-frame {
  position: relative;
  width: 140px;
  max-width: 140px;
  min-width: 0;
  height: 44px;
  justify-self: end;
  background-image: url("/ui/search_frame.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  transform: translateY(4px);
}
.market-page .market-search-frame__input {
  width: 100%;
  height: 100%;
  padding: 0 35px 0 12px;
  border: none;
  outline: none;
  background: transparent;
  color: #e7d6b0;
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  line-height: 44px;
}
.market-page .market-search-frame__input::placeholder {
  color: #9e8c72;
  opacity: 1;
}
.market-page .market-search-frame__icon {
  position: absolute;
  right: 11px;
  top: 50%;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.9;
}
.market-page .market-top-tab-btn,
.market-page .market-page__controls > .menu-btn {
  width: 140px;
  min-width: 140px;
  max-width: 140px;
  height: 44px;
  min-height: 44px;
  justify-self: end;
}
.market-page .market-top-tab-btn .menu-btn__label,
.market-page .market-page__controls > .menu-btn .menu-btn__label {
  font-size: 12px;
  line-height: 1;
  padding-left: 8px;
  padding-right: 8px;
}
.market-page .market-filter-title {
  position: relative;
  margin: 0 0 12px;
  padding-left: 16px;
  color: #f0dbb3;
  font-family: "Cormorant SC", serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.58);
}
.market-page .market-filter-title::before {
  content: "▼";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 9px;
  color: #c29a66;
  line-height: 1.2;
}
.market-page .market-filter-title--small {
  font-size: 13px;
}
.market-page .market-class-grid {
  display: grid;
  justify-content: stretch;
}
.market-page .market-class-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  justify-items: center;
  width: 100%;
}
.market-page .market-types-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.market-page .market-type-btn {
  height: 28px;
  min-width: 0;
  padding: 0 6px;
  border: 1px solid rgba(202, 166, 105, 0.24);
  border-radius: 0;
  background: linear-gradient(
      rgba(2, 9, 12, 0.24),
      rgba(2, 9, 12, 0.24)
    ),
    url("/ui/char_actions_bg.png") center center / 100% 100% no-repeat;
  color: #d9c09b;
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.42);
  cursor: pointer;
  transition: color 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease,
    filter 0.16s ease,
    transform 0.14s ease;
}
.market-page .market-type-btn:hover {
  color: #ffe7b8;
  border-color: rgba(228, 185, 111, 0.58);
  background: linear-gradient(
      rgba(70, 45, 22, 0.38),
      rgba(10, 7, 5, 0.34)
    ),
    url("/ui/char_actions_bg.png") center center / 100% 100% no-repeat;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 232, 176, 0.16),
    inset 0 -1px 8px rgba(232, 170, 74, 0.12),
    0 0 10px rgba(255, 191, 91, 0.16);
  text-shadow: 0 0 6px rgba(255, 214, 145, 0.35);
}
.market-page .market-type-btn.is-active {
  color: #fff3d0;
  border-color: rgba(244, 197, 116, 0.78);
  background: linear-gradient(
      rgba(96, 59, 24, 0.52),
      rgba(22, 12, 6, 0.48)
    ),
    url("/ui/char_actions_bg.png") center center / 100% 100% no-repeat;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 238, 190, 0.22),
    inset 0 -1px 10px rgba(255, 182, 74, 0.20),
    0 0 14px rgba(255, 191, 91, 0.24);
  text-shadow: 0 0 7px rgba(255, 220, 150, 0.45);
  outline: 1px solid rgba(255, 225, 160, 0.18);
  outline-offset: -3px;
}
.market-page .market-type-btn.is-active:hover {
  color: #fff8e4;
  border-color: rgba(255, 216, 145, 0.9);
  background: linear-gradient(
      rgba(116, 70, 27, 0.58),
      rgba(28, 15, 7, 0.52)
    ),
    url("/ui/char_actions_bg.png") center center / 100% 100% no-repeat;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.50),
    inset 0 1px 0 rgba(255, 242, 204, 0.28),
    inset 0 -1px 12px rgba(255, 190, 84, 0.26),
    0 0 16px rgba(255, 201, 106, 0.32);
  text-shadow: 0 0 8px rgba(255, 226, 164, 0.58);
}
.market-page .market-currency-list--single-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: center;
}
.market-page .market-currency-mini {
  min-width: 0;
  display: grid;
  grid-template-columns: 18px 36px;
  align-items: center;
  justify-content: center;
  column-gap: 7px;
}
.market-page .market-currency-mini__check {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.76);
  transform-origin: center;
}
.market-page .market-currency-mini__tooltip-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.market-page .market-currency-mini__round {
  width: 36px;
  height: 36px;
  margin: 0;
  flex: 0 0 36px;
}
.market-page .market-currency-mini__icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.market-page .market-refresh-btn {
  width: 100%;
  margin: 12px 0 0;
}
.market-page .market-return-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
.market-page .market-return-btn {
  width: 48px;
  height: 48px;
  margin: 0;
}
.market-page .market-return-btn__icon {
  width: 25px;
  height: 25px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.market-page .market-toolbar {
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin: 0 0 14px;
}
.market-page .market-toolbar__count-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
}
.market-page .market-toolbar__count {
  position: relative;
  min-width: 46px;
  height: 34px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(202, 166, 105, 0.34);
  border-radius: 0;
  background: radial-gradient(
      ellipse at 50% 0%,
      rgba(95, 62, 31, 0.22),
      transparent 62%
    ),
    linear-gradient(
      180deg,
      rgb(47 39 28) 0%,
      rgb(44 36 25) 48%,
      rgb(37 31 22) 100%
    );
  color: #e8c992;
  font-family: "Cormorant SC", serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 232, 180, 0.07),
    inset 0 0 0 1px rgba(255, 225, 165, 0.025),
    inset 0 -10px 16px rgba(0, 0, 0, 0.36),
    0 2px 8px rgba(0, 0, 0, 0.24);
  text-shadow: 0 0 6px rgba(255, 208, 124, 0.10),
    0 1px 2px rgba(0, 0, 0, 0.78);
}
.market-page .market-toolbar__count::before {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  top: 0;
  height: 1px;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(224, 191, 121, 0.34),
      transparent
    );
  pointer-events: none;
}
.market-page .market-toolbar__sort {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-left: 0;
  flex: 0 0 auto;
}
.market-page .market-toolbar__sort-label {
  color: #e5c894;
  font-family: "Cormorant SC", serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.market-page .market-subtoolbar {
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
}
.market-page .market-subtoolbar--my-sales {
  justify-content: flex-end;
}
.market-page .market-sales-status-sort {
  width: 180px;
  min-width: 180px;
  max-width: 180px;
  z-index: 45;
}
.market-page .market-sales-status-sort .market-sort__trigger {
  height: 38px;
  font-size: 14px;
}
.market-page .market-sales-status-sort .market-sort__menu {
  z-index: 70;
}
.market-page .market-sort {
  position: relative;
  width: 180px;
  min-width: 180px;
  z-index: 30;
}
.market-page .market-sort__trigger {
  position: relative;
  width: 100%;
  height: 38px;
  padding: 0 34px 0 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: 1px solid rgba(202, 166, 105, 0.28);
  border-radius: 0;
  outline: none;
  background: radial-gradient(
      circle at 50% 0%,
      rgba(255, 220, 155, 0.08),
      transparent 52%
    ),
    linear-gradient(
      rgba(2, 9, 12, 0.26),
      rgba(2, 9, 12, 0.34)
    ),
    url("/ui/char_actions_bg.png") center center / 100% 100% no-repeat;
  color: #f0dfbf;
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 232, 180, 0.07),
    inset 0 -10px 18px rgba(0, 0, 0, 0.28),
    0 4px 12px rgba(0, 0, 0, 0.18);
  transition: color 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease,
    filter 0.16s ease;
}
.market-page .market-sort__trigger:hover,
.market-page .market-sort__trigger.is-open {
  color: #fff0cb;
  border-color: rgba(228, 185, 111, 0.62);
  background: radial-gradient(
      circle at 50% 0%,
      rgba(255, 220, 155, 0.13),
      transparent 54%
    ),
    linear-gradient(
      rgba(70, 45, 22, 0.36),
      rgba(10, 7, 5, 0.34)
    ),
    url("/ui/char_actions_bg.png") center center / 100% 100% no-repeat;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 232, 176, 0.14),
    inset 0 -1px 8px rgba(232, 170, 74, 0.10),
    0 0 10px rgba(255, 191, 91, 0.14),
    0 4px 12px rgba(0, 0, 0, 0.22);
  text-shadow: 0 0 6px rgba(255, 214, 145, 0.28);
}
.market-page .market-sort__trigger-text {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.market-page .market-sort__arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  z-index: 2;
  width: 14px;
  height: 14px;
  display: block;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.92;
  background: url("/icons/min.png") center center / contain no-repeat;
}
.market-page .market-sort__arrow img {
  display: none;
}
.market-page .market-sort__trigger.is-open .market-sort__arrow,
.market-page .market-sort.is-open .market-sort__arrow {
  background-image: url("/icons/max.png");
}
.market-page .market-sort__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  padding: 4px 0;
  border: 1px solid rgba(224, 191, 121, 0.58);
  border-radius: 0;
  background: radial-gradient(
      circle at 50% 0%,
      rgba(255, 220, 155, 0.10),
      transparent 54%
    ),
    linear-gradient(
      rgba(2, 9, 12, 0.32),
      rgba(2, 9, 12, 0.46)
    ),
    url("/ui/char_actions_bg.png") center center / 100% 100% no-repeat;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.44),
    inset 0 0 12px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 232, 180, 0.07),
    inset 0 -16px 24px rgba(0, 0, 0, 0.34);
  z-index: 40;
}
.market-page .market-sort__option {
  width: 100%;
  min-height: 36px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #e4cfaa;
  font-family: "Cormorant SC", serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s ease,
    color 0.14s ease,
    box-shadow 0.14s ease,
    text-shadow 0.14s ease;
}
.market-page .market-sort__option:hover {
  background: linear-gradient(
      rgba(70, 45, 22, 0.30),
      rgba(10, 7, 5, 0.22)
    );
  color: #fff0cb;
  box-shadow: inset 0 1px 0 rgba(255, 232, 176, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.24);
  text-shadow: 0 0 6px rgba(255, 214, 145, 0.22);
}
.market-page .market-sort__option.is-active {
  background: linear-gradient(
      rgba(96, 59, 24, 0.46),
      rgba(22, 12, 6, 0.38)
    );
  color: #fff3d2;
  box-shadow: inset 0 0 0 1px rgba(255, 225, 160, 0.18),
    inset 0 1px 0 rgba(255, 238, 190, 0.12),
    inset 0 -1px 8px rgba(255, 182, 74, 0.12),
    0 0 8px rgba(255, 201, 106, 0.08);
  text-shadow: 0 0 7px rgba(255, 220, 150, 0.34);
}
.market-page .market-grid-wrap {
  width: 100%;
  max-width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: visible;
}
.market-page .market-grid-wrap--full .mu-items-grid--market-full {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(var(--mu-card-width), var(--mu-card-width))
  );
  column-gap: var(--mu-card-gap-x);
  row-gap: var(--mu-card-gap-y);
  justify-content: center;
  justify-items: center;
}
.market-page .market-grid-wrap--full .mu-item-card--market {
  width: var(--mu-card-width);
}
.market-page .mu-items-page-message {
  width: 100%;
  padding: 18px 10px;
  color: #e7d6b0;
  text-align: center;
  font-family: "Cormorant SC", serif;
  font-size: 16px;
}
.market-page .market-sold-date {
  position: relative;
  z-index: 10;
  width: 118px;
  min-height: 34px;
  margin: 7px auto 0;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(190, 145, 86, 0.88);
  border-radius: 0;
  background: radial-gradient(
      circle at 50% 16%,
      rgba(27, 34, 40, 0.94) 0%,
      rgba(7, 10, 14, 0.98) 58%,
      rgba(1, 3, 6, 0.99) 100%
    );
  box-shadow: inset 0 0 0 1px rgba(255, 226, 166, 0.06),
    inset 0 8px 15px rgba(255, 255, 255, 0.025),
    inset 0 -10px 18px rgba(0, 0, 0, 0.52),
    0 2px 8px rgba(0, 0, 0, 0.48);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.market-page .market-sold-date::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(92, 68, 39, 0.58);
  pointer-events: none;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.56);
}
.market-page .market-sold-date::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 0;
  height: 1px;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 224, 160, 0.5),
      transparent
    );
  pointer-events: none;
}
.market-page .market-sold-date span {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  color: #d8b882;
  font-family: "Cormorant SC", serif;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 5px rgba(255, 220, 150, 0.12);
  overflow-wrap: anywhere;
  word-break: break-word;
}
@media (max-width: 1600px) {
  .market-page {
    --market-sidebar-width: 250px;
    --market-layout-gap: 16px;
    --mu-filter-size: 37px;
    --mu-card-width: 138px;
    --mu-card-gap-x: 14px;
    --mu-card-gap-y: 16px;
    padding-left: 6px;
    padding-right: 6px;
  }
  .market-page .market-page__controls {
    grid-template-columns: 140px 140px;
    justify-content: end;
    gap: 10px;
  }
  .market-page .market-search-frame {
    grid-column: 1 / -1;
    justify-self: end;
  }
  .market-page .market-grid-wrap--full .mu-items-grid--market-full {
    width: max-content;
    max-width: calc((var(--mu-card-width) * 2) + var(--mu-card-gap-x));
    grid-template-columns: repeat(2, minmax(var(--mu-card-width), var(--mu-card-width)));
    justify-content: center;
  }
  .market-page .market-filter-title {
    font-size: 14px;
    margin-bottom: 10px;
  }
  .market-page .market-class-grid--4 {
    gap: 8px;
  }
  .market-page .market-types-grid {
    gap: 6px;
  }
  .market-page .market-type-btn {
    height: 26px;
    font-size: 11px;
    padding: 0 5px;
  }
  .market-page .market-currency-list--single-row {
    gap: 12px;
  }
  .market-page .market-currency-mini {
    grid-template-columns: 17px 34px;
    column-gap: 7px;
  }
  .market-page .market-currency-mini__round {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
  .market-page .market-currency-mini__icon {
    width: 17px;
    height: 17px;
  }
  .market-page .market-toolbar {
    margin-bottom: 12px;
  }
  .market-page .market-toolbar__count {
    min-width: 42px;
    height: 32px;
    font-size: 14px;
  }
  .market-page .market-toolbar__sort-label {
    font-size: 14px;
  }
  .market-page .market-sort {
    width: 170px;
    min-width: 170px;
  }
  .market-page .market-sort__trigger {
    height: 36px;
    font-size: 13px;
  }
  .market-page .mu-item-title {
    font-size: 12px;
    line-height: 1.08;
  }
  .market-page .mu-item-footnote {
    font-size: 12px;
  }
}
@media (max-width: 1450px) {
  .market-page {
    --market-sidebar-width: 235px;
    --market-layout-gap: 14px;
    --mu-filter-size: 34px;
    --mu-card-width: 130px;
    --mu-card-gap-x: 12px;
    --mu-card-gap-y: 14px;
    padding-left: 4px;
    padding-right: 4px;
  }
  .market-page .market-type-btn {
    height: 25px;
    font-size: 10.5px;
  }
  .market-page .mu-item-title {
    font-size: 11.5px;
  }
}
@media (max-width: 1120px) {
  .market-page {
    --market-sidebar-width: 100%;
    --market-layout-gap: 0;
    --mu-card-width: 150px;
    --mu-card-gap-x: 16px;
    --mu-card-gap-y: 18px;
  }
  .market-page .market-layout {
    display: block;
  }
  .market-page .market-sidebar--desktop {
    display: none;
  }
  .market-page .market-mobile-filter-block {
    display: block;
    width: 100%;
    max-width: 520px;
    margin: 0 auto 16px;
  }
  .market-page .market-mobile-filter-block--secondary {
    max-width: 320px;
  }
  .market-page .market-main {
    width: 100%;
  }
  .market-page .market-main__top {
    align-items: center;
    margin-bottom: 10px;
  }
  .market-page .market-page__controls {
    width: min(100%, 460px);
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: center;
    gap: 8px;
  }
  .market-page .market-search-frame {
    grid-column: auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 40px;
    justify-self: stretch;
    transform: translateY(2px);
  }
  .market-page .market-search-frame__input {
    padding-left: 9px;
    padding-right: 29px;
    font-size: 11px;
    line-height: 40px;
  }
  .market-page .market-search-frame__icon {
    right: 9px;
    width: 15px;
    height: 15px;
  }
  .market-page .market-top-tab-btn,
  .market-page .market-page__controls > .menu-btn {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 40px;
    min-height: 40px;
    justify-self: stretch;
  }
  .market-page .market-top-tab-btn .menu-btn__label,
  .market-page .market-page__controls > .menu-btn .menu-btn__label {
    font-size: 9px;
    padding-left: 4px;
    padding-right: 4px;
    white-space: normal;
    line-height: 0.95;
  }
  .market-page .market-toolbar {
    width: min(100%, 460px);
    margin: 0 auto 12px;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 8px;
  }
  .market-page .market-toolbar__sort {
    gap: 8px;
  }
  .market-page .market-toolbar__sort-label {
    display: none;
  }
  .market-page .market-sort,
  .market-page .market-sales-status-sort {
    width: 168px;
    min-width: 168px;
    max-width: 168px;
  }
  .market-page .market-sort__trigger,
  .market-page .market-sales-status-sort .market-sort__trigger {
    height: 34px;
    font-size: 12px;
  }
  .market-page .market-subtoolbar {
    width: min(100%, 460px);
    margin: 0 auto 12px;
    justify-content: center;
  }
  .market-page .market-types-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .market-page .market-class-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .market-page .market-currency-list--single-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .market-page .market-grid-wrap--full .mu-items-grid--market-full {
    width: max-content;
    max-width: calc((var(--mu-card-width) * 2) + var(--mu-card-gap-x));
    grid-template-columns: repeat(2, minmax(var(--mu-card-width), var(--mu-card-width)));
    justify-content: center;
  }
}
@media (max-width: 720px) {
  .market-page {
    padding-left: 4px;
    padding-right: 4px;
  }
  .market-page .market-mobile-filter-block {
    max-width: 420px;
  }
  .market-page .market-toolbar__count {
    min-width: 38px;
    height: 31px;
    padding: 0 10px;
    font-size: 13px;
  }
  .market-page .market-sort,
  .market-page .market-sales-status-sort {
    width: 160px;
    min-width: 160px;
    max-width: 160px;
  }
}
@media (max-width: 560px) {
  .market-page {
    --mu-card-width: 138px;
    --mu-card-gap-x: 10px;
    --mu-card-gap-y: 14px;
  }
  .market-page .market-page__controls {
    width: min(100%, 340px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .market-page .market-search-frame {
    height: 38px;
  }
  .market-page .market-search-frame__input {
    padding-left: 8px;
    padding-right: 25px;
    font-size: 10px;
    line-height: 38px;
  }
  .market-page .market-search-frame__icon {
    right: 8px;
    width: 14px;
    height: 14px;
  }
  .market-page .market-top-tab-btn,
  .market-page .market-page__controls > .menu-btn {
    height: 38px;
    min-height: 38px;
  }
  .market-page .market-top-tab-btn .menu-btn__label,
  .market-page .market-page__controls > .menu-btn .menu-btn__label {
    font-size: 8.5px;
    padding-left: 3px;
    padding-right: 3px;
    letter-spacing: 0;
  }
  .market-page .market-toolbar {
    width: min(100%, 340px);
    gap: 7px;
  }
  .market-page .market-sort,
  .market-page .market-sales-status-sort {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
  }
  .market-page .market-sort__trigger,
  .market-page .market-sales-status-sort .market-sort__trigger {
    height: 33px;
    padding-left: 9px;
    padding-right: 28px;
    font-size: 11px;
  }
  .market-page .market-sort__arrow {
    right: 8px;
  }
  .market-page .market-mobile-filter-block {
    max-width: 340px;
    margin-bottom: 14px;
  }
  .market-page .market-class-grid--4 {
    gap: 7px;
  }
  .market-page .market-types-grid {
    gap: 6px;
  }
  .market-page .market-type-btn {
    height: 25px;
    font-size: 10px;
  }
  .market-page .market-grid-wrap--full .mu-items-grid--market-full {
    max-width: calc((var(--mu-card-width) * 2) + var(--mu-card-gap-x));
  }
}
@media (max-width: 360px) {
  .market-page {
    --mu-card-width: 136px;
    --mu-card-gap-x: 8px;
    --mu-card-gap-y: 14px;
  }
  .market-page .market-page__controls {
    width: min(100%, 318px);
    gap: 5px;
  }
  .market-page .market-search-frame {
    height: 36px;
  }
  .market-page .market-search-frame__input {
    padding-left: 7px;
    padding-right: 23px;
    font-size: 9px;
    line-height: 36px;
  }
  .market-page .market-search-frame__icon {
    right: 7px;
    width: 13px;
    height: 13px;
  }
  .market-page .market-top-tab-btn,
  .market-page .market-page__controls > .menu-btn {
    height: 36px;
    min-height: 36px;
  }
  .market-page .market-top-tab-btn .menu-btn__label,
  .market-page .market-page__controls > .menu-btn .menu-btn__label {
    font-size: 7.8px;
  }
  .market-page .market-toolbar {
    width: min(100%, 318px);
  }
  .market-page .market-sort,
  .market-page .market-sales-status-sort {
    width: 145px;
    min-width: 145px;
    max-width: 145px;
  }
  .market-page .market-mobile-filter-block {
    max-width: 318px;
  }
  .market-page .market-grid-wrap--full .mu-items-grid--market-full {
    width: max-content;
    max-width: calc((var(--mu-card-width) * 2) + var(--mu-card-gap-x));
    grid-template-columns: repeat(2, minmax(var(--mu-card-width), var(--mu-card-width)));
    justify-content: center;
  }
}
.market-modal-backdrop,
.exchange-modal-backdrop {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  width: 100dvw;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(1px);
}
.market-modal-backdrop .mu-dialog,
.exchange-modal-backdrop .mu-dialog {
  position: relative;
  width: min(340px, 100%);
  max-width: 100%;
  min-height: 0;
  padding: 17px 18px 16px !important;
  box-sizing: border-box;
  border: 1px solid rgba(217, 172, 108, 0.52);
  border-radius: 0;
  color: #ecd7b9;
  background: radial-gradient(
      circle at 50% 0%,
      rgba(255, 220, 150, 0.08),
      transparent 48%
    ),
    linear-gradient(
      180deg,
      rgba(18, 13, 9, 0.98),
      rgba(5, 4, 3, 0.98)
    );
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.68),
    0 0 18px rgba(205, 154, 84, 0.08),
    inset 0 0 0 1px rgba(255, 224, 168, 0.035),
    inset 0 -18px 26px rgba(0, 0, 0, 0.38);
  overflow: hidden;
  isolation: isolate;
}
.market-modal-backdrop .mu-dialog::after,
.exchange-modal-backdrop .mu-dialog::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 1px;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 226, 166, 0.42),
      transparent
    );
  pointer-events: none;
}
.market-modal-backdrop .mu-dialog::before,
.exchange-modal-backdrop .mu-dialog::before {
  content: none;
  display: none;
}
.market-modal-backdrop .market-modal-title,
.exchange-modal-backdrop .market-modal-title {
  margin: 0 0 8px;
  color: #ffe8ba;
  font-family: "Cormorant SC", serif;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95),
    0 0 8px rgba(255, 221, 160, 0.1);
}
.market-modal-backdrop .market-modal-title::after,
.exchange-modal-backdrop .market-modal-title::after {
  content: "";
  display: block;
  width: min(190px, 82%);
  height: 1px;
  margin: 9px auto 0;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 226, 166, 0.42),
      transparent
    );
  opacity: 0.9;
}
.market-modal-backdrop .market-modal-text,
.exchange-modal-backdrop .market-modal-text {
  margin: 0;
  color: #d6c7ae;
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
}
.market-modal-backdrop .market-modal-text--amounts,
.exchange-modal-backdrop .market-modal-text--amounts {
  margin-top: 8px;
  color: #cbb58c;
  font-size: 11.5px;
  line-height: 1.25;
}
.market-modal-backdrop .mu-dialog > div[style] {
  max-width: 100%;
  margin-top: 10px !important;
  font-size: 14px !important;
  line-height: 1.12 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
}
.exchange-modal-item {
  min-height: 18px;
  margin: 10px auto 0;
  max-width: 100%;
  color: #cfd3dc;
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.12;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
}
.market-modal-backdrop .market-modal-price,
.exchange-modal-backdrop .market-modal-price {
  width: fit-content;
  min-width: 96px;
  max-width: 100%;
  margin: 11px auto 0;
  padding: 6px 13px 7px;
  box-sizing: border-box;
  color: #ffe8ba;
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  border: 1px solid rgba(180, 136, 78, 0.52);
  border-radius: 0;
  background: linear-gradient(180deg, rgb(16 15 15), rgb(103 77 48));
  box-shadow: inset 0 1px 0 rgba(255, 226, 166, 0.06),
    inset 0 -8px 14px rgba(0, 0, 0, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 5px rgba(255, 220, 145, 0.1);
}
.market-modal-backdrop .market-modal-actions,
.exchange-modal-backdrop .market-modal-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 16px auto 0;
  text-align: center;
}
.market-modal-backdrop .market-modal-actions .menu-btn,
.exchange-modal-backdrop .market-modal-actions .menu-btn {
  width: 94px;
  min-width: 94px;
  height: 27px;
  min-height: 27px;
  margin: 0 !important;
}
.market-modal-backdrop .market-modal-actions .menu-btn__label,
.exchange-modal-backdrop .market-modal-actions .menu-btn__label {
  font-size: 9px;
  line-height: 1;
}
.exchange-modal-backdrop .exchange-confirm-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 16px auto 0;
}
.exchange-modal-backdrop .exchange-confirm-actions .menu-btn-sm {
  width: 94px;
  min-width: 94px;
  height: 27px;
  min-height: 27px;
  margin: 0 !important;
}
@media (max-width: 560px) {
  .market-modal-backdrop,
  .exchange-modal-backdrop {
    left: 0;
    top: 0;
    right: auto;
    bottom: auto;
    width: 100dvw;
    height: 100dvh;
    min-width: 100dvw;
    min-height: 100dvh;
    padding: max(10px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
  }
  .market-modal-backdrop .mu-dialog,
  .exchange-modal-backdrop .mu-dialog {
    width: min(300px, 100%);
    max-width: 100%;
    padding: 16px 15px 15px !important;
    box-sizing: border-box;
  }
  .market-modal-backdrop .market-modal-title,
  .exchange-modal-backdrop .market-modal-title {
    font-size: 14px;
    line-height: 1;
  }
  .market-modal-backdrop .market-modal-title::after,
  .exchange-modal-backdrop .market-modal-title::after {
    width: min(170px, 82%);
    margin-top: 8px;
  }
  .market-modal-backdrop .market-modal-text,
  .exchange-modal-backdrop .market-modal-text {
    font-size: 11px;
    line-height: 1.22;
  }
  .market-modal-backdrop .market-modal-text--amounts,
  .exchange-modal-backdrop .market-modal-text--amounts {
    font-size: 10.5px;
  }
  .market-modal-backdrop .mu-dialog > div[style],
  .exchange-modal-item {
    font-size: 11px !important;
    line-height: 1.12 !important;
  }
  .market-modal-backdrop .market-modal-price,
  .exchange-modal-backdrop .market-modal-price {
    min-width: 90px;
    padding: 6px 12px;
    font-size: 14px;
  }
  .market-modal-backdrop .market-modal-actions,
  .exchange-modal-backdrop .market-modal-actions,
  .exchange-modal-backdrop .exchange-confirm-actions {
    gap: 7px;
    margin-top: 15px;
  }
  .market-modal-backdrop .market-modal-actions .menu-btn,
  .exchange-modal-backdrop .market-modal-actions .menu-btn,
  .exchange-modal-backdrop .exchange-confirm-actions .menu-btn-sm {
    width: 88px;
    min-width: 88px;
    height: 26px;
    min-height: 26px;
  }
  .market-modal-backdrop .market-modal-actions .menu-btn__label,
  .exchange-modal-backdrop .market-modal-actions .menu-btn__label,
  .exchange-modal-backdrop .exchange-confirm-actions .menu-btn-sm__label {
    font-size: 8px;
  }
}
.ornate-frame-wrapper {
  display: block;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 14px;
  padding: var(--f-size);
  background: transparent;
  isolation: isolate;
}
.ornate-frame-bg {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 4px;
  right: 4px;
  box-sizing: border-box;
  border: var(--f-size) solid transparent;
  border-image-source: var(--f-bg-img);
  border-image-slice: 110 fill;
  border-image-repeat: stretch;
  pointer-events: none;
  z-index: 0;
}
.ornate-frame-svg-bg {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 4px;
  right: 4px;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ornate-frame-svg-bg svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.ornate-frame-wrapper::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 4px;
  right: 4px;
  box-sizing: border-box;
  border: var(--f-size) solid transparent;
  border-image-source: var(--f-border-img);
  border-image-slice: 110;
  border-image-repeat: stretch;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.9));
  pointer-events: none;
  z-index: 1;
}
.ornate-frame-inner {
  position: relative;
  z-index: 2;
  min-height: 100%;
  background: transparent;
}
.ornate-frame-wrapper--filled .ornate-frame-bg {
  border-image-source: var(--f-bg-img);
}
.ornate-frame-wrapper--image-blur .ornate-frame-inner {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9),
    0 0 6px rgba(0, 0, 0, 0.5);
}
.ornate-frame-wrapper--classic-thin-filled-blue .ornate-frame-bg {
  box-shadow: none;
  background: transparent;
}
.ornate-frame-wrapper--classic-thin-filled-blue .ornate-frame-inner {
  background: transparent;
  box-shadow: none;
}
.donate-store-page {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  --market-sidebar-width: 270px;
  --market-layout-gap: 18px;
  --mu-filter-size: 45px;
  --mu-card-width: 150px;
  --mu-card-gap-x: 18px;
  --mu-card-gap-y: 18px;
  padding-left: 10px;
  padding-right: 10px;
}
.donate-store-page .donate-store-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--market-sidebar-width)) minmax(0, 1fr);
  gap: var(--market-layout-gap);
  align-items: start;
  min-width: 0;
}
.donate-store-page .donate-store-sidebar,
.donate-store-page .donate-store-main {
  min-width: 0;
}
.donate-store-page .donate-store-sidebar {
  width: 100%;
  padding-left: 0;
}
.donate-store-page .donate-store-main {
  width: 100%;
  min-width: 0;
  overflow: visible;
}
.donate-store-page .donate-store-sidebar .ornate-frame-wrapper {
  margin-bottom: 18px;
}
.donate-store-page .donate-store-sidebar .ornate-frame-inner {
  padding-top: 14px;
}
.donate-store-page .donate-store-main__top {
  width: 100%;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
}
.donate-store-page .donate-store-controls {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0;
  box-sizing: border-box;
}
.donate-store-page .donate-store-search-frame,
.donate-store-page .market-search-frame {
  position: relative;
  width: 140px;
  max-width: 140px;
  min-width: 0;
  flex: 0 0 140px;
  height: 44px;
  background-image: url("/ui/search_frame.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  transform: translateY(4px);
}
.donate-store-page .market-search-frame__input {
  width: 100%;
  height: 100%;
  padding: 0 35px 0 12px;
  border: none;
  outline: none;
  background: transparent;
  color: #e7d6b0;
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  line-height: 44px;
}
.donate-store-page .market-search-frame__input::placeholder {
  color: #9e8c72;
  opacity: 1;
}
.donate-store-page .market-search-frame__icon {
  position: absolute;
  right: 11px;
  top: 50%;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.9;
}
.donate-store-page .market-filter-title {
  position: relative;
  margin: 0 0 12px;
  padding-left: 16px;
  color: #f0dbb3;
  font-family: "Cormorant SC", serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.58);
}
.donate-store-page .market-filter-title::before {
  content: "▼";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 9px;
  color: #c29a66;
  line-height: 1.2;
}
.donate-store-page .market-filter-title--small {
  font-size: 13px;
}
.donate-store-page .market-class-grid {
  display: grid;
  justify-content: stretch;
}
.donate-store-page .market-class-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  justify-items: center;
  width: 100%;
}
.donate-store-page .market-types-grid,
.donate-store-page .donate-store-types-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.donate-store-page .market-type-btn {
  height: 28px;
  min-width: 0;
  padding: 0 6px;
  border: 1px solid rgba(202, 166, 105, 0.24);
  border-radius: 0;
  background: linear-gradient(
      rgba(2, 9, 12, 0.24),
      rgba(2, 9, 12, 0.24)
    ),
    url("/ui/char_actions_bg.png") center center / cover no-repeat;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.42);
  color: #d9c09b;
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: color 0.16s ease,
    border-color 0.16s ease,
    filter 0.16s ease,
    transform 0.14s ease,
    box-shadow 0.16s ease;
}
.donate-store-page .market-type-btn:hover {
  color: #ffe7b8;
  border-color: rgba(228, 185, 111, 0.58);
  background: linear-gradient(
      rgba(70, 45, 22, 0.38),
      rgba(10, 7, 5, 0.34)
    ),
    url("/ui/char_actions_bg.png") center center / 100% 100% no-repeat;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 232, 176, 0.16),
    inset 0 -1px 8px rgba(232, 170, 74, 0.12),
    0 0 10px rgba(255, 191, 91, 0.16);
  text-shadow: 0 0 6px rgba(255, 214, 145, 0.35);
}
.donate-store-page .market-type-btn.is-active {
  color: #fff3d0;
  border-color: rgba(244, 197, 116, 0.78);
  background: linear-gradient(
      rgba(96, 59, 24, 0.52),
      rgba(22, 12, 6, 0.48)
    ),
    url("/ui/char_actions_bg.png") center center / 100% 100% no-repeat;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 238, 190, 0.22),
    inset 0 -1px 10px rgba(255, 182, 74, 0.20),
    0 0 14px rgba(255, 191, 91, 0.24);
  text-shadow: 0 0 7px rgba(255, 220, 150, 0.45);
}
.donate-store-page .market-type-btn.is-active:hover {
  color: #fff8e4;
  border-color: rgba(255, 216, 145, 0.9);
  background: linear-gradient(
      rgba(116, 70, 27, 0.58),
      rgba(28, 15, 7, 0.52)
    ),
    url("/ui/char_actions_bg.png") center center / 100% 100% no-repeat;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.50),
    inset 0 1px 0 rgba(255, 242, 204, 0.28),
    inset 0 -1px 12px rgba(255, 190, 84, 0.26),
    0 0 16px rgba(255, 201, 106, 0.32);
  text-shadow: 0 0 8px rgba(255, 226, 164, 0.58);
}
.donate-store-page .market-type-btn.is-active {
  outline: 1px solid rgba(255, 225, 160, 0.18);
  outline-offset: -3px;
}
.donate-store-page .market-refresh-btn {
  width: 100%;
  margin: 12px 0 0;
}
.donate-store-page .donate-store-toolbar,
.donate-store-page .market-toolbar {
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin: 0 0 14px;
}
.donate-store-page .market-toolbar__count-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
}
.donate-store-page .market-toolbar__count {
  position: relative;
  min-width: 46px;
  height: 34px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(202, 166, 105, 0.34);
  border-radius: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(95, 62, 31, 0.22), transparent 62%), linear-gradient(180deg, rgb(47 39 28) 0%, rgb(44 36 25) 48%, rgb(37 31 22) 100%);
  color: #e8c992;
  font-family: "Cormorant SC", serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 232, 180, 0.07),
    inset 0 0 0 1px rgba(255, 225, 165, 0.025),
    inset 0 -10px 16px rgba(0, 0, 0, 0.36),
    0 2px 8px rgba(0, 0, 0, 0.24);
  text-shadow: 0 0 6px rgba(255, 208, 124, 0.10),
    0 1px 2px rgba(0, 0, 0, 0.78);
}
.donate-store-page .market-toolbar__count::before {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  top: 0;
  height: 1px;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(224, 191, 121, 0.34),
      transparent
    );
  pointer-events: none;
}
.donate-store-page .market-toolbar__sort {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-left: 0;
  flex: 0 0 auto;
}
.donate-store-page .market-toolbar__sort-label {
  color: #e5c894;
  font-family: "Cormorant SC", serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.donate-store-page .market-sort {
  position: relative;
  width: 180px;
  min-width: 180px;
  z-index: 30;
}
.donate-store-page .market-sort__trigger {
  position: relative;
  width: 100%;
  height: 38px;
  padding: 0 34px 0 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: 1px solid rgba(202, 166, 105, 0.28);
  border-radius: 0;
  outline: none;
  background: radial-gradient(
      circle at 50% 0%,
      rgba(255, 220, 155, 0.08),
      transparent 52%
    ),
    linear-gradient(
      rgba(2, 9, 12, 0.26),
      rgba(2, 9, 12, 0.34)
    ),
    url("/ui/char_actions_bg.png") center center / 100% 100% no-repeat;
  color: #f0dfbf;
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 232, 180, 0.07),
    inset 0 -10px 18px rgba(0, 0, 0, 0.28),
    0 4px 12px rgba(0, 0, 0, 0.18);
  transition: color 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease,
    filter 0.16s ease;
}
.donate-store-page .market-sort__trigger:hover,
.donate-store-page .market-sort__trigger.is-open {
  color: #fff0cb;
  border-color: rgba(228, 185, 111, 0.62);
  background: radial-gradient(
      circle at 50% 0%,
      rgba(255, 220, 155, 0.13),
      transparent 54%
    ),
    linear-gradient(
      rgba(70, 45, 22, 0.36),
      rgba(10, 7, 5, 0.34)
    ),
    url("/ui/char_actions_bg.png") center center / 100% 100% no-repeat;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 232, 176, 0.14),
    inset 0 -1px 8px rgba(232, 170, 74, 0.10),
    0 0 10px rgba(255, 191, 91, 0.14),
    0 4px 12px rgba(0, 0, 0, 0.22);
  text-shadow: 0 0 6px rgba(255, 214, 145, 0.28);
}
.donate-store-page .market-sort__trigger-text {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.donate-store-page .market-sort__arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.92;
}
.donate-store-page .market-sort__arrow img {
  display: block;
  width: 14px;
  height: 14px;
  object-fit: contain;
}
.donate-store-page .market-sort__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  padding: 4px 0;
  border: 1px solid rgba(224, 191, 121, 0.58);
  border-radius: 0;
  background: radial-gradient(
      circle at 50% 0%,
      rgba(255, 220, 155, 0.10),
      transparent 54%
    ),
    linear-gradient(
      rgba(2, 9, 12, 0.32),
      rgba(2, 9, 12, 0.46)
    ),
    url("/ui/char_actions_bg.png") center center / 100% 100% no-repeat;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.44),
    inset 0 0 12px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 232, 180, 0.07),
    inset 0 -16px 24px rgba(0, 0, 0, 0.34);
  z-index: 40;
}
.donate-store-page .market-sort__option {
  width: 100%;
  min-height: 36px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #e4cfaa;
  font-family: "Cormorant SC", serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s ease,
    color 0.14s ease,
    box-shadow 0.14s ease,
    text-shadow 0.14s ease;
}
.donate-store-page .market-sort__option:hover {
  background: linear-gradient(
      rgba(70, 45, 22, 0.30),
      rgba(10, 7, 5, 0.22)
    );
  color: #fff0cb;
  box-shadow: inset 0 1px 0 rgba(255, 232, 176, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.24);
  text-shadow: 0 0 6px rgba(255, 214, 145, 0.22);
}
.donate-store-page .market-sort__option.is-active {
  background: linear-gradient(
      rgba(96, 59, 24, 0.46),
      rgba(22, 12, 6, 0.38)
    );
  color: #fff3d2;
  box-shadow: inset 0 0 0 1px rgba(255, 225, 160, 0.18),
    inset 0 1px 0 rgba(255, 238, 190, 0.12),
    inset 0 -1px 8px rgba(255, 182, 74, 0.12),
    0 0 8px rgba(255, 201, 106, 0.08);
  text-shadow: 0 0 7px rgba(255, 220, 150, 0.34);
}
.donate-store-page .donate-store-grid-wrap,
.donate-store-page .market-grid-wrap {
  width: 100%;
  max-width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: visible;
}
.donate-store-page .market-grid-wrap--full .mu-items-grid--market-full {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(var(--mu-card-width), var(--mu-card-width))
  );
  column-gap: var(--mu-card-gap-x);
  row-gap: var(--mu-card-gap-y);
  justify-content: center;
  justify-items: center;
}
.donate-store-page .market-grid-wrap--full .mu-item-card--market,
.donate-store-page .market-grid-wrap--full .donate-store-card {
  width: var(--mu-card-width);
}
.donate-store-page .mu-items-page-message {
  width: 100%;
  padding: 18px 10px;
  color: #e7d6b0;
  text-align: center;
  font-family: "Cormorant SC", serif;
  font-size: 16px;
}
.donate-store-page .donate-store-cart-total {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  margin: 0 0 12px;
  padding: 8px 12px;
  border: 1px solid rgba(202, 166, 105, 0.34);
  background: radial-gradient(
      circle at 50% 0%,
      rgba(255, 220, 155, 0.12),
      transparent 50%
    ),
    linear-gradient(
      rgba(28, 18, 10, 0.36),
      rgba(2, 9, 12, 0.30)
    ),
    url("/ui/char_actions_bg.png") center center / 100% 100% no-repeat;
  color: #d9c09b;
  font-family: "Cormorant SC", serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 232, 180, 0.08),
    inset 0 0 0 1px rgba(255, 224, 168, 0.03),
    inset 0 -10px 18px rgba(0, 0, 0, 0.30),
    0 3px 10px rgba(0, 0, 0, 0.28);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.donate-store-page .donate-store-cart-total::before,
.donate-store-page .donate-store-cart-total::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 18px;
  transform: translateY(-50%);
  background: linear-gradient(
      180deg,
      rgba(236, 211, 148, 0.9),
      rgba(117, 82, 44, 0.95)
    );
  box-shadow: 0 0 8px rgba(224, 180, 105, 0.22),
    inset 0 0 0 1px rgba(255, 238, 184, 0.26);
}
.donate-store-page .donate-store-cart-total::before {
  left: -1px;
}
.donate-store-page .donate-store-cart-total::after {
  right: -1px;
}
.donate-store-page .donate-store-cart-total strong {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  color: #f4d99f;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 8px rgba(255, 208, 124, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.9);
}
.donate-store-page .donate-store-cart-empty {
  padding: 12px 8px;
  color: #a9997d;
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  line-height: 1.25;
  text-align: center;
}
.donate-store-page .donate-store-cart-list {
  display: grid;
  gap: 8px;
  max-height: 330px;
  overflow: auto;
  padding-right: 2px;
}
.donate-store-page .donate-store-cart-list::-webkit-scrollbar {
  width: 6px;
}
.donate-store-page .donate-store-cart-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.28);
}
.donate-store-page .donate-store-cart-list::-webkit-scrollbar-thumb {
  background: rgba(199, 168, 117, 0.42);
}
.donate-store-page .donate-store-cart-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 8px 8px 8px 10px;
  border: 1px solid rgba(202, 166, 105, 0.24);
  background: radial-gradient(
      circle at 50% 0%,
      rgba(255, 220, 155, 0.10),
      transparent 52%
    ),
    linear-gradient(
      rgba(24, 16, 10, 0.32),
      rgba(2, 9, 12, 0.28)
    ),
    url("/ui/char_actions_bg.png") center center / 100% 100% no-repeat;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 224, 168, 0.05),
    inset 0 -12px 18px rgba(0, 0, 0, 0.26),
    0 2px 8px rgba(0, 0, 0, 0.16);
}
.donate-store-page .donate-store-cart-row::before {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  top: 0;
  height: 1px;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(224, 191, 121, 0.38),
      transparent
    );
  pointer-events: none;
}
.donate-store-page .donate-store-cart-row__main {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
}
.donate-store-page .donate-store-cart-row__qty {
  min-width: 31px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(202, 166, 105, 0.28);
  background: linear-gradient(
      rgba(2, 9, 12, 0.34),
      rgba(2, 9, 12, 0.42)
    ),
    url("/ui/char_actions_bg.png") center center / 100% 100% no-repeat;
  color: #e8c992;
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 224, 168, 0.06),
    0 1px 5px rgba(0, 0, 0, 0.24);
  text-shadow: 0 0 6px rgba(255, 208, 124, 0.14),
    0 1px 2px rgba(0, 0, 0, 0.9);
}
.donate-store-page .donate-store-cart-row__title {
  min-width: 0;
  color: #d8c4a2;
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.donate-store-page .donate-store-cart-row__bottom {
  display: contents;
}
.donate-store-page .donate-store-cart-row__price {
  display: none;
}
.donate-store-page .donate-store-cart-row__actions {
  position: relative;
  display: grid;
  grid-template-rows: 18px 18px;
  gap: 3px;
  align-items: center;
  justify-items: center;
  width: 24px;
  min-width: 24px;
}
.donate-store-page .donate-store-cart-arrow {
  width: 22px;
  height: 18px;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0.82;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
  transition: opacity 0.14s ease,
    transform 0.14s ease,
    filter 0.14s ease;
}
.donate-store-page .donate-store-cart-arrow img {
  display: block;
  width: 14px;
  height: 14px;
  object-fit: contain;
  pointer-events: none;
}
.donate-store-page .donate-store-cart-arrow:hover {
  opacity: 1;
  filter: drop-shadow(0 0 5px rgba(224, 191, 121, 0.32))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.72));
}
.donate-store-page .donate-store-cart-arrow--up:hover {
  transform: translateY(-1px);
}
.donate-store-page .donate-store-cart-arrow--down:hover {
  transform: translateY(1px);
}
.donate-store-page .donate-store-cart-arrow:active {
  transform: scale(0.92);
}
.donate-store-page .donate-store-cart-arrow:disabled {
  opacity: 0.28;
  cursor: default;
  filter: grayscale(1) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}
.donate-store-page .donate-store-cart-arrow:disabled:hover {
  transform: none;
}
.donate-store-page .donate-store-cart-actions {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.donate-store-page .donate-store-cart-actions .menu-btn {
  width: 100%;
}
.donate-store-page .donate-store-card {
  position: relative;
}
.donate-store-page .donate-store-card .mu-item-card-btn {
  margin-top: 8px;
}
.donate-store-page .donate-store-set-parts,
.donate-store-page .mu-item-parts {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  width: 100%;
  margin: 7px 0 4px;
  padding: 0 4px;
}
.donate-store-page .mu-item-part img {
  display: block;
  max-width: 22px;
  max-height: 22px;
  object-fit: contain;
  pointer-events: none;
}
.donate-store-page .donate-store-confirm-total {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #e7d6b0;
  font-family: "Cormorant SC", serif;
  font-weight: 800;
}
.donate-store-page .donate-store-confirm-list {
  margin-top: 12px;
  max-height: 260px;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px;
  background: rgba(0, 0, 0, 0.2);
}
.donate-store-page .donate-store-confirm-list::-webkit-scrollbar {
  width: 6px;
}
.donate-store-page .donate-store-confirm-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.28);
}
.donate-store-page .donate-store-confirm-list::-webkit-scrollbar-thumb {
  background: rgba(199, 168, 117, 0.42);
}
.donate-store-page .donate-store-confirm-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.donate-store-page .donate-store-confirm-row:last-child {
  border-bottom: 0;
}
.donate-store-page .donate-store-confirm-row__title {
  min-width: 0;
  color: #cfd3dc;
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.donate-store-page .donate-store-confirm-row__title span {
  color: #7f8793;
}
.donate-store-page .donate-store-confirm-row__price {
  flex: 0 0 auto;
  color: #e7d6b0;
  font-family: "Cormorant SC", serif;
  font-weight: 900;
}
@media (max-width: 1600px) {
  .donate-store-page {
    --market-sidebar-width: 250px;
    --market-layout-gap: 16px;
    --mu-filter-size: 37px;
    --mu-card-width: 138px;
    --mu-card-gap-x: 14px;
    --mu-card-gap-y: 16px;
    padding-left: 6px;
    padding-right: 6px;
  }
  .donate-store-page .market-grid-wrap--full .mu-items-grid--market-full {
    width: max-content;
    max-width: calc((var(--mu-card-width) * 2) + var(--mu-card-gap-x));
    grid-template-columns: repeat(2, minmax(var(--mu-card-width), var(--mu-card-width)));
    justify-content: center;
  }
  .donate-store-page .market-filter-title {
    font-size: 14px;
    margin-bottom: 10px;
  }
  .donate-store-page .market-class-grid--4 {
    gap: 8px;
  }
  .donate-store-page .market-type-btn {
    height: 26px;
    font-size: 11px;
    padding: 0 5px;
  }
  .donate-store-page .donate-store-toolbar,
  .donate-store-page .market-toolbar {
    margin-bottom: 12px;
  }
  .donate-store-page .market-toolbar__count {
    min-width: 42px;
    height: 32px;
    font-size: 14px;
  }
  .donate-store-page .market-toolbar__sort-label {
    font-size: 14px;
  }
  .donate-store-page .market-sort {
    width: 170px;
    min-width: 170px;
  }
  .donate-store-page .market-sort__trigger {
    height: 36px;
    font-size: 13px;
  }
  .donate-store-page .mu-item-title {
    font-size: 12px;
    line-height: 1.08;
  }
  .donate-store-page .mu-item-footnote {
    font-size: 12px;
  }
}
@media (max-width: 1450px) {
  .donate-store-page {
    --market-sidebar-width: 235px;
    --market-layout-gap: 14px;
    --mu-filter-size: 34px;
    --mu-card-width: 130px;
    --mu-card-gap-x: 12px;
    --mu-card-gap-y: 14px;
    padding-left: 4px;
    padding-right: 4px;
  }
  .donate-store-page .market-type-btn {
    height: 25px;
    font-size: 10.5px;
  }
  .donate-store-page .mu-item-title {
    font-size: 11.5px;
  }
  .donate-store-page .mu-item-form-row {
    width: 112px;
  }
}
@media (max-width: 1120px) {
  .donate-store-page .donate-store-layout {
    grid-template-columns: 1fr;
  }
  .donate-store-page .donate-store-sidebar {
    padding-left: 0;
  }
  .donate-store-page .donate-store-cart-list {
    max-height: 260px;
  }
  .donate-store-page .market-grid-wrap--full .mu-items-grid--market-full {
    --mu-card-width: 145px;
    --mu-card-gap-x: 16px;
    --mu-card-gap-y: 18px;
    width: max-content;
    max-width: calc((var(--mu-card-width) * 2) + var(--mu-card-gap-x));
    grid-template-columns: repeat(2, minmax(var(--mu-card-width), var(--mu-card-width)));
  }
}
@media (max-width: 720px) {
  .donate-store-page {
    padding-left: 4px;
    padding-right: 4px;
  }
  .donate-store-page .donate-store-controls {
    justify-content: flex-end;
  }
  .donate-store-page .donate-store-search-frame,
  .donate-store-page .market-search-frame {
    width: 140px;
    max-width: 140px;
    flex-basis: 140px;
  }
  .donate-store-page .donate-store-types-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .donate-store-page .market-class-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .donate-store-page .donate-store-toolbar,
  .donate-store-page .market-toolbar {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 10px;
  }
  .donate-store-page .market-toolbar__sort {
    justify-content: flex-end;
    margin-left: 0;
  }
  .donate-store-page .market-sort {
    width: 165px;
    min-width: 165px;
    max-width: 165px;
  }
  .donate-store-page .market-modal-actions {
    flex-direction: column;
  }
  .donate-store-page .market-modal-actions .menu-btn {
    width: 100%;
  }
  .donate-store-page .donate-store-cart-actions {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .donate-store-page {
    --mu-card-width: 138px;
    --mu-card-gap-x: 10px;
    --mu-card-gap-y: 14px;
  }
  .donate-store-page .donate-store-toolbar,
  .donate-store-page .market-toolbar {
    gap: 8px;
  }
  .donate-store-page .market-toolbar__sort-label {
    display: none;
  }
  .donate-store-page .market-sort {
    width: 156px;
    min-width: 156px;
    max-width: 156px;
  }
  .donate-store-page .market-sort__trigger {
    padding-left: 10px;
    padding-right: 30px;
  }
  .donate-store-page .donate-store-cart-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .donate-store-page .donate-store-cart-row__actions {
    width: 24px;
    min-width: 24px;
  }
  .donate-store-page .donate-store-confirm-row {
    align-items: flex-start;
  }
  .donate-store-page .donate-store-confirm-row__title {
    white-space: normal;
  }
}
@media (max-width: 360px) {
  .donate-store-page {
    --mu-card-width: 130px;
    --mu-card-gap-x: 8px;
  }
  .donate-store-page .market-sort {
    width: 148px;
    min-width: 148px;
    max-width: 148px;
  }
}
.rankings-page,
.rankings-players-page,
.rankings-guilds-page,
.rankings-shell,
.rankings-shell__content {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: visible;
}
.account-shell__head--no-topbar {
  justify-content: center;
}
.account-shell__head--no-topbar .account-shell__title {
  justify-content: center;
}
.account-shell__head--no-topbar .account-shell__title-inner::before {
  left: 0;
}
:root {
  --rk-text: #ded0b8;
  --rk-text-soft: #ac9983;
  --rk-text-dim: #746958;
  --rk-title: #dec28c;
  --rk-head: #9e8f77;
  --rk-name: #ffe8ba;
  --rk-name-hover: #ffdda0;
  --rk-name-line: #d9ac6c;
  --rk-row-text: #d6c7ae;
  --rk-row-hover: #e8dcc8;
  --rk-guild: #c9b38b;
  --rk-class: #cbbda8;
  --rk-line: rgba(211, 165, 95, 0.16);
  --rk-line-strong: rgba(190, 135, 70, 0.42);
  --rk-card-bg: rgba(12, 8, 6, 0.82);
}
.rankings-top-grid {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: 12px;
  align-items: center;
  margin: 0 0 20px;
  box-sizing: border-box;
  overflow: visible;
}
.rankings-top-grid__tabs {
  width: 100%;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}
.rankings-top-grid__filters {
  width: 100%;
  min-width: 0;
  overflow: visible;
}
.rankings-top-grid__filters .ornate-frame-wrapper {
  width: 100%;
  margin-bottom: 0;
}
.rankings-top-grid__filters .ornate-frame-inner {
  width: 100%;
}
.rankings-filter-title {
  display: none;
}
.rankings-class-grid {
  --mu-filter-size: 42px;
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--mu-filter-size));
  width: 100%;
  max-width: 100%;
  min-width: 0;
  justify-content: center;
  justify-items: center;
  align-items: center;
  gap: 17px;
  box-sizing: border-box;
  overflow: visible;
}
.rankings-class-grid .mu-class-filter__btn {
  width: var(--mu-filter-size);
  height: var(--mu-filter-size);
  flex: 0 0 var(--mu-filter-size);
}
.rankings-class-grid .mu-class-filter__btn:hover {
  transform: scale(1.03);
}
.rankings-class-grid .mu-class-filter__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.rankings-class-grid .mu-class-filter__content {
  background: rgba(0, 0, 0, 0.34);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.58),
    0 1px 3px rgba(0, 0, 0, 0.24);
}
.rankings-class-grid .mu-class-filter__btn:hover .mu-class-filter__content::after {
  box-shadow: inset 0 0 12px rgba(193, 165, 127, 0.34);
}
.rankings-class-grid .mu-class-filter__btn.is-active .mu-class-filter__content {
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.65),
    0 0 8px rgba(199, 176, 144, 0.12);
}
.rankings-class-all-row {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
.rankings-class-all-btn {
  min-width: 145px;
  height: 28px;
  padding: 0 18px;
}
.rankings-players-page .market-type-btn {
  position: relative;
  height: 28px;
  min-width: 0;
  padding: 0 6px;
  border: 1px solid rgba(202, 166, 105, 0.24);
  border-radius: 0;
  background: linear-gradient(
      rgba(2, 9, 12, 0.24),
      rgba(2, 9, 12, 0.24)
    ),
    url("/ui/char_actions_bg.png") center center / 100% 100% no-repeat;
  color: #d9c09b;
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.42);
  cursor: pointer;
  transition: color 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease,
    filter 0.16s ease,
    transform 0.14s ease;
}
.rankings-players-page .market-type-btn:hover {
  color: #ffe7b8;
  border-color: rgba(228, 185, 111, 0.58);
  background: linear-gradient(
      rgba(70, 45, 22, 0.38),
      rgba(10, 7, 5, 0.34)
    ),
    url("/ui/char_actions_bg.png") center center / 100% 100% no-repeat;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 232, 176, 0.16),
    inset 0 -1px 8px rgba(232, 170, 74, 0.12),
    0 0 10px rgba(255, 191, 91, 0.16);
  text-shadow: 0 0 6px rgba(255, 214, 145, 0.35);
}
.rankings-players-page .market-type-btn.is-active {
  color: #fff3d0;
  border-color: rgba(244, 197, 116, 0.78);
  background: linear-gradient(
      rgba(96, 59, 24, 0.52),
      rgba(22, 12, 6, 0.48)
    ),
    url("/ui/char_actions_bg.png") center center / 100% 100% no-repeat;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 238, 190, 0.22),
    inset 0 -1px 10px rgba(255, 182, 74, 0.20),
    0 0 14px rgba(255, 191, 91, 0.24);
  text-shadow: 0 0 7px rgba(255, 220, 150, 0.45);
  outline: 1px solid rgba(255, 225, 160, 0.24);
  outline-offset: -3px;
}
.rankings-players-page .market-type-btn.is-active:hover {
  color: #fff8e4;
  border-color: rgba(255, 216, 145, 0.9);
  background: linear-gradient(
      rgba(116, 70, 27, 0.58),
      rgba(28, 15, 7, 0.52)
    ),
    url("/ui/char_actions_bg.png") center center / 100% 100% no-repeat;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.50),
    inset 0 1px 0 rgba(255, 242, 204, 0.28),
    inset 0 -1px 12px rgba(255, 190, 84, 0.26),
    0 0 16px rgba(255, 201, 106, 0.32);
  text-shadow: 0 0 8px rgba(255, 226, 164, 0.58);
}
.rankings-players-page .market-type-btn.rankings-class-all-btn {
  min-width: 145px;
  height: 28px;
  padding: 0 18px;
}
.rankings-tabs-panel {
  width: auto;
  min-width: 0;
  max-width: none;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: visible;
}
.rankings-tabs-panel__btn.menu-btn {
  width: 140px;
  min-width: 140px;
  max-width: 140px;
  height: 38px;
  min-height: 38px;
  margin: 0 !important;
  transform: none !important;
  flex: 0 0 110px !important;
}
.rankings-tabs-panel__btn .menu-btn__label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 0;
  padding: 0 5px;
  text-align: center;
  white-space: normal;
  line-height: 1;
  font-size: 13px;
}
.rankings-tabs-panel__btn.active,
.rankings-tabs-panel__btn.is-active {
  transform: none !important;
}
.rankings-tabs-panel .menu-btn::before,
.rankings-tabs-panel .menu-btn::after {
  pointer-events: none;
}
.rankings-tabs-row {
  width: 100%;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 18px;
  box-sizing: border-box;
  overflow: visible;
}
.rankings-tabs-row .rankings-tabs-panel {
  width: auto;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  overflow: visible;
}
.rankings-tabs-row .rankings-tabs-panel__btn.menu-btn {
  width: 140px;
  min-width: 140px;
  max-width: 140px;
  height: 38px;
  min-height: 38px;
  margin: 0 !important;
  transform: none !important;
  flex: 0 0 140px !important;
}
.rankings-tabs-row .rankings-tabs-panel__btn .menu-btn__label {
  font-size: 13px;
}
@media (max-width: 768px) {
  .rankings-tabs-row {
    margin-bottom: 14px;
    padding: 0 4px;
  }
  .rankings-tabs-panel,
  .rankings-tabs-row .rankings-tabs-panel {
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
  }
  .rankings-tabs-panel__btn.menu-btn,
  .rankings-tabs-row .rankings-tabs-panel__btn.menu-btn {
    width: 118px;
    min-width: 118px;
    max-width: 118px;
    height: 34px;
    min-height: 34px;
    flex: 0 0 118px !important;
  }
  .rankings-tabs-panel__btn .menu-btn__label,
  .rankings-tabs-row .rankings-tabs-panel__btn .menu-btn__label {
    padding: 0 4px;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.1px;
  }
}
@media (max-width: 520px) {
  .rankings-tabs-row {
    margin-bottom: 12px;
    padding: 0 2px;
  }
  .rankings-tabs-panel,
  .rankings-tabs-row .rankings-tabs-panel {
    gap: 4px;
  }
  .rankings-tabs-panel__btn.menu-btn,
  .rankings-tabs-row .rankings-tabs-panel__btn.menu-btn {
    width: 96px;
    min-width: 96px;
    max-width: 96px;
    height: 30px;
    min-height: 30px;
    flex: 0 0 96px !important;
  }
  .rankings-tabs-panel__btn .menu-btn__label,
  .rankings-tabs-row .rankings-tabs-panel__btn .menu-btn__label {
    padding: 0 3px;
    font-size: 9px;
    line-height: 0.95;
    letter-spacing: 0;
  }
}
@media (max-width: 360px) {
  .rankings-tabs-panel__btn.menu-btn,
  .rankings-tabs-row .rankings-tabs-panel__btn.menu-btn {
    width: 88px;
    min-width: 88px;
    max-width: 88px;
    height: 28px;
    min-height: 28px;
    flex: 0 0 88px !important;
  }
  .rankings-tabs-panel__btn .menu-btn__label,
  .rankings-tabs-row .rankings-tabs-panel__btn .menu-btn__label {
    font-size: 9px;
    line-height: 0.92;
  }
}
.rankings-blocked-page .rankings-blocked-account-cell {
  min-width: 0;
  white-space: nowrap;
}
.rankings-blocked-page .rankings-blocked-account {
  width: max-content;
  max-width: 100%;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  vertical-align: middle;
  white-space: nowrap;
}
.rankings-blocked-page .rankings-blocked-account__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.9))
    drop-shadow(0 0 5px rgba(217, 172, 108, 0.12));
  pointer-events: none;
  user-select: none;
}
.rankings-blocked-page .rankings-blocked-account__name {
  position: relative;
  width: auto;
  max-width: none;
  min-width: 0;
  display: inline-block;
  padding-bottom: 2px;
  color: var(--rk-name);
  font-family: "Cormorant SC", serif;
  font-weight: 800;
  line-height: 1.05;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  transition: color 0.18s ease,
    text-shadow 0.18s ease;
}
.rankings-blocked-page .rankings-blocked-account__text {
  display: inline;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}
.rankings-blocked-page .rankings-blocked-account__name::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  transform: scaleX(0);
  transform-origin: center;
  background: linear-gradient(
      90deg,
      transparent,
      var(--rk-name-line),
      transparent
    );
  transition: transform 0.18s ease;
}
.rankings-blocked-page .rankings-blocked-account:hover .rankings-blocked-account__name,
.rankings-blocked-page .rankings-table tbody tr:hover .rankings-blocked-account__name {
  color: var(--rk-name-hover);
  text-shadow: 0 0 8px rgba(255, 221, 160, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.95);
}
.rankings-blocked-page .rankings-blocked-account:hover .rankings-blocked-account__name::after,
.rankings-blocked-page .rankings-table tbody tr:hover .rankings-blocked-account__name::after {
  transform: scaleX(1);
}
.rankings-table-toolbar {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  box-sizing: border-box;
}
.rankings-table-toolbar--refresh-only {
  justify-content: flex-end;
}
.rankings-guilds-refresh-btn.menu-btn {
  width: 110px;
  min-width: 110px;
  max-width: 110px;
  height: 28px;
  min-height: 28px;
  margin: 0 !important;
  transform: none !important;
}
.rankings-guilds-refresh-btn .menu-btn__label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 0;
  padding: 0 5px;
  font-size: 9px;
  line-height: 1;
  text-align: center;
  white-space: normal;
}
.menu-btn--blue {
  --btn-base: url("/ui/button_blue_1.png");
  --btn-mid: url("/ui/button_blue_2.png");
  --btn-top: url("/ui/button_blue_3.png");
}
.rankings-table-title {
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--rk-title);
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.95),
    0 2px 6px rgba(0, 0, 0, 0.62);
}
.rankings-table-title::before,
.rankings-table-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(190, 135, 70, 0.42),
    transparent
  );
}
.rankings-table-card {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 14px 16px 16px;
  border-radius: 0;
  box-sizing: border-box;
  overflow: visible;
}
.rankings-table-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 6px 0;
  overflow: visible;
  background: linear-gradient(
    180deg,
    rgba(18, 12, 8, 0.28),
    rgba(4, 3, 2, 0.2)
  );
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.38),
    0 2px 8px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 230, 180, 0.045),
    inset 0 -1px 0 rgba(255, 230, 180, 0.025),
    inset 0 0 18px rgba(0, 0, 0, 0.34);
}
.rankings-table-wrap::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(211, 165, 95, 0.18),
    transparent
  );
}
.rankings-table-wrap::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 0, 0, 0.8),
    transparent
  );
}
.rankings-table {
  width: 100%;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-family: "Cormorant SC", serif;
}
.rankings-table th,
.rankings-table td {
  box-sizing: border-box;
  white-space: nowrap;
  overflow: visible;
}
.rankings-table thead {
  position: relative;
  background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(211, 165, 95, 0.16) 14%,
      rgba(255, 221, 160, 0.24) 50%,
      rgba(211, 165, 95, 0.16) 86%,
      transparent 100%
    )
    center bottom / calc(100% - 28px) 1px no-repeat;
}
.rankings-table thead th {
  padding: 0 10px 11px;
  color: var(--rk-head);
  font-family: "Cormorant SC", serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  vertical-align: middle;
  background: transparent;
  border: 0;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.95);
}
.rankings-table thead th.rankings-col--rank,
.rankings-table tbody td.rankings-col--rank {
  text-align: center;
}
.rankings-table tbody tr {
  position: relative;
  cursor: default;
  transition: background 0.22s ease,
    box-shadow 0.22s ease;
}
.rankings-table tbody tr::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--rk-line),
    transparent
  );
  pointer-events: none;
}
.rankings-table tbody tr:last-child::after {
  display: none;
}
.rankings-table tbody tr:hover {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(169, 103, 45, 0.13) 18%,
    rgba(169, 103, 45, 0.17) 50%,
    rgba(169, 103, 45, 0.13) 82%,
    transparent 100%
  );
  box-shadow: inset 0 1px 0 rgba(255, 231, 177, 0.045),
    inset 0 -1px 0 rgba(255, 231, 177, 0.035),
    inset 0 0 22px rgba(255, 202, 112, 0.03);
}
.rankings-table tbody td {
  padding: 8px 10px;
  color: var(--rk-row-text);
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.05;
  background: transparent;
  border: 0;
  text-align: left;
  vertical-align: middle;
  transition: color 0.22s ease,
    text-shadow 0.22s ease;
}
.rankings-table tbody tr:hover td {
  color: var(--rk-row-hover);
}
.rankings-table {
  position: relative;
  isolation: isolate;
}
.rankings-table thead {
  position: relative;
  z-index: 5;
}
.rankings-table tbody {
  position: relative;
  z-index: 1;
}
.rankings-table tbody tr {
  position: relative;
  z-index: 1;
}
.rankings-table tbody tr:hover,
.rankings-table tbody tr:focus-within {
  z-index: 20;
}
.rankings-table tbody td {
  position: relative;
  z-index: 1;
}
.rankings-table tbody tr:hover td,
.rankings-table tbody tr:focus-within td {
  z-index: 2;
}
.rankings-table .rankings-col--status,
.rankings-table .rankings-col--level,
.rankings-table .rankings-col--master,
.rankings-table .rankings-col--resets {
  overflow: visible;
}
.rankings-status-tooltip {
  position: relative;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.rankings-status-tooltip:hover,
.rankings-status-tooltip:focus-within {
  z-index: 80;
}
.rankings-status-tooltip [role="tooltip"],
.rankings-status-tooltip .tooltip,
.rankings-status-tooltip .mouse-tooltip,
.rankings-status-tooltip .account-tooltip,
.rankings-status-tooltip .rankings-tooltip {
  position: absolute;
  z-index: 9999;
  pointer-events: none;
}
.rankings-table--players .rankings-col--rank {
  width: 7%;
  text-align: center;
}
.rankings-table--players .rankings-col--name {
  width: 18%;
}
.rankings-table--players .rankings-col--guild {
  width: 16%;
}
.rankings-table--players .rankings-col--class {
  width: 19%;
}
.rankings-table--players .rankings-col--level {
  width: 9%;
  text-align: center;
}
.rankings-table--players .rankings-col--master {
  width: 14%;
  text-align: center;
}
.rankings-table--players .rankings-col--resets {
  width: 9%;
  text-align: center;
}
.rankings-table--players .rankings-col--status {
  width: 8%;
  text-align: center;
}
.rankings-table--players th.rankings-col--level,
.rankings-table--players th.rankings-col--master,
.rankings-table--players th.rankings-col--resets,
.rankings-table--players th.rankings-col--status {
  text-align: center;
  white-space: nowrap;
}
.rankings-table--guilds .rankings-col--rank {
  width: 7%;
  text-align: center;
}
.rankings-table--guilds .rankings-col--guild-name {
  width: 31%;
}
.rankings-table--guilds .rankings-col--guild-master {
  width: 22%;
}
.rankings-table--guilds .rankings-col--alliance {
  width: 21%;
}
.rankings-table--guilds .rankings-col--avg-resets {
  width: 11%;
  text-align: center;
}
.rankings-table--guilds .rankings-col--members {
  width: 8%;
  text-align: center;
}
.rankings-table--guilds th.rankings-col--avg-resets,
.rankings-table--guilds th.rankings-col--members {
  text-align: center;
  white-space: nowrap;
}
.rankings-rank-badge {
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-image: url("/ui/char_frame.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: #e2d1b5;
  font-family: "Cormorant SC", serif;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.85))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9),
    0 0 4px rgba(255, 255, 255, 0.04);
}
.rankings-rank-badge--top {
  background-image: url("/ui/char_frame_hover.png");
  color: #f1dfc1;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.85))
    drop-shadow(0 2px 5px rgba(0, 0, 0, 0.52))
    drop-shadow(0 0 6px rgba(225, 207, 179, 0.1));
}
.rankings-player-link,
.rankings-guild-link {
  position: relative;
  color: var(--rk-name);
  text-decoration: none;
  font-family: "Cormorant SC", serif;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  transition: color 0.18s ease,
    text-shadow 0.18s ease;
}
.rankings-guild-link {
  color: var(--rk-guild);
}
.rankings-player-link:hover,
.rankings-guild-link:hover {
  color: var(--rk-name-hover);
  text-shadow: 0 0 8px rgba(255, 221, 160, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.95);
}
.rankings-player-link::after,
.rankings-guild-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  transform: scaleX(0);
  transform-origin: center;
  background: linear-gradient(
    90deg,
    transparent,
    var(--rk-name-line),
    transparent
  );
  transition: transform 0.18s ease;
}
.rankings-player-link:hover::after,
.rankings-guild-link:hover::after {
  transform: scaleX(1);
}
.rankings-player-name {
  color: var(--rk-name);
  font-weight: 800;
}
.rankings-muted {
  color: var(--rk-text-dim);
  font-style: italic;
}
.rankings-status-tooltip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rankings-status-icon {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}
.rankings-table-message {
  padding: 20px 10px !important;
  color: var(--rk-text-soft) !important;
  font-family: "Cormorant SC", serif;
  font-size: 14px !important;
  font-weight: 700;
  text-align: center !important;
}
.rankings-pagination {
  margin-top: 16px;
}
.rankings-pagination__dots {
  min-width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #b89c73;
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}
@media (min-width: 1121px) {
  .rankings-players-page {
    --mu-filter-size: 42px;
  }
  .rankings-top-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 12px;
  }
  .rankings-top-grid__filters {
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .rankings-class-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--mu-filter-size));
    justify-content: center;
    justify-items: center;
    align-items: center;
    gap: 17px;
    width: 100%;
    padding: 0;
  }
  .rankings-tabs-panel {
    display: flex;
    justify-content: center;
    gap: 6px;
  }
}
@media (max-width: 1600px) and (min-width: 1121px) {
  .rankings-players-page {
    --mu-filter-size: 38px;
  }
  .rankings-class-grid {
    gap: 10px;
  }
  .rankings-table-card {
    padding: 12px 12px 14px;
  }
  .rankings-table-wrap {
    padding: 5px 0;
  }
  .rankings-table thead th {
    padding: 0 7px 10px;
    font-size: 10px;
    letter-spacing: 0.045em;
  }
  .rankings-table tbody td {
    padding: 7px 7px;
    font-size: 13px;
  }
  .rankings-players-page .rankings-table--players .rankings-col--guild,
  .rankings-players-page .rankings-table--players th.rankings-col--guild,
  .rankings-players-page .rankings-table--players td.rankings-col--guild {
    display: none;
  }
  .rankings-players-page .rankings-table--players .rankings-col--rank {
    width: 7%;
    text-align: center;
  }
  .rankings-players-page .rankings-table--players .rankings-col--name {
    width: 28%;
  }
  .rankings-players-page .rankings-table--players .rankings-col--class {
    width: 24%;
  }
  .rankings-players-page .rankings-table--players .rankings-col--level {
    width: 10%;
    text-align: center;
  }
  .rankings-players-page .rankings-table--players .rankings-col--master {
    width: 17%;
    text-align: center;
  }
  .rankings-players-page .rankings-table--players .rankings-col--resets {
    width: 8%;
    text-align: center;
  }
  .rankings-players-page .rankings-table--players .rankings-col--status {
    width: 6%;
    text-align: center;
  }
  .rankings-players-page .rankings-table--players th.rankings-col--master,
  .rankings-players-page .rankings-table--players th.rankings-col--resets {
    text-align: center;
    white-space: nowrap;
  }
  .rankings-players-page .rankings-player-link,
  .rankings-players-page .rankings-player-name {
    font-size: 12px;
  }
  .rankings-players-page .rankings-status-icon,
  .rankings-players-page .rankings-status-tooltip,
  .rankings-players-page td .account-topbar__icon,
  .rankings-players-page td .account-topbar__status-icon {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    max-width: 17px !important;
    max-height: 17px !important;
  }
}
@media (max-width: 1450px) and (min-width: 1121px) {
  .rankings-players-page {
    --mu-filter-size: 34px;
  }
  .rankings-class-grid {
    gap: 8px;
  }
  .rankings-tabs-panel__btn.menu-btn {
    width: 104px;
    min-width: 104px;
    max-width: 104px;
    flex: 0 0 104px !important;
  }
  .rankings-tabs-panel__btn .menu-btn__label {
    font-size: 10px;
  }
  .rankings-table-card {
    padding: 10px 10px 12px;
  }
  .rankings-table thead th {
    padding: 0 5px 9px;
    font-size: 9px;
    letter-spacing: 0.035em;
  }
  .rankings-table tbody td {
    padding: 7px 5px;
    font-size: 12px;
  }
  .rankings-players-page .rankings-table--players .rankings-col--rank {
    width: 7%;
    text-align: center;
  }
  .rankings-players-page .rankings-table--players .rankings-col--name {
    width: 27%;
  }
  .rankings-players-page .rankings-table--players .rankings-col--class {
    width: 24%;
  }
  .rankings-players-page .rankings-table--players .rankings-col--level {
    width: 10%;
    text-align: center;
  }
  .rankings-players-page .rankings-table--players .rankings-col--master {
    width: 18%;
    text-align: center;
  }
  .rankings-players-page .rankings-table--players .rankings-col--resets {
    width: 8%;
    text-align: center;
  }
  .rankings-players-page .rankings-table--players .rankings-col--status {
    width: 6%;
    text-align: center;
  }
  .rankings-players-page .rankings-table--players th.rankings-col--master,
  .rankings-players-page .rankings-table--players th.rankings-col--resets {
    text-align: center;
    white-space: nowrap;
  }
  .rankings-players-page .rankings-player-cell {
    gap: 5px;
  }
  .rankings-players-page .rankings-player-link,
  .rankings-players-page .rankings-player-name {
    font-size: 11px;
  }
  .rankings-players-page .rankings-invis-icon-wrap {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
  }
  .rankings-players-page .rankings-invis-icon {
    width: 15px !important;
    height: 15px !important;
  }
  .rankings-players-page .rankings-status-icon,
  .rankings-players-page .rankings-status-tooltip,
  .rankings-players-page td .account-topbar__icon,
  .rankings-players-page td .account-topbar__status-icon {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
  }
}
@media (max-width: 1120px) {
  .rankings-players-page {
    --mu-filter-size: 42px;
  }
  .rankings-top-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 14px;
  }
  .rankings-top-grid__tabs {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .rankings-top-grid__filters {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
  }
  .rankings-class-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 5px;
    justify-items: center;
    align-items: center;
    column-gap: 9px;
    row-gap: 9px;
  }
  .rankings-class-all-row {
    margin-top: 12px;
  }
  .rankings-tabs-panel {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 110px);
    grid-template-rows: 28px;
    justify-content: center;
    align-content: center;
    gap: 8px;
  }
  .rankings-tabs-panel__btn.menu-btn {
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    height: 34px;
    min-height: 34px;
  }
  .rankings-table-card {
    padding-left: 8px;
    padding-right: 8px;
  }
  .rankings-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
  }
  .rankings-table {
    min-width: 720px;
  }
}
@media (max-width: 720px) {
  .rankings-players-page {
    --mu-filter-size: 39px;
  }
  .rankings-top-grid {
    margin-bottom: 16px;
    gap: 12px;
  }
  .rankings-top-grid__filters {
    max-width: 420px;
  }
  .rankings-class-grid {
    gap: 6px;
  }
  .rankings-tabs-panel,
  .rankings-tabs-row .rankings-tabs-panel {
    display: grid;
    grid-template-columns: repeat(2, 110px);
    grid-template-rows: repeat(2, 28px);
    justify-content: center;
    gap: 10px;
  }
  .rankings-table thead th {
    padding: 0 8px 10px;
    font-size: 10px;
  }
  .rankings-table tbody td {
    padding: 7px 8px;
    font-size: 13px;
  }
}
@media (max-width: 560px) {
  .rankings-top-grid__filters {
    max-width: 340px;
  }
  .rankings-class-grid {
    gap: 7px;
  }
  .rankings-players-page .market-type-btn {
    height: 25px;
    font-size: 10px;
  }
}
@media (max-width: 420px) {
  .rankings-players-page {
    --mu-filter-size: 36px;
  }
  .rankings-top-grid__filters {
    max-width: 318px;
  }
  .rankings-class-grid {
    gap: 5px;
  }
  .rankings-tabs-panel,
  .rankings-tabs-row .rankings-tabs-panel {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 28px);
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    margin-left: auto;
    margin-right: auto;
  }
  .rankings-tabs-panel__btn.menu-btn,
  .rankings-tabs-row .rankings-tabs-panel__btn.menu-btn {
    width: 140px;
    min-width: 140px;
    max-width: 140px;
  }
}
.rankings-player-link,
.rankings-player-name,
.rankings-guild-name-link {
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--rk-name);
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 1),
    0 0 10px rgba(0, 0, 0, 0.8);
  transition: color 0.3s ease,
    text-shadow 0.3s ease,
    filter 0.3s ease;
}
.rankings-player-link::after,
.rankings-player-name::after,
.rankings-guild-name-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
      90deg,
      transparent 0%,
      var(--rk-name-line) 30%,
      var(--rk-name-hover) 50%,
      var(--rk-name-line) 70%,
      transparent 100%
    );
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.4s ease;
}
.rankings-table tbody tr:hover .rankings-player-link,
.rankings-table tbody tr:hover .rankings-player-name,
.rankings-table tbody tr:hover .rankings-guild-name-link {
  color: var(--rk-name-hover);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 1),
    0 0 10px rgba(0, 0, 0, 0.8),
    0 0 8px rgba(255, 221, 160, 0.16);
}
.rankings-table tbody tr:hover .rankings-player-link::after,
.rankings-table tbody tr:hover .rankings-player-name::after,
.rankings-table tbody tr:hover .rankings-guild-name-link::after,
.rankings-player-link:hover::after,
.rankings-guild-name-link:hover::after {
  transform: scaleX(1);
}
.rankings-player-cell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  min-height: 22px;
  padding-right: 0;
  vertical-align: middle;
  overflow: visible;
}
.rankings-player-cell.tooltip {
  position: relative;
}
.rankings-invis-icon-wrap {
  position: relative;
  top: auto;
  right: auto;
  z-index: 3;
  width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 17px;
  pointer-events: auto;
}
.rankings-invis-icon {
  width: 17px !important;
  height: 17px !important;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(130, 190, 255, 0.55))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85));
  opacity: 0.96;
}
.rankings-player-cell.tooltip::after {
  left: 50%;
  top: calc(100% + 8px);
  transform: translate(-50%, 4px);
  min-width: 90px;
  width: max-content;
  max-width: 240px;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  text-align: center;
  padding: 9px 12px;
  line-height: 1.25;
}
.rankings-player-cell.tooltip:hover::after {
  transform: translate(-50%, 0);
}
.rankings-guild-link {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--rk-guild);
  text-decoration: none;
  font-weight: 650;
  transition: color 0.16s ease,
    text-shadow 0.16s ease;
}
.rankings-guild-link:hover,
.rankings-table tbody tr:hover .rankings-guild-link {
  color: #ddd0b7;
  text-shadow: 0 0 5px rgba(221, 208, 183, 0.12);
}
.rankings-muted {
  color: var(--rk-text-dim);
  opacity: 0.86;
  font-style: italic;
  font-weight: 550;
}
.rankings-table-message {
  padding: 18px !important;
  color: var(--rk-text) !important;
  font-size: 16px !important;
  text-align: center !important;
}
.rankings-guild-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
.rankings-guild-mark {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(108, 91, 74, 0.42);
  background: linear-gradient(
      180deg,
      rgba(12, 10, 8, 0.92),
      rgba(4, 4, 4, 0.96)
    );
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.72),
    inset 0 0 8px rgba(255, 230, 180, 0.025),
    0 2px 5px rgba(0, 0, 0, 0.35);
}
.rankings-guild-mark svg {
  width: 30px;
  height: 30px;
  display: block;
}
.rankings-table .rankings-status-tooltip {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  overflow: visible !important;
  line-height: 1;
}
.rankings-table .rankings-status-icon,
.rankings-table td .account-topbar__icon,
.rankings-table td .account-topbar__status-icon {
  display: block !important;
  width: 25px !important;
  height: 25px !important;
  min-width: 25px !important;
  max-width: 25px !important;
  max-height: 25px !important;
  object-fit: contain !important;
  flex: 0 0 25px !important;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.9))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.42));
}
.rankings-pagination {
  margin-top: 16px;
}
.rankings-pagination__dots {
  min-width: 18px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rk-text-soft);
  font-family: "Cormorant SC", serif;
  font-size: 15px;
  font-weight: 700;
}
.rankings-table {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-family: "Cormorant SC", serif;
}
.rankings-table th,
.rankings-table td {
  box-sizing: border-box;
  white-space: nowrap;
  overflow: visible;
}
.rankings-table thead {
  position: relative;
  z-index: 5;
}
.rankings-table tbody {
  position: relative;
  z-index: 1;
}
.rankings-table tbody tr {
  position: relative;
  z-index: 1;
}
.rankings-table tbody tr:hover,
.rankings-table tbody tr:focus-within {
  z-index: 30;
}
.rankings-table tbody td {
  position: relative;
  z-index: 1;
}
.rankings-table tbody tr:hover td,
.rankings-table tbody tr:focus-within td {
  z-index: 2;
}
.rankings-table-card,
.rankings-table-wrap {
  overflow: visible;
}
.rankings-status-tooltip {
  position: relative;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.rankings-status-tooltip:hover,
.rankings-status-tooltip:focus-within {
  z-index: 100;
}
.rankings-table .rankings-col--status,
.rankings-table .rankings-col--level,
.rankings-table .rankings-col--master,
.rankings-table .rankings-col--resets {
  overflow: visible;
}
.rankings-table--players .rankings-col--rank {
  width: 7%;
  text-align: center;
}
.rankings-table--players .rankings-col--name {
  width: 20%;
}
.rankings-table--players .rankings-col--guild {
  width: 16%;
}
.rankings-table--players .rankings-col--class {
  width: 19%;
}
.rankings-table--players .rankings-col--level {
  width: 9%;
  text-align: center;
}
.rankings-table--players .rankings-col--master {
  width: 14%;
  text-align: center;
}
.rankings-table--players .rankings-col--resets {
  width: 9%;
  text-align: center;
}
.rankings-table--players .rankings-col--status {
  width: 6%;
  text-align: center;
}
.rankings-table--players th.rankings-col--level,
.rankings-table--players th.rankings-col--master,
.rankings-table--players th.rankings-col--resets,
.rankings-table--players th.rankings-col--status {
  text-align: center;
  white-space: nowrap;
}
.rankings-table--guilds .rankings-col--rank {
  width: 5%;
  text-align: center;
}
.rankings-table--guilds .rankings-col--guild-name {
  width: 19%;
}
.rankings-table--guilds .rankings-col--guild-master {
  width: 14%;
  display: table-cell;
}
.rankings-table--guilds .rankings-col--alliance {
  width: 12%;
  display: table-cell;
}
.rankings-table--guilds .rankings-col--guild-level {
  width: 8%;
  text-align: center;
}
.rankings-table--guilds .rankings-col--guild-experience {
  width: 12%;
  text-align: center;
}
.rankings-table--guilds .rankings-col--brotherhood-reset {
  width: 13%;
  text-align: center;
}
.rankings-table--guilds .rankings-col--avg-resets {
  width: 10%;
  text-align: center;
  display: table-cell;
}
.rankings-table--guilds .rankings-col--members {
  width: 7%;
  text-align: center;
  display: table-cell;
}
.rankings-table--guilds th.rankings-col--guild-level,
.rankings-table--guilds th.rankings-col--guild-experience,
.rankings-table--guilds th.rankings-col--brotherhood-reset,
.rankings-table--guilds th.rankings-col--avg-resets,
.rankings-table--guilds th.rankings-col--members {
  text-align: center;
}
@media (min-width: 1121px) {
  .rankings-players-page {
    --mu-filter-size: 42px;
  }
  .rankings-top-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 12px;
  }
  .rankings-top-grid__filters {
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .rankings-class-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--mu-filter-size));
    justify-content: center;
    justify-items: center;
    align-items: center;
    gap: 17px;
    width: 100%;
    padding: 0;
  }
  .rankings-tabs-panel {
    display: flex;
    justify-content: center;
    gap: 6px;
  }
}
@media (max-width: 1600px) and (min-width: 1121px) {
  .rankings-players-page {
    --mu-filter-size: 38px;
  }
  .rankings-class-grid {
    gap: 10px;
  }
  .rankings-table-card {
    padding: 12px 12px 14px;
  }
  .rankings-table-wrap {
    padding: 5px 0;
    overflow: visible;
  }
  .rankings-table thead th {
    padding: 0 7px 10px;
    font-size: 10px;
    letter-spacing: 0.045em;
  }
  .rankings-table tbody td {
    padding: 7px 7px;
    font-size: 13px;
  }
  .rankings-players-page .rankings-table--players .rankings-col--guild,
  .rankings-players-page .rankings-table--players th.rankings-col--guild,
  .rankings-players-page .rankings-table--players td.rankings-col--guild {
    display: none;
  }
  .rankings-players-page .rankings-table--players .rankings-col--rank {
    width: 7%;
    text-align: center;
  }
  .rankings-players-page .rankings-table--players .rankings-col--name {
    width: 27%;
  }
  .rankings-players-page .rankings-table--players .rankings-col--class {
    width: 23%;
  }
  .rankings-players-page .rankings-table--players .rankings-col--level {
    width: 10%;
    text-align: center;
  }
  .rankings-players-page .rankings-table--players .rankings-col--master {
    width: 17%;
    text-align: center;
  }
  .rankings-players-page .rankings-table--players .rankings-col--resets {
    width: 9%;
    text-align: center;
  }
  .rankings-players-page .rankings-table--players .rankings-col--status {
    width: 7%;
    text-align: center;
  }
  .rankings-players-page .rankings-table--players th.rankings-col--master,
  .rankings-players-page .rankings-table--players th.rankings-col--resets {
    text-align: center;
    white-space: nowrap;
  }
  .rankings-players-page .rankings-player-link,
  .rankings-players-page .rankings-player-name {
    font-size: 12px;
  }
  .rankings-players-page .rankings-status-icon,
  .rankings-players-page .rankings-status-tooltip,
  .rankings-players-page td .account-topbar__icon,
  .rankings-players-page td .account-topbar__status-icon {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    max-width: 17px !important;
    max-height: 17px !important;
  }
}
@media (max-width: 1450px) and (min-width: 1121px) {
  .rankings-players-page {
    --mu-filter-size: 34px;
  }
  .rankings-class-grid {
    gap: 8px;
  }
  .rankings-tabs-panel__btn.menu-btn {
    width: 104px;
    min-width: 104px;
    max-width: 104px;
    flex: 0 0 104px !important;
  }
  .rankings-tabs-panel__btn .menu-btn__label {
    font-size: 10px;
  }
  .rankings-table-card {
    padding: 10px 10px 12px;
  }
  .rankings-table thead th {
    padding: 0 5px 9px;
    font-size: 9px;
    letter-spacing: 0.035em;
  }
  .rankings-table tbody td {
    padding: 7px 5px;
    font-size: 12px;
  }
  .rankings-players-page .rankings-table--players .rankings-col--rank {
    width: 7%;
  }
  .rankings-players-page .rankings-table--players .rankings-col--name {
    width: 27%;
  }
  .rankings-players-page .rankings-table--players .rankings-col--class {
    width: 23%;
  }
  .rankings-players-page .rankings-table--players .rankings-col--level {
    width: 10%;
  }
  .rankings-players-page .rankings-table--players .rankings-col--master {
    width: 17%;
  }
  .rankings-players-page .rankings-table--players .rankings-col--resets {
    width: 9%;
  }
  .rankings-players-page .rankings-table--players .rankings-col--status {
    width: 7%;
  }
  .rankings-players-page .rankings-player-cell {
    gap: 5px;
  }
  .rankings-players-page .rankings-player-link,
  .rankings-players-page .rankings-player-name {
    font-size: 11px;
  }
  .rankings-players-page .rankings-invis-icon-wrap {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
  }
  .rankings-players-page .rankings-invis-icon {
    width: 15px !important;
    height: 15px !important;
  }
  .rankings-players-page .rankings-status-icon,
  .rankings-players-page .rankings-status-tooltip,
  .rankings-players-page td .account-topbar__icon,
  .rankings-players-page td .account-topbar__status-icon {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
  }
}
@media (max-width: 1120px) {
  .rankings-players-page {
    --mu-filter-size: 42px;
  }
  .rankings-top-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 14px;
  }
  .rankings-top-grid__tabs {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .rankings-top-grid__filters {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
  }
  .rankings-class-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 5px;
    justify-items: center;
    align-items: center;
    column-gap: 9px;
    row-gap: 9px;
  }
  .rankings-class-all-row {
    margin-top: 12px;
  }
  .rankings-tabs-panel {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 110px);
    grid-template-rows: 28px;
    justify-content: center;
    align-content: center;
    gap: 8px;
  }
  .rankings-tabs-panel__btn.menu-btn {
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    height: 34px;
    min-height: 34px;
  }
  .rankings-table-card {
    padding: 10px 8px 12px;
    overflow: visible;
  }
  .rankings-table-wrap {
    width: 100%;
    min-width: 0;
    padding: 5px 0;
    overflow: visible;
  }
  .rankings-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }
  .rankings-table thead th {
    padding: 0 5px 9px;
    font-size: 9px;
    letter-spacing: 0.03em;
  }
  .rankings-table tbody td {
    padding: 7px 5px;
    font-size: 12px;
  }
  .rankings-table--players .rankings-col--guild,
  .rankings-table--players th.rankings-col--guild,
  .rankings-table--players td.rankings-col--guild,
  .rankings-table--players .rankings-col--level,
  .rankings-table--players th.rankings-col--level,
  .rankings-table--players td.rankings-col--level {
    display: none;
  }
  .rankings-table--players .rankings-col--rank {
    width: 11%;
    text-align: center;
  }
  .rankings-table--players .rankings-col--name {
    width: 31%;
  }
  .rankings-table--players .rankings-col--class {
    width: 23%;
  }
  .rankings-table--players .rankings-col--master {
    width: 16%;
    text-align: center;
  }
  .rankings-table--players .rankings-col--resets {
    width: 11%;
    text-align: center;
  }
  .rankings-table--players .rankings-col--status {
    width: 8%;
    text-align: center;
  }
  .rankings-table--guilds .rankings-col--guild-master,
  .rankings-table--guilds th.rankings-col--guild-master,
  .rankings-table--guilds td.rankings-col--guild-master,
  .rankings-table--guilds .rankings-col--alliance,
  .rankings-table--guilds th.rankings-col--alliance,
  .rankings-table--guilds td.rankings-col--alliance,
  .rankings-table--guilds .rankings-col--members,
  .rankings-table--guilds th.rankings-col--members,
  .rankings-table--guilds td.rankings-col--members {
    display: none;
  }
  .rankings-table--guilds .rankings-col--rank {
    width: 9%;
    text-align: center;
  }
  .rankings-table--guilds .rankings-col--guild-name {
    width: 31%;
  }
  .rankings-table--guilds .rankings-col--guild-level {
    width: 11%;
  }
  .rankings-table--guilds .rankings-col--guild-experience {
    width: 18%;
  }
  .rankings-table--guilds .rankings-col--brotherhood-reset {
    width: 20%;
  }
  .rankings-table--guilds .rankings-col--avg-resets {
    width: 11%;
    text-align: center;
  }
}
@media (max-width: 720px) {
  .rankings-players-page {
    --mu-filter-size: 39px;
  }
  .rankings-top-grid {
    margin-bottom: 16px;
    gap: 12px;
  }
  .rankings-top-grid__filters {
    max-width: 420px;
  }
  .rankings-class-grid {
    gap: 6px;
  }
  .rankings-tabs-panel,
  .rankings-tabs-row .rankings-tabs-panel {
    display: grid;
    grid-template-columns: repeat(2, 110px);
    grid-template-rows: repeat(2, 28px);
    justify-content: center;
    gap: 10px;
  }
  .rankings-table-card {
    padding: 8px 5px 10px;
  }
  .rankings-table thead th {
    padding: 0 4px 8px;
    font-size: 8px;
    letter-spacing: 0.025em;
  }
  .rankings-table tbody td {
    padding: 7px 4px;
    font-size: 11px;
  }
  .rankings-rank-badge {
    width: 22px;
    height: 22px;
    font-size: 8px;
  }
  .rankings-status-icon,
  .rankings-status-tooltip,
  td .account-topbar__icon,
  td .account-topbar__status-icon {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    max-width: 15px !important;
    max-height: 15px !important;
  }
  .rankings-table--players .rankings-col--class,
  .rankings-table--players th.rankings-col--class,
  .rankings-table--players td.rankings-col--class,
  .rankings-table--players .rankings-col--master,
  .rankings-table--players th.rankings-col--master,
  .rankings-table--players td.rankings-col--master {
    display: none;
  }
  .rankings-table--players .rankings-col--rank {
    width: 15%;
    text-align: center;
  }
  .rankings-table--players .rankings-col--name {
    width: 51%;
  }
  .rankings-table--players .rankings-col--resets {
    width: 20%;
    text-align: center;
  }
  .rankings-table--players .rankings-col--status {
    width: 14%;
    text-align: center;
  }
  .rankings-table--guilds .rankings-col--guild-experience,
  .rankings-table--guilds th.rankings-col--guild-experience,
  .rankings-table--guilds td.rankings-col--guild-experience,
  .rankings-table--guilds .rankings-col--avg-resets,
  .rankings-table--guilds th.rankings-col--avg-resets,
  .rankings-table--guilds td.rankings-col--avg-resets {
    display: none;
  }
  .rankings-table--guilds .rankings-col--rank {
    width: 13%;
    text-align: center;
  }
  .rankings-table--guilds .rankings-col--guild-name {
    width: 42%;
  }
  .rankings-table--guilds .rankings-col--guild-level {
    width: 17%;
  }
  .rankings-table--guilds .rankings-col--brotherhood-reset {
    width: 28%;
  }
  .rankings-player-link,
  .rankings-guild-link,
  .rankings-player-name {
    font-size: 11px;
  }
}
@media (max-width: 560px) {
  .rankings-top-grid__filters {
    max-width: 340px;
  }
  .rankings-class-grid {
    gap: 7px;
  }
  .rankings-players-page .market-type-btn {
    height: 25px;
    font-size: 10px;
  }
  .rankings-table-card {
    padding-left: 3px;
    padding-right: 3px;
  }
  .rankings-table thead th {
    padding-left: 3px;
    padding-right: 3px;
    font-size: 7px;
    letter-spacing: 0.015em;
  }
  .rankings-table tbody td {
    padding-left: 3px;
    padding-right: 3px;
    font-size: 10px;
  }
  .rankings-rank-badge {
    width: 20px;
    height: 20px;
    font-size: 8px;
  }
  .rankings-status-icon,
  .rankings-status-tooltip,
  td .account-topbar__icon,
  td .account-topbar__status-icon {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
  }
  .rankings-table--players .rankings-col--rank {
    width: 15%;
  }
  .rankings-table--players .rankings-col--name {
    width: 52%;
  }
  .rankings-table--players .rankings-col--resets {
    width: 19%;
  }
  .rankings-table--players .rankings-col--status {
    width: 14%;
  }
  .rankings-table--guilds .rankings-col--rank {
    width: 13%;
  }
  .rankings-table--guilds .rankings-col--guild-name {
    width: 42%;
  }
  .rankings-table--guilds .rankings-col--guild-level {
    width: 17%;
  }
  .rankings-table--guilds .rankings-col--brotherhood-reset {
    width: 28%;
  }
}
@media (max-width: 420px) {
  .rankings-players-page {
    --mu-filter-size: 36px;
  }
  .rankings-top-grid__filters {
    max-width: 318px;
  }
  .rankings-class-grid {
    gap: 5px;
  }
  .rankings-tabs-panel,
  .rankings-tabs-row .rankings-tabs-panel {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 28px);
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    margin-left: auto;
    margin-right: auto;
  }
  .rankings-tabs-panel__btn.menu-btn,
  .rankings-tabs-row .rankings-tabs-panel__btn.menu-btn {
    width: 140px;
    min-width: 140px;
    max-width: 140px;
  }
  .rankings-table-card {
    padding-left: 0;
    padding-right: 0;
  }
  .rankings-table thead th {
    font-size: 7px;
    letter-spacing: 0.01em;
  }
  .rankings-table tbody td {
    font-size: 10px;
  }
  .rankings-rank-badge {
    width: 19px;
    height: 19px;
    font-size: 7px;
  }
  .rankings-table--players .rankings-col--rank {
    width: 16%;
  }
  .rankings-table--players .rankings-col--name {
    width: 52%;
  }
  .rankings-table--players .rankings-col--resets {
    width: 18%;
  }
  .rankings-table--players .rankings-col--status {
    width: 14%;
  }
  .rankings-table--guilds .rankings-col--rank {
    width: 14%;
  }
  .rankings-table--guilds .rankings-col--guild-name {
    width: 43%;
  }
  .rankings-table--guilds .rankings-col--guild-level {
    width: 17%;
  }
  .rankings-table--guilds .rankings-col--brotherhood-reset {
    width: 26%;
  }
}
.rankings-guild-details-page {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: visible;
}
.rankings-guild-details-toolbar {
  justify-content: flex-end;
  margin: 0 0 12px;
}
.rankings-guild-details-back-btn.menu-btn {
  width: 110px;
  min-width: 110px;
  max-width: 110px;
  height: 28px;
  min-height: 28px;
  margin: 0 !important;
  transform: none !important;
}
.rankings-guild-details-back-btn .menu-btn__label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 0;
  padding: 0 5px;
  font-size: 9px;
  line-height: 1;
  text-align: center;
  white-space: normal;
}
.rankings-guild-details-title {
  margin-bottom: 12px;
}
.rankings-guild-details-title__main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  gap: 10px;
}
.rankings-guild-details-title__mark {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(108, 91, 74, 0.46);
  background: linear-gradient(
      180deg,
      rgba(12, 10, 8, 0.92),
      rgba(4, 4, 4, 0.96)
    );
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.72),
    inset 0 0 8px rgba(255, 230, 180, 0.025),
    0 2px 6px rgba(0, 0, 0, 0.38);
}
.rankings-guild-details-title__mark svg {
  width: 34px;
  height: 34px;
  display: block;
}
.rankings-guild-details-title__text {
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rankings-guild-details-alliance {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 12px;
  box-sizing: border-box;
  background: linear-gradient(
      180deg,
      rgba(18, 12, 8, 0.26),
      rgba(4, 3, 2, 0.18)
    );
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 230, 180, 0.04),
    inset 0 -1px 0 rgba(255, 230, 180, 0.02),
    inset 0 0 14px rgba(0, 0, 0, 0.28);
}
.rankings-guild-details-alliance__label {
  color: var(--rk-head);
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.95);
}
.rankings-guild-details-alliance__mark {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(108, 91, 74, 0.42);
  background: linear-gradient(
      180deg,
      rgba(12, 10, 8, 0.92),
      rgba(4, 4, 4, 0.96)
    );
}
.rankings-guild-details-alliance__mark svg {
  width: 22px;
  height: 22px;
  display: block;
}
.rankings-guild-details-alliance__link {
  max-width: 220px;
}
.rankings-table--guild-details {
  width: 100%;
  table-layout: fixed;
}
.rankings-table--guild-details .rankings-col--rank {
  width: 56px;
}
.rankings-table--guild-details .rankings-col--member-name {
  width: 28%;
}
.rankings-table--guild-details .rankings-col--member-role {
  width: 24%;
}
.rankings-table--guild-details .rankings-col--member-level {
  width: 90px;
  text-align: center;
}
.rankings-table--guild-details .rankings-col--member-resets {
  width: 90px;
  text-align: center;
}
.rankings-table--guild-details .rankings-col--member-status {
  width: 120px;
  text-align: center;
}
.rankings-table--guild-details td.rankings-col--member-name,
.rankings-table--guild-details td.rankings-col--member-role {
  text-align: left;
}
.rankings-guild-role {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--rk-guild);
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.95);
}
.rankings-member-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
}
.rankings-member-status__text {
  color: var(--rk-text-soft);
  font-family: "Cormorant SC", serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.95);
}
@media (max-width: 720px) {
  .rankings-guild-details-toolbar {
    justify-content: center;
    margin-bottom: 12px;
  }
  .rankings-guild-details-back-btn.menu-btn {
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    height: 30px;
    min-height: 30px;
  }
  .rankings-guild-details-title__main {
    gap: 8px;
  }
  .rankings-guild-details-title__mark {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }
  .rankings-guild-details-title__mark svg {
    width: 28px;
    height: 28px;
  }
  .rankings-guild-details-title__text {
    max-width: min(260px, 70vw);
  }
  .rankings-guild-details-alliance {
    margin-bottom: 12px;
    padding: 6px 10px;
  }
  .rankings-guild-details-alliance__label {
    font-size: 10px;
  }
  .rankings-guild-details-alliance__link {
    max-width: 150px;
  }
  .rankings-table--guild-details {
    width: 100%;
    table-layout: auto !important;
  }
  .rankings-table--guild-details .rankings-col--rank,
  .rankings-table--guild-details th.rankings-col--rank,
  .rankings-table--guild-details td.rankings-col--rank {
    display: none;
  }
  .rankings-table--guild-details .rankings-col--member-name,
  .rankings-table--guild-details th.rankings-col--member-name,
  .rankings-table--guild-details td.rankings-col--member-name {
    width: auto !important;
  }
  .rankings-table--guild-details .rankings-col--member-role,
  .rankings-table--guild-details th.rankings-col--member-role,
  .rankings-table--guild-details td.rankings-col--member-role,
  .rankings-table--guild-details .rankings-col--member-level,
  .rankings-table--guild-details th.rankings-col--member-level,
  .rankings-table--guild-details td.rankings-col--member-level,
  .rankings-table--guild-details .rankings-col--member-resets,
  .rankings-table--guild-details th.rankings-col--member-resets,
  .rankings-table--guild-details td.rankings-col--member-resets,
  .rankings-table--guild-details .rankings-col--member-status,
  .rankings-table--guild-details th.rankings-col--member-status,
  .rankings-table--guild-details td.rankings-col--member-status {
    width: 1% !important;
    white-space: nowrap;
    text-align: center;
  }
  .rankings-member-status {
    gap: 0;
  }
  .rankings-member-status__text {
    display: none;
  }
  .rankings-guild-role {
    font-size: 10px;
  }
}
@media (max-width: 420px) {
  .rankings-guild-details-title__text {
    max-width: min(220px, 68vw);
  }
  .rankings-guild-role {
    font-size: 9px;
  }
  .rankings-table--guild-details th,
  .rankings-table--guild-details td {
    font-size: 9px;
  }
}
.rankings-hunt-season-page {
  width: 100%;
  min-width: 0;
}
.rankings-hunt-season-current {
  position: relative;
  width: fit-content;
  min-width: 210px;
  max-width: min(100%, 360px);
  margin: 0 auto 16px;
  padding: 8px 22px 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(190, 145, 86, 0.72);
  border-radius: 0;
  background: radial-gradient(
      circle at 50% 10%,
      rgba(52, 39, 26, 0.92) 0%,
      rgba(18, 13, 9, 0.96) 54%,
      rgba(5, 4, 3, 0.98) 100%
    );
  box-shadow: inset 0 0 0 1px rgba(255, 226, 166, 0.055),
    inset 0 8px 15px rgba(255, 255, 255, 0.018),
    inset 0 -10px 18px rgba(0, 0, 0, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.42),
    0 0 12px rgba(190, 145, 86, 0.08);
  overflow: hidden;
  isolation: isolate;
}
.rankings-hunt-season-current::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(232, 196, 132, 0.055) 18%,
      rgba(232, 196, 132, 0.115) 50%,
      rgba(232, 196, 132, 0.055) 82%,
      transparent 100%
    );
  opacity: 0.95;
}
.rankings-hunt-season-current::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 50%;
  z-index: 0;
  pointer-events: none;
  height: 1px;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(190, 145, 86, 0.42),
      transparent
    );
  opacity: 0.5;
}
.rankings-hunt-season-current__label {
  position: relative;
  z-index: 1;
  margin-bottom: 3px;
  color: rgba(236, 220, 183, 0.72);
  font-family: "Cormorant SC", serif;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.95);
}
.rankings-hunt-season-current__value {
  position: relative;
  z-index: 1;
  display: block;
  color: #ffd88c;
  font-family: "Cormorant SC", serif;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.95),
    0 0 8px rgba(255, 185, 74, 0.22);
}
.rankings-hunt-season-page .rankings-table--hunt-season {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
.rankings-hunt-season-page .rankings-table--hunt-season .rankings-col--rank {
  width: 8%;
  text-align: center;
}
.rankings-hunt-season-page .rankings-table--hunt-season .rankings-col--name {
  width: 28%;
}
.rankings-hunt-season-page .rankings-table--hunt-season .rankings-col--guild {
  width: 22%;
}
.rankings-hunt-season-page .rankings-table--hunt-season .rankings-col--kills {
  width: 16%;
  text-align: center;
}
.rankings-hunt-season-page .rankings-table--hunt-season .rankings-col--score {
  width: 18%;
  text-align: center;
}
.rankings-hunt-season-page .rankings-table--hunt-season .rankings-col--status {
  width: 8%;
  text-align: center;
}
.rankings-hunt-season-page .rankings-table--hunt-season th.rankings-col--rank,
.rankings-hunt-season-page .rankings-table--hunt-season th.rankings-col--kills,
.rankings-hunt-season-page .rankings-table--hunt-season th.rankings-col--score,
.rankings-hunt-season-page .rankings-table--hunt-season th.rankings-col--status {
  text-align: center;
  white-space: nowrap;
}
.rankings-hunt-season-page .rankings-table--hunt-season td.rankings-col--kills,
.rankings-hunt-season-page .rankings-table--hunt-season td.rankings-col--score {
  color: #e7c99e;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.88);
}
.rankings-hunt-season-page .rankings-table--hunt-season tbody tr:hover td.rankings-col--kills,
.rankings-hunt-season-page .rankings-table--hunt-season tbody tr:hover td.rankings-col--score {
  color: #ffdca3;
  text-shadow: 0 0 7px rgba(255, 221, 160, 0.12),
    0 1px 1px rgba(0, 0, 0, 0.95);
}
@media (max-width: 1600px) and (min-width: 1121px) {
  .rankings-hunt-season-page .rankings-table--hunt-season .rankings-col--rank {
    width: 8%;
  }
  .rankings-hunt-season-page .rankings-table--hunt-season .rankings-col--name {
    width: 30%;
  }
  .rankings-hunt-season-page .rankings-table--hunt-season .rankings-col--guild {
    width: 20%;
  }
  .rankings-hunt-season-page .rankings-table--hunt-season .rankings-col--kills {
    width: 16%;
  }
  .rankings-hunt-season-page .rankings-table--hunt-season .rankings-col--score {
    width: 18%;
  }
  .rankings-hunt-season-page .rankings-table--hunt-season .rankings-col--status {
    width: 8%;
  }
  .rankings-hunt-season-current {
    margin-bottom: 14px;
  }
}
@media (max-width: 1120px) {
  .rankings-hunt-season-page .rankings-table-wrap {
    overflow-x: visible;
  }
  .rankings-hunt-season-page .rankings-table--hunt-season {
    min-width: 0;
  }
  .rankings-hunt-season-page .rankings-table--hunt-season .rankings-col--guild,
  .rankings-hunt-season-page .rankings-table--hunt-season th.rankings-col--guild,
  .rankings-hunt-season-page .rankings-table--hunt-season td.rankings-col--guild {
    display: none;
  }
  .rankings-hunt-season-page .rankings-table--hunt-season .rankings-col--rank {
    width: 11%;
  }
  .rankings-hunt-season-page .rankings-table--hunt-season .rankings-col--name {
    width: 39%;
  }
  .rankings-hunt-season-page .rankings-table--hunt-season .rankings-col--kills {
    width: 19%;
  }
  .rankings-hunt-season-page .rankings-table--hunt-season .rankings-col--score {
    width: 21%;
  }
  .rankings-hunt-season-page .rankings-table--hunt-season .rankings-col--status {
    width: 10%;
  }
  .rankings-hunt-season-current {
    min-width: 190px;
    padding: 7px 18px 8px;
  }
  .rankings-hunt-season-current__label {
    font-size: 9px;
  }
  .rankings-hunt-season-current__value {
    font-size: 16px;
  }
}
@media (max-width: 720px) {
  .rankings-hunt-season-page .rankings-table--hunt-season .rankings-col--score,
  .rankings-hunt-season-page .rankings-table--hunt-season th.rankings-col--score,
  .rankings-hunt-season-page .rankings-table--hunt-season td.rankings-col--score {
    display: none;
  }
  .rankings-hunt-season-page .rankings-table--hunt-season .rankings-col--rank {
    width: 15%;
  }
  .rankings-hunt-season-page .rankings-table--hunt-season .rankings-col--name {
    width: 52%;
  }
  .rankings-hunt-season-page .rankings-table--hunt-season .rankings-col--kills {
    width: 21%;
  }
  .rankings-hunt-season-page .rankings-table--hunt-season .rankings-col--status {
    width: 12%;
  }
  .rankings-hunt-season-page .rankings-player-cell {
    gap: 5px;
  }
  .rankings-hunt-season-page .rankings-player-link,
  .rankings-hunt-season-page .rankings-player-name {
    font-size: 11px;
  }
  .rankings-hunt-season-current {
    min-width: 170px;
    max-width: calc(100% - 20px);
    margin-bottom: 13px;
    padding: 7px 16px 8px;
  }
  .rankings-hunt-season-current__label {
    font-size: 8px;
    letter-spacing: 0.11em;
  }
  .rankings-hunt-season-current__value {
    font-size: 15px;
    letter-spacing: 0.045em;
  }
}
@media (max-width: 420px) {
  .rankings-hunt-season-page .rankings-table--hunt-season .rankings-col--rank {
    width: 15%;
  }
  .rankings-hunt-season-page .rankings-table--hunt-season .rankings-col--name {
    width: 53%;
  }
  .rankings-hunt-season-page .rankings-table--hunt-season .rankings-col--kills {
    width: 21%;
  }
  .rankings-hunt-season-page .rankings-table--hunt-season .rankings-col--status {
    width: 11%;
  }
  .rankings-hunt-season-current {
    min-width: 158px;
    padding: 6px 14px 7px;
  }
  .rankings-hunt-season-current__value {
    font-size: 14px;
  }
}
.mu-modal-backdrop,
.market-modal-backdrop,
.exchange-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 50000 !important;
  width: 100dvw;
  height: 100dvh;
  min-width: 100dvw;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  box-sizing: border-box;
  overflow: hidden;
  overscroll-behavior: contain;
  background: rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(1px);
  isolation: isolate;
}
.mu-modal-backdrop .mu-dialog,
.market-modal-backdrop .mu-dialog,
.exchange-modal-backdrop .mu-dialog {
  position: relative;
  z-index: 1;
  width: min(340px, 100%);
  max-width: 100%;
  max-height: calc(100dvh - 28px);
  min-height: 0;
  padding: 18px 20px 17px !important;
  box-sizing: border-box;
  border: 1px solid rgba(217, 172, 108, 0.52);
  border-radius: 0;
  color: #ecd7b9;
  background: radial-gradient(
      circle at 50% 0%,
      rgba(255, 220, 150, 0.08),
      transparent 48%
    ),
    linear-gradient(
      180deg,
      rgba(18, 13, 9, 0.98),
      rgba(5, 4, 3, 0.98)
    );
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.68),
    0 0 18px rgba(205, 154, 84, 0.08),
    inset 0 0 0 1px rgba(255, 224, 168, 0.035),
    inset 0 -18px 26px rgba(0, 0, 0, 0.38);
  isolation: isolate;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(190, 142, 76, 0.72) rgba(0, 0, 0, 0.28);
}
.mu-modal-backdrop .mu-dialog::-webkit-scrollbar,
.market-modal-backdrop .mu-dialog::-webkit-scrollbar,
.exchange-modal-backdrop .mu-dialog::-webkit-scrollbar {
  width: 5px;
}
.mu-modal-backdrop .mu-dialog::-webkit-scrollbar-track,
.market-modal-backdrop .mu-dialog::-webkit-scrollbar-track,
.exchange-modal-backdrop .mu-dialog::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.28);
}
.mu-modal-backdrop .mu-dialog::-webkit-scrollbar-thumb,
.market-modal-backdrop .mu-dialog::-webkit-scrollbar-thumb,
.exchange-modal-backdrop .mu-dialog::-webkit-scrollbar-thumb {
  background: rgba(190, 142, 76, 0.72);
}
.mu-modal-backdrop .mu-dialog::before,
.market-modal-backdrop .mu-dialog::before,
.exchange-modal-backdrop .mu-dialog::before {
  content: none;
  display: none;
}
.mu-modal-backdrop .mu-dialog::after,
.market-modal-backdrop .mu-dialog::after,
.exchange-modal-backdrop .mu-dialog::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 226, 166, 0.42),
      transparent
    );
}
.mu-modal-title,
.market-modal-title {
  position: relative;
  margin: 0 0 8px;
  color: #ffe8ba;
  font-family: "Cormorant SC", serif;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95),
    0 0 8px rgba(255, 221, 160, 0.1);
}
.mu-modal-title::after,
.market-modal-title::after {
  content: "";
  display: block;
  width: min(220px, 82%);
  height: 1px;
  margin: 9px auto 0;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 226, 166, 0.42),
      transparent
    );
  opacity: 0.9;
}
.mu-modal-text,
.market-modal-text {
  margin: 0;
  color: #d6c7ae;
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.28;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
}
.mu-modal-text--amounts,
.market-modal-text--amounts {
  margin-top: 9px;
  color: #c7b28c;
  font-size: 12px;
  line-height: 1.22;
}
.exchange-modal-item {
  min-height: 18px;
  margin: 11px auto 0;
  max-width: 100%;
  color: #f0d29a;
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.12;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 5px rgba(255, 220, 145, 0.08);
}
.mu-modal-backdrop .mu-dialog .mu-modal-text + div[style],
.mu-modal-backdrop .mu-dialog .market-modal-text + div[style],
.market-modal-backdrop .mu-dialog .mu-modal-text + div[style],
.market-modal-backdrop .mu-dialog .market-modal-text + div[style],
.exchange-modal-backdrop .mu-dialog .mu-modal-text + div[style],
.exchange-modal-backdrop .mu-dialog .market-modal-text + div[style] {
  text-align: center;
}
.mu-modal-price,
.market-modal-price {
  width: fit-content;
  max-width: 100%;
  min-width: 100px;
  margin: 11px auto 0;
  padding: 6px 13px 7px;
  box-sizing: border-box;
  color: #ffe8ba;
  font-family: "Cormorant SC", serif;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  border: 1px solid rgba(180, 136, 78, 0.52);
  border-radius: 0;
  background: linear-gradient(
      180deg,
      rgba(4, 4, 4, 0.82),
      rgba(0, 0, 0, 0.68)
    );
  box-shadow: inset 0 1px 0 rgba(255, 226, 166, 0.06),
    inset 0 -8px 14px rgba(0, 0, 0, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 5px rgba(255, 220, 145, 0.1);
}
.mu-modal-actions,
.market-modal-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center !important;
  gap: 9px;
  margin: 17px auto 0;
  text-align: center;
}
.mu-modal-actions .menu-btn,
.market-modal-actions .menu-btn {
  flex: 0 0 auto;
  width: 94px;
  min-width: 94px;
  height: 27px;
  min-height: 27px;
  margin: 0 !important;
}
.mu-modal-actions .menu-btn__label,
.market-modal-actions .menu-btn__label {
  font-size: 9px;
  line-height: 1;
}
.mu-modal-backdrop .mu-dialog form,
.market-modal-backdrop .mu-dialog form,
.exchange-modal-backdrop .mu-dialog form {
  margin-bottom: 15px;
}
.mu-modal-backdrop .mu-dialog .mu-alert,
.market-modal-backdrop .mu-dialog .mu-alert,
.exchange-modal-backdrop .mu-dialog .mu-alert {
  margin: 10px 0 0;
}
@media (max-width: 560px) {
  .mu-modal-backdrop,
  .market-modal-backdrop,
  .exchange-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 50000 !important;
    width: 100dvw;
    height: 100dvh;
    min-width: 100dvw;
    min-height: 100dvh;
    padding: max(10px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(1px);
  }
  .mu-modal-backdrop .mu-dialog,
  .market-modal-backdrop .mu-dialog,
  .exchange-modal-backdrop .mu-dialog {
    width: min(300px, 100%) !important;
    max-width: 100%;
    max-height: calc(100dvh - 20px);
    padding: 16px 15px 15px !important;
    box-sizing: border-box;
  }
  .mu-modal-title,
  .market-modal-title {
    font-size: 14px;
    margin-bottom: 8px;
  }
  .mu-modal-title::after,
  .market-modal-title::after {
    width: min(200px, 82%);
    margin-top: 8px;
  }
  .mu-modal-text,
  .market-modal-text {
    font-size: 12px;
    line-height: 1.24;
  }
  .mu-modal-text--amounts,
  .market-modal-text--amounts {
    font-size: 11px;
  }
  .mu-modal-price,
  .market-modal-price {
    min-width: 92px;
    padding: 6px 12px;
    font-size: 14px;
  }
  .exchange-modal-item {
    font-size: 11px;
  }
  .mu-modal-actions,
  .market-modal-actions {
    gap: 7px;
    margin-top: 15px;
  }
  .mu-modal-actions .menu-btn,
  .market-modal-actions .menu-btn {
    width: 88px;
    min-width: 88px;
    height: 26px;
    min-height: 26px;
  }
  .mu-modal-actions .menu-btn__label,
  .market-modal-actions .menu-btn__label {
    font-size: 8px;
  }
}
@media (max-width: 360px) {
  .mu-modal-backdrop,
  .market-modal-backdrop,
  .exchange-modal-backdrop {
    padding: max(6px, env(safe-area-inset-top))
      max(6px, env(safe-area-inset-right))
      max(6px, env(safe-area-inset-bottom))
      max(6px, env(safe-area-inset-left));
  }
  .mu-modal-backdrop .mu-dialog,
  .market-modal-backdrop .mu-dialog,
  .exchange-modal-backdrop .mu-dialog {
    width: min(292px, 100%) !important;
    max-width: 100%;
    padding: 15px 13px 14px !important;
  }
  .mu-modal-title,
  .market-modal-title {
    font-size: 13px;
  }
  .mu-modal-text,
  .market-modal-text {
    font-size: 11.5px;
  }
  .mu-modal-price,
  .market-modal-price {
    font-size: 13px;
  }
}
.mu-tooltip-root {
  position: fixed;
  left: var(--mu-tooltip-left);
  top: var(--mu-tooltip-top);
  z-index: 999999;
  display: flex;
  align-items: stretch;
  gap: 0;
  box-sizing: border-box;
  pointer-events: none;
  filter: drop-shadow(0 13px 22px rgba(0, 0, 0, 0.74))
    drop-shadow(0 2px 7px rgba(0, 0, 0, 0.84));
}
.mu-tooltip-root--stacked {
  flex-direction: column;
}
.mu-tooltip-root--desktop {
  max-width: calc(100vw - 16px);
}
.mu-tooltip-root--mobile {
  width: var(--mu-tooltip-panel-w);
  max-width: var(--mu-tooltip-panel-w);
  max-height: var(--mu-tooltip-root-max-h);
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.74))
    drop-shadow(0 2px 5px rgba(0, 0, 0, 0.84));
}
.mu-tooltip-root--mobile.mu-tooltip-root--double {
  width: min(var(--mu-tooltip-panel-w), calc(100dvw - 12px));
  max-width: calc(100dvw - 12px);
  max-height: calc(100dvh - 12px);
}
.mu-tooltip-root--mobile.mu-tooltip-root--double .mu-tooltip__panel {
  width: 100%;
  max-width: 100%;
}
.mu-tooltip-root--mobile::-webkit-scrollbar {
  width: 4px;
}
.mu-tooltip-root--mobile::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.28);
}
.mu-tooltip-root--mobile::-webkit-scrollbar-thumb {
  background: rgba(190, 142, 76, 0.72);
}
.mu-tooltip__panel {
  position: relative;
  width: var(--mu-tooltip-panel-w);
  max-width: calc(100vw - 16px);
  max-height: var(--mu-tooltip-root-max-h);
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid rgba(163, 124, 77, 0.86);
  border-radius: 7px;
  color: #cfd3dc;
  background: radial-gradient(
      circle at 50% 0%,
      rgba(103, 76, 44, 0.2) 0%,
      rgba(34, 27, 19, 0.14) 30%,
      transparent 60%
    ),
    linear-gradient(
      180deg,
      rgba(25, 22, 17, 0.98) 0%,
      rgba(13, 12, 10, 0.98) 50%,
      rgba(7, 7, 6, 0.98) 100%
    );
  box-shadow: inset 0 0 0 1px rgba(255, 226, 166, 0.055),
    inset 0 0 0 4px rgba(0, 0, 0, 0.38),
    inset 0 12px 24px rgba(255, 230, 180, 0.022),
    inset 0 -16px 30px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(0, 0, 0, 0.82);
  scrollbar-width: none;
}
.mu-tooltip__panel::-webkit-scrollbar {
  display: none;
}
.mu-tooltip__panel::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 1;
  border: 1px solid rgba(101, 74, 43, 0.62);
  border-radius: 4px;
  pointer-events: none;
  box-shadow: inset 0 0 11px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(255, 226, 166, 0.025);
}
.mu-tooltip__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
      135deg,
      rgba(239, 202, 132, 0.38) 0%,
      rgba(160, 111, 58, 0.2) 17%,
      transparent 37%
    )
    left top / 42px 42px no-repeat,

    linear-gradient(
      225deg,
      rgba(239, 202, 132, 0.38) 0%,
      rgba(160, 111, 58, 0.2) 17%,
      transparent 37%
    )
    right top / 42px 42px no-repeat,

    linear-gradient(
      45deg,
      rgba(239, 202, 132, 0.34) 0%,
      rgba(160, 111, 58, 0.18) 17%,
      transparent 37%
    )
    left bottom / 42px 42px no-repeat,

    linear-gradient(
      315deg,
      rgba(239, 202, 132, 0.34) 0%,
      rgba(160, 111, 58, 0.18) 17%,
      transparent 37%
    )
    right bottom / 42px 42px no-repeat;
}
.mu-tooltip__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  min-width: 0;
  padding: 13px 12px 14px;
  box-sizing: border-box;
}
.mu-tooltip-root--desktop.mu-tooltip-root--double:not(.mu-tooltip-root--stacked)
  .mu-tooltip__panel--primary {
  border-right: 0;
  border-radius: 7px 0 0 7px;
}
.mu-tooltip-root--desktop.mu-tooltip-root--double:not(.mu-tooltip-root--stacked)
  .mu-tooltip__panel--secondary {
  border-left: 0;
  border-radius: 0 7px 7px 0;
}
.mu-tooltip-root--stacked .mu-tooltip__panel--primary {
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
}
.mu-tooltip-root--stacked .mu-tooltip__panel--secondary {
  border-top: 0;
  border-radius: 0 0 7px 7px;
}
.mu-tooltip-root:not(.mu-tooltip-root--double) .mu-tooltip__panel--primary {
  border-radius: 7px;
}
.mu-tooltip__divider {
  width: 2px;
  min-width: 2px;
  background: linear-gradient(
      180deg,
      rgba(92, 70, 47, 0.72),
      rgba(190, 142, 76, 0.92),
      rgba(92, 70, 47, 0.72)
    );
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(255, 226, 166, 0.08);
}
.mu-tooltip-root--stacked .mu-tooltip__divider {
  width: 100%;
  height: 2px;
  min-height: 2px;
  background: linear-gradient(
      90deg,
      rgba(92, 70, 47, 0.72),
      rgba(190, 142, 76, 0.92),
      rgba(92, 70, 47, 0.72)
    );
}
.mu-tooltip__title {
  margin: 0 0 8px;
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.22;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.96),
    0 0 7px rgba(255, 226, 166, 0.1);
}
.mu-tooltip__title:not(.mu-tooltip__title--custom) {
  color: #cfd3dc;
}
.mu-tooltip-root--nowrap .mu-tooltip__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mu-tooltip-root--wrap .mu-tooltip__title {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.mu-tooltip__lines {
  width: 100%;
  min-width: 0;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.34;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.94);
}
.mu-tooltip-root--nowrap .mu-tooltip__lines {
  white-space: nowrap;
}
.mu-tooltip-root--wrap .mu-tooltip__lines {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.mu-tooltip__line {
  min-height: 16px;
  display: block;
  line-height: 1.34;
}
.mu-tooltip-root--nowrap .mu-tooltip__line {
  overflow: hidden;
  text-overflow: ellipsis;
}
.mu-tooltip-root--wrap .mu-tooltip__line {
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.mu-tooltip__line--blank {
  min-height: 6px;
  height: 6px;
  line-height: 6px;
}
.mu-tooltip__line--base {
  color: #f7f7f7;
}
.mu-tooltip__line--blue {
  color: #78a8f0;
}
.mu-tooltip__line--pink {
  color: #f618f6;
}
.mu-tooltip__line--violet {
  color: #a961f1;
}
.mu-tooltip__line--yellow {
  color: #fbc919;
}
.mu-tooltip__line--green_exc {
  color: #18f178;
}
.mu-tooltip__line--green_anc {
  color: #00fb00;
}
.mu-tooltip__line--gray {
  color: #7f8793;
}
.mu-tooltip__line--red {
  color: #fb3219;
}
.mu-tooltip__line--dark_violet {
  color: #770275;
}
.mu-tooltip__children {
  margin-top: 9px;
}
@media (max-width: 720px) {
  .mu-tooltip-root--mobile,
  .mu-tooltip-root--mobile.mu-tooltip-root--double,
  .mu-tooltip-root--mobile.mu-tooltip-root--stacked {
    flex-direction: column;
  }
  .mu-tooltip-root--mobile .mu-tooltip__panel {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    max-height: none;
    overflow: visible;
    border-left: 1px solid rgba(163, 124, 77, 0.86);
    border-right: 1px solid rgba(163, 124, 77, 0.86);
  }
  .mu-tooltip-root--mobile .mu-tooltip__panel--primary {
    border-bottom: 0;
    border-radius: 7px 7px 0 0;
  }
  .mu-tooltip-root--mobile .mu-tooltip__panel--secondary {
    border-top: 0;
    border-radius: 0 0 7px 7px;
  }
  .mu-tooltip-root--mobile:not(.mu-tooltip-root--double) .mu-tooltip__panel--primary {
    border-bottom: 1px solid rgba(163, 124, 77, 0.86);
    border-radius: 7px;
  }
  .mu-tooltip-root--mobile .mu-tooltip__divider {
    width: 100%;
    min-width: 0;
    height: 2px;
    min-height: 2px;
    background: linear-gradient(
        90deg,
        rgba(92, 70, 47, 0.72),
        rgba(190, 142, 76, 0.92),
        rgba(92, 70, 47, 0.72)
      );
  }
  .mu-tooltip-root--mobile .mu-tooltip__inner {
    padding: 10px 9px 11px;
  }
  .mu-tooltip-root--mobile.mu-tooltip-root--double .mu-tooltip__inner {
    padding: 8px 7px 9px;
  }
  .mu-tooltip-root--mobile .mu-tooltip__title {
    margin-bottom: 6px;
    font-size: 11.2px;
    line-height: 1.18;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .mu-tooltip-root--mobile .mu-tooltip__lines {
    font-size: 10px;
    line-height: 1.26;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .mu-tooltip-root--mobile .mu-tooltip__line {
    min-height: 12.6px;
    line-height: 1.26;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .mu-tooltip-root--mobile.mu-tooltip-root--double .mu-tooltip__title {
    margin-bottom: 5px;
    font-size: 10.4px;
    line-height: 1.14;
  }
  .mu-tooltip-root--mobile.mu-tooltip-root--double .mu-tooltip__lines {
    font-size: 9.2px;
    line-height: 1.16;
  }
  .mu-tooltip-root--mobile.mu-tooltip-root--double .mu-tooltip__line {
    min-height: 10.7px;
    line-height: 1.16;
  }
  .mu-tooltip-root--mobile .mu-tooltip__line--blank {
    min-height: 4px;
    height: 4px;
    line-height: 4px;
  }
}
@media (max-width: 420px) {
  .mu-tooltip-root--mobile .mu-tooltip__panel {
    border-radius: 6px;
  }
  .mu-tooltip-root--mobile.mu-tooltip-root--double .mu-tooltip__panel--primary {
    border-radius: 6px 6px 0 0;
  }
  .mu-tooltip-root--mobile.mu-tooltip-root--double .mu-tooltip__panel--secondary {
    border-radius: 0 0 6px 6px;
  }
  .mu-tooltip-root--mobile:not(.mu-tooltip-root--double) .mu-tooltip__panel--primary {
    border-radius: 6px;
  }
  .mu-tooltip-root--mobile .mu-tooltip__panel::before {
    inset: 4px;
    border-radius: 4px;
  }
  .mu-tooltip-root--mobile .mu-tooltip__inner {
    padding: 9px 8px 10px;
  }
  .mu-tooltip-root--mobile .mu-tooltip__title {
    font-size: 10.6px;
    line-height: 1.16;
  }
  .mu-tooltip-root--mobile .mu-tooltip__lines {
    font-size: 9.4px;
    line-height: 1.22;
  }
  .mu-tooltip-root--mobile .mu-tooltip__line {
    min-height: 11.5px;
    line-height: 1.22;
  }
  .mu-tooltip-root--mobile.mu-tooltip-root--double .mu-tooltip__inner {
    padding: 7px 6px 8px;
  }
  .mu-tooltip-root--mobile.mu-tooltip-root--double .mu-tooltip__title {
    font-size: 9.8px;
    line-height: 1.12;
  }
  .mu-tooltip-root--mobile.mu-tooltip-root--double .mu-tooltip__lines {
    font-size: 8.8px;
    line-height: 1.13;
  }
  .mu-tooltip-root--mobile.mu-tooltip-root--double .mu-tooltip__line {
    min-height: 10px;
    line-height: 1.13;
  }
  .mu-tooltip-root--mobile .mu-tooltip__line--blank {
    min-height: 4px;
    height: 4px;
    line-height: 4px;
  }
}
.rankings-player-cell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  min-height: 22px;
  padding-right: 0;
  vertical-align: middle;
  overflow: visible;
}
.rankings-player-cell.tooltip {
  position: relative;
}
.rankings-player-link,
.rankings-player-name {
  position: relative;
  z-index: 1;
  display: inline-block;
  vertical-align: middle;
}
.rankings-invis-icon-wrap {
  position: relative;
  top: auto;
  right: auto;
  z-index: 3;
  width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 17px;
  pointer-events: auto;
}
.rankings-invis-icon {
  width: 17px !important;
  height: 17px !important;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(130, 190, 255, 0.55))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85));
  opacity: 0.96;
}
.rankings-player-name--invisible {
  color: unset;
  text-shadow: none;
}
.rankings-player-cell.tooltip::after {
  left: 50%;
  top: calc(100% + 8px);
  transform: translate(-50%, 4px);
  min-width: 90px;
  width: max-content;
  max-width: 240px;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  text-align: center;
  padding: 9px 12px;
  line-height: 1.25;
}
.rankings-player-cell.tooltip:hover::after {
  transform: translate(-50%, 0);
}
@media (max-width: 720px) {
  .rankings-player-cell.tooltip::after {
    left: 0;
    right: auto;
    top: calc(100% + 8px);
    transform: translate(0, 4px);
    min-width: 90px;
    width: max-content;
    max-width: min(220px, calc(100vw - 20px));
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .rankings-player-cell.tooltip:hover::after {
    transform: translate(0, 0);
  }
}
.account-characters-panel.cp-character-page {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 0;
  margin-bottom: 26px;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.account-characters-panel.cp-character-page::before,
.account-characters-panel.cp-character-page::after {
  content: none;
}
.account-characters-panel.cp-character-page > * {
  position: relative;
  z-index: 1;
}
.cp-character-main-frame {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 34px 15px 10px;
  margin: 0 0 16px;
  border: 0;
  box-shadow: none;
  overflow: visible;
  --cp-frame-line-size: 3px;
  --cp-frame-line-top: 5px;
  --cp-frame-line-bottom: 5px;
  --cp-frame-line-left: 5px;
  --cp-frame-line-right: 5px;
  --cp-frame-line-dark: rgba(43, 30, 18, 0.92);
  --cp-frame-line-deep: rgba(68, 48, 29, 0.9);
  --cp-frame-line-brown: rgba(104, 76, 45, 0.88);
  --cp-frame-line-bronze: rgba(151, 113, 66, 0.84);
  --cp-frame-line-gold: rgba(190, 147, 86, 0.74);
  --cp-frame-line-light: rgba(229, 196, 131, 0.58);
}
.cp-character-main-frame::before {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
      ellipse at center,
      rgba(37, 31, 21, 0.24) 0%,
      rgba(20, 16, 10, 0.12) 52%,
      rgba(0, 0, 0, 0) 78%
    );
}
.cp-character-main-frame::after {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 1;
  pointer-events: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(229, 196, 131, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    inset 0 0 18px rgba(151, 113, 66, 0.035);
}
.cp-character-main-frame > *:not(.cp-character-main-corner):not(.cp-character-main-line) {
  position: relative;
  z-index: 2;
}
.cp-character-main-corner {
  display: none !important;
}
.cp-character-main-line {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}
.cp-character-main-line--top,
.cp-character-main-line--bottom {
  left: var(--cp-frame-line-left);
  right: var(--cp-frame-line-right);
  height: var(--cp-frame-line-size);
  background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(43, 30, 18, 0.08) 2%,
      var(--cp-frame-line-dark) 5%,
      var(--cp-frame-line-deep) 9%,
      var(--cp-frame-line-brown) 15%,
      var(--cp-frame-line-bronze) 28%,
      var(--cp-frame-line-gold) 42%,
      var(--cp-frame-line-light) 50%,
      var(--cp-frame-line-gold) 58%,
      var(--cp-frame-line-bronze) 72%,
      var(--cp-frame-line-brown) 85%,
      var(--cp-frame-line-deep) 91%,
      var(--cp-frame-line-dark) 95%,
      rgba(43, 30, 18, 0.08) 98%,
      transparent 100%
    );
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.78),
    0 -1px 0 rgba(229, 196, 131, 0.08),
    0 0 5px rgba(151, 113, 66, 0.08);
}
.cp-character-main-line--top {
  top: var(--cp-frame-line-top);
}
.cp-character-main-line--bottom {
  bottom: var(--cp-frame-line-bottom);
}
.cp-character-main-line--left,
.cp-character-main-line--right {
  top: var(--cp-frame-line-top);
  bottom: var(--cp-frame-line-bottom);
  width: var(--cp-frame-line-size);
  background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(43, 30, 18, 0.08) 2%,
      var(--cp-frame-line-dark) 5%,
      var(--cp-frame-line-deep) 9%,
      var(--cp-frame-line-brown) 15%,
      var(--cp-frame-line-bronze) 28%,
      var(--cp-frame-line-gold) 42%,
      var(--cp-frame-line-light) 50%,
      var(--cp-frame-line-gold) 58%,
      var(--cp-frame-line-bronze) 72%,
      var(--cp-frame-line-brown) 85%,
      var(--cp-frame-line-deep) 91%,
      var(--cp-frame-line-dark) 95%,
      rgba(43, 30, 18, 0.08) 98%,
      transparent 100%
    );
  border-radius: 999px;
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.78),
    -1px 0 0 rgba(229, 196, 131, 0.08),
    0 0 5px rgba(151, 113, 66, 0.08);
}
.cp-character-main-line--left {
  left: var(--cp-frame-line-left);
}
.cp-character-main-line--right {
  right: var(--cp-frame-line-right);
}
.cp-character-profile-title {
  position: relative;
  z-index: 2;
  text-align: center;
  margin: 0 0 24px;
  color: #d8bd89;
  font-family: "Cormorant SC", Georgia, serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 0 #20140b,
    0 0 18px rgba(207, 161, 91, 0.25);
}
.cp-character-profile-title::before,
.cp-character-profile-title::after {
  content: "";
  display: inline-block;
  width: 230px;
  height: 1px;
  margin: 0 22px 13px;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(193, 152, 102, 0.52),
      transparent
    );
  box-shadow: 0 0 10px rgba(193, 152, 102, 0.1);
}
@media (max-width: 1560px) {
  .cp-character-profile-title {
    margin-bottom: 18px;
    font-size: 16px;
    letter-spacing: 0.035em;
  }
  .cp-character-profile-title::before,
  .cp-character-profile-title::after {
    width: 150px;
    margin-left: 16px;
    margin-right: 16px;
    margin-bottom: 11px;
  }
}
@media (max-width: 1280px) {
  .cp-character-profile-title {
    margin-bottom: 16px;
    font-size: 15px;
  }
  .cp-character-profile-title::before,
  .cp-character-profile-title::after {
    width: 115px;
    margin-left: 13px;
    margin-right: 13px;
    margin-bottom: 10px;
  }
}
.character-profile-page,
.character-profile-page--dashboard,
.character-profile-shell,
.account-page-grid,
.account-characters-panel,
.cp-character-page,
.cp-character-main-frame,
.cp-character-layout,
.cp-bottom-actions {
  box-sizing: border-box;
  overflow: visible;
}
.character-profile-page--dashboard {
  width: 100%;
  min-width: 0;
  padding: 18px 0 22px;
  overflow-x: hidden;
}
.character-profile-shell {
  width: 100%;
  min-width: 0;
  margin: 0 auto;
}
.cp-character-layout {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 270px minmax(400px, 1fr) 270px;
  gap: 14px;
  align-items: start;
  justify-content: stretch;
  overflow: visible;
}
.cp-character-layout > * {
  position: relative;
  z-index: 1;
}
.cp-character-panel {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  width: 100%;
  max-width: 270px;
  min-width: 0;
  min-height: 523px;
  max-height: 523px;
  justify-self: center;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url("/ui/char_img_bg.png") center bottom / contain no-repeat;
  overflow: visible;
}
.cp-equipment-panel {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 400px;
  justify-self: stretch;
  align-self: start;
  display: flex;
  justify-content: center;
  overflow: visible;
}
.cp-stats-panel {
  grid-column: 3;
  grid-row: 1;
  width: 100%;
  max-width: 270px;
  min-width: 0;
  justify-self: stretch;
  align-self: start;
}
.cp-character-card {
  width: 100%;
  max-width: 270px;
  flex: 0 0 523px;
  height: 523px;
  max-height: 523px;
  justify-self: center;
}
.cp-character-frame {
  width: 100%;
  height: 100%;
  max-height: 523px;
}
.cp-character-portrait {
  width: 100%;
  height: 100%;
  max-height: 523px;
}
.cp-character-portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
.cp-character-portrait::after,
.cp-frame-image,
.cp-character-info,
.cp-character-reset-below {
  display: none;
  content: none;
}
.cp-equipment-body {
  position: relative;
  width: 100%;
  max-width: 470px;
  aspect-ratio: 420 / 410;
  min-height: 0;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
}
.cp-equipment-body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.75;
}
.cp-equipment-body > * {
  position: relative;
  z-index: 2;
}
.cp-equipment-body > div:first-child {
  flex: 0 0 389px;
  width: 389px !important;
  height: 357px !important;
  transform: scale(1.09);
  transform-origin: center center;
}
.cp-stat-panel-new {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 665px;
  padding: 20px 18px 15px;
  background: url("/ui/stats_bg.png") center / 100% 100% no-repeat;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.cp-stat-panel-new::before,
.cp-stat-panel-new::after {
  display: none;
  content: none;
}
.cp-stat-panel-tabs {
  position: relative;
  z-index: 30;
  width: 140px;
  height: 25px;
  margin: 15px auto 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  background: rgba(2, 9, 12, 0.24);
  border: 1px solid rgba(202, 166, 105, 0.24);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.42);
}
.cp-stat-tab {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: linear-gradient(
    180deg,
    rgb(101 69 45 / 55%),
    rgb(30 23 12 / 28%)
  );
  box-shadow: inset 0 0 14px rgb(0 0 0 / 28%);
}
.cp-stat-tab + .cp-stat-tab {
  border-left: 1px solid rgba(202, 166, 105, 0.16);
}
.cp-stat-tab.is-active {
  background: linear-gradient(rgba(96, 59, 24, 0.52), rgba(22, 12, 6, 0.48)),
    url("/ui/char_actions_bg.png") center center / 100% 100% no-repeat;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 238, 190, 0.22),
    inset 0 -1px 10px rgba(255, 182, 74, 0.2),
    0 0 14px rgba(255, 191, 91, 0.24);
  text-shadow: 0 0 7px rgba(255, 220, 150, 0.45);
  outline: 1px solid rgba(255, 225, 160, 0.18);
  outline-offset: -3px;
}
.cp-stat-tab img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.65));
}
.cp-stat-tab-content {
  position: relative;
  z-index: 20;
  width: 100%;
  min-width: 0;
  overflow: visible;
}
.cp-stat-tab-visible {
  position: absolute;
  inset: 0;
  z-index: 20;
  width: 100%;
  min-width: 0;
  overflow: visible;
}
.cp-stat-tab-measure {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  display: grid;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}
.cp-stat-tab-measure > div {
  grid-area: 1 / 1;
  min-width: 0;
}
.cp-class-medal {
  display: grid;
  justify-items: center;
  margin-bottom: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(193, 152, 102, 0.18);
}
.cp-class-medal-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: 4px;
}
.cp-class-medal-icon img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 12px rgba(207, 168, 101, 0.22));
}
.cp-class-medal-name {
  color: #f0dbb3;
  font-family: "Cormorant SC", Georgia, serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 0 #170e07,
    0 0 8px rgba(0, 0, 0, 0.65);
}
.cp-class-medal-sub {
  margin-top: 4px;
  color: rgba(191, 167, 122, 0.68);
  font-family: "Cormorant SC", Georgia, serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85),
    0 0 7px rgba(217, 172, 108, 0.08);
}
.cp-rank-info {
  display: grid;
  gap: 5px;
  margin: 0 0 6px;
  padding: 0 5px;
  overflow: visible;
}
.cp-rank-line {
  position: relative;
  min-height: 30px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: rgba(2, 9, 12, 0.24);
  border: 1px solid rgba(202, 166, 105, 0.24);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.42);
}
.cp-rank-line img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: 0.86;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7));
}
.cp-rank-label {
  min-width: 0;
  color: #d8bd89;
  font-family: "Cormorant SC", Georgia, serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.055em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 #050302;
}
.cp-rank-value {
  min-width: 36px;
  max-width: 92px;
  color: #fff0c9;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 #000,
    0 0 8px rgba(214, 168, 91, 0.22);
}
.cp-rank-line.cp-battle-history-head {
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 4px;
  padding-left: 7px;
  padding-right: 7px;
}
.cp-rank-line.cp-battle-history-head > .cp-rank-label {
  font-size: 8px !important;
  letter-spacing: 0.025em;
  line-height: 1;
}
.cp-rank-line.cp-battle-history-head > img {
  width: 20px;
  height: 20px;
}
.cp-battle-history-list {
  display: grid;
  gap: 5px;
  overflow: visible;
}
.cp-battle-history-row {
  position: relative;
  z-index: 1;
  min-height: 30px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 20px minmax(70px, auto);
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: rgba(2, 9, 12, 0.24);
  border: 1px solid rgba(202, 166, 105, 0.24);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.42);
  overflow: visible;
}
.cp-battle-history-row:hover,
.cp-battle-history-row:focus-within {
  z-index: 500;
}
.cp-battle-history-row--empty {
  opacity: 0.72;
}
.cp-battle-history-index {
  position: relative;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
}
.cp-battle-history-index img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: 0.94;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.78))
    drop-shadow(0 0 5px rgba(214, 168, 91, 0.12));
}
.cp-battle-history-index span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #cc5555;
  font-family: "Inter", Arial, sans-serif;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 1),
    0 0 5px rgba(255, 220, 150, 0.28);
  pointer-events: none;
}
.cp-battle-history-name {
  min-width: 0;
  color: #cc5555;
  font-family: "Cormorant SC", Georgia, serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 #050302;
}
.cp-battle-history-row--kill .cp-battle-history-index span,
.cp-battle-history-row--kill .cp-battle-history-name {
  color: #60a763;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 1),
    0 0 5px rgba(120, 255, 150, 0.22);
}
.cp-battle-history-map {
  position: relative;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  cursor: help;
  z-index: 1000;
  overflow: visible;
}
.cp-battle-history-map img {
  display: block;
  width: 17px;
  height: 17px;
  object-fit: contain;
  opacity: 0.9;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 5px rgba(87, 160, 182, 0.12));
}
.cp-battle-history-map:hover img,
.cp-battle-history-map:focus-visible img {
  opacity: 1;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 7px rgba(120, 185, 255, 0.24));
}
.cp-battle-history-map.is-empty {
  opacity: 0.35;
}
.cp-battle-history-date {
  min-width: 70px;
  padding: 3px 6px;
  color: #fff0c9;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(
      180deg,
      rgba(65, 50, 33, 0.42),
      rgba(28, 26, 23, 0.34)
    );
  border: 1px solid rgba(189, 145, 82, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 238, 190, 0.06),
    inset 0 0 8px rgba(0, 0, 0, 0.34);
  text-shadow: 0 1px 0 #000,
    0 0 6px rgba(214, 168, 91, 0.16);
}
.cp-rank-line--location {
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 6px;
  padding: 4px 7px;
  background: linear-gradient(
      90deg,
      rgba(7, 31, 39, 0.54),
      rgba(4, 8, 10, 0.18)
    );
  border-color: rgba(189, 145, 82, 0.2);
  margin: 11px;
}
.cp-rank-line--location img {
  width: 17px;
  height: 17px;
  opacity: 0.9;
}
.cp-rank-line--location .cp-rank-label {
  min-width: 0;
  color: #e2c994;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-rank-line--location .cp-rank-value {
  min-width: 48px;
  max-width: none;
  padding-left: 7px;
  color: #fff0c9;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
  border-left: 1px solid rgba(189, 145, 82, 0.18);
}
.cp-rank-progress-row {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 6px;
  padding-left: 4px;
  padding-right: 6px;
}
.cp-rank-progress {
  --progress: 0;
  position: relative;
  width: 125px;
  height: 12px;
  margin-left: 10px;
  background: url("/ui/progress_bar.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}
.cp-rank-progress-fill {
  position: absolute;
  left: 5px;
  top: 4px;
  height: 4px;
  width: calc((100% - 10px) * var(--progress));
  background-image: url("/ui/progress_line.png");
  background-repeat: repeat-x;
  background-position: left center;
  background-size: auto 100%;
}
.cp-progress-marker {
  position: absolute;
  left: calc(5px + ((100% - 10px) * var(--progress)));
  top: 50%;
  z-index: 3;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: radial-gradient(
      circle at 35% 28%,
      #fff2bd 0 12%,
      #d8a75f 30%,
      #6f4c2d 72%,
      #24170d 100%
    );
  border: 1px solid rgba(255, 235, 176, 0.95);
  box-shadow: 0 0 0 1px rgba(37, 22, 10, 0.9),
    0 0 8px rgba(222, 178, 100, 0.5);
}
.cp-rank-progress-max {
  min-width: 42px;
  color: rgba(239, 210, 160, 0.9);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-align: right;
}
.cp-stat-divider {
  height: 14px;
  margin: 4px 0 7px;
  background: url("/ui/divider_horinozntal_brown.png") center / contain no-repeat;
  opacity: 0.85;
}
.cp-stat-list-new {
  display: grid;
  gap: 4px;
  padding: 0 5px;
  margin-bottom: 0;
}
.cp-stat-row-new {
  position: relative;
  min-height: 30px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: rgba(2, 9, 12, 0.24);
  border: 1px solid rgba(202, 166, 105, 0.24);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.42);
}
.cp-stat-row-new img {
  width: 21px;
  height: 21px;
  object-fit: contain;
  opacity: 0.84;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.75));
}
.cp-stat-row-name {
  min-width: 0;
  padding-left: 8px;
  color: #d8bd89;
  font-family: "Cormorant SC", Georgia, serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.055em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 #050302;
}
.cp-stat-row-value {
  min-width: 36px;
  max-width: 96px;
  color: rgba(239, 210, 160, 0.9);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 #000,
    0 0 7px rgba(87, 160, 182, 0.3);
}
.cp-stat-placeholder {
  margin-top: 14px;
  padding: 12px 10px;
  color: #d8bd89;
  font-family: "Cormorant SC", Georgia, serif;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  background: linear-gradient(
      90deg,
      rgba(7, 31, 39, 0.42),
      rgba(4, 8, 10, 0.18)
    );
  border: 1px solid rgba(193, 152, 102, 0.12);
}
.cp-stats-reset-action {
  width: 100%;
  height: 20px;
  margin: 18px 0 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.cp-stats-reset-action .menu-btn,
.cp-stats-reset-action .menu-btn--blue {
  margin: 0 auto;
  transform: scale(0.8);
  transform-origin: center center;
}
.cp-stat-panel-new .tooltip {
  position: relative;
  z-index: 2000;
}
.cp-stat-panel-new .tooltip::after {
  z-index: 999999 !important;
}
.cp-stat-panel-new .tooltip:hover::after,
.cp-stat-panel-new .tooltip:focus-visible::after,
.cp-stat-panel-new .tooltip:focus-within::after {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.12s ease,
    transform 0.12s ease,
    visibility 0s linear 0s;
}
@media (max-width: 1280px) {
  .cp-stat-panel-new {
    min-height: 785px;
    padding: 20px 16px 25px;
  }
  .cp-stat-panel-tabs {
    margin-top: 30px;
  }
}
@media (max-width: 1024px) {
  .cp-stat-panel-new {
    max-width: 360px;
    justify-self: center;
    min-height: 755px;
    padding: 24px 18px 70px;
  }
  .cp-stat-tab-content {
    max-width: 100%;
  }
}
@media (max-width: 768px) {
  .cp-stat-panel-new {
    width: min(calc(100vw - 28px), 360px);
    max-width: 360px;
    height: auto;
    min-height: 785px;
    aspect-ratio: 1814 / 4300;
    margin-inline: auto;
    padding: 0 16px 78px;
    background-size: 100% 100%;
    background-position: center center;
  }
  .cp-stat-panel-tabs {
    width: 136px;
    height: 27px;
    margin: 20px auto 16px;
  }
  .cp-stat-tab img {
    width: 17px;
    height: 17px;
  }
  .cp-class-medal {
    margin-bottom: 16px;
    padding-bottom: 14px;
  }
  .cp-class-medal-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 7px;
  }
  .cp-class-medal-icon img {
    width: 34px;
    height: 34px;
  }
  .cp-class-medal-name {
    font-size: 13px;
  }
  .cp-class-medal-sub {
    margin-top: 6px;
    font-size: 10px;
  }
  .cp-rank-info {
    gap: 8px;
    margin: 0 0 6px;
    padding: 0 5px;
  }
  .cp-rank-line,
  .cp-stat-row-new {
    min-height: 34px;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    gap: 5px;
    padding: 6px 8px;
  }
  .cp-rank-line img,
  .cp-stat-row-new img {
    width: 19px;
    height: 19px;
  }
  .cp-rank-label,
  .cp-stat-row-name {
    font-size: 9.5px;
  }
  .cp-rank-line.cp-battle-history-head > .cp-rank-label {
    font-size: 8px !important;
  }
  .cp-rank-value,
  .cp-stat-row-value {
    font-size: 12px;
    max-width: 84px;
  }
  .cp-battle-history-list {
    gap: 8px;
  }
  .cp-battle-history-row {
    min-height: 34px;
    grid-template-columns: 22px minmax(0, 1fr) 20px minmax(68px, auto);
    padding: 6px 8px;
  }
  .cp-battle-history-name {
    font-size: 10px;
  }
  .cp-battle-history-date {
    min-width: 68px;
    font-size: 8.8px;
  }
  .cp-rank-progress-row {
    padding-left: 4px;
    padding-right: 6px;
  }
  .cp-rank-progress {
    width: 118px;
    margin-left: 6px;
  }
  .cp-rank-progress-max {
    font-size: 11.5px;
  }
  .cp-stat-divider {
    height: 18px;
    margin: 10px 0 13px;
  }
  .cp-stat-list-new {
    gap: 8px;
    padding: 0 5px;
  }
  .cp-stats-reset-action {
    width: 100%;
    height: 56px;
    margin: 26px 0 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }
  .cp-stats-reset-action .menu-btn,
  .cp-stats-reset-action .menu-btn--blue {
    margin: 0 auto;
    transform: scale(1.55);
    transform-origin: center center;
  }
}
@media (max-width: 640px) {
  .cp-stat-panel-new {
    width: min(calc(100vw - 24px), 352px);
    max-width: 352px;
    min-height: 745px;
    aspect-ratio: 1814 / 4380;
    padding: 0 15px 20px;
  }
}
@media (max-width: 480px) {
  .cp-stat-panel-new {
    width: min(calc(100vw - 22px), 350px);
    max-width: 350px;
    min-height: 805px;
    padding: 0 14px 20px;
  }
  .cp-stat-panel-tabs {
    width: 130px;
    height: 26px;
    margin: 20px auto 15px;
  }
  .cp-class-medal {
    margin-bottom: 15px;
    padding-bottom: 13px;
  }
  .cp-rank-info {
    gap: 7px;
    margin-bottom: 11px;
    padding: 0 5px;
  }
  .cp-rank-line,
  .cp-stat-row-new {
    min-height: 33px;
    padding: 6px 7px;
  }
  .cp-rank-progress-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    padding-left: 2px;
    padding-right: 4px;
  }
  .cp-rank-progress {
    width: 100%;
    max-width: 125px;
    min-width: 92px;
    margin-left: 0;
  }
  .cp-stat-row-name {
    padding-left: 5px;
  }
  .cp-rank-value,
  .cp-stat-row-value {
    max-width: 74px;
  }
  .cp-battle-history-row {
    grid-template-columns: 22px minmax(0, 1fr) 20px minmax(66px, auto);
    gap: 5px;
    padding: 6px 7px;
  }
  .cp-battle-history-date {
    min-width: 66px;
    padding: 3px 5px;
    font-size: 8.4px;
  }
  .cp-stat-divider {
    height: 17px;
    margin: 9px 0 12px;
  }
  .cp-stat-list-new {
    gap: 7px;
    padding: 0 5px;
  }
  .cp-stats-reset-action {
    height: 54px;
    margin: 24px 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }
  .cp-stats-reset-action .menu-btn,
  .cp-stats-reset-action .menu-btn--blue {
    transform: scale(1.45);
    transform-origin: center center;
  }
}
@media (max-width: 380px) {
  .cp-stat-panel-new {
    width: min(calc(100vw - 18px), 334px);
    max-width: 334px;
    min-height: 805px;
    padding: 0 12px 20px;
  }
  .cp-stat-panel-tabs {
    width: 124px;
    height: 25px;
    margin: 10px auto 15px;
  }
  .cp-class-medal {
    margin-bottom: 13px;
    padding-bottom: 12px;
  }
  .cp-rank-info {
    gap: 6px;
    margin-bottom: 10px;
    padding: 0 5px;
  }
  .cp-rank-line,
  .cp-stat-row-new {
    min-height: 31px;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    gap: 4px;
    padding: 5px 6px;
  }
  .cp-rank-line img,
  .cp-stat-row-new img {
    width: 18px;
    height: 18px;
  }
  .cp-rank-label,
  .cp-stat-row-name {
    font-size: 11px;
  }
  .cp-rank-line.cp-battle-history-head > .cp-rank-label {
    font-size: 7.5px !important;
  }
  .cp-rank-value,
  .cp-stat-row-value {
    font-size: 11.5px;
    max-width: 66px;
  }
  .cp-battle-history-row {
    grid-template-columns: 20px minmax(0, 1fr) 18px minmax(62px, auto);
    gap: 4px;
    padding: 5px 6px;
  }
  .cp-battle-history-index,
  .cp-battle-history-index img {
    width: 20px;
    height: 20px;
  }
  .cp-battle-history-index span {
    font-size: 8.5px;
  }
  .cp-battle-history-map {
    width: 18px;
    height: 18px;
  }
  .cp-battle-history-map img {
    width: 16px;
    height: 16px;
  }
  .cp-battle-history-date {
    min-width: 62px;
    padding: 3px 4px;
    font-size: 8.2px;
  }
  .cp-stat-divider {
    height: 16px;
    margin: 8px 0 10px;
  }
  .cp-stat-list-new {
    gap: 6px;
    padding: 0 5px;
  }
  .cp-stats-reset-action {
    height: 50px;
    margin: 22px 0 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }
  .cp-stats-reset-action .menu-btn,
  .cp-stats-reset-action .menu-btn--blue {
    transform: scale(1.35);
    transform-origin: center center;
  }
}
.cp-bottom-actions {
  --cp-bottom-btn-w: 260px;
  --cp-bottom-btn-h: 52px;
  --cp-bottom-gap: 14px;
  --cp-bottom-icon-size: 35px;
  --cp-bottom-label-size: 13px;
  --cp-bottom-label-pad-x: 22px;
  width: 100%;
  max-width: 820px;
  margin: 14px auto 22px;
  padding: 0;
  overflow: visible;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--cp-bottom-gap);
}
.cp-bottom-action {
  display: block;
}
.cp-bottom-action.menu-btn-long {
  width: var(--cp-bottom-btn-w) !important;
  max-width: 100% !important;
  height: var(--cp-bottom-btn-h) !important;
  min-width: 0;
  margin: 0 !important;
  transform: none !important;
  flex: 0 0 auto;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.cp-bottom-action .menu-btn-long__label {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0 var(--cp-bottom-label-pad-x);
  font-size: var(--cp-bottom-label-size);
  line-height: 1.05;
  text-align: center;
}
.cp-bottom-action-inner {
  width: auto;
  max-width: 100%;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 10px;
  position: relative;
  z-index: 4;
  padding: 0;
  overflow: hidden;
}
.cp-bottom-action-text {
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Cormorant SC", serif;
  font-size: var(--cp-bottom-label-size);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.2px;
  color: #f3dfb6;
  text-align: left;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.85),
    0 0 6px rgba(0, 0, 0, 0.35);
}
.cp-bottom-action-icon {
  width: var(--cp-bottom-icon-size);
  height: var(--cp-bottom-icon-size);
  flex: 0 0 var(--cp-bottom-icon-size);
  object-fit: contain;
  transform: translateY(-1px);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.75))
    drop-shadow(0 0 8px rgba(111, 179, 210, 0.2));
}
.cp-bottom-action-inner > :not(.cp-bottom-action-icon) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cp-bottom-action .menu-btn-long__label > :not(.cp-bottom-action-inner) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .cp-bottom-actions {
    --cp-bottom-gap: 8px;
    gap: var(--cp-bottom-gap);
  }
}
@media (max-width: 620px) {
  .cp-bottom-actions {
    --cp-bottom-btn-w: min(260px, 100%);
    --cp-bottom-btn-h: 50px;
    --cp-bottom-icon-size: 27px;
    --cp-bottom-label-size: 13px;
    --cp-bottom-label-pad-x: 18px;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    width: 100%;
    max-width: 100%;
    gap: 8px;
  }
  .cp-bottom-action {
    width: 100%;
    max-width: var(--cp-bottom-btn-w);
    margin: 0;
  }
  .cp-bottom-action.menu-btn-long {
    width: var(--cp-bottom-btn-w) !important;
    height: var(--cp-bottom-btn-h) !important;
  }
  .cp-bottom-action-inner {
    gap: 8px;
  }
  .cp-bottom-action-icon {
    width: var(--cp-bottom-icon-size);
    height: var(--cp-bottom-icon-size);
    flex: 0 0 var(--cp-bottom-icon-size);
  }
  .cp-bottom-action-text {
    font-size: var(--cp-bottom-label-size);
  }
}
@media (max-width: 1560px) and (min-width: 981px) {
  .cp-character-layout {
    grid-template-columns: 270px 270px;
    grid-template-areas: "stats character"
      "equipment equipment";
    justify-content: center;
    align-items: start;
    gap: 18px 22px;
  }
  .cp-stats-panel {
    grid-area: stats;
    width: 100%;
    max-width: 270px;
    min-width: 0;
    justify-self: stretch;
  }
  .cp-character-panel {
    grid-area: character;
    width: 100%;
    max-width: 270px;
    min-width: 0;
    justify-self: center;
  }
  .cp-equipment-panel {
    grid-area: equipment;
    width: 100%;
    max-width: 620px;
    min-width: 0;
    justify-self: center;
    display: flex;
    justify-content: center;
    overflow: visible;
  }
  .cp-equipment-body {
    position: relative;
    width: 100%;
    max-width: 620px;
    min-width: 0;
    min-height: 400px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: transparent;
  }
  .cp-equipment-body > div:first-child {
    flex: 0 0 389px;
    width: 389px !important;
    height: 357px !important;
    transform: scale(1);
    transform-origin: center center;
  }
  .cp-bottom-actions {
    --cp-bottom-btn-w: 220px;
    --cp-bottom-btn-h: 44px;
    --cp-bottom-gap: 12px;
    --cp-bottom-icon-size: 26px;
    --cp-bottom-label-size: 12px;
    --cp-bottom-label-pad-x: 14px;
    max-width: 452px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, var(--cp-bottom-btn-w)));
    justify-content: center;
    justify-items: center;
  }
  .cp-bottom-actions > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
  }
  .cp-bottom-action-inner {
    gap: 6px;
  }
}
@media (max-width: 980px) {
  .cp-character-profile-title::before,
  .cp-character-profile-title::after {
    width: 120px;
    margin-inline: 16px;
  }
  .cp-character-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stats"
      "character"
      "equipment";
    gap: 18px;
    justify-items: center;
  }
  .cp-stats-panel {
    grid-area: stats;
    width: min(100%, 340px);
    max-width: 340px;
    min-width: 0;
    justify-self: center;
  }
  .cp-character-panel {
    grid-area: character;
    width: min(100%, 340px);
    max-width: 340px;
    min-width: 0;
    min-height: 523px;
    max-height: 523px;
    justify-self: center;
  }
  .cp-character-card {
    width: min(280px, 100%);
    max-width: 280px;
  }
  .cp-equipment-panel {
    grid-area: equipment;
    width: 100%;
    max-width: 470px;
    min-width: 0;
    display: flex;
    justify-content: center;
    justify-self: center;
    overflow: visible;
  }
  .cp-equipment-body {
    position: relative;
    width: 100%;
    max-width: 470px;
    min-width: 0;
    aspect-ratio: 470 / 430;
    min-height: 0;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: transparent;
  }
  .cp-equipment-body > div:first-child {
    flex: 0 0 389px;
    width: 389px !important;
    height: 357px !important;
    transform: scale(1);
    transform-origin: center center;
  }
  .cp-stat-panel-new {
    width: min(100%, 340px);
    max-width: 340px;
    padding: 28px 24px 35px;
  }
  .cp-stat-panel-tabs {
    width: 200px;
    height: 30px;
  }
  .cp-rank-progress {
    width: 125px;
  }
  .cp-bottom-actions {
    --cp-bottom-btn-w: 220px;
    --cp-bottom-btn-h: 44px;
    --cp-bottom-gap: 10px;
    --cp-bottom-icon-size: 26px;
    --cp-bottom-label-size: 12px;
    --cp-bottom-label-pad-x: 14px;
    max-width: 452px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, var(--cp-bottom-btn-w)));
    justify-content: center;
    justify-items: center;
  }
  .cp-bottom-actions > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
  }
  .cp-bottom-action-inner {
    gap: 7px;
  }
}
@media (max-width: 640px) {
  .cp-character-main-frame {
    padding: 24px 10px 10px;
  }
  .cp-character-profile-title {
    font-size: 16px;
    margin-bottom: 18px;
  }
  .cp-character-profile-title::before,
  .cp-character-profile-title::after {
    width: 54px;
    margin: 0 10px 11px;
  }
  .cp-character-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "character"
      "stats"
      "equipment";
    gap: 16px;
    justify-items: center;
  }
  .cp-character-panel {
    grid-area: character;
    width: 100%;
    max-width: 270px;
    min-width: 0;
    min-height: 370px;
    max-height: 370px;
    margin-left: auto;
    margin-right: auto;
    justify-self: center;
  }
  .cp-character-card {
    width: 100%;
    max-width: 270px;
    height: 370px;
    max-height: 370px;
  }
  .cp-character-frame,
  .cp-character-portrait {
    max-height: 370px;
  }
  .cp-stats-panel {
    grid-area: stats;
    width: 100%;
    max-width: 340px;
    min-width: 0;
    justify-self: center;
  }
  .cp-stat-panel-new {
    padding: 31px 18px 35px;
  }
  .cp-stat-panel-tabs {
    width: 100%;
    max-width: 220px;
    height: 30px;
  }
  .cp-rank-progress-row {
    padding-left: 12px;
    padding-right: 6px;
  }
  .cp-rank-progress {
    width: 125px;
  }
  .cp-stat-list-new {
    grid-template-columns: 1fr;
  }
  .cp-stat-row-new:nth-child(5) {
    grid-column: auto;
  }
  .cp-stat-row-name {
    font-size: 8.5px;
    padding-left: 5px;
  }
  .cp-stat-row-value {
    min-width: 30px;
  }
  .cp-equipment-panel {
    grid-area: equipment;
    width: 100%;
    max-width: calc(100vw - 20px);
    min-width: 0;
    display: flex;
    justify-content: center;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    justify-self: center;
    overflow: visible;
  }
  .cp-equipment-body {
    position: relative;
    width: 100%;
    max-width: 470px;
    min-width: 0;
    aspect-ratio: 470 / 430;
    min-height: 0;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: transparent;
  }
  .cp-equipment-body > div:first-child {
    flex: 0 0 389px;
    width: 389px !important;
    height: 357px !important;
    transform: scale(1);
    transform-origin: center center;
  }
  .cp-bottom-actions {
    --cp-bottom-btn-w: 260px;
    --cp-bottom-btn-h: 52px;
    --cp-bottom-gap: 10px;
    --cp-bottom-icon-size: 26px;
    --cp-bottom-label-size: 13px;
    --cp-bottom-label-pad-x: 18px;
    width: 100%;
    max-width: 260px;
    margin: 12px auto 20px;
    grid-template-columns: 1fr;
    justify-content: center;
    justify-items: center;
  }
  .cp-bottom-action-inner {
    gap: 7px;
  }
}
@media (max-width: 430px) {
  .cp-equipment-body {
    padding: 8px;
  }
  .cp-equipment-body > div:first-child {
    transform: scale(0.94);
  }
}
@media (max-width: 390px) {
  .cp-character-panel {
    max-width: 270px;
    min-height: 350px;
    max-height: 350px;
  }
  .cp-character-card {
    max-width: 270px;
    height: 350px;
    max-height: 350px;
  }
  .cp-character-frame,
  .cp-character-portrait {
    max-height: 350px;
  }
  .cp-equipment-body {
    padding: 8px;
  }
  .cp-equipment-body > div:first-child {
    transform: scale(0.88);
  }
  .cp-bottom-actions {
    --cp-bottom-btn-w: 240px;
    --cp-bottom-btn-h: 48px;
    --cp-bottom-icon-size: 24px;
    --cp-bottom-label-size: 12px;
    --cp-bottom-label-pad-x: 14px;
    max-width: 240px;
  }
}
@media (max-width: 360px) {
  .cp-equipment-body {
    padding: 6px;
  }
  .cp-equipment-body > div:first-child {
    transform: scale(0.82);
  }
}
.cp-action-form {
  width: 100%;
  max-width: 720px;
}
.cp-action-form .char-stats-row {
  width: 100%;
}
.cp-character-action-container {
  width: 100%;
  min-width: 0;
  margin-top: 18px;
  scroll-margin-top: 24px;
  background: transparent;
}
.cp-action-frame {
  width: 100%;
  min-width: 0;
}
.cp-action-card {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.cp-action-title {
  display: flex;
  align-items: center;
  gap: 9px;
}
.cp-action-title img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex: 0 0 auto;
}
.cp-action-title span {
  min-width: 0;
  font-family: "Cormorant SC", serif;
}
.cp-action-two-cols {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 340px);
  gap: 30px;
  width: 100%;
  min-width: 0;
}
.cp-action-two-cols::after {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: calc(100% - 340px - 15px);
  width: 24px;
  pointer-events: none;
  background: url("/ui/divider_horinozntal.png") center / contain no-repeat;
  opacity: 0.72;
  transform: rotate(90deg);
  transform-origin: center;
}
.cp-action-description {
  position: relative;
  min-width: 0;
  padding: 15px 18px 15px 22px;
  border: 0;
  border-left: 2px solid rgba(216, 189, 137, 0.34);
}
.cp-action-description::before {
  content: "“";
  position: absolute;
  left: 7px;
  top: 3px;
  color: rgba(216, 189, 137, 0.28);
  font-family: "Cormorant SC", serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.72);
}
.cp-action-description p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(236, 220, 183, 0.86);
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.34;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75);
}
.cp-action-settings {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 0;
  margin: 0;
}
.cp-action-setting-row {
  position: relative;
  min-height: 25px;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: rgba(2, 9, 12, 0.24);
  border: 1px solid rgba(202, 166, 105, 0.24);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.42);
}
.cp-action-setting-label {
  min-width: 0;
  color: #d8bd89;
  font-family: "Cormorant SC", serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.055em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #050302;
}
.cp-action-setting-value {
  min-width: 0;
  color: #fff0c9;
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-align: right;
  text-shadow: 0 1px 0 #000,
    0 0 8px rgba(214, 168, 91, 0.22);
  overflow-wrap: anywhere;
}
.cp-action-setting-row--dropdown {
  min-height: 30px;
}
.cp-action-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}
.cp-action-card .market-sort {
  position: relative;
  width: 100%;
  min-width: 0;
  z-index: 30;
}
.cp-action-card .market-sort__trigger {
  width: 100%;
  height: 30px;
  padding: 0 34px 0 12px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: 1px solid rgba(202, 166, 105, 0.24);
  border-radius: 0;
  outline: none;
  background: rgb(48 101 125 / 40%);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.42);
  color: #f0dfbf;
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease,
    box-shadow 0.16s ease,
    filter 0.16s ease;
}
.cp-action-card .market-sort__trigger:hover,
.cp-action-card .market-sort__trigger.is-open {
  border-color: rgba(224, 191, 121, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 224, 168, 0.04), 0 0 10px rgba(224, 191, 121, 0.08), 0 4px 12px rgba(0, 0, 0, 0.2);
}
.cp-action-card .market-sort__trigger:disabled {
  cursor: default;
  opacity: 0.68;
}
.cp-action-card .market-sort__trigger-text {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-action-card .market-sort__arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.92;
}
.cp-action-card .market-sort__arrow img {
  display: block;
  width: 14px;
  height: 14px;
  object-fit: contain;
}
.cp-action-card .market-sort__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  padding: 4px 0;
  border: 1px solid rgba(224, 191, 121, 0.65);
  border-radius: 0;
  background: linear-gradient(180deg, rgb(48 38 28 / 98%), rgb(10 6 4 / 98%));
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255, 224, 168, 0.04);
  z-index: 40;
}
.cp-action-card .market-sort__option {
  width: 100%;
  min-height: 36px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f0dfbf;
  font-family: "Cormorant SC", serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.14s ease,
    color 0.14s ease,
    box-shadow 0.14s ease;
}
.cp-action-card .market-sort__option:hover {
  background: rgb(36 31 24 / 85%);
  border: 1px solid rgba(202, 166, 105, 0.24);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.42);
  color: #fff0cb;
}
.cp-action-card .market-sort__option.is-active {
  background: linear-gradient(90deg, rgb(82 68 50 / 71%), rgb(39 34 25), rgb(83 70 56 / 60%));
  color: #fff3d2;
  box-shadow: inset 0 0 0 1px rgba(224, 191, 121, 0.26);
}
@media (max-width: 1560px) and (min-width: 981px) {
  .cp-character-action-container {
    margin-top: 14px;
    scroll-margin-top: 20px;
  }
  .cp-action-form {
    width: 100%;
    max-width: 680px;
    margin-inline: auto;
  }
  .cp-action-two-cols {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 12px;
    width: 100%;
    min-width: 0;
  }
  .cp-action-two-cols::after {
    display: none;
  }
  .cp-action-description {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    padding: 12px 15px 12px 20px;
  }
  .cp-action-description::before {
    left: 6px;
    top: 2px;
    font-size: 22px;
  }
  .cp-action-description p {
    font-size: 12px;
    line-height: 1.28;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }
  .cp-action-settings {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .cp-action-setting-row {
    min-height: 26px;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 5px;
    padding: 4px 7px;
  }
  .cp-action-setting-row--dropdown {
    grid-column: 1 / -1;
    min-height: 30px;
  }
  .cp-action-setting-label {
    font-size: 9px;
    letter-spacing: 0.045em;
  }
  .cp-action-setting-value {
    font-size: 11px;
  }
  .cp-action-buttons {
    gap: 10px;
    margin-top: 8px;
  }
  .cp-action-card .market-sort__trigger {
    height: 28px;
    padding-left: 10px;
    padding-right: 30px;
    font-size: 11px;
  }
  .cp-action-card .market-sort__arrow {
    right: 9px;
    width: 13px;
    height: 13px;
  }
  .cp-action-card .market-sort__arrow img {
    width: 13px;
    height: 13px;
  }
  .cp-action-card .market-sort__option {
    min-height: 32px;
    padding: 0 10px;
    font-size: 14px;
  }
}
@media (max-width: 980px) {
  .cp-character-action-container {
    margin-top: 14px;
    scroll-margin-top: 20px;
  }
  .cp-action-form {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
  }
  .cp-action-two-cols {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 14px;
  }
  .cp-action-two-cols::after {
    display: none;
  }
  .cp-action-description {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    padding: 13px 16px 13px 21px;
  }
  .cp-action-description p {
    font-size: 12.5px;
    line-height: 1.3;
  }
  .cp-action-settings {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .cp-action-setting-row,
  .cp-action-setting-row--dropdown {
    grid-column: auto;
    min-height: 28px;
  }
  .cp-action-setting-row {
    grid-template-columns: 90px minmax(0, 1fr);
  }
  .cp-action-setting-label {
    font-size: 10px;
  }
  .cp-action-setting-value {
    font-size: 12px;
  }
  .cp-action-buttons {
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
  }
}
@media (max-width: 640px) {
  .cp-character-action-container {
    margin-top: 12px;
    scroll-margin-top: 16px;
  }
  .cp-action-title {
    gap: 7px;
  }
  .cp-action-title img {
    width: 22px;
    height: 22px;
  }
  .cp-action-description {
    padding: 12px 13px 12px 19px;
  }
  .cp-action-description::before {
    left: 6px;
    top: 2px;
    font-size: 22px;
  }
  .cp-action-description p {
    font-size: 12px;
    line-height: 1.28;
  }
  .cp-action-settings {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .cp-action-setting-row {
    grid-template-columns: 1fr;
    gap: 5px;
    min-height: 0;
    padding: 6px 8px;
  }
  .cp-action-setting-label {
    font-size: 10px;
    line-height: 1.05;
  }
  .cp-action-setting-value {
    font-size: 12px;
    line-height: 1.05;
    text-align: left;
  }
  .cp-action-setting-row--dropdown {
    min-height: 30px;
  }
  .cp-action-buttons {
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 9px;
  }
  .cp-action-card .market-sort__trigger {
    height: 30px;
    padding-left: 10px;
    padding-right: 30px;
    font-size: 12px;
  }
  .cp-action-card .market-sort__menu {
    max-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .cp-action-card .market-sort__option {
    min-height: 34px;
    padding: 0 10px;
    font-size: 14px;
  }
}
@media (max-width: 390px) {
  .cp-action-description {
    padding: 11px 11px 11px 18px;
  }
  .cp-action-description p {
    font-size: 11.5px;
    line-height: 1.25;
  }
  .cp-action-setting-row {
    padding: 5px 7px;
  }
  .cp-action-setting-label {
    font-size: 9.5px;
  }
  .cp-action-setting-value {
    font-size: 11.5px;
  }
  .cp-action-buttons {
    flex-direction: column;
    gap: 8px;
  }
  .cp-action-card .market-sort__option {
    min-height: 32px;
    font-size: 13px;
  }
}
.mu-trial-card {
  --trial-image-size: 100px;
  --trial-image-img-size: 60px;
  --trial-divider-w: 110px;
  --trial-divider-h: 12px;
  --trial-progress-w: 165px;
  --trial-progress-h: 16px;
  --reward-corner-top: -10px;
  --reward-corner-right: -10px;
  --reward-corner-w: 55px;
  --trial-glass-1: rgba(170, 42, 35, 0.13);
  --trial-glass-2: rgba(214, 115, 54, 0.1);
  --trial-glass-3: rgba(255, 209, 120, 0.06);
  --trial-glass-ring: rgba(255, 188, 118, 0.08);
  --trial-glass-warm: rgba(255, 210, 124, 0.09);
  position: relative;
  width: min(100%, var(--trial-card-w, 420px));
  aspect-ratio: 819 / 326;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  padding: 8px 34px 8px 16px;
  overflow: visible;
  isolation: isolate;
  background: url("/ui/cards/mu-trial-card.png")
    center / 100% 100%
    no-repeat;
  transition: filter 0.18s ease,
    transform 0.18s ease;
}
.mu-trial-card::before,
.mu-trial-card::after {
  content: none !important;
}
.mu-trial-card:hover {
  transform: none !important;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.48))
    drop-shadow(0 0 8px rgba(201, 151, 83, 0.12));
}
.mu-trial-card--monster {
  --trial-glass-1: rgba(165, 43, 36, 0.16);
  --trial-glass-2: rgba(218, 105, 55, 0.12);
  --trial-glass-3: rgba(255, 196, 108, 0.075);
  --trial-glass-ring: rgba(255, 163, 96, 0.1);
  --trial-glass-warm: rgba(255, 202, 116, 0.1);
}
.mu-trial-card--item {
  --trial-glass-1: rgba(58, 133, 74, 0.15);
  --trial-glass-2: rgba(112, 190, 102, 0.115);
  --trial-glass-3: rgba(218, 224, 118, 0.065);
  --trial-glass-ring: rgba(157, 229, 141, 0.095);
  --trial-glass-warm: rgba(220, 218, 120, 0.085);
}
.mu-trial-card--event {
  --trial-glass-1: rgba(48, 110, 154, 0.15);
  --trial-glass-2: rgba(86, 174, 214, 0.115);
  --trial-glass-3: rgba(132, 224, 255, 0.065);
  --trial-glass-ring: rgba(131, 214, 255, 0.095);
  --trial-glass-warm: rgba(140, 226, 255, 0.085);
}
.mu-trial-card--neutral {
  --trial-glass-1: rgba(140, 110, 70, 0.13);
  --trial-glass-2: rgba(196, 154, 94, 0.1);
  --trial-glass-3: rgba(236, 208, 132, 0.06);
  --trial-glass-ring: rgba(226, 193, 129, 0.085);
  --trial-glass-warm: rgba(236, 208, 132, 0.085);
}
.mu-trial-reward-frame {
  position: absolute;
  top: var(--reward-corner-top);
  right: var(--reward-corner-right);
  width: var(--reward-corner-w);
  aspect-ratio: 600 / 563;
  display: block;
  box-sizing: border-box;
  background-image: url("/ui/cards/item_reward_frame.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 8;
}
.mu-trial-reward-frame__value {
  position: absolute;
  left: 0%;
  top: 17%;
  width: 100%;
  color: #f3dfb6;
  font-family: "Cormorant SC", Georgia, serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: rotate(var(--reward-rotate));
  transform-origin: center center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.95),
    0 0 5px rgba(0, 0, 0, 0.45);
}
.mu-trial-reward-frame__currency {
  position: absolute;
  left: 0%;
  top: 46%;
  width: 100%;
  color: #f0d27a;
  font-family: "Cormorant SC", Georgia, serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.35px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: rotate(var(--reward-rotate));
  transform-origin: center center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.95),
    0 0 5px rgba(0, 0, 0, 0.45);
}
.mu-trial-card__image-side {
  position: relative;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 0;
  transform: translateX(-5px);
  overflow: visible;
}
.mu-trial-image-frame {
  position: relative;
  width: var(--trial-image-size);
  height: var(--trial-image-size);
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("/ui/cards/card_image_frame_trial.png")
    center / 100% 100%
    no-repeat;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 5px rgba(216, 171, 101, 0.16));
  overflow: hidden;
  isolation: isolate;
}
.mu-trial-image-frame::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  animation: none;
  transform: scale(0.995);
  transform-origin: center center;
  background: radial-gradient(
      circle at 31% 24%,
      rgba(255, 255, 255, 0.105) 0%,
      rgba(255, 255, 255, 0.045) 15%,
      rgba(255, 255, 255, 0) 35%
    ),
    radial-gradient(
      circle at 66% 72%,
      var(--trial-glass-3) 0%,
      rgba(0, 0, 0, 0) 45%
    ),
    radial-gradient(
      circle at 52% 50%,
      var(--trial-glass-warm) 0%,
      rgba(0, 0, 0, 0) 62%
    ),
    linear-gradient(
      145deg,
      var(--trial-glass-1) 0%,
      var(--trial-glass-2) 58%,
      rgba(0, 0, 0, 0.018) 100%
    );
  background-repeat: no-repeat;
  background-size: 132% 132%,
    126% 126%,
    140% 140%,
    100% 100%;
  background-position: 28% 24%,
    66% 72%,
    50% 50%,
    50% 50%;
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.022),
    inset 0 0 11px rgba(255, 255, 255, 0.028),
    inset 0 0 18px var(--trial-glass-ring);
  filter: blur(1.05px) saturate(1.02);
  transition: opacity 0.28s ease-out;
}
.mu-trial-image-frame::after {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  animation: none;
  transform: scale(0.995);
  transform-origin: center center;
  background: radial-gradient(
      ellipse at 36% 22%,
      rgba(255, 255, 255, 0.13) 0%,
      rgba(255, 255, 255, 0.055) 19%,
      rgba(255, 255, 255, 0) 48%
    );
  filter: blur(2.4px);
  transition: opacity 0.28s ease-out;
}
.mu-trial-image-frame img {
  position: relative;
  z-index: 2;
  max-width: var(--trial-image-img-size);
  max-height: var(--trial-image-img-size);
  object-fit: contain;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.78))
    drop-shadow(0 0 4px rgba(255, 230, 170, 0.12));
  user-select: none;
  pointer-events: none;
}
.mu-trial-card:hover .mu-trial-image-frame::before {
  opacity: 0.48;
  animation: muTrialGlassFlow 12s ease-in-out infinite;
}
.mu-trial-card:hover .mu-trial-image-frame::after {
  opacity: 0.22;
  animation: muTrialGlassSheen 13s ease-in-out infinite;
}
.mu-trial-card:not(:hover) .mu-trial-image-frame::before,
.mu-trial-card:not(:hover) .mu-trial-image-frame::after {
  opacity: 0;
  animation: none;
}
.mu-trial-card:hover .mu-trial-image-frame {
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 5px rgba(216, 171, 101, 0.16));
}
.mu-trial-parts {
  position: absolute;
  left: 50%;
  bottom: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transform: translateX(-50%);
  z-index: 5;
}
.mu-trial-part {
  position: relative;
  width: 21px;
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(210, 170, 105, 0.44);
  border-radius: 4px;
  background: radial-gradient(
      circle at 50% 25%,
      rgba(53, 79, 83, 0.7),
      rgba(7, 11, 12, 0.92)
    );
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7),
    0 2px 4px rgba(0, 0, 0, 0.55);
}
.mu-trial-part img {
  max-width: 16px;
  max-height: 16px;
  object-fit: contain;
}
.mu-trial-part--submitted {
  border-color: rgba(155, 230, 166, 0.64);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7),
    0 0 7px rgba(110, 224, 136, 0.28);
}
.mu-trial-part-badge {
  position: absolute;
  right: -5px;
  bottom: -5px;
  min-width: 13px;
  height: 13px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #f4dfb6;
  font-family: "Cormorant SC", Georgia, serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  border: 1px solid rgba(215, 166, 91, 0.62);
}
.mu-trial-card__content {
  position: relative;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2px 28px 2px 0;
}
.mu-trial-card__content::after {
  content: "";
  flex: 0 0 auto;
  width: var(--trial-divider-w);
  height: var(--trial-divider-h);
  margin-top: 5px;
  display: block;
  background: url("/ui/cards/card_devider_down.png")
    center / 100% 100%
    no-repeat;
  pointer-events: none;
  opacity: 0.92;
}
.mu-trial-divider {
  flex: 0 0 auto;
  width: var(--trial-divider-w);
  height: var(--trial-divider-h);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0.92;
}
.mu-trial-divider--up {
  margin-bottom: 3px;
  background-image: url("/ui/cards/card_devider_up.png");
}
.mu-trial-divider--down {
  display: none;
}
.mu-trial-divider--bottom {
  display: none;
}
.mu-trial-title {
  max-width: 100%;
  text-align: center;
  font-family: "Cormorant SC", Georgia, serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.25px;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.95),
    0 0 6px rgba(0, 0, 0, 0.8);
}
.mu-trial-card--monster .mu-trial-title {
  color: #a47f51;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.95),
    0 0 8px rgb(164 127 81);
}
.mu-trial-card--item .mu-trial-title {
  color: #95e7a8;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.95),
    0 0 8px rgba(44, 151, 76, 0.42);
}
.mu-trial-card--event .mu-trial-title {
  color: #90cbff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.95),
    0 0 8px rgba(56, 139, 194, 0.42);
}
.mu-trial-card--neutral .mu-trial-title {
  color: #efd2a8;
}
.mu-trial-description {
  width: 100%;
  max-width: 258px;
  min-height: 42px;
  margin-top: 3px;
  text-align: center;
  color: #e8ceadd4;
  font-family: "Cormorant SC", Georgia, serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.1px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
  white-space: normal;
  overflow: visible;
  overflow-wrap: break-word;
  word-break: normal;
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
}
.mu-trial-progress-wrap {
  width: 100%;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mu-trial-progress {
  --progress: 0;
  width: var(--trial-progress-w);
  height: var(--trial-progress-h);
  position: relative;
  margin: 0;
  background: url("/ui/progress_bar.png")
    center / 100% 100%
    no-repeat;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}
.mu-trial-progress .cp-rank-progress-fill {
  position: absolute;
  left: 6px;
  top: 5px;
  height: 5px;
  width: calc((100% - 12px) * var(--progress));
  background-image: url("/ui/progress_line.png");
  background-repeat: repeat-x;
  background-position: left center;
  background-size: auto 100%;
}
.mu-trial-progress .cp-progress-marker {
  position: absolute;
  left: calc(6px + ((100% - 12px) * var(--progress)));
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: 3;
  background: radial-gradient(
      circle at 35% 28%,
      #fff2bd 0 12%,
      #d8a75f 30%,
      #6f4c2d 72%,
      #24170d 100%
    );
  border: 1px solid rgba(255, 235, 176, 0.95);
  box-shadow: 0 0 0 1px rgba(37, 22, 10, 0.9),
    0 0 8px rgba(222, 178, 100, 0.5);
}
.mu-trial-progress-value {
  min-width: 64px;
  margin-top: 1px;
  padding: 0 7px;
  text-align: center;
  color: #e7c99e;
  font-family: "Cormorant SC", Georgia, serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.05;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9);
}
.mu-trial-card--done .mu-trial-progress .cp-progress-marker {
  box-shadow: 0 0 0 1px rgba(37, 22, 10, 0.9),
    0 0 9px rgba(134, 225, 139, 0.45);
}
.mu-trial-action.menu-btn {
  width: 110px;
  height: 22px;
  display: block;
  flex: 0 0 auto;
  margin: 4px auto 0;
}
.mu-trial-action .menu-btn__label {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  font-family: "Cormorant SC", Georgia, serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.15px;
  white-space: nowrap;
  text-transform: none !important;
}
.mu-trial-action:disabled {
  cursor: default;
  opacity: 0.62;
  filter: grayscale(0.25);
}
.mu-trial-card--with-action .mu-trial-description {
  margin-top: 3px;
}
.mu-trial-card--with-action .mu-trial-progress-wrap {
  margin-top: 4px;
}
.mu-trial-card--no-action .mu-trial-description {
  margin-top: 4px;
}
.mu-trial-card--no-action .mu-trial-progress-wrap {
  margin-top: 5px;
}
.mu-trial-card-over {
  position: absolute;
  inset: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  outline: none;
  cursor: pointer;
  overflow: hidden;
  background: radial-gradient(
      ellipse at 50% 46%,
      rgba(255, 228, 172, 0.13) 0%,
      rgba(255, 228, 172, 0.055) 26%,
      transparent 56%
    ),
    linear-gradient(
      180deg,
      rgba(2, 4, 7, 0.68) 0%,
      rgba(2, 4, 7, 0.58) 45%,
      rgba(2, 4, 7, 0.52) 100%
    );
  -webkit-mask-image: url("/ui/cards/mu-trial-card.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-image: url("/ui/cards/mu-trial-card.png");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
  transition: background 0.16s ease,
    filter 0.16s ease;
}
.mu-trial-card-over::before {
  content: "";
  position: absolute;
  inset: 13px 22px;
  pointer-events: none;
  background: linear-gradient(
      90deg,
      #00000029 0%,
      rgb(255 223 164 / 14%) 18%,
      rgb(20 18 16 / 72%) 50%,
      rgb(255 223 164 / 17%) 82%,
      #31202091 100%
    );
  opacity: 0.72;
  filter: blur(12px);
}
.mu-trial-card-over--static {
  cursor: default;
  pointer-events: none;
}
.mu-trial-card-over__inner {
  position: relative;
  z-index: 2;
  max-width: 82%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #f3dfb6;
  font-family: "Cormorant SC", Georgia, serif;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.95),
    0 0 6px rgba(255, 220, 150, 0.15);
  transition: transform 0.16s ease;
}
.mu-trial-card-over:hover .mu-trial-card-over__inner {
  transform: translateY(-1px);
}
.mu-trial-card-over__icon {
  position: relative;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mu-trial-card-over__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mu-trial-card-over__check {
  position: relative;
  z-index: 2;
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.9))
    drop-shadow(0 0 6px rgba(126, 255, 151, 0.24));
}
.mu-trial-card-over__text {
  position: relative;
  z-index: 2;
  min-width: 150px;
  max-width: 230px;
  min-height: 34px;
  padding: 4px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  border: 1px solid rgba(190, 145, 86, 0.88);
  border-radius: 0;
  background: radial-gradient(
      circle at 50% 16%,
      rgba(27, 34, 40, 0.94) 0%,
      rgba(7, 10, 14, 0.98) 58%,
      rgba(1, 3, 6, 0.99) 100%
    );
  box-shadow: inset 0 0 0 1px rgba(255, 226, 166, 0.06),
    inset 0 8px 15px rgba(255, 255, 255, 0.025),
    inset 0 -10px 18px rgba(0, 0, 0, 0.52),
    0 2px 8px rgba(0, 0, 0, 0.48);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.mu-trial-card-over__text::before {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(232, 196, 132, 0.06) 18%,
      rgba(232, 196, 132, 0.1) 50%,
      rgba(232, 196, 132, 0.06) 82%,
      transparent 100%
    );
  opacity: 0.9;
}
.mu-trial-card-over__title {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  color: #e7c99e;
  font-family: "Cormorant SC", Georgia, serif;
  font-size: 15px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.45px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.95),
    0 0 7px rgba(190, 145, 86, 0.24);
}
.mu-trial-card-over__desc {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  color: rgba(232, 206, 173, 0.82);
  font-family: "Cormorant SC", Georgia, serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.85);
}
.mu-trial-card-over--done .mu-trial-card-over__title {
  color: #e7c99e;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.95),
    0 0 7px rgba(190, 145, 86, 0.24);
}
.mu-trial-card-over--disabled {
  cursor: default;
  background: linear-gradient(
      180deg,
      rgba(2, 4, 7, 0.76) 0%,
      rgba(2, 4, 7, 0.68) 45%,
      rgba(2, 4, 7, 0.62) 100%
    );
  filter: grayscale(0.22);
}
.mu-trial-card-over--disabled .mu-trial-card-over__inner {
  opacity: 0.74;
}
.mu-trial-card-over--disabled:hover .mu-trial-card-over__inner {
  transform: none;
}
@keyframes muTrialGlassFlow {
  0% {
    transform: scale(0.995);
    background-position: 28% 24%,
      66% 72%,
      50% 50%,
      50% 50%;
    filter: blur(1.05px) saturate(1.02);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.018),
      inset 0 0 10px rgba(255, 255, 255, 0.022),
      inset 0 0 14px var(--trial-glass-ring);
  }
  30% {
    transform: scale(1.002);
    background-position: 31% 26%,
      63% 69%,
      53% 51%,
      50% 50%;
    filter: blur(1.08px) saturate(1.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.022),
      inset 0 0 12px rgba(255, 255, 255, 0.028),
      inset 0 0 18px var(--trial-glass-ring);
  }
  55% {
    transform: scale(1.004);
    background-position: 34% 28%,
      60% 66%,
      56% 52%,
      50% 50%;
    filter: blur(1.12px) saturate(1.06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.026),
      inset 0 0 14px rgba(255, 255, 255, 0.034),
      inset 0 0 22px var(--trial-glass-ring);
  }
  78% {
    transform: scale(1.002);
    background-position: 31% 26%,
      63% 69%,
      53% 51%,
      50% 50%;
    filter: blur(1.08px) saturate(1.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.022),
      inset 0 0 12px rgba(255, 255, 255, 0.028),
      inset 0 0 18px var(--trial-glass-ring);
  }
  100% {
    transform: scale(0.995);
    background-position: 28% 24%,
      66% 72%,
      50% 50%,
      50% 50%;
    filter: blur(1.05px) saturate(1.02);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.018),
      inset 0 0 10px rgba(255, 255, 255, 0.022),
      inset 0 0 14px var(--trial-glass-ring);
  }
}
@keyframes muTrialGlassSheen {
  0% {
    transform: scale(0.995);
  }
  45% {
    transform: scale(1.003);
  }
  65% {
    transform: scale(1.004);
  }
  100% {
    transform: scale(0.995);
  }
}
@media (max-width: 1560px) {
  .mu-trial-card {
    --trial-image-size: 94px;
    --trial-image-img-size: 56px;
    --trial-divider-w: 104px;
    --trial-divider-h: 11px;
    --trial-progress-w: 154px;
    --trial-progress-h: 16px;
    --reward-corner-top: -9px;
    --reward-corner-right: -9px;
    --reward-corner-w: 52px;
    grid-template-columns: 104px minmax(0, 1fr);
    padding: 7px 30px 7px 14px;
  }
  .mu-trial-card__content {
    padding-right: 24px;
  }
  .mu-trial-description {
    max-width: 238px;
    min-height: 42px;
    font-size: 11px;
    line-height: 1.12;
  }
  .mu-trial-action.menu-btn {
    width: 104px;
  }
  .mu-trial-reward-frame__value {
    font-size: 13px;
  }
  .mu-trial-reward-frame__currency {
    font-size: 10px;
  }
}
@media (max-width: 620px) {
  .mu-trial-card {
    --trial-image-size: 76px;
    --trial-image-img-size: 44px;
    --trial-divider-w: 96px;
    --trial-divider-h: 10px;
    --trial-progress-w: 128px;
    --trial-progress-h: 16px;
    --reward-corner-top: -7px;
    --reward-corner-right: -7px;
    --reward-corner-w: 43px;
    grid-template-columns: 82px minmax(0, 1fr);
    padding: 6px 18px 6px 10px;
  }
  .mu-trial-card__image-side {
    transform: translateX(-3px);
  }
  .mu-trial-card__content {
    padding: 0 8px 0 0;
  }
  .mu-trial-card__content::after {
    display: none;
  }
  .mu-trial-divider--up {
    margin-bottom: 1px;
  }
  .mu-trial-title {
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.18px;
  }
  .mu-trial-description {
    max-width: 210px;
    min-height: 48px;
    margin-top: 2px;
    font-size: 10.6px;
    line-height: 1.1;
    letter-spacing: 0.05px;
    overflow: visible;
  }
  .mu-trial-progress-wrap {
    margin-top: 2px;
  }
  .mu-trial-progress-value {
    margin-top: 0;
    font-size: 11px;
  }
  .mu-trial-action.menu-btn {
    width: 100px;
    height: 21px;
    margin-top: 2px;
  }
  .mu-trial-action .menu-btn__label {
    font-size: 9.5px;
  }
  .mu-trial-reward-frame__value {
    font-size: 10.8px;
  }
  .mu-trial-reward-frame__currency {
    font-size: 8.2px;
    letter-spacing: 0.22px;
  }
  .mu-trial-card-over__icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
  .mu-trial-card-over__check {
    width: 18px;
    height: 18px;
  }
  .mu-trial-card-over__text {
    min-width: 126px;
    max-width: 190px;
    min-height: 30px;
    padding: 3px 10px;
  }
  .mu-trial-card-over__title {
    font-size: 13px;
  }
  .mu-trial-card-over__desc {
    font-size: 10px;
  }
}
@media (max-width: 420px) {
  .mu-trial-card {
    --trial-image-size: 68px;
    --trial-image-img-size: 40px;
    --trial-divider-w: 86px;
    --trial-divider-h: 9px;
    --trial-progress-w: 112px;
    --trial-progress-h: 16px;
    --reward-corner-top: -6px;
    --reward-corner-right: -6px;
    --reward-corner-w: 39px;
    grid-template-columns: 72px minmax(0, 1fr);
    padding: 5px 14px 5px 8px;
  }
  .mu-trial-card__content {
    padding-right: 5px;
  }
  .mu-trial-title {
    font-size: 12px;
  }
  .mu-trial-description {
    max-width: 198px;
    min-height: 50px;
    font-size: 10.2px;
    line-height: 1.08;
  }
  .mu-trial-action.menu-btn {
    width: 94px;
    height: 20px;
  }
  .mu-trial-action .menu-btn__label {
    font-size: 9px;
  }
  .mu-trial-progress-value {
    font-size: 10.5px;
  }
  .mu-trial-reward-frame__value {
    font-size: 9.8px;
  }
  .mu-trial-reward-frame__currency {
    font-size: 7.4px;
    letter-spacing: 0.18px;
  }
}
.cp-action-card--daily {
  position: relative;
  width: 100%;
  min-width: 0;
  background: transparent;
  box-shadow: none;
  border: 0;
  overflow: visible;
}
.cp-daily-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 430px);
  gap: 28px;
  width: 100%;
  min-width: 0;
  align-items: stretch;
}
.cp-daily-content,
.cp-daily-row,
.cp-daily-body,
.cp-daily-trial-layout {
  min-width: 0;
}
.cp-daily-quote {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: stretch;
  padding: 16px 18px 16px 24px;
  border-left: 2px solid rgba(216, 189, 137, 0.34);
  overflow: visible;
}
.cp-daily-quote__mark {
  position: absolute;
  left: 7px;
  top: 2px;
  color: rgba(216, 189, 137, 0.28);
  font-family: "Cormorant SC", serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.72);
  pointer-events: none;
}
.cp-daily-quote__content {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  overflow: visible;
}
.cp-daily-quote__content p {
  margin: 0;
  color: rgba(236, 220, 183, 0.86);
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.34;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75);
}
.cp-daily-trial-slot {
  --trial-card-w: 420px;
  position: relative;
  width: min(100%, var(--trial-card-w));
  min-width: 0;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: visible;
}
.cp-daily-trial-slot > .mu-trial-card {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: min(100%, var(--trial-card-w)) !important;
  max-width: 100% !important;
  transform: none !important;
  transform-origin: center center !important;
}
.cp-daily-trial-slot > .mu-trial-card:hover {
  transform: none !important;
}
.cp-daily-alert {
  width: 100%;
  margin: 0;
  text-align: center;
}
.cp-daily-quote,
.cp-daily-quote__content,
.cp-daily-layout,
.cp-action-frame--daily,
.cp-action-frame--daily .ornate-frame-content,
.cp-action-card--daily {
  overflow: visible;
}
.cp-daily-month,
.cp-daily-month * {
  box-sizing: border-box;
}
.cp-daily-month {
  --daily-lock-size: 30px;
  --daily-lock-icon-size: 18px;
  --daily-view-size: 5;
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 14px;
  padding: 10px 10px 12px;
  overflow: visible;
  box-shadow: inset 0 0 0 1px rgba(255, 222, 151, 0.06),
    inset 0 0 18px rgba(255, 188, 84, 0.04),
    0 8px 20px rgba(0, 0, 0, 0.22);
}
.cp-daily-month__head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  font-family: "Cormorant SC", serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #d9c09b;
}
.cp-daily-month__head span {
  font-size: 13px;
  font-weight: 800;
  color: #ecdcb7;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}
.cp-daily-month__head strong {
  font-size: 13px;
  font-weight: 900;
  color: #ffd88c;
  text-shadow: 0 0 8px rgba(255, 185, 74, 0.22),
    0 1px 4px rgba(0, 0, 0, 0.9);
}
.cp-daily-month__body {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  overflow: visible;
}
.cp-daily-month__arrow {
  position: relative;
  width: 20px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(196, 159, 88, 0.38);
  background: radial-gradient(
      circle at 50% 25%,
      rgba(255, 224, 151, 0.12),
      transparent 54%
    ),
    linear-gradient(
      180deg,
      rgba(48, 37, 25, 0.88),
      rgba(18, 15, 12, 0.96)
    );
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 222, 150, 0.07),
    inset 0 0 12px rgba(255, 196, 99, 0.05),
    0 5px 12px rgba(0, 0, 0, 0.34);
  transition: border-color 0.14s ease,
    filter 0.14s ease,
    opacity 0.14s ease;
}
.cp-daily-month__arrow:hover:not(:disabled) {
  border-color: rgba(234, 196, 112, 0.72);
  filter: brightness(1.04);
}
.cp-daily-month__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}
.cp-daily-month__arrow-icon {
  width: 14px;
  height: 18px;
  object-fit: contain;
  display: block;
}
.cp-daily-month__arrow-icon--right {
  transform: scaleX(-1);
}
.cp-daily-month__track {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  height: 60px;
  display: grid;
  grid-template-columns: repeat(var(--daily-view-size, 5), minmax(0, 1fr));
  align-items: center;
  overflow: visible;
}
.cp-daily-month__track::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 7px;
  right: 7px;
  top: 20px;
  height: 7px;
  border-top: 2px solid rgb(98 79 53);
  border-bottom: 2px solid rgb(98 79 53);
  border-left: 1px solid rgb(98 79 53);
  border-right: 1px solid rgb(98 79 53);
  border-radius: 1px;
  background: linear-gradient(
      180deg,
      rgba(20, 24, 33, 0.98) 0%,
      rgba(7, 10, 16, 0.99) 45%,
      rgba(4, 6, 10, 1) 50%,
      rgba(7, 10, 16, 0.99) 55%,
      rgba(20, 24, 33, 0.98) 100%
    );
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.78),
    0 1px 2px rgba(0, 0, 0, 0.45);
}
.cp-daily-month__track::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 3px;
  right: 3px;
  top: 19px;
  height: 9px;
  pointer-events: none;
  background: linear-gradient(
      90deg,
      rgb(98 79 53) 0,
      rgb(98 79 53) 2px,
      rgba(255, 218, 130, 0.2) 2px,
      rgba(255, 218, 130, 0.2) 3px,
      transparent 3px,
      transparent calc(100% - 3px),
      rgba(255, 218, 130, 0.2) calc(100% - 3px),
      rgba(255, 218, 130, 0.2) calc(100% - 2px),
      rgb(98 79 53) calc(100% - 2px),
      rgb(98 79 53) 100%
    );
}
.cp-daily-month__cell {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.cp-daily-month__cell--empty {
  pointer-events: none;
  opacity: 0;
}
.cp-daily-lock {
  position: relative;
  width: var(--daily-lock-size);
  height: calc(var(--daily-lock-size) + 16px);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  border: 0;
  outline: none;
  background: transparent;
  appearance: none;
  cursor: help;
  font-family: "Cormorant SC", serif;
  color: #d8c193;
  overflow: visible;
}
.cp-daily-lock__frame {
  position: relative;
  width: var(--daily-lock-size);
  height: var(--daily-lock-size);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.cp-daily-lock__frame-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
}
.cp-daily-lock__icon {
  position: relative;
  z-index: 2;
  width: var(--daily-lock-icon-size);
  height: var(--daily-lock-icon-size);
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
}
.cp-daily-lock__day {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.05em;
  color: rgba(238, 213, 160, 0.76);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.cp-daily-lock--today .cp-daily-lock__day {
  color: #9dd6ff;
  text-shadow: 0 0 5px rgba(96, 200, 255, 0.24),
    0 1px 3px rgba(0, 0, 0, 0.9);
}
.cp-daily-lock:focus-visible .cp-daily-lock__frame {
  outline: 1px solid rgba(255, 220, 143, 0.45);
  outline-offset: 1px;
}
.cp-daily-month__range {
  position: relative;
  z-index: 1;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cormorant SC", serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(236, 220, 183, 0.58);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}
.cp-daily-floating-tip {
  position: fixed;
  left: var(--tip-x);
  top: var(--tip-y);
  z-index: 2147483000;
  width: max-content;
  min-width: 180px;
  max-width: min(260px, calc(100vw - 32px));
  transform: translate(-50%, 0);
  pointer-events: none;
  padding: 10px 14px;
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
  color: #f0dfbf;
  background: linear-gradient(#413221 0%, #1c1a17 100%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(224, 191, 121, 0.95),
    inset 0 0 0 3px rgba(8, 10, 12, 0.98),
    inset 0 0 0 4px rgba(224, 191, 121, 0.28),
    inset 0 0 14px rgba(255, 210, 140, 0.03);
}
.cp-daily-floating-tip--above {
  transform: translate(-50%, -100%);
}
.cp-daily-floating-tip__title {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffd88c;
  text-shadow: 0 0 7px rgba(255, 188, 75, 0.22),
    0 1px 3px rgba(0, 0, 0, 0.95);
}
.cp-daily-floating-tip__quest {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 800;
  color: #f0dfbf;
}
.cp-daily-floating-tip__desc {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(240, 223, 191, 0.78);
}
.cp-daily-floating-tip__status,
.cp-daily-floating-tip__reward {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 5px;
  padding: 5px 7px;
  border: 1px solid rgba(224, 191, 121, 0.18);
  background: linear-gradient(
      180deg,
      rgba(13, 13, 12, 0.62),
      rgba(5, 6, 7, 0.74)
    );
  box-shadow: inset 0 0 8px rgba(255, 215, 140, 0.03);
}
.cp-daily-floating-tip__label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(236, 220, 183, 0.64);
}
.cp-daily-floating-tip__value {
  font-size: 11px;
  font-weight: 900;
  color: #f0dfbf;
}
.cp-daily-floating-tip__status--done .cp-daily-floating-tip__value {
  color: #a7f4c1;
}
.cp-daily-floating-tip__status--locked .cp-daily-floating-tip__value {
  color: #ecd27c;
}
.cp-daily-floating-tip__status--today .cp-daily-floating-tip__value {
  color: #9dd6ff;
}
.cp-daily-floating-tip__reward .cp-daily-floating-tip__value {
  color: #ffd88c;
}
@media (max-width: 1560px) {
  .cp-daily-content,
  .cp-daily-layout,
  .cp-daily-row,
  .cp-daily-body,
  .cp-daily-trial-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto;
    gap: 14px;
    align-items: start;
    justify-items: center;
    width: 100%;
    min-width: 0;
  }
  .cp-daily-content::after,
  .cp-daily-layout::after,
  .cp-daily-row::after,
  .cp-daily-body::after,
  .cp-daily-trial-layout::after {
    display: none !important;
  }
  .cp-daily-quote {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: min(100%, 680px) !important;
    max-width: 680px !important;
    min-width: 0 !important;
    justify-self: center !important;
    padding: 12px 18px 12px 22px;
  }
  .cp-daily-trial-slot {
    --trial-card-w: 390px;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: center !important;
  }
  .cp-daily-quote__mark {
    left: 7px;
    top: 1px;
    font-size: 32px;
  }
  .cp-daily-quote p,
  .cp-daily-quote span {
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  .cp-daily-quote__content p {
    font-size: 13px;
    line-height: 1.3;
  }
}
@media (max-width: 900px) {
  .cp-daily-layout {
    grid-template-columns: 1fr !important;
    gap: 14px;
    width: 100%;
  }
  .cp-daily-quote {
    width: 100%;
    max-width: 100%;
    padding: 12px 16px 12px 22px;
  }
  .cp-daily-quote__content p {
    font-size: 12.5px;
    line-height: 1.3;
  }
}
@media (max-width: 620px) {
  .cp-daily-trial-slot {
    --trial-card-w: min(330px, calc(100vw - 28px));
  }
}
@media (max-width: 520px) {
  .cp-daily-layout {
    gap: 12px;
  }
  .cp-daily-quote {
    padding: 11px 13px 11px 20px;
  }
  .cp-daily-quote__mark {
    left: 6px;
    top: 1px;
    font-size: 28px;
  }
  .cp-daily-quote__content p {
    font-size: 12px;
    line-height: 1.28;
  }
}
@media (max-width: 420px) {
  .cp-daily-trial-slot {
    --trial-card-w: min(310px, calc(100vw - 18px));
  }
}
@media (max-width: 768px) {
  .cp-daily-month {
    --daily-lock-size: 34px;
    --daily-lock-icon-size: 20px;
    padding: 10px 9px 12px;
  }
  .cp-daily-month__body {
    grid-template-columns: 24px minmax(0, 1fr) 24px;
    gap: 8px;
  }
  .cp-daily-month__arrow {
    width: 22px;
    height: 26px;
  }
  .cp-daily-month__track {
    height: 64px;
  }
  .cp-daily-month__track::before {
    left: 12px;
    right: 12px;
    top: 24px;
  }
  .cp-daily-month__track::after {
    left: 8px;
    right: 8px;
    top: 23px;
  }
  .cp-daily-floating-tip {
    font-size: 11px;
    padding: 9px 12px;
    max-width: min(210px, calc(100vw - 24px));
  }
}
@media (max-width: 480px) {
  .cp-daily-month {
    --daily-lock-size: 32px;
    --daily-lock-icon-size: 19px;
    padding: 9px 8px 11px;
  }
  .cp-daily-month__head span,
  .cp-daily-month__head strong {
    font-size: 12px;
  }
  .cp-daily-month__body {
    grid-template-columns: 22px minmax(0, 1fr) 22px;
    gap: 7px;
  }
  .cp-daily-month__arrow {
    width: 21px;
    height: 25px;
  }
  .cp-daily-month__track {
    height: 62px;
  }
  .cp-daily-month__track::before {
    left: 10px;
    right: 10px;
    top: 23px;
  }
  .cp-daily-month__track::after {
    left: 7px;
    right: 7px;
    top: 22px;
  }
  .cp-daily-lock__day {
    font-size: 10px;
  }
  .cp-daily-floating-tip {
    min-width: 170px;
  }
}
@media (max-width: 380px) {
  .cp-daily-month {
    --daily-lock-size: 30px;
    --daily-lock-icon-size: 18px;
    padding: 8px 7px 10px;
  }
  .cp-daily-month__body {
    grid-template-columns: 21px minmax(0, 1fr) 21px;
    gap: 6px;
  }
  .cp-daily-month__arrow {
    width: 20px;
    height: 24px;
  }
  .cp-daily-month__track {
    height: 60px;
  }
  .cp-daily-month__track::before {
    left: 9px;
    right: 9px;
    top: 22px;
  }
  .cp-daily-month__track::after {
    left: 6px;
    right: 6px;
    top: 21px;
  }
}
.cp-stats-action-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  align-items: stretch;
  gap: 26px;
}
.cp-stats-action-description {
  min-height: 100%;
}
.cp-stats-editor {
  position: relative;
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 8px;
}
.cp-stats-free-panel {
  position: relative;
  min-height: 25px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  background: rgba(2, 9, 12, 0.24);
  border: 1px solid rgba(202, 166, 105, 0.24);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.42);
}
.cp-stats-free-panel__label {
  min-width: 0;
  color: #d8bd89;
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: 1;
  text-shadow: 0 1px 0 #050302;
}
.cp-stats-free-panel__value {
  min-width: 54px;
  color: #fff0c9;
  font-family: "Cormorant SC", serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  text-align: right;
  text-shadow: 0 1px 0 #000,
    0 0 8px rgba(214, 168, 91, 0.22);
}
.cp-stats-free-panel__value.is-negative {
  color: #ff8d7f;
}
.cp-stats-action-list {
  display: grid;
  gap: 7px;
}
.cp-stats-action-row {
  position: relative;
  min-height: 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 154px;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  background: rgba(2, 9, 12, 0.24);
  border: 1px solid rgba(202, 166, 105, 0.24);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.42);
}
.cp-stats-action-row__left {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.cp-stats-action-row__icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  opacity: 0.92;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.72));
}
.cp-stats-action-row__label {
  min-width: 0;
  color: #d8bd89;
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: 1;
  text-shadow: 0 1px 0 #050302;
}
.cp-stat-value-control {
  position: relative;
  width: 154px;
  min-width: 0;
  height: 30px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  align-items: stretch;
  background: rgb(48 101 125 / 40%);
  border: 1px solid rgba(202, 166, 105, 0.24);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.42);
  transition: border-color 0.16s ease,
    box-shadow 0.16s ease,
    filter 0.16s ease;
}
.cp-stat-value-control:focus-within {
  border-color: rgba(224, 191, 121, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 224, 168, 0.04),
    0 0 10px rgba(224, 191, 121, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.2);
}
.cp-stat-value-field {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 0 7px;
  border: 0;
  outline: none;
  background: transparent;
  color: #f0dfbf;
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 0 #000;
}
.cp-stat-value-field::-webkit-outer-spin-button,
.cp-stat-value-field::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cp-stat-value-field[type="number"] {
  -moz-appearance: textfield;
}
.cp-stat-value-field:disabled {
  opacity: 0.58;
  cursor: default;
}
.cp-stat-value-arrows {
  display: contents;
}
.cp-stat-arrow-btn {
  appearance: none;
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  cursor: pointer;
  opacity: 0.86;
  transition: opacity 0.14s ease,
    filter 0.14s ease,
    background 0.14s ease;
}
.cp-stat-arrow-btn:hover:not(:disabled) {
  opacity: 1;
  background: linear-gradient(
      90deg,
      rgba(57, 107, 126, 0.55),
      rgba(151, 235, 246, 0.18),
      rgba(139, 216, 224, 0.32)
    );
  filter: drop-shadow(0 0 5px rgba(151, 235, 246, 0.18));
}
.cp-stat-arrow-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.cp-stat-arrow-btn img {
  display: block;
  width: 12px;
  height: 12px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85));
}
.cp-stat-arrow-btn--min {
  grid-column: 1;
  grid-row: 1;
  border-right: 1px solid rgba(199, 168, 117, 0.14);
}
.cp-stat-arrow-btn--max {
  grid-column: 3;
  grid-row: 1;
  border-left: 1px solid rgba(199, 168, 117, 0.14);
}
.cp-stats-action-buttons {
  grid-column: 1 / -1;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  padding-top: 0;
}
.cp-stats-action-buttons .menu-btn {
  flex: 0 0 auto;
}
.cp-action-card--stats .cp-stat-icon-frame,
.cp-action-card--stats .cp-stat-icon-frame__bg {
  display: none;
}
@media (max-width: 1560px) {
  .cp-stats-action-layout {
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    max-width: 680px;
    margin-inline: auto;
  }
  .cp-stats-action-description {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 0;
    width: 100%;
    min-width: 0;
  }
  .cp-stats-editor {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-width: 680px;
    min-width: 0;
    justify-self: center;
    gap: 7px;
  }
  .cp-stats-free-panel {
    min-height: 24px;
    padding: 4px 9px;
  }
  .cp-stats-free-panel__label {
    font-size: 12px;
  }
  .cp-stats-free-panel__value {
    min-width: 48px;
    font-size: 14px;
  }
  .cp-stats-action-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .cp-stats-action-row {
    min-height: 28px;
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: 7px;
    padding: 4px 7px;
  }
  .cp-stats-action-row__left {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 6px;
  }
  .cp-stats-action-row__icon {
    width: 18px;
    height: 18px;
  }
  .cp-stats-action-row__label {
    font-size: 12px;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cp-stat-value-control {
    width: 132px;
    height: 28px;
    grid-template-columns: 25px minmax(0, 1fr) 25px;
  }
  .cp-stat-value-field {
    height: 26px;
    padding: 0 5px;
    font-size: 12px;
  }
  .cp-stat-arrow-btn {
    width: 25px;
    height: 26px;
  }
  .cp-stat-arrow-btn img {
    width: 10px;
    height: 10px;
  }
  .cp-stats-action-buttons {
    gap: 10px;
    margin-top: 8px;
  }
}
@media (max-width: 900px) {
  .cp-stats-action-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .cp-stats-action-row {
    grid-template-columns: minmax(0, 1fr) 154px;
  }
  .cp-stat-value-control {
    width: 154px;
  }
  .cp-stats-action-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}
@media (max-width: 520px) {
  .cp-stats-action-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .cp-stat-value-control {
    width: 100%;
  }
  .cp-stats-action-buttons {
    grid-template-columns: 1fr;
  }
  .cp-stats-action-buttons .menu-btn {
    max-width: 280px;
  }
}
.cp-change-name-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  align-items: stretch;
  gap: 26px;
}
.cp-change-name-description {
  min-height: 100%;
}
.cp-change-name-editor {
  position: relative;
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 8px;
}
.cp-change-name-row {
  position: relative;
  min-height: 25px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  background: rgba(2, 9, 12, 0.24);
  border: 1px solid rgba(202, 166, 105, 0.24);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.42);
}
.cp-change-name-row--input {
  grid-template-columns: minmax(0, 1fr) 190px;
}
.cp-change-name-label {
  min-width: 0;
  color: #d8bd89;
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: 1;
  text-shadow: 0 1px 0 #050302;
}
.cp-change-name-value {
  min-width: 0;
  color: #fff0c9;
  font-family: "Cormorant SC", serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  text-align: right;
  text-shadow: 0 1px 0 #000,
    0 0 8px rgba(214, 168, 91, 0.22);
}
.cp-change-name-input-wrap {
  position: relative;
  width: 190px;
  min-width: 0;
  height: 30px;
  display: flex;
  align-items: center;
  background: rgb(48 101 125 / 40%);
  border: 1px solid rgba(202, 166, 105, 0.24);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.42);
  transition: border-color 0.16s ease,
    box-shadow 0.16s ease,
    filter 0.16s ease;
}
.cp-change-name-input-wrap:focus-within {
  border-color: rgba(224, 191, 121, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 224, 168, 0.04),
    0 0 10px rgba(224, 191, 121, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.2);
}
.cp-change-name-input {
  width: 100%;
  min-width: 0;
  height: 25px;
  padding: 0 10px;
  border: 0;
  outline: none;
  background: transparent;
  color: #f0dfbf;
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 0 #000;
}
.cp-change-name-input::placeholder {
  color: rgba(240, 223, 191, 0.45);
}
.cp-change-name-input:disabled {
  opacity: 0.58;
  cursor: default;
}
.cp-change-name-note {
  min-height: 30px;
  padding: 8px 10px;
  color: rgba(255, 141, 127, 0.92);
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  background: linear-gradient(
      90deg,
      rgba(70, 18, 18, 0.28),
      rgba(4, 8, 10, 0.16)
    );
  border: 1px solid rgba(255, 120, 90, 0.15);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85);
}
.cp-change-name-error-slot {
  min-height: 20px;
}
.cp-change-name-error,
.cp-change-name-checking {
  padding: 0 2px;
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85);
}
.cp-change-name-error {
  color: #ff8d7f;
}
.cp-change-name-checking {
  color: rgba(240, 223, 191, 0.75);
}
.cp-action-card--change-name .cp-action-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}
.cp-action-card--change-name .cp-action-buttons .menu-btn {
  flex: 0 0 auto;
}
@media (max-width: 1560px) {
  .cp-change-name-layout {
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    max-width: 680px;
    margin-inline: auto;
  }
  .cp-change-name-description {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 0;
    width: 100%;
    min-width: 0;
  }
  .cp-change-name-editor {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-width: 680px;
    min-width: 0;
    justify-self: center;
    gap: 7px;
  }
  .cp-change-name-row {
    min-height: 26px;
    grid-template-columns: minmax(0, 1fr) minmax(130px, auto);
    gap: 8px;
    padding: 4px 7px;
  }
  .cp-change-name-row--input {
    grid-template-columns: minmax(0, 1fr) 170px;
  }
  .cp-change-name-label {
    font-size: 12px;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cp-change-name-value {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cp-change-name-input-wrap {
    width: 170px;
    height: 28px;
  }
  .cp-change-name-input {
    height: 26px;
    padding: 0 8px;
    font-size: 13px;
  }
  .cp-change-name-note {
    min-height: 28px;
    padding: 7px 9px;
    font-size: 12px;
    line-height: 1.16;
  }
  .cp-change-name-error-slot {
    min-height: 18px;
  }
  .cp-change-name-error,
  .cp-change-name-checking {
    font-size: 12px;
  }
  .cp-action-card--change-name .cp-action-buttons {
    gap: 10px;
    margin-top: 8px;
  }
}
@media (max-width: 900px) {
  .cp-change-name-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
@media (max-width: 520px) {
  .cp-change-name-row,
  .cp-change-name-row--input {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .cp-change-name-value {
    text-align: left;
  }
  .cp-change-name-input-wrap {
    width: 100%;
  }
  .cp-action-card--change-name .cp-action-buttons {
    flex-wrap: wrap;
    gap: 10px;
  }
}
.cp-change-class-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  align-items: stretch;
  gap: 26px;
}
.cp-change-class-description {
  min-height: 100%;
}
.cp-change-class-editor {
  position: relative;
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 8px;
}
.cp-change-class-row {
  position: relative;
  min-height: 25px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  background: rgba(2, 9, 12, 0.24);
  border: 1px solid rgba(202, 166, 105, 0.24);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.42);
}
.cp-change-class-row--select {
  grid-template-columns: minmax(0, 1fr) 220px;
  overflow: visible;
  z-index: 20;
}
.cp-change-class-label {
  min-width: 0;
  color: #d8bd89;
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: 1;
  text-shadow: 0 1px 0 #050302;
}
.cp-change-class-value {
  min-width: 0;
  color: #fff0c9;
  font-family: "Cormorant SC", serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  text-align: right;
  text-shadow: 0 1px 0 #000,
    0 0 8px rgba(214, 168, 91, 0.22);
}
.cp-change-class-select {
  position: relative;
  width: 220px;
  min-width: 0;
  z-index: 50;
}
.cp-change-class-select .market-sort {
  position: relative;
  z-index: 50;
}
.cp-change-class-select .market-sort__trigger {
  height: 30px;
  padding-left: 10px;
}
.cp-change-class-select .market-sort__trigger:disabled {
  opacity: 0.58;
  cursor: default;
}
.cp-change-class-select .market-sort__option {
  min-height: 34px;
  font-size: 15px;
}
.cp-change-class-select .market-sort__menu {
  z-index: 80;
  max-height: 168px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgb(184 157 112) rgb(40 34 26);
}
.cp-change-class-select .market-sort__menu::-webkit-scrollbar {
  width: 6px;
}
.cp-change-class-select .market-sort__menu::-webkit-scrollbar-track {
  background: linear-gradient(
      180deg,
      rgba(4, 6, 10, 0.98),
      rgba(10, 12, 16, 0.99)
    );
  box-shadow: inset 0 0 0 1px rgba(224, 191, 121, 0.08);
}
.cp-change-class-select .market-sort__menu::-webkit-scrollbar-thumb {
  border-radius: 0;
  background: linear-gradient(
      180deg,
      rgba(224, 191, 121, 0.72),
      rgba(116, 83, 42, 0.72)
    );
  box-shadow: inset 0 0 0 1px rgba(255, 230, 176, 0.12);
}
.cp-change-class-select .market-sort__menu::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
      180deg,
      rgba(255, 218, 148, 0.86),
      rgba(151, 107, 52, 0.82)
    );
}
.cp-change-class-note {
  min-height: 30px;
  padding: 8px 10px;
  color: rgba(255, 141, 127, 0.92);
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  background: linear-gradient(
      90deg,
      rgba(70, 18, 18, 0.28),
      rgba(4, 8, 10, 0.16)
    );
  border: 1px solid rgba(255, 120, 90, 0.15);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85);
}
.cp-action-card--change-class .cp-action-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}
.cp-action-card--change-class .cp-action-buttons .menu-btn {
  flex: 0 0 auto;
}
@media (max-width: 1560px) {
  .cp-change-class-layout {
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    max-width: 680px;
    margin-inline: auto;
  }
  .cp-change-class-description {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 0;
    width: 100%;
    min-width: 0;
  }
  .cp-change-class-editor {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-width: 680px;
    min-width: 0;
    justify-self: center;
    gap: 7px;
  }
  .cp-change-class-row {
    min-height: 26px;
    grid-template-columns: minmax(0, 1fr) minmax(130px, auto);
    gap: 8px;
    padding: 4px 7px;
  }
  .cp-change-class-row--select {
    grid-template-columns: minmax(0, 1fr) 190px;
    overflow: visible;
    z-index: 20;
  }
  .cp-change-class-label {
    font-size: 12px;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cp-change-class-value {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cp-change-class-select {
    width: 190px;
  }
  .cp-change-class-select .market-sort__trigger {
    height: 28px;
    padding-left: 9px;
    padding-right: 30px;
    font-size: 12px;
  }
  .cp-change-class-select .market-sort__option {
    min-height: 31px;
    padding-inline: 10px;
    font-size: 13px;
  }
  .cp-change-class-select .market-sort__menu {
    max-height: 154px;
  }
  .cp-change-class-note {
    min-height: 28px;
    padding: 7px 9px;
    font-size: 12px;
    line-height: 1.16;
  }
  .cp-action-card--change-class .cp-action-buttons {
    gap: 10px;
    margin-top: 8px;
  }
}
@media (max-width: 900px) {
  .cp-change-class-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .cp-change-class-row--select {
    grid-template-columns: minmax(0, 1fr) 220px;
  }
  .cp-change-class-select {
    width: 220px;
  }
  .cp-change-class-select .market-sort__menu {
    max-height: 168px;
  }
}
@media (max-width: 520px) {
  .cp-change-class-row,
  .cp-change-class-row--select {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .cp-change-class-value {
    text-align: left;
  }
  .cp-change-class-select {
    width: 100%;
  }
  .cp-change-class-select .market-sort__menu {
    max-height: 148px;
  }
  .cp-action-card--change-class .cp-action-buttons {
    flex-wrap: wrap;
    gap: 10px;
  }
}
.public-ranking-character-page .public-ranking-character-grid {
  display: block;
  width: 100%;
  min-width: 0;
}
.public-ranking-character-panel {
  position: relative;
}
.public-ranking-character-panel {
  position: relative;
}
.public-ranking-back-btn {
  position: absolute;
  z-index: 5;
  top: 92px;
  left: 92px;
  margin: 0;
  transform: scale(0.74);
  transform-origin: top left;
}
.public-ranking-back-btn .menu-btn-sm__label {
  white-space: nowrap;
}
.public-ranking-error-box {
  position: relative;
  z-index: 3;
  width: min(520px, 100%);
  margin: -8px auto 18px;
  padding: 10px 14px;
  color: #f0dbb3;
  font-family: "Cormorant SC", Georgia, serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  background: linear-gradient(
      90deg,
      rgba(75, 18, 14, 0.42),
      rgba(25, 9, 7, 0.32)
    );
  border: 1px solid rgba(193, 102, 82, 0.28);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.28),
    0 6px 14px rgba(0, 0, 0, 0.22);
}
.public-ranking-stat-tabs .cp-stat-tab {
  cursor: default;
}
.public-ranking-stat-tabs .cp-stat-tab:not(.is-active) {
  opacity: 0.55;
}
.public-ranking-location-line .cp-rank-value {
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.public-ranking-character-page .cp-stat-panel-new {
  min-height: 550px;
}
.public-ranking-character-page .cp-rank-info {
  gap: 4px;
}
.public-ranking-character-page .cp-rank-line {
  min-height: 28px;
  padding-top: 3px;
  padding-bottom: 3px;
}
.public-ranking-character-page .cp-stat-row-new {
  min-height: 25px;
}
@media (max-width: 980px) {
  .public-ranking-back-btn {
    top: 14px;
    right: 12px;
  }
  .public-ranking-character-page .cp-stat-panel-new {
    min-height: 0;
  }
  .public-ranking-location-line .cp-rank-value {
    max-width: 150px;
  }
}
@media (max-width: 640px) {
  .public-ranking-back-btn {
    position: relative;
    top: auto;
    right: auto;
    display: block;
    width: max-content;
    margin: 0 auto 14px;
  }
  .public-ranking-error-box {
    margin-top: 0;
    margin-bottom: 14px;
  }
  .public-ranking-location-line .cp-rank-value {
    max-width: 110px;
  }
}
.character-path-menu,
.hunt-season-menu,
.elevation-path-menu {
  --diamond-menu-tab-max-width: 252px;
  --diamond-menu-line: linear-gradient(
      90deg,
      transparent,
      rgba(236, 177, 78, 0.58),
      rgba(255, 210, 125, 0.42),
      transparent
    );
  --diamond-menu-line-shadow: 0 0 10px rgba(236, 161, 61, 0.16);
  --diamond-edge-outer: linear-gradient(
      135deg,
      #1a1109 0%,
      #3a2918 18%,
      #7b5830 34%,
      #d8b878 48%,
      #f1d59a 56%,
      #b78b4d 66%,
      #5c3d20 82%,
      #21170e 100%
    );
  --diamond-edge-inner: linear-gradient(
      221deg,
      #f1d59a 0%,
      #d0a45f 12%,
      #8f6835 28%,
      #5c452c 46%,
      #3f3020 62%,
      #21170e 82%,
      #120c07 100%
    );
  --diamond-bg-shadow: rgba(216, 184, 120, 0.22);
  --diamond-glow-0-a: rgba(225, 151, 61, 0.22);
  --diamond-glow-0-b: rgba(122, 68, 28, 0.12);
  --diamond-glow-50-a: rgba(255, 193, 92, 0.34);
  --diamond-glow-50-b: rgba(180, 92, 34, 0.18);
  --diamond-glow-100-a: rgba(148, 78, 30, 0.26);
  --diamond-glow-100-b: rgba(64, 31, 15, 0.16);
  --diamond-text-base: #bfa77a;
  --diamond-text-disabled: rgba(191, 167, 122, 0.72);
  --diamond-text-active: #ffdca0;
  --diamond-text-shadow-active: 0 0 7px rgba(225, 151, 61, 0.2),
    0 2px 8px rgba(0, 0, 0, 0.34);
  align-self: start;
  width: 100%;
  min-width: 0;
  padding: 8px 0;
}
.character-path-menu {
  --diamond-menu-tab-max-width: 240px;
  --diamond-menu-line: linear-gradient(
      90deg,
      transparent,
      rgba(120, 120, 120, 0.44),
      rgba(190, 190, 180, 0.24),
      transparent
    );
  --diamond-menu-line-shadow: 0 0 10px rgba(120, 120, 120, 0.12);
  --diamond-edge-outer: linear-gradient(
      135deg,
      #090909 0%,
      #171717 18%,
      #2d2d2d 34%,
      #5d5d5d 48%,
      #b7b4aa 56%,
      #77736b 66%,
      #343434 82%,
      #0d0d0d 100%
    );
  --diamond-edge-inner: linear-gradient(
      221deg,
      #b7b4aa 0%,
      #929088 12%,
      #66635d 28%,
      #474747 46%,
      #2f2f2f 62%,
      #181818 82%,
      #090909 100%
    );
  --diamond-bg-shadow: rgba(140, 140, 135, 0.24);
  --diamond-glow-0-a: rgba(130, 130, 130, 0.2);
  --diamond-glow-0-b: rgba(45, 45, 45, 0.12);
  --diamond-glow-50-a: rgba(195, 190, 176, 0.3);
  --diamond-glow-50-b: rgba(95, 95, 95, 0.16);
  --diamond-glow-100-a: rgba(95, 95, 95, 0.24);
  --diamond-glow-100-b: rgba(24, 24, 24, 0.16);
  --diamond-text-active: #d8d2c4;
  --diamond-text-shadow-active: 0 0 7px rgba(165, 165, 155, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.34);
}
.hunt-season-menu {
  --diamond-menu-tab-max-width: 240px;
  --diamond-menu-line: linear-gradient(
      90deg,
      transparent,
      rgba(150, 62, 56, 0.5),
      rgba(214, 126, 89, 0.28),
      transparent
    );
  --diamond-menu-line-shadow: 0 0 10px rgba(150, 48, 48, 0.14);
  --diamond-edge-outer: linear-gradient(
      135deg,
      #17080a 0%,
      #2a1115 18%,
      #55242a 34%,
      #8b3b3c 48%,
      #c87960 56%,
      #913f39 66%,
      #421c20 82%,
      #17080a 100%
    );
  --diamond-edge-inner: linear-gradient(
      221deg,
      #c87960 0%,
      #a24b42 12%,
      #743039 28%,
      #52242c 46%,
      #34171c 62%,
      #210d11 82%,
      #120609 100%
    );
  --diamond-bg-shadow: rgba(117, 38, 44, 0.28);
  --diamond-glow-0-a: rgba(170, 58, 52, 0.22);
  --diamond-glow-0-b: rgba(82, 28, 24, 0.12);
  --diamond-glow-50-a: rgba(220, 94, 72, 0.32);
  --diamond-glow-50-b: rgba(150, 54, 36, 0.18);
  --diamond-glow-100-a: rgba(130, 48, 38, 0.26);
  --diamond-glow-100-b: rgba(52, 18, 18, 0.16);
  --diamond-text-active: #e1c29c;
  --diamond-text-shadow-active: 0 0 6px rgba(171, 82, 53, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.32);
}
.character-path-menu-inner,
.hunt-season-menu-inner,
.elevation-path-menu-inner {
  position: relative;
  padding: 22px 0 22px 18px;
  margin-top: 18px;
}
.character-path-menu-inner::before,
.character-path-menu-inner::after,
.hunt-season-menu-inner::before,
.hunt-season-menu-inner::after,
.elevation-path-menu-inner::before,
.elevation-path-menu-inner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 14px;
  height: 1px;
  pointer-events: none;
}
.character-path-menu-inner::before,
.hunt-season-menu-inner::before,
.elevation-path-menu-inner::before {
  top: 0;
  background: var(--diamond-menu-line);
}
.character-path-menu-inner::after,
.hunt-season-menu-inner::after,
.elevation-path-menu-inner::after {
  display: none;
}
.character-path-menu-list,
.hunt-season-menu-list,
.elevation-path-menu-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.character-path-menu-tab,
.hunt-season-menu-tab,
.elevation-path-menu-tab {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: auto;
  min-width: 168px;
  max-width: var(--diamond-menu-tab-max-width);
  min-height: 50px;
  padding: 8px 6px 8px 0;
  margin: 0;
  border: 0;
  outline: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  font-family: "Cormorant SC", serif;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.24s ease,
    opacity 0.24s ease,
    filter 0.24s ease;
}
button.character-path-menu-tab,
button.hunt-season-menu-tab,
button.elevation-path-menu-tab {
  border: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
}
button.character-path-menu-tab:focus,
button.character-path-menu-tab:focus-visible,
.character-path-menu-tab:focus,
.character-path-menu-tab:focus-visible,
button.hunt-season-menu-tab:focus,
button.hunt-season-menu-tab:focus-visible,
.hunt-season-menu-tab:focus,
.hunt-season-menu-tab:focus-visible,
button.elevation-path-menu-tab:focus,
button.elevation-path-menu-tab:focus-visible,
.elevation-path-menu-tab:focus,
.elevation-path-menu-tab:focus-visible {
  outline: none;
}
button.character-path-menu-tab:disabled,
button.hunt-season-menu-tab:disabled,
button.elevation-path-menu-tab:disabled {
  color: inherit;
  opacity: 1;
}
.character-path-menu-tab:hover,
.hunt-season-menu-tab:hover,
.elevation-path-menu-tab:hover {
  transform: translateX(2px);
}
.character-path-menu-tab.is-active,
.hunt-season-menu-tab.is-active,
.elevation-path-menu-tab.is-active {
  opacity: 1;
}
.character-path-menu-tab.is-disabled,
.hunt-season-menu-tab.is-disabled,
.elevation-path-menu-tab.is-disabled {
  pointer-events: none;
  opacity: 0.46;
  filter: grayscale(0.1);
}
.character-path-menu-tab__icon,
.hunt-season-menu-tab__icon,
.elevation-path-menu-tab__icon {
  position: relative;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  isolation: isolate;
  flex: 0 0 46px;
}
.character-path-menu-tab__icon-bg,
.hunt-season-menu-tab__icon-bg,
.elevation-path-menu-tab__icon-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("/ui/tab_romb2.svg") center / contain no-repeat;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.34));
  transition: transform 0.45s ease,
    filter 0.45s ease,
    opacity 0.45s ease;
}
.character-path-menu-tab__icon-glow,
.hunt-season-menu-tab__icon-glow,
.elevation-path-menu-tab__icon-glow {
  position: absolute;
  inset: -2px;
  z-index: 0;
  background: url("/ui/tab_romb2.svg") center / contain no-repeat;
  opacity: 0;
  transform: scale(1.01);
  pointer-events: none;
  transition: opacity 0.45s ease,
    transform 0.45s ease,
    filter 0.45s ease;
}
.character-path-menu-tab__icon-edge,
.hunt-season-menu-tab__icon-edge,
.elevation-path-menu-tab__icon-edge {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease,
    transform 0.45s ease,
    filter 0.45s ease;
}
.character-path-menu-tab__icon-edge::before,
.hunt-season-menu-tab__icon-edge::before,
.elevation-path-menu-tab__icon-edge::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--diamond-edge-outer);
  background-size: 260% 260%;
  background-position: 0% 50%;
  -webkit-mask: url("/ui/tab_romb2.svg") center / contain no-repeat;
  mask: url("/ui/tab_romb2.svg") center / contain no-repeat;
  mix-blend-mode: normal;
}
.character-path-menu-tab__icon-edge::after,
.hunt-season-menu-tab__icon-edge::after,
.elevation-path-menu-tab__icon-edge::after {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--diamond-edge-inner);
  background-size: 260% 260%;
  background-position: 100% 50%;
  -webkit-mask: url("/ui/tab_romb2.svg") center / contain no-repeat;
  mask: url("/ui/tab_romb2.svg") center / contain no-repeat;
  mix-blend-mode: normal;
}
.character-path-menu-tab:hover .character-path-menu-tab__icon-glow,
.character-path-menu-tab.is-active .character-path-menu-tab__icon-glow,
.hunt-season-menu-tab:hover .hunt-season-menu-tab__icon-glow,
.hunt-season-menu-tab.is-active .hunt-season-menu-tab__icon-glow,
.elevation-path-menu-tab:hover .elevation-path-menu-tab__icon-glow,
.elevation-path-menu-tab.is-active .elevation-path-menu-tab__icon-glow {
  opacity: 0.92;
  animation: muDiamondGlowShift 5.8s ease-in-out infinite alternate,
    muDiamondGlowPulse 3.8s ease-in-out infinite;
}
.character-path-menu-tab:hover .character-path-menu-tab__icon-edge,
.character-path-menu-tab.is-active .character-path-menu-tab__icon-edge,
.hunt-season-menu-tab:hover .hunt-season-menu-tab__icon-edge,
.hunt-season-menu-tab.is-active .hunt-season-menu-tab__icon-edge,
.elevation-path-menu-tab:hover .elevation-path-menu-tab__icon-edge,
.elevation-path-menu-tab.is-active .elevation-path-menu-tab__icon-edge {
  opacity: 0.86;
}
.character-path-menu-tab:hover .character-path-menu-tab__icon-edge::before,
.character-path-menu-tab.is-active .character-path-menu-tab__icon-edge::before,
.hunt-season-menu-tab:hover .hunt-season-menu-tab__icon-edge::before,
.hunt-season-menu-tab.is-active .hunt-season-menu-tab__icon-edge::before,
.elevation-path-menu-tab:hover .elevation-path-menu-tab__icon-edge::before,
.elevation-path-menu-tab.is-active .elevation-path-menu-tab__icon-edge::before {
  animation: muDiamondFlowOuter 5.8s ease-in-out infinite alternate;
}
.character-path-menu-tab:hover .character-path-menu-tab__icon-edge::after,
.character-path-menu-tab.is-active .character-path-menu-tab__icon-edge::after,
.hunt-season-menu-tab:hover .hunt-season-menu-tab__icon-edge::after,
.hunt-season-menu-tab.is-active .hunt-season-menu-tab__icon-edge::after,
.elevation-path-menu-tab:hover .elevation-path-menu-tab__icon-edge::after,
.elevation-path-menu-tab.is-active .elevation-path-menu-tab__icon-edge::after {
  animation: muDiamondFlowInner 5.8s ease-in-out infinite alternate;
}
.character-path-menu-tab:hover .character-path-menu-tab__icon-bg,
.character-path-menu-tab.is-active .character-path-menu-tab__icon-bg,
.hunt-season-menu-tab:hover .hunt-season-menu-tab__icon-bg,
.hunt-season-menu-tab.is-active .hunt-season-menu-tab__icon-bg,
.elevation-path-menu-tab:hover .elevation-path-menu-tab__icon-bg,
.elevation-path-menu-tab.is-active .elevation-path-menu-tab__icon-bg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 6px var(--diamond-bg-shadow));
}
.character-path-menu-tab__icon-image,
.hunt-season-menu-tab__icon-image,
.elevation-path-menu-tab__icon-image {
  position: relative;
  z-index: 3;
  width: 27px;
  height: 27px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.75));
}
.character-path-menu-tab__text-wrap,
.hunt-season-menu-tab__text-wrap,
.elevation-path-menu-tab__text-wrap {
  min-width: 0;
  display: flex;
  align-items: center;
}
.character-path-menu-tab__text,
.hunt-season-menu-tab__text,
.elevation-path-menu-tab__text {
  color: var(--diamond-text-base);
  white-space: nowrap;
  text-align: left;
  pointer-events: none;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.05;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
  transition: color 0.45s ease,
    text-shadow 0.45s ease;
}
.character-path-menu-tab.is-long-label .character-path-menu-tab__text,
.hunt-season-menu-tab.is-long-label .hunt-season-menu-tab__text,
.elevation-path-menu-tab.is-long-label .elevation-path-menu-tab__text {
  font-size: 13px;
  white-space: normal;
}
.character-path-menu-tab:hover .character-path-menu-tab__text,
.character-path-menu-tab.is-active .character-path-menu-tab__text,
.hunt-season-menu-tab:hover .hunt-season-menu-tab__text,
.hunt-season-menu-tab.is-active .hunt-season-menu-tab__text,
.elevation-path-menu-tab:hover .elevation-path-menu-tab__text,
.elevation-path-menu-tab.is-active .elevation-path-menu-tab__text {
  color: var(--diamond-text-active);
  text-shadow: var(--diamond-text-shadow-active);
}
.character-path-menu-tab.is-disabled .character-path-menu-tab__text,
.hunt-season-menu-tab.is-disabled .hunt-season-menu-tab__text,
.elevation-path-menu-tab.is-disabled .elevation-path-menu-tab__text {
  color: var(--diamond-text-disabled);
}
@keyframes muDiamondGlowShift {
  0% {
    filter: blur(2px)
      brightness(1.1)
      saturate(1.04)
      drop-shadow(0 0 3px var(--diamond-glow-0-a))
      drop-shadow(0 0 6px var(--diamond-glow-0-b));
  }
  50% {
    filter: blur(2px)
      brightness(1.22)
      saturate(1.12)
      drop-shadow(0 0 5px var(--diamond-glow-50-a))
      drop-shadow(0 0 8px var(--diamond-glow-50-b));
  }
  100% {
    filter: blur(2px)
      brightness(1.14)
      saturate(1.08)
      drop-shadow(0 0 4px var(--diamond-glow-100-a))
      drop-shadow(0 0 6px var(--diamond-glow-100-b));
  }
}
@keyframes muDiamondGlowPulse {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.018);
  }
  100% {
    opacity: 0.76;
    transform: scale(1);
  }
}
@keyframes muDiamondFlowOuter {
  0% {
    background-position: 0% 50%;
    filter: brightness(1.08)
      saturate(1.04)
      contrast(1.06);
  }
  50% {
    background-position: 100% 50%;
    filter: brightness(1.28)
      saturate(1.18)
      contrast(1.16);
  }
  100% {
    background-position: 0% 50%;
    filter: brightness(1.1)
      saturate(1.06)
      contrast(1.08);
  }
}
@keyframes muDiamondFlowInner {
  0% {
    background-position: 100% 50%;
    filter: brightness(1.08)
      contrast(1.08);
  }
  50% {
    background-position: 0% 50%;
    filter: brightness(1.3)
      contrast(1.16);
  }
  100% {
    background-position: 100% 50%;
    filter: brightness(1.1)
      contrast(1.08);
  }
}
.character-path-info-frame {
  width: 100%;
  min-width: 0;
  margin: 0 0 18px;
}
.character-path-info-frame--plain {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.character-path-info-card {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.character-path-info-two-cols {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.92fr);
  gap: 30px;
  width: 100%;
  min-width: 0;
}
.character-path-info-two-cols::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: calc(50% - 12px);
  width: 24px;
  pointer-events: none;
  background: url("/ui/divider_horinozntal.png") center / contain no-repeat;
  opacity: 0.72;
  transform: rotate(90deg);
  transform-origin: center;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.45));
}
.character-path-info-panel {
  min-width: 0;
}
.character-path-info-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}
.character-path-info-title img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 6px rgba(236, 210, 124, 0.18))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.62));
}
.character-path-info-title span {
  min-width: 0;
  color: #e1c29c;
  font-family: "Cormorant SC", serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.05;
  text-transform: none;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 #000,
    0 0 8px rgba(214, 168, 91, 0.16);
}
.character-path-info-quote {
  position: relative;
  min-width: 0;
  padding: 15px 18px 15px 22px;
  border: 0;
  border-left: 2px solid rgba(216, 189, 137, 0.34);
}
.character-path-info-quote::before {
  content: "“";
  position: absolute;
  left: 7px;
  top: 3px;
  color: rgba(216, 189, 137, 0.28);
  font-family: "Cormorant SC", serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.72);
}
.character-path-info-quote p {
  position: relative;
  z-index: 1;
  margin: 0 0 8px;
  color: rgba(236, 220, 183, 0.86);
  font-family: "Cormorant SC", serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.34;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75);
}
.character-path-info-quote p:last-child {
  margin-bottom: 0;
}
.character-path-info-list {
  min-width: 0;
  display: grid;
  gap: 7px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.character-path-info-list li {
  position: relative;
  min-height: 26px;
  min-width: 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  padding: 5px 8px 5px 6px;
  border-radius: 4px;
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.018) 0%,
      rgba(255, 216, 148, 0.032) 48%,
      rgba(255, 255, 255, 0.014) 100%
    );
  border: 1px solid rgba(191, 167, 122, 0.12);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 232, 186, 0.035);
  transition: border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}
.character-path-info-list li:hover {
  border-color: rgba(191, 167, 122, 0.2);
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.022) 0%,
      rgba(255, 216, 148, 0.045) 48%,
      rgba(255, 255, 255, 0.016) 100%
    );
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 232, 186, 0.055);
}
.character-path-info-list li::before {
  content: "";
  width: 14px;
  height: 14px;
  margin-top: 1px;
  background: url("/ui/list_ico.png") center / contain no-repeat;
  filter: drop-shadow(0 0 5px rgba(236, 210, 124, 0.16))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
  transform: translateY(0) scale(1);
  transform-origin: center;
  transition: filter 0.18s ease,
    transform 0.18s ease,
    opacity 0.18s ease;
}
.character-path-info-list li:hover::before {
  background-image: url("/ui/list_ico_hover.png");
  filter: drop-shadow(0 0 7px rgba(236, 210, 124, 0.28))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.72));
  transform: translateY(-1px) scale(1.06);
}
.character-path-info-list li span {
  min-width: 0;
  color: rgba(236, 220, 183, 0.88);
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78);
  transition: color 0.18s ease,
    text-shadow 0.18s ease;
}
.character-path-info-list li:hover span {
  color: rgba(255, 238, 202, 0.94);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78),
    0 0 6px rgba(214, 168, 91, 0.12);
}
.character-path-block {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0 0 18px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.character-path-block > .mu-panel-title {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  color: rgba(191, 167, 122, 0.68);
  font-family: "Cormorant SC", serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85),
    0 0 7px rgba(217, 172, 108, 0.08);
  transition: color 0.22s ease,
    text-shadow 0.22s ease;
}
.character-path-block:hover > .mu-panel-title {
  color: rgba(225, 194, 156, 0.88);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.88),
    0 0 8px rgba(217, 172, 108, 0.16);
}
.character-path-title-divider {
  width: min(280px, 82%);
  height: 14px;
  margin: 7px auto 9px;
  background: url("/ui/divider_horinozntal_gray.png") center / contain no-repeat;
  opacity: 0.72;
  pointer-events: none;
  filter: drop-shadow(0 0 7px rgba(0, 0, 0, 0.45));
}
.character-path-muted {
  width: 100%;
  max-width: 760px;
  margin: 0 auto 14px;
  color: #b6b8b6;
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78);
}
.character-path-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 0;
  margin-top: 18px;
}
.character-path-actions .menu-btn-md {
  width: 220px;
  height: 58px;
  margin: 0 auto;
  transform: none !important;
}
.character-path-actions .menu-btn-md__label {
  padding: 0 18px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.05;
  white-space: normal;
  text-align: center;
}
.path-showcase-layout {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(245px, 310px);
  gap: 34px;
  align-items: start;
  margin-top: 16px;
}
.path-showcase-detail-frame {
  width: 100%;
  min-width: 0;
}
.path-showcase-detail-stack {
  display: grid;
  width: 100%;
  min-width: 0;
}
.path-showcase-detail {
  grid-area: 1 / 1;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 17px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease,
    visibility 0.18s ease;
}
.path-showcase-detail.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.path-showcase-detail__section {
  position: relative;
  min-width: 0;
  padding: 0 0 15px;
}
.path-showcase-detail__section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 22%;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(143, 151, 153, 0.12) 10%,
      rgba(182, 184, 182, 0.34) 46%,
      rgba(143, 151, 153, 0.12) 78%,
      transparent 100%
    );
  box-shadow: 0 0 8px rgba(182, 184, 182, 0.05);
}
.path-showcase-detail__section:last-child {
  padding-bottom: 0;
}
.path-showcase-detail__section:last-child::after {
  display: none;
}
.path-showcase-detail__label {
  margin: 0 0 8px;
  color: rgba(191, 167, 122, 0.72);
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.82),
    0 0 7px rgba(217, 172, 108, 0.08);
}
.path-showcase-detail__text {
  margin: 0;
  color: rgba(236, 220, 183, 0.87);
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.46;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78);
}
.path-showcase-detail__stages {
  counter-reset: pathStage;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}
.path-showcase-detail__stages span {
  counter-increment: pathStage;
  position: relative;
  min-height: 30px;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 4px 4px 4px 34px;
  color: rgba(236, 220, 183, 0.82);
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.025em;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.86);
  transition: color 0.18s ease,
    text-shadow 0.18s ease;
}
.path-showcase-detail__stages span::before {
  content: counter(pathStage);
  position: absolute;
  left: 0;
  top: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  color: #fff4cf;
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  background: url("/ui/check_box.png") center / contain no-repeat;
  text-shadow: 0 1px 0 rgba(255, 238, 190, 0.22);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.72));
  transition: color 0.18s ease,
    background-image 0.18s ease,
    filter 0.18s ease,
    text-shadow 0.18s ease;
}
.path-showcase-detail__stages span:hover {
  color: #ffe8ba;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.88),
    0 0 7px rgba(217, 172, 108, 0.16);
}
.path-showcase-detail__stages span:hover::before {
  color: #fff4cf;
  background-image: url("/ui/check_box.png");
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78),
    0 0 5px rgba(255, 232, 186, 0.28);
  filter: drop-shadow(0 0 5px rgba(217, 172, 108, 0.2))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.78));
}
.path-showcase-side {
  min-width: 0;
  display: grid;
  gap: 18px;
  align-content: start;
}
.path-showcase-tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  min-width: 0;
}
.path-showcase-tab {
  appearance: none;
  -webkit-appearance: none;
  width: 76px;
  min-width: 76px;
  display: grid;
  justify-items: center;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  color: inherit;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.22s ease,
    filter 0.22s ease;
}
.path-showcase-tab:focus,
.path-showcase-tab:focus-visible {
  outline: none;
}
.path-showcase-tab__image {
  position: relative;
  width: 76px;
  height: 84px;
  display: grid;
  place-items: center;
  overflow: visible;
  background: transparent;
  clip-path: none;
}
.path-showcase-tab__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  filter: brightness(0.34)
    saturate(0.64)
    contrast(1.04);
  opacity: 0.72;
  transform: none;
  transition: filter 0.22s ease,
    opacity 0.22s ease;
}
.path-showcase-tab:hover .path-showcase-tab__image img {
  filter: brightness(0.56)
    saturate(0.86)
    contrast(1.04);
  opacity: 0.9;
}
.path-showcase-tab.is-active .path-showcase-tab__image img {
  filter: brightness(1)
    saturate(1)
    contrast(1.04);
  opacity: 1;
}
.path-showcase-small-stack {
  display: grid;
  min-width: 0;
}
.path-showcase-small {
  grid-area: 1 / 1;
  position: relative;
  min-width: 0;
  padding-top: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease,
    visibility 0.18s ease;
}
.path-showcase-small.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.path-showcase-small__mode {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: fit-content;
  min-width: 42px;
  min-height: 20px;
  padding: 4px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  font-family: "Cormorant SC", serif;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.86);
  box-shadow: inset 0 0 8px rgba(217, 172, 108, 0.12),
    inset 0 1px 0 rgba(255, 232, 186, 0.05),
    0 2px 4px rgba(0, 0, 0, 0.5);
}
.path-showcase-small__mode::before,
.path-showcase-small__mode::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  transform: translateY(-50%);
}
.path-showcase-small__mode::before {
  left: -4px;
}
.path-showcase-small__mode::after {
  right: -4px;
}
.path-showcase-small__mode--warrior {
  color: #ffd4c9;
  border: 1px solid rgba(217, 94, 76, 0.34);
  background: linear-gradient(
      180deg,
      rgba(72, 42, 38, 0.8) 0%,
      rgba(31, 22, 21, 0.86) 100%
    );
  box-shadow: inset 0 0 8px rgba(217, 94, 76, 0.18),
    inset 0 1px 0 rgba(255, 214, 196, 0.06),
    0 2px 4px rgba(0, 0, 0, 0.5);
}
.path-showcase-small__mode--warrior::before,
.path-showcase-small__mode--warrior::after {
  background: #ffb0a0;
  box-shadow: 0 0 3px #ffb0a0,
    0 0 7px rgba(217, 94, 76, 0.32);
}
.path-showcase-small__mode--hunter {
  color: #cbeeff;
  border: 1px solid rgba(92, 154, 190, 0.34);
  background: linear-gradient(
      180deg,
      rgba(38, 57, 68, 0.82) 0%,
      rgba(20, 25, 30, 0.88) 100%
    );
  box-shadow: inset 0 0 8px rgba(92, 154, 190, 0.18),
    inset 0 1px 0 rgba(196, 235, 255, 0.055),
    0 2px 4px rgba(0, 0, 0, 0.5);
}
.path-showcase-small__mode--hunter::before,
.path-showcase-small__mode--hunter::after {
  background: #a7ddff;
  box-shadow: 0 0 3px #a7ddff,
    0 0 7px rgba(92, 154, 190, 0.32);
}
.path-showcase-small__mode--blacksmith {
  color: #ffdda0;
  border: 1px solid rgba(217, 172, 108, 0.3);
  background: linear-gradient(
      180deg,
      rgba(55, 48, 39, 0.78) 0%,
      rgba(25, 24, 23, 0.82) 100%
    );
  box-shadow: inset 0 0 8px rgba(217, 172, 108, 0.15),
    inset 0 1px 0 rgba(255, 232, 186, 0.055),
    0 2px 4px rgba(0, 0, 0, 0.5);
}
.path-showcase-small__mode--blacksmith::before,
.path-showcase-small__mode--blacksmith::after {
  background: #ffdda0;
  box-shadow: 0 0 3px #ffdda0,
    0 0 7px rgba(217, 172, 108, 0.32);
}
.path-showcase-small__title {
  margin: 0;
  padding-right: 74px;
  color: #ffe8ba;
  font-family: "Cormorant SC", serif;
  font-size: 24px;
  font-weight: 800;
  font-style: italic;
  line-height: 0.95;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #000,
    0 0 10px rgba(0, 0, 0, 0.28);
  transition: color 0.2s ease,
    text-shadow 0.2s ease;
}
.path-showcase-small__title--warrior {
  color: #ffe8ba;
}
.path-showcase-small__title--hunter {
  color: #ffe8ba;
}
.path-showcase-small__title--blacksmith {
  color: #ffe8ba;
}
.path-showcase-small__current {
  width: fit-content;
  margin: 8px 0 0;
  padding: 3px 9px;
  color: rgba(255, 240, 201, 0.92);
  font-family: "Cormorant SC", serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  border: 1px solid rgba(191, 167, 122, 0.18);
  border-radius: 3px;
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.018) 0%,
      rgba(255, 216, 148, 0.034) 48%,
      rgba(255, 255, 255, 0.014) 100%
    );
  box-shadow: inset 0 1px 0 rgba(255, 232, 186, 0.035);
}
.path-showcase-small__divider {
  width: 100%;
  height: 1px;
  margin: 12px 0 13px;
  background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(143, 151, 153, 0.14) 10%,
      rgba(182, 184, 182, 0.38) 50%,
      rgba(143, 151, 153, 0.14) 90%,
      transparent 100%
    );
  box-shadow: 0 0 8px rgba(182, 184, 182, 0.05);
}
.path-showcase-small__text {
  position: relative;
  margin: 0;
  padding: 0 0 0 14px;
  color: rgba(236, 220, 183, 0.86);
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.38;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78);
}
.path-showcase-small__text::before {
  content: "“";
  position: absolute;
  left: 0;
  top: -4px;
  color: rgba(216, 189, 137, 0.24);
  font-family: "Cormorant SC", serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.72);
}
@media (max-width: 1536px) {
  .character-path-info-two-cols {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .character-path-info-two-cols::after {
    display: none;
  }
  .character-path-info-panel--quote {
    position: relative;
    padding-bottom: 18px;
  }
  .character-path-info-panel--quote::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(143, 109, 73, 0.18) 16%,
        rgba(193, 152, 102, 0.44) 50%,
        rgba(143, 109, 73, 0.18) 84%,
        transparent 100%
      );
    box-shadow: 0 0 10px rgba(193, 152, 102, 0.08);
  }
  .path-showcase-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .path-showcase-side {
    max-width: 520px;
  }
}
@media (max-width: 760px) {
  .character-path-menu-inner {
    padding: 18px 0 18px 10px;
  }
  .character-path-menu-list {
    gap: 5px;
  }
  .character-path-menu-tab {
    min-width: 146px;
    max-width: none;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 9px;
    min-height: 48px;
    padding: 8px 6px 8px 0;
  }
  .character-path-menu-tab__icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }
  .character-path-menu-tab__icon-image {
    width: 23px;
    height: 23px;
  }
  .character-path-menu-tab__text {
    font-size: 13px;
  }
  .character-path-info-title span {
    font-size: 14px;
  }
  .character-path-info-title img {
    width: 20px;
    height: 20px;
  }
  .character-path-info-quote {
    padding: 13px 14px 13px 20px;
  }
  .character-path-info-quote p {
    font-size: 12.5px;
  }
  .character-path-info-list li {
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 6px;
    padding: 5px 7px 5px 5px;
  }
  .character-path-info-list li::before {
    width: 13px;
    height: 13px;
  }
  .character-path-info-list li span {
    font-size: 12px;
  }
  .path-showcase-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .path-showcase-side {
    order: 1;
    max-width: none;
  }
  .path-showcase-detail-frame {
    order: 2;
  }
  .path-showcase-tabs {
    gap: 12px;
  }
  .path-showcase-tab {
    width: 66px;
    min-width: 66px;
  }
  .path-showcase-tab__image {
    width: 66px;
    height: 73px;
  }
  .path-showcase-small__title {
    font-size: 21px;
    padding-right: 68px;
  }
  .path-showcase-detail__stages {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px) {
  .character-path-menu-inner {
    padding-left: 0;
  }
  .character-path-menu-list {
    justify-content: center;
  }
  .character-path-menu-tab {
    min-width: calc(50% - 4px);
  }
  .character-path-menu-tab:last-child:nth-child(odd) {
    min-width: 100%;
  }
  .path-showcase-tabs {
    justify-content: center;
  }
  .path-showcase-small__text {
    padding-left: 12px;
  }
  .path-showcase-detail__text {
    font-size: 12.5px;
  }
  .path-showcase-detail__stages span {
    font-size: 12px;
    padding-left: 32px;
  }
  .path-showcase-detail__stages span::before {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }
  .character-path-actions .menu-btn-md {
    width: 210px;
    height: 56px;
  }
  .character-path-actions .menu-btn-md__label {
    font-size: 13px;
  }
}
.path-showcase-side-actions {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 29px;
  margin-top: 35px;
}
.path-showcase-side-actions .character-path-alert {
  margin: 0;
  text-align: center;
}
.path-showcase-side-actions .character-path-actions {
  margin-top: 0;
  display: flex;
  justify-content: center;
}
.path-showcase-side-actions .character-path-actions .menu-btn-md {
  width: 220px;
  max-width: 220px;
  height: 58px;
  transform: none !important;
}
.path-showcase-side-actions .character-path-actions .menu-btn-md__label {
  padding: 0 18px;
  font-size: 14px;
  line-height: 1.05;
  white-space: normal;
  text-align: center;
}
@media (max-width: 760px) {
  .path-showcase-side-actions {
    max-width: 340px;
    margin-inline: auto;
  }
  .path-showcase-side-actions .character-path-actions .menu-btn-md {
    width: 210px;
    max-width: 210px;
    height: 56px;
  }
  .path-showcase-side-actions .character-path-actions .menu-btn-md__label {
    font-size: 13px;
  }
}
.character-path-bottom-frame {
  width: 100%;
  min-width: 0;
  margin-top: 24px;
}
.character-path-bottom-actions {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 4px 0;
}
.character-path-bottom-actions .cp-bottom-action {
  margin: 0;
}
.character-path-bottom-actions .cp-bottom-action-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}
.character-path-bottom-actions .cp-bottom-action-icon {
  width: 35px;
  height: 35px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.75));
}
.character-path-bottom-actions .cp-bottom-action-text {
  min-width: 0;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .character-path-bottom-actions {
    gap: 8px;
  }
}
@media (max-width: 620px) {
  .character-path-bottom-frame {
    margin-top: 18px;
  }
  .character-path-bottom-actions {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    font-size: 13px;
  }
  .character-path-bottom-actions .cp-bottom-action-icon {
    width: 27px;
    height: 27px;
  }
}
.path-modal-card {
  width: min(360px, 100%) !important;
}
.path-modal-card .market-modal-price {
  margin-top: 11px;
}
.path-modal-actions {
  margin-top: 17px !important;
}
.path-modal-alert {
  margin-top: 14px !important;
}
.character-path-trials-block {
  --trial-card-w: 420px;
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 18px;
}
.character-path-trials-top {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.character-path-stage-tabs-v2 {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.character-path-stage-tab-v2 {
  position: relative;
  min-width: 0;
  min-height: 74px;
  padding: 5px 8px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(191, 167, 122, 0.18);
  outline: none;
  border-radius: 0;
  cursor: pointer;
  background: radial-gradient(
      circle at 50% 0%,
      rgba(255, 220, 150, 0.08),
      transparent 54%
    ),
    linear-gradient(
      180deg,
      rgba(26, 20, 14, 0.78),
      rgba(8, 7, 6, 0.88)
    );
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 224, 168, 0.035),
    inset 0 -14px 22px rgba(0, 0, 0, 0.32);
  transition: border-color 0.16s ease,
    background 0.16s ease,
    filter 0.16s ease;
}
.character-path-stage-tab-v2:hover:not(:disabled),
.character-path-stage-tab-v2.is-active {
  border-color: rgba(255, 226, 166, 0.42);
  background: radial-gradient(
      circle at 50% 0%,
      rgba(255, 220, 150, 0.13),
      transparent 56%
    ),
    linear-gradient(
      180deg,
      rgba(34, 26, 18, 0.86),
      rgba(10, 8, 6, 0.92)
    );
  filter: drop-shadow(0 0 10px rgba(218, 172, 98, 0.08));
}
.character-path-stage-tab-v2:disabled {
  cursor: default;
}
.character-path-stage-tab-v2.is-locked {
  filter: grayscale(0.3);
}
.character-path-stage-tab-v2__icon {
  --stage-icon-mask: none;
  position: relative;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  isolation: isolate;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 8px rgba(233, 201, 140, 0.12));
}
.character-path-stage-tab-v2__icon > img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.character-path-stage-tab-v2.is-active .character-path-stage-tab-v2__icon > img {
  animation: characterStageIconPulse 2.6s ease-in-out infinite;
}
@keyframes characterStageIconPulse {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.035);
    filter: brightness(1.08);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}
.character-path-stage-tab-v2__lock {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
      180deg,
      rgba(2, 4, 7, 0.74) 0%,
      rgba(2, 4, 7, 0.62) 46%,
      rgba(2, 4, 7, 0.56) 100%
    );
  -webkit-mask-image: var(--stage-icon-mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: var(--stage-icon-mask);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  pointer-events: none;
}
.character-path-stage-tab-v2__lock::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      circle at 50% 42%,
      rgba(255, 228, 172, 0.13) 0%,
      rgba(255, 228, 172, 0.06) 20%,
      transparent 48%
    );
}
.character-path-stage-tab-v2__lock-badge {
  position: relative;
  z-index: 2;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.68))
    drop-shadow(0 0 9px rgba(233, 201, 140, 0.2));
}
.character-path-stage-tab-v2__lock-bg {
  display: block;
  width: 42px;
  height: 42px;
  object-fit: contain;
  pointer-events: none;
}
.character-path-stage-tab-v2__lock-img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 25px;
  height: 25px;
  object-fit: contain;
  pointer-events: none;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 7px rgba(255, 231, 186, 0.18));
}
.character-path-stage-tab-v2__title {
  display: block;
  min-width: 0;
  color: rgb(255, 244, 212);
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-shadow: rgb(0, 0, 0) 0 1px 0,
    rgba(255, 245, 205, 0.28) 0 -1px 0,
    rgba(0, 0, 0, 0.85) 0 2px 4px,
    rgba(255, 220, 150, 0.26) 0 0 8px;
}
.character-path-stage-tab-v2.is-locked .character-path-stage-tab-v2__title {
  color: rgba(191, 167, 122, 0.56);
  text-shadow: none;
}
.character-path-stage-progress-card {
  width: min(520px, 100%);
  min-width: 0;
  margin: 0 auto;
  padding: 9px 16px 11px;
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(191, 167, 122, 0.18);
  background: radial-gradient(
      circle at 50% 0%,
      rgba(255, 220, 150, 0.065),
      transparent 58%
    ),
    linear-gradient(
      180deg,
      rgba(15, 12, 9, 0.82),
      rgba(5, 5, 4, 0.92)
    );
  box-shadow: 0 7px 16px rgba(0, 0, 0, 0.26),
    inset 0 0 0 1px rgba(255, 224, 168, 0.035),
    inset 0 -12px 20px rgba(0, 0, 0, 0.28);
}
.character-path-stage-progress-card__label {
  display: block;
  color: rgba(191, 167, 122, 0.72);
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.character-path-stage-progress-card__value {
  min-width: 52px;
  color: rgb(255, 244, 212);
  font-family: "Cormorant SC", serif;
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
  text-align: right;
  text-shadow: 0 1px 0 #000,
    0 2px 4px rgba(0, 0, 0, 0.85),
    0 0 8px rgba(255, 220, 150, 0.24);
}
.character-path-stage-progress-wrap {
  width: 100%;
  margin-top: 0;
}
.character-path-stage-progress {
  --trial-progress-w: 100%;
  --trial-progress-h: 16px;
  width: 100%;
  min-width: 160px;
}
.character-path-stage-progress .cp-rank-progress-fill {
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-position: left center !important;
}
.character-path-trials-content {
  width: 100%;
  min-width: 0;
}
.mu-trial-achievements-grid {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, var(--trial-card-w)));
  justify-content: center;
  justify-items: center;
  align-items: start;
  column-gap: 18px;
  row-gap: 20px;
  overflow: visible;
}
.mu-trial-card-slot {
  position: relative;
  width: min(100%, var(--trial-card-w));
  min-width: 0;
  display: block;
  overflow: visible;
}
.character-path-trials-pagination {
  margin-top: 15px;
}
@media (max-width: 1560px) {
  .character-path-trials-block {
    --trial-card-w: 390px;
    gap: 16px;
  }
  .character-path-stage-tabs-v2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mu-trial-achievements-grid {
    column-gap: 14px;
    row-gap: 16px;
  }
}
@media (max-width: 980px) {
  .mu-trial-achievements-grid {
    grid-template-columns: minmax(0, var(--trial-card-w));
  }
}
@media (max-width: 720px) {
  .character-path-trials-block {
    --trial-card-w: min(330px, calc(100vw - 28px));
    gap: 14px;
  }
  .character-path-trials-top {
    gap: 12px;
  }
  .character-path-stage-tabs-v2 {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .character-path-stage-tab-v2 {
    min-height: 70px;
    grid-template-columns: 62px minmax(0, 1fr);
    padding: 4px 9px;
  }
  .character-path-stage-tab-v2__icon,
  .character-path-stage-tab-v2__icon > img {
    width: 62px;
    height: 62px;
  }
  .character-path-stage-tab-v2__title {
    font-size: 12.5px;
    line-height: 1.05;
  }
  .character-path-stage-progress-card {
    width: 100%;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 7px;
    padding: 10px 14px 11px;
  }
  .character-path-stage-progress-card__label {
    text-align: center;
  }
  .character-path-stage-progress-card__value {
    text-align: center;
    font-size: 18px;
  }
  .character-path-stage-progress {
    width: min(260px, 100%);
    min-width: 0;
  }
  .mu-trial-achievements-grid {
    grid-template-columns: minmax(0, var(--trial-card-w));
    row-gap: 14px;
  }
}
@media (max-width: 420px) {
  .character-path-trials-block {
    --trial-card-w: min(310px, calc(100vw - 18px));
  }
  .character-path-stage-tab-v2 {
    grid-template-columns: 58px minmax(0, 1fr);
    min-height: 66px;
  }
  .character-path-stage-tab-v2__icon,
  .character-path-stage-tab-v2__icon > img {
    width: 58px;
    height: 58px;
  }
  .character-path-stage-tab-v2__title {
    font-size: 12px;
    letter-spacing: 0.06em;
  }
}
.hunt-season-page {
  width: 100%;
  min-width: 0;
}
.hunt-season-shell {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 0 18px 24px;
  overflow: visible;
}
.hunt-season-section {
  width: 100%;
  min-width: 0;
}
.hunt-season-loading,
.hunt-season-empty {
  margin-top: 14px;
}
.hunt-info-frame {
  width: 100%;
  min-width: 0;
  margin: 0 0 18px;
}
.hunt-info-frame--plain {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.hunt-info-card {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.hunt-info-two-cols {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.92fr);
  gap: 30px;
  width: 100%;
  min-width: 0;
}
.hunt-info-two-cols::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: calc(50% - 12px);
  width: 24px;
  pointer-events: none;
  background: url("/ui/divider_horinozntal_red.png") center / contain no-repeat;
  opacity: 0.72;
  transform: rotate(90deg);
  transform-origin: center;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.45));
}
.hunt-info-panel {
  min-width: 0;
}
.hunt-panel-title,
.hunt-info-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}
.hunt-panel-title img,
.hunt-info-title img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 6px rgba(236, 210, 124, 0.18))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.62));
}
.hunt-panel-title span,
.hunt-info-title span {
  min-width: 0;
  color: #e1c29c;
  font-family: "Cormorant SC", serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.05;
  text-transform: none;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 #000,
    0 0 8px rgba(214, 168, 91, 0.16);
}
.hunt-info-quote {
  position: relative;
  min-width: 0;
  padding: 15px 18px 15px 22px;
  border: 0;
  border-left: 2px solid rgba(216, 189, 137, 0.34);
}
.hunt-info-quote::before {
  content: "“";
  position: absolute;
  left: 7px;
  top: 3px;
  color: rgb(90 47 47);
  font-family: "Cormorant SC", serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.72);
}
.hunt-info-quote p {
  position: relative;
  z-index: 1;
  margin: 0 0 8px;
  color: rgba(236, 220, 183, 0.86);
  font-family: "Cormorant SC", serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.34;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75);
}
.hunt-info-quote p:last-child {
  margin-bottom: 0;
}
.hunt-info-list {
  min-width: 0;
  display: grid;
  gap: 7px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.hunt-info-list li {
  position: relative;
  min-height: 26px;
  min-width: 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  padding: 5px 8px 5px 6px;
  border-radius: 4px;
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.018) 0%,
      rgba(255, 216, 148, 0.032) 48%,
      rgba(255, 255, 255, 0.014) 100%
    );
  border: 1px solid rgba(191, 167, 122, 0.12);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 232, 186, 0.035);
  transition: border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}
.hunt-info-list li:hover {
  border-color: rgba(191, 167, 122, 0.2);
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.022) 0%,
      rgba(255, 216, 148, 0.045) 48%,
      rgba(255, 255, 255, 0.016) 100%
    );
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 232, 186, 0.055);
}
.hunt-info-list li::before {
  content: "";
  width: 14px;
  height: 14px;
  margin-top: 1px;
  background: url("/ui/list_ico.png") center / contain no-repeat;
  filter: drop-shadow(0 0 5px rgba(236, 210, 124, 0.16))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
  transform: translateY(0) scale(1);
  transform-origin: center;
  transition: filter 0.18s ease,
    transform 0.18s ease,
    opacity 0.18s ease,
    background-image 0.18s ease;
}
.hunt-info-list li:hover::before {
  background-image: url("/ui/list_ico_hover_red.png");
  filter: drop-shadow(0 0 7px rgba(236, 210, 124, 0.28))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.72));
  transform: translateY(-1px) scale(1.06);
}
.hunt-info-list li span {
  min-width: 0;
  color: rgba(236, 220, 183, 0.88);
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78);
  transition: color 0.18s ease,
    text-shadow 0.18s ease;
}
.hunt-info-list li:hover span {
  color: rgba(255, 238, 202, 0.94);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78),
    0 0 6px rgba(214, 168, 91, 0.12);
}
.hunt-season-block {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0 0 18px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.hunt-section-title {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  color: rgba(191, 167, 122, 0.68);
  font-family: "Cormorant SC", serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85),
    0 0 7px rgba(217, 172, 108, 0.08);
  transition: color 0.22s ease,
    text-shadow 0.22s ease;
}
.hunt-season-block:hover > .hunt-section-title {
  color: rgba(225, 194, 156, 0.88);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.88),
    0 0 8px rgba(217, 172, 108, 0.16);
}
.hunt-title-divider {
  width: min(280px, 82%);
  height: 14px;
  margin: 7px auto 9px;
  background: url("/ui/divider_horinozntal_red.png") center / contain no-repeat;
  opacity: 0.72;
  pointer-events: none;
  filter: drop-shadow(0 0 7px rgba(0, 0, 0, 0.45));
}
.hunt-muted {
  width: 100%;
  max-width: 760px;
  margin: 0 auto 14px;
  color: #b2a693;
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78);
}
.hunt-showcase-layout {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(245px, 310px);
  gap: 34px;
  align-items: start;
  margin-top: 16px;
}
.hunt-showcase-detail-frame {
  width: 100%;
  min-width: 0;
}
.hunt-showcase-detail-stack {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 360px;
}
.hunt-showcase-detail {
  grid-area: 1 / 1;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 17px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease,
    visibility 0.18s ease;
}
.hunt-showcase-detail.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.hunt-showcase-detail__section {
  position: relative;
  min-width: 0;
  padding: 0 0 15px;
}
.hunt-showcase-detail__section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 22%;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(143, 151, 153, 0.12) 10%,
      rgba(182, 184, 182, 0.34) 46%,
      rgba(143, 151, 153, 0.12) 78%,
      transparent 100%
    );
  box-shadow: 0 0 8px rgba(182, 184, 182, 0.05);
}
.hunt-showcase-detail__section:last-child {
  padding-bottom: 0;
}
.hunt-showcase-detail__section:last-child::after {
  display: none;
}
.hunt-showcase-detail__label {
  margin: 0 0 8px;
  color: rgba(191, 167, 122, 0.76);
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.82),
    0 0 7px rgba(217, 172, 108, 0.12);
}
.hunt-showcase-detail__text {
  margin: 0;
  color: rgba(236, 220, 183, 0.88);
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.46;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78);
}
.hunt-showcase-side {
  min-width: 0;
  display: grid;
  gap: 18px;
  align-content: start;
}
.hunt-showcase-tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  min-width: 0;
}
.hunt-showcase-tab {
  appearance: none;
  -webkit-appearance: none;
  width: 76px;
  min-width: 76px;
  display: grid;
  justify-items: center;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  color: inherit;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.22s ease,
    filter 0.22s ease;
}
.hunt-showcase-tab:focus,
.hunt-showcase-tab:focus-visible {
  outline: none;
}
.hunt-showcase-tab__image {
  position: relative;
  width: 76px;
  height: 84px;
  display: grid;
  place-items: center;
  overflow: visible;
  background: transparent;
  clip-path: none;
}
.hunt-showcase-tab__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  filter: brightness(0.34)
    saturate(0.64)
    contrast(1.04);
  opacity: 0.72;
  transform: none;
  transition: filter 0.22s ease,
    opacity 0.22s ease;
}
.hunt-showcase-tab:hover .hunt-showcase-tab__image img {
  filter: brightness(0.56)
    saturate(0.86)
    contrast(1.04);
  opacity: 0.9;
}
.hunt-showcase-tab.is-active .hunt-showcase-tab__image img {
  filter: brightness(1)
    saturate(1)
    contrast(1.04);
  opacity: 1;
}
.hunt-showcase-small-stack {
  display: grid;
  min-width: 0;
}
.hunt-showcase-small {
  grid-area: 1 / 1;
  position: relative;
  min-width: 0;
  padding-top: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease,
    visibility 0.18s ease;
}
.hunt-showcase-small.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.hunt-showcase-small__mode {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: fit-content;
  min-width: 42px;
  min-height: 20px;
  padding: 4px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(217, 172, 108, 0.3);
  border-radius: 3px;
  color: #ffdda0;
  font-family: "Cormorant SC", serif;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  background: linear-gradient(
      180deg,
      rgba(55, 48, 39, 0.78) 0%,
      rgba(25, 24, 23, 0.82) 100%
    );
  box-shadow: inset 0 0 8px rgba(217, 172, 108, 0.15),
    inset 0 1px 0 rgba(255, 232, 186, 0.055),
    0 2px 4px rgba(0, 0, 0, 0.5);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.86);
}
.hunt-showcase-small__title {
  margin: 0;
  padding-right: 74px;
  color: #2e121445;
  font-family: "Cormorant SC", serif;
  font-size: 25px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 2px 1px 0 #c7a979fa, 2px 1px 1px;
}
.hunt-showcase-small__divider {
  width: 100%;
  height: 1px;
  margin: 12px 0 13px;
  background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(143, 151, 153, 0.14) 10%,
      rgba(182, 184, 182, 0.38) 50%,
      rgba(143, 151, 153, 0.14) 90%,
      transparent 100%
    );
  box-shadow: 0 0 8px rgba(182, 184, 182, 0.05);
}
.hunt-showcase-small__text {
  position: relative;
  margin: 0;
  padding: 0 0 0 14px;
  color: rgba(236, 220, 183, 0.86);
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.38;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78);
}
.hunt-showcase-small__text::before {
  content: "“";
  position: absolute;
  left: 0;
  top: -4px;
  color: rgb(90 47 47);
  font-family: "Cormorant SC", serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.72);
}
.hunt-showcase-side-actions {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 18px;
  margin-top: 18px;
}
.hunt-showcase-layout {
  position: relative;
  z-index: 10;
  overflow: visible !important;
  isolation: isolate;
}
.hunt-showcase-detail-frame {
  position: relative;
  z-index: 80;
  overflow: visible !important;
}
.hunt-showcase-detail-frame *,
.hunt-showcase-detail-stack,
.hunt-showcase-detail,
.hunt-showcase-detail__section,
.hunt-showcase-detail__section--targets,
.hunt-targets-layout,
.hunt-targets-content,
.hunt-target-grid,
.hunt-target-card,
.hunt-target-card__visual {
  overflow: visible !important;
}
.hunt-showcase-side {
  position: relative;
  z-index: 20;
}
.hunt-showcase-detail-stack {
  position: relative;
  z-index: 90;
}
.hunt-showcase-detail.is-active {
  position: relative;
  z-index: 100;
}
.hunt-showcase-detail__section--targets {
  position: relative;
  z-index: 110;
  padding-bottom: 0;
}
.hunt-showcase-detail__section--targets::after {
  display: none;
}
.hunt-targets-layout {
  position: relative;
  z-index: 120;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
  margin-top: 2px;
}
.hunt-targets-content {
  position: relative;
  z-index: 130;
  width: 100%;
  min-width: 0;
}
.hunt-targets-empty {
  margin: 4px 0 0;
}
.hunt-target-category-tabs {
  position: relative;
  z-index: 140;
  min-width: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 18px;
  padding: 0 0 12px;
  margin: 0 0 10px;
  overflow: visible !important;
}
.hunt-target-category-tabs::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  width: auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(193, 152, 102, 0.34),
      transparent
    );
  box-shadow: 0 0 7px rgba(193, 152, 102, 0.08);
}
.hunt-target-category-tab {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: auto;
  min-width: 0;
  display: inline-grid;
  grid-template-columns: minmax(0, auto) auto;
  align-items: center;
  gap: 6px;
  padding: 3px 0 3px 10px;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.18s ease,
    filter 0.18s ease;
}
.hunt-target-category-tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(191, 167, 122, 0.32);
  box-shadow: 0 0 5px rgba(217, 172, 108, 0.06);
  transform: translateY(-50%);
  transition: background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}
.hunt-target-category-tab:hover::before,
.hunt-target-category-tab.is-active::before {
  background: rgba(255, 226, 166, 0.9);
  box-shadow: 0 0 7px rgba(217, 172, 108, 0.34);
  transform: translateY(-50%) scale(1.18);
}
.hunt-target-category-tab__label {
  min-width: 0;
  color: rgba(191, 167, 122, 0.72);
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.82);
  transition: color 0.18s ease,
    text-shadow 0.18s ease;
}
.hunt-target-category-tab__count {
  min-width: 16px;
  color: rgba(182, 184, 182, 0.58);
  font-family: "Cormorant SC", serif;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-align: right;
  transition: color 0.18s ease;
}
.hunt-target-category-tab:hover .hunt-target-category-tab__label,
.hunt-target-category-tab.is-active .hunt-target-category-tab__label {
  color: #ffe8ba;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9),
    0 0 8px rgba(217, 172, 108, 0.16);
}
.hunt-target-category-tab:hover .hunt-target-category-tab__count,
.hunt-target-category-tab.is-active .hunt-target-category-tab__count {
  color: rgba(255, 232, 186, 0.86);
}
.hunt-target-grid {
  --hunt-target-card-w: 90px;
  --hunt-target-gap-x: 18px;
  position: relative;
  z-index: 150;
  width: 100%;
  min-width: 0;
  display: grid !important;
  grid-template-columns: repeat(5, var(--hunt-target-card-w)) !important;
  justify-content: center;
  justify-items: center;
  align-items: start;
  gap: 22px var(--hunt-target-gap-x);
  padding: 6px 2px 24px;
  margin: 0 auto;
  overflow: visible !important;
}
.hunt-target-card {
  position: relative;
  z-index: 1;
  width: var(--hunt-target-card-w);
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 10px;
  outline: none;
  cursor: default;
  overflow: visible !important;
}
.hunt-target-card:hover,
.hunt-target-card:focus-visible {
  z-index: 999999;
}
.hunt-target-card__visual {
  position: relative;
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  overflow: visible !important;
}
.hunt-target-card__frame {
  position: relative;
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  background: url("/ui/monster_frame.png")
    center / contain
    no-repeat;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 5px rgba(216, 171, 101, 0.12));
  overflow: visible;
  isolation: isolate;
  transition: filter 0.18s ease,
    transform 0.18s ease;
}
.hunt-target-card:hover .hunt-target-card__frame,
.hunt-target-card:focus-visible .hunt-target-card__frame {
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.62))
    drop-shadow(0 0 8px rgba(217, 172, 108, 0.18));
}
.hunt-target-card__monster {
  position: relative;
  z-index: 2;
  max-width: 50px;
  max-height: 50px;
  object-fit: contain;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.78))
    drop-shadow(0 0 4px rgba(255, 230, 170, 0.12));
  user-select: none;
  pointer-events: none;
}
.hunt-target-card__points {
  position: absolute;
  left: 50%;
  bottom: -6px;
  z-index: 4;
  width: 31px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff1cf;
  font-family: "Cormorant SC", serif;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  background: url("/ui/check_box.png")
    center / contain
    no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 5px rgba(217, 172, 108, 0.12));
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.88);
  transform: translateX(-50%);
}
.hunt-target-card__points--bonus {
  color: #fff6d6;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 7px rgba(255, 216, 148, 0.26));
}
.hunt-target-card__name {
  width: 100%;
  min-height: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: rgba(236, 220, 183, 0.84);
  font-family: "Cormorant SC", serif;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  letter-spacing: 0.035em;
  overflow-wrap: anywhere;
  word-break: normal;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9),
    0 0 6px rgba(0, 0, 0, 0.28);
}
.hunt-target-tooltip {
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  bottom: auto;
  z-index: 999999;
  width: 200px;
  max-width: min(278px, calc(100vw - 36px));
  min-height: 78px;
  min-width: 0;
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 8px;
  color: #f0dfbf;
  background: linear-gradient(rgb(45 27 27) 0%, rgb(13 10 9 / 98%) 100%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(224, 191, 121, 0.95),
    inset 0 0 0 3px rgba(8, 10, 12, 0.98),
    inset 0 0 0 4px rgba(224, 191, 121, 0.28),
    inset 0 0 14px rgba(255, 210, 140, 0.03);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 0.12s ease,
    transform 0.12s ease,
    visibility 0s linear 0.12s;
  will-change: opacity, transform;
  backface-visibility: hidden;
}
.hunt-target-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -11px;
  bottom: auto;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #512020 0%, #1c1a17 100%);
  box-shadow: inset 1px 1px 0 rgba(224, 191, 121, 0.88),
    inset 3px 3px 0 rgba(8, 10, 12, 0.98);
  transform: translateX(-50%)
    rotate(45deg);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.hunt-target-card:hover .hunt-target-tooltip,
.hunt-target-card:focus-visible .hunt-target-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.12s ease,
    transform 0.12s ease,
    visibility 0s linear 0s;
}
.hunt-target-tooltip__points {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #f5e8d0;
  font-family: "Cormorant SC", serif;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  background: radial-gradient(
      circle at 50% 42%,
      rgba(23, 39, 43, 0.96) 0%,
      rgba(6, 18, 24, 0.98) 62%,
      rgba(1, 8, 12, 1) 100%
    );
  border: 2px solid rgba(27, 107, 123, 0.52);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.55),
    0 0 10px rgba(0, 70, 92, 0.22);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.95);
}
.hunt-target-tooltip__points--bonus {
  border-color: rgba(224, 191, 121, 0.72);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.55),
    0 0 12px rgba(224, 191, 121, 0.24);
}
.hunt-target-tooltip__body {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.hunt-target-tooltip__name {
  min-width: 0;
  color: #f0dfbf;
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: normal;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9),
    0 0 6px rgba(224, 176, 121, 0.14);
}
.hunt-target-tooltip__divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(
      90deg,
      rgba(224, 191, 121, 0.85),
      rgba(224, 191, 121, 0.12),
      transparent
    );
  box-shadow: 0 0 8px rgba(224, 191, 121, 0.12);
}
.hunt-target-tooltip__row {
  min-width: 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  color: rgba(240, 223, 191, 0.88);
  font-family: "Cormorant SC", serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.18;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
}
.hunt-target-tooltip__row img {
  width: 17px;
  height: 17px;
  object-fit: contain;
  flex: 0 0 auto;
  margin-top: -1px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.78));
}
.hunt-target-tooltip__row span {
  min-width: 0;
  max-width: 100%;
  display: block;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}
.hunt-target-tooltip__bonus {
  width: fit-content;
  max-width: 100%;
  display: inline-grid;
  gap: 2px;
  margin-top: 1px;
  padding: 4px 9px;
  color: #ffe8ba;
  font-family: "Cormorant SC", serif;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid rgba(224, 191, 121, 0.28);
  border-radius: 3px;
  background: linear-gradient(
      90deg,
      rgba(90, 47, 47, 0.58) 0%,
      rgba(62, 40, 40, 0.5) 50%,
      rgba(49, 29, 29, 0.6) 100%
    );
  box-shadow: inset 0 1px 0 rgba(255, 232, 186, 0.045);
  overflow-wrap: anywhere;
}
.hunt-target-tooltip__bonus em {
  color: rgba(236, 220, 183, 0.68);
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  overflow-wrap: anywhere;
}
@media (max-width: 980px) {
  .hunt-target-grid {
    grid-template-columns: repeat(4, var(--hunt-target-card-w)) !important;
  }
}
@media (max-width: 760px) {
  .hunt-target-grid {
    --hunt-target-card-w: 83px;
    --hunt-target-gap-x: 25px;
    grid-template-columns: repeat(4, var(--hunt-target-card-w)) !important;
    gap: 16px var(--hunt-target-gap-x);
  }
  .hunt-target-card {
    width: var(--hunt-target-card-w);
  }
  .hunt-target-card__visual,
  .hunt-target-card__frame {
    width: 82px;
    height: 82px;
  }
  .hunt-target-card__monster {
    max-width: 55px;
    max-height: 55px;
  }
  .hunt-target-tooltip {
    width: min(270px, calc(100vw - 34px));
  }
}
@media (max-width: 520px) {
  .hunt-target-grid {
    grid-template-columns: repeat(3, var(--hunt-target-card-w)) !important;
  }
}
@media (max-width: 420px) {
  .hunt-target-grid {
    grid-template-columns: repeat(2, var(--hunt-target-card-w)) !important;
  }
  .hunt-target-tooltip {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
    padding: 12px 13px;
  }
  .hunt-target-tooltip__points {
    width: 46px;
    height: 46px;
    font-size: 21px;
  }
}
.hunt-registration-panel {
  position: relative;
  width: 100%;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 2px 0 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.hunt-registration-panel__window {
  position: relative;
  width: fit-content;
  max-width: 100%;
  padding: 4px 0 6px;
  color: rgba(255, 232, 186, 0.92);
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.88),
    0 0 8px rgba(217, 172, 108, 0.16);
}
.hunt-registration-panel__window::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(217, 172, 108, 0.7),
      transparent
    );
  box-shadow: 0 0 8px rgba(217, 172, 108, 0.18);
}
.hunt-registration-panel__window strong {
  color: #fff4cf;
  font-weight: 900;
  text-shadow: 0 1px 0 #000,
    0 0 9px rgba(236, 210, 124, 0.22);
}
.hunt-registration-panel__title {
  color: #ffe8ba;
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 0 #000,
    0 0 7px rgba(217, 172, 108, 0.14);
}
.hunt-registration-panel__text {
  max-width: 260px;
  color: rgba(236, 220, 183, 0.76);
  font-family: "Cormorant SC", serif;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.28;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78);
}
.hunt-registration-button {
  width: 220px;
  height: 58px;
  margin: 7px auto 0;
  transform: none !important;
}
.hunt-registration-button .menu-btn-md__label {
  padding: 0 18px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.05;
  white-space: normal;
  text-align: center;
}
.hunt-registration-panel--registered .hunt-registration-panel__title {
  color: #dff7c9;
}
.hunt-registration-panel--closed .hunt-registration-panel__window {
  color: rgba(214, 181, 120, 0.72);
}
.hunt-showcase-detail__accent {
  width: fit-content;
  margin-top: 10px;
  padding: 4px 12px;
  color: #ebd6abbd;
  font-family: "Cormorant SC", serif;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid rgb(75 41 41 / 22%);
  background: linear-gradient(90deg, rgb(90 47 47 / 60%) 0%, rgb(62 40 40 / 52%) 50%, rgb(49 29 29 / 63%) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 232, 186, 0.045);
  text-shadow: 0 1px 0 #000, 0 0 8px rgb(0 0 0);
}
.hunt-guide-table {
  min-width: 0;
  display: grid;
  gap: 0;
  margin-top: 2px;
}
.hunt-guide-row {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(96px, 0.34fr) minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 8px 8px;
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
}
.hunt-guide-row::before {
  content: "";
  position: absolute;
  left: 0;
  right: 14%;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(143, 151, 153, 0.1) 8%,
      rgba(182, 184, 182, 0.3) 42%,
      rgba(143, 151, 153, 0.1) 76%,
      transparent 100%
    );
  box-shadow: 0 0 7px rgba(182, 184, 182, 0.04);
}
.hunt-guide-row:first-child::before {
  display: none;
}
.hunt-guide-table--rewards .hunt-guide-row {
  grid-template-columns: 28px
    minmax(94px, 0.26fr)
    minmax(0, 1fr)
    minmax(210px, 0.46fr);
}
.hunt-guide-row__icon {
  position: relative;
  width: 24px;
  height: 24px;
  min-width: 24px;
  flex: 0 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  line-height: 0;
  transform: none !important;
}
.hunt-guide-row__icon::before {
  content: "";
  width: 22px;
  height: 22px;
  display: block;
  flex: 0 0 22px;
  background-image: url("/ui/check_box.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.72));
  transition: filter 0.18s ease,
    opacity 0.18s ease;
}
.hunt-guide-row__icon img {
  display: none !important;
}
.hunt-guide-row:hover .hunt-guide-row__icon::before {
  filter: drop-shadow(0 0 5px rgba(217, 172, 108, 0.2))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.78));
}
.hunt-guide-row__title {
  color: #e1c29c;
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.025em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.82);
}
.hunt-guide-row__text {
  color: rgba(182, 184, 182, 0.88);
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.22;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78);
}
.hunt-guide-row__reward {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
  color: #ffe8ba;
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.05;
  text-align: right;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-shadow: 0 1px 0 #000,
    0 0 8px rgba(217, 172, 108, 0.14);
}
.hunt-guide-row__reward-part {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.hunt-guide-row__reward-part img {
  width: 15px;
  height: 15px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.78))
    drop-shadow(0 0 5px rgba(236, 210, 124, 0.12));
}
.hunt-guide-row__reward-part span {
  min-width: 0;
  white-space: nowrap;
}
.hunt-guide-row__reward-part em {
  margin-left: 1px;
  color: rgba(236, 220, 183, 0.72);
  font-style: normal;
  font-weight: 900;
  flex: 0 0 auto;
}
.hunt-guide-row__reward--empty {
  opacity: 0.32;
}
.hunt-guide-row--warn .hunt-guide-row__title {
  color: #f4e2bd;
}
@media (max-width: 760px) {
  .hunt-guide-row__reward {
    justify-content: flex-start;
    flex-wrap: wrap;
    text-align: left;
    white-space: normal;
  }
  .hunt-guide-row__reward-part,
  .hunt-guide-row__reward-part span {
    white-space: nowrap;
  }
}
.hunt-monsters-layout {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(180px, 230px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin-top: 18px;
}
.hunt-monster-tabs {
  width: 100%;
  min-width: 0;
}
.hunt-monster-tabs__title {
  margin: 0 0 13px 26px;
  color: #ffe8ba;
  font-family: "Cormorant SC", serif;
  font-size: 21px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #000,
    0 0 8px rgba(217, 172, 108, 0.14);
}
.hunt-monster-tabs__list {
  display: grid;
  gap: 14px;
}
.hunt-monster-tab {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
  border: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s ease,
    filter 0.18s ease,
    opacity 0.18s ease;
}
.hunt-monster-tab:focus,
.hunt-monster-tab:focus-visible {
  outline: none;
}
.hunt-monster-tab:hover,
.hunt-monster-tab.is-active {
  transform: translateX(3px);
}
.hunt-monster-tab__mark {
  position: relative;
  width: 38px;
  height: 38px;
  display: block;
  background: url("/ui/check_box.png") center / contain no-repeat;
  filter: brightness(0.72)
    saturate(0.9)
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.72));
}
.hunt-monster-tab.is-active .hunt-monster-tab__mark,
.hunt-monster-tab:hover .hunt-monster-tab__mark {
  filter: brightness(1.08)
    saturate(1.12)
    drop-shadow(0 0 8px rgba(236, 210, 124, 0.22))
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.72));
}
.hunt-monster-tab__label {
  color: rgba(236, 220, 183, 0.82);
  font-family: "Cormorant SC", serif;
  font-size: 25px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.82);
  transition: color 0.18s ease,
    text-shadow 0.18s ease;
}
.hunt-monster-tab.is-active .hunt-monster-tab__label,
.hunt-monster-tab:hover .hunt-monster-tab__label {
  color: #fff4cf;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.88),
    0 0 10px rgba(236, 210, 124, 0.24);
}
.hunt-monster-tab__count {
  min-width: 26px;
  color: rgba(191, 167, 122, 0.58);
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  text-align: right;
}
.hunt-monsters-content {
  width: 100%;
  min-width: 0;
}
.hunt-monster-grid {
  --hunt-monster-card-w: 250px;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, var(--hunt-monster-card-w)));
  justify-content: center;
  justify-items: center;
  align-items: start;
  gap: 16px;
}
.hunt-monster-card {
  position: relative;
  width: min(100%, var(--hunt-monster-card-w));
  min-height: 232px;
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  padding: 14px 13px 13px;
  border: 1px solid rgba(191, 167, 122, 0.16);
  background: radial-gradient(
      circle at 50% 0%,
      rgba(255, 220, 150, 0.09),
      transparent 58%
    ),
    linear-gradient(
      180deg,
      rgba(18, 14, 10, 0.78),
      rgba(5, 5, 4, 0.92)
    );
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 224, 168, 0.035),
    inset 0 -14px 22px rgba(0, 0, 0, 0.32);
  overflow: visible;
  transition: border-color 0.18s ease,
    filter 0.18s ease;
}
.hunt-monster-card:hover {
  border-color: rgba(255, 226, 166, 0.36);
  filter: drop-shadow(0 0 10px rgba(218, 172, 98, 0.08));
}
.hunt-monster-card__image-frame {
  position: relative;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("/ui/cards/card_image_frame_trial.png")
    center / 100% 100%
    no-repeat;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 5px rgba(216, 171, 101, 0.16));
  overflow: hidden;
  isolation: isolate;
}
.hunt-monster-card__image-frame img {
  position: relative;
  z-index: 2;
  max-width: 60px;
  max-height: 60px;
  object-fit: contain;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.78))
    drop-shadow(0 0 4px rgba(255, 230, 170, 0.12));
  user-select: none;
  pointer-events: none;
}
.hunt-monster-card__body {
  width: 100%;
  min-width: 0;
  display: grid;
  justify-items: center;
  margin-top: 8px;
}
.hunt-monster-card__category {
  width: fit-content;
  margin-bottom: 5px;
  padding: 3px 9px;
  color: rgba(255, 240, 201, 0.88);
  font-family: "Cormorant SC", serif;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border: 1px solid rgba(191, 167, 122, 0.16);
  border-radius: 3px;
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.018) 0%,
      rgba(255, 216, 148, 0.034) 48%,
      rgba(255, 255, 255, 0.014) 100%
    );
}
.hunt-monster-card__title {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a47f51;
  font-family: "Cormorant SC", serif;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.06;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.95),
    0 0 8px rgba(164, 127, 81, 0.55);
}
.hunt-monster-card__divider {
  width: 136px;
  height: 11px;
  margin: 6px auto 7px;
  background: url("/ui/cards/card_devider_down.png")
    center / 100% 100%
    no-repeat;
  pointer-events: none;
  opacity: 0.9;
}
.hunt-monster-card__stats {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.hunt-monster-card__stat {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 7px 6px;
  border: 1px solid rgba(191, 167, 122, 0.12);
  background: linear-gradient(
      180deg,
      rgba(255, 216, 148, 0.035),
      rgba(0, 0, 0, 0.12)
    );
}
.hunt-monster-card__stat span {
  color: rgba(182, 184, 182, 0.82);
  font-family: "Cormorant SC", serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hunt-monster-card__stat strong {
  color: #ffe8ba;
  font-family: "Cormorant SC", serif;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 0 #000,
    0 0 7px rgba(217, 172, 108, 0.14);
}
.hunt-monster-pagination {
  margin-top: 17px;
}
@media (max-width: 1536px) {
  .hunt-info-two-cols {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .hunt-info-two-cols::after {
    display: none;
  }
  .hunt-info-panel--quote {
    position: relative;
    padding-bottom: 18px;
  }
  .hunt-info-panel--quote::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(143, 109, 73, 0.18) 16%,
        rgba(193, 152, 102, 0.44) 50%,
        rgba(143, 109, 73, 0.18) 84%,
        transparent 100%
      );
    box-shadow: 0 0 10px rgba(193, 152, 102, 0.08);
  }
  .hunt-showcase-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hunt-showcase-side {
    max-width: 520px;
  }
  .hunt-monster-grid {
    grid-template-columns: repeat(3, minmax(0, var(--hunt-monster-card-w)));
  }
}
@media (max-width: 1160px) {
  .hunt-monsters-layout {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .hunt-monster-tabs__title {
    margin-left: 0;
    text-align: center;
  }
  .hunt-monster-tabs__list {
    width: min(420px, 100%);
    margin-inline: auto;
  }
  .hunt-monster-grid {
    --hunt-monster-card-w: 236px;
    grid-template-columns: repeat(2, minmax(0, var(--hunt-monster-card-w)));
  }
}
@media (max-width: 760px) {
  .hunt-season-shell {
    padding-inline: 12px;
  }
  .hunt-season-menu-inner {
    padding: 18px 0 18px 10px;
  }
  .hunt-season-menu-list {
    gap: 5px;
  }
  .hunt-season-menu-tab {
    min-width: 146px;
    max-width: none;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 9px;
    min-height: 48px;
    padding: 8px 6px 8px 0;
  }
  .hunt-season-menu-tab__icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }
  .hunt-season-menu-tab__icon-image {
    width: 23px;
    height: 23px;
  }
  .hunt-season-menu-tab__text {
    font-size: 13px;
  }
  .hunt-info-title span,
  .hunt-panel-title span {
    font-size: 14px;
  }
  .hunt-info-title img,
  .hunt-panel-title img {
    width: 20px;
    height: 20px;
  }
  .hunt-info-quote {
    padding: 13px 14px 13px 20px;
  }
  .hunt-info-quote p {
    font-size: 12.5px;
  }
  .hunt-info-list li {
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 6px;
    padding: 5px 7px 5px 5px;
  }
  .hunt-info-list li::before {
    width: 13px;
    height: 13px;
  }
  .hunt-info-list li span {
    font-size: 12px;
  }
  .hunt-showcase-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .hunt-showcase-side {
    order: 1;
    max-width: none;
  }
  .hunt-showcase-detail-frame {
    order: 2;
  }
  .hunt-showcase-tabs {
    gap: 12px;
  }
  .hunt-showcase-tab {
    width: 66px;
    min-width: 66px;
  }
  .hunt-showcase-tab__image {
    width: 66px;
    height: 73px;
  }
  .hunt-showcase-small__title {
    font-size: 21px;
    padding-right: 68px;
  }
  .hunt-showcase-detail-stack {
    min-height: 0;
  }
  .hunt-guide-row,
  .hunt-guide-table--rewards .hunt-guide-row {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 7px;
  }
  .hunt-guide-row__text,
  .hunt-guide-row__reward {
    grid-column: 2 / 3;
    text-align: left;
  }
  .hunt-guide-row__title {
    font-size: 14px;
  }
  .hunt-guide-row__text,
  .hunt-guide-row__reward {
    font-size: 12.5px;
  }
  .hunt-monster-tab {
    grid-template-columns: 36px minmax(0, 1fr) auto;
  }
  .hunt-monster-tab__mark {
    width: 32px;
    height: 32px;
  }
  .hunt-monster-tab__label {
    font-size: 20px;
  }
  .hunt-monster-grid {
    --hunt-monster-card-w: min(260px, calc(100vw - 38px));
    grid-template-columns: minmax(0, var(--hunt-monster-card-w));
  }
}
@media (max-width: 520px) {
  .hunt-season-menu-inner {
    padding-left: 0;
  }
  .hunt-season-menu-list {
    justify-content: center;
  }
  .hunt-season-menu-tab {
    min-width: calc(50% - 4px);
  }
  .hunt-season-menu-tab:last-child:nth-child(odd) {
    min-width: 100%;
  }
  .hunt-showcase-tabs {
    justify-content: center;
  }
  .hunt-showcase-small__text {
    padding-left: 12px;
  }
  .hunt-showcase-detail__text {
    font-size: 12.5px;
  }
  .hunt-registration-button {
    width: 210px;
    height: 56px;
  }
  .hunt-registration-button .menu-btn-md__label {
    font-size: 13px;
  }
  .hunt-monster-tabs__title {
    font-size: 19px;
  }
  .hunt-monster-tab__label {
    font-size: 18px;
  }
}
.hunt-bonus-month {
  width: 100%;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 8px 0 20px;
}
.hunt-bonus-month__trigger {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 140px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: url("/ui/bonus_panel_red.png")
    center / 100% 100%
    no-repeat;
  box-shadow: none;
  cursor: pointer;
  transition: transform 0.18s ease,
    filter 0.18s ease,
    opacity 0.18s ease;
}
.hunt-bonus-month__trigger:focus,
.hunt-bonus-month__trigger:focus-visible {
  outline: none;
}
.hunt-bonus-month__trigger:hover,
.hunt-bonus-month__trigger.is-open {
  transform: translateY(-1px);
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.38))
    drop-shadow(0 0 10px rgba(132, 35, 35, 0.16));
}
.hunt-bonus-month__trigger-label {
  font-family: "Cormorant SC", serif;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.065em;
  text-transform: uppercase;
  color: #d6b36e;
  background-image: linear-gradient(
      180deg,
      #fff7c8 0%,
      #f1d88f 13%,
      #c79d55 31%,
      #8f6835 47%,
      #f4d37f 58%,
      #b88645 73%,
      #5f3f22 100%
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,0.18) 0%,
      rgba(120,80,38,0.12) 18%,
      rgba(255,238,174,0.22) 32%,
      rgba(74,45,21,0.18) 54%,
      rgba(246,214,132,0.18) 72%,
      rgba(82,51,25,0.16) 100%
    );
  background-size: 100% 100%, 42px 100%;
  background-blend-mode: normal, overlay;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.45px rgba(58, 37, 19, 0.95);
  text-shadow: 0 -1px 0 rgba(255, 242, 181, 0.75),
    0 1px 0 rgba(65, 39, 18, 0.95),
    1px 1px 0 rgba(34, 21, 11, 0.8),
    -1px 0 0 rgba(255, 229, 154, 0.32),
    0 0 4px rgba(239, 195, 98, 0.35);
  filter: drop-shadow(0 1px 1px rgba(20, 12, 6, 0.75))
    drop-shadow(0 0 3px rgba(213, 164, 79, 0.35));
  transform: translateY(-2px);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.hunt-bonus-month__text-wrap {
  width: min(780px, 100%);
  min-width: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(-10px) scale(0.975);
  transform-origin: center top;
  filter: blur(2px);
  transition: max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.22s ease,
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.28s ease;
}
.hunt-bonus-month__text-wrap.is-open {
  max-height: 220px;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  filter: blur(0);
  animation: huntBonusRevealPulse 0.72s ease-out both;
}
.hunt-bonus-month__text {
  position: relative;
  min-height: 46px;
  box-sizing: border-box;
  padding: 10px 18px 10px 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ecdcb7;
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.34;
  text-align: center;
  border: 1px solid rgba(155, 82, 74, 0.72);
  border-radius: 12px;
  background: radial-gradient(
      circle at 50% 0%,
      rgba(160, 82, 76, 0.28),
      transparent 58%
    ),
    linear-gradient(
      180deg,
      rgba(90, 47, 47, 0.96) 0%,
      rgba(53, 31, 28, 0.98) 52%,
      rgba(24, 15, 13, 0.98) 100%
    );
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(190, 120, 105, 0.72),
    inset 0 0 0 3px rgba(8, 10, 12, 0.98),
    inset 0 0 0 4px rgba(90, 47, 47, 0.35),
    inset 0 0 16px rgba(160, 70, 70, 0.08);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 8px rgba(255, 220, 170, 0.12);
}
.hunt-bonus-month__text::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  background-image: url("/icons/check.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.92;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85))
    drop-shadow(0 0 6px rgba(180, 95, 85, 0.22));
  pointer-events: none;
}
.hunt-bonus-month__text::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 0;
  height: 1px;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(120, 58, 54, 0.55),
      rgba(236, 201, 137, 0.32),
      rgba(120, 58, 54, 0.55),
      transparent
    );
  box-shadow: 0 0 10px rgba(90, 47, 47, 0.28);
  pointer-events: none;
}
.hunt-bonus-month__text strong {
  color: #fff1cf;
  font-weight: 900;
  text-shadow: 0 1px 0 #000,
    0 0 8px rgba(217, 172, 108, 0.16);
}
@keyframes huntBonusRevealPulse {
  0% {
    opacity: 0;
    transform: translateY(-12px) scale(0.97);
  }
  52% {
    opacity: 1;
    transform: translateY(2px) scale(1.008);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (max-width: 620px) {
  .hunt-bonus-month__trigger {
    width: 170px;
    height: 52px;
  }
  .hunt-bonus-month__trigger-label {
    font-size: 13px;
    transform: translateY(4px);
  }
  .hunt-bonus-month__text {
    padding: 12px 14px;
    font-size: 12.5px;
    line-height: 1.3;
  }
}
@media (max-width: 768px) {
  .hunt-bonus-month__text-wrap.is-open {
    max-height: 260px;
  }
  .hunt-bonus-month__text {
    min-height: 42px;
    padding: 10px 14px 10px 46px;
    font-size: 13px;
    line-height: 1.3;
  }
  .hunt-bonus-month__text::before {
    left: 12px;
    width: 22px;
    height: 22px;
  }
}
.hunt-summary-block {
  width: 100%;
  min-width: 0;
}
.hunt-summary-layout-v2 {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 18px;
  margin-top: 18px;
}
.hunt-summary-hero-frame {
  width: 100%;
  min-width: 0;
}
.hunt-summary-hero {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 300px);
  gap: 24px;
  align-items: stretch;
}
.hunt-summary-hero__main {
  min-width: 0;
  display: grid;
  align-content: start;
}
.hunt-summary-hero__eyebrow {
  color: rgba(191, 167, 122, 0.72);
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.86),
    0 0 8px rgba(217, 172, 108, 0.1);
}
.hunt-summary-hero__season {
  margin-top: 6px;
  color: #ffe8ba;
  font-family: "Cormorant SC", serif;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #000,
    0 0 11px rgba(217, 172, 108, 0.2);
}
.hunt-summary-hero__text {
  max-width: 680px;
  margin-top: 10px;
  color: rgba(236, 220, 183, 0.84);
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.42;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78);
}
.hunt-summary-progress-card {
  width: min(620px, 100%);
  min-width: 0;
  margin-top: 18px;
  padding: 12px 16px 13px;
}
.hunt-summary-progress-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.hunt-summary-progress-card__top span {
  color: rgba(191, 167, 122, 0.74);
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hunt-summary-progress-card__top strong {
  color: #fff4cf;
  font-family: "Cormorant SC", serif;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 0 #000,
    0 0 8px rgba(217, 172, 108, 0.2);
}
.hunt-summary-progress {
  --progress: 0;
  width: 100%;
  height: 16px;
  position: relative;
  margin: 0;
  background: url("/ui/progress_bar.png")
    center / 100% 100%
    no-repeat;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}
.hunt-summary-progress__fill {
  position: absolute;
  left: 6px;
  top: 5px;
  height: 5px;
  width: calc((100% - 12px) * var(--progress));
  background-image: url("/ui/progress_line.png");
  background-repeat: repeat-x;
  background-position: left center;
  background-size: 100%;
}
.hunt-summary-progress__marker {
  position: absolute;
  left: calc(6px + ((100% - 12px) * var(--progress)));
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: 3;
  background: radial-gradient(
      circle at 35% 28%,
      #fff2bd 0 12%,
      #d8a75f 30%,
      #6f4c2d 72%,
      #24170d 100%
    );
  border: 1px solid rgba(255, 235, 176, 0.95);
  box-shadow: 0 0 0 1px rgba(37, 22, 10, 0.9),
    0 0 8px rgba(222, 178, 100, 0.5);
}
.hunt-summary-progress-card__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 7px;
  color: rgba(236, 220, 183, 0.78);
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}
.hunt-summary-progress-card__bottom span:first-child {
  color: #ffe8ba;
  text-shadow: 0 1px 0 #000,
    0 0 7px rgba(217, 172, 108, 0.16);
}
.hunt-summary-progress-card__bottom em {
  color: rgba(236, 220, 183, 0.48);
  font-style: normal;
}
.hunt-summary-status {
  position: relative;
  min-width: 0;
  padding: 16px 8px 15px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
}
.hunt-summary-status::before {
  display: none !important;
}
.hunt-summary-status__claim {
  display: none !important;
}
.hunt-summary-status__place-mark {
  width: 42px;
  height: 42px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff4cf;
  font-family: "Cormorant SC", serif;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  background: url("/ui/check_box.png")
    center / contain
    no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.78))
    drop-shadow(0 0 7px rgba(217, 172, 108, 0.18));
  text-shadow: 0 1px 0 #000,
    0 0 6px rgba(217, 172, 108, 0.18);
}
.hunt-summary-status--success .hunt-summary-status__place-mark {
  filter: drop-shadow(0 0 7px rgba(110, 224, 136, 0.2))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.78));
}
.hunt-summary-status__label {
  color: rgba(191, 167, 122, 0.62);
  font-family: "Cormorant SC", serif;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.86);
}
.hunt-summary-status__state-row {
  width: 100%;
  max-width: 260px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  margin-top: 2px;
}
.hunt-summary-status__state-label {
  flex: 0 0 auto;
  color: rgba(191, 167, 122, 0.62);
  font-family: "Cormorant SC", serif;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.86);
}
.hunt-summary-status__title {
  min-width: 0;
  color: #ffe8ba;
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  text-shadow: 0 1px 0 #000,
    0 0 8px rgba(217, 172, 108, 0.15);
}
.hunt-summary-status__text {
  width: 100%;
  max-width: 250px;
  color: rgba(236, 220, 183, 0.76);
  font-family: "Cormorant SC", serif;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78);
}
.hunt-summary-status__reward {
  width: 100%;
  max-width: 260px;
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-top: 2px;
}
.hunt-summary-status__reward-place {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: rgba(236, 220, 183, 0.72);
  font-family: "Cormorant SC", serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78);
}
.hunt-summary-status__reward-place strong {
  color: #fff1c9;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.hunt-summary-status__reward-line {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: rgba(236, 220, 183, 0.76);
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78);
}
.hunt-summary-status__reward-label {
  display: block;
  width: 100%;
  color: rgba(236, 220, 183, 0.72);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}
.hunt-summary-status__reward-values {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
}
.hunt-summary-status__reward-values strong {
  color: #fff1c9;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 0 #000,
    0 0 8px rgba(217, 172, 108, 0.18);
}
.hunt-summary-status__reward-values em {
  color: rgba(236, 220, 183, 0.62);
  font-style: normal;
  font-weight: 900;
}
.hunt-summary-status__reward-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.hunt-summary-status__reward-box img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.85))
    drop-shadow(0 0 6px rgba(255, 202, 122, 0.18));
}
.hunt-summary-status__reward-choice {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 6px;
}
.hunt-summary-status__reward-choice-label {
  text-align: center;
}
.hunt-summary-status__reward-methods {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.hunt-summary-status__reward-method {
  flex: 0 0 auto;
  min-width: 0;
}
.hunt-summary-status__reward-method-text {
  white-space: nowrap;
}
.hunt-summary-status__claim-button.menu-btn-long {
  --hunt-claim-btn-w: 210px;
  --hunt-claim-btn-h: 42px;
  width: var(--hunt-claim-btn-w) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: var(--hunt-claim-btn-h) !important;
  margin-top: 0 !important;
  transform: none !important;
}
.hunt-summary-status__claim-button .menu-btn-long__label {
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-align: center;
  text-transform: uppercase;
}
.hunt-summary-status__claim-button:disabled {
  cursor: default;
  pointer-events: none;
  opacity: 0.58;
  filter: grayscale(0.25)
    brightness(0.82);
}
.hunt-summary-status--success {
  border-color: rgba(155, 230, 166, 0.22);
}
.hunt-summary-status--warning {
  border-color: rgba(214, 181, 120, 0.22);
}
.hunt-summary-status--danger {
  border-color: rgba(210, 100, 80, 0.22);
}
.hunt-summary-status__label {
  position: relative;
  width: 100%;
  max-width: 260px;
  padding-bottom: 9px;
  margin-bottom: 1px;
  text-align: center;
}
.hunt-summary-status__label::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(217, 172, 108, 0.7),
      transparent
    );
  box-shadow: 0 0 8px rgba(217, 172, 108, 0.18);
}
.hunt-summary-status__text {
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 1px;
}
.hunt-summary-status__text::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(217, 172, 108, 0.7),
      transparent
    );
  box-shadow: 0 0 8px rgba(217, 172, 108, 0.18);
}
@media (max-width: 900px) {
  .hunt-summary-hero {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .hunt-summary-status {
    min-height: 210px;
  }
}
@media (max-width: 560px) {
  .hunt-summary-hero__season {
    font-size: 23px;
  }
  .hunt-summary-progress-card {
    padding-left: 4px;
    padding-right: 4px;
  }
  .hunt-summary-status {
    padding-left: 4px;
    padding-right: 4px;
  }
  .hunt-summary-status__state-row {
    flex-wrap: wrap;
    gap: 5px;
  }
  .hunt-summary-status__title {
    font-size: 13px;
  }
  .hunt-summary-status__claim-button.menu-btn-long {
    --hunt-claim-btn-w: 190px;
    --hunt-claim-btn-h: 40px;
  }
  .hunt-summary-status__claim-button .menu-btn-long__label {
    font-size: 10px;
  }
}
.hunt-summary-metrics {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.hunt-summary-metric {
  position: relative;
  min-width: 0;
  min-height: 82px;
  padding: 6px 6px 6px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  border: 1px solid rgba(191, 167, 122, 0.14);
  background: radial-gradient(circle at 50% 0%, rgb(255 150 150 / 6%), transparent 60%), linear-gradient(180deg, rgb(15 9 9 / 73%), rgb(5 4 4 / 83%));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24),
    inset 0 0 0 1px rgba(255, 224, 168, 0.028),
    inset 0 -14px 22px rgba(0, 0, 0, 0.28);
}
.hunt-summary-metric__icon {
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.78))
    drop-shadow(0 0 6px rgba(217, 172, 108, 0.14));
}
.hunt-summary-metric__icon--kills {
  background-image: url("/icons/kill_monster.png");
}
.hunt-summary-metric__icon--score {
  background-image: url("/icons/stats.png");
}
.hunt-summary-metric__icon--target {
  background-image: url("/icons/check1.png");
}
.hunt-summary-metric__icon--best {
  background-image: url("/icons/check1.png");
}
.hunt-summary-metric__label {
  color: rgba(191, 167, 122, 0.68);
  font-family: "Cormorant SC", serif;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.hunt-summary-metric__value {
  color: #ffe8ba;
  font-family: "Cormorant SC", serif;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 0 #000,
    0 0 8px rgba(217, 172, 108, 0.16);
}
.hunt-summary-metric__value--small {
  max-width: 100%;
  font-size: 13px;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hunt-summary-metric__sub {
  display: none !important;
}
.hunt-summary-category-board {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 0 0 18px;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.hunt-summary-category-board__top {
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0 0 16px;
  padding: 0;
  background: radial-gradient(circle at 50% 0%, rgb(255 150 150 / 6%), transparent 60%), linear-gradient(180deg, rgb(15 9 9 / 73%), rgb(5 4 4 / 83%));
  border: 1px solid rgba(191, 167, 122, 0.13);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px rgba(255, 224, 168, 0.025),
    inset 0 -18px 28px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}
.hunt-summary-category-board__top::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(217, 172, 108, 0.46),
      rgba(255, 232, 186, 0.22),
      rgba(217, 172, 108, 0.46),
      transparent
    );
  box-shadow: 0 0 10px rgba(217, 172, 108, 0.1);
}
.hunt-summary-category-board__top::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(193, 152, 102, 0.34),
      transparent
    );
  box-shadow: 0 0 7px rgba(193, 152, 102, 0.08);
}
.hunt-summary-category-board__head {
  position: relative;
  min-width: 0;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 170px 10px;
  margin: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.hunt-summary-category-board__head::after {
  display: none !important;
}
.hunt-summary-category-board__head > div:first-child {
  min-width: 0;
  max-width: 100%;
  display: grid;
  justify-items: center;
  text-align: center;
}
.hunt-summary-category-board__eyebrow {
  position: relative;
  width: auto;
  color: rgba(191, 167, 122, 0.62);
  font-family: "Cormorant SC", serif;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.86);
}
.hunt-summary-category-board__title {
  margin-top: 5px;
  color: #ffe8ba;
  font-family: "Cormorant SC", serif;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  text-shadow: 0 1px 0 #000,
    0 0 8px rgba(217, 172, 108, 0.16);
}
.hunt-summary-category-board__total {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 118px;
  min-height: 38px;
  padding: 6px 12px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  color: rgba(182, 184, 182, 0.76);
  font-family: "Cormorant SC", serif;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  white-space: nowrap;
  border: 1px solid rgba(191, 167, 122, 0.14);
  background: linear-gradient(rgb(45 27 27) 0%, rgb(13 10 9 / 92%) 100%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgb(224 191 121 / 29%), inset 0 0 0 3px rgba(8, 10, 12, 0.98), inset 0 0 0 4px rgb(224 191 121 / 19%), inset 0 0 14px rgba(255, 210, 140, 0.03);
}
.hunt-summary-category-board__total span {
  color: rgba(191, 167, 122, 0.72);
}
.hunt-summary-category-board__total strong {
  color: #fff4cf;
  font-size: 14px;
  font-weight: 900;
  text-shadow: 0 1px 0 #000,
    0 0 7px rgba(217, 172, 108, 0.16);
}
.hunt-summary-category-tabs.hunt-target-category-tabs {
  position: relative;
  z-index: 140;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 18px;
  padding: 10px 18px 15px;
  margin: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.hunt-summary-category-tabs.hunt-target-category-tabs::after {
  display: none !important;
}
.hunt-summary-category-tab.hunt-target-category-tab {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: auto;
  min-width: 0;
  display: inline-grid;
  grid-template-columns: minmax(0, auto) auto;
  align-items: center;
  gap: 7px;
  padding: 3px 0 3px 10px;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.18s ease,
    filter 0.18s ease;
}
.hunt-summary-category-tab.hunt-target-category-tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(191, 167, 122, 0.32);
  box-shadow: 0 0 5px rgba(217, 172, 108, 0.06);
  transform: translateY(-50%);
  transition: background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}
.hunt-summary-category-tab.hunt-target-category-tab:hover::before,
.hunt-summary-category-tab.hunt-target-category-tab.is-active::before {
  background: rgba(255, 226, 166, 0.9);
  box-shadow: 0 0 7px rgba(217, 172, 108, 0.34);
  transform: translateY(-50%) scale(1.18);
}
.hunt-summary-category-tab .hunt-target-category-tab__label {
  min-width: 0;
  color: rgba(191, 167, 122, 0.72);
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.82);
  transition: color 0.18s ease,
    text-shadow 0.18s ease;
}
.hunt-summary-category-tab .hunt-target-category-tab__count {
  display: none !important;
}
.hunt-summary-category-tab:hover .hunt-target-category-tab__label,
.hunt-summary-category-tab.is-active .hunt-target-category-tab__label {
  color: #ffe8ba;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9),
    0 0 8px rgba(217, 172, 108, 0.16);
}
.hunt-summary-category-tab__bonus {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 16px;
  padding: 2px 6px;
  color: #fff4cf;
  font-family: "Cormorant SC", serif;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border: 1px solid rgba(217, 172, 108, 0.28);
  border-radius: 3px;
  background: linear-gradient(
      180deg,
      rgba(76, 42, 32, 0.86),
      rgba(24, 12, 10, 0.94)
    );
  box-shadow: inset 0 1px 0 rgba(255, 232, 186, 0.05),
    0 1px 4px rgba(0, 0, 0, 0.34);
  text-shadow: 0 1px 0 #000;
}
.hunt-summary-category-tab.is-bonus::before {
  background: rgba(255, 226, 166, 0.72);
  box-shadow: 0 0 7px rgba(217, 172, 108, 0.28);
}
.hunt-summary-category-tab.is-active .hunt-summary-category-tab__bonus,
.hunt-summary-category-tab:hover .hunt-summary-category-tab__bonus {
  border-color: rgba(255, 232, 186, 0.36);
  filter: drop-shadow(0 0 5px rgba(217, 172, 108, 0.12));
}
.hunt-summary-category-content {
  min-width: 0;
  padding: 10px 16px 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.hunt-summary-category-content__head {
  display: none !important;
}
.hunt-summary-monster-grid {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-items: center;
  gap: 24px 10px;
  padding: 6px 0 4px;
}
.hunt-summary-monster-card {
  position: relative;
  width: 100%;
  max-width: 164px;
  min-width: 0;
  min-height: 164px;
  display: block;
  padding-top: 56px;
  overflow: visible;
  isolation: isolate;
  transition: transform 0.18s ease,
    filter 0.18s ease;
}
.hunt-summary-monster-card:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 0 9px rgba(217, 172, 108, 0.08));
}
.hunt-summary-monster-card__visual {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 4;
  width: 98px;
  height: 98px;
  display: grid;
  place-items: center;
  transform: translateX(-50%);
  pointer-events: none;
}
.hunt-summary-monster-card__frame {
  position: relative;
  width: 98px;
  height: 98px;
  display: grid;
  place-items: center;
  background: url("/ui/monster_frame.png")
    center / contain
    no-repeat;
  filter: drop-shadow(0 5px 9px rgba(0, 0, 0, 0.62))
    drop-shadow(0 0 6px rgba(216, 171, 101, 0.14));
  overflow: visible;
}
.hunt-summary-monster-card__img {
  position: relative;
  z-index: 2;
  max-width: 54px;
  max-height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.82))
    drop-shadow(0 0 5px rgba(255, 210, 150, 0.12));
  user-select: none;
  pointer-events: none;
}
.hunt-summary-monster-card__points {
  position: absolute;
  left: 50%;
  bottom: -5px;
  z-index: 6;
  width: 31px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff1cf;
  font-family: "Cormorant SC", serif;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  background: url("/ui/check_box.png")
    center / contain
    no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 5px rgba(217, 172, 108, 0.12));
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.88);
  transform: translateX(-50%);
  pointer-events: none;
}
.hunt-summary-monster-card__points--bonus {
  color: #fff6d6;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 7px rgba(255, 216, 148, 0.28));
}
.hunt-summary-monster-card__panel {
  position: relative;
  z-index: 1;
  min-height: 108px;
  padding: 50px 9px 10px;
  color: #f0dfbf;
  background: linear-gradient(rgb(45 27 27) 0%, rgb(13 10 9 / 92%) 100%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(224, 191, 121, 0.95),
    inset 0 0 0 3px rgba(8, 10, 12, 0.98),
    inset 0 0 0 4px rgba(224, 191, 121, 0.28),
    inset 0 0 14px rgba(255, 210, 140, 0.03);
  overflow: hidden;
}
.hunt-summary-monster-card__panel::before {
  display: none;
}
.hunt-summary-monster-card__name {
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffe8ba;
  font-family: "Cormorant SC", serif;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1.12;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: normal;
  overflow: hidden;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-shadow: 0 1px 0 #000,
    0 0 7px rgba(217, 172, 108, 0.16);
}
.hunt-summary-monster-card__divider {
  width: min(104px, 86%);
  height: 8px;
  margin: 4px auto 5px;
  background: url("/ui/cards/card_devider_down.png")
    center / 100% 100%
    no-repeat;
  opacity: 0.92;
  pointer-events: none;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.55));
}
.hunt-summary-monster-card__stats {
  display: grid;
  gap: 3px;
  width: min(118px, 100%);
  margin: 0 auto;
}
.hunt-summary-monster-card__stat-row {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  color: rgba(236, 220, 183, 0.72);
  font-family: "Cormorant SC", serif;
  font-size: 8.5px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.86);
}
.hunt-summary-monster-card__stat-row strong {
  color: #fff4cf;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 0 #000,
    0 0 6px rgba(217, 172, 108, 0.14);
}
.hunt-summary-empty {
  min-height: 150px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 20px;
  border: 1px dashed rgba(191, 167, 122, 0.16);
  background: linear-gradient(
      180deg,
      rgba(255, 216, 148, 0.018),
      rgba(0, 0, 0, 0.08)
    );
}
.hunt-summary-empty__icon {
  width: 38px;
  height: 38px;
  background: url("/ui/check_box.png") center / contain no-repeat;
  opacity: 0.72;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.78));
}
.hunt-summary-empty__title {
  color: #ffe8ba;
  font-family: "Cormorant SC", serif;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 0 #000;
}
.hunt-summary-empty__text {
  max-width: 360px;
  color: rgba(236, 220, 183, 0.72);
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78);
}
.hunt-registration-alert {
  width: min(620px, 100%);
  margin: 0 auto 8px;
  text-align: center;
}
.hunt-registration-alert span {
  display: inline-block;
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}
.hunt-registration-panel--registered .hunt-registration-panel__text {
  max-width: 420px;
  color: rgba(236, 220, 183, 0.8);
  font-size: 12px;
  line-height: 1.35;
}
.hunt-guide-list {
  min-width: 0;
  display: grid;
  gap: 0;
  margin-top: 4px;
}
.hunt-guide-list__item {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  padding: 9px 0 10px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.hunt-guide-list__item::before {
  content: "";
  position: absolute;
  left: 34px;
  right: 14%;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(143, 151, 153, 0.1) 8%,
      rgba(182, 184, 182, 0.28) 42%,
      rgba(143, 151, 153, 0.1) 76%,
      transparent 100%
    );
}
.hunt-guide-list__item:first-child::before {
  display: none;
}
.hunt-guide-list__icon {
  width: 22px;
  height: 22px;
  display: block;
  margin-top: -1px;
  background: url("/ui/check_box.png")
    center / contain
    no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.72));
  transition: filter 0.18s ease,
    transform 0.18s ease;
}
.hunt-guide-list__item:hover .hunt-guide-list__icon {
  filter: drop-shadow(0 0 5px rgba(217, 172, 108, 0.2))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.78));
}
.hunt-guide-list__text {
  min-width: 0;
  color: rgba(236, 220, 183, 0.88);
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  line-height: 1.32;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78);
  transition: color 0.18s ease,
    text-shadow 0.18s ease;
}
.hunt-guide-list__item:hover .hunt-guide-list__text {
  color: #ffe8ba;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9),
    0 0 8px rgba(217, 172, 108, 0.14);
}
.hunt-guide-list__title {
  display: none !important;
}
@media (max-width: 1560px) {
  .hunt-summary-monster-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px 8px;
  }
  .hunt-summary-monster-card {
    max-width: 158px;
  }
}
@media (max-width: 1360px) {
  .hunt-summary-monster-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px 10px;
  }
  .hunt-summary-monster-card {
    max-width: 164px;
  }
}
@media (max-width: 1120px) {
  .hunt-summary-monster-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .hunt-summary-category-board__head {
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 12px;
    padding: 15px 14px 12px;
  }
  .hunt-summary-category-board__total {
    position: static;
    transform: none;
    min-width: 132px;
    margin-top: 4px;
  }
  .hunt-summary-monster-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .hunt-guide-list__item {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 8px;
    padding: 8px 0 9px;
  }
  .hunt-guide-list__item::before {
    left: 30px;
    right: 8%;
  }
  .hunt-guide-list__icon {
    width: 20px;
    height: 20px;
  }
  .hunt-guide-list__text {
    font-size: 12.5px;
    line-height: 1.28;
  }
}
@media (max-width: 620px) {
  .hunt-summary-category-board__top {
    margin-bottom: 14px;
  }
  .hunt-summary-category-board__title {
    font-size: 13px;
    line-height: 1.08;
    letter-spacing: 0.055em;
  }
  .hunt-summary-category-board__total {
    min-width: 120px;
    min-height: 36px;
    padding: 6px 10px;
  }
  .hunt-summary-category-tabs.hunt-target-category-tabs {
    justify-content: center;
    gap: 8px 14px;
    padding: 10px 12px 13px;
  }
  .hunt-summary-category-tab .hunt-target-category-tab__label {
    font-size: 12px;
  }
  .hunt-summary-category-content {
    padding: 8px 12px 0;
  }
  .hunt-summary-monster-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .hunt-summary-monster-card {
    max-width: 178px;
    min-height: 170px;
  }
  .hunt-summary-monster-card__visual,
  .hunt-summary-monster-card__frame {
    width: 102px;
    height: 102px;
  }
  .hunt-summary-monster-card__img {
    max-width: 58px;
    max-height: 58px;
  }
  .hunt-summary-monster-card__points {
    bottom: -6px;
    width: 32px;
    height: 32px;
    font-size: 10px;
  }
  .hunt-summary-monster-card__panel {
    padding-top: 52px;
  }
  .hunt-summary-monster-card__name {
    font-size: 12px;
  }
  .hunt-registration-alert {
    width: 100%;
  }
  .hunt-registration-alert span {
    font-size: 11px;
    line-height: 1.15;
    letter-spacing: 0.055em;
  }
  .hunt-registration-panel--registered .hunt-registration-panel__text {
    font-size: 10.5px;
  }
}
@media (max-width: 1280px) {
  .hunt-summary-hero {
    grid-template-columns: minmax(0, 1fr) minmax(210px, 260px);
    gap: 18px;
  }
  .hunt-summary-hero__season {
    font-size: 24px;
  }
  .hunt-summary-hero__text {
    max-width: 620px;
    font-size: 13px;
    line-height: 1.35;
  }
  .hunt-summary-progress-card {
    width: min(560px, 100%);
    margin-top: 15px;
    padding: 10px 14px 12px;
  }
  .hunt-summary-status {
    padding: 14px 12px;
    gap: 7px;
  }
  .hunt-summary-status::before {
    width: 38px;
    height: 38px;
  }
  .hunt-summary-status__title {
    font-size: 15px;
  }
  .hunt-summary-status__text {
    font-size: 12px;
  }
}
@media (max-width: 980px) {
  .hunt-summary-hero {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .hunt-summary-hero__main {
    justify-items: center;
    text-align: center;
  }
  .hunt-summary-hero__eyebrow,
  .hunt-summary-hero__season,
  .hunt-summary-hero__text {
    text-align: center;
  }
  .hunt-summary-progress-card {
    width: min(620px, 100%);
  }
  .hunt-summary-status {
    width: min(520px, 100%);
    min-height: 0;
    margin: 0 auto;
    padding: 14px 16px;
  }
  .hunt-summary-status__text {
    max-width: 420px;
  }
}
@media (max-width: 620px) {
  .hunt-summary-hero {
    gap: 14px;
  }
  .hunt-summary-hero__eyebrow {
    font-size: 10px;
    letter-spacing: 0.12em;
  }
  .hunt-summary-hero__season {
    margin-top: 5px;
    font-size: 20px;
    line-height: 1.05;
    letter-spacing: 0.055em;
  }
  .hunt-summary-hero__text {
    margin-top: 8px;
    font-size: 12.5px;
    line-height: 1.32;
  }
  .hunt-summary-progress-card {
    margin-top: 12px;
    padding: 9px 10px 10px;
  }
  .hunt-summary-progress-card__top {
    margin-bottom: 6px;
    gap: 8px;
  }
  .hunt-summary-progress-card__top span {
    font-size: 10px;
    letter-spacing: 0.06em;
  }
  .hunt-summary-progress-card__top strong {
    font-size: 17px;
  }
  .hunt-summary-progress {
    height: 14px;
  }
  .hunt-summary-progress__fill {
    left: 5px;
    top: 4px;
    height: 5px;
    width: calc((100% - 10px) * var(--progress));
  }
  .hunt-summary-progress__marker {
    left: calc(5px + ((100% - 10px) * var(--progress)));
    width: 7px;
    height: 7px;
  }
  .hunt-summary-progress-card__bottom {
    margin-top: 6px;
    font-size: 11.5px;
  }
  .hunt-summary-status {
    padding: 12px 10px;
    gap: 6px;
  }
  .hunt-summary-status::before {
    width: 34px;
    height: 34px;
    margin-bottom: 0;
  }
  .hunt-summary-status__label {
    font-size: 9px;
    letter-spacing: 0.1em;
  }
  .hunt-summary-status__title {
    font-size: 13px;
    line-height: 1.08;
    letter-spacing: 0.045em;
  }
  .hunt-summary-status__text {
    max-width: 100%;
    font-size: 11.5px;
    line-height: 1.25;
  }
  .hunt-summary-status__claim {
    min-width: 104px;
    margin-top: 6px;
    padding: 7px 10px;
    gap: 6px;
  }
  .hunt-summary-status__claim span {
    font-size: 9.5px;
    letter-spacing: 0.06em;
  }
  .hunt-summary-status__claim strong {
    font-size: 15px;
  }
}
@media (max-width: 380px) {
  .hunt-summary-hero__season {
    font-size: 18px;
  }
  .hunt-summary-hero__text {
    font-size: 11.8px;
  }
  .hunt-summary-progress-card__top {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .hunt-summary-status__claim {
    width: 100%;
    max-width: 150px;
  }
}
.hunt-season-bottom-frame {
  width: 100%;
  min-width: 0;
  margin-top: 24px;
}
.hunt-season-bottom-actions {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 4px 0;
}
.hunt-season-bottom-actions .cp-bottom-action {
  margin: 0;
}
.hunt-season-bottom-actions .cp-bottom-action-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}
.hunt-season-bottom-actions .cp-bottom-action-icon {
  width: 35px;
  height: 35px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.75));
}
.hunt-season-bottom-actions .cp-bottom-action-text {
  min-width: 0;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .hunt-season-bottom-actions {
    gap: 8px;
  }
}
@media (max-width: 620px) {
  .hunt-season-bottom-frame {
    margin-top: 18px;
  }
  .hunt-season-bottom-actions {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    font-size: 13px;
  }
  .hunt-season-bottom-actions .cp-bottom-action-icon {
    width: 27px;
    height: 27px;
  }
}
.elevation-path-page {
  width: 100%;
  min-width: 0;
}
.elevation-path-page,
.elevation-path-page * {
  box-sizing: border-box;
}
.elevation-path-shell {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 0 18px 24px;
  overflow: visible;
}
.elevation-path-section {
  width: 100%;
  min-width: 0;
}
.elevation-path-loading {
  margin-top: 14px;
}
.elevation-path-info-frame {
  width: 100%;
  min-width: 0;
  margin: 0 0 18px;
}
.elevation-path-info-frame--plain {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.elevation-path-info-card {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.elevation-path-info-two-cols {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.92fr);
  gap: 30px;
  width: 100%;
  min-width: 0;
}
.elevation-path-info-two-cols::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: calc(50% - 12px);
  width: 24px;
  pointer-events: none;
  background: url("/ui/divider_horinozntal.png") center / contain no-repeat;
  opacity: 0.72;
  transform: rotate(90deg);
  transform-origin: center;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.45))
    sepia(0.18)
    saturate(1.12);
}
.elevation-path-info-panel {
  min-width: 0;
}
.elevation-panel-title,
.elevation-path-info-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 10px;
  color: rgba(191, 167, 122, 0.74);
  font-family: "Cormorant SC", serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85),
    0 0 7px rgba(217, 172, 108, 0.1);
}
.elevation-path-info-title {
  justify-content: flex-start;
  color: #e1c29c;
  font-size: 16px;
  text-transform: none;
  letter-spacing: 0.02em;
}
.elevation-path-info-title img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 6px rgba(236, 210, 124, 0.18))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.62));
}
.elevation-path-info-quote {
  position: relative;
  min-width: 0;
  padding: 15px 18px 15px 22px;
  border: 0;
  border-left: 2px solid rgba(236, 177, 78, 0.32);
}
.elevation-path-info-quote::before {
  content: "“";
  position: absolute;
  left: 7px;
  top: 3px;
  color: rgba(236, 177, 78, 0.28);
  font-family: "Cormorant SC", serif;
  font-size: 23px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.72);
}
.elevation-path-info-quote p {
  position: relative;
  z-index: 1;
  margin: 0 0 8px;
  color: rgba(236, 220, 183, 0.86);
  font-family: "Cormorant SC", serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.34;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75);
}
.elevation-path-info-quote p:last-child {
  margin-bottom: 0;
}
.elevation-path-info-list {
  min-width: 0;
  display: grid;
  gap: 7px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.elevation-path-info-list li {
  position: relative;
  min-height: 26px;
  min-width: 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  padding: 5px 8px 5px 6px;
  border-radius: 4px;
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.018) 0%,
      rgba(255, 216, 148, 0.032) 48%,
      rgba(255, 255, 255, 0.014) 100%
    );
  border: 1px solid rgba(191, 167, 122, 0.12);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 232, 186, 0.035);
  transition: border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}
.elevation-path-info-list li:hover {
  border-color: rgba(236, 177, 78, 0.22);
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.022) 0%,
      rgba(255, 216, 148, 0.048) 48%,
      rgba(255, 255, 255, 0.016) 100%
    );
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 232, 186, 0.055);
}
.elevation-path-info-list li::before {
  content: "";
  width: 14px;
  height: 14px;
  margin-top: 1px;
  background: url("/ui/list_ico.png") center / contain no-repeat;
  filter: drop-shadow(0 0 5px rgba(236, 210, 124, 0.16))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
  transform: translateY(0) scale(1);
  transform-origin: center;
  transition: filter 0.18s ease,
    transform 0.18s ease,
    opacity 0.18s ease;
}
.elevation-path-info-list li:hover::before {
  background-image: url("/ui/list_ico_hover.png");
  filter: drop-shadow(0 0 7px rgba(236, 210, 124, 0.28))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.72));
  transform: translateY(-1px) scale(1.06);
}
.elevation-path-info-list li span {
  min-width: 0;
  color: rgba(236, 220, 183, 0.88);
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78);
  transition: color 0.18s ease,
    text-shadow 0.18s ease;
}
.elevation-path-info-list li:hover span {
  color: rgba(255, 238, 202, 0.94);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78),
    0 0 6px rgba(214, 168, 91, 0.12);
}
.elevation-path-block {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0 0 18px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.elevation-path-block > .elevation-panel-title {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  color: rgba(191, 167, 122, 0.68);
  font-family: "Cormorant SC", serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85),
    0 0 7px rgba(217, 172, 108, 0.08);
  transition: color 0.22s ease,
    text-shadow 0.22s ease;
}
.elevation-path-block:hover > .elevation-panel-title {
  color: rgba(225, 194, 156, 0.88);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.88),
    0 0 8px rgba(217, 172, 108, 0.16);
}
.elevation-path-title-divider {
  width: min(280px, 82%);
  height: 14px;
  margin: 7px auto 9px;
  background: url("/ui/divider_horinozntal_brown.png") center / contain no-repeat;
  opacity: 0.72;
  pointer-events: none;
  filter: drop-shadow(0 0 7px rgba(0, 0, 0, 0.45));
}
.elevation-path-muted {
  width: 100%;
  max-width: 760px;
  margin: 0 auto 14px;
  color: #b6b8b6;
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78);
}
.elevation-showcase-layout {
  position: relative;
  z-index: 10;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(245px, 310px);
  gap: 34px;
  align-items: start;
  margin-top: 16px;
  overflow: visible !important;
  isolation: isolate;
}
.elevation-showcase-detail-frame {
  position: relative;
  z-index: 80;
  width: 100%;
  min-width: 0;
  overflow: visible !important;
}
.elevation-showcase-detail-frame *,
.elevation-showcase-detail-stack,
.elevation-showcase-detail,
.elevation-showcase-detail__section {
  overflow: visible !important;
}
.elevation-showcase-detail-stack {
  position: relative;
  z-index: 90;
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 360px;
}
.elevation-showcase-detail {
  grid-area: 1 / 1;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 17px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease,
    visibility 0.18s ease;
}
.elevation-showcase-detail.is-active {
  position: relative;
  z-index: 100;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.elevation-showcase-detail__section {
  position: relative;
  min-width: 0;
  padding: 0 0 15px;
}
.elevation-showcase-detail__section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 22%;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(188, 126, 54, 0.14) 10%,
      rgba(236, 177, 78, 0.36) 46%,
      rgba(188, 126, 54, 0.14) 78%,
      transparent 100%
    );
  box-shadow: 0 0 8px rgba(236, 177, 78, 0.07);
}
.elevation-showcase-detail__section:last-child {
  padding-bottom: 0;
}
.elevation-showcase-detail__section:last-child::after {
  display: none;
}
.elevation-showcase-detail__label {
  margin: 0 0 8px;
  color: rgba(191, 167, 122, 0.76);
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.82),
    0 0 7px rgba(217, 172, 108, 0.12);
}
.elevation-showcase-detail__text {
  margin: 0;
  color: rgba(236, 220, 183, 0.88);
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.46;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78);
}
.elevation-showcase-detail__stages {
  counter-reset: elevationStage;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}
.elevation-showcase-detail__stages span {
  counter-increment: elevationStage;
  position: relative;
  min-height: 30px;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 4px 4px 4px 34px;
  color: rgba(236, 220, 183, 0.84);
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.025em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.86);
}
.elevation-showcase-detail__stages span::before {
  content: counter(elevationStage);
  position: absolute;
  left: 0;
  top: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  color: #fff4cf;
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  background: url("/ui/check_box.png") center / contain no-repeat;
  text-shadow: 0 1px 0 rgba(255, 238, 190, 0.22);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.72));
}
.elevation-showcase-side {
  position: relative;
  z-index: 20;
  min-width: 0;
  display: grid;
  gap: 18px;
  align-content: start;
}
.elevation-showcase-tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  min-width: 0;
}
.elevation-showcase-tab {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 76px;
  min-width: 76px;
  display: grid;
  justify-items: center;
  gap: 0;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  color: inherit;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.22s ease,
    filter 0.22s ease,
    transform 0.22s ease;
}
.elevation-showcase-tab:hover {
  transform: translateY(-1px);
}
.elevation-showcase-tab:focus,
.elevation-showcase-tab:focus-visible {
  outline: none;
}
.elevation-showcase-tab__image {
  position: relative;
  width: 76px;
  height: 84px;
  display: grid;
  place-items: center;
  overflow: visible;
  background: transparent;
  clip-path: none;
}
.elevation-showcase-tab__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  filter: brightness(0.34)
    saturate(0.64)
    contrast(1.04);
  opacity: 0.72;
  transform: none;
  transition: filter 0.22s ease,
    opacity 0.22s ease;
}
.elevation-showcase-tab:hover .elevation-showcase-tab__image img {
  filter: brightness(0.58)
    saturate(0.9)
    contrast(1.05);
  opacity: 0.9;
}
.elevation-showcase-tab.is-active .elevation-showcase-tab__image img {
  filter: brightness(1)
    saturate(1)
    contrast(1.04)
    drop-shadow(0 0 8px rgba(236, 177, 78, 0.18));
  opacity: 1;
}
.elevation-showcase-tab__current {
  display: none !important;
}
.elevation-showcase-small-stack {
  display: grid;
  min-width: 0;
}
.elevation-showcase-small {
  grid-area: 1 / 1;
  position: relative;
  min-width: 0;
  padding-top: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease,
    visibility 0.18s ease;
}
.elevation-showcase-small.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.elevation-showcase-small__mode {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: fit-content;
  min-width: 42px;
  min-height: 20px;
  padding: 4px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  font-family: "Cormorant SC", serif;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.86);
  box-shadow: inset 0 0 8px rgba(217, 172, 108, 0.12),
    inset 0 1px 0 rgba(255, 232, 186, 0.05),
    0 2px 4px rgba(0, 0, 0, 0.5);
}
.elevation-showcase-small__mode::before,
.elevation-showcase-small__mode::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  transform: translateY(-50%);
}
.elevation-showcase-small__mode::before {
  left: -4px;
}
.elevation-showcase-small__mode::after {
  right: -4px;
}
.elevation-showcase-small__mode--solo {
  color: #ffdda0;
  border: 1px solid rgba(217, 172, 108, 0.3);
  background: linear-gradient(
      180deg,
      rgba(55, 48, 39, 0.78) 0%,
      rgba(25, 24, 23, 0.82) 100%
    );
  box-shadow: inset 0 0 8px rgba(217, 172, 108, 0.15),
    inset 0 1px 0 rgba(255, 232, 186, 0.055),
    0 2px 4px rgba(0, 0, 0, 0.5);
}
.elevation-showcase-small__mode--solo::before,
.elevation-showcase-small__mode--solo::after {
  background: #ffdda0;
  box-shadow: 0 0 3px #ffdda0,
    0 0 7px rgba(217, 172, 108, 0.32);
}
.elevation-showcase-small__mode--guild {
  color: #ffd4c9;
  border: 1px solid rgba(217, 94, 76, 0.34);
  background: linear-gradient(
      180deg,
      rgba(72, 42, 38, 0.8) 0%,
      rgba(31, 22, 21, 0.86) 100%
    );
  box-shadow: inset 0 0 8px rgba(217, 94, 76, 0.18),
    inset 0 1px 0 rgba(255, 214, 196, 0.06),
    0 2px 4px rgba(0, 0, 0, 0.5);
}
.elevation-showcase-small__mode--guild::before,
.elevation-showcase-small__mode--guild::after {
  background: #ffb0a0;
  box-shadow: 0 0 3px #ffb0a0,
    0 0 7px rgba(217, 94, 76, 0.32);
}
.elevation-showcase-small__title {
  margin: 0;
  padding-right: 74px;
  color: #ffe8ba;
  font-family: "Cormorant SC", serif;
  font-size: 24px;
  font-weight: 800;
  font-style: italic;
  line-height: 0.95;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #000,
    0 0 10px rgba(0, 0, 0, 0.28);
  transition: color 0.2s ease,
    text-shadow 0.2s ease;
}
.elevation-showcase-small__title--solo,
.elevation-showcase-small__title--guild {
  color: #ffe8ba;
}
.elevation-showcase-small__current {
  width: fit-content;
  margin: 8px 0 0;
  padding: 3px 9px;
  color: rgba(255, 240, 201, 0.92);
  font-family: "Cormorant SC", serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  border: 1px solid rgba(191, 167, 122, 0.18);
  border-radius: 3px;
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.018) 0%,
      rgba(255, 216, 148, 0.034) 48%,
      rgba(255, 255, 255, 0.014) 100%
    );
  box-shadow: inset 0 1px 0 rgba(255, 232, 186, 0.035);
}
.elevation-showcase-small__divider {
  width: 100%;
  height: 1px;
  margin: 12px 0 13px;
  background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(143, 151, 153, 0.14) 10%,
      rgba(182, 184, 182, 0.38) 50%,
      rgba(143, 151, 153, 0.14) 90%,
      transparent 100%
    );
  box-shadow: 0 0 8px rgba(182, 184, 182, 0.05);
}
.elevation-showcase-small__text {
  position: relative;
  margin: 0;
  padding: 0 0 0 14px;
  color: rgba(236, 220, 183, 0.86);
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.38;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78);
}
.elevation-showcase-small__text::before {
  content: "“";
  position: absolute;
  left: 0;
  top: -4px;
  color: rgba(216, 189, 137, 0.24);
  font-family: "Cormorant SC", serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.72);
}
.elevation-showcase-side-actions {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.elevation-path-actions {
  display: grid;
  justify-items: center;
  gap: 30px;
  width: 100%;
  min-width: 0;
}
.elevation-path-actions .menu-btn-md {
  width: 220px;
  height: 58px;
  margin: 0 auto;
  transform: none !important;
}
.elevation-path-actions .menu-btn-md__label {
  padding: 0 18px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.05;
  white-space: normal;
  text-align: center;
}
.elevation-path-rechoose-alert {
  width: 100%;
  margin: 0;
}
.elevation-shop-layout {
  position: relative;
  z-index: 10;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  margin-top: 16px;
  overflow: visible !important;
}
.elevation-stats-frame {
  position: sticky;
  top: 12px;
  width: 100%;
  min-width: 0;
  overflow: visible !important;
}
.elevation-stats-panel {
  display: grid;
  gap: 7px;
  width: 100%;
  min-width: 0;
}
.elevation-stat-card {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 7px 8px;
  border: 1px solid rgba(191, 167, 122, 0.13);
  border-radius: 4px;
  background: linear-gradient(90deg, rgb(26 21 20 / 38%) 0%, rgb(50 42 26 / 54%) 48%, rgb(24 21 19 / 50%) 100%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 232, 186, 0.03);
}
.elevation-stat-card__icon {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  background: radial-gradient(
      circle,
      rgba(236, 177, 78, 0.08) 0%,
      rgba(0, 0, 0, 0.06) 72%,
      transparent 100%
    );
}
.elevation-stat-card__icon img {
  max-width: 23px;
  max-height: 23px;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(236, 210, 124, 0.12))
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.62));
}
.elevation-stat-card__body {
  width: 100%;
  min-width: 0;
}
.elevation-stat-card__head {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: nowrap;
}
.elevation-stat-card__label {
  flex: 1 1 auto;
  min-width: 0;
  color: rgba(191, 167, 122, 0.72) !important;
  font-family: "Cormorant SC", serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.82);
}
.elevation-stat-card__value {
  margin-top: 2px;
  color: #ffe8ba !important;
  font-family: "Cormorant SC", serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 #000,
    0 0 7px rgba(217, 172, 108, 0.1);
}
.elevation-stat-card__value--inline {
  margin-top: 0;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 58%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  color: #fff4cf !important;
  font-size: 16px;
  font-weight: 900;
}
.elevation-stat-card__sub {
  max-width: 100%;
  min-width: 0;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(236, 220, 183, 0.72) !important;
  font-family: "Cormorant SC", serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.15;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78);
}
.elevation-stat-card__sub--inline {
  margin-top: 0;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 58%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  color: rgba(255, 232, 186, 0.78) !important;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}
.elevation-path-page .elevation-stat-progress-box {
  width: 100%;
  min-width: 0;
  margin-top: 7px;
}
.elevation-path-page .elevation-stat-progress-box__top {
  width: 100%;
  min-width: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px;
  margin: 0 0 4px !important;
  color: transparent;
}
.elevation-path-page .elevation-stat-progress-box__top span {
  min-width: 0;
  display: block;
  color: rgba(236, 220, 183, 0.72) !important;
  font-family: "Cormorant SC", serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.05 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78) !important;
}
.elevation-path-page .elevation-stat-progress-box__top strong {
  flex: 0 0 auto;
  display: block;
  color: #fff4cf !important;
  font-family: "Cormorant SC", serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 0 #000,
    0 0 7px rgba(217, 172, 108, 0.18) !important;
}
.elevation-path-page .elevation-stat-progress-wrap {
  width: 100%;
  min-width: 0;
}
.elevation-path-page .elevation-stat-progress {
  --progress: 0;
  position: relative;
  width: 100%;
  height: 16px;
  margin: 0;
  background: url("/ui/progress_bar.png")
    center / 100% 100%
    no-repeat !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
  overflow: visible;
}
.elevation-path-page .elevation-stat-progress .cp-rank-progress-fill {
  position: absolute;
  left: 6px;
  top: 5px;
  height: 5px;
  width: calc((100% - 12px) * var(--progress));
  background-image: url("/ui/progress_line.png") !important;
  background-repeat: repeat-x;
  background-position: left center;
  background-size: auto 100%;
}
.elevation-path-page .elevation-stat-progress .cp-progress-marker {
  position: absolute;
  left: calc(6px + ((100% - 12px) * var(--progress)));
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: 3;
  background: radial-gradient(
      circle at 35% 28%,
      #fff2bd 0 12%,
      #d8a75f 30%,
      #6f4c2d 72%,
      #24170d 100%
    );
  border: 1px solid rgba(255, 235, 176, 0.95);
  box-shadow: 0 0 0 1px rgba(37, 22, 10, 0.9),
    0 0 8px rgba(222, 178, 100, 0.5);
}
.elevation-buff-shop {
  position: relative;
  z-index: 20;
  min-width: 0;
  display: grid;
  gap: 9px;
  overflow: visible !important;
}
.elevation-buff-level {
  position: relative;
  z-index: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: 1 !important;
  overflow: visible !important;
}
.elevation-buff-level.is-open {
  z-index: 30;
}
.elevation-buff-level.is-locked {
  opacity: 1 !important;
}
.elevation-buff-level__head {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 3px 11px;
  margin: 0;
  border: 1px solid rgba(191, 167, 122, 0.13);
  border-radius: 0;
  outline: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: radial-gradient(
      circle at 16% 50%,
      rgba(255, 218, 145, 0.045) 0%,
      rgba(255, 218, 145, 0.014) 34%,
      transparent 62%
    ),
    radial-gradient(
      circle at 84% 50%,
      rgba(255, 218, 145, 0.032) 0%,
      transparent 58%
    ),
    linear-gradient(
      180deg,
      rgba(38, 31, 23, 0.28) 0%,
      rgba(15, 13, 11, 0.42) 100%
    );
  box-shadow: inset 0 1px 0 rgba(255, 232, 186, 0.035),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 3px 8px rgba(0, 0, 0, 0.16);
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.28s ease,
    box-shadow 0.28s ease,
    background 0.28s ease;
}
.elevation-buff-level__head::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(216, 184, 120, 0.18) 18%,
      rgba(216, 184, 120, 0.3) 50%,
      rgba(216, 184, 120, 0.18) 82%,
      transparent 100%
    );
  opacity: 0.3;
}
.elevation-buff-level__head:hover,
.elevation-buff-level.is-open .elevation-buff-level__head {
  border-color: rgba(236, 177, 78, 0.24);
  background: radial-gradient(
      circle at 16% 50%,
      rgba(255, 218, 145, 0.06) 0%,
      rgba(255, 218, 145, 0.02) 34%,
      transparent 62%
    ),
    radial-gradient(
      circle at 84% 50%,
      rgba(255, 218, 145, 0.045) 0%,
      transparent 58%
    ),
    linear-gradient(
      180deg,
      rgba(48, 38, 27, 0.36) 0%,
      rgba(16, 14, 12, 0.48) 100%
    );
  box-shadow: inset 0 1px 0 rgba(255, 232, 186, 0.045),
    inset 0 -1px 0 rgba(0, 0, 0, 0.34),
    0 3px 9px rgba(0, 0, 0, 0.2),
    0 0 9px rgba(236, 177, 78, 0.06);
}
.elevation-buff-level__head:focus,
.elevation-buff-level__head:focus-visible {
  outline: none;
}
.elevation-buff-level.is-locked .elevation-buff-level__head {
  border-color: rgba(132, 121, 104, 0.16);
  background: linear-gradient(
      180deg,
      rgba(29, 27, 24, 0.32) 0%,
      rgba(12, 11, 10, 0.46) 100%
    );
}
.elevation-buff-level__title {
  min-width: 0;
  color: #ffe8ba !important;
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 #000,
    0 0 8px rgba(217, 172, 108, 0.14);
}
.elevation-buff-level.is-locked .elevation-buff-level__title {
  color: rgba(202, 190, 170, 0.7) !important;
  text-shadow: 0 1px 0 #000;
}
.elevation-buff-level__right {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}
.elevation-buff-level__state {
  position: relative;
  width: fit-content;
  min-width: 42px;
  min-height: 18px;
  padding: 2px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffdda0 !important;
  font-family: "Cormorant SC", serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  border: 1px solid rgba(217, 172, 108, 0.3);
  border-radius: 3px;
  background: linear-gradient(
      180deg,
      rgba(55, 48, 39, 0.78) 0%,
      rgba(25, 24, 23, 0.82) 100%
    );
  box-shadow: inset 0 0 8px rgba(217, 172, 108, 0.15),
    inset 0 1px 0 rgba(255, 232, 186, 0.055),
    0 2px 4px rgba(0, 0, 0, 0.5);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.86);
}
.elevation-buff-level__state::before,
.elevation-buff-level__state::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #ffdda0;
  box-shadow: 0 0 3px #ffdda0,
    0 0 7px rgba(217, 172, 108, 0.32);
  transform: translateY(-50%);
}
.elevation-buff-level__state::before {
  left: -4px;
}
.elevation-buff-level__state::after {
  right: -4px;
}
.elevation-buff-level.is-locked .elevation-buff-level__state {
  color: rgba(190, 184, 176, 0.68) !important;
  border-color: rgba(132, 121, 104, 0.28);
  background: linear-gradient(
      180deg,
      rgba(38, 35, 31, 0.78) 0%,
      rgba(18, 17, 15, 0.84) 100%
    );
  box-shadow: inset 0 0 8px rgba(132, 121, 104, 0.1),
    inset 0 1px 0 rgba(210, 196, 170, 0.035),
    0 2px 4px rgba(0, 0, 0, 0.5);
}
.elevation-buff-level.is-locked .elevation-buff-level__state::before,
.elevation-buff-level.is-locked .elevation-buff-level__state::after {
  background: rgba(190, 184, 176, 0.68);
  box-shadow: 0 0 3px rgba(190, 184, 176, 0.45),
    0 0 7px rgba(132, 121, 104, 0.2);
}
.elevation-buff-level__arrow {
  --btn-base: url("/ui/button_round_brown_1.png");
  --btn-mid: url("/ui/button_round_brown_2.png");
  --btn-top: url("/ui/button_round_brown_3.png");
  position: relative;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  flex: 0 0 25px;
  font-size: 0;
  line-height: 0;
  color: transparent;
  border: 0;
  border-radius: 50%;
  background: var(--btn-top) center / 100% 100% no-repeat,
    var(--btn-mid) center / 100% 100% no-repeat,
    var(--btn-base) center / 100% 100% no-repeat;
  box-shadow: none;
  text-shadow: none;
  transform: none !important;
  transition: filter 0.22s ease,
    opacity 0.22s ease;
}
.elevation-buff-level__arrow::before {
  content: "";
  width: 23px;
  height: 25px;
  display: block;
  background: url("/icons/check1.png") center / contain no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 4px rgba(255, 230, 170, 0.16));
}
.elevation-buff-level.is-locked .elevation-buff-level__arrow::before {
  width: 23px;
  height: 25px;
  background-image: url("/icons/lock3.png");
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.72));
}
.elevation-buff-level__head:hover .elevation-buff-level__arrow,
.elevation-buff-level.is-open .elevation-buff-level__arrow {
  filter: brightness(1.08)
    drop-shadow(0 0 5px rgba(217, 172, 108, 0.12));
}
.elevation-buff-level.is-locked .elevation-buff-level__arrow {
  filter: grayscale(0.75)
    brightness(0.78);
}
.elevation-buff-level__body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  background: transparent;
  box-shadow: none;
  border: 0;
  transition: grid-template-rows 0.62s ease,
    opacity 0.34s ease,
    visibility 0s linear 0.62s;
}
.elevation-buff-level.is-open .elevation-buff-level__body {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows 0.62s ease,
    opacity 0.34s ease,
    visibility 0s linear 0s;
}
.elevation-buff-level__slider {
  min-height: 0;
  padding: 0 11px;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  border: 0;
  transition: padding 0.62s ease,
    overflow 0s linear 0.62s;
}
.elevation-buff-level.is-open .elevation-buff-level__slider {
  padding: 10px 11px 11px;
  overflow: visible;
  transition: padding 0.62s ease,
    overflow 0s linear 0s;
}
.elevation-buff-grid {
  --buff-card-w: 210px;
  --buff-card-ratio: 210 / 170;
  position: relative;
  z-index: 20;
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, var(--buff-card-w));
  justify-content: center;
  justify-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.36s ease,
    transform 0.46s ease;
}
.elevation-buff-level.is-open .elevation-buff-grid {
  opacity: 1;
  transform: translateY(0);
}
.elevation-buff-card {
  position: relative;
  z-index: 1;
  width: var(--buff-card-w);
  max-width: 100%;
  min-width: 0;
  aspect-ratio: var(--buff-card-ratio);
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: clamp(5px, 3.8%, 8px);
  padding: clamp(20px, 13.4%, 28px)
    clamp(14px, 9.5%, 20px)
    clamp(14px, 9.5%, 20px);
  border: 0;
  border-radius: 0;
  background: url("/ui/baff_card.png")
    center / 100% 100%
    no-repeat;
  box-shadow: none;
  cursor: help;
  opacity: 1 !important;
  overflow: visible !important;
  transform: none !important;
  transition: filter 0.22s ease,
    opacity 0.18s ease;
}
.elevation-buff-card:hover,
.elevation-buff-card:focus-within {
  z-index: 999;
  transform: none !important;
  box-shadow: none;
  filter: brightness(1.025);
}
.elevation-buff-card.is-locked {
  opacity: 1 !important;
  filter: none !important;
}
.elevation-buff-card.is-locked > :not(.elevation-buff-tooltip) {
  opacity: 0.58;
  filter: grayscale(0.9) brightness(0.72);
}
.elevation-buff-card.is-locked:hover,
.elevation-buff-card.is-locked:focus-within {
  transform: none !important;
  filter: none !important;
}
.elevation-buff-card.is-locked .elevation-buff-tooltip,
.elevation-buff-card.is-locked:hover .elevation-buff-tooltip,
.elevation-buff-card.is-locked:focus-within .elevation-buff-tooltip {
  filter: none !important;
}
.elevation-buff-card__top {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}
.elevation-buff-card__icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: url("/ui/monster_frame.png")
    center / contain
    no-repeat;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 5px rgba(216, 171, 101, 0.12));
  overflow: visible;
  transform: none !important;
  transition: filter 0.22s ease;
}
.elevation-buff-card__icon img {
  max-width: 23px;
  max-height: 23px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 4px rgba(255, 230, 170, 0.12));
  pointer-events: none;
  user-select: none;
  transform: none !important;
  transition: filter 0.22s ease;
}
.elevation-buff-card:hover .elevation-buff-card__icon,
.elevation-buff-card:focus-within .elevation-buff-card__icon {
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 8px rgba(216, 171, 101, 0.22));
}
.elevation-buff-card:hover .elevation-buff-card__icon img,
.elevation-buff-card:focus-within .elevation-buff-card__icon img {
  filter: brightness(1.1)
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 7px rgba(255, 218, 145, 0.26));
}
.elevation-buff-card.is-locked:hover .elevation-buff-card__icon,
.elevation-buff-card.is-locked:focus-within .elevation-buff-card__icon {
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 5px rgba(216, 171, 101, 0.12));
}
.elevation-buff-card.is-locked:hover .elevation-buff-card__icon img,
.elevation-buff-card.is-locked:focus-within .elevation-buff-card__icon img {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 4px rgba(255, 230, 170, 0.12));
}
.elevation-buff-card__meta {
  min-width: 0;
}
.elevation-buff-card__name {
  color: #ffe8ba !important;
  font-family: "Cormorant SC", serif;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #000,
    0 0 7px rgba(217, 172, 108, 0.12);
}
.elevation-buff-card__short {
  margin-top: 4px;
  color: rgba(236, 220, 183, 0.76) !important;
  font-family: "Cormorant SC", serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.18;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78);
}
.elevation-buff-card__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid rgba(191, 167, 122, 0.12);
  border-radius: 4px;
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.016) 0%,
      rgba(255, 216, 148, 0.028) 48%,
      rgba(255, 255, 255, 0.012) 100%
    );
}
.elevation-buff-card__info span {
  min-width: 0;
  color: rgba(255, 232, 186, 0.8) !important;
  font-family: "Cormorant SC", serif;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78);
}
.elevation-buff-buy-btn {
  appearance: none;
  -webkit-appearance: none;
  --buff-btn-w: 100px;
  --buff-btn-h: 27px;
  --buff-btn-label-y: 1px;
  position: relative;
  isolation: isolate;
  width: var(--buff-btn-w);
  min-width: var(--buff-btn-w);
  max-width: var(--buff-btn-w);
  height: var(--buff-btn-h);
  min-height: var(--buff-btn-h);
  max-height: var(--buff-btn-h);
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0 auto;
  border: 0 !important;
  outline: none !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: #f4dfb2;
  font: inherit;
  font-family: "Cormorant SC", serif;
  text-align: center;
  cursor: pointer;
  overflow: visible !important;
  transform: none !important;
  -webkit-tap-highlight-color: transparent;
}
.elevation-buff-buy-btn::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  background: url("/ui/baff_button.png")
    center / 100% 100%
    no-repeat;
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.12s ease,
    filter 0.12s ease;
}
.elevation-buff-buy-btn::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  background: url("/ui/baff_button_hover.png")
    center / 100% 100%
    no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease,
    filter 0.12s ease;
}
.elevation-buff-buy-btn:hover::before,
.elevation-buff-buy-btn:focus-visible::before {
  opacity: 0;
}
.elevation-buff-buy-btn:hover::after,
.elevation-buff-buy-btn:focus-visible::after {
  opacity: 1;
  filter: brightness(1.04)
    drop-shadow(0 0 5px rgba(217, 172, 108, 0.12));
}
.elevation-buff-buy-btn:active::after {
  filter: brightness(0.96)
    drop-shadow(0 0 3px rgba(0, 0, 0, 0.28));
}
.elevation-buff-buy-btn:disabled {
  cursor: not-allowed;
}
.elevation-buff-buy-btn:disabled::before {
  opacity: 1;
  filter: grayscale(0.65)
    brightness(0.72);
}
.elevation-buff-buy-btn:disabled::after {
  opacity: 0 !important;
}
.elevation-buff-buy-btn__label {
  position: relative;
  z-index: 5;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 0 8px;
  color: #f4dfb2 !important;
  font-family: "Cormorant SC", serif;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateY(var(--buff-btn-label-y));
  text-shadow: 0 1px 0 #000,
    0 0 5px rgba(217, 172, 108, 0.14);
  pointer-events: none;
}
.elevation-buff-buy-btn:hover .elevation-buff-buy-btn__label,
.elevation-buff-buy-btn:focus-visible .elevation-buff-buy-btn__label {
  color: #fff0c8 !important;
  text-shadow: 0 1px 0 #000,
    0 0 7px rgba(255, 220, 150, 0.22);
}
.elevation-buff-buy-btn:disabled .elevation-buff-buy-btn__label {
  color: rgba(202, 190, 170, 0.72) !important;
  font-size: 9.4px;
  text-shadow: 0 1px 0 #000;
}
.elevation-buff-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 999999;
  width: min(270px, calc(100vw - 34px));
  min-height: 60px;
  display: block;
  padding: 8px 10px;
  color: #f0dfbf;
  background: linear-gradient(
      180deg,
      rgb(20 14 9) 0%,
      rgb(58 46 31) 100%
    );
  box-shadow: 0 7px 15px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(224, 191, 121, 0.95),
    inset 0 0 0 3px rgba(8, 10, 12, 0.98),
    inset 0 0 0 4px rgba(224, 191, 121, 0.28),
    inset 0 0 12px rgba(255, 210, 140, 0.03);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 0.12s ease,
    transform 0.12s ease,
    visibility 0s linear 0.12s;
  will-change: opacity, transform;
  backface-visibility: hidden;
}
.elevation-buff-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #5b3a1f 0%, #1c1a17 100%);
  box-shadow: inset -1px -1px 0 rgba(224, 191, 121, 0.88),
    inset -3px -3px 0 rgba(8, 10, 12, 0.98);
  transform: translateX(-50%)
    rotate(45deg);
  clip-path: polygon(100% 100%, 100% 0, 0 100%);
}
.elevation-buff-card:hover .elevation-buff-tooltip,
.elevation-buff-card:focus-within .elevation-buff-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.12s ease,
    transform 0.12s ease,
    visibility 0s linear 0s;
}
.elevation-buff-tooltip.is-locked {
  background: linear-gradient(
      180deg,
      rgba(31, 28, 24, 0.98) 0%,
      rgba(11, 10, 9, 0.98) 100%
    );
  box-shadow: 0 7px 15px rgba(0, 0, 0, 0.56),
    inset 0 0 0 1px rgba(132, 121, 104, 0.62),
    inset 0 0 0 3px rgba(8, 10, 12, 0.98),
    inset 0 0 0 4px rgba(132, 121, 104, 0.18),
    inset 0 0 12px rgba(255, 210, 140, 0.015);
}
.elevation-buff-tooltip.is-locked::after {
  background: linear-gradient(135deg, #2b2823 0%, #141311 100%);
  box-shadow: inset -1px -1px 0 rgba(132, 121, 104, 0.62),
    inset -3px -3px 0 rgba(8, 10, 12, 0.98);
}
.elevation-buff-tooltip__body {
  min-width: 0;
}
.elevation-buff-tooltip__title {
  color: #ffe8ba !important;
  font-family: "Cormorant SC", serif;
  font-size: 12.5px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #000,
    0 0 7px rgba(217, 172, 108, 0.14);
}
.elevation-buff-tooltip.is-locked .elevation-buff-tooltip__title {
  color: rgba(202, 190, 170, 0.72) !important;
}
.elevation-buff-tooltip__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 5px;
}
.elevation-buff-tooltip__meta span {
  font-family: "Cormorant SC", serif;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78);
}
.elevation-buff-tooltip__meta-price {
  color: #ffd985 !important;
}
.elevation-buff-tooltip__meta-duration {
  color: #9dd6ff !important;
}
.elevation-buff-tooltip.is-locked .elevation-buff-tooltip__meta-price,
.elevation-buff-tooltip.is-locked .elevation-buff-tooltip__meta-duration {
  color: rgba(190, 184, 176, 0.62) !important;
}
.elevation-buff-tooltip__divider {
  width: 100%;
  height: 1px;
  margin: 6px 0;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(224, 191, 121, 0.38),
      transparent
    );
  box-shadow: 0 0 6px rgba(224, 191, 121, 0.08);
}
.elevation-buff-tooltip.is-locked .elevation-buff-tooltip__divider {
  background: linear-gradient(
      90deg,
      transparent,
      rgba(132, 121, 104, 0.32),
      transparent
    );
}
.elevation-buff-tooltip__line {
  font-family: "Cormorant SC", serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.22;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78);
}
.elevation-buff-tooltip__line + .elevation-buff-tooltip__line {
  margin-top: 4px;
}
.elevation-buff-tooltip__line--main {
  color: #a7f4c1 !important;
  font-weight: 900;
}
.elevation-buff-tooltip__line--option {
  color: #d1b9ff !important;
}
.elevation-buff-tooltip.is-locked .elevation-buff-tooltip__line--main,
.elevation-buff-tooltip.is-locked .elevation-buff-tooltip__line--option {
  color: rgba(190, 184, 176, 0.66) !important;
}
.elevation-buff-tooltip__state {
  margin-top: 6px;
  font-family: "Cormorant SC", serif;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.15;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78);
}
.elevation-buff-tooltip__state.is-open {
  color: rgba(166, 244, 193, 0.9) !important;
}
.elevation-buff-tooltip__state.is-locked {
  color: rgba(190, 184, 176, 0.72) !important;
}
.elevation-stats-frame,
.elevation-stats-frame--static {
  position: relative !important;
  top: auto !important;
  align-self: start !important;
  transform: none !important;
  perspective: none !important;
  will-change: auto !important;
}
.elevation-stats-frame:hover,
.elevation-stats-frame--static:hover {
  transform: none !important;
}
.elevation-stats-frame--static,
.elevation-stats-frame--static .ornate-frame-content {
  animation: none !important;
  will-change: auto !important;
}
.elevation-stats-frame > *,
.elevation-stats-frame > *::before,
.elevation-stats-frame > *::after,
.elevation-stats-frame .ornate-frame-content,
.elevation-stats-frame .ornate-frame-content::before,
.elevation-stats-frame .ornate-frame-content::after {
  transform: none !important;
  perspective: none !important;
  will-change: auto !important;
  animation-play-state: paused !important;
}
.elevation-stats-frame,
.elevation-stats-frame > *,
.elevation-stats-frame .ornate-frame-content {
  transition-property: opacity,
    color,
    background,
    border-color,
    box-shadow,
    filter !important;
}
.elevation-path-bottom-frame {
  margin-top: 18px;
}
.elevation-path-bottom-actions {
  width: 100%;
  min-width: 0;
}
@media (max-width: 1536px) {
  .elevation-path-info-two-cols {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .elevation-path-info-two-cols::after {
    display: none;
  }
  .elevation-path-info-panel--quote {
    position: relative;
    padding-bottom: 18px;
  }
  .elevation-path-info-panel--quote::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(143, 109, 73, 0.18) 16%,
        rgba(236, 177, 78, 0.42) 50%,
        rgba(143, 109, 73, 0.18) 84%,
        transparent 100%
      );
    box-shadow: 0 0 10px rgba(236, 177, 78, 0.08);
  }
  .elevation-showcase-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .elevation-showcase-side {
    max-width: 520px;
    margin: 0 auto;
  }
}
@media (max-width: 1180px) {
  .elevation-shop-layout {
    grid-template-columns: 1fr;
  }
  .elevation-stats-frame {
    position: relative;
    top: auto;
  }
  .elevation-stats-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .elevation-buff-grid {
    --buff-card-w: clamp(150px, 20vw, 210px);
    grid-template-columns: repeat(3, var(--buff-card-w));
  }
}
@media (max-width: 820px) {
  .elevation-path-shell {
    padding: 0 10px 22px;
  }
  .elevation-path-menu-inner {
    padding-left: 0;
  }
  .elevation-path-menu-list {
    gap: 2px 6px;
  }
  .elevation-path-menu-tab {
    min-width: 150px;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 8px;
  }
  .elevation-path-menu-tab__icon {
    width: 50px;
    height: 50px;
  }
  .elevation-path-menu-tab__text {
    font-size: 16px;
  }
  .elevation-showcase-detail-stack {
    min-height: 0;
  }
  .elevation-showcase-tabs {
    gap: 12px;
  }
  .elevation-showcase-tab {
    width: 82px;
    min-width: 82px;
  }
  .elevation-showcase-tab__image {
    width: 82px;
    height: 92px;
  }
  .elevation-stats-panel {
    grid-template-columns: 1fr;
  }
  .elevation-buff-grid {
    --buff-card-w: min(210px, 100%);
    grid-template-columns: 1fr;
    justify-content: center;
    justify-items: center;
  }
  .elevation-buff-card {
    width: var(--buff-card-w);
    justify-self: center;
  }
  .elevation-buff-level.is-open .elevation-buff-level__body {
    max-height: 900px;
  }
  .elevation-buff-tooltip {
    width: min(280px, calc(100vw - 34px));
  }
}
@media (max-width: 560px) {
  .elevation-path-shell {
    padding-left: 6px;
    padding-right: 6px;
  }
  .elevation-path-menu-list {
    justify-content: center;
  }
  .elevation-path-menu-tab {
    min-width: 138px;
    max-width: 170px;
  }
  .elevation-path-menu-tab__text {
    font-size: 14px;
    white-space: normal;
  }
  .elevation-showcase-detail__stages {
    grid-template-columns: 1fr;
  }
  .elevation-showcase-tabs {
    flex-wrap: wrap;
  }
  .elevation-showcase-small__title {
    padding-right: 64px;
    font-size: 20px;
  }
  .elevation-stat-card {
    grid-template-columns: 30px minmax(0, 1fr);
  }
  .elevation-stat-card__icon {
    width: 30px;
    height: 30px;
  }
  .elevation-stat-card__icon img {
    max-width: 22px;
    max-height: 22px;
  }
  .elevation-buff-tooltip {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    padding: 8px;
  }
  .elevation-buff-tooltip__points {
    width: 34px;
    height: 34px;
    font-size: 14px;
  }
}
@media (max-width: 760px) {
  .elevation-showcase-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .elevation-showcase-side {
    order: 1;
    max-width: none;
  }
  .elevation-showcase-detail-frame {
    order: 2;
  }
  .elevation-showcase-tabs {
    gap: 12px;
  }
  .elevation-showcase-tab {
    width: 66px;
    min-width: 66px;
  }
  .elevation-showcase-tab__image {
    width: 66px;
    height: 73px;
  }
  .elevation-showcase-small__title {
    font-size: 21px;
    padding-right: 68px;
  }
}
.elevation-path-block--member-progress {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 14px;
  overflow: visible;
}
.elevation-member-active-buff-center {
  width: min(360px, 100%);
  margin: 0 auto 4px;
  display: grid;
  justify-items: center;
  overflow: visible;
}
.elevation-member-active-buff-card {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 28px 16px 20px;
  border: 0;
  border-radius: 0;
  background: url("/ui/baff_card.png")
    center / 100% 100%
    no-repeat;
  box-shadow: none;
  overflow: visible;
}
.elevation-member-active-buff-card__icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: url("/ui/monster_frame.png")
    center / contain
    no-repeat;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 5px rgba(216, 171, 101, 0.12));
}
.elevation-member-active-buff-card__icon img {
  max-width: 23px;
  max-height: 23px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 4px rgba(255, 230, 170, 0.12));
  pointer-events: none;
  user-select: none;
}
.elevation-member-active-buff-card__body {
  min-width: 0;
}
.elevation-member-active-buff-card__label {
  color: rgba(191, 167, 122, 0.72);
  font-family: "Cormorant SC", serif;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.82);
}
.elevation-member-active-buff-card__name {
  margin-top: 4px;
  color: #ffe8ba;
  font-family: "Cormorant SC", serif;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #000,
    0 0 7px rgba(217, 172, 108, 0.12);
}
.elevation-member-active-buff-card__effect {
  margin-top: 4px;
  color: rgba(236, 220, 183, 0.76);
  font-family: "Cormorant SC", serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.18;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78);
}
.elevation-member-active-buff-card__time {
  margin-top: 4px;
  color: #9dd6ff;
  font-family: "Cormorant SC", serif;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.15;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78);
}
.elevation-buff-buy-btn--active {
  pointer-events: none;
  cursor: default;
}
.elevation-buff-buy-btn--active::before {
  filter: brightness(0.92)
    saturate(0.95);
}
.elevation-buff-buy-btn--active::after {
  opacity: 0 !important;
}
.elevation-buff-buy-btn--active .elevation-buff-buy-btn__label {
  color: rgba(255, 232, 186, 0.82) !important;
}
.elevation-member-horizontal-progress-frame {
  width: 100%;
  min-width: 0;
  overflow: visible !important;
}
.elevation-member-progress-horizontal {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 14px;
  overflow: visible;
}
.elevation-member-progress-horizontal__top {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.elevation-member-progress-horizontal__top div {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(191, 167, 122, 0.13);
  border-radius: 4px;
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.016) 0%,
      rgba(255, 216, 148, 0.03) 48%,
      rgba(255, 255, 255, 0.012) 100%
    );
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 232, 186, 0.03);
}
.elevation-member-progress-horizontal__top span,
.elevation-member-progress-horizontal__bar-head span {
  display: block;
  min-width: 0;
  color: rgba(191, 167, 122, 0.72);
  font-family: "Cormorant SC", serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.82);
}
.elevation-member-progress-horizontal__top strong,
.elevation-member-progress-horizontal__bar-head strong {
  display: block;
  margin-top: 4px;
  color: #ffe8ba;
  font-family: "Cormorant SC", serif;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 #000,
    0 0 7px rgba(217, 172, 108, 0.1);
}
.elevation-member-progress-horizontal__bar-head {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.elevation-member-progress-horizontal__bar-wrap {
  width: 100%;
  min-width: 0;
}
.elevation-member-progress-horizontal__bar-wrap .elevation-stat-progress {
  width: 100%;
}
.elevation-member-top-contributors {
  width: min(720px, 100%);
  min-width: 0;
  margin: 2px auto 0;
  display: grid;
  gap: 10px;
}
.elevation-member-top-contributors__title {
  color: rgba(191, 167, 122, 0.76);
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.86),
    0 0 7px rgba(217, 172, 108, 0.1);
}
.elevation-member-top-contributors__list {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.elevation-member-top-contributors__item {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "place name"
    "place resets";
  column-gap: 8px;
  row-gap: 3px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(191, 167, 122, 0.13);
  border-radius: 4px;
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.016) 0%,
      rgba(255, 216, 148, 0.03) 48%,
      rgba(255, 255, 255, 0.012) 100%
    );
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 232, 186, 0.03);
}
.elevation-member-top-contributors__item span {
  grid-area: place;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: #ffe8ba;
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  border: 1px solid rgba(217, 172, 108, 0.26);
  border-radius: 50%;
  background: radial-gradient(
      circle,
      rgba(236, 177, 78, 0.09) 0%,
      rgba(0, 0, 0, 0.14) 76%
    );
  text-shadow: 0 1px 0 #000;
}
.elevation-member-top-contributors__item strong {
  grid-area: name;
  min-width: 0;
  color: #ffe8ba;
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 #000,
    0 0 7px rgba(217, 172, 108, 0.1);
}
.elevation-member-top-contributors__item em {
  grid-area: resets;
  min-width: 0;
  color: rgba(236, 220, 183, 0.72);
  font-family: "Cormorant SC", serif;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78);
}
@media (max-width: 900px) {
  .elevation-member-progress-horizontal__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .elevation-member-top-contributors__list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .elevation-member-active-buff-center {
    width: min(320px, 100%);
  }
  .elevation-member-progress-horizontal__top {
    grid-template-columns: 1fr;
  }
  .elevation-member-progress-horizontal__bar-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
}
.elevation-gm-top-contributors-center {
  width: 100%;
  max-width: 980px;
  min-width: 0;
  margin: 18px auto 0;
}
.elevation-member-top-contributors--gm-wide {
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.elevation-member-top-contributors--gm-wide .elevation-member-top-contributors__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.elevation-member-top-contributors--gm-wide .elevation-member-top-contributors__item {
  min-width: 0;
}
.elevation-member-top-contributors--gm-wide .elevation-member-top-contributors__item strong,
.elevation-member-top-contributors--gm-wide .elevation-member-top-contributors__item em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 1100px) {
  .elevation-member-top-contributors--gm-wide .elevation-member-top-contributors__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .elevation-gm-top-contributors-center {
    margin-top: 14px;
  }
  .elevation-member-top-contributors--gm-wide .elevation-member-top-contributors__list {
    grid-template-columns: 1fr;
  }
}
.rules-page {
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: #ecdcb7;
  overflow: visible;
  --rules-green: #a7f4c1;
  --rules-green-soft: rgba(167, 244, 193, 0.72);
  --rules-green-dim: rgba(113, 185, 143, 0.46);
  --rules-green-dark: rgba(19, 52, 36, 0.56);
  --rules-gold: #ecdcb7;
  --rules-gold-light: #ffe8ba;
  --rules-gold-dim: rgba(236, 220, 183, 0.72);
  --rules-danger: #ff9d8f;
  --rules-danger-soft: rgba(255, 120, 102, 0.78);
  --rules-danger-border: rgba(255, 109, 90, 0.28);
  --rules-danger-bg: rgba(76, 19, 16, 0.46);
  --rules-penalty: #ffc778;
  --rules-penalty-soft: rgba(255, 190, 109, 0.8);
  --rules-penalty-border: rgba(255, 178, 82, 0.26);
  --rules-penalty-bg: rgba(78, 48, 15, 0.44);
  --rules-note: #9dd6ff;
  --rules-note-soft: rgba(157, 214, 255, 0.78);
  --rules-note-border: rgba(126, 195, 255, 0.24);
  --rules-note-bg: rgba(18, 46, 68, 0.42);
}
.rules-page .account-shell__content-frame.rules-page-content-frame {
  position: relative;
  z-index: 2;
  width: var(--account-content-width, 100%);
  min-height: 1182px;
  height: auto;
  left: var(--account-content-left, 0);
  margin: 0;
  padding: 22px 28px 26px;
  box-sizing: border-box;
  overflow: visible;
  background-image: url("/ui/content_frame.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
}
.rules-page__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0;
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  gap: 13px;
}
.rules-page__header {
  width: 100%;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 5px;
  margin: 0;
}
.rules-page__title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
  color: var(--rules-gold-light);
  font-family: "Cormorant SC", serif;
  font-size: 20px;
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 1px 0 #000,
    0 0 10px rgba(167, 244, 193, 0.12),
    0 0 14px rgba(217, 172, 108, 0.1);
}
.rules-page__title img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(167, 244, 193, 0.2))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.68));
}
.rules-page__main-divider {
  width: min(300px, 86vw);
  height: 13px;
  background: url("/ui/divider_horinozntal_brown.png") center / contain no-repeat;
  opacity: 0.66;
  pointer-events: none;
  filter: drop-shadow(0 0 7px rgba(0, 0, 0, 0.48));
}
.rules-page-menu {
  --diamond-menu-tab-max-width: 218px;
  --diamond-edge-outer: linear-gradient(
      135deg,
      #120f0c 0%,
      #2d271d 16%,
      #352d27 30%,
      #5b4b3b 42%,
      #9b7b55 52%,
      #f0dfad 58%,
      #b18a5f 66%,
      #5a4736 78%,
      #1a1511 100%
    );
  --diamond-edge-inner: linear-gradient(
      221deg,
      #f0dfad 0%,
      #caa06e 10%,
      #806244 24%,
      #514236 40%,
      #362f28 58%,
      #2d271d 76%,
      #120f0c 100%
    );
  --diamond-bg-shadow: rgba(177, 138, 95, 0.22);
  --diamond-glow-0-a: rgba(177, 138, 95, 0.16);
  --diamond-glow-0-b: rgba(75, 55, 38, 0.12);
  --diamond-glow-50-a: rgba(224, 176, 111, 0.28);
  --diamond-glow-50-b: rgba(128, 88, 52, 0.16);
  --diamond-glow-100-a: rgba(156, 113, 70, 0.22);
  --diamond-glow-100-b: rgba(50, 35, 25, 0.16);
  --diamond-text-base: #b99b78;
  --diamond-text-active: #f0dfad;
  width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
}
.rules-page-menu-inner {
  position: relative;
  padding: 8px 0 10px 18px;
  margin-top: 0;
  overflow: visible;
}
.rules-page-menu-inner::before {
  content: none;
}
.rules-page-menu-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
  overflow: visible;
}
.rules-page-menu-tab {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: auto;
  min-width: 168px;
  max-width: var(--diamond-menu-tab-max-width);
  min-height: 50px;
  padding: 8px 6px 8px 0;
  margin: 0;
  border: 0;
  outline: none;
  border-radius: 0;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: inherit;
  font: inherit;
  font-family: "Cormorant SC", serif;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.24s ease,
    opacity 0.24s ease,
    filter 0.24s ease;
}
.rules-page-menu-tab:hover,
.rules-page-menu-tab:focus,
.rules-page-menu-tab:focus-visible,
.rules-page-menu-tab:active {
  border: 0;
  outline: none;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
.rules-page-menu-tab:hover {
  transform: translateX(2px);
}
.rules-page-menu-tab__icon {
  position: relative;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  isolation: isolate;
  flex: 0 0 46px;
}
.rules-page-menu-tab__icon-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("/ui/tab_romb2.svg") center / contain no-repeat;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.34));
  transition: transform 0.45s ease,
    filter 0.45s ease,
    opacity 0.45s ease;
}
.rules-page-menu-tab__icon-glow {
  position: absolute;
  inset: -2px;
  z-index: 0;
  background: url("/ui/tab_romb2.svg") center / contain no-repeat;
  opacity: 0;
  transform: scale(1.01);
  pointer-events: none;
  transition: opacity 0.45s ease,
    transform 0.45s ease,
    filter 0.45s ease;
}
.rules-page-menu-tab__icon-edge {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease,
    transform 0.45s ease,
    filter 0.45s ease;
}
.rules-page-menu-tab__icon-edge::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--diamond-edge-outer);
  background-size: 260% 260%;
  background-position: 0% 50%;
  -webkit-mask: url("/ui/tab_romb2.svg") center / contain no-repeat;
  mask: url("/ui/tab_romb2.svg") center / contain no-repeat;
  mix-blend-mode: normal;
}
.rules-page-menu-tab__icon-edge::after {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--diamond-edge-inner);
  background-size: 260% 260%;
  background-position: 100% 50%;
  -webkit-mask: url("/ui/tab_romb2.svg") center / contain no-repeat;
  mask: url("/ui/tab_romb2.svg") center / contain no-repeat;
  mix-blend-mode: normal;
}
.rules-page-menu-tab:hover .rules-page-menu-tab__icon-glow,
.rules-page-menu-tab.is-active .rules-page-menu-tab__icon-glow {
  opacity: 0.92;
  animation: rulesDiamondGlowShift 5.8s ease-in-out infinite alternate,
    rulesDiamondGlowPulse 3.8s ease-in-out infinite;
}
.rules-page-menu-tab:hover .rules-page-menu-tab__icon-edge,
.rules-page-menu-tab.is-active .rules-page-menu-tab__icon-edge {
  opacity: 0.86;
}
.rules-page-menu-tab:hover .rules-page-menu-tab__icon-edge::before,
.rules-page-menu-tab.is-active .rules-page-menu-tab__icon-edge::before {
  animation: rulesDiamondFlowOuter 5.8s ease-in-out infinite alternate;
}
.rules-page-menu-tab:hover .rules-page-menu-tab__icon-edge::after,
.rules-page-menu-tab.is-active .rules-page-menu-tab__icon-edge::after {
  animation: rulesDiamondFlowInner 5.8s ease-in-out infinite alternate;
}
.rules-page-menu-tab:hover .rules-page-menu-tab__icon-bg,
.rules-page-menu-tab.is-active .rules-page-menu-tab__icon-bg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 6px var(--diamond-bg-shadow));
}
.rules-page-menu-tab__icon-image {
  position: relative;
  z-index: 3;
  width: 27px;
  height: 27px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.75));
}
.rules-page-menu-tab__text-wrap {
  min-width: 0;
  display: flex;
  align-items: center;
}
.rules-page-menu-tab__text {
  color: var(--diamond-text-base);
  white-space: nowrap;
  text-align: left;
  pointer-events: none;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.05;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
  transition: color 0.45s ease,
    text-shadow 0.45s ease;
}
.rules-page-menu-tab.is-long-label .rules-page-menu-tab__text {
  font-size: 14px;
  white-space: normal;
}
.rules-page-menu-tab:hover .rules-page-menu-tab__text,
.rules-page-menu-tab.is-active .rules-page-menu-tab__text {
  color: var(--diamond-text-active);
  text-shadow: 0 0 7px rgba(190, 145, 88, 0.22),
    0 2px 8px rgba(0, 0, 0, 0.34);
}
.rules-page__subpoint-tabs {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 7px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.rules-page__subpoint-tab-list {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.rules-page__subpoint-tab {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  border-radius: 0;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rules-page__subpoint-tab:hover,
.rules-page__subpoint-tab:focus,
.rules-page__subpoint-tab:focus-visible,
.rules-page__subpoint-tab:active {
  border: 0;
  outline: none;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
.rules-page__subpoint-tab .rules-page__marker {
  opacity: 0.68;
  filter: saturate(0.82);
  transform: translateY(0);
  transition: opacity 0.16s ease,
    filter 0.16s ease,
    transform 0.16s ease;
}
.rules-page__subpoint-tab:hover .rules-page__marker,
.rules-page__subpoint-tab.is-active .rules-page__marker {
  opacity: 1;
  filter: saturate(1);
  transform: translateY(-1px);
}
.rules-page__subpoint-panels {
  min-width: 0;
  display: grid;
  margin: 0;
}
.rules-page__subpoint-panel {
  min-width: 0;
  grid-area: 1 / 1;
  display: grid;
  gap: 5px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease,
    visibility 0.12s ease;
}
.rules-page__subpoint-panel.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.rules-page__frame {
  width: 100%;
  min-width: 0;
  overflow: visible !important;
}
.rules-page__tab-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  padding: 0 0 4px;
  margin: 0 0 4px;
}
.rules-page__tab-head img {
  width: 25px;
  height: 25px;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(167, 244, 193, 0.18))
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.68));
}
.rules-page__tab-head h2 {
  margin: 0;
  color: var(--rules-gold-light);
  font-family: "Cormorant SC", serif;
  font-size: 16px;
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #000,
    0 0 9px rgba(167, 244, 193, 0.12);
}
.rules-page__columns {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}
.rules-page__column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rules-page__item {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 9px 10px 10px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0%, rgba(255, 216, 148, 0.034) 48%, rgba(255, 255, 255, 0.012) 100%);
  border: 1px solid rgba(191, 167, 122, 0.12);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 232, 186, 0.035);
  overflow: hidden;
}
.rules-page__item-group {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 7px;
  padding: 3px 8px 4px;
  color: rgb(211 180 154);
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  border: 1px solid rgb(235 244 167 / 11%);
  border-radius: 3px;
  background: linear-gradient(180deg, rgb(131 104 63 / 36%), rgb(160 122 98 / 47%));
  box-shadow: inset 0 1px 0 rgba(235, 255, 239, 0.025);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78);
}
.rules-page__item-title {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 0 7px;
  margin: 0 0 8px;
}
.rules-page__item-title::after {
  content: "";
  position: absolute;
  left: 34px;
  right: 18%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(53, 45, 39, 0.42),
      rgba(112, 92, 68, 0.24),
      rgba(236, 220, 183, 0.14),
      transparent
    );
}
.rules-page__item-title > span {
  width: 23px;
  height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(242, 231, 200, 0.94);
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  border-radius: 4px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.82);
  border-radius: 3px;
  border: 1px solid rgba(217, 172, 108, 0.3);
  background: linear-gradient(180deg, rgba(55, 48, 39, 0.78) 0%, rgba(25, 24, 23, 0.82) 100%);
  box-shadow: inset 0 0 8px rgba(217, 172, 108, 0.15), inset 0 1px 0 rgba(255, 232, 186, 0.055), 0 2px 4px rgba(0, 0, 0, 0.5);
  color: #ffdda0;
}
.rules-page__item-title h3 {
  min-width: 0;
  margin: 0;
  color: rgba(236, 220, 183, 0.94);
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.84),
    0 0 7px rgba(167, 244, 193, 0.08);
}
.rules-page__item-body {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.rules-page__text,
.rules-page__marker {
  margin: 0;
  font-family: "Cormorant SC", serif;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78);
}
.rules-page__text {
  color: rgba(236, 220, 183, 0.82);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.28;
}
.rules-page__marker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 4px 8px 5px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 2px 4px rgba(0, 0, 0, 0.16);
}
.rules-page__marker--danger {
  color: var(--rules-danger);
  border: 1px solid var(--rules-danger-border);
  background: linear-gradient(
      180deg,
      rgba(76, 19, 16, 0.54),
      rgba(18, 9, 8, 0.42)
    );
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.84),
    0 0 7px rgba(255, 89, 76, 0.12);
}
.rules-page__marker--penalty {
  color: var(--rules-penalty);
  border: 1px solid var(--rules-penalty-border);
  background: linear-gradient(
      180deg,
      rgba(78, 48, 15, 0.52),
      rgba(18, 12, 6, 0.42)
    );
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.84),
    0 0 7px rgba(255, 178, 82, 0.1);
}
.rules-page__marker--note {
  color: var(--rules-note);
  border: 1px solid var(--rules-note-border);
  background: linear-gradient(
      180deg,
      rgba(18, 46, 68, 0.5),
      rgba(7, 12, 17, 0.4)
    );
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.84),
    0 0 7px rgba(126, 195, 255, 0.1);
}
.rules-page__marker--neutral {
  color: rgba(236, 220, 183, 0.86);
  border: 1px solid rgba(236, 220, 183, 0.16);
  background: linear-gradient(
      180deg,
      rgba(64, 48, 28, 0.42),
      rgba(14, 11, 8, 0.38)
    );
}
.rules-page__details {
  min-width: 0;
  display: grid;
  gap: 7px;
}
.rules-page__detail-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.rules-page__detail-row::before {
  content: none;
}
.rules-page__detail-label {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin: 0 0 6px;
  padding: 0;
}
.rules-page__detail-label .rules-page__marker {
  white-space: normal;
  line-height: 1.05;
}
.rules-page__detail-content {
  min-width: 0;
  display: grid;
  gap: 5px;
  margin: 0;
}
.rules-page__legal-list {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 6px 7px;
  margin: 0;
  list-style: none;
}
.rules-page__legal-list--plain {
  display: block;
  padding: 6px 8px;
  color: rgba(236, 220, 183, 0.78);
  font-family: "Cormorant SC", serif;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.28;
  white-space: pre-line;
  border: 1px solid rgba(167, 244, 193, 0.08);
  border-radius: 3px;
  background: linear-gradient(
      90deg,
      rgba(255, 232, 186, 0.024),
      rgba(255, 232, 186, 0.012)
    );
  box-shadow: inset 0 1px 0 rgba(235, 255, 239, 0.018),
    0 2px 4px rgba(0, 0, 0, 0.14);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78);
}
.rules-page__legal-list li {
  min-width: 0;
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  align-items: start;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.rules-page__legal-list li::before {
  content: "";
  width: 12px;
  height: 12px;
  margin-top: 2px;
  background: url("/ui/list_ico.png") center / contain no-repeat;
  filter: drop-shadow(0 0 5px rgba(236, 220, 183, 0.12))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.72));
}
.rules-page__legal-list li span {
  min-width: 0;
  color: rgba(236, 220, 183, 0.78);
  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.22;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78);
}
.rules-page__legal-list--danger li span,
.rules-page__legal-list.rules-page__legal-list--plain.rules-page__legal-list--danger,
.rules-page__text--danger {
  color: rgba(255, 205, 198, 0.84);
}
.rules-page__legal-list--danger li::before {
  filter: sepia(1)
    saturate(1.8)
    hue-rotate(305deg)
    drop-shadow(0 0 5px rgba(255, 109, 90, 0.18))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.72));
}
.rules-page__legal-list--penalty li span,
.rules-page__legal-list.rules-page__legal-list--plain.rules-page__legal-list--penalty,
.rules-page__text--penalty {
  color: rgba(255, 226, 172, 0.84);
}
.rules-page__legal-list--penalty li::before {
  filter: sepia(1)
    saturate(1.4)
    hue-rotate(350deg)
    drop-shadow(0 0 5px rgba(255, 178, 82, 0.18))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.72));
}
.rules-page__legal-list--note li span,
.rules-page__legal-list.rules-page__legal-list--plain.rules-page__legal-list--note,
.rules-page__text--note {
  color: rgba(203, 232, 255, 0.84);
}
.rules-page__legal-list--note li::before {
  filter: sepia(1)
    saturate(1.3)
    hue-rotate(155deg)
    drop-shadow(0 0 5px rgba(126, 195, 255, 0.18))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.72));
}
@keyframes rulesDiamondGlowShift {
  0% {
    filter: blur(2px)
      brightness(1.1)
      saturate(1.04)
      drop-shadow(0 0 3px var(--diamond-glow-0-a))
      drop-shadow(0 0 6px var(--diamond-glow-0-b));
  }
  50% {
    filter: blur(2px)
      brightness(1.22)
      saturate(1.12)
      drop-shadow(0 0 5px var(--diamond-glow-50-a))
      drop-shadow(0 0 8px var(--diamond-glow-50-b));
  }
  100% {
    filter: blur(2px)
      brightness(1.14)
      saturate(1.08)
      drop-shadow(0 0 4px var(--diamond-glow-100-a))
      drop-shadow(0 0 6px var(--diamond-glow-100-b));
  }
}
@keyframes rulesDiamondGlowPulse {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.018);
  }
  100% {
    opacity: 0.76;
    transform: scale(1);
  }
}
@keyframes rulesDiamondFlowOuter {
  0% {
    background-position: 0% 50%;
    filter: brightness(1.08)
      saturate(1.04)
      contrast(1.06);
  }
  50% {
    background-position: 100% 50%;
    filter: brightness(1.28)
      saturate(1.18)
      contrast(1.16);
  }
  100% {
    background-position: 0% 50%;
    filter: brightness(1.1)
      saturate(1.06)
      contrast(1.08);
  }
}
@keyframes rulesDiamondFlowInner {
  0% {
    background-position: 100% 50%;
    filter: brightness(1.08)
      contrast(1.08);
  }
  50% {
    background-position: 0% 50%;
    filter: brightness(1.3)
      contrast(1.16);
  }
  100% {
    background-position: 100% 50%;
    filter: brightness(1.1)
      contrast(1.08);
  }
}
@media (max-width: 1180px) {
  .rules-page .account-shell__content-frame.rules-page-content-frame {
    padding: 48px 44px 66px;
  }
  .rules-page-menu {
    --diamond-menu-tab-max-width: 202px;
  }
  .rules-page-menu-tab {
    min-width: 154px;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 9px;
  }
  .rules-page-menu-tab__icon {
    width: 52px;
    height: 52px;
  }
  .rules-page-menu-tab__text {
    font-size: 16px;
  }
}
@media (max-width: 920px) {
  .rules-page .account-shell__content-frame.rules-page-content-frame {
    width: 100%;
    left: 0;
    min-height: 1208px;
    padding: 38px 28px 52px;
    background-size: 100% 100%;
  }
  .rules-page-menu-inner {
    padding-left: 0;
  }
  .rules-page-menu-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 220px));
    justify-content: center;
    gap: 6px 10px;
  }
  .rules-page-menu-tab {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .rules-page__columns {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .rules-page .account-shell__content-frame.rules-page-content-frame {
    padding: 30px 15px 42px;
  }
  .rules-page__inner {
    gap: 10px;
  }
  .rules-page__title {
    font-size: 18px;
  }
  .rules-page__title img {
    width: 21px;
    height: 21px;
  }
  .rules-page-menu-list {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .rules-page-menu-tab {
    grid-template-columns: 48px minmax(0, 1fr);
    min-height: 46px;
    padding: 6px 4px 6px 0;
  }
  .rules-page-menu-tab__icon {
    width: 48px;
    height: 48px;
  }
  .rules-page-menu-tab__icon-image {
    width: 24px;
    height: 24px;
  }
  .rules-page-menu-tab__text {
    font-size: 15px;
  }
  .rules-page__tab-head h2 {
    font-size: 19px;
  }
  .rules-page__item {
    padding: 8px 9px 9px;
  }
  .rules-page__item-title h3 {
    font-size: 13px;
  }
  .rules-page__text {
    font-size: 12px;
    line-height: 1.26;
  }
  .rules-page__legal-list li span,
  .rules-page__legal-list--plain {
    font-size: 11.5px;
    line-height: 1.22;
  }
  .rules-page__marker {
    font-size: 9.5px;
  }
}
@media (max-width: 380px) {
  .rules-page .account-shell__content-frame.rules-page-content-frame {
    padding: 26px 10px 36px;
  }
  .rules-page-menu-tab__text {
    font-size: 14px;
  }
  .rules-page__tab-head h2 {
    font-size: 17px;
  }
  .rules-page__item-title h3 {
    font-size: 11.5px;
  }
  .rules-page__text,
  .rules-page__legal-list li span,
  .rules-page__legal-list--plain {
    font-size: 10.5px;
  }
}
.terms-page {
  --terms-gold: var(--rules-gold, #ecdcb7);
  --terms-gold-light: var(--rules-gold-light, #ffe8ba);
  --terms-gold-dim: var(--rules-gold-dim, rgba(236, 220, 183, 0.72));
}
.rules-page.terms-page
  .account-shell__content-frame.rules-page-content-frame.terms-page-content-frame {
  min-height: 1181px;
  padding-bottom: 56px;
}
.terms-page__inner {
  max-width: 1040px;
}
.terms-page__frame {
  width: 100%;
  min-width: 0;
  overflow: visible !important;
}
.terms-page__columns {
  align-items: start;
}
.terms-page__column {
  gap: 10px;
}
.terms-page__item {
  height: auto;
  min-height: 0;
}
.terms-page__item .rules-page__item-body {
  gap: 7px;
}
.terms-page__contact-card {
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.018) 0%,
      rgba(255, 216, 148, 0.038) 48%,
      rgba(255, 255, 255, 0.012) 100%
    );
}
.terms-page__contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 4px;
}
.terms-page__contact-btn.menu-btn-round {
  width: 34px;
  height: 34px;
  margin: 0;
  --btn-base: url("/ui/button_round_brown_3.png");
  --btn-mid: url("/ui/button_round_brown_3.png");
  --btn-top: url("/ui/button_round_brown_3.png");
  flex: 0 0 34px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
}
.terms-page__contact-btn.menu-btn-round:hover {
  opacity: 1;
  filter: brightness(1.08)
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 8px rgba(217, 172, 108, 0.16));
}
.terms-page__contact-btn.menu-btn-round:active {
  filter: brightness(0.98)
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.58));
}
.terms-page__contact-btn-label.menu-btn-round__label {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.terms-page__contact-icon {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.82))
    drop-shadow(0 0 5px rgba(255, 232, 186, 0.12));
}
@media (max-width: 920px) {
  .terms-page__columns {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .terms-page__contact-actions {
    justify-content: flex-start;
  }
  .terms-page__contact-btn.menu-btn-round {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
  }
  .terms-page__contact-icon {
    width: 22px;
    height: 22px;
  }
}
.privacy-page {
  --privacy-gold: var(--rules-gold, #ecdcb7);
  --privacy-gold-light: var(--rules-gold-light, #ffe8ba);
  --privacy-gold-dim: var(--rules-gold-dim, rgba(236, 220, 183, 0.72));
}
.rules-page.privacy-page
  .account-shell__content-frame.rules-page-content-frame.privacy-page-content-frame {
  min-height: 1182px;
  padding-bottom: 56px;
}
.privacy-page__inner {
  max-width: 1040px;
}
.privacy-page__frame {
  width: 100%;
  min-width: 0;
  overflow: visible !important;
}
.privacy-page__columns {
  align-items: start;
}
.privacy-page__column {
  gap: 10px;
}
.privacy-page__item {
  height: auto;
  min-height: 0;
}
.privacy-page__item .rules-page__item-body {
  gap: 7px;
}
.privacy-page__legal-list {
  margin-top: 1px;
}
.privacy-page__contact-card {
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.018) 0%,
      rgba(255, 216, 148, 0.038) 48%,
      rgba(255, 255, 255, 0.012) 100%
    );
}
.privacy-page__contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 4px;
}
.privacy-page__contact-btn.menu-btn-round {
  width: 34px;
  height: 34px;
  margin: 0;
  --btn-base: url("/ui/button_round_brown_3.png");
  --btn-mid: url("/ui/button_round_brown_3.png");
  --btn-top: url("/ui/button_round_brown_3.png");
  flex: 0 0 34px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
}
.privacy-page__contact-btn.menu-btn-round:hover {
  opacity: 1;
  filter: brightness(1.08)
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 8px rgba(217, 172, 108, 0.16));
}
.privacy-page__contact-btn.menu-btn-round:active {
  filter: brightness(0.98)
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.58));
}
.privacy-page__contact-btn-label.menu-btn-round__label {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.privacy-page__contact-icon {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.82))
    drop-shadow(0 0 5px rgba(255, 232, 186, 0.12));
}
@media (max-width: 920px) {
  .privacy-page__columns {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .privacy-page__contact-actions {
    justify-content: flex-start;
  }
  .privacy-page__contact-btn.menu-btn-round {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
  }
  .privacy-page__contact-icon {
    width: 22px;
    height: 22px;
  }
}
.market-modal-backdrop.account-vote-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50000;
  width: 100dvw;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(1px);
}
.account-vote-modal-backdrop .account-vote-modal {
  position: relative;
  width: min(430px, 100%);
  max-width: 100%;
  padding: 19px 20px 18px !important;
  box-sizing: border-box;
  overflow: hidden;
  isolation: isolate;
}
.account-vote-modal__close {
  position: absolute;
  top: 6px;
  right: 9px;
  z-index: 5;
  width: 24px;
  height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: rgba(255, 232, 186, 0.78);
  font-family: "Cormorant SC", serif;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
  transition: color 0.16s ease,
    text-shadow 0.16s ease,
    transform 0.16s ease;
}
.account-vote-modal__close:hover,
.account-vote-modal__close:focus-visible {
  color: #ffe8ba;
  outline: none;
  transform: translateY(-1px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 6px rgba(255, 226, 166, 0.18);
}
.account-vote-modal__text {
  display: grid;
  gap: 7px;
  max-width: 360px;
  margin: 0 auto;
}
.account-vote-modal__text p {
  margin: 0;
}
.account-vote-modal-backdrop .account-vote-modal__reward {
  width: fit-content;
  min-width: 128px;
  max-width: min(330px, 100%);
  margin: 13px auto 0 !important;
  padding: 7px 15px 8px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  color: #ffe8ba;
  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  border: 1px solid rgba(180, 136, 78, 0.52);
  border-radius: 0;
  background: linear-gradient(180deg, rgb(16 15 15), rgb(103 77 48));
  box-shadow: inset 0 1px 0 rgba(255, 226, 166, 0.06),
    inset 0 -8px 14px rgba(0, 0, 0, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 5px rgba(255, 220, 145, 0.1);
}
.account-vote-modal__reward-value {
  color: #ffe8ba;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}
.account-vote-modal__reward-currency {
  color: #d8bf8f;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.account-vote-modal__rule {
  width: min(360px, 100%);
  margin: 13px auto 0;
  padding-top: 8px;
  padding-bottom: 8px;
  min-height: 42px;
  font-size: 12px;
  line-height: 1.25;
}
.account-vote-modal__sites {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
.account-vote-modal__site {
  position: relative;
  z-index: 1;
  width: 132px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid rgba(180, 136, 78, 0.68) !important;
  border-radius: 0;
  background: linear-gradient(
      180deg,
      rgb(17 15 13),
      rgb(54 39 26)
    );
  box-shadow: 0 0 0 1px rgba(255, 226, 166, 0.04),
    inset 0 0 0 1px rgba(255, 226, 166, 0.035),
    inset 0 1px 0 rgba(255, 226, 166, 0.075),
    inset 0 -8px 14px rgba(0, 0, 0, 0.34),
    0 5px 12px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  text-decoration: none;
  transform: translateY(0);
  transition: transform 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}
.account-vote-modal__site::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 0;
  z-index: 1;
  height: 1px;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 226, 166, 0.38),
      transparent
    );
  opacity: 0.8;
  pointer-events: none;
  transition: opacity 0.16s ease,
    background 0.16s ease;
}
.account-vote-modal__site::after {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: 1;
  border: 1px solid rgba(255, 226, 166, 0.08);
  background: linear-gradient(
      180deg,
      rgba(255, 226, 166, 0.04),
      transparent 48%,
      rgba(0, 0, 0, 0.08)
    );
  opacity: 0.7;
  pointer-events: none;
  transition: opacity 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease;
}
.account-vote-modal__site:hover,
.account-vote-modal__site:focus-visible {
  outline: none;
  transform: translateY(-1px);
  border-color: rgba(255, 226, 166, 0.92) !important;
  background: linear-gradient(
      180deg,
      rgb(22 18 14),
      rgb(70 50 31)
    );
  box-shadow: 0 0 0 1px rgba(255, 226, 166, 0.18),
    0 0 8px rgba(218, 171, 99, 0.18),
    inset 0 0 0 1px rgba(255, 226, 166, 0.08),
    inset 0 1px 0 rgba(255, 226, 166, 0.14),
    inset 0 -8px 14px rgba(0, 0, 0, 0.32),
    0 6px 13px rgba(0, 0, 0, 0.34);
}
.account-vote-modal__site:hover::before,
.account-vote-modal__site:focus-visible::before {
  opacity: 1;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 236, 185, 0.62),
      transparent
    );
}
.account-vote-modal__site:hover::after,
.account-vote-modal__site:focus-visible::after {
  opacity: 1;
  border-color: rgba(255, 226, 166, 0.22);
  background: linear-gradient(
      180deg,
      rgba(255, 226, 166, 0.075),
      transparent 48%,
      rgba(0, 0, 0, 0.06)
    );
}
.account-vote-modal__site-img {
  position: relative;
  z-index: 3;
  max-width: 108px;
  max-height: 34px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.68));
  transition: transform 0.16s ease,
    filter 0.16s ease;
}
.account-vote-modal__site:hover .account-vote-modal__site-img,
.account-vote-modal__site:focus-visible .account-vote-modal__site-img {
  transform: translateY(-1px);
  filter: brightness(1.04)
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.78));
}
.account-vote-modal__site--mmotop .account-vote-modal__site-img {
  max-width: 112px;
  max-height: 34px;
}
.account-vote-modal__site--topg .account-vote-modal__site-img {
  max-width: 104px;
  max-height: 32px;
}
@media (max-width: 560px) {
  .market-modal-backdrop.account-vote-modal-backdrop {
    width: 100dvw;
    height: 100dvh;
    padding: max(10px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
    align-items: center;
    justify-content: center;
  }
  .account-vote-modal-backdrop .account-vote-modal {
    width: min(310px, 100%);
    padding: 17px 15px 16px !important;
  }
  .account-vote-modal__text {
    gap: 6px;
    max-width: 260px;
  }
  .account-vote-modal-backdrop .account-vote-modal__reward {
    min-width: 118px;
    max-width: 250px;
    margin-top: 11px !important;
    padding: 6px 12px 7px;
    font-size: 13px;
  }
  .account-vote-modal__reward-value {
    font-size: 14px;
  }
  .account-vote-modal__reward-currency {
    font-size: 11px;
  }
  .account-vote-modal__rule {
    width: min(260px, 100%);
    margin-top: 12px;
    padding: 9px 11px 9px 39px;
    min-height: 42px;
    font-size: 11px;
    line-height: 1.22;
  }
  .account-vote-modal__rule::before {
    left: 12px;
    width: 19px;
    height: 19px;
  }
  .account-vote-modal__sites {
    gap: 9px;
    margin-top: 14px;
  }
  .account-vote-modal__site {
    width: 116px;
    height: 42px;
  }
  .account-vote-modal__site-img {
    max-width: 96px;
    max-height: 30px;
  }
  .account-vote-modal__site--mmotop .account-vote-modal__site-img {
    max-width: 98px;
    max-height: 30px;
  }
  .account-vote-modal__site--topg .account-vote-modal__site-img {
    max-width: 92px;
    max-height: 28px;
  }
}
.scroll-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 40px;
  height: 40px;
  z-index: 2147483647;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 12px, 0) scale(0.92);
  transition: opacity 180ms ease,
    visibility 180ms ease,
    transform 180ms ease,
    filter 180ms ease;
}
.scroll-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
}
.scroll-to-top__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}
.scroll-to-top:hover {
  transform: translate3d(0, -3px, 0) scale(1.04);
}
.scroll-to-top:active {
  transform: translate3d(0, 0, 0) scale(0.96);
}
@media (max-width: 1024px) {
  .scroll-to-top {
    right: 16px;
    bottom: 16px;
    width: 50px;
    height: 50px;
  }
}
@media (max-width: 640px) {
  .scroll-to-top {
    right: 12px;
    bottom: 12px;
    width: 34px;
    height: 34px;
  }
}
@media (max-width: 420px) {
  .scroll-to-top {
    right: 8px;
    bottom: 8px;
    width: 30px;
    height: 30px;
  }
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-duration: initial;
    }
  }
}
/*!***************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/home_page.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************/
/* =========================================================
   HOME PAGE
   Отдельный каркас главной страницы.
   Не используем account-shell, чтобы не конфликтовать с аккаунтом.
========================================================= */

.home-page {
  position: relative;

  width: 100%;
  min-width: 0;

  padding: 0 8px 40px;

  overflow: visible;

  --home-page-max-width: 1280px;

  --hub-nav-max-width: 860px;
  --hub-nav-width: min(100%, var(--hub-nav-max-width));
  --hub-nav-height: 50px;
  --hub-nav-padding-x: 34px;
  --hub-nav-gap: 0;

  --hub-nav-item-height: 42px;
  --hub-nav-font-size: 15px;

  --home-gold: #d8bd7a;
  --home-gold-soft: #f0dfad;
  --home-border: rgba(215, 188, 122, 0.7);
  --home-border-soft: rgba(255, 231, 169, 0.28);
  --home-bg: rgba(5, 8, 10, 0.82);
  --home-bg-deep: rgba(1, 3, 5, 0.92);
}

/* =========================================================
   HOME NAV
========================================================= */

.home-page .mz-hub-nav {
  margin-bottom: 18px;
}

.home-page-nav__panel {
  max-width: var(--hub-nav-max-width);
}

.home-page-nav__list {
  position: relative;
  justify-content: center;
  gap: 0;
}

.home-page-nav__active {
  top: calc(50% + var(--hub-nav-active-shift-y, -1px));
  left: 0;

  width: 104px;
  height: var(--hub-nav-active-height, 46px);

  opacity: 0;

  background: url("/ui/active_nav_menu.png") center center / 100% 100% no-repeat;

  transition:
    transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease;
}

.home-page-nav__item {
  flex: 0 1 180px;
  min-width: 150px;
  max-width: 210px;

  height: var(--hub-nav-item-height);

  padding: 0 14px;

  overflow: visible;
}

.home-page-nav__label {
  top: 1px;
}

.home-page-nav__divider {
  width: 22px;
  height: 44px;
  flex: 0 0 22px;

  opacity: 0.85;
}

.home-page-nav__divider img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
}

/* =========================================================
   HOME PAGE SHELL
========================================================= */

.home-page__shell {
  position: relative;

  width: 100%;
  max-width: var(--home-page-max-width);

  margin: 0 auto;

  display: grid;
  gap: 20px;

  overflow: visible;
}

/* =========================================================
   JOURNAL CARD
========================================================= */

.home-journal-card {
  position: relative;

  width: 100%;
  min-width: 0;

  padding: 0;
  margin: 0;

  border: 0;
  border-radius: 0;

  background: transparent;
  box-shadow: none;

  overflow: visible;
}

.home-journal-card__inner {
  position: relative;

  width: 100%;
  min-width: 0;

  display: block;

  padding: 0;
  margin: 0;

  border: 0;
  border-radius: 0;

  background: transparent;
  box-shadow: none;

  overflow: visible;
}

/* =========================================================
   TOP IMAGE FRAME
========================================================= */

.home-journal-card__media {
  --home-image-inset-x: 2.5%;
  --home-image-inset-top: 4.5%;
  --home-image-inset-bottom: 1.1%;

  --home-image-position-x: 58%;
  --home-image-position-y: center;

  position: relative;
  z-index: 2;

  width: 100%;
  aspect-ratio: 4096 / 1050;

  min-height: 0;
  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 0;
  box-shadow: none;

  background: transparent;

  overflow: hidden;
}

.home-journal-card__image {
  position: absolute;
  z-index: 1;

  left: var(--home-image-inset-x);
  top: var(--home-image-inset-top);

  width: calc(100% - (var(--home-image-inset-x) * 2));
  height: calc(100% - var(--home-image-inset-top) - var(--home-image-inset-bottom));

  display: block;

  object-fit: cover;
  object-position: var(--home-image-position-x) var(--home-image-position-y);

  transform: none;
  filter: none;
  opacity: 1;

  pointer-events: none;
  user-select: none;
}

.home-journal-card__image-overlay {
  position: absolute;
  z-index: 2;

  left: var(--home-image-inset-x);
  top: var(--home-image-inset-top);

  width: calc(100% - (var(--home-image-inset-x) * 2));
  height: calc(100% - var(--home-image-inset-top) - var(--home-image-inset-bottom));

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.28),
      rgba(0, 0, 0, 0.04) 34%,
      rgba(0, 0, 0, 0.04) 66%,
      rgba(0, 0, 0, 0.28)
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.08),
      rgba(0, 0, 0, 0.02) 45%,
      rgba(0, 0, 0, 0.24)
    );

  pointer-events: none;
  user-select: none;
}

.home-journal-card__image-content {
  position: absolute;
  z-index: 3;

  left: calc(var(--home-image-inset-x) + 4%);
  right: calc(var(--home-image-inset-x) + 4%);
  top: 50%;

  transform: translateY(-50%);

  min-height: 1px;

  pointer-events: none;
}

.home-journal-card__frame {
  position: absolute;
  z-index: 4;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: fill;
  object-position: center center;

  transform: none;
  filter: none;
  opacity: 1;

  pointer-events: none;
  user-select: none;
}

.home-journal-card__media::before,
.home-journal-card__media::after {
  content: none;
}

/* =========================================================
   TEXT CONTENT FRAME
========================================================= */

.home-journal-card__body {
  --home-body-width: 97%;
  --home-body-overlap-y: 9px;
  --home-body-min-height: 845px;

  --home-body-padding-top: 25px;
  --home-body-padding-x: 25px;
  --home-body-padding-bottom: 64px;

  position: relative;
  z-index: 1;

  width: var(--home-body-width);
  min-width: 0;
  min-height: var(--home-body-min-height);

  margin: calc(var(--home-body-overlap-y) * -1) auto 0;
  padding:
    var(--home-body-padding-top)
    var(--home-body-padding-x)
    var(--home-body-padding-bottom);

  box-sizing: border-box;

  text-align: center;

  border: 0;
  border-radius: 0;
  box-shadow: none;

  background-image: url("/ui/content_frame.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;

  overflow: visible;
}

.home-journal-card__body > * {
  position: relative;
  z-index: 2;

  min-width: 0;
  max-width: 100%;

  box-sizing: border-box;
}

/* =========================================================
   NEWS SECTION TITLE
========================================================= */

.home-news-section-title {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 12px;

  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: center;
  align-items: center;

  gap: 6px;
  overflow: visible;
}

.home-news-section-title__text {
  color: #f4e4bd;

  font-family: "Cormorant SC", serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  text-align: center;

  text-shadow:
    0 1px 0 rgba(0, 0, 0, 1),
    0 0 10px rgba(226, 190, 115, 0.18);
}

.home-news-section-title__line {
  height: 25px;
  aspect-ratio: 1725 / 184;

  background-image: url("/news/text_divider_right.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;

  pointer-events: none;
}

.home-news-section-title__line--left {
  transform: scaleX(-1);
}

/* =========================================================
   NEWS FEED
========================================================= */

.home-news-feed {
  width: 100%;
  max-width: 1100px;

  margin: 0 auto;

  display: grid;
  gap: 12px;

  overflow: visible;
}

/* News: 2 колонки */
.home-news-feed--news {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Promotions: 1 колонка */
.home-news-feed--promotions {
  grid-template-columns: minmax(0, 1fr);
}

.home-news-frame {
  width: 100%;
  min-width: 0;

  overflow: visible;
}

/* Широкая карточка занимает весь ряд */
.home-news-frame--wide {
  grid-column: 1 / -1;
}

/* =========================================================
   NEWS CARD
   Фон убран: фон/рамку даёт OrnateFrame.
========================================================= */

.home-news-card {
  position: relative;

  width: 100%;
  min-width: 0;
  min-height: 112px;

  display: grid;
  grid-template-columns: minmax(132px, 37%) minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;

  padding: 7px 9px;

  color: rgba(232, 225, 207, 0.86);

  background: transparent;
  box-shadow: none;

  overflow: hidden;
}

.home-news-card--with-image {
  grid-template-columns: minmax(132px, 37%) minmax(0, 1fr);
}

.home-news-card--text {
  grid-template-columns: minmax(0, 1fr);
  min-height: 112px;
}

.home-news-card--text .home-news-card__content {
  padding: 8px 9px;
}

.home-news-card--text .home-news-card__excerpt {
  max-width: 100%;

  -webkit-line-clamp: 3;
}

/* Длинная карточка на всю ширину */
.home-news-card--wide {
  min-height: 118px;

  grid-template-columns: minmax(210px, 285px) minmax(0, 1fr);

  padding: 8px 10px;
}

.home-news-card--wide .home-news-card__media-frame {
  min-height: 100px;
}

.home-news-card--wide .home-news-card__content {
  padding-right: 8px;
}

.home-news-card--wide .home-news-card__title {
  font-size: 21px;
}

.home-news-card--wide .home-news-card__excerpt {
  -webkit-line-clamp: 2;
}

/* =========================================================
   PROMOTIONS VARIANT
   Promotions используют базовую news-card структуру,
   но идут в 1 колонку и могут быть выше.
========================================================= */

.home-news-feed--promotions .home-news-card {
  min-height: 140px;
}

.home-news-feed--promotions .home-news-card--with-image {
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
}

/* =========================================================
   NEWS IMAGE FRAME
========================================================= */

.home-news-card__media {
  position: relative;

  min-width: 0;

  display: flex;
  align-items: stretch;

  text-decoration: none;

  overflow: visible;
}

.home-news-card__media-frame {
  position: relative;

  width: 100%;
  min-height: 94px;

  aspect-ratio: 840 / 350;

  margin: 0;
  padding: 3px;

  isolation: isolate;

  background:
    linear-gradient(
      180deg,
      rgba(255, 225, 156, 0.08),
      transparent 24%,
      transparent 76%,
      rgba(90, 55, 30, 0.1)
    ),
    linear-gradient(180deg, #30251a 0%, #151d1e 30%, #0c1111 100%);

  border: 1px solid rgba(206, 150, 78, 0.36);

  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255, 236, 185, 0.055),
    inset 0 0 9px rgba(0, 0, 0, 0.48);
}

.home-news-card__media-frame::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: 4;
  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(244, 204, 126, 0.48),
      transparent
    ) center top / 74% 1px no-repeat,
    linear-gradient(
      90deg,
      transparent,
      rgba(244, 204, 126, 0.22),
      transparent
    ) center bottom / 74% 1px no-repeat,
    linear-gradient(
      180deg,
      transparent,
      rgba(244, 204, 126, 0.13),
      transparent
    ) left center / 1px 62% no-repeat,
    linear-gradient(
      180deg,
      transparent,
      rgba(244, 204, 126, 0.13),
      transparent
    ) right center / 1px 62% no-repeat;
}

.home-news-card__media-frame::after {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: 5;
  pointer-events: none;

  border: 1px solid rgba(75, 130, 136, 0.15);
}

.home-news-card__media-inner {
  position: relative;
  z-index: 2;

  width: 100%;
  height: 100%;

  display: block;

  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      rgba(7, 10, 12, 0.95) 0%,
      rgba(28, 40, 41, 0.72) 46%,
      rgba(7, 10, 12, 0.44) 100%
    );

  border: 1px solid rgba(227, 174, 92, 0.14);

  box-shadow:
    inset 0 0 0 1px rgba(78, 142, 148, 0.08),
    inset 0 0 11px rgba(0, 0, 0, 0.54);
}

.home-news-card__image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;

  filter: none;
  transform: none;

  transition:
    transform 0.28s ease,
    filter 0.28s ease;

  user-select: none;
  pointer-events: none;
}

.home-news-card__media:hover .home-news-card__image {
  transform: scale(1.035);
  filter: brightness(1.08);
}

/* =========================================================
   NEWS CARD CONTENT
========================================================= */

.home-news-card__content {
  min-width: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 1px 0;

  text-align: left;
}

.home-news-card__top {
  margin-bottom: 5px;

  display: flex;
  align-items: center;
  gap: 7px;
}

.home-news-card__badge {
  position: relative;

  width: fit-content;
  min-width: 52px;

  padding: 3px 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 3px;
  border: 1px solid rgba(217, 172, 108, 0.3);

  background:
    linear-gradient(
      180deg,
      rgba(45, 48, 45, 0.88) 0%,
      rgba(18, 20, 20, 0.94) 100%
    );

  box-shadow:
    inset 0 0 8px rgba(217, 172, 108, 0.15),
    inset 0 1px 0 rgba(255, 232, 186, 0.055),
    0 2px 4px rgba(0, 0, 0, 0.5);

  color: #f1ddb1;

  font-family: "Cormorant SC", serif;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;

  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.95),
    0 0 6px rgba(255, 221, 150, 0.18);
}

.home-news-card__badge::before,
.home-news-card__badge::after {
  content: "";
  position: absolute;
  top: 50%;

  width: 2px;
  height: 2px;

  border-radius: 50%;

  background: #ffdda0;
  box-shadow: 0 0 3px #ffdda0;

  transform: translateY(-50%);
}

.home-news-card__badge::before {
  left: -4px;
}

.home-news-card__badge::after {
  right: -4px;
}

.home-news-card__title {
  margin: 0 0 5px;

  font-family: "Cormorant SC", serif;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.home-news-card__title a {
  color: #f4e4bd;
  text-decoration: none;

  text-shadow:
    0 1px 0 rgba(0, 0, 0, 1),
    0 0 9px rgba(226, 190, 115, 0.14);

  transition:
    color 0.22s ease,
    text-shadow 0.22s ease;
}

.home-news-card__title a:hover {
  color: #fff1ca;

  text-shadow:
    0 1px 0 rgba(0, 0, 0, 1),
    0 0 12px rgba(255, 221, 148, 0.28);
}

.home-news-card__excerpt {
  max-width: 100%;

  margin: 0;

  color: rgba(226, 222, 209, 0.78);

  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: 0.02em;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.86);

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  overflow: hidden;
}

/* =========================================================
   NEWS META BOTTOM
========================================================= */

.home-news-card__bottom {
  margin-top: 7px;

  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;

  color: rgba(206, 199, 178, 0.78);

  font-family: "Cormorant SC", serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.045em;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.home-news-card__info {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  min-width: 0;
}

.home-news-card__info img {
  width: 12px;
  height: 12px;

  object-fit: contain;

  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

.home-news-card__dot {
  width: 3px;
  height: 3px;

  border-radius: 50%;

  background: rgba(218, 186, 118, 0.7);

  box-shadow: 0 0 6px rgba(218, 186, 118, 0.3);
}

/* =========================================================
   NEWS READ MORE BUTTON
========================================================= */

.home-news-card__read-more {
  --news-read-btn-w: 115px;
  --news-read-btn-x: 2px;
  --news-read-btn-y: 2px;

  position: relative;

  width: var(--news-read-btn-w);
  min-width: var(--news-read-btn-w);
  max-width: var(--news-read-btn-w);

  aspect-ratio: 895 / 160;

  margin-left: auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 14px;

  border: 0;
  border-radius: 0;

  background: url("/sidebar/sidebar_button.png") center center / 100% 100% no-repeat;

  color: #f5e6bd;

  text-decoration: none;
  text-transform: uppercase;

  filter: none;
  box-shadow: none;

  transform: translate(var(--news-read-btn-x), var(--news-read-btn-y));

  transition:
    filter 0.22s ease,
    transform 0.22s ease,
    color 0.22s ease;
}

.home-news-card__read-more-label {
  position: relative;
  top: 0;

  max-width: calc(var(--news-read-btn-w) - 32px);

  display: block;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-family: "Cormorant SC", serif;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;

  text-align: center;

  color: inherit;

  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.95),
    0 0 6px rgba(255, 224, 150, 0.2);

  pointer-events: none;
}

.home-news-card__read-more:hover {
  color: #fff3cf;
  filter: brightness(1.08);
  transform: translate(var(--news-read-btn-x), calc(var(--news-read-btn-y) - 1px));
}

.home-news-card__read-more--cta {
  margin-left: 0;
}

/* =========================================================
   HOME PAGE + TOP FRAME RESPONSIVE
========================================================= */

@media (max-width: 1560px) {
  .home-page {
    --home-page-max-width: 100%;

    --hub-nav-max-width: 800px;
    --hub-nav-height: 50px;
    --hub-nav-padding-x: 30px;
    --hub-nav-font-size: 14px;
  }

  .home-page__shell {
    gap: 18px;
  }

  .home-page-nav__item {
    flex-basis: 170px;
    min-width: 140px;
    max-width: 200px;

    padding: 0 12px;
  }

  .home-page-nav__divider {
    width: 20px;
    height: 40px;
    flex-basis: 20px;
  }

  .home-journal-card__body {
    --home-body-width: 97%;
    --home-body-overlap-y: 18px;
    --home-body-min-height: 855px;

    --home-body-padding-top: 25px;
    --home-body-padding-x: 25px;
    --home-body-padding-bottom: 64px;
  }
}

@media (max-width: 1280px) {
  .home-page {
    padding: 0 6px 36px;

    --home-page-max-width: 100%;

    --hub-nav-max-width: 740px;
    --hub-nav-height: 48px;
    --hub-nav-padding-x: 26px;
    --hub-nav-font-size: 13px;
  }

  .home-page .mz-hub-nav {
    margin-bottom: 16px;
  }

  .home-page__shell {
    gap: 16px;
  }

  .home-page-nav__item {
    flex-basis: 160px;
    min-width: 130px;
    max-width: 190px;

    height: 38px;
    padding: 0 10px;
  }

  .home-page-nav__divider {
    width: 18px;
    height: 36px;
    flex-basis: 18px;
  }

  .home-page-nav__active {
    height: 42px;
  }

  .home-journal-card__body {
    --home-body-width: 97%;
    --home-body-overlap-y: 16px;
    --home-body-min-height: 760px;

    --home-body-padding-top: 25px;
    --home-body-padding-x: 25px;
    --home-body-padding-bottom: 54px;
  }

  .home-news-feed {
    max-width: 1040px;
    gap: 12px;
  }

  .home-news-card {
    grid-template-columns: minmax(120px, 36%) minmax(0, 1fr);
    padding: 7px 8px;
  }

  .home-news-card__title {
    font-size: 16px;
  }

  .home-news-card__excerpt {
    font-size: 12px;
  }

  .home-news-card__read-more {
    --news-read-btn-w: 110px;
  }

  .home-news-card__read-more-label {
    font-size: 8px;
  }
}

@media (max-width: 980px) {
  .home-page {
    padding: 0 6px 34px;

    --home-page-max-width: 100%;

    --hub-nav-max-width: 640px;
    --hub-nav-height: 46px;
    --hub-nav-padding-x: 22px;
    --hub-nav-font-size: 12px;
  }

  .home-page .mz-hub-nav {
    margin-bottom: 14px;
  }

  .home-page__shell {
    gap: 14px;
  }

  .home-page-nav__item {
    flex-basis: 145px;
    min-width: 115px;
    max-width: 175px;

    height: 34px;
    padding: 0 8px;
  }

  .home-page-nav__divider {
    width: 14px;
    height: 30px;
    flex-basis: 14px;
  }

  .home-page-nav__active {
    height: 36px;
  }

  .home-journal-card__body {
    --home-body-width: 97%;
    --home-body-overlap-y: 14px;
    --home-body-min-height: 680px;

    --home-body-padding-top: 22px;
    --home-body-padding-x: 20px;
    --home-body-padding-bottom: 44px;
  }

  .home-news-section-title {
    gap: 10px;
  }

  .home-news-section-title__text {
    font-size: 20px;
  }

  .home-news-feed--news {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-news-feed {
    max-width: 860px;
    gap: 13px;
  }

  .home-news-card,
  .home-news-card--with-image,
  .home-news-card--wide,
  .home-news-feed--promotions .home-news-card--with-image {
    grid-template-columns: minmax(165px, 230px) minmax(0, 1fr);
  }

  .home-news-card {
    padding: 9px;
  }

  .home-news-card__title {
    font-size: 19px;
  }

  .home-news-card__excerpt {
    font-size: 13px;

    -webkit-line-clamp: 3;
  }

  .home-news-card__bottom {
    font-size: 11px;
  }

  .home-news-card__info img {
    width: 13px;
    height: 13px;
  }

  .home-news-card__read-more {
    --news-read-btn-w: 120px;
  }

  .home-news-card__read-more-label {
    font-size: 8px;
  }
}

@media (max-width: 640px) {
  .home-page {
    padding: 0 4px 28px;

    --home-page-max-width: 100%;

    --hub-nav-max-width: 100%;
    --hub-nav-width: 100%;
    --hub-nav-height: 42px;
    --hub-nav-padding-x: 14px;
    --hub-nav-gap: 0;
    --hub-nav-font-size: 11px;
  }

  .home-page .mz-hub-nav {
    margin-bottom: 12px;
  }

  .home-page-nav__panel {
    width: 100%;
    max-width: 100%;
  }

  .home-page-nav__item {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;

    height: 30px;
    padding: 0 6px;

    font-size: var(--hub-nav-font-size);
  }

  .home-page-nav__label {
    position: relative;
    top: 1px;

    width: auto;
    height: auto;

    clip-path: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-page-nav__divider {
    width: 8px;
    height: 22px;
    flex-basis: 8px;
  }

  .home-page-nav__active {
    height: 30px;
  }

  .home-page__shell {
    gap: 12px;
  }

  .home-journal-card__body {
    --home-body-width: 98%;
    --home-body-overlap-y: 10px;
    --home-body-min-height: 540px;

    --home-body-padding-top: 18px;
    --home-body-padding-x: 16px;
    --home-body-padding-bottom: 38px;
  }

  .home-journal-card__media {
    --home-image-inset-x: 2.2%;
    --home-image-inset-top: 4.2%;
    --home-image-inset-bottom: 6.2%;
  }

  .home-news-section-title {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .home-news-section-title__line {
    display: none;
  }

  .home-news-section-title__text {
    font-size: 18px;
  }

  .home-news-card,
  .home-news-card--with-image,
  .home-news-card--wide,
  .home-news-feed--promotions .home-news-card--with-image {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-news-card {
    padding: 10px;
  }

  .home-news-card__media-frame {
    min-height: 120px;
  }

  .home-news-card__content {
    text-align: center;
  }

  .home-news-card__top,
  .home-news-card__bottom {
    justify-content: center;
  }

  .home-news-card__read-more {
    margin-left: 0;
  }

  .home-news-card__title {
    font-size: 19px;
  }

  .home-news-card__excerpt {
    max-width: 100%;
    font-size: 13px;
  }
}

@media (max-width: 420px) {
  .home-page {
    padding: 0 3px 24px;

    --hub-nav-height: 38px;
    --hub-nav-padding-x: 10px;
    --hub-nav-font-size: 10px;
  }

  .home-page .mz-hub-nav {
    margin-bottom: 10px;
  }

  .home-page-nav__item {
    height: 26px;
    padding: 0 4px;
  }

  .home-page-nav__divider {
    width: 5px;
    height: 18px;
    flex-basis: 5px;
  }

  .home-page-nav__active {
    height: 27px;
  }

  .home-journal-card__body {
    --home-body-width: 100%;
    --home-body-overlap-y: 8px;
    --home-body-min-height: 460px;

    --home-body-padding-top: 16px;
    --home-body-padding-x: 12px;
    --home-body-padding-bottom: 34px;
  }

  .home-journal-card__media {
    --home-image-inset-x: 2%;
    --home-image-inset-top: 4%;
    --home-image-inset-bottom: 6%;
  }

  .home-news-card {
    padding: 9px;
  }

  .home-news-card__badge {
    min-width: 50px;
    font-size: 10px;
  }

  .home-news-card__title {
    font-size: 17px;
  }

  .home-news-card__excerpt {
    font-size: 12px;
  }

  .home-news-card__bottom {
    gap: 6px;
    font-size: 11px;
  }

  .home-news-card__info img {
    width: 12px;
    height: 12px;
  }

  .home-news-card__read-more {
    --news-read-btn-w: 108px;
  }

  .home-news-card__read-more-label {
    font-size: 7px;
  }
}

/* =========================================================
   SERVER TAB — 5 PANELS
   1 and 5 use angel4 corners.
   2, 3 and 4 have plain thin frames without corner images.
========================================================= */

/* =========================================================
   SERVER TAB — SHELL / GRID
========================================================= */

.home-server-detail {
  position: relative;

  width: 100%;
  max-width: 1080px;

  margin: 0 auto;
  padding: 5px 8px 18px;

  isolation: isolate;
  overflow: visible;
}

.home-server-detail__gradient {
  position: absolute;
  z-index: 0;

  inset: -78px 0 0;

  pointer-events: none;

  background:
    radial-gradient(
      ellipse closest-side at 50% 12%,
      rgba(25, 36, 40, 0.94),
      rgba(8, 10, 12, 0.04)
    ),
    radial-gradient(
      circle at 50% 18%,
      rgba(62, 183, 212, 0.1),
      transparent 30%
    ),
    radial-gradient(
      circle at 18% 42%,
      rgba(218, 177, 99, 0.045),
      transparent 34%
    ),
    radial-gradient(
      circle at 82% 52%,
      rgba(66, 138, 154, 0.08),
      transparent 32%
    );
}

.home-server-detail__grid {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: 0.82fr minmax(0, 1.95fr) 0.82fr;
  gap: 10px;

  align-items: stretch;

  height: 640px;
  max-height: 640px;
}

.home-server-center {
  min-width: 0;

  display: grid;
  grid-template-rows: minmax(205px, auto) minmax(428px, 1fr);
  gap: 10px;
}

.home-server-right {
  min-width: 0;

  display: grid;
  grid-template-rows: minmax(100px, auto) minmax(533px, 1fr);
  gap: 10px;
}

/* =========================================================
   PANEL BASE
========================================================= */

.home-server-panel {
  --server-corner-size: 82px;
  --server-corner-offset-x: -1px;
  --server-corner-offset-y: -1px;

  position: relative;

  width: 100%;
  min-width: 0;
  height: 100%;

  border: 1px solid rgb(52 56 54 / 54%);
  background-color: #1b2125;

  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.38);

  isolation: isolate;
  overflow: visible;

  transition:
    border-color 0.32s ease,
    box-shadow 0.32s ease,
    filter 0.32s ease;
}

.home-server-panel::before {
  content: "";
  position: absolute;
  z-index: 0;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      #1b2125 0%,
      #1d2327 24%,
      #22292e 52%,
      #2c343a 78%,
      #30383e 100%
    );
}

.home-server-panel::after {
  content: "";
  position: absolute;
  z-index: 1;

  inset: 7px;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(196, 185, 152, 0.16),
      transparent
    )
    center top / calc(100% - 72px) 1px no-repeat,

    linear-gradient(
      90deg,
      transparent,
      rgba(147, 115, 65, 0.16),
      transparent
    )
    center bottom / calc(100% - 72px) 1px no-repeat,

    linear-gradient(
      180deg,
      transparent,
      rgba(147, 115, 65, 0.1),
      transparent
    )
    left center / 1px calc(100% - 72px) no-repeat,

    linear-gradient(
      180deg,
      transparent,
      rgba(147, 115, 65, 0.1),
      transparent
    )
    right center / 1px calc(100% - 72px) no-repeat;
}

.home-server-panel__surface {
  position: relative;
  z-index: 2;

  height: 100%;
  min-height: 100%;

  display: flex;
  flex-direction: column;

  overflow: hidden;
}

.home-server-panel__inner {
  position: relative;
  z-index: 2;

  flex: 1 1 auto;
  min-height: 0;

  display: flex;
  flex-direction: column;

  overflow: visible;
}

/* =========================================================
   PANEL CORNERS
========================================================= */

.home-server-panel__corner {
  position: absolute;
  z-index: 20;

  width: var(--server-corner-size);
  height: var(--server-corner-size);

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

  pointer-events: none;

  filter:
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.58));
}

.home-server-panel--tall .home-server-panel__corner {
  background-image: url("/header/angel4.png");
}

.home-server-panel__corner--tl {
  top: var(--server-corner-offset-y);
  left: var(--server-corner-offset-x);
}

.home-server-panel__corner--tr {
  top: var(--server-corner-offset-y);
  right: var(--server-corner-offset-x);
  transform: scaleX(-1);
}

.home-server-panel__corner--bl {
  bottom: var(--server-corner-offset-y);
  left: var(--server-corner-offset-x);
  transform: scaleY(-1);
}

.home-server-panel__corner--br {
  right: var(--server-corner-offset-x);
  bottom: var(--server-corner-offset-y);
  transform: scale(-1, -1);
}

/* =========================================================
   PANEL HOVER BAR
========================================================= */

.home-server-panel__hoverbar {
  position: absolute;
  z-index: 30;

  left: 0;
  right: 0;
  bottom: 0;

  height: 58px;

  overflow: hidden;

  opacity: 0;
  transform: translateY(12px);

  border-top: 1px solid rgba(49, 39, 30, 0);

  background:
    linear-gradient(180deg, rgb(29 35 38), rgb(22 29 32));

  box-shadow:
    0 -8px 18px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(196, 185, 152, 0.06);

  pointer-events: none;

  transition:
    opacity 0.34s ease,
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    border-top-color 0.34s ease;
}

.home-server-panel__hoverlink {
  width: 100%;
  height: 58px;
  padding: 0 22px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  color: #937341;

  text-decoration: none;
  text-transform: uppercase;

  font-family: "Cormorant SC", serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.18em;

  text-align: center;

  transition:
    color 0.22s ease,
    text-shadow 0.22s ease;
}

.home-server-panel__hoverarrow {
  position: relative;
  top: -1px;

  color: #d5c089;

  font-size: 20px;
  line-height: 1;
}

.home-server-panel--interactive:hover .home-server-panel__hoverbar {
  opacity: 1;
  transform: translateY(0);

  border-top-color: rgb(195 167 129);

  pointer-events: auto;
}

.home-server-panel--interactive:hover .home-server-panel__hoverlink {
  color: #c4b998;

  text-shadow:
    0 1px 0 rgba(0, 0, 0, 1),
    0 0 8px rgba(255, 224, 150, 0.16);
}

/* =========================================================
   PANEL 1 — WORLD
========================================================= */

.home-server-panel--world {
  min-height: 640px;
}

.home-server-world {
  --world-shield-size: 135px;
  --world-shield-y: 8px;

  height: 100%;
  min-height: 0;

  display: flex;
  flex-direction: column;
}

.home-server-world__art {
  flex: 1 1 auto;
  min-height: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 12px 12px 4px;

  overflow: visible;
}

.home-server-world__shield-host {
  position: relative !important;

  width: var(--world-shield-size) !important;
  min-width: var(--world-shield-size) !important;
  max-width: var(--world-shield-size) !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  display: block !important;
  flex: 0 0 auto !important;

  opacity: 0.5;

  transform: translateY(var(--world-shield-y)) !important;

  filter: none !important;
  box-shadow: none !important;
}

.home-server-world__shield.mz-magic-shield {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  display: block !important;

  opacity: 1 !important;

  transform: none !important;

  filter: none !important;
  box-shadow: none !important;
}

.home-server-world__shield .mz-magic-shield__base {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  height: auto !important;
  max-height: none !important;

  object-fit: contain !important;

  filter: none !important;
  box-shadow: none !important;
}

.home-server-world__shield .mz-magic-shield__veins-canvas {
  width: 100% !important;
  height: 100% !important;

  opacity: 0.96;

  filter: none !important;
  box-shadow: none !important;
}

.home-server-world__shield .mz-magic-shield__veins-soft {
  opacity: 0.38;
}

.home-server-world__shield .mz-magic-shield__inner-aura {
  opacity: 0.28;
}

.home-server-world__shield .mz-magic-shield__crystal-glow {
  opacity: 0.52;
}

.home-server-world__bottom {
  padding: 4px 16px 76px;

  transform: translateY(-18px);

  text-align: center;
}

.home-server-world__bottom h3 {
  margin: 0 0 10px;

  color: rgba(191, 167, 122, 0.72);

  font-family: "Cormorant SC", serif;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0.06em;
  text-transform: uppercase;

  text-shadow:
    0 1px 0 rgba(0, 0, 0, 1),
    0 0 10px rgba(226, 190, 115, 0.14);
}

.home-server-world__bottom p {
  max-width: 190px;

  margin: 0 auto 10px;

  color: #ffe8ba;

  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: 0.02em;

  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.92);
}

.home-server-world__bottom strong {
  color: #ffdda0;
  font-weight: 900;
}

/* =========================================================
   PANEL 2 — INTRO
========================================================= */

.home-server-panel--intro {
  min-height: 205px;
}

.home-server-intro {
  position: relative;

  height: 100%;
  min-height: 0;

  padding: 20px 28px 18px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;

  overflow: hidden;
}

.home-server-intro__errtel-host {
  position: relative;

  width: min(46%, 190px);
  max-width: 190px;

  display: block;

  margin: 0 auto 6px;

  opacity: 0.56;

  filter: none !important;
  box-shadow: none !important;
}

.home-server-intro__errtel.mz-magic-scroll {
  width: 100% !important;
  height: auto !important;

  max-width: none !important;
  max-height: none !important;

  display: block !important;

  margin: 0 !important;
  top: auto !important;

  opacity: 1 !important;

  filter: none !important;
  box-shadow: none !important;
}

.home-server-intro__errtel .mz-magic-scroll__base {
  width: 100% !important;
  height: auto !important;

  display: block !important;

  object-fit: contain !important;

  filter: none !important;
  box-shadow: none !important;
}

.home-server-intro__errtel .mz-magic-scroll__canvas {
  width: 100% !important;
  height: 100% !important;

  opacity: 0.96;

  filter: none !important;
  box-shadow: none !important;
}

.home-server-intro h2 {
  margin: 2px 0 8px;

  color: rgba(191, 167, 122, 0.72);

  font-family: "Cormorant SC", serif;
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: 0.06em;
  text-transform: uppercase;

  text-shadow:
    0 1px 0 rgba(0, 0, 0, 1),
    0 0 14px rgba(226, 190, 115, 0.18);
}

.home-server-intro p {
  max-width: 620px;

  margin: 0 auto 7px;

  color: #ffe8ba;

  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: 0.02em;

  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.92);
}

.home-server-intro__bottom-divider {
  width: min(75%, 180px);
  height: auto;
  max-height: 24px;

  margin: 8px auto 0;

  display: block;

  object-fit: contain;

  pointer-events: none;
}

/* =========================================================
   PANEL 3 — STORY
========================================================= */

.home-server-panel--story {
  min-height: 428px;
}

.home-server-story {
  height: 100%;
  min-height: 0;

  padding: 22px 32px 24px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
}

.home-server-story p {
  max-width: 680px;

  margin: 0 0 10px;

  color: #ffe8ba;

  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: 0.02em;

  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.92);
}

.home-server-story__button.menu-btn-long {
  width: 220px;
  height: 44px;

  min-width: 0;
  max-width: min(220px, 100%);

  margin: 12px auto 0;
  padding: 0;

  display: inline-block;

  aspect-ratio: auto;

  color: #f3dfb6;
  text-decoration: none;
  text-transform: uppercase;

  filter: none;
  box-shadow: none;
  transform: none;
}

.home-server-story__button.menu-btn-long .menu-btn-long__label {
  padding: 0 18px;

  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16px;

  color: #f3dfb6;
}

.home-server-story__button.menu-btn-long:hover {
  color: #fff1ca;

  filter: none;
  transform: none;
}

.home-server-story__button.menu-btn-long:hover .menu-btn-long__label {
  color: #fff1ca;
}

/* =========================================================
   PANEL 4 — TYPE
========================================================= */

.home-server-panel--type {
  min-height: 100px;
}

.home-server-type {
  height: 100%;
  min-height: 0;

  padding: 12px 16px;

  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.home-server-type img {
  width: 44px;
  height: 44px;

  object-fit: contain;

  filter:
    drop-shadow(0 6px 14px rgba(0, 0, 0, 0.66))
    drop-shadow(0 0 8px rgba(255, 224, 150, 0.09));
}

.home-server-type__text {
  min-width: 0;

  text-align: left;
}

.home-server-type__text span {
  display: block;

  margin-bottom: 5px;

  color: rgba(191, 167, 122, 0.72);

  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.85),
    0 0 7px rgba(217, 172, 108, 0.08);

  transition:
    color 0.22s ease,
    text-shadow 0.22s ease;
}

.home-server-type__text strong {
  display: block;

  margin-bottom: 4px;

  color: #efe2bc;

  font-family: "Cormorant SC", serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.03em;
}

.home-server-type__text em {
  display: block;

  color: #e8d4a5;

  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* =========================================================
   PANEL 5 — INFO
========================================================= */

.home-server-panel--info {
  min-height: 533px;
}

.home-server-info-card {
  height: 100%;
  min-height: 0;

  display: flex;
  flex-direction: column;
}

.home-server-info-card__art {
  flex: 1 1 auto;
  min-height: 0;

  padding: 8px 8px 4px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: visible;
}

.home-server-info-card__staff-host {
  width: min(30%, 78px);
  max-width: 78px;

  display: block;

  opacity: 1 !important;

  filter: none !important;
  box-shadow: none !important;
}

.home-server-info-card__staff.mz-magic-staff {
  width: 100% !important;
  height: auto !important;

  display: block !important;

  opacity: 1 !important;

  filter: none !important;
  box-shadow: none !important;
}

.home-server-info-card__staff .mz-magic-staff__base {
  opacity: 0.68 !important;

  filter: brightness(0.9) !important;
  box-shadow: none !important;
}

.home-server-info-card__staff .mz-magic-staff__handle-canvas {
  opacity: 0.74 !important;

  filter: none !important;
  box-shadow: none !important;
}

.home-server-info-card__staff .mz-magic-staff__core-canvas {
  opacity: 0.72 !important;

  filter: none !important;
  box-shadow: none !important;
}

.home-server-info-card__staff .mz-magic-staff__spark {
  filter: none !important;
  box-shadow: none !important;
}

.home-server-info-card__staff .mz-magic-staff__core-ray {
  filter: blur(1.35px) !important;
}

.home-server-info-card__staff .mz-magic-staff__beam {
  filter: blur(3px) !important;
}

.home-server-info-card__staff .mz-magic-staff__crystal-glow {
  filter: blur(2px) !important;
}

.home-server-info-card__bottom {
  padding: 4px 16px 76px;

  text-align: center;
}

.home-server-info-card__bottom strong {
  display: block;

  color: rgba(191, 167, 122, 0.72);

  font-family: "Cormorant SC", serif;
  font-size: 21px;
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: 0.06em;
  text-transform: uppercase;

  text-shadow:
    0 1px 0 rgba(0, 0, 0, 1),
    0 0 12px rgba(226, 190, 115, 0.15);
}

.home-server-info-card__bottom p {
  max-width: 190px;

  margin: 9px auto 0;

  color: #ffe8ba;

  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: 0.02em;

  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.92);
}

/* =========================================================
   SHARED MINI DECOR
========================================================= */

.home-server-mini-divider {
  width: min(70%, 160px);

  margin: 10px auto 0;

  display: block;

  opacity: 0.82;
}

/* =========================================================
   MAGIC SHIELD CANVAS COMPONENT
========================================================= */

.mz-magic-shield {
  position: relative;

  width: 100%;
  height: auto;

  display: block;

  isolation: isolate;
  transform: translateZ(0);

  filter: none !important;
  box-shadow: none !important;
}

.mz-magic-shield__base {
  position: relative;
  z-index: 5;

  display: block;

  width: 100%;
  height: auto;

  pointer-events: none;
  user-select: none;

  filter: none !important;
  box-shadow: none !important;
}

.mz-magic-shield__inner-aura {
  position: absolute;
  z-index: 6;

  inset: 18% 12% 10%;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 50% 72%,
      rgba(58, 205, 245, 0.15),
      transparent 30%
    ),
    radial-gradient(
      circle at 50% 42%,
      rgba(72, 170, 220, 0.07),
      transparent 46%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(40, 150, 205, 0.05) 64%,
      rgba(90, 225, 240, 0.1) 100%
    );

  clip-path: polygon(
    50% 0%,
    91% 10%,
    100% 34%,
    94% 68%,
    50% 100%,
    6% 68%,
    0% 34%,
    9% 10%
  );

  mix-blend-mode: screen;

  filter: blur(15px);
  opacity: 0.42;

  animation: mzMagicShieldAura 9s ease-in-out infinite;
}

.mz-magic-shield__veins-soft {
  position: absolute;
  z-index: 8;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(20, 90, 120, 0.3),
      rgba(38, 145, 170, 0.34) 48%,
      rgba(24, 92, 130, 0.26)
    );

  opacity: 0.42;
  mix-blend-mode: screen;

  -webkit-mask-image: var(--mz-shield-mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;

  mask-image: var(--mz-shield-mask);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;

  filter:
    brightness(0.88)
    saturate(1.22);

  animation: mzMagicShieldVeinSoftBreath 6.2s ease-in-out infinite;
}

.mz-magic-shield__veins-canvas {
  position: absolute;
  z-index: 9;

  inset: 0;

  width: 100%;
  height: 100%;

  pointer-events: none;

  opacity: 0.92;
  mix-blend-mode: screen;

  filter: none !important;
  box-shadow: none !important;
}

.mz-magic-shield__crystal-glow {
  position: absolute;
  z-index: 20;

  left: 50%;
  top: 7.2%;

  width: 11.4%;
  aspect-ratio: 1 / 1;

  transform: translateX(-50%);

  pointer-events: none;

  clip-path: polygon(
    50% 0%,
    100% 50%,
    50% 100%,
    0% 50%
  );

  background:
    radial-gradient(
      circle,
      rgba(230, 255, 255, 0.86) 0%,
      rgba(85, 220, 245, 0.48) 30%,
      rgba(20, 145, 210, 0.2) 56%,
      transparent 78%
    );

  mix-blend-mode: screen;

  filter: blur(4px);
  opacity: 0.54;

  animation: mzMagicShieldCrystalBreath 4.8s ease-in-out infinite;
}

.mz-magic-shield__crystal-core {
  position: absolute;
  z-index: 21;

  left: 50%;
  top: 7.2%;

  width: 10.5%;
  aspect-ratio: 1 / 1;

  transform: translateX(-50%);

  pointer-events: none;

  clip-path: polygon(
    50% 0%,
    100% 50%,
    50% 100%,
    0% 50%
  );

  background:
    linear-gradient(
      135deg,
      transparent 0%,
      rgba(180, 250, 255, 0.22) 36%,
      rgba(55, 205, 235, 0.11) 52%,
      transparent 100%
    );

  mix-blend-mode: screen;

  opacity: 0.5;

  animation: mzMagicShieldCrystalCoreShift 6.2s ease-in-out infinite;
}

.mz-magic-shield__crystal-shine {
  position: absolute;
  z-index: 22;

  left: 50%;
  top: 7.2%;

  width: 10.5%;
  aspect-ratio: 1 / 1;

  transform: translateX(-50%);

  pointer-events: none;

  clip-path: polygon(
    50% 0%,
    100% 50%,
    50% 100%,
    0% 50%
  );

  overflow: hidden;
}

.mz-magic-shield__crystal-shine::before {
  content: "";
  position: absolute;

  left: -58%;
  top: -32%;

  width: 38%;
  height: 165%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(235, 255, 255, 0.78),
      rgba(120, 240, 250, 0.4),
      transparent
    );

  transform: rotate(24deg);

  opacity: 0;

  animation: mzMagicShieldCrystalShine 7.6s ease-in-out infinite;
}

/* =========================================================
   MAGIC SCROLL CANVAS COMPONENT
========================================================= */

.mz-magic-scroll {
  position: relative;

  width: 100%;
  height: auto;

  display: block;

  isolation: isolate;
  transform: translateZ(0);

  filter: none !important;
  box-shadow: none !important;
}

.mz-magic-scroll__base {
  position: relative;
  z-index: 1;

  display: block;

  width: 100%;
  height: auto;

  pointer-events: none;
  user-select: none;

  filter: none !important;
  box-shadow: none !important;
}

.mz-magic-scroll__canvas {
  position: absolute;
  z-index: 2;

  inset: 0;

  width: 100%;
  height: 100%;

  pointer-events: none;

  filter: none !important;
  box-shadow: none !important;
}

/* =========================================================
   MAGIC STAFF CANVAS COMPONENT
========================================================= */

.mz-magic-staff {
  --staff-spark-gem-1-left: 50%;
  --staff-spark-gem-1-top: 31.85%;
  --staff-spark-gem-1-size: 52px;
  --staff-spark-gem-1-rotate: 10deg;

  --staff-spark-gem-2-left: 50%;
  --staff-spark-gem-2-top: 42.55%;
  --staff-spark-gem-2-size: 38px;
  --staff-spark-gem-2-rotate: -16deg;

  --staff-spark-handle-left: 50%;
  --staff-spark-handle-top: 46.95%;
  --staff-spark-handle-size: 28px;
  --staff-spark-handle-rotate: 8deg;

  position: relative;

  width: 100%;
  height: auto;

  display: block;

  isolation: isolate;
  transform: translateZ(0);

  opacity: 1 !important;

  filter: none !important;
  box-shadow: none !important;
}

.mz-magic-staff__base {
  position: relative;
  z-index: 5;

  display: block;

  width: 100%;
  height: auto;

  pointer-events: none;
  user-select: none;

  opacity: 1 !important;

  filter: none !important;
  box-shadow: none !important;
}

.mz-magic-staff__handle-canvas,
.mz-magic-staff__core-canvas {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  pointer-events: none;

  mix-blend-mode: screen;

  filter: none !important;
  box-shadow: none !important;
}

.mz-magic-staff__handle-canvas {
  z-index: 8;
  opacity: 0.86;
}

.mz-magic-staff__core-canvas {
  z-index: 18;
  opacity: 0.78;
}

.mz-magic-staff__beam {
  position: absolute;
  z-index: 7;

  left: 50%;
  top: 21.5%;

  width: 7%;
  height: 58%;

  transform: translateX(-50%);

  pointer-events: none;

  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(45, 175, 220, 0.035) 16%,
      rgba(95, 220, 235, 0.11) 50%,
      rgba(35, 145, 210, 0.045) 82%,
      transparent 100%
    );

  mix-blend-mode: screen;

  filter: blur(3px);
  opacity: 0.22;

  box-shadow: none !important;

  animation: mzStaffBeamBreath 5.6s ease-in-out infinite;
}

.mz-magic-staff__core-ray {
  position: absolute;
  z-index: 14;

  left: 50%;
  top: 21.2%;

  width: 7.5%;
  height: 28%;

  transform: translateX(-50%);

  pointer-events: none;

  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(90, 220, 235, 0) 18%,
      rgba(135, 238, 238, 0.38) 47%,
      rgba(55, 185, 225, 0.18) 58%,
      transparent 100%
    );

  background-size: 100% 270%;
  background-position: 50% -135%;

  mix-blend-mode: screen;

  filter: blur(1.4px);
  opacity: 0;

  box-shadow: none !important;

  animation: mzStaffCoreEmitDown 6.2s ease-in-out infinite;
}

.mz-magic-staff__crystal-glow {
  position: absolute;
  z-index: 12;

  left: 50%;

  aspect-ratio: 1 / 1;

  transform: translateX(-50%);

  pointer-events: none;

  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

  background:
    radial-gradient(
      circle,
      rgba(160, 245, 245, 0.42) 0%,
      rgba(70, 205, 230, 0.24) 30%,
      rgba(20, 125, 195, 0.11) 58%,
      transparent 78%
    );

  mix-blend-mode: screen;

  filter: blur(2px);
  opacity: 0.13;

  box-shadow: none !important;

  animation: mzStaffCrystalBreath 6s ease-in-out infinite;
}

.mz-magic-staff__crystal-glow--top {
  top: 4.6%;
  width: 10%;
  opacity: 0.13;
}

.mz-magic-staff__crystal-glow--middle {
  top: 46.1%;
  width: 8.2%;
  opacity: 0.14;

  animation-delay: -1.2s;
}

.mz-magic-staff__crystal-glow--bottom-big {
  top: 86.4%;
  width: 15.5%;
  opacity: 0.2;

  animation-delay: -2.4s;
}

.mz-magic-staff__crystal-glow--tip {
  top: 97.1%;
  width: 7%;
  opacity: 0.16;

  animation-delay: -3.2s;
}

.mz-magic-staff__spark {
  position: absolute;
  z-index: 30;

  left: 50%;
  top: 50%;

  width: 40px;
  height: 40px;

  transform:
    translate(-50%, -50%)
    rotate(0deg)
    scale(0.2);

  transform-origin: center center;

  pointer-events: none;

  opacity: 0;

  background:
    var(--mz-staff-spark-soft) center / 100% 100% no-repeat,
    var(--mz-staff-spark-burst) center / 100% 100% no-repeat;

  mix-blend-mode: screen;

  filter: none !important;
  box-shadow: none !important;
}

.mz-magic-staff__spark--gem-1 {
  left: var(--staff-spark-gem-1-left, 50%);
  top: var(--staff-spark-gem-1-top, 31.85%);

  width: var(--staff-spark-gem-1-size, 52px);
  height: var(--staff-spark-gem-1-size, 52px);

  animation: mzStaffSparkGem1 6.2s ease-in-out infinite;
}

.mz-magic-staff__spark--gem-2 {
  left: var(--staff-spark-gem-2-left, 50%);
  top: var(--staff-spark-gem-2-top, 42.55%);

  width: var(--staff-spark-gem-2-size, 38px);
  height: var(--staff-spark-gem-2-size, 38px);

  animation: mzStaffSparkGem2 6.2s ease-in-out infinite;
}

.mz-magic-staff__spark--handle {
  left: var(--staff-spark-handle-left, 50%);
  top: var(--staff-spark-handle-top, 46.95%);

  width: var(--staff-spark-handle-size, 28px);
  height: var(--staff-spark-handle-size, 28px);

  animation: mzStaffSparkHandle 6.2s ease-in-out infinite;
}

.mz-magic-staff__handle-ignition {
  position: absolute;
  z-index: 16;

  left: 50%;
  top: 47%;

  width: 10%;
  height: 10%;

  transform: translate(-50%, -50%);

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(135, 238, 238, 0.28) 0%,
      rgba(55, 185, 225, 0.14) 38%,
      transparent 78%
    );

  mix-blend-mode: screen;

  filter: blur(3px);
  opacity: 0;

  box-shadow: none !important;

  animation: mzStaffHandleIgnition 6.2s ease-in-out infinite;
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes mzMagicShieldAura {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.99);
  }

  50% {
    opacity: 0.46;
    transform: scale(1.03);
  }
}

@keyframes mzMagicShieldVeinSoftBreath {
  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.5;
  }
}

@keyframes mzMagicShieldCrystalBreath {
  0%,
  100% {
    opacity: 0.46;
    transform: translateX(-50%) scale(0.96);
  }

  50% {
    opacity: 0.78;
    transform: translateX(-50%) scale(1.07);
  }
}

@keyframes mzMagicShieldCrystalCoreShift {
  0%,
  100% {
    opacity: 0.34;
    filter: brightness(1);
  }

  46% {
    opacity: 0.66;
    filter: brightness(1.14);
  }

  70% {
    opacity: 0.46;
  }
}

@keyframes mzMagicShieldCrystalShine {
  0%,
  72%,
  100% {
    opacity: 0;
    transform: translateX(0);
  }

  78% {
    opacity: 0.8;
  }

  88% {
    opacity: 0;
    transform: translateX(315%);
  }
}

@keyframes mzStaffBeamBreath {
  0%,
  100% {
    opacity: 0.14;
    transform: translateX(-50%) scaleY(0.96);
  }

  50% {
    opacity: 0.26;
    transform: translateX(-50%) scaleY(1.04);
  }
}

@keyframes mzStaffCrystalBreath {
  0%,
  100% {
    opacity: 0.1;
    transform: translateX(-50%) scale(0.96);
  }

  50% {
    opacity: 0.23;
    transform: translateX(-50%) scale(1.05);
  }
}

@keyframes mzStaffCoreEmitDown {
  0%,
  50%,
  100% {
    opacity: 0;
    background-position: 50% -135%;
  }

  58% {
    opacity: 0.32;
  }

  80% {
    opacity: 0.13;
    background-position: 50% 145%;
  }

  92% {
    opacity: 0;
    background-position: 50% 180%;
  }
}

@keyframes mzStaffSparkGem1 {
  0%,
  61%,
  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      rotate(var(--staff-spark-gem-1-rotate, 10deg))
      scale(0.2);
  }

  64% {
    opacity: 0.68;
    transform:
      translate(-50%, -50%)
      rotate(var(--staff-spark-gem-1-rotate, 10deg))
      scale(0.92);
  }

  69% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      rotate(var(--staff-spark-gem-1-rotate, 10deg))
      scale(1.08);
  }
}

@keyframes mzStaffSparkGem2 {
  0%,
  68%,
  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      rotate(var(--staff-spark-gem-2-rotate, -16deg))
      scale(0.2);
  }

  71% {
    opacity: 0.62;
    transform:
      translate(-50%, -50%)
      rotate(var(--staff-spark-gem-2-rotate, -16deg))
      scale(0.9);
  }

  76% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      rotate(var(--staff-spark-gem-2-rotate, -16deg))
      scale(1.05);
  }
}

@keyframes mzStaffSparkHandle {
  0%,
  75%,
  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      rotate(var(--staff-spark-handle-rotate, 8deg))
      scale(0.2);
  }

  78% {
    opacity: 0.58;
    transform:
      translate(-50%, -50%)
      rotate(var(--staff-spark-handle-rotate, 8deg))
      scale(0.88);
  }

  83% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      rotate(var(--staff-spark-handle-rotate, 8deg))
      scale(1.02);
  }
}

@keyframes mzStaffHandleIgnition {
  0%,
  74%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.75);
  }

  79% {
    opacity: 0.36;
    transform: translate(-50%, -50%) scale(0.96);
  }

  84% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* =========================================================
   RESPONSIVE — DESKTOP HOVER
========================================================= */

@media (min-width: 768px) {
  .home-server-panel--hover-left:hover,
  .home-server-panel--hover-right:hover {
    z-index: 9;

    border-color: rgba(196, 185, 152, 0.34);

    box-shadow:
      0 0 14px rgba(0, 0, 0, 0.45),
      0 0 18px rgba(78, 185, 210, 0.1);

    filter: brightness(1.035);
  }
}

/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1180px) {
  .home-server-detail__grid {
    height: auto;
    max-height: none;

    grid-template-columns: 0.9fr minmax(0, 1.8fr);
  }

  .home-server-right {
    grid-column: 1 / -1;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(95px, auto);
  }

  .home-server-panel--world {
    min-height: 600px;
  }

  .home-server-panel--story {
    min-height: 390px;
  }

  .home-server-panel--info {
    min-height: 300px;
  }

  .home-server-info-card__staff-host {
    width: min(18%, 72px);
    max-width: 72px;
  }
}

/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 820px) {
  .home-server-detail {
    padding: 10px 4px 12px;
  }

  .home-server-detail__grid,
  .home-server-center,
  .home-server-right {
    height: auto;
    max-height: none;

    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;

    gap: 7px;
  }

  .home-server-panel,
  .home-server-panel--world,
  .home-server-panel--intro,
  .home-server-panel--story,
  .home-server-panel--type,
  .home-server-panel--info {
    height: auto;
    min-height: 0;
  }

  .home-server-panel--tall {
    --server-corner-size: 58px;
    --server-corner-offset-x: -6px;
    --server-corner-offset-y: -7px;
  }

  .home-server-panel__surface,
  .home-server-panel__inner {
    min-height: 0;
  }

  .home-server-panel__hoverbar {
    height: 48px;

    opacity: 1;
    transform: translateY(0);

    border-top-color: rgba(49, 39, 30, 1);

    pointer-events: auto;
  }

  .home-server-panel__hoverlink {
    height: 48px;

    padding: 0 14px;

    font-size: 13px;
    letter-spacing: 0.12em;
  }

  .home-server-world {
    --world-shield-size: 112px;
    --world-shield-y: -4px;
  }

  .home-server-world__art {
    flex: 0 0 auto;

    min-height: 124px;
    max-height: 124px;

    padding: 8px 12px 0;

    align-items: center;
  }

  .home-server-world__bottom {
    padding: 0 16px 58px;

    transform: none;

    text-align: center;
  }

  .home-server-world__bottom h3 {
    margin-bottom: 8px;

    font-size: 22px;
    line-height: 1.04;
  }

  .home-server-world__bottom p {
    max-width: 230px;

    margin-bottom: 8px;

    font-size: 15px;
    line-height: 1.32;
  }

  .home-server-intro {
    min-height: 0;

    padding: 14px 18px 16px;
  }

  .home-server-intro__errtel-host {
    width: min(56vw, 190px);
    max-width: 190px;

    margin-bottom: 7px;
  }

  .home-server-intro h2 {
    margin: 0 0 8px;

    font-size: 25px;
    line-height: 1.02;
  }

  .home-server-intro p {
    max-width: 520px;

    margin-bottom: 7px;

    font-size: 15px;
    line-height: 1.32;
  }

  .home-server-intro__bottom-divider {
    width: min(58%, 145px);
    max-height: 22px;

    margin-top: 7px;
  }

  .home-server-story {
    min-height: 0;

    padding: 16px 18px 18px;
  }

  .home-server-story p {
    max-width: 560px;

    margin-bottom: 8px;

    font-size: 15px;
    line-height: 1.32;
  }

  .home-server-story__button.menu-btn-long {
    width: 210px;
    height: 42px;

    max-width: 86%;

    margin-top: 9px;
  }

  .home-server-story__button.menu-btn-long .menu-btn-long__label {
    padding: 0 16px;

    font-size: 10px;
  }

  .home-server-type {
    min-height: 0;

    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;

    padding: 11px 16px;
  }

  .home-server-type img {
    width: 40px;
    height: 40px;
  }

  .home-server-type__text {
    text-align: left;
  }

  .home-server-type__text span {
    font-size: 12px;
  }

  .home-server-type__text strong {
    font-size: 21px;
  }

  .home-server-type__text em {
    font-size: 13px;
  }

  .home-server-info-card__art {
    flex: 0 0 auto;

    height: clamp(190px, 32vw, 240px);
    min-height: 0;
    max-height: none;

    padding: 8px 8px 0;

    align-items: center;
    justify-content: center;

    overflow: visible;
  }

  .home-server-info-card__staff-host {
    width: clamp(46px, 10vw, 64px);
    max-width: 64px;
  }

  .home-server-info-card__bottom {
    padding: 2px 16px 58px;
  }

  .home-server-info-card__bottom strong {
    font-size: 22px;
    line-height: 1.08;
  }

  .home-server-info-card__bottom p {
    max-width: 230px;

    margin-top: 8px;

    font-size: 15px;
    line-height: 1.32;
  }

  .home-server-mini-divider {
    width: min(58%, 135px);

    margin-top: 9px;
  }
}

/* =========================================================
   RESPONSIVE — SMALL MOBILE
========================================================= */

@media (max-width: 520px) {
  .home-server-detail {
    padding: 8px 2px 10px;
  }

  .home-server-detail__grid,
  .home-server-center,
  .home-server-right {
    gap: 15px;
  }

  .home-server-panel--tall {
    --server-corner-size: 52px;
    --server-corner-offset-x: -5px;
    --server-corner-offset-y: -6px;
  }

  .home-server-panel::after {
    inset: 6px;

    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(196, 185, 152, 0.13),
        transparent
      )
      center top / calc(100% - 54px) 1px no-repeat,

      linear-gradient(
        90deg,
        transparent,
        rgba(147, 115, 65, 0.13),
        transparent
      )
      center bottom / calc(100% - 54px) 1px no-repeat,

      linear-gradient(
        180deg,
        transparent,
        rgba(147, 115, 65, 0.08),
        transparent
      )
      left center / 1px calc(100% - 54px) no-repeat,

      linear-gradient(
        180deg,
        transparent,
        rgba(147, 115, 65, 0.08),
        transparent
      )
      right center / 1px calc(100% - 54px) no-repeat;
  }

  .home-server-world {
    --world-shield-size: 80px;
    --world-shield-y: -2px;
  }

  .home-server-world__art {
    min-height: 110px;
    max-height: 110px;

    padding-top: 7px;
  }

  .home-server-world__bottom {
    padding: 0 14px 56px;
  }

  .home-server-world__bottom h3 {
    font-size: 21px;
  }

  .home-server-world__bottom p {
    max-width: 220px;

    font-size: 14px;
    line-height: 1.3;
  }

  .home-server-intro {
    padding: 13px 16px 15px;
  }

  .home-server-intro__errtel-host {
    width: min(62vw, 170px);
    max-width: 170px;

    margin-bottom: 6px;
  }

  .home-server-intro h2 {
    font-size: 24px;
  }

  .home-server-intro p {
    font-size: 14px;
    line-height: 1.3;
  }

  .home-server-story {
    padding: 15px 15px 17px;
  }

  .home-server-story p {
    font-size: 14px;
    line-height: 1.3;
  }

  .home-server-story__button.menu-btn-long {
    width: 200px;
    height: 40px;

    max-width: 88%;
  }

  .home-server-story__button.menu-btn-long .menu-btn-long__label {
    padding: 0 15px;

    font-size: 9px;
  }

  .home-server-type {
    grid-template-columns: minmax(0, 1fr);

    justify-items: center;

    padding: 11px 14px;
  }

  .home-server-type__text {
    text-align: center;
  }

  .home-server-info-card__art {
    height: clamp(170px, 45vw, 210px);
    min-height: 0;
    max-height: none;

    padding: 7px 8px 0;

    overflow: visible;
  }

  .home-server-info-card__staff-host {
    width: clamp(40px, 12vw, 54px);
    max-width: 54px;
  }

  .home-server-info-card__bottom {
    padding: 2px 14px 56px;
  }

  .home-server-info-card__bottom strong {
    font-size: 21px;
  }

  .home-server-info-card__bottom p {
    max-width: 220px;

    font-size: 14px;
    line-height: 1.3;
  }
}

/* =========================================================
   NEWS / PROMO DETAIL PAGE
   Route: /news/[slug]
========================================================= */

.news-detail-page {
  width: 100%;
  min-width: 0;
  padding: 0 8px 46px;
  overflow: visible;
}

.news-detail-shell {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  overflow: visible;
}

/* =========================================================
   MAIN FRAME
========================================================= */

.news-detail-frame {
  position: relative;

  width: 97%;
  min-width: 0;
  min-height: 760px;

  margin: 0 auto;
  padding: 68px 74px 76px;

  box-sizing: border-box;

  background-image: url("/ui/content_frame.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;

  color: #d7ccaf;

  overflow: visible;
}

.news-detail-frame--empty {
  min-height: 460px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.news-detail-frame > * {
  position: relative;
  z-index: 2;
}

/* =========================================================
   HEADER
========================================================= */

.news-detail-header {
  max-width: 850px;
  margin: 0 auto 28px;
  text-align: center;
}

.news-detail-meta {
  margin-bottom: 14px;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;

  color: rgba(206, 199, 178, 0.8);

  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.news-detail-badge {
  min-width: 62px;
  min-height: 24px;

  padding: 0 14px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(217, 172, 108, 0.3);

  background:
    linear-gradient(
      180deg,
      rgba(45, 48, 45, 0.88) 0%,
      rgba(18, 20, 20, 0.94) 100%
    );

  box-shadow:
    inset 0 0 8px rgba(217, 172, 108, 0.15),
    inset 0 1px 0 rgba(255, 232, 186, 0.055),
    0 2px 4px rgba(0, 0, 0, 0.5);

  color: #f1ddb1;

  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.news-detail-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.news-detail-info img {
  width: 15px;
  height: 15px;
  object-fit: contain;
  opacity: 0.9;
}

.news-detail-title {
  margin: 0 0 16px;

  color: #d4b06a;

  font-family: "Cormorant SC", serif;
  font-size: clamp(30px, 3.4vw, 50px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: 0.075em;
  text-transform: uppercase;

  text-shadow:
    0 1px 0 rgba(0, 0, 0, 1),
    0 0 16px rgba(226, 190, 115, 0.2);
}

.news-detail-short {
  max-width: 760px;
  margin: 0 auto;

  color: #d7ccaf;

  font-family: "Cormorant SC", serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.03em;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* =========================================================
   MEDIA
========================================================= */

.news-detail-media {
  max-width: 860px;
  margin: 0 auto 30px;
}

.news-detail-media__frame {
  position: relative;

  width: 100%;
  aspect-ratio: 16 / 6;

  padding: 5px;

  border: 1px solid rgba(206, 150, 78, 0.42);

  background:
    linear-gradient(
      180deg,
      rgba(255, 225, 156, 0.08),
      transparent 24%,
      transparent 76%,
      rgba(90, 55, 30, 0.1)
    ),
    linear-gradient(180deg, #30251a 0%, #151d1e 30%, #0c1111 100%);

  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 236, 185, 0.055),
    inset 0 0 9px rgba(0, 0, 0, 0.48);

  overflow: hidden;
}

.news-detail-media__frame img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  user-select: none;
  pointer-events: none;
}

/* =========================================================
   TEXT
========================================================= */

.news-detail-content {
  max-width: 830px;
  margin: 0 auto;

  color: #d7ccaf;

  font-family: "Cormorant SC", serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.62;
  letter-spacing: 0.025em;

  text-align: center;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.news-detail-content p {
  margin: 0;
}

.news-detail-content p + p {
  margin-top: 16px;
}

/* =========================================================
   SECTION TITLE
========================================================= */

.news-detail-section-title {
  width: 100%;
  max-width: 720px;

  margin: 34px auto 20px;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;

  overflow: visible;
}

.news-detail-section-title span:not(.news-detail-section-title__line) {
  color: #d4b06a;

  font-family: "Cormorant SC", serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  text-align: center;
}

.news-detail-section-title__line {
  height: 16px;
  background: url("/news/text_divider_right.png") center center / 100% 100% no-repeat;
  pointer-events: none;
}

.news-detail-section-title__line--left {
  transform: scaleX(-1);
}

/* =========================================================
   DETAILS
========================================================= */

.news-detail-details__text {
  max-width: 780px;
  margin: 0 auto;

  color: #cfc3a4;

  font-family: "Cormorant SC", serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.58;
  letter-spacing: 0.02em;

  text-align: center;
}

.news-detail-details__text p {
  margin: 0;
}

.news-detail-details__text p + p {
  margin-top: 12px;
}

/* =========================================================
   GALLERY
========================================================= */

.news-detail-gallery__grid {
  max-width: 880px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.news-detail-gallery figure {
  margin: 0;
  min-width: 0;
  padding: 5px;

  border: 1px solid rgba(206, 150, 78, 0.34);

  background:
    linear-gradient(180deg, #1b2125, #30383e);

  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.38);
}

.news-detail-gallery img {
  display: block;

  width: 100%;
  aspect-ratio: 4 / 3;

  object-fit: cover;
  object-position: center;
}

.news-detail-gallery figcaption {
  padding: 8px 6px 4px;

  color: rgba(215, 204, 175, 0.82);

  font-family: "Cormorant SC", serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

/* =========================================================
   ACTIONS
========================================================= */

.news-detail-actions {
  max-width: 720px;
  margin: 34px auto 0;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.news-detail-back,
.news-detail-cta {
  min-width: 210px;

  padding: 11px 28px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(147, 115, 65, 0.9);

  background:
    linear-gradient(
      180deg,
      #2c3840 0%,
      #1c2428 58%,
      #181f22 100%
    );

  color: #d7bc7b;

  text-decoration: none;
  text-transform: uppercase;

  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.1em;

  box-shadow:
    inset 0 0 0 1px rgba(196, 185, 152, 0.05),
    inset 0 0 12px rgba(0, 0, 0, 0.45);

  transition:
    color 0.22s ease,
    border-color 0.22s ease,
    filter 0.22s ease;
}

.news-detail-back:hover,
.news-detail-cta:hover {
  color: #f2dfb0;
  border-color: rgba(196, 185, 152, 0.7);
  filter: brightness(1.08);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 980px) {
  .news-detail-frame {
    width: 98%;
    padding: 54px 44px 62px;
  }

  .news-detail-title {
    font-size: clamp(26px, 4vw, 40px);
  }

  .news-detail-short,
  .news-detail-content {
    font-size: 16px;
  }

  .news-detail-gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .news-detail-page {
    padding: 0 4px 34px;
  }

  .news-detail-frame {
    width: 100%;
    min-height: 0;
    padding: 38px 20px 46px;
  }

  .news-detail-meta {
    font-size: 12px;
  }

  .news-detail-title {
    font-size: 25px;
    letter-spacing: 0.055em;
  }

  .news-detail-short,
  .news-detail-content,
  .news-detail-details__text {
    font-size: 14px;
    line-height: 1.52;
  }

  .news-detail-media__frame {
    aspect-ratio: 16 / 8;
  }

  .news-detail-section-title {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .news-detail-section-title__line {
    display: none;
  }

  .news-detail-gallery__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .news-detail-back,
  .news-detail-cta {
    width: 100%;
    min-width: 0;
    font-size: 13px;
  }
}

/* =========================================================
   UPDATES ARCHIVE PAGE
   Compact patch notes archive.
   Main card background: /ui/mu_item_card.png
========================================================= */

.updates-archive-page {
  width: 100%;
  min-width: 0;
  padding: 0 8px 46px;
  overflow: visible;
}

.updates-archive-shell {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  overflow: visible;
}

/* =========================================================
   MAIN FRAME
========================================================= */

.updates-archive-frame {
  position: relative;

  width: 97%;
  min-width: 0;
  min-height: 855px;

  margin: 0 auto;
  padding: 46px 46px 64px;

  box-sizing: border-box;

  background-image: url("/ui/content_frame.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;

  color: #d7ccaf;

  overflow: visible;
}

.updates-archive-frame > * {
  position: relative;
  z-index: 2;
}

/* =========================================================
   HEADER
========================================================= */

.updates-archive-header {
  max-width: 820px;
  margin: 0 auto 24px;
  text-align: center;
}

.updates-archive-seal {
  position: relative;

  width: fit-content;
  min-width: 126px;

  margin: 0 auto 14px;
  padding: 5px 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 3px;
  border: 1px solid rgba(217, 172, 108, 0.32);

  background:
    linear-gradient(
      180deg,
      rgba(25, 34, 39, 0.92) 0%,
      rgba(30, 41, 46, 0.94) 100%
    );

  box-shadow:
    inset 0 0 8px rgba(217, 172, 108, 0.15),
    inset 0 1px 0 rgba(255, 232, 186, 0.055),
    0 2px 4px rgba(0, 0, 0, 0.5);

  color: #f1ddb1;

  font-family: "Cormorant SC", serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.95),
    0 0 6px rgba(255, 221, 150, 0.18);
}

.updates-archive-seal::before,
.updates-archive-seal::after {
  content: "";
  position: absolute;
  top: 50%;

  width: 2px;
  height: 2px;

  border-radius: 50%;

  background: #ffdda0;
  box-shadow: 0 0 3px #ffdda0;

  transform: translateY(-50%);
}

.updates-archive-seal::before {
  left: -4px;
}

.updates-archive-seal::after {
  right: -4px;
}

.update-title-divider {
  width: min(280px, 82%);
  height: 14px;

  margin: 7px auto 9px;

  background: url("/ui/divider_horinozntal_gray.png") center / contain no-repeat;

  opacity: 0.72;

  pointer-events: none;

  filter:
    drop-shadow(0 0 7px rgba(0, 0, 0, 0.45));
}

/* =========================================================
   GRID
   6 cards per row on normal desktop.
========================================================= */

.updates-archive-grid {
  width: 100%;
  max-width: 1040px;

  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px 12px;

  overflow: visible;
}

/* =========================================================
   CARD WRAPPER
========================================================= */

.updates-archive-card {
  position: relative;
  min-width: 0;
  overflow: visible;
}

.updates-archive-card__link {
  position: relative;

  width: 100%;
  min-width: 0;

  display: flex;
  flex-direction: column;

  color: inherit;
  text-decoration: none;

  overflow: visible;

  transition:
    transform 0.26s ease,
    filter 0.26s ease;
}

.updates-archive-card__link:hover {
  transform: translateY(-3px);
  filter: brightness(1.04);
}

/* =========================================================
   MAIN CARD SURFACE
   ONLY background image. No gradients, no extra card border/shadow.
========================================================= */

.updates-archive-card__surface {
  position: relative;

  width: 100%;
  aspect-ratio: 600 / 695;

  padding: 16px 13px 18px;

  display: flex;
  flex-direction: column;
  align-items: center;

  background: url("/ui/archive_card.png") center center / 100% 100% no-repeat;

  text-align: center;

  overflow: hidden;
}

/* =========================================================
   IMAGE FRAME
   News-like image frame inside the card.
========================================================= */

.updates-archive-card__media {
  display: block;

  width: 100%;
  max-width: 92px;

  margin: 0 auto 8px;

  overflow: visible;
}

.updates-archive-card__media-frame {
  position: relative;

  width: 100%;
  aspect-ratio: 1 / 1;

  margin: 0;
  padding: 3px;

  display: block;

  isolation: isolate;

  background:
    linear-gradient(
      180deg,
      rgba(255, 225, 156, 0.08),
      transparent 24%,
      transparent 76%,
      rgba(90, 55, 30, 0.1)
    ),
    linear-gradient(180deg, #30251a 0%, #151d1e 30%, #0c1111 100%);

  border: 1px solid rgba(206, 150, 78, 0.36);

  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255, 236, 185, 0.055),
    inset 0 0 9px rgba(0, 0, 0, 0.48);

  overflow: hidden;
}

.updates-archive-card__media-frame::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: 4;
  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(244, 204, 126, 0.48),
      transparent
    )
    center top / 74% 1px no-repeat,
    linear-gradient(
      90deg,
      transparent,
      rgba(244, 204, 126, 0.22),
      transparent
    )
    center bottom / 74% 1px no-repeat,
    linear-gradient(
      180deg,
      transparent,
      rgba(244, 204, 126, 0.13),
      transparent
    )
    left center / 1px 62% no-repeat,
    linear-gradient(
      180deg,
      transparent,
      rgba(244, 204, 126, 0.13),
      transparent
    )
    right center / 1px 62% no-repeat;
}

.updates-archive-card__media-frame::after {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: 5;
  pointer-events: none;

  border: 1px solid rgba(75, 130, 136, 0.15);
}

.updates-archive-card__media-inner {
  position: relative;
  z-index: 2;

  width: 100%;
  height: 100%;

  display: block;

  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      rgba(7, 10, 12, 0.95) 0%,
      rgba(28, 40, 41, 0.72) 46%,
      rgba(7, 10, 12, 0.44) 100%
    );

  border: 1px solid rgba(227, 174, 92, 0.14);

  box-shadow:
    inset 0 0 0 1px rgba(78, 142, 148, 0.08),
    inset 0 0 11px rgba(0, 0, 0, 0.54);
}

.updates-archive-card__media-inner img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transition:
    transform 0.28s ease,
    filter 0.28s ease;

  user-select: none;
  pointer-events: none;
}

.updates-archive-card__link:hover .updates-archive-card__media-inner img {
  transform: scale(1.04);
  filter: brightness(1.08);
}

.updates-archive-card__placeholder {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(circle at 50% 30%, rgba(75, 130, 136, 0.14), transparent 54%),
    #111a1f;

  color: #d4b06a;

  font-family: "Cormorant SC", serif;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

/* =========================================================
   BADGE + DATE
========================================================= */

.updates-archive-card__meta {
  margin-bottom: 7px;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;

  color: rgba(206, 199, 178, 0.78);

  font-family: "Cormorant SC", serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.updates-archive-card__badge {
  position: relative;

  width: fit-content;
  min-width: 50px;

  padding: 3px 9px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 3px;
  border: 1px solid rgba(217, 172, 108, 0.3);

  background:
    linear-gradient(
      180deg,
      rgba(45, 48, 45, 0.88) 0%,
      rgba(18, 20, 20, 0.94) 100%
    );

  box-shadow:
    inset 0 0 8px rgba(217, 172, 108, 0.15),
    inset 0 1px 0 rgba(255, 232, 186, 0.055),
    0 2px 4px rgba(0, 0, 0, 0.5);

  color: #f1ddb1;

  font-family: "Cormorant SC", serif;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.updates-archive-card__badge::before,
.updates-archive-card__badge::after {
  content: "";
  position: absolute;
  top: 50%;

  width: 2px;
  height: 2px;

  border-radius: 50%;

  background: #ffdda0;
  box-shadow: 0 0 3px #ffdda0;

  transform: translateY(-50%);
}

.updates-archive-card__badge::before {
  left: -4px;
}

.updates-archive-card__badge::after {
  right: -4px;
}

.updates-archive-card__date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;

  min-width: 0;
}

.updates-archive-card__date img {
  width: 14px;
  height: 14px;

  object-fit: contain;

  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

/* =========================================================
   SHORT TEXT
========================================================= */

.updates-archive-card__text {
  color: #d7ccaf;

  font-family: "Cormorant SC", serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: 0.01em;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.86);

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;

  overflow: hidden;
}

/* =========================================================
   HOVER BOTTOM BAR
   Выезжающая часть под карточкой.
   Чуть уже карточки, полупрозрачный фон, золотые грани.
========================================================= */

.updates-archive-card__hover {
  position: relative;

  width: calc(100% - 6px);
  height: 0;

  margin: 0 auto;

  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  border-left: 2.5px solid rgba(196, 145, 78, 0.62);
  border-right: 2.5px solid rgba(196, 145, 78, 0.62);
  border-bottom: 2.5px solid rgba(226, 183, 112, 0.68);
  

  background: linear-gradient(180deg, rgb(50 58 66) 0%, rgb(46 57 62 / 78%) 58%, rgb(31 40 44 / 86%) 100%);

  box-shadow:
    inset 0 1px 0 rgba(255, 232, 186, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 5px 12px rgba(0, 0, 0, 0.34);

  transition:
    height 0.32s ease,
    opacity 0.24s ease,
    transform 0.32s ease;

  opacity: 0;
  transform: translateY(-2px);
}

/* маленькие золотые угловые акценты снизу */
.updates-archive-card__hover::before,
.updates-archive-card__hover::after {
  content: "";
  position: absolute;
  bottom: -1px;

  width: 28px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(255, 232, 174, 0.88),
      rgba(174, 121, 62, 0.18)
    );

  pointer-events: none;
}

.updates-archive-card__hover::before {
  left: 0;
}

.updates-archive-card__hover::after {
  right: 0;
  transform: scaleX(-1);
}

.updates-archive-card__link:hover .updates-archive-card__hover {
  height: 38px;
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   HOVER BUTTON — menu-btn-md--gray
========================================================= */

.updates-archive-card__read-more {
  width: 98px !important;
  min-width: 98px !important;
  max-width: 98px !important;

  height: 25px !important;
  min-height: 25px !important;

  margin: 0 !important;
}

.updates-archive-card__read-more .menu-btn-md__label {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: none;
}

/* =========================================================
   EMPTY STATE
========================================================= */

.updates-archive-empty {
  padding: 30px;

  border: 1px solid rgb(52 56 54 / 54%);

  background:
    linear-gradient(
      180deg,
      #1b2125 0%,
      #22292e 55%,
      #30383e 100%
    );

  color: #d7ccaf;

  font-family: "Cormorant SC", serif;
  font-size: 18px;
  text-align: center;

  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.38);
}

/* =========================================================
   PAGINATION
========================================================= */

.updates-archive-pagination {
  width: 100%;
  max-width: 700px;

  margin: 28px auto 0;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.updates-archive-pagination__pages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.updates-archive-pagination__btn,
.updates-archive-pagination__page {
  min-width: 34px;
  min-height: 30px;

  padding: 5px 12px;

  border: 1px solid rgba(147, 115, 65, 0.65);

  background:
    linear-gradient(
      180deg,
      #2c3840 0%,
      #1c2428 58%,
      #181f22 100%
    );

  color: #d7bc7b;

  font-family: "Cormorant SC", serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  cursor: pointer;

  transition:
    color 0.22s ease,
    border-color 0.22s ease,
    filter 0.22s ease,
    opacity 0.22s ease;
}

.updates-archive-pagination__btn:hover:not(:disabled),
.updates-archive-pagination__page:hover,
.updates-archive-pagination__page--active {
  color: #f2dfb0;
  border-color: rgba(196, 185, 152, 0.7);
  filter: brightness(1.08);
}

.updates-archive-pagination__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* =========================================================
   UPDATES ARCHIVE — MOBILE ADAPTIVE
   2 карточки в ряд, компактная высота + место под кнопку.
========================================================= */

.updates-archive-card__mobile-button {
  display: none !important;
}

@media (max-width: 640px) {
  .updates-archive-frame {
    width: 100%;
    min-height: 0;

    padding: 32px 14px 42px;
  }

  .updates-archive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 8px;
  }

  .updates-archive-card {
    max-width: none;
    margin: 0;
  }

  .updates-archive-card__surface {
    /*
      Было 600 / 695.
      Для мобильной делаем чуть выше под кнопку,
      но не слишком вытянутой.
    */
    aspect-ratio: 600 / 720;

    padding: 10px 8px 11px;
  }

  .updates-archive-card__media {
    max-width: 66px;
    margin-bottom: 5px;
  }

  .updates-archive-card__meta {
    margin-bottom: 4px;
    gap: 4px;

    font-size: 9px;
  }

  .updates-archive-card__badge {
    min-width: 42px;

    padding: 2px 7px;

    font-size: 8.5px;
    letter-spacing: 0.05em;
  }

  .updates-archive-card__date {
    gap: 4px;

    font-size: 8.5px;
    line-height: 1;
  }

  .updates-archive-card__date img {
    width: 13px;
    height: 13px;
  }

  .updates-archive-card__text {
    margin-top: 4px;

    font-size: 9.5px;
    line-height: 1.18;

    -webkit-line-clamp: 3;
  }

  /* На мобильной выезжающую панель убираем */
  .updates-archive-card__hover {
    display: none;
  }

  /* Кнопка внутри карточки под датой */
  .updates-archive-card__mobile-button {
    display: inline-flex !important;

    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;

    height: 29px !important;
    min-height: 29px !important;

    margin: 5px auto 0 !important;
  }

  .updates-archive-card__mobile-button .menu-btn-md__label {
    font-size: 8.5px;
    letter-spacing: 0.03em;
    text-transform: none;
  }

  .updates-archive-pagination {
    margin-top: 22px;
    gap: 8px;
  }

  .updates-archive-pagination__btn,
  .updates-archive-pagination__page {
    min-width: 30px;
    min-height: 28px;

    padding: 4px 9px;

    font-size: 11px;
  }
}

@media (max-width: 460px) {
  .updates-archive-frame {
    padding: 30px 10px 38px;
  }

  .updates-archive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 6px;
  }

  .updates-archive-card__surface {
    /*
      Для совсем маленьких экранов чуть ниже,
      чтобы 2 карточки в ряд не выглядели огромными.
    */
    aspect-ratio: 600 / 700;

    padding: 9px 7px 10px;
  }

  .updates-archive-card__media {
    max-width: 60px;
    margin-bottom: 4px;
  }

  .updates-archive-card__badge {
    min-width: 38px;

    padding: 2px 6px;

    font-size: 8px;
  }

  .updates-archive-card__date {
    font-size: 8px;
  }

  .updates-archive-card__date img {
    width: 12px;
    height: 12px;
  }

  .updates-archive-card__text {
    font-size: 9px;
    line-height: 1.16;

    -webkit-line-clamp: 3;
  }

  .updates-archive-card__mobile-button {
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;

    height: 27px !important;
    min-height: 27px !important;

    margin-top: 4px !important;
  }

  .updates-archive-card__mobile-button .menu-btn-md__label {
    font-size: 8px;
  }

  .updates-archive-seal {
    min-width: 100px;

    font-size: 12px;
  }
}