.nn-btn {
  display: inline-block;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  background: #080808;
  background-color: #1d1b1c;
  border: 2px solid #b28b3d;
  color: #d9a94a;
  border-radius: 30px;
  position: relative;
  padding: 12px 32px;
  z-index: 1;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0px 8px 10px -3px rgba(0, 0, 0, 0.3);
}
.nn-btn:hover {
  background: linear-gradient(to bottom, #672f33, #6b272c);
  color: #fff;
}
.nn-btn:after {
  content: "";
  position: absolute;
  background: url(../images/shadow-top-pink.png) no-repeat;
  width: 132px;
  height: 28px;
  left: 50%;
  margin-left: -66px;
  margin-bottom: 3px;
  bottom: 100%;
}
.nn-btn:before {
  content: "";
  position: absolute;
  background: url(../images/shadow-bottom-pink.png) no-repeat;
  width: 132px;
  height: 35px;
  left: 50%;
  margin-left: -66px;
  margin-top: 3px;
  top: 100%;
}

.button {
  display: inline-block;
  text-decoration: none;
}

.nn-btn--green {
  padding: 12px 40px;
  background: linear-gradient(to bottom, #6b1117, #b48d3d);
  color: #f2e8d5;
  border: 2px solid #ddac4b;
}
.nn-btn--green:hover {
  background: linear-gradient(to bottom, #b48d3d, #6b1117);
}

.container {
  width: 1380px;
  margin: 0 auto;
  position: relative;
}

.flex {
  display: flex;
}

.flex-c {
  display: flex;
  align-items: center;
}

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

.flex-s-c {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

.bright:hover {
  filter: brightness(120%);
}

/* Header
-----------------------------------------------------------------------------*/
.header {
  background: url(../images/hero-bg.webp) top 50px center / max(100%, 1920px) auto no-repeat;
  height: 1025px;
}
.header a {
  text-decoration: none;
}
.header__logo {
  text-align: center;
  position: absolute;
  top: 470px;
  width: 100%;
  left: 0px;
  padding-right: 30px;
}
.header__logo a {
  display: block;
}

@keyframes shadow {
  0% {
    box-shadow: 0px 0px 0px 0px rgba(206, 161, 70, 0), 0px 0px 0px 0px rgba(206, 161, 70, 0), 0px 0px 0px 0px rgba(206, 161, 70, 0);
  }
  15% {
    box-shadow: 0px 0px 0px 20px rgba(206, 161, 70, 0.2), 0px 0px 0px 0px rgba(206, 161, 70, 0.2), 0px 0px 0px 0px rgba(206, 161, 70, 0.1);
  }
  30% {
    box-shadow: 0px 0px 0px 20px rgba(206, 161, 70, 0.2), 0px 0px 0px 50px rgba(206, 161, 70, 0.2), 0px 0px 0px 0px rgba(206, 161, 70, 0.1);
  }
  45% {
    box-shadow: 0px 0px 0px 20px rgba(206, 161, 70, 0.2), 0px 0px 0px 50px rgba(206, 161, 70, 0.2), 0px 0px 0px 100px rgba(206, 161, 70, 0.1);
  }
  65% {
    box-shadow: 0px 0px 0px 20px rgba(206, 161, 70, 0), 0px 0px 0px 50px rgba(206, 161, 70, 0.2), 0px 0px 0px 100px rgba(206, 161, 70, 0.1);
  }
  80% {
    box-shadow: 0px 0px 0px 20px rgba(206, 161, 70, 0), 0px 0px 0px 50px rgba(206, 161, 70, 0), 0px 0px 0px 100px rgba(206, 161, 70, 0.1);
  }
  100% {
    box-shadow: 0px 0px 0px 20px rgba(206, 161, 70, 0), 0px 0px 0px 50px rgba(206, 161, 70, 0), 0px 0px 0px 100px rgba(206, 161, 70, 0);
  }
}



.topPanel {
  background: #171617;
  position: fixed;
  width: 100%;
  z-index: 99;
  top: 0px;
}
.topPanel__container {
  height: 77px;
  padding-right: 40px;
}
.topPanel__container img {
  max-height: 100px;
}
.topPanel__menu {
  position: relative;
  margin-left: -30px;
}
.topPanel__menu a {
  display: flex;
  align-items: center;
  position: relative;
  height: 77px;
  color: #fff5e0;
  text-transform: uppercase;
  padding: 0px 22px;
}
.topPanel__menu a:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 100%;
  opacity: 0;
  transition: 0.3s;
  width: 100%;
  height: 1px;
  background: #ebb750;
  margin-top: 1px;
  box-shadow: 0px 0px 10px 0px #ebb750;
}
.topPanel__menu a:hover {
  color: #e4b24e;
}
.topPanel__menu a:hover:after {
  left: 0px;
  opacity: 1;
}
.topPanel__menu .active a {
  color: #e4b24e;
}
.topPanel__menu .active a:after {
  left: 0px;
  opacity: 1;
}
.topPanel__buttons a {
  margin-left: 18px;
}

.body-page .header {
  height: 700px;
}

/* Middle
-----------------------------------------------------------------------------*/
.nn-sec {
  padding: 35px 0px;
}

.gallery {
  background: #080808;
  height: 670px;
}
.gallery .container {
  overflow: hidden;
}

.topNews {
  background: #080808;
  height: 653px;
}

.lastNews {
  background: #080808;
  height: 796px;
}

.topBlock {
  background: #080808;
  height: 722px;
}

.aboutBlock {
  background: #080808;
  height: 723px;
}

.container h2 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 24px;
}
.container h2 span {
  position: relative;
  text-transform: uppercase;
  background: linear-gradient(#fcfcfc 10%, #6a5758, #e4d9c1);
  -webkit-background-clip: text;
  color: transparent;
}
.container h2 span:before {
  content: "";
  position: absolute;
  right: 100%;
  width: 120px;
  height: 1px;
  background: #5e282c;
  margin-right: 15px;
  top: 50%;
}
.container h2 span:after {
  content: "";
  position: absolute;
  left: 100%;
  width: 120px;
  height: 1px;
  background: #5e282c;
  margin-left: 15px;
  top: 50%;
}

.slider-logo {
  position: absolute;
  width: 100%;
  top: 15px;
  left: 0px;
  text-align: center;
  background: rgba(24, 23, 24, 0.5);
  padding: 10px 0px;
}

.update {
  text-align: center;
  font-size: 72px;
  font-weight: bold;
  font-style: italic;
  position: absolute;
  left: 0px;
  top: 150px;
  width: 100%;
}
.update b {
  background: linear-gradient(to bottom, #fbf1dd, #cb9f45);
  -webkit-background-clip: text;
  color: transparent;
  display: block;
}
.update span {
  font-size: 92px;
  display: block;
  width: 100%;
  text-align: center;
  background: linear-gradient(to bottom, #fbf1dd, #cb9f45);
  -webkit-background-clip: text;
  color: transparent;
}

.blockInfo-text {
  position: absolute;
  width: 100%;
  bottom: 50px;
  left: 0px;
  padding: 0px 80px;
  font-size: 18px;
  font-weight: bold;
  font-style: italic;
  color: #fff;
}
.blockInfo-text span {
  font-size: 32px;
  text-transform: uppercase;
  display: block;
}

.top-news {
  background: url(../images/top-news_bg.webp) no-repeat;
  width: 330px;
  height: 460px;
  margin: 0px 3px;
  border-bottom: 2px solid #56171b;
  box-shadow: 0px 10px 15px -2px rgba(0, 0, 0, 0.3);
  position: relative;
  transition: 0.3s;
}
.top-news:hover {
  box-shadow: 0px 0px 15px 0px rgba(208, 162, 71, 0.3);
  margin-top: -20px;
}
.top-news.top-news_1:after {
  content: "";
  position: absolute;
  background: url(../images/top-news-img_1.webp) no-repeat;
  width: 383px;
  height: 456px;
  top: -69px;
  left: -32px;
}
.top-news.top-news_2:after {
  content: "";
  position: absolute;
  background: url(../images/top-news-img_2.webp) no-repeat;
  width: 382px;
  height: 356px;
  top: -50px;
  left: -20px;
}
.top-news.top-news_3:after {
  content: "";
  position: absolute;
  background: url(../images/top-news-img_3.webp) no-repeat;
  width: 372px;
  height: 363px;
  top: -52px;
  left: -20px;
}
.top-news-block {
  padding: 30px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  z-index: 2;
}
.top-news-block h3 {
  text-transform: uppercase;
}
.top-news-text {
  line-height: 1.5;
  color: #c59a43;
  margin-bottom: 20px;
  height: 85px;
  overflow: hidden;
}
.top-news-text p {
  margin-bottom: 0px;
}
.top-news-date {
  color: #dcac4b;
  font-size: 12px;
  margin-bottom: 18px;
}
.top-news-date b {
  color: #feeecf;
  font-size: 24px;
  font-weight: normal;
}
.top-news-more {
  text-align: center;
}

.lastNews .container:before {
  content: "";
  background: url(../images/last-news-hero.webp) no-repeat;
  width: 693px;
  height: 813px;
  position: absolute;
  top: -51px;
  left: 70px;
}
.lastNews .container h1 {
  padding-left: 300px;
}

.lastNewsBlock {
  position: absolute;
  z-index: 3;
  width: auto;
  left: 600px;
  top: 90px;
}

.lastNews-block {
  margin-bottom: 38px;
}
.lastNews-block:nth-child(2n) {
  margin-left: 170px;
}
.lastNews-block__img {
  height: 125px;
  width: 125px;
  border-radius: 50%;
  margin-right: 55px;
  position: relative;
}
.lastNews-block__img:before {
  content: "";
  border: 1px solid rgba(188, 146, 64, 0.5);
  height: 150px;
  width: 150px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -75px;
  margin-top: -75px;
  border-radius: 50%;
}
.lastNews-block__img:after {
  content: "";
  border: 1px solid rgba(188, 146, 64, 0.2);
  height: 200px;
  width: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -100px;
  border-radius: 50%;
}
.lastNews-block__img img {
  height: 125px;
  width: 125px;
  border-radius: 50%;
  box-shadow: 0px 7px 40px 0px rgba(0, 0, 0, 0.4);
}
.lastNews-block__info h3 {
  color: #fff5e0;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: normal;
  margin-bottom: 14px;
}
.lastNews-block__text {
  line-height: 1.6;
  margin-bottom: 14px;
  height: 70px;
  overflow: hidden;
  width: 400px;
}
.lastNews-block__text p {
  margin-bottom: 0px;
}
.lastNews-block__buttons a {
  padding: 10px 20px;
}
.lastNews-block__buttons span {
  margin-left: 33px;
  color: #794144;
  font-size: 12px;
}
.lastNews-block__buttons span b {
  font-size: 14px;
  font-weight: normal;
}

.news-icon {
  background: url(../images/news-icon.png) no-repeat;
  width: 13px;
  height: 16px;
  display: inline-block;
  margin-right: 5px;
}

.top-block {
  width: 700px;
  position: relative;
  height: 652px;
  transition: 0.3s;
  opacity: 0.3;
  transform: scale(0.9);
}
.top-block.active {
  opacity: 1;
  transform: scale(1);
}
.top-block.active_1 {
  opacity: 1;
  transform: scale(1);
}
.top-block.leftBlock:after {
  content: "";
  background: url(../images/left-hero.webp) no-repeat;
  position: absolute;
  width: 663px;
  height: 721px;
  left: 40px;
  top: -35px;
  transition: 0.3s;
}
.top-block.rightBlock:after {
  content: "";
  background: url(../images/right-hero.webp) no-repeat;
  position: absolute;
  width: 1011px;
  height: 688px;
  right: 10px;
  top: -1px;
  transition: 0.3s;
}

.leftBlock {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 2px;
  z-index: 5;
}

.rightBlock {
  z-index: 4;
  display: flex;
  align-items: center;
  padding-left: 2px;
  justify-content: flex-start;
}

.top-stat_block {
  width: 360px;
  background: rgba(17, 16, 17, 0.9);
  padding: 45px 45px;
  position: relative;
  z-index: 5;
}
.top-stat_block h3 {
  text-align: center;
  margin-bottom: 30px;
}
.top-stat_block h3 span {
  position: relative;
  text-transform: uppercase;
  background: linear-gradient(#fcfcfc 10%, #6a5758, #e4d9c1);
  -webkit-background-clip: text;
  color: transparent;
}
.top-stat_block a {
  text-decoration: none;
}
.top-stat_block table th {
  position: relative;
}
.top-stat_block table td {
  position: relative;
}
.top-stat_block table .num {
  position: absolute;
  font-size: 12px;
  color: #ff0000;
  top: 3px;
  margin-left: -2px;
}
.top-stat_block .no-reset {
  color: #9d7b35;
  font-size: 12px;
}

.aboutBlock h1 {
  padding-left: 600px;
}
.aboutBlock .container:after {
  content: "";
  background: url(../images/about-hero.webp) no-repeat;
  position: absolute;
  width: 969px;
  height: 728px;
  left: 50%;
  margin-left: -450px;
  top: -22px;
}

.textBlock {
  position: absolute;
  width: 495px;
  height: 507px;
  padding-top: 40px;
  padding-left: 40px;
}
.textBlock.textBlock-left {
  background: url(../images/left-bg-text.webp) no-repeat;
  top: 70px;
  left: 0px;
}
.textBlock.textBlock-right {
  background: url(../images/right-bg-text.webp) no-repeat;
  top: 170px;
  right: 0px;
}
.textBlock .text {
  width: 400px;
  margin: 0 auto;
  line-height: 1.7;
  margin-bottom: 20px;
  color: #c39842;
  font-size: 14px;
  position: relative;
}
.textBlock .text span {
  position: absolute;
  color: #fff5e0;
  font-size: 16px;
  height: 28px;
  width: 28px;
  text-align: center;
  line-height: 28px;
  border: 1px solid #fff5e0;
  left: -40px;
  border-radius: 50%;
}
.textBlock .hr {
  height: 1px;
  display: block;
  width: 340px;
  margin: 0 auto;
  border-bottom: 1px dashed #72373b;
  margin-bottom: 17px;
}

/* Footer
-----------------------------------------------------------------------------*/
.footer {
  background: #080808;
  height: 386px;
  position: relative;
}
.footer a {
  text-decoration: none;
}

.shop-button {
  background: url(../images/shop-button.webp) no-repeat;
  width: 283px;
  height: 132px;
  text-align: center;
  font-size: 16px;
  color: #e7ecff;
  text-transform: uppercase;
  text-decoration: none;
  position: absolute;
  left: 50%;
  margin-left: -141px;
  top: 40px;
}

.buttonTop {
  background: url(../images/top-button.png) no-repeat;
  width: 58px;
  height: 58px;
  position: absolute;
  left: 50%;
  margin-left: -29px;
  top: 208px;
  cursor: pointer;
}

.footerBottom {
  position: absolute;
  left: 0px;
  top: 235px;
  height: 150px;
  width: 100%;
  justify-content: space-between;
  padding: 0px 30px;
}

.copy-text {
  width: 310px;
}
.copy-text span {
  color: #e0f0fd;
  display: block;
  margin-bottom: 10px;
}
.copy-text p {
  font-size: 10px;
  line-height: 1.2;
  color: #8b8b8c;
  text-transform: uppercase;
  margin-bottom: 0px;
}

.menu-bottom li {
  padding: 0px 10px;
}
.menu-bottom li a {
  text-transform: uppercase;
  color: #5c292d;
  padding: 0px 8px;
  display: block;
}
.menu-bottom li a:hover {
  color: #e4b24e;
}
.menu-bottom .active a {
  color: #e4b24e;
}

.main {
  background: #080808;
  min-height: 600px;
  border-bottom: 2px solid #000;
}
.lk-page {
  margin: 0 auto;
  width: 1000px;
  background: #131112;
  box-shadow: 0px 40px 50px -20px rgba(0, 0, 0, 0.3);
  min-height: 400px;
  margin-bottom: 100px;
  padding-top: 20px;
  padding-bottom: 1px;
}
.content-lk {
  padding: 45px;
}
.content-lk a {
  text-decoration: none;
}

.profile-leftBlock {
  width: 175px;
}

.profile-rightBlock {
  width: calc(100% - 175px);
}

.lk-ava {
  width: 133px;
  height: 210px;
  border: 1px solid #571217;
  background: #1d1b1c;
  margin-bottom: 35px;
}

.lk-val {
  color: #bdd9fd;
}
.lk-val p {
  margin-bottom: 10px;
}
.lk-val span {
  color: #e4b24e;
}

.lk-info {
  width: calc(50% - 7px);
}

.lk-table {
  width: 100%;
}
.lk-table a {
  color: #ebb750;
  text-decoration: underline;
}
.lk-table a:hover {
  text-decoration: none;
}

.lkButton {
  color: #fff5e0;
  text-transform: uppercase;
  padding: 14px 42px;
  border: 1px solid #6f3337;
  font-size: 12px;
}
.lkButton:hover {
  border: 1px solid #e4b24e;
}

.modal_div {
  width: 1000px;
  min-height: 510px;
  background: #080808;
  position: fixed;
  top: 45%;
  left: 50%;
  margin-top: -150px;
  margin-left: -500px;
  display: none;
  opacity: 0;
  z-index: 199;
  padding: 50px 0px;
}

.modal_div .modal_close {
  width: 33px;
  height: 33px;
  background: url(../images/close-icon.png) no-repeat;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  display: block;
}

#overlay {
  z-index: 190;
  position: fixed;
  background-color: #000;
  opacity: 0.8;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
  display: none;
}

.modal-content {
  padding: 0px 50px;
  text-align: center;
}
.modal-content h2 {
  text-align: center;
  margin-bottom: 50px;
  font-size: 24px;
}
.modal-content h2 span {
  position: relative;
  text-transform: uppercase;
  background: linear-gradient(#fcfcfc 10%, #6a5758, #e4d9c1);
  -webkit-background-clip: text;
  color: transparent;
}
.modal-content h2 span:before {
  content: "";
  position: absolute;
  right: 100%;
  width: 120px;
  height: 1px;
  background: #5e282c;
  margin-right: 15px;
  top: 50%;
}
.modal-content h2 span:after {
  content: "";
  position: absolute;
  left: 100%;
  width: 120px;
  height: 1px;
  background: #5e282c;
  margin-left: 15px;
  top: 50%;
}
.modal-content form p {
  margin-bottom: 12px;
}

.formButton {
  text-align: center;
  margin-top: 40px;
}

.downloadBlock {
  text-align: center;
  padding: 35px;
  margin: 0px 35px;
  margin-bottom: 50px;
  border-bottom: 1px dashed #612e32;
}
.downloadBlock p {
  color: #fff5e0;
  margin-bottom: 30px;
}

.download-block {
  margin-bottom: 40px;
}
.download-block:last-child {
  margin-bottom: 0px;
}

.client-text {
  margin-right: 50px;
  width: 185px;
  height: 75px;
  color: #e4b24e;
  flex-wrap: wrap;
  align-content: center;
  background: #1d1b1c;
}
.client-text span {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 9px;
}

.newsBlock {
  flex-wrap: wrap;
  width: 1300px;
  margin: 0 auto;
  padding: 40px 0px;
}
.newsBlock .lastNews-block {
  width: calc(50% - 25px);
  margin-bottom: 80px;
}
.newsBlock .lastNews-block__text {
  width: auto;
  height: auto;
  overflow: visible;
}
.newsBlock .lastNews-block:nth-child(2n) {
  margin-left: 0px;
}

.pagination {
  width: 100%;
  margin: 30px 0px;
}
.pagination li {
  margin: 0px 7px;
}
.pagination li .number {
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border: 1px solid #602b2e;
  color: #fff5e0;
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  position: relative;
}
.pagination li .number.active {
  background: #a78239;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
}
.pagination li .number:hover {
  background: #a78239;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
}
.pagination li .number.disabled {
  opacity: 0.5;
}
.pagination li .number.numberPrev {
  background: #5e3033;
  border: 1px solid #5e3033;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
  margin-right: 20px;
}
.pagination li .number.numberPrev:after {
  content: "";
  background: url(../images/prev.png) no-repeat;
  position: absolute;
  width: 15px;
  height: 12px;
  left: 50%;
  top: 50%;
  margin-left: -8px;
  margin-top: -6px;
}
.pagination li .number.numberNext {
  background: #5e3033;
  border: 1px solid #5e3033;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
  margin-left: 20px;
}
.pagination li .number.numberNext:after {
  content: "";
  background: url(../images/next.png) no-repeat;
  position: absolute;
  width: 15px;
  height: 12px;
  left: 50%;
  top: 50%;
  margin-left: -7px;
  margin-top: -6px;
}

.contentPage {
  width: 1000px;
  margin: 0 auto;
  padding: 45px 0px;
  line-height: 2;
}
.contentPage h2 {
  font-size: 18px;
  color: #fff5e0;
  font-weight: normal;
  border-bottom: 1px solid #421518;
  padding-bottom: 15px;
  margin-bottom: 20px;
}
.contentPage img {
  max-width: 1000px;
}

.lk-buttons a {
  text-decoration: none;
}

.rank-title {
  text-align: center;
  margin-bottom: 30px;
}
.rank-title p {
  color: #fff5e0;
  margin-bottom: 20px;
}
.rank-title span {
  color: #e4b24e;
  text-transform: uppercase;
}

.lk-buttons-rank {
  margin-bottom: 35px;
}
.lk-buttons-rank a {
  margin: 0px 4px;
}

.rank-table th {
  border-left: 1px solid #461b1e;
  border-right: 1px solid #461b1e;
  background: #1d1b1d;
  color: #bdd9fd;
  text-align: center;
}
.rank-table td {
  border-left: 1px solid #461b1e;
  border-right: 1px solid #461b1e;
  color: #fff5e0;
  text-align: center;
}
.rank-table td:nth-child(5n+5) {
  color: #e4b24e;
}
.rank-table a {
  text-decoration: underline;
  color: #ebb750;
}
.rank-table a:hover {
  text-decoration: none;
}
.rank-table img {
  margin-bottom: -1px;
  margin-left: 2px;
}

.online-icon {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 50%;
  background: linear-gradient(to right bottom, #b48d3d, #e4b24e);
  margin-left: 3px;
}
.online-icon.offline-icon {
  background: linear-gradient(to right bottom, #ff3f3f, #a50f0f);
}

.searchBlock {
  margin-top: 40px;
}
.searchBlock input {
  text-align: left;
  margin-right: 20px;
}

.content-shop {
  padding: 30px 45px 0px 45px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0px -14px;
}

.shopBlock {
  width: 155px;
  height: 240px;
  border: 1px solid #78383c;
  margin: 0px 14px 30px 14px;
  position: relative;
  transition: 0.3s;
}
.shopBlock:hover:after {
  content: "";
  border: 1px solid #3b171a;
  position: absolute;
  width: 171px;
  height: 260px;
  top: -12px;
  left: -9px;
}
.shopBlock .shop-title {
  height: 37px;
  line-height: 37px;
  text-align: center;
  background: #201e20;
  border-bottom: 1px solid #3a1719;
  color: #fff5e0;
}
.shopBlock .shop-info {
  background: linear-gradient(to bottom, #131213, #201e20);
  height: calc(100% - 37px);
}
.shopBlock .shop-item {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shopBlock .shop-name {
  color: #fff5e0;
  font-size: 12px;
  margin-bottom: 8px;
  text-align: center;
  padding: 0px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shopBlock .shop-price {
  color: #e4b24e;
  font-size: 12px;
  margin-bottom: 8px;
  text-align: center;
  padding: 0px 15px;
}
.shopBlock .shop-price span {
  color: #dbab4a;
  font-size: 14px;
}
.shopBlock .shopButton {
  text-align: center;
}
.shopBlock .shopButton button, .shopBlock .shopButton .button {
  font-size: 12px;
  text-transform: none;
  padding: 3px 30px;
  background: linear-gradient(to bottom, #e4b24e, #b48d3d);
  box-shadow: 0px 0px 9px 0px rgba(163, 178, 79, 0.2);
}
.shopBlock .shopButton button:after, .shopBlock .shopButton .button:after {
  display: none;
}
.shopBlock .shopButton button:before, .shopBlock .shopButton .button:before {
  display: none;
}

.shop-tabs {
  background: #201e20;
  padding: 14px 15px;
  margin: 20px 30px 0px 30px;
}
.shop-tabs a {
  text-decoration: none;
  color: #fff5e0;
  margin: 0px 30px;
}
.shop-tabs a:first-child {
  margin: 0px 30px 0px 0px;
}

.topBlock-content {
  margin: 0 auto;
  width: 1065px;
  align-items: flex-start;
}
.topBlock-content .top-stat_block {
  box-shadow: 0px 40px 50px -20px rgba(0, 0, 0, 0.3);
  border-right: 1px solid #242223;
}
.topBlock-content .lk-page {
  width: calc(100% - 360px);
}

.topInfo-ava {
  width: 135px;
  height: 220px;
  background: #1d1b1c;
  border: 1px solid #571217;
  margin-right: 60px;
}

.topInfo {
  padding: 10px 45px;
}
.topInfo .rank-table th {
  border-left: none;
  border-right: none;
  padding: 14px 10px;
}
.topInfo .rank-table td {
  border-left: none;
  border-right: none;
}

.lk-table.top {
  width: 400px;
}

.heroInfo {
  padding: 50px;
  position: relative;
}
.heroInfo .heroInfo-name {
  color: #fff5e0;
  font-size: 18px;
  border-bottom: 1px solid #272527;
  padding-bottom: 20px;
  text-align: center;
  text-transform: uppercase;
}

.heroItems {
  background: url(../images/hero-bg.png) center center no-repeat;
  height: 420px;
}


/* EPICMU on the theme
-----------------------------------------------------------------------------*/
html,
body {
  margin: 0;
  padding: 0;
  background-color: #171617;
}
body {
  overflow-x: hidden;
}
body::before,
body::after {
  display: none !important;
}
.header,
.footer,
.nn-sec,
.main {
  font-family: Inter, Arial, sans-serif;
  font-size: 14px;
  color: #c39842;
  box-sizing: border-box;
}
.header *,
.footer *,
.nn-sec * {
  box-sizing: border-box;
}
.header ul,
.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.container {
  width: 100%;
  max-width: 1380px;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.nn-sec p {
  margin-bottom: 0;
}
.nn-sec table {
  width: 100%;
}

/* Top panel */
.logoTop img {
  display: block;
  max-height: 76px;
  width: auto;
}
.topPanel__menu {
  margin-left: 0;
}
.topPanel__menu a {
  padding: 0 16px;
  white-space: nowrap;
  text-decoration: none;
}
.topPanel__buttons a {
  white-space: nowrap;
}
.nn-btn {
  padding: 11px 26px;
  font-size: 13px;
}

/* Header */
.header {
  background-color: #171617;
  position: relative;
}
.header__logo {
  top: 440px;
  padding-right: 0;
}
.header__logo img {
  max-width: 100%;
  height: auto;
}
.body-page .header {
  height: 250px;
  background-position: center 30px;
}



















/* Sections of the home page */
.nn-sec {
  position: relative;
}
.nn-sec h2 {
  color: #fff5e0;
  line-height: 1.2;
}
.topNews {
  height: auto;
  min-height: 653px;
}
.news-content {
  display: flex;
  justify-content: center;
  gap: 40px;
  padding-top: 95px;
}
.top-news {
  flex: 0 0 330px;
}
.top-news-block h3 {
  color: #fff5e0;
  font-size: 16px;
  line-height: 1.2;
  margin-bottom: 12px;
  height: 38px;
  overflow: hidden;
}
.top-news-block h3 a {
  color: inherit;
  text-decoration: none;
}
.top-news-more .nn-btn,
.lastNews-block__buttons .nn-btn {
  padding: 9px 22px;
}
.lastNews-block__img img {
  object-fit: cover;
  display: block;
}
.lastNews-block__info h3 {
  line-height: 1.3;
}
.lastNews-block__info h3 a {
  color: inherit;
  text-decoration: none;
}
.top-block {
  flex: 1 1 50%;
  width: auto;
  min-width: 0;
  opacity: 1;
  transform: none;
}
.top-stat_block table {
  margin-bottom: 0;
}
.top-stat_block td,
.top-stat_block th {
  padding: 9px 8px;
  text-align: left;
  color: #fff5e0;
}
.top-stat_block th {
  color: #fff;
  font-weight: normal;
}
.top-stat_block tr {
  border-bottom: 1px dashed #571217;
}
.top-stat_block td:last-child,
.top-stat_block th:last-child {
  text-align: right;
}
.top-stat_block a {
  color: #e4b24e;
}
.nn-all {
  display: block;
  text-align: center;
  margin-top: 22px;
  color: #e4b24e;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 12px;
}
.textBlock .text a {
  color: #fff5e0;
  font-weight: bold;
  text-decoration: none;
}
.textBlock .text time,
.textBlock .text em {
  display: block;
  font-style: normal;
  color: #c39842;
}
.textBlock .text em {
  color: #e4b24e;
}
.aboutBlock .container {
  height: 650px;
}
.aboutBlock h2 {
  position: relative;
  z-index: 2;
}
.textBlock {
  height: auto;
  padding-bottom: 64px;
  background-size: 100% 100% !important;
  z-index: 1;
}
.textBlock.textBlock-left {
  top: 110px;
}
.textBlock.textBlock-right {
  top: 230px;
}
.top-news-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  height: 84px;
}

/* Inner pages */
.main {
  display: block;
  min-height: 600px;
  padding-bottom: 80px;
}
.nn-title {
  text-align: center;
  padding: 32px 0;
  background: #181617;
  border-bottom: 1px solid #272527;
  margin-bottom: 40px;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.2;
}
.nn-title span {
  position: relative;
  text-transform: uppercase;
  background: linear-gradient(#fcfcfc 10%, #6a5758, #e4d9c1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lk-page {
  width: 100%;
  max-width: 1240px;
  margin-bottom: 0;
  padding: 0;
}
.main .page-shell {
  display: block;
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 34px 30px 40px;
  background: none;
}
.is-theme .page-shell {
  font-size: 15px;
  line-height: 1.7;
  color: #ede3d0;
}
.newsBlock {
  width: auto;
  padding: 10px 20px 0;
}
.nn-article h1 {
  color: #fff5e0;
  font-size: 24px;
  margin-bottom: 16px;
}
.nn-article .nn-date {
  color: #794144;
  font-size: 12px;
  margin-bottom: 18px;
}
.nn-article img {
  max-width: 100%;
  height: auto;
}
.nn-article .news-hero {
  display: block;
  margin: 0 auto 24px;
  border-radius: 4px;
}
.nn-article .news-body table {
  width: 100%;
  margin-bottom: 20px;
}
.nn-article .news-body ul,
.nn-article .news-body ol {
  margin: 0 0 20px 20px;
}
.nn-article .news-body ul {
  list-style: disc;
}
.nn-article .news-body ol {
  list-style: decimal;
}

/* Footer */
.footer {
  background-color: #171617;
}
.footerBottom {
  gap: 20px;
}
.menu-bottom li {
  padding: 0 4px;
}
.menu-bottom li a {
  font-size: 12px;
  color: #a39a88;
}
.nn-langs a {
  color: #a39a88;
  font-weight: bold;
  margin-left: 8px;
  text-transform: uppercase;
  font-size: 12px;
}
.nn-langs a:hover,
.nn-langs a.active {
  color: #e4b24e;
}

/* Windows */
.login-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  font-family: Inter, Arial, sans-serif;
}
.login-modal.is-open,
.login-modal:target {
  display: flex;
}
.login-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 9, 9, 0.84);
}
.login-modal__card {
  position: relative;
  box-sizing: border-box;
  width: 400px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: #131112;
  border: 1px solid #571217;
  border-top: 2px solid #b28b3d;
  padding: 30px 36px;
  color: #ede3d0;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 0 60px rgba(193, 151, 66, 0.3);
}
.login-modal__close {
  position: absolute;
  top: 10px;
  right: 14px;
  color: #c39842;
  text-decoration: none;
  font-size: 15px;
}
.auth-kicker {
  display: block;
  color: #c39842;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1px;
}
.auth-card-head h2 {
  color: #fff5e0;
  font-size: 22px;
  text-transform: uppercase;
  margin: 2px 0 18px;
}
.auth-field {
  margin-bottom: 12px;
}
.auth-field label {
  display: block;
  margin-bottom: 5px;
  color: #c39842;
}
.auth-field input:not([type="checkbox"]) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  background: #171617;
  border: 1px solid rgba(235, 183, 80, 0.15);
  border-left: 2px solid rgba(235, 183, 80, 0.5);
  color: #fff5e0;
  padding: 11px 14px;
  text-align: left;
}
.auth-field small {
  display: block;
  margin-top: 3px;
  color: #ff8a9e;
}
.auth-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.auth-agree {
  display: flex;
  gap: 8px;
  color: #ede3d0;
}
.auth-agree input {
  min-width: 0;
}
.auth-agree a,
.auth-link {
  color: #e4b24e;
}
.auth-alert {
  background: rgba(192, 150, 65, 0.18);
  color: #ffb4c4;
  padding: 9px 12px;
  margin-bottom: 14px;
}
.auth-submit {
  display: block;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background: linear-gradient(to bottom, #6b1117, #b48d3d);
  border: 2px solid #ddac4b;
  border-radius: 30px;
  color: #f2e8d5;
  font-size: 13px;
  text-transform: uppercase;
  padding: 12px 15px;
  margin-top: 8px;
}
.login-modal__links {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  font-size: 12px;
}

/* Wider than the art: the hero grows with it, or the figure is cut at the knees */
@media (min-width: 1921px) {
  .body-home .header {
    height: calc(48vw + 50px);
  }
}

/* Windows where the container reaches the screen edge */
@media (min-width: 1100px) and (max-width: 1460px) {
  .logoTop {
    margin-left: 24px;
  }
  .body-home .header {
    background-position: -150px 50px;
    background-size: 1700px auto;
  }




}

/* Narrow windows */
@media (max-width: 1320px) {
  .topPanel__menu a {
    padding: 0 10px;
    font-size: 13px;
  }
  .nn-btn {
    padding: 10px 18px;
  }
  .logoTop img {
    max-height: 58px;
  }
  .lastNews .container:before {
    left: -60px;
  }
  .lastNewsBlock {
    left: 440px;
  }
  .lastNews-block:nth-child(2n) {
    margin-left: 60px;
  }
  .textBlock.textBlock-left {
    left: 10px;
  }
}

/* Phones */
@media (max-width: 1099px) {
  .header,
  .nn-sec,
  .main,
  .footer {
    overflow-x: clip;
  }
  .topPanel {
    position: static;
  }
  .topPanel__container {
    height: auto;
    flex-wrap: wrap;
    justify-content: center;
    padding: 8px 12px;
    gap: 6px;
  }
  .topPanel__menu {
    flex-wrap: wrap;
    justify-content: center;
  }
  .topPanel__menu a {
    height: 34px;
  }
  .header,
  .body-page .header {
    height: auto;
    background-position: center top;
    background-size: cover;
    padding-bottom: 24px;
  }







  .body-home .header {
    background-position: -170px 170px;
    background-size: auto 650px;
  }
  .header__logo img {
    max-width: 300px;
  }
  .topNews,
  .lastNews,
  .topBlock,
  .aboutBlock {
    height: auto;
    min-height: 0;
    background-size: cover;
  }
  .news-content {
    flex-direction: column;
    align-items: center;
    gap: 90px;
  }
  .top-news {
    flex: 0 0 auto;
    max-width: 100%;
  }
  .lastNews .container:before,
  .aboutBlock .container:after,
  .top-block.leftBlock:after,
  .top-block.rightBlock:after {
    display: none;
  }
  .lastNewsBlock {
    position: static;
    padding: 0 16px;
  }
  .lastNews-block,
  .lastNews-block:nth-child(2n),
  .newsBlock .lastNews-block {
    width: auto;
    margin-left: 0;
    display: block;
  }
  .lastNews-block__img {
    margin: 0 auto 30px;
  }
  .lastNews-block__text {
    width: auto;
  }
  .topBlock .container {
    display: block;
  }
  .top-block {
    height: auto;
    padding: 12px 16px;
    justify-content: center;
  }
  .top-stat_block {
    width: 100%;
    padding: 24px;
  }
  .aboutBlock .container {
    height: auto;
  }
  .textBlock {
    position: static;
    width: auto;
    height: auto;
    background: none !important;
    padding: 10px 16px 10px 56px;
  }
  .textBlock .text,
  .textBlock .hr {
    width: auto;
  }
  .main .page-shell {
    padding: 20px 12px;
  }
  .footer {
    height: auto;
    padding-bottom: 20px;
    background-size: cover;
  }
  .shop-button,
  .buttonTop,
  .footerBottom {
    position: static;
    margin: 12px auto 0;
  }
  .footerBottom {
    height: auto;
    display: block;
    text-align: center;
    padding: 0 16px;
  }
  .copy-text {
    width: auto;
  }
  .menu-bottom {
    flex-wrap: wrap;
    justify-content: center;
    margin: 10px 0;
  }
  .copy-text {
    margin-bottom: 12px;
  }
  .copy-text p {
    font-size: 11px;
    line-height: 1.5;
    color: #c1b9aa;
  }
  .menu-bottom li a {
    color: #d8cfbe;
    line-height: 1.7;
  }
  .main {
    padding-bottom: 24px;
  }

  /* The news art has hard desktop panel edges, they land behind the cards once scaled */
  .lastNews {
    background: linear-gradient(180deg, #1a181a 0, #282527 18%, #282527 82%, #1a181a 100%);
  }
  /* Inner pages keep only a thin strip of the hero art, it reads as a stray crop */
  .body-page .header {
    background-image: none;
    padding-bottom: 0;
  }
  .lastNewsBlock .lastNews-block__text {
    height: auto;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  /* The tab art has its title baked in, it must keep its own proportions or the word is cut */
  .ranking-tab {
    min-height: 0;
    aspect-ratio: 5 / 2;
  }
  /* A two-line label does not fit the fixed 40px pill */
  .siege-cta {
    height: auto;
    min-height: 40px;
    padding: 9px 22px;
    justify-content: center;
    text-align: center;
  }
  /* Keeps the mount inside its box, so it does not run over the text under it */
  .skinshop-mount__art {
    height: 200px;
  }
  .skinshop-mount__art img {
    max-height: 200px;
  }
  .login-modal__close {
    top: 2px;
    right: 4px;
    padding: 10px 12px;
  }
}

/* Tablets: the top panel fits two rows, so the hero art starts higher than on a phone */
@media (min-width: 640px) and (max-width: 1099px) {
  .body-home .header {
    background-position: 0 110px;
  }
  /* The price box takes its width first and leaves the text a thin column */
  .skinshop-mount {
    grid-template-columns: 200px minmax(0, 1fr);
  }
  .skinshop-mount > :last-child {
    grid-column: 2;
  }
  .skinshop-mount__art {
    grid-row: 1 / span 2;
  }
}

.nn-gap {
  height: 40px;
}

.main .page-shell {
  z-index: auto;
}
.login-modal select option {
  background: #181718;
  color: #fff;
}
.page-shell > nav.market-tabs {
  margin-bottom: 16px;
}

/* Fonts: Exo 2 for titles, menu and buttons, Inter for text */
:root {
  --font-title: 'Exo 2', Inter, Arial, sans-serif;
}
h1,
h2,
h3,
h4,
h5,
.topPanel__menu a,
.nn-btn,
.button {
  font-family: var(--font-title);
}

/* Black, gold and crimson: the owner's mockup */
:root {
  --k-bg: #0b0a0c;
  --k-card: #141215;
  --k-card2: #1b1719;
  --k-line: #8f6f35;
  --k-gold: #d9a94e;
  --k-gold2: #f5d48a;
  --k-red: #6e1218;
  --k-red2: #9c1c22;
  --k-text: #f2e8d5;
  --k-mute: #a89f91;
}
html,
body,
.header,
.main,
.nn-sec {
  background-color: var(--k-bg);
}
.header,
.footer,
.nn-sec,
.main {
  color: var(--k-mute);
}
.topPanel {
  background: rgba(8, 7, 9, 0.97);
  border-bottom: 1px solid rgba(143, 111, 53, 0.35);
}
.topPanel__menu a {
  color: var(--k-text);
}
.topPanel__menu a:hover,
.topPanel__menu li.active a {
  color: var(--k-gold2);
}
.nn-btn,
.nn-btn--green {
  min-width: 150px;
  padding: 12px 38px;
  background: none;
  border: 0;
  border-radius: 0;
  border-image: url(../images/button-plate.webp) 40 130 fill / 20px 46px / 0 stretch;
  color: var(--k-text);
  box-shadow: none;
  text-align: center;
}
.nn-btn:hover,
.nn-btn--green:hover {
  background: none;
  color: #fff;
  filter: brightness(1.25);
}
.nn-btn:before,
.nn-btn:after {
  display: none;
}
.topPanel__buttons .nn-btn:not(.nn-btn--green) {
  min-width: 0;
  padding: 10px 22px;
  background: transparent;
  border: 1px solid var(--k-gold);
  border-image: none;
  border-radius: 6px;
}
.topPanel__buttons .nn-btn:not(.nn-btn--green):hover {
  background: rgba(156, 28, 34, 0.35);
  filter: none;
}






.nn-wrap {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.nn-block {
  padding: 0 0 70px;
}
.nn-div {
  height: 64px;
  margin-bottom: 4px;
  background: url(../images/divider.webp) center / min(1400px, 100%) auto no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
}
.nn-sec h2.nn-h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 75px;
  margin: 0 0 26px;
  background: url(../images/title-ornament.webp) center / 900px auto no-repeat;
  font-size: 34px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--k-gold2);
}
.nn-h2 span {
  background: linear-gradient(#f9e3ae, #c9963f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nn-card {
  position: relative;
  background: var(--k-card) padding-box;
  border: 6px solid transparent;
  box-shadow: 0 12px 26px -14px #000;
}
.nn-card:after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 84px solid transparent;
  border-image: url(../images/card-frame.webp) 256 / 84px stretch;
  pointer-events: none;
}

.nn-news {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.nn-news__card {
  display: flex;
  flex-direction: column;
}
.nn-news__img {
  display: block;
  flex: none;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 90%, var(--k-red2), #1a0a0c 70%);
  border-bottom: 1px solid var(--k-line);
}
.nn-news__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.nn-news__card:hover img {
  transform: scale(1.04);
}
.nn-news__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 24px 24px;
}
.nn-news__date {
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--k-gold);
}
.nn-news__body h3 {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.25;
  color: var(--k-text);
}
.nn-news__body h3 a {
  color: inherit;
  text-decoration: none;
}
.nn-news__body p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 0 0 18px;
  line-height: 1.5;
}
.nn-news__body .nn-btn {
  align-self: center;
  margin-top: auto;
}

.nn-tops {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.nn-top {
  padding: 18px 8px 8px;
}
.nn-top h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 20px;
  color: var(--k-text);
}
.nn-top h3:before {
  content: "";
  width: 34px;
  height: 34px;
  background: url(../images/icon-swords.webp) center / contain no-repeat;
}
.nn-top + .nn-top h3:before {
  background-image: url(../images/icon-crown.webp);
}
.nn-top table {
  width: 100%;
  margin-bottom: 0;
  border: 0;
  border-collapse: collapse;
}
.nn-top tr {
  border: 0;
}
.nn-top th {
  padding: 9px 16px;
  background: rgba(110, 18, 24, 0.28);
  color: var(--k-text);
  font-weight: 600;
  font-size: 13px;
  text-align: left;
}
.nn-top td {
  padding: 10px 16px;
  border-top: 1px solid rgba(143, 111, 53, 0.22);
  color: var(--k-text);
}
.nn-top th:first-child,
.nn-top td:first-child {
  width: 70px;
  text-align: center;
}
.nn-top th:last-child,
.nn-top td:last-child {
  text-align: right;
}
.nn-top a {
  color: var(--k-text);
  text-decoration: none;
}
.nn-top a:hover {
  color: var(--k-gold2);
}
.nn-place {
  display: inline-block;
  width: 30px;
  line-height: 30px;
  border-radius: 50%;
  text-align: center;
  font-family: var(--font-title);
  font-weight: 700;
}
.nn-place--1,
.nn-place--2,
.nn-place--3 {
  width: 42px;
  line-height: 42px;
  margin: -6px 0;
  background: center / contain no-repeat;
  color: #fff;
  text-shadow: 0 1px 3px #000;
}
.nn-place--1 {
  background-image: url(../images/icon-place-1.webp);
}
.nn-place--2 {
  background-image: url(../images/icon-place-2.webp);
}
.nn-place--3 {
  background-image: url(../images/icon-place-3.webp);
}
.nn-more {
  margin-top: 28px;
  text-align: center;
}

/* Rankings on the home page, second pass (owner, 2026-11-05: "как то пустовато"): the leader as a
   plaque with the class art or the guild mark, rows with the class and the guild, the castle beside. */
.nn-tops--3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, .78fr) minmax(0, 1fr);
  gap: 20px;
}
/* The castle stands between the two lists (owner: symmetry). */
.nn-tops--3 > .nn-castle {
  order: 1;
}
.nn-tops--3 > .nn-top + .nn-top {
  order: 2;
}
.nn-lead {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 108px;
  margin: 0 8px 6px;
  padding: 12px 16px 12px 128px;
  overflow: hidden;
  border: 1px solid rgba(217, 169, 78, .55);
  background:
    radial-gradient(120% 140% at 0% 50%, rgba(156, 28, 34, .55), transparent 60%),
    linear-gradient(90deg, rgba(40, 30, 18, .95), rgba(20, 18, 21, .95));
  color: var(--k-text);
  text-decoration: none;
}
.nn-lead:hover {
  border-color: var(--k-gold2);
}
.nn-lead__art {
  position: absolute;
  left: -14px;
  bottom: -26px;
  width: 150px;
  height: auto;
  filter: drop-shadow(0 0 14px rgba(156, 28, 34, .7));
  pointer-events: none;
}
.nn-lead__mark {
  position: absolute;
  left: 30px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  transform: translateY(-50%);
  border: 1px solid rgba(217, 169, 78, .6);
  background: #0b0a0c;
  box-shadow: 0 0 18px rgba(217, 169, 78, .25);
}
.nn-lead__mark svg {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
}
.nn-lead .nn-place {
  position: absolute;
  left: 8px;
  top: 8px;
  margin: 0;
}
.nn-lead__text {
  display: grid;
  flex: 1 1 auto;
  gap: 3px;
  min-width: 0;
}
.nn-lead__text strong {
  overflow: hidden;
  color: var(--k-gold2);
  font-family: var(--font-title);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 4px #000;
}
.nn-lead__text small {
  overflow: hidden;
  color: var(--k-mute);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nn-lead__guild {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nn-lead__guild svg {
  flex: none;
  image-rendering: pixelated;
}
.nn-lead__score {
  display: grid;
  flex: none;
  justify-items: end;
  text-align: right;
}
.nn-lead__score b {
  color: var(--k-gold2);
  font-family: var(--font-title);
  font-size: 30px;
  line-height: 1;
}
.nn-lead__score small {
  color: var(--k-mute);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.nn-online {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 7px;
  border-radius: 50%;
  background: #3ecf6a;
  box-shadow: 0 0 6px #3ecf6a;
  vertical-align: middle;
}
.nn-top td {
  padding-top: 8px;
  padding-bottom: 8px;
}
.nn-who {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.nn-who img,
.nn-who__mark {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(143, 111, 53, .6);
}
.nn-who__mark {
  display: grid;
  place-items: center;
  border-radius: 0;
  background: #0b0a0c;
}
.nn-who__mark svg {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
}
.nn-who > span:last-child {
  display: grid;
  min-width: 0;
}
.nn-who b {
  font-weight: 600;
}
.nn-who small {
  overflow: hidden;
  color: var(--k-mute);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nn-castle {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100%;
  overflow: hidden;
  color: var(--k-text);
  text-decoration: none;
}
.nn-castle__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: transform .4s;
}
.nn-castle::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 10, 12, .1) 0%, rgba(11, 10, 12, .55) 40%, rgba(11, 10, 12, .96) 78%);
}
.nn-castle:hover .nn-castle__art {
  transform: scale(1.04);
}
.nn-castle__body {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 24px 18px 22px;
  text-align: center;
}
.nn-castle__body h3 {
  margin: 0;
  color: var(--k-gold2);
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-shadow: 0 2px 4px #000, 0 0 18px rgba(156, 28, 34, .8);
}
.nn-castle__owner {
  display: grid;
  justify-items: center;
  gap: 6px;
  font-size: 14px;
}
.nn-castle__owner small,
.nn-castle__when small {
  color: var(--k-mute);
  font-size: 12px;
}
.nn-castle__guild {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--k-gold2);
  font-family: var(--font-title);
  font-size: 20px;
}
.nn-castle__guild svg {
  image-rendering: pixelated;
}
.nn-castle__when {
  display: grid;
  gap: 2px;
}
.nn-castle__when b {
  color: var(--k-gold2);
  font-family: var(--font-title);
  font-size: 26px;
}
.nn-castle__when--now b {
  color: #ff6b5e;
}

@media (max-width: 1100px) {
  .nn-tops--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .nn-tops--3 > .nn-castle {
    grid-column: 1 / -1;
    min-height: 260px;
    order: 3;
  }
}
@media (max-width: 760px) {
  .nn-tops--3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .nn-lead {
    padding-left: 104px;
  }
  .nn-lead__art {
    width: 124px;
  }
  .nn-lead__mark {
    left: 22px;
    width: 64px;
    height: 64px;
  }
  .nn-lead__mark svg {
    width: 54px;
    height: 54px;
  }
}

.nn-events {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.nn-event {
  display: block;
  padding-bottom: 14px;
  text-align: center;
  text-decoration: none;
  color: var(--k-mute);
}
.nn-event__img {
  display: block;
  aspect-ratio: 2 / 1;
  margin-bottom: 12px;
  background: radial-gradient(ellipse at 50% 100%, var(--k-red2), #1a0a0c 70%) center / cover no-repeat;
  border-bottom: 1px solid var(--k-line);
}
.nn-event b {
  display: block;
  padding: 0 10px;
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 600;
  color: var(--k-text);
}
.nn-event time,
.nn-event em {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-style: normal;
}
.nn-event em {
  color: var(--k-gold);
}

.nn-about {
  position: relative;
  overflow: hidden;
}
.nn-about:before {
  content: "";
  position: absolute;
  top: 30px;
  bottom: 0;
  right: max(0px, calc(50% - 700px));
  width: 760px;
  background: url(../images/about-character.webp) right center / contain no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 30%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 30%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 86%, transparent);
  mask-composite: intersect;
}
.nn-sec.nn-about h2.nn-h2 {
  background: none;
}
.nn-about .nn-wrap {
  position: relative;
}
.nn-about__text {
  max-width: 520px;
  min-height: 430px;
}
.nn-about__text p {
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--k-text);
}
.nn-about__text ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nn-about__text li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(143, 111, 53, 0.25);
  font-family: var(--font-title);
  font-size: 19px;
  font-weight: 600;
  color: var(--k-gold2);
}
.nn-about__text li:before {
  content: "";
  flex: none;
  width: 32px;
  height: 32px;
  background: url(../images/icon-star.webp) center / contain no-repeat;
}
.nn-about__text li:nth-child(2):before {
  background-image: url(../images/icon-chart.webp);
}
.nn-about__text li:nth-child(3):before {
  background-image: url(../images/icon-devices.webp);
}
.nn-about__text li:nth-child(4):before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f9e3ae'/%3E%3Cstop offset='1' stop-color='%23b8862d'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='16' cy='10' r='7' fill='url(%23g)'/%3E%3Cpath d='M3 30c0-8 6-12 13-12s13 4 13 12z' fill='url(%23g)'/%3E%3C/svg%3E");
  background-size: 24px;
}

.footer {
  height: auto;
  padding: 0;
  background: #080709;
  border-top: 1px solid rgba(143, 111, 53, 0.45);
}
.footerTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0 20px;
  border-bottom: 1px solid rgba(143, 111, 53, 0.22);
}
.footerLogo img {
  display: block;
  height: 54px;
  width: auto;
}
.footerMenu {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
}
.footerMenu a {
  font-family: var(--font-title);
  font-size: 13px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--k-text);
}
.footerMenu a:hover,
.menu-bottom li a:hover {
  color: var(--k-gold2);
}
.nn-langs {
  white-space: nowrap;
}
.nn-langs a {
  color: var(--k-mute);
}
.nn-langs a:hover,
.nn-langs a.active {
  color: var(--k-gold2);
}
.footerBottom {
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  width: auto;
  height: auto;
  padding: 14px 0 20px;
  font-size: 12px;
  color: var(--k-mute);
}
.footerBottom p {
  margin: 0;
}
.menu-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.menu-bottom li {
  padding: 0;
}
.menu-bottom li a {
  color: var(--k-mute);
}

.nn-title {
  background: #100e11;
  border-bottom: 1px solid rgba(143, 111, 53, 0.45);
}
.nn-title span {
  background: linear-gradient(#f9e3ae, #c9963f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.is-theme .page-shell {
  color: var(--k-text);
}
.nn-article h1 {
  color: var(--k-text);
}
.nn-article .nn-date {
  color: var(--k-gold);
}

@media (max-width: 1099px) {
  .nn-news,
  .nn-tops {
    grid-template-columns: minmax(0, 1fr);
  }
  .nn-events {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .nn-sec h2.nn-h2 {
    font-size: 26px;
  }
  .nn-sec h2.nn-h2 {
    min-height: 54px;
    background-size: 640px auto;
  }
  .nn-top td,
  .nn-top th {
    padding: 9px 10px;
  }
  .nn-about:before {
    top: auto;
    right: 0;
    width: 100%;
    height: 420px;
    background-position: right bottom;
  }
  .nn-about__text {
    max-width: none;
    padding-bottom: 380px;
  }
  .footerTop {
    flex-direction: column;
    text-align: center;
  }
  .footerMenu,
  .menu-bottom {
    justify-content: center;
  }
  .footerBottom {
    justify-content: center;
    text-align: center;
  }
  .nn-langs {
    white-space: normal;
  }
}

/* Top bar across the whole window, the server and its online beside the logo */
.topPanel__container {
  width: 100%;
  max-width: none;
  padding: 0 32px;
  gap: 24px;
  box-sizing: border-box;
}
.logoTop {
  flex: none;
  margin-left: 0;
}
.topPanel__menu {
  flex: 1;
  justify-content: center;
}
.topPanel__buttons {
  flex: none;
}
.topPanel__buttons a:first-child {
  margin-left: 0;
}
.nn-status {
  position: relative;
  flex: none;
  outline: 0;
  cursor: pointer;
}
.nn-status__now {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 77px;
}
.nn-status img {
  flex: none;
  width: 18px;
  height: 18px;
}
.nn-status__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 600;
  color: var(--k-text);
}
.nn-status strong,
.nn-status small {
  font-size: 13px;
  font-weight: 600;
  color: var(--k-gold2);
}
.nn-status .is-off {
  color: var(--k-mute);
}
.nn-status__menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  padding: 6px;
  background: #100e11;
  border: 1px solid var(--k-line);
  box-shadow: 0 12px 26px -10px #000;
}
.nn-status:hover .nn-status__menu,
.nn-status:focus-within .nn-status__menu {
  display: block;
}
.nn-status__menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  white-space: nowrap;
  font-family: var(--font-title);
  font-size: 14px;
  color: var(--k-text);
  text-decoration: none;
}
.nn-status__menu a:hover,
.nn-status__menu a.active {
  background: rgba(110, 18, 24, 0.35);
}
.nn-status__menu small {
  margin-left: auto;
}
@media (min-width: 1100px) and (max-width: 1460px) {
  .topPanel__container {
    padding: 0 16px;
    gap: 12px;
  }
  .topPanel__menu a {
    padding: 0 8px;
  }
  .nn-status__text {
    font-size: 13px;
  }
}
@media (max-width: 1099px) {
  .topPanel__container {
    padding: 8px 12px;
    gap: 6px 16px;
  }
  .nn-status__now {
    height: 44px;
  }
  .nn-status__menu {
    left: 50%;
    transform: translateX(-50%);
  }
  .topPanel__menu {
    flex: 1 1 100%;
  }
}
@media (min-width: 1100px) and (max-width: 1460px) {
  .nn-btn,
  .nn-btn--green {
    min-width: 0;
    padding: 10px 26px;
  }
  .topPanel__buttons a {
    margin-left: 8px;
  }
  .topPanel__buttons .nn-btn:not(.nn-btn--green) {
    padding: 9px 12px;
  }
}

/* First screen: MU Online and the systems the game runs on */
.nn-hero {
  position: absolute;
  top: 245px;
  left: 640px;
  width: 660px;
}
.nn-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.nn-start__logo {
  font-family: var(--font-title);
  font-size: 92px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 3px;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(#fdf0c6, #e0b15a 55%, #9c6d24);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.85));
}
.nn-start__season {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  font-family: var(--font-title);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--k-gold2);
}
.nn-start__season i {
  width: 9px;
  height: 9px;
  background: var(--k-gold);
  transform: rotate(45deg);
}
.nn-start p {
  margin: 10px 0 34px;
  font-size: 17px;
  color: var(--k-text);
}
.nn-start__os {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}
.nn-os {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 6px 20px;
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: 600;
  color: var(--k-text);
  text-decoration: none;
  transition: transform 0.2s, color 0.2s;
}
.nn-os:hover {
  transform: translateY(-4px);
  color: var(--k-gold2);
}
.nn-os i {
  width: 56px;
  height: 56px;
  background: linear-gradient(#f9e3ae, #b8862d);
  -webkit-mask: var(--os) center / contain no-repeat;
  mask: var(--os) center / contain no-repeat;
}
.nn-os--windows {
  --os: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 4.5 10 3.4v7.8H2zm9-1.2L22 2v9.2H11zM2 12.2h8v7.9l-8-1.1zm9 0h11V22l-11-1.5z'/%3E%3C/svg%3E");
}
.nn-os--linux {
  --os: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c-2.4 0-3.8 2-3.8 4.6 0 1.6-.9 2.8-1.9 4.2C5.1 12.4 4 14.2 4 16.3c0 .9.2 1.7.6 2.4L3 20.5c.4.9 2.2 1.5 4 1.3 1-.1 1.8-.6 2.3-1 .8.2 1.7.3 2.7.3s1.9-.1 2.7-.3c.5.4 1.3.9 2.3 1 1.8.2 3.6-.4 4-1.3l-1.6-1.8c.4-.7.6-1.5.6-2.4 0-2.1-1.1-3.9-2.3-5.5-1-1.4-1.9-2.6-1.9-4.2C15.8 4 14.4 2 12 2zm-1.6 4a.9.9 0 1 1 0 1.8.9.9 0 0 1 0-1.8zm3.2 0a.9.9 0 1 1 0 1.8.9.9 0 0 1 0-1.8zM12 8.6l1.6 1-1.6 1-1.6-1z'/%3E%3C/svg%3E");
}
.nn-os--macos {
  --os: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.4 12.6c0-2.4 2-3.5 2.1-3.6-1.1-1.7-2.9-1.9-3.5-1.9-1.5-.2-2.9.9-3.7.9-.8 0-1.9-.9-3.2-.8-1.6 0-3.1 1-4 2.4-1.7 3-.4 7.3 1.2 9.7.8 1.2 1.8 2.5 3 2.4 1.2 0 1.7-.8 3.1-.8 1.5 0 1.9.8 3.2.8 1.3 0 2.1-1.2 2.9-2.4.9-1.3 1.3-2.7 1.3-2.7s-2.4-1-2.4-4zM14 5.6c.7-.8 1.1-1.9 1-3-1 0-2.2.7-2.9 1.5-.6.7-1.2 1.8-1 2.9 1.1.1 2.2-.6 2.9-1.4z'/%3E%3C/svg%3E");
}
.nn-os--android {
  --os: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.6 9.5 19.4 6.4a.4.4 0 0 0-.7-.4L16.9 9.1A11 11 0 0 0 12 8a11 11 0 0 0-4.9 1.1L5.3 6a.4.4 0 0 0-.7.4l1.8 3.1C3.3 11.2 1.3 14.3 1 18h22c-.3-3.7-2.3-6.8-5.4-8.5zM7 15.3a1.1 1.1 0 1 1 0-2.2 1.1 1.1 0 0 1 0 2.2zm10 0a1.1 1.1 0 1 1 0-2.2 1.1 1.1 0 0 1 0 2.2z'/%3E%3C/svg%3E");
}
@media (min-width: 1100px) and (max-width: 1460px) {
  .nn-hero {
    top: 190px;
    left: 660px;
    right: 26px;
    width: auto;
  }
  .nn-start__logo {
    font-size: calc((100vw - 686px) / 6.2);
  }
  .nn-start__os {
    gap: 10px;
  }
  .nn-os {
    font-size: 15px;
  }
  .nn-os i {
    width: 44px;
    height: 44px;
  }
}
@media (max-width: 1099px) {
  .nn-hero {
    position: static;
    width: auto;
    padding: 420px 16px 0;
  }
  .nn-start__logo {
    font-size: 54px;
  }
  .nn-start__os {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 640px) and (max-width: 1099px) {
  .nn-start__logo {
    font-size: 72px;
  }
  .nn-start__os {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.nn-os {
  background: rgba(16, 12, 11, 0.82) padding-box;
}
.nn-os:after {
  border-width: 44px;
  border-image-width: 44px;
  inset: -5px;
}
.nn-btn.nn-start__reg {
  display: inline-block;
  min-width: 300px;
  margin-top: 36px;
  padding: 18px 60px;
  border-image-width: 30px 66px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
}
@media (max-width: 1460px) {
  .nn-btn.nn-start__reg {
    margin-top: 24px;
  }
}
.logoTop,
.footerLogo {
  display: block;
  font-family: var(--font-title);
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 2px;
  text-decoration: none;
  white-space: nowrap;
  background: linear-gradient(#fdf0c6, #e0b15a 55%, #9c6d24);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.85));
}
.footerLogo {
  font-size: 36px;
}
@media (max-width: 1460px) {
  .logoTop {
    font-size: 36px;
  }
}
.topPanel__buttons .nn-btn,
.nn-status__text {
  box-sizing: border-box;
  line-height: 1.2;
}
.topPanel__buttons .nn-btn {
  display: inline-block;
}
.topPanel__buttons .nn-btn span {
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: linear-gradient(#fdf0c6, #e0b15a 55%, #b9873a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.topPanel__buttons .nn-btn,
.topPanel__buttons .nn-btn--green,
.topPanel__buttons .nn-btn:not(.nn-btn--green) {
  min-width: 0;
  margin-left: 28px;
  padding: 6px 0;
  background: none;
  border: 0;
  border-image: none;
  border-radius: 0;
  box-shadow: none;
}
.topPanel__buttons .nn-btn:first-child {
  margin-left: 0;
}
.topPanel__buttons .nn-btn:hover,
.topPanel__buttons .nn-btn:not(.nn-btn--green):hover {
  background: none;
  filter: brightness(1.3);
}
.topPanel__buttons .nn-btn span {
  font-size: 20px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.85));
}
@media (max-width: 1460px) {
  .topPanel__buttons .nn-btn,
  .topPanel__buttons .nn-btn--green,
  .topPanel__buttons .nn-btn:not(.nn-btn--green) {
    margin-left: 16px;
  }
  .topPanel__buttons .nn-btn:first-child {
    margin-left: 0;
  }
  .topPanel__buttons .nn-btn span {
    font-size: 16px;
  }
}

/* Windows in the site's frame. The frame is a border-image, not .nn-card:after: the card scrolls */
.login-modal__backdrop {
  background: rgba(5, 4, 5, 0.86);
}
.login-modal__card,
.login-modal__card.auth-card {
  width: 440px;
  padding: 34px 40px 30px;
  background:
    radial-gradient(ellipse 90% 170px at 50% 0, rgba(110, 18, 24, 0.5), transparent) padding-box no-repeat,
    var(--k-card) padding-box;
  border: 6px solid transparent;
  border-radius: 0;
  border-image: url(../images/card-frame.webp) 256 / 84px stretch;
  box-shadow: 0 30px 70px -10px #000;
  color: var(--k-text);
  font-size: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--k-line) transparent;
}
.login-modal__card:before {
  display: none;
}
.login-modal__close {
  z-index: 1;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 0;
  line-height: 32px;
  text-align: center;
  color: var(--k-gold);
  transition: color 0.2s, transform 0.2s;
}
.login-modal__close:before {
  content: "\00d7";
  font-size: 28px;
}
.login-modal__close:hover {
  color: #fff;
  transform: rotate(90deg);
}
.login-modal .auth-card-head {
  margin-bottom: 18px;
  text-align: center;
}
.login-modal .auth-card-head h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  margin: 0;
  background: url(../images/title-ornament.webp) center / 100% auto no-repeat;
  font-family: var(--font-title);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 1px;
  color: var(--k-gold2);
}
.login-modal .auth-kicker {
  margin-bottom: 2px;
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--k-gold);
}
.login-modal__card .auth-field {
  gap: 6px;
  margin-bottom: 14px;
}
.login-modal__card .auth-field label:not(.auth-agree) {
  margin: 0;
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  color: var(--k-gold2);
}
.login-modal__card .auth-field input:not([type="checkbox"]),
.login-modal__card .auth-field select {
  min-height: 46px;
  padding: 11px 14px;
  background: #0b0a0c;
  border: 1px solid rgba(143, 111, 53, 0.55);
  border-radius: 0;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 15px;
  outline: 0;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.login-modal__card .auth-field input:not([type="checkbox"]):hover {
  border-color: var(--k-line);
}
.login-modal__card .auth-field input:not([type="checkbox"]):focus,
.login-modal__card .auth-field select:focus {
  border-color: var(--k-gold);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--k-gold), 0 0 14px rgba(217, 169, 78, 0.3);
}
.login-modal__card .auth-field input:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: inset 0 0 0 40px #0b0a0c;
  caret-color: #fff;
}
.login-modal__card .auth-field.has-error input:not([type="checkbox"]) {
  border-color: #d3414a;
}
.login-modal__card .auth-field small {
  color: #ff9a8f;
  font-size: 12px;
}
.login-modal__card .auth-field .auth-agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 2px;
  color: var(--k-text);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  text-transform: none;
  cursor: pointer;
}
.login-modal__card .auth-agree input {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 20px;
  min-width: 0;
  height: 20px;
  min-height: 0;
  padding: 0;
  margin: 0;
  background: #0b0a0c center / 14px no-repeat;
  border: 1px solid var(--k-gold);
  border-radius: 0;
  cursor: pointer;
}
.login-modal__card .auth-agree input:checked {
  background-color: var(--k-gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23140d06' stroke-width='4' d='m4 13 5 5L20 6'/%3E%3C/svg%3E");
}
.login-modal__card .auth-agree input:focus-visible {
  outline: 2px solid var(--k-gold2);
  outline-offset: 2px;
}
.login-modal__card .auth-agree a,
.auth-link {
  color: var(--k-gold2);
  text-decoration: none;
}
.login-modal__card .auth-agree a:hover,
.auth-link:hover {
  color: #fff;
  text-decoration: underline;
}
.login-modal__card .auth-alert {
  background: rgba(110, 18, 24, 0.45);
  border: 1px solid #9c1c22;
  border-radius: 0;
  color: #ffd2c8;
}
.auth-submit,
.auth-submit:hover {
  min-height: 54px;
  margin-top: 16px;
  padding: 14px 44px;
  background: none;
  border: 0;
  border-radius: 0;
  border-image: url(../images/button-plate.webp) 40 130 fill / 27px 60px / 0 stretch;
  box-shadow: none;
  color: #fff;
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
}
.auth-submit:hover {
  filter: brightness(1.25);
}
.auth-submit:before,
.auth-submit:after {
  display: none;
}
.auth-submit:disabled {
  filter: grayscale(1);
  opacity: 0.6;
  cursor: not-allowed;
}
.login-modal__links {
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(143, 111, 53, 0.3);
  font-size: 13px;
}
.login-modal__links:has(> :only-child) {
  justify-content: center;
}
@media (max-width: 639px) {
  .login-modal__card,
  .login-modal__card.auth-card {
    padding: 26px 22px 24px;
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }
  .login-modal__card .auth-field input:not([type="checkbox"]) {
    font-size: 16px;
  }
  .login-modal .auth-card-head h2 {
    font-size: 22px;
  }
  .login-modal__close {
    top: 8px;
    right: 8px;
  }
}

/* The server list, in the same frame */
.nn-status__menu {
  top: calc(100% - 8px);
  min-width: 310px;
  padding: 10px;
  background:
    radial-gradient(ellipse 80% 70px at 50% 0, rgba(110, 18, 24, 0.4), transparent) padding-box no-repeat,
    var(--k-card) padding-box;
  border: 6px solid transparent;
  border-image: url(../images/card-frame.webp) 256 / 34px stretch;
  box-shadow: 0 22px 40px -12px #000;
}
.nn-status__menu a {
  gap: 12px;
  padding: 11px 12px;
  font-size: 15px;
  font-weight: 600;
  transition: background 0.2s;
}
.nn-status__menu a:hover {
  background: rgba(110, 18, 24, 0.3);
}
.nn-status__menu a.active {
  background: linear-gradient(90deg, rgba(156, 28, 34, 0.6), rgba(110, 18, 24, 0.1));
  box-shadow: inset 2px 0 0 var(--k-gold);
}
.nn-status__menu small {
  padding-left: 18px;
  font-size: 14px;
}
.nn-status {
  z-index: 5;
}
@media (max-width: 639px) {
  .nn-status__menu {
    position: fixed;
    top: 46px;
    left: 12px;
    right: 12px;
    min-width: 0;
    transform: none;
  }
}
.login-modal__card.auth-form:not(.chaos-modal__card) {
  gap: 0;
}
.login-modal__card .auth-link {
  text-transform: none;
  font-weight: 400;
}
@media (max-width: 639px) {
  .auth-submit,
  .auth-submit:hover {
    padding: 14px 32px;
    font-size: 14px;
  }
}

/* News tab: the home page cards, whole banners. Six columns, so a short last row still fills the width */
.lk-page:has(.nn-newslist),
.lk-page:has(.nn-article) {
  background: none;
  box-shadow: none;
}
.nn-newslist {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
}
.nn-newslist > .nn-news__card {
  grid-column: span 2;
}
.nn-newslist > .nn-news__card:nth-last-child(2):nth-child(3n + 2),
.nn-newslist > .nn-news__card:nth-last-child(2):nth-child(3n + 2) + .nn-news__card {
  grid-column: span 3;
}
.nn-newslist > .nn-news__card:first-child,
.nn-newslist > .nn-news__card:last-child:nth-child(3n + 2) {
  grid-column: span 6;
  flex-direction: row;
}
.nn-newslist > .nn-news__card:first-child .nn-news__img,
.nn-newslist > .nn-news__card:last-child:nth-child(3n + 2) .nn-news__img {
  width: 58%;
  border-right: 1px solid var(--k-line);
  border-bottom: 0;
}
.nn-newslist > .nn-news__card:first-child .nn-news__body,
.nn-newslist > .nn-news__card:last-child:nth-child(3n + 2) .nn-news__body {
  justify-content: center;
  padding: 28px 40px;
}
.nn-newslist > .nn-news__card:first-child h3,
.nn-newslist > .nn-news__card:last-child:nth-child(3n + 2) h3 {
  font-size: 28px;
}
.nn-newslist > .nn-news__card:first-child p,
.nn-newslist > .nn-news__card:last-child:nth-child(3n + 2) p {
  -webkit-line-clamp: 5;
  font-size: 16px;
}
.nn-newslist .nn-news__body p {
  color: var(--k-mute);
}
.nn-newslist .nn-news__body h3 a:hover {
  color: var(--k-gold2);
}
.nn-newslist > .nn-news__card:first-child .nn-btn,
.nn-newslist > .nn-news__card:last-child:nth-child(3n + 2) .nn-btn {
  align-self: flex-start;
  margin-top: 0;
}
.nn-card.nn-article {
  max-width: 1040px;
  margin: 0 auto;
}
.nn-article .news-hero {
  width: 100%;
  margin: 0;
  border-bottom: 1px solid var(--k-line);
  border-radius: 0;
}
.nn-article__text {
  max-width: 800px;
  margin: 0 auto;
  padding: 30px 32px 40px;
  font-size: 16px;
  line-height: 1.75;
}
.nn-article .nn-date {
  margin-bottom: 14px;
  font-size: 14px;
}
.nn-article__lead {
  margin: 0 0 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(143, 111, 53, 0.35);
  font-family: var(--font-title);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--k-gold2);
}
.nn-article .news-body p {
  margin: 0 0 18px;
}
.nn-article .news-body strong {
  color: #fff;
}
.nn-article .news-body a {
  color: var(--k-gold2);
}
.nn-article .news-body a:hover {
  color: #fff;
}
.nn-article .news-body h2,
.nn-article .news-body h3 {
  margin: 30px 0 12px;
  color: var(--k-gold2);
}
.nn-article .news-body img {
  display: block;
  margin: 24px auto;
}
.nn-article__back {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--k-gold2);
}
.nn-article__back:before {
  content: "\2190";
  margin-right: 10px;
}
.nn-article__back:hover {
  color: #fff;
}
@media (min-width: 640px) and (max-width: 1099px) {
  .nn-newslist > .nn-news__card,
  .nn-newslist > .nn-news__card:nth-last-child(2):nth-child(3n + 2),
  .nn-newslist > .nn-news__card:nth-last-child(2):nth-child(3n + 2) + .nn-news__card {
    grid-column: span 6;
    flex-direction: row;
  }
  .nn-newslist .nn-news__img,
  .nn-newslist > .nn-news__card:first-child .nn-news__img,
  .nn-newslist > .nn-news__card:last-child:nth-child(3n + 2) .nn-news__img {
    width: 46%;
    border-right: 1px solid var(--k-line);
    border-bottom: 0;
  }
  .nn-newslist .nn-news__body,
  .nn-newslist > .nn-news__card:first-child .nn-news__body,
  .nn-newslist > .nn-news__card:last-child:nth-child(3n + 2) .nn-news__body {
    padding: 20px 24px;
  }
  .nn-newslist > .nn-news__card:first-child h3,
  .nn-newslist > .nn-news__card:last-child:nth-child(3n + 2) h3 {
    font-size: 20px;
  }
  .nn-newslist > .nn-news__card:first-child p,
  .nn-newslist > .nn-news__card:last-child:nth-child(3n + 2) p {
    -webkit-line-clamp: 3;
    font-size: inherit;
  }
  .nn-newslist .nn-news__body .nn-btn {
    align-self: flex-start;
    margin-top: auto;
  }
}
@media (max-width: 639px) {
  .nn-newslist {
    gap: 18px;
  }
  .nn-newslist > .nn-news__card,
  .nn-newslist > .nn-news__card:nth-last-child(2):nth-child(3n + 2),
  .nn-newslist > .nn-news__card:nth-last-child(2):nth-child(3n + 2) + .nn-news__card,
  .nn-newslist > .nn-news__card:first-child,
  .nn-newslist > .nn-news__card:last-child:nth-child(3n + 2) {
    grid-column: span 6;
    flex-direction: column;
  }
  .nn-newslist > .nn-news__card:first-child .nn-news__img,
  .nn-newslist > .nn-news__card:last-child:nth-child(3n + 2) .nn-news__img {
    width: auto;
    border-right: 0;
    border-bottom: 1px solid var(--k-line);
  }
  .nn-newslist > .nn-news__card:first-child .nn-news__body,
  .nn-newslist > .nn-news__card:last-child:nth-child(3n + 2) .nn-news__body {
    padding: 20px 20px 22px;
  }
  .nn-newslist > .nn-news__card:first-child h3,
  .nn-newslist > .nn-news__card:last-child:nth-child(3n + 2) h3 {
    font-size: 20px;
  }
  .nn-newslist > .nn-news__card:first-child p,
  .nn-newslist > .nn-news__card:last-child:nth-child(3n + 2) p {
    -webkit-line-clamp: 3;
    font-size: inherit;
  }
  .nn-newslist > .nn-news__card:first-child .nn-btn,
  .nn-newslist > .nn-news__card:last-child:nth-child(3n + 2) .nn-btn {
    align-self: center;
    margin-top: auto;
  }
  .nn-article__text {
    padding: 22px 18px 28px;
    font-size: 15px;
  }
  .nn-article__lead {
    font-size: 18px;
  }
}

/* Inner pages: no art band, the title sits right under the top bar and the content starts at once */
.body-page .header {
  height: auto;
  padding-bottom: 0;
  background: none;
}
.nn-title {
  margin-bottom: 0;
  padding: 30px 16px;
  background: radial-gradient(ellipse 60% 170% at 50% 0, rgba(156, 28, 34, 0.5), transparent) no-repeat, #0b0a0c;
  border-bottom: 1px solid rgba(143, 111, 53, 0.45);
  font-family: var(--font-title);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 1px;
}
.main .page-shell {
  padding-top: 32px;
}
@media (max-width: 639px) {
  .nn-title {
    padding: 20px 12px;
    font-size: 22px;
  }
  .main .page-shell {
    padding-top: 20px;
  }
}
@media (min-width: 1100px) {
  .body-page .header {
    height: 77px;
  }
}

/* The market's title strip is the choice between the two markets. */
.nn-title--switch {
  display: flex;
  justify-content: center;
  gap: 44px;
}
.nn-title--switch a {
  position: relative;
  padding-bottom: 8px;
  text-decoration: none;
}
.nn-title--switch a span {
  background: none;
  color: var(--k-mute);
  transition: color 0.15s ease;
}
.nn-title--switch a:hover span {
  color: var(--k-gold2);
}
.nn-title--switch a.is-on span {
  background: linear-gradient(#f9e3ae, #c9963f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nn-title--switch a.is-on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--k-gold);
}
@media (max-width: 639px) {
  .nn-title--switch {
    flex-wrap: wrap;
    gap: 4px 14px;
    padding-inline: 16px;
    font-size: 15px;
    letter-spacing: 0;
    white-space: nowrap;
  }
}

/* One server: the status is a label, not a button. */
.nn-status--single {
  cursor: default;
}

/* The red count on Forum, Account and the Support tab (owner, 2026-11-03: as on the old site). */
.topPanel__menu a,
.topPanel__buttons .nn-btn,
.nn-start__reg,
.market-tab {
  position: relative;
}
.nn-badge {
  position: absolute;
  top: -9px;
  right: -14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 1px solid #f5d48a;
  border-radius: 9px;
  background: linear-gradient(180deg, #c8262e, #7d1016);
  box-shadow: 0 0 10px rgba(200, 38, 46, .7);
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: none;
  pointer-events: none;
}
.market-tab .nn-badge {
  top: -8px;
  right: -8px;
}
.topPanel__menu a .nn-badge {
  top: auto;
  bottom: calc(50% + 3px);
  right: -15px;
}
.market-tabs .market-tab .nn-badge,
.is-legacy .page-shell .market-tab .nn-badge {
  border-radius: 9px;
}

/* Alice's chat window in the new design (owner, 2026-11-03): the card frame, a crimson-lit head, squared
   chips, the form fields' input and the crimson plate for Ask; no blue-violet glow anywhere. */
body .alice-widget__panel {
  border: 6px solid transparent;
  border-image: url(../images/card-frame-60.webp) 60 / 60px stretch;
  border-radius: 0;
  background: #141215 padding-box;
  box-shadow: 0 24px 60px -10px #000;
}
body .alice-widget__head {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(143, 111, 53, .45);
  background:
    radial-gradient(ellipse 70% 140% at 85% 0%, rgba(156, 28, 34, .55), transparent 70%),
    linear-gradient(120deg, #0b0a0c, #1d0d10);
}
body .alice-widget__head strong {
  color: #f5d48a;
  font-family: var(--font-title);
  font-size: 16px;
  letter-spacing: .03em;
}
body .alice-widget__open,
body .alice-widget__close {
  border: 1px solid rgba(143, 111, 53, .55);
  border-radius: 0;
  background: #1b1719;
  color: #f5d48a;
}
body .alice-widget__open:hover,
body .alice-widget__close:hover {
  border-color: #d9a94e;
  background: rgba(156, 28, 34, .45);
  color: #fff;
}
body .alice-widget .assistant__chat {
  background: none;
}
body .alice-widget .assistant__avatar,
body .alice-widget__head img,
body .alice-widget__toggle img {
  border-color: #d9a94e;
  box-shadow: 0 0 12px rgba(156, 28, 34, .55);
}
body .alice-widget .assistant__msg--bot {
  border: 1px solid rgba(143, 111, 53, .4);
  border-left: 2px solid #d9a94e;
  border-radius: 0;
  background: linear-gradient(180deg, #1b1719, #151214);
  color: #f2e8d5;
}
body .alice-widget .assistant__msg--user {
  border: 1px solid rgba(156, 28, 34, .7);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(156, 28, 34, .5), rgba(110, 18, 24, .35));
  color: #fff;
}
body .alice-widget .assistant__name {
  color: #d9a94e;
  font-family: var(--font-title);
}
body .alice-widget .assistant__example,
body .alice-widget .assistant__reset,
body .alice-widget .assistant__lottery {
  border: 1px solid rgba(143, 111, 53, .5);
  border-radius: 0;
  background: #1b1719;
  box-shadow: none;
  color: #f2e8d5;
}
body .alice-widget .assistant__example:hover,
body .alice-widget .assistant__reset:hover,
body .alice-widget .assistant__lottery:hover {
  border-color: #d9a94e;
  background: rgba(156, 28, 34, .4);
  color: #fff;
}
body .alice-widget button::before,
body .alice-widget button::after {
  display: none;
}
body .alice-widget .assistant__input {
  border: 1px solid rgba(235, 183, 80, .15);
  border-left: 2px solid rgba(235, 183, 80, .5);
  border-radius: 0;
  background: #171617;
  color: #fff5e0;
  resize: none;
}
body .alice-widget .assistant__input::placeholder {
  color: #a89f91;
}
body .alice-widget .assistant__input:focus {
  border-color: #d9a94e;
  outline: none;
}
body .alice-widget .assistant__send {
  min-width: 110px;
  padding: 4px 26px;
  border: 0;
  border-image: url(../images/button-plate.webp) 40 130 fill / 21px 40px / 0 stretch;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #fff;
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
}
body .alice-widget .assistant__send:hover {
  background: none;
  filter: brightness(1.2);
}
body .alice-widget__bubble {
  border: 1px solid rgba(143, 111, 53, .6);
  border-radius: 0;
  background: #141215;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .6), 0 0 14px rgba(156, 28, 34, .35);
}
body .alice-widget__toggle,
body .alice-widget__toggle:hover,
body .alice-widget__toggle[aria-expanded="true"] {
  border-color: #d9a94e;
  box-shadow: 0 0 0 3px rgba(217, 169, 78, .18), 0 6px 18px rgba(0, 0, 0, .6), 0 0 18px rgba(156, 28, 34, .5);
}
/* The drawn open/close buttons (gpt-site task 05): the picture is the whole button, the glyph hides. */
body .nn-alice--art .alice-widget__open,
body .nn-alice--art .alice-widget__close {
  display: inline-block;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: center / contain no-repeat;
  color: transparent;
  font-size: 0;
}
body .nn-alice--art .alice-widget__open { background-image: url(../images/alice-open.webp); }
body .nn-alice--art .alice-widget__close { background-image: url(../images/alice-close.webp); }
body .nn-alice--art .alice-widget__open:hover,
body .nn-alice--art .alice-widget__close:hover {
  border: 0;
  background-color: transparent;
  filter: brightness(1.25);
}

/* The ranking prize next to a name (owner, 2026-11-03): a small crimson plate with a gold hairline, the
   coin set half out of its left edge, the sum in the title face; no pill, no gift glyph, no green. */
body .rank-reward {
  gap: 5px;
  margin-left: 12px;
  padding: 1px 9px 1px 14px;
  border: 1px solid rgba(217, 169, 78, .7);
  border-radius: 0;
  background: linear-gradient(180deg, #8a1a20, #4e0d12);
  box-shadow: inset 0 1px 0 rgba(255, 220, 150, .18), 0 0 10px rgba(156, 28, 34, .35);
  color: #f5d48a;
  font-family: var(--font-title, inherit);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
}
body .rank-reward--bonus {
  border-color: rgba(217, 169, 78, .45);
  background: linear-gradient(180deg, #2a2224, #17131a);
  color: #e8cf98;
}
body .rank-reward__gift {
  display: none;
}
body .rank-reward img {
  width: 22px;
  height: 22px;
  margin: -4px 0 -4px -24px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8));
}
body .rank-reward:hover {
  filter: brightness(1.15);
}
body .rank-tip {
  border: 1px solid rgba(217, 169, 78, .5);
  border-left: 2px solid #d9a94e;
  border-radius: 0;
  background: #141215;
}