@font-face {
  font-family: "Inter";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Inter-Regular.woff") format("woff2"), url("../fonts/Inter-Regular.woff") format("woff");
}
@font-face {
  font-family: "Inter";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Inter-Bold.woff2") format("woff2"), url("../fonts/Inter-Bold.woff") format("woff");
}
@font-face {
  font-family: "Inter";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Inter-SemiBold.woff") format("woff2"), url("../fonts/Inter-SemiBold.woff") format("woff");
}
@font-face {
  font-family: "Inter";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Inter-Medium.woff2") format("woff2"), url("../fonts/Inter-Medium.woff") format("woff");
}
@font-face {
  font-family: "Inter";
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Inter-Black.woff2") format("woff2"), url("../fonts/Inter-Black.woff") format("woff");
}
@font-face {
  font-family: "Alice";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/alice.woff2") format("woff2"), url("../fonts/alice.woff") format("woff");
}
/* ============================================================
   SISTEMA DE FONDOS FLEXIBLE - MU Online WebEngine (Season 21)
   ============================================================
   Cambia fácilmente las imágenes de fondo aquí abajo.
   Coloca tus imágenes en: templates/TU_TEMA/img/backgrounds/
   
   Variables disponibles:
   --bg-primary     : fondo principal (hero / página)
   --bg-secondary   : capa secundaria / overlay artístico
   --bg-body        : color de respaldo del body
   --bg-overlay     : gradiente oscuro encima del fondo
   
   Para añadir MÁS fondos: usa comas en background-image
   o activa el modo slideshow (ver más abajo en .site-bg).
   ============================================================ */
:root {
  /* >>> CAMBIA AQUÍ LAS RUTAS DE TUS IMÁGENES DE FONDO <<< */
  --bg-primary: url("../img/backgrounds/mu-maya-season21-bg.png");
  --bg-secondary: url("../img/backgrounds/lightning-bg.png");
  /* Puedes agregar más: --bg-extra1, --bg-extra2, etc. */
  --bg-extra1: none;
  --bg-extra2: none;

  --bg-body: #0d0818;
  --bg-overlay: linear-gradient(
    to bottom,
    rgba(13, 8, 24, 0.25) 0%,
    rgba(13, 8, 24, 0.35) 20%,
    rgba(13, 8, 24, 0.55) 45%,
    rgba(13, 8, 24, 0.75) 70%,
    rgba(13, 8, 24, 0.92) 88%,
    rgba(13, 8, 24, 1) 100%
  );

  /* Posición y tamaño por defecto */
  --bg-position: top center;
  --bg-size: cover;
  --bg-attachment: fixed; /* fixed = parallax suave, scroll = se mueve con la página */
}

html {
  scroll-behavior: smooth;
}

/* Capa de fondo fija (mejor control y fácil de cambiar) */
.site-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--bg-body);
  background-image: var(--bg-primary), var(--bg-secondary);
  background-size: var(--bg-size), cover;
  background-position: var(--bg-position), center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: var(--bg-attachment), scroll;
}

/* Overlay oscuro encima de las imágenes para legibilidad */
.site-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-overlay);
  pointer-events: none;
}

/* Opcional: modo multi-fondo con capas extras (activa quitando "none") */
.site-bg.multi {
  background-image: var(--bg-primary), var(--bg-secondary), var(--bg-extra1), var(--bg-extra2);
  background-size: cover, cover, cover, cover;
  background-position: top center, center, center, center;
  background-repeat: no-repeat;
}

body {
  font-family: "Inter", "Arial", sans-serif;
  font-size: 18px;
  font-weight: 400;
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  height: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #ffffff;
  background-color: var(--bg-body);
  /* El fondo real lo maneja .site-bg para poder cambiarlo fácilmente */
}
#exception {
  position: absolute;
  top: 80px;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  text-decoration: none;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}
*,
*::after,
*::before {
  box-sizing: border-box;
}
ul,
ol {
  padding: 0;
  margin: 0;
}
li {
  list-style: none;
}
input, select {
  outline: none;
}
@media screen and (max-width: 1000px) {
  input {
    font-size: 16px;
  }
}
@media screen and (max-width: 768px) {
  input {
    font-size: 14px;
  }
}
h1,
h2,
h3,
h4,
h5 {
  margin: 0;
}
a {
  color: #ffffff;
  text-decoration: none;
}

a:hover,
a:active,
a:focus {
  text-decoration: none;
  color: #dcdcdc;
}

p {
  padding: 0;
  margin: 0;
}
.button {
  border: none;
  font-family: "Inter", "Arial", sans-serif;
  font-size: 16px;
  background-color: transparent;
  padding: 0;
  cursor: pointer;
  outline: none;
}
.wrapper {
  padding: 0 60px 0 395px;
}
@media screen and (max-width: 1700px) {
  .wrapper {
    padding: 0 30px 0 335px;
  }
}
@media screen and (max-width: 1500px) {
  .wrapper {
    padding: 0 30px 0 285px;
  }
}
@media screen and (max-width: 1300px) {
  .wrapper {
    padding: 0 25px 0 275px;
  }
}
@media screen and (max-width: 1000px) {
  .wrapper {
    padding: 0 15px 0 265px;
  }
}
@media screen and (max-width: 768px) {
  .wrapper {
    padding: 0 20px;
  }
}
.header {
  position: absolute;
}
.hero {
  /* El fondo principal ahora lo controla .site-bg (variables CSS arriba).
     Aquí solo dejamos el contenedor limpio para que puedas añadir
     más imágenes específicas del hero si quieres. */
  background-image: none;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  position: relative;
  min-height: 480px; /* da espacio visual al fondo */
}
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  /* Overlay más suave porque ya hay uno global en .site-bg */
  background: linear-gradient(to bottom, 
  rgba(13, 8, 24, 0.15) 0%,
  rgba(13, 8, 24, 0.25) 30%,
  rgba(13, 8, 24, 0.45) 60%,
  rgba(13, 8, 24, 0.7) 85%,
  rgba(13, 8, 24, 0.95) 100%);
  pointer-events: none;
  z-index: 0;
}
.hero > * {
  position: relative;
  z-index: 1;
}
.hero__content {
  padding-top: 60px;
  position: relative;
  padding-bottom: 0;
}
.hero__header {
  /* background: linear-gradient(to right, #6AD5FC 0%, #6AD5FC 60%, #00AEDE 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent; */
  color: #ffffff;
  position: relative;
  display: inline-block;
  margin-bottom: 40px;
  max-width: 50%;
}
.hero__header-wrapper {
  display: flex;
  justify-content: space-between;
}
.hero__pegi {
  display: flex;
  justify-content: flex-start;
  gap: 0;
  margin-bottom: 0;
  width: auto;
}
.hero__pegi img {
  height: 75px;
  width: 75px;
  object-fit: contain;
}
.hero__header span {
  color: #F2B631;
  background: none;
  background-clip: initial;
  -webkit-text-fill-color: initial;
}
.hero__description {
  font-size: 30px;
  color: #ffffff;
  margin-bottom: 30px;
}
.hero__info {
  position: absolute;
  top: 100px;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.hero__info--title {
  font-size: 36px;
  font-weight: 900;
  text-transform: uppercase;
  background: linear-gradient(to right, #44A2FD 0%, #0C6178 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  display: inline-block;
}
.hero__info--title span {
  color: #6737D8;
  background: none;
  background-clip: initial;
  -webkit-text-fill-color: initial;
}
.hero__info--description {
  font-size: 16px;
  font-weight: 700;
  color: #6737D8;
}
@media screen and (max-width: 2000px) {
  .hero__content {
    padding-bottom: 0;
  }
}
@media screen and (max-width: 1700px) {
  .hero__content {
    padding-top: 60px;
  }
  .hero__description {
    font-size: 26px;
  }
  .time-counter {
    margin-bottom: 50px;
  }
}
@media screen and (max-width: 1000px) {
  .hero {
    background-position: left;
  }
  .hero__content {
    padding-top: 80px;
    padding-bottom: 0;
  }
  .hero__info {
    display: none;
  }
  .hero__header {
    max-width: 315px;
    text-align: center;
  }
  .hero__description {
    max-width: 315px;
    text-align: center;
    font-size: 18px;
    margin-bottom: 20px;
  } 
  .hero__pegi {
    width: 315px;
  }
}
@media screen and (max-width: 768px) {
  .hero__content {
    padding-top: 30px;
    padding-bottom: 0;
  }
  .hero__header {
    max-width: 200px;
    margin-bottom: 12px;
    text-align: left;
  }
  .hero__description {
    max-width: 200px;
    text-align: left;
    font-size: 14px;
    margin-bottom: 22px;
  }
}
.main-new__content {
  display: flex;
}
.main-new__left {
  width: calc(70% - 15px);
  margin-right: 30px;
}
.main-new__right {
  width: calc(30% - 15px);
}
.main-rightbar {
  position: relative;
}
.main-rightbar__scroll {
  position: sticky;
  right: 0;
  top: 85px;
  z-index: 5;
  overflow: scroll;
  scrollbar-width: none;
}
.newsmodule {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100%;
}

.main-leftbar__news {
  width: 100%;
  overflow: visible;
}

/* Card da área de notícias (mesmo estilo do site) */
.news-card {
  width: 100%;
  background: #150E24;
  border-radius: 10px;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.news-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 10px;
  background: linear-gradient(-92deg, #534D68 0%, #2E2A3C 100%);
  z-index: -1;
}
.news-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
  background: #150E24;
  z-index: -1;
  margin: 1px;
}
.news-card__header {
  display: block;
  width: 100%;
  padding: 12px 30px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 18px;
  text-align: center;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background: linear-gradient(67deg, #008CB8 0%, #0C6178 100%);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.news-card__body {
  position: relative;
  z-index: 1;
  padding: 20px 25px 25px;
}

.main-news {
  width: 100%;
  overflow: visible;
}

@media screen and (max-width: 768px) {
  .newsmodule {
    gap: 0;
  }
}

.trailer-block {
  margin-bottom: 30px;
  background: #150E24;
  border-radius: 10px;
  position: relative;
  z-index: 0;
}

.newsmodule__item {
  margin-bottom: 0;
  background: transparent;
  border-radius: 0;
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  height: auto;
  align-self: stretch;
  padding: 18px 0;
  border-bottom: 1px solid rgba(83, 77, 104, 0.5);
}
.newsmodule__item:last-child {
  border-bottom: none;
}
/* .trailer-block::before,
.newsmodule__item::before, */
.trailer-block::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 10px;
}
.newsmodule__item::after {
  display: none;
}
/* .trailer-block::before,
.newsmodule__item::before {
  background: linear-gradient(-92deg, #534D68 0%, #2E2A3C 100%);
  z-index: -1;
} */
.trailer-block::after {
  background: #150E24;
  z-index: -1;
  margin: 1px;
}
.trailer-block__frame {
  padding: 25px 30px;
}
.newsmodule__image {
  width: 100%;
  overflow: hidden;
  height: 60px !important;
  max-height: 60px !important;
  min-height: 60px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0A0519;
  position: relative;
  flex-shrink: 0;
}

.newsmodule__image img {
  width: 100% !important;
  height: 60px !important;
  max-height: 60px !important;
  min-height: 60px !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  flex-shrink: 0;
}

.newsmodule__image a {
  display: block;
  width: 100%;
  height: 60px !important;
  max-height: 60px !important;
  overflow: hidden;
}

.newsmodule__body {
  padding: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.main-leftbar__header {
  width: 100%;
  display: inline-block;
  font-weight: 700;
  text-transform: uppercase;
  padding: 12px 30px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background: linear-gradient(-92deg, #534D68 0%, #2E2A3C 100%);
  flex-shrink: 0;
}
.newsmodule__title {
  width: 100%;
  display: inline-block;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0 0 8px 0;
  font-size: 12px;
  color: #82b4c5;
  background: transparent;
  border-radius: 0;
  flex-shrink: 0;
}
.newsmodule-item {
  position: relative;
  padding-left: 22px;
  padding-bottom: 15px;
  font-size: 18px;
  font-weight: 500;
}
.newsmodule-item a {
  color: #ffffff;
  font-size: 18px;
  font-weight: 500;
}
.newsmodule-item::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #65C6FF;
}
.newsmodule__info-list {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  padding-left: 22px;
  flex-wrap: wrap;
}
.newsmodule__info-item {
  padding-right: 10px;
}
.newsmodule__info-item:first-child {
  margin-right: auto;
}
.newsmodule__info-item:last-child {
  padding-right: 0;
}
.slideminis {
  margin-bottom: 30px;
}
.slideminis img {
  width: 100%;
}
.main-servers__top {
  background-image: url("../img/main-servers.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 10px;
  padding: 20px 26px;
  padding-bottom: 30px;
  margin-bottom: 30px;
  position: relative;
}
.main-servers__top--topplayers {
  background-image: none;
  padding: 0;
  margin-bottom: 0;
}
.main-servers__top--topplayers::before {
  display: none;
}
.main-servers__top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(10, 5, 25, 0.4);
  border-radius: 10px;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.main-servers__top:hover::before {
  opacity: 0.5;
}
.main-servers__header {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 20px;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}
.main-servers__top-list {
  margin-left: 20px;
  position: relative;
  z-index: 1;
}
.main-servers__top-item {
  list-style: disc;
  font-weight: 700;
  padding-bottom: 5px;
}

@media screen and (max-width: 1000px) {
  .main-new__content {
    flex-wrap: wrap;
  }
  .main-new__left {
    width: 100%;
    margin: 0;
  }
  .main-new__right {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .newsmodule-item {
    overflow-wrap: break-word;
    padding-left: 15px;
    font-size: 14px;
  }
  .newsmodule-item a {
    font-size: 14px;
  }
  .newsmodule__image {
    height: 60px !important;
    max-height: 60px !important;
    min-height: 60px !important;
  }
  .newsmodule__image img {
    width: 100% !important;
    height: 60px !important;
    max-height: 60px !important;
    min-height: 60px !important;
    object-fit: cover !important;
  }
  .newsmodule__image a {
    height: 60px !important;
    max-height: 60px !important;
  }
  .main-leftbar__header {
    padding: 8px 15px;
    text-align: center;
  }
  .newsmodule__title {
    padding: 0 0 6px 0;
  }
  .newsmodule__body {
    padding: 15px 12px;
  }
  .newsmodule__info-list {
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
  }
  .newsmodule__info-item {
    font-size: 12px;
    margin: 0;
    padding: 0;
  }
  .newsmodule__info-item:first-child {
    width: 40%;
  }
  .newsmodule__info-item:nth-child(2n) {
    width: 60%;
  }
  .newsmodule__info-item:last-child {
    width: 60%;
    margin-left: auto;
  }
  .newsmodule-item::before {
    top: 4px;
  }
}
.site-menu {
  width: 275px;
  position: fixed;
  left: 0;
  top: 0;
  margin-left: 60px;
  z-index: 11;
  overflow: scroll;
  scrollbar-width: none;
  height: 100%;
  padding-bottom: 50px;
}
.site-menu .site-menu::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.site-menu .site-menu::-webkit-scrollbar-track {
  background: transparent;
}
.site-menu .site-menu::-webkit-scrollbar-thumb {
  background: transparent;
}
.site-menu__wrapper {
  position: relative;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
/* .site-menu__wrapper::before, */
.site-menu__wrapper::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  bottom: -1px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
/* .site-menu__wrapper::before {
  background: linear-gradient(to left, #3D5290 0%, #1F3063 100%);
  z-index: -1;
} */
.site-menu__wrapper::after {
  background: linear-gradient(to top, #251358 0%, #11082A 25%, #080414 100%);
  z-index: -1;
  /* margin: 1px; */
}
.site-menu__mobile {
  display: none;
}
.site-menu__item:first-child {
  margin-top: 0;
}
.site-menu__item:last-child {
  margin-bottom: 0;
}
.site-menu__link {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  border-radius: 10px;
  padding: 10px;
  color: #afafaf;
  transition: color 0.3s ease;
}
.site-menu__link.active {
  color: #ffffff;
}
.site-menu__link:hover {
  color: #ffffff;
}
.site-menu__link svg path {
  fill: #AFAFAF;
}
.site-menu__link.active svg path {
  fill: #ffffff;
}
.site-menu__link:hover svg path {
  fill: #ffffff;
}
.site-menu__link svg {
  width: 16px;
}
.site-menu__link svg path {
  fill: #afafaf;
}
.site-menu__nav-button {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  position: relative;
  z-index: 1;
  padding: 20px 0;
  margin-bottom: 15px;
}
.site-menu__nav-button::before,
.site-menu__nav-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.site-menu__nav-button::before {
  background: linear-gradient(to right, rgba(207, 145, 255, 0) 0%, #cf91ff 52%, rgba(207, 145, 255, 0) 100%);
  z-index: -1;
}
.site-menu__nav-button::after {
  background-color: #0A0519;
  z-index: -1;
  margin: 2px;
}
.site-menu__nav-button i {
  color: #ffffff;
}
.site-menu__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.site-menu__buttons--reg {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  position: relative;
  z-index: 1;
}
.site-menu__buttons--reg::before,
.site-menu__buttons--reg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  border-radius: 10px;
  transition: opacity 0.3s ease;
}
.site-menu__buttons--reg::before {
  background: linear-gradient(to bottom, #86E2FF 0%, #003347 100%);
  z-index: -1;
}
.site-menu__buttons--reg::after {
  background: linear-gradient(67deg, #008CB8 0%, #0C6178 100%);
  z-index: -1;
  margin: 1px;
}
.site-menu__buttons--reg:hover::before {
  opacity: 0;
}
.site-menu__buttons--reg:hover::after {
  opacity: 0.9;
}
.site-menu__buttons--donate {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  position: relative;
  z-index: 1;
}
.site-menu__buttons--donate::before,
.site-menu__buttons--donate::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  border-radius: 10px;
  transition: opacity 0.3s ease;
}
.site-menu__buttons--donate::before {
  background: linear-gradient(to bottom, #86E2FF 0%, #003347 100%);
  z-index: -1;
}
.site-menu__buttons--donate::after {
  background: linear-gradient(67deg, #008CB8 0%, #0C6178 100%);
  z-index: -1;
  margin: 1px; 
}
.site-menu__buttons--donate:hover:before {
  opacity: 0;
}
.site-menu__buttons--donate:hover:after {
  opacity: 0.7;
}
.site-menu__buttons--download-game {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  position: relative;
  z-index: 1;
}
.site-menu__buttons--download-game::before,
.site-menu__buttons--download-game::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  transition: opacity 0.3s ease;
  border-radius: 10px;
}
.site-menu__buttons--download-game::before {
  background: linear-gradient(to bottom, #86E2FF 0%, #003347 100%);
  z-index: -1;
}
.site-menu__buttons--download-game::after {
  background: linear-gradient(67deg, #008CB8 0%, #0C6178 100%);
  z-index: -1;
  margin: 1px;
}
.site-menu__buttons--download-game:hover:before {
  opacity: 0;
}
.site-menu__buttons--download-game:hover:after {
  opacity: 0.7;
}
.site-menu__buttons--report {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  position: relative;
  z-index: 1;
}
.site-menu__buttons--report::before,
.site-menu__buttons--report::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.site-menu__buttons--report::before {
  background: linear-gradient(to bottom, #86E2FF 0%, #003347 100%);
  z-index: -1;
}
.site-menu__buttons--report::after {
  background: linear-gradient(67deg, #008CB8 0%, #0C6178 100%);
  z-index: -1;
  margin: 1px;
}
.site-menu__buttons--report:hover:before {
  opacity: 0;
}
.site-menu__buttons--report:hover:after {
  opacity: 0.7;
}
.site-menu__button {
  font-size: 18px;
  color: #ffffff;
  padding: 10px;
  text-transform: uppercase;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  text-align: center;
}

.site-menu__button:hover {
  text-decoration: none;
  color: #ffffff;
}

.site-menu__social-link {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  position: relative;
  z-index: 1;
}
.site-menu__social-link--discord {
  padding: 20px 0;
  margin-bottom: 15px;
}
.site-menu__social-link--discord::before,
.site-menu__social-link--discord::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.site-menu__social-link--discord::before {
  background: linear-gradient(to right, rgba(207, 145, 255, 0) 0%, #cf91ff 52%, rgba(207, 145, 255, 0) 100%);
  z-index: -1;
}
.site-menu__social-link--instagram {
  padding: 20px 0;
  margin-bottom: 15px;
}
.site-menu__social-link--instagram::before,
.site-menu__social-link--instagram::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.site-menu__social-link--instagram::before {
  background: linear-gradient(to right, rgba(225, 48, 108, 0) 0%, #e1306c 52%, rgba(225, 48, 108, 0) 100%);
  z-index: -1;
}
.site-menu__social-link--facebook {
  padding: 20px 0;
  margin-bottom: 15px;
}
.site-menu__social-link--facebook::before,
.site-menu__social-link--facebook::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.site-menu__social-link--facebook::before {
  background: linear-gradient(to right, rgba(24, 119, 242, 0) 0%, #1877f2 52%, rgba(24, 119, 242, 0) 100%);
  z-index: -1;
}
.site-menu__social-link::after {
  background-color: #0A0519;
  z-index: -1;
  margin: 2px;
}
.site-menu__social-link--tg {
  padding: 10px 0;
  position: relative;
  flex-direction: row;
}
.site-menu__social-link--tg::before,
.site-menu__social-link--tg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
  z-index: -1;
}
.site-menu__social-link--tg::before {
  background: linear-gradient(78deg, #7A19E9 0%, #31009A 100%);
  opacity: 1;
  transition: opacity 0.5s ease;
}
.site-menu__social-link--tg::after {
  background: linear-gradient(-78deg, #7A19E9 0%, #31009A 100%);
  opacity: 0;
  margin: 0;
  transition: opacity 0.5s ease;
}
.site-menu__social-link--tg:hover::before {
  opacity: 0;
}
.site-menu__social-link--tg:hover::after {
  opacity: 1;
}
.site-menu__online {
  font-size: 18px;
  font-weight: 500;
  color: #afafaf;
}
@media screen and (min-width: 2000px) {
  .site-menu,
  .main-nav,
  .main,
  .footer,
  .register-modal,
  .sign-modal {
    zoom: 120%;
  }
}
@media screen and (min-width: 2500px) {
  .site-menu,
  .main-nav,
  .main,
  .footer,
  .register-modal,
  .sign-modal {
    zoom: 130%;
  }
}
@media screen and (min-width: 3000px) {
  .main,
  .footer,
  .register-modal,
  .sign-modal {
    zoom: 145%;
  }
}
@media screen and (min-width: 3000px) {
  .site-menu,
  .main-nav {
    zoom: 135%;
  }
}
@media screen and (min-width: 3500px) {
  .site-menu,
  .main-nav,
  .main,
  .footer,
  .register-modal,
  .sign-modal {
    zoom: 160%;
  }
}
@media screen and (max-width: 1700px) {
  .site-menu {
    margin-left: 30px;
  }
}
@media screen and (max-width: 1500px) {
  .site-menu {
    width: 225px;
  }
  .site-menu__link {
    font-size: 16px;
    padding: 10px;
  }
  .site-menu__button {
    font-size: 14px;
    margin-bottom: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}
@media screen and (max-width: 1300px) {
  .site-menu {
    margin-left: 25px;
  }
}
@media screen and (max-width: 1150px) {
  .site-menu {
    zoom: 87%;
  }
}
@media screen and (max-width: 1000px) {
  .site-menu {
    zoom: 100%;
  }
}
@media screen and (max-width: 1000px) {
  .site-menu {
    margin-left: 15px;
    width: 235px;
  }
  .site-menu__list {
    margin-bottom: 20px;
  }
  .site-menu__item {
    margin-bottom: 10px;
  }
  .site-menu__button {
    font-size: 16px;
    margin-bottom: 15px;
    padding: 10px 20px;
  }
}
@media screen and (max-width: 768px) {
  .site-menu {
    display: none;
  }
  .site-menu__mobile {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 11;
    display: block;
  }
  .site-menu__list--mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background-color: #090516;
    padding: 6px 20px;
    overflow: scroll;
  }
  .site-menu__link--mobile {
    display: inline-flex;
    padding: 6px;
    border-radius: 10px;    
  }
  .site-menu__link--mobile.active {
    background-color: #2E2A3C;
  }
  .site-menu__link--mobile.active svg path {
    fill: #ffffff;
  }
  .site-menu__link--mobile svg path {
    fill: #afafaf;
  }
  .site-menu__link svg {
    width: 18px;
    height: 18px;
  }
  .site-menu__link--mobile svg {
    width: 18px;
    height: 18px;
  }
}
.main-nav {
  width: calc(100% - 335px);
  position: fixed;
  right: 0;
  top: 0;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 60px;
  z-index: 10;
}
.main-nav::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(87, 31, 95, 0.5);
  mask: linear-gradient(to top, transparent, black 0%);
  backdrop-filter: blur(4px);
  z-index: -1;
}
.main-nav::after {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(to right, rgba(207, 145, 255, 0) 0%, #cf91ff 52%, rgba(207, 145, 255, 0) 100%);
}
@media screen and (max-width: 1700px) {
  .main-nav {
    padding: 0 30px;
    width: calc(100% - 305px);
  }
}
@media screen and (max-width: 1500px) {
  .main-nav {
    width: calc(100% - 255px);
    padding: 0 30px;
  }
  .main-nav::before {
    right: 1px;
  }
}
@media screen and (max-width: 1300px) {
  .main-nav {
    width: calc(100% - 250px);
    padding: 0 25px;
  }
}
@media screen and (max-width: 1150px) {
  .main-nav {
    zoom: 87%;
  }
}
@media screen and (max-width: 1000px) {
  .main-nav {
    zoom: 100%;
  }
}
@media screen and (max-width: 1000px) {
  .main-nav {
    width: calc(100% - 250px);
    padding: 0 15px;
  }
}
@media screen and (max-width: 768px) {
  .main-nav {
    width: 100%;
    padding: 0 20px;
    height: 48px;
  }
}
.site-nav {
  position: relative;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  margin-right: 16px;
  max-width: calc(100% - 220px);
}
.site-nav__mobile {
  display: none;
}
.site-nav__list {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-width: 0;
}
.site-nav__item--server {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}
.site-nav__item--links {
  flex: 0 0 auto !important;
  width: auto !important;
  margin-left: 12px;
  gap: 16px;
}
.site-nav__item {
  position: relative;
  height: 40px;
  display: flex;
  align-items: center;
}
.site-nav__item--links {
    justify-content: flex-end;
    gap: 16px;
    width: auto !important;
    flex: 0 0 auto !important;
}
.selectdiv .copyright22 {
  color: #ffffff;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  position: relative;
  display: inline-block;
  margin-right: 20px;
}
.selectdiv select {
  width: 275px;
  height: 40px;
  padding-left: 15px;
  color: #65C6FF;
  /* border: 1px solid #30204A; */
  border: none;
  border-radius: 5px;
  appearance: none;
  background: #090416 url('/templates/image/icons/select-arrow.svg') no-repeat 95% center; 
  background-size: 15px;
  cursor: pointer;
}
.site-nav__link {
  color: #ffffff;
  text-transform: uppercase;
  font-size: 12px;
  text-align: center;
  font-weight: 600;
  line-height: 20px;
  position: relative;
  cursor: pointer;
}
.site-nav__link::before {
  content: "";
  position: absolute;
  width: calc(100% + 20px);
  height: 2px;
  padding: 0 10px;
  bottom: -5px;
  left: -10px;
  background: linear-gradient(to right, rgba(16, 84, 113, 0) 0%, #75dcfe 52%, rgba(16, 84, 113, 0) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.site-nav__link.active::before {
  opacity: 1;
}
.site-nav__link:hover::before {
  opacity: 1;
}
.site-nav__menu-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 12px;
  height: 12px;
  display: none;
}
.site-nav__menu-close::before,
.site-nav__menu-close::after {
  position: absolute;
  content: '';
  top: 5px;
  left: -1px;
  width: 15px;
  height: 2px;
  background-color: #afafaf;
}
.site-nav__menu-close::before {
  transform: rotate(45deg);
}
.site-nav__menu-close::after {
  transform: rotate(-45deg);
}
@media screen and (max-width: 1700px) {
  .site-nav__list {
    gap: 20px;
  }
}
@media screen and (max-width: 1300px) {
  .site-nav__list {
    gap: 25px;
  }
  .selectdiv select {
    width: 210px;
  }
  .site-nav__item--links {
    width: calc(100% - 400px);
    margin-left: auto;
  }
}
@media screen and (max-width: 1000px) {
  .site-nav {
    position: absolute;
    padding: 35px;
    width: 375px;
    top: 60px;
    left: 0;
    background: rgba(9, 5, 22, 0.9);
    mask: linear-gradient(to top, transparent, black 0%);
    backdrop-filter: blur(4px);
    opacity: 0;
    transform: translateY(-300px);
    transition: opacity 0.5s ease, transform 0.2s ease 0.4s;
  }
  .site-nav.active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease 0.2s, transform 0.2s ease;
  }
  .site-nav__list {
    flex-direction: column;
    gap: 28px;
  }
  .site-nav__item {
    width: 100%;
    height: auto;
  }
  .site-nav__link {
    font-size: 14px;
    font-weight: 400;
  }
  .site-nav__menu-close {
    display: block;
  }
  .site-menu__social-link--tg {
    padding: 15px 0;
  }
}
@media screen and (max-width: 768px) {
  .site-nav {
    display: none;
  }
  .site-nav__mobile {
    display: block;
    position: absolute;
    padding: 30px 20px 50px 20px;
    width: 100%;
    top: 48px;
    left: 0;
    background: rgba(9, 5, 22, 0.9);
    mask: linear-gradient(to top, transparent, black 0%);
    backdrop-filter: blur(4px);
    overflow: scroll;
    height: 100vh;
    transform: translate(-700px, 0);
    transition: transform 0.8s ease-out;
  }
  .site-nav__mobile.active {
    transform: translate(0);
    transition: transform 0.8s ease-in;
  }
  .site-nav__mobile .site-nav__menu-close {
    top: 15px;
    right: 15px;
  }
  .site-nav__mobile .site-nav__list {
    gap: 18px;
    margin-bottom: 20px;
  }
  .site-nav__mobile .site-menu__buttons {
    margin-bottom: 5px;
    max-width: 170px;
  }
  .site-nav__mobile .site-menu__button {
    font-size: 12px;
    margin-bottom: 10px;
    padding: 8px 10px;
  }
  .site-nav__mobile .site-menu__social-link {
    padding: 12px 0;
  }
  .site-nav__mobile .site-menu__social-link img {
    width: 80px;
  }
  .site-nav__mobile .site-menu__social-link--tg {
    font-size: 12px;
    padding: 8px 10px;
  }
  .site-nav__mobile .site-menu__social-link--tg svg {
    width: 15px;
  }
  .site-nav__mobile .site-menu__online {
    font-size: 12px;
  }
  .site-nav__item select {
    width: 100%;
    padding-left: 10px;
    background-size: 15px;
    font-size: 12px;
  }
}
@media screen and (max-width: 400px) {
  .site-nav__mobile {
    transform: translate(-500px, 0);
    transition: transform 0.6s ease-out;
  }
  .site-nav__mobile.active {
    transform: translate(0);
    transition: transform 0.6s ease-in;
  }
  .site-nav__mobile .site-menu__buttons {
    margin-bottom: 5px;
    max-width: 100%;
  }
}
.user-nav {
  display: flex;
  gap: 22px;
  position: relative;
}
.user-nav form[name="log_out"] {
  position: absolute;
  top: 50%;
  left: 50%;
}
.user-nav__account {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 10px;
}
.user-nav__account::before,
.user-nav__account::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 10px;
}
.user-nav__account::before {
  background: linear-gradient(to bottom, #FFE486 0%, #7D4D06 100%);
  z-index: -1;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.user-nav__account::after {
  background: linear-gradient(67deg, #F2B631 0%, #CD701B 100%);
  z-index: -1;
  margin: 1px;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.user-nav__account:hover::before {
  opacity: 0;
}
.user-nav__account:hover::after {
  opacity: 0.9;
}
.user-nav__account--link {
  padding: 10px 20px;
}
.user-nav__login-button {
  height: 100%;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  text-transform: uppercase;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  position: relative;
  white-space: nowrap;
}
.user-nav__login-button::before,
.user-nav__login-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.user-nav__login-button::before {
  background: linear-gradient(to bottom, #D6CDFF 0%, #170469 100%);
  z-index: -1;
}
.user-nav__login-button::after {
  background: linear-gradient(67deg, #7439F6 0%, #4E32A4 100%);
  z-index: -1;
  margin: 1px;
}
.user-nav__login-button:hover::before {
  opacity: 0;
}
.user-nav__login-button:hover::after {
  opacity: 0.9;
}
.user-nav__logout-button {
  height: 100%;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  text-transform: uppercase;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  position: relative;
}
.user-nav__logout-button::after {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  border-radius: 10px;
  background: linear-gradient(-108deg, #534D68 0%, #2E2A3C 100%);
  z-index: -1;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.user-nav__logout-button:hover::after {
  opacity: 0.8;
}
.user-nav__menu-open {
  display: none;
  width: 60px;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background: #361242;
  position: relative;
}
.user-nav__menu-open::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  z-index: -1;
  background: linear-gradient(to bottom, #EDB8FF 0%, #470000 100%);
  border-radius: 10px;
}
.user-nav__menu-button {
  display: block;
  position: relative;
  width: 20px;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
}
.user-nav__menu-button::before,
.user-nav__menu-button::after {
  content: '';
  position: absolute;
  background: #ffffff;
  border-radius: 2px;
  height: 2px;
}
.user-nav__menu-button::before {
  top: 5px;
  left: 0;
  width: 13px;
}
.user-nav__menu-button::after {
  bottom: 5px;
  left: 0;
  width: 15px;
}
@media screen and (max-width: 1700px) {
  .user-nav {
    gap: 15px;
  }
}
@media screen and (max-width: 1500px) {
  .user-nav {
    gap: 15px;
  }
}
@media screen and (max-width: 1300px) {
  .user-nav__account {
    width: 40px;
    height: 40px;
  }
  .user-nav__account--link {
    padding: 6px;
  }
  .user-nav__reg-button {
    height: 40px;
  }
  .user-nav__login-button {
    height: 40px;
  }
  .user-nav__logout-button {
    height: 40px;
  }
}
@media screen and (max-width: 1000px) {
  .user-nav__account {
    width: auto;
    height: auto;
  }
  .user-nav__account--link {
    padding: 10px 20px;
  }
  .user-nav {
    width: 100%;
    gap: 20px;
    justify-content: flex-end;
  }
  .user-nav__menu-open {
    display: flex;
    margin-right: auto;
  }
  .user-nav__reg-button {
    height: auto;
  }
  .user-nav__login-button {
    height: auto;
  }
  .user-nav__logout-button {
    height: auto;
  }
}
@media screen and (max-width: 768px) {
  .user-nav {
    gap: 10px;
  }
  .user-nav__account {
    width: 32px;
    height: 32px;
  }
  .user-nav__account--link {
    padding: 6px;
  }
  .user-nav__menu-open {
    width: 32px;
    height: 32px;
  }
  .user-nav__reg-button {
    font-size: 12px;
    padding: 6px;
  }
  .user-nav__login-button {
    font-size: 12px;
    gap: 5px;
    padding: 6px;
  }
  .user-nav__logout-button {
    font-size: 12px;
    gap: 5px;
    padding: 6px;
  }
  .user-nav__logout-button svg {
    width: 16px;
    height: 16px;
  }
}
.language {
  position: relative;
  padding: 10px 20px;
  background-color: #361242;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.language::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  z-index: -1;
  background: linear-gradient(to bottom, #EDB8FF 0%, #470000 100%);
  opacity: 1;
  border-radius: 10px;
}
.language:hover {
  background-color: #6A14D8;
}
.language:hover::before {
  opacity: 0;
}
.language:hover.active {
  background-color: #6A14D8;
}
.language.active {
  background-color: #6A14D8;
}
.language.active::before {
  background: linear-gradient(to left, #3D5290 0%, #1F3063 100%);
  opacity: 1;
  transition: opacity 0.3s ease;
}
.language:hover.active::before {
  opacity: 0;
}
.language__list {
  width: 100%;
  padding: 12px;
  padding-left: 22px;
  border-radius: 10px;
  position: absolute;
  top: 50px;
  left: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.language__list::before,
.language__list::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.language__list::before {
  background: linear-gradient(to bottom, #EDB8FF 0%, #470000 100%);
  z-index: -1;
}
.language__list::after {
  background-color: #361242;
  z-index: -1;
  margin: 1px;
}
.language__list.active {
  opacity: 1;
  pointer-events: all;
}
.language__item {
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 500;
  padding-bottom: 5px;
  color: #afafaf;
}
.language__item a {
  color: #ffffff;
  transition: color 0.3s ease;
}
.language__item:last-child {
  padding-bottom: 0;
}
.language__item a:hover {
  color: #8754FF;
}
@media screen and (max-width: 1300px) {
  .language {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .language__list {
    width: 120%;
    padding: 15px;
    left: calc(50% - 22px);
  }
}
@media screen and (max-width: 1000px) {
  .language {
    width: auto;
    height: auto;
    padding: 10px 20px;
  }
  .language__list {
    width: 120%;
    padding: 15px;
    left: calc(50% - 35px);
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
  .language {
    padding: 6px;
  }
  .language__list {
    width: 162%;
    left: calc(50% - 25px);
}
}
.logo__link {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 15px;
  padding-bottom: 10px;
}
.logo__link img {
  width: 50%;
}
.logo__mobile {
  display: none;
}
@media screen and (max-width: 1500px) {
  .logo__link {
    padding-top: 15px;
    padding-bottom: 10px;
  }
  .logo__image {
    width: 150px;
  }
}
@media screen and (max-width: 1000px) {
  .logo__link {
    padding: 30px 0;
  }
  .logo__image {
    width: 157px;
  }
}
@media screen and (max-width: 768px) {
  .logo__mobile {
    width: fit-content;
    display: block;
    margin: 0;
    margin-bottom: 13px;
  }
  .logo .logo__link {
    justify-content: flex-start;
    padding: 0;
  }
  .logo .logo__image {
    width: 90px;
  }
}
.main__inner {
  padding-top: 60px;
}
.main__inner-content {
  display: flex;
  gap: 30px;
  margin-top: 30px;
}
@media screen and (max-width: 1300px) {
  .main__inner-content {
    gap: 25px;
  }
}
@media screen and (max-width: 1000px) {
  .main__inner-content {
    flex-direction: column;
    margin-top: 20px;
    gap: 20px;
  }
}
.main__news {
  margin-bottom: 70px;
  display: flex;
  gap: 30px;
}
.main__market {
  margin-top: 0 !important;
  margin-bottom: 70px;
}
@media screen and (max-width: 1150px) {
  .main {
    zoom: 87%;
  }
}
@media screen and (max-width: 1000px) {
  .main {
    zoom: 100%;
  }
}
@media screen and (max-width: 768px) {
  .main__inner {
    padding-top: 48px;
  }
  .main__inner-content {
    gap: 10px;
    margin-top: 10px;
  }
  .main__news {
    position: relative;
    flex-direction: column-reverse;
    gap: 15px;
  }
}
.page-title {
  font-size: 42px;
  font-weight: 700;
  text-transform: uppercase;
}
@media screen and (max-width: 1700px) {
  .page-title {
    font-size: 30px;
  }
}
@media screen and (max-width: 768px) {
  .page-title {
    font-size: 18px;
  }
}
.time-counter {
  width: fit-content;
  margin-bottom: 200px;
}
.time-counter__header {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
  width: 430px;
}
.time-counter__header--text {
  color: #6AD5FC;
  font-size: 30px;
  font-weight: 500;
}
.time-counter__header--date {
  color: #ffffff;
  font-size: 30px;
  font-weight: 700;
  text-shadow: 0 0 30px #45A1FE;
}
.time-counter__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
}
.time-counter__item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  position: relative;
  border-radius: 10px;
  z-index: 1;
}
.time-counter__item::before,
.time-counter__item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.time-counter__item::before {
  background: linear-gradient(to left, #3D5290 0%, #1F3063 100%);
  z-index: -1;
  opacity: 0.6;
}
.time-counter__item::after {
  background: linear-gradient(to bottom, #1E0F49 0%, #1C4E62 50%, #1E0F49 100%);
  z-index: -1;
  margin: 1px;
  opacity: 0.4;
}
.time-counter__item:last-child .time-counter__colon {
  display: none;
}
.time-counter__colon {
  position: absolute;
  top: 45%;
  right: -14px;
  width: 4px;
  height: 16px;
}
.time-counter__colon::before,
.time-counter__colon::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #47B7D0;
}
.time-counter__colon::before {
  right: 0;
  top: 0;
}
.time-counter__colon::after {
  right: 0;
  top: 9px;
}
.time-counter__number {
  font-size: 26px;
  font-weight: 700;
  background: linear-gradient(to bottom, #FFFFFF 0%, #36D9FF 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  display: inline-block;
}
.time-counter__description {
  font-size: 12px;
  text-transform: uppercase;
  color: #47B7D0;
}
@media screen and (max-width: 768px) {
  .time-counter {
    width: 100%;
  }
  .time-counter__header {
    gap: 10px;
    margin-bottom: 10px;
    width: auto;
  }
  .time-counter__header--text {
    font-size: 20px;
  }
  .time-counter__header--date {
    font-size: 20px;
  }
  .time-counter__item {
    width: 52px;
    height: 52px;
    gap: 0;
  }
  .time-counter__number {
    font-size: 14px;
  }
  .time-counter__description {
    font-size: 8px;
  }
}
.main-servers__content {
  display: flex;
  flex-direction: row-reverse;
  gap: 20px;
  margin-bottom: 20px;
}
.main-servers__content.main-servers__only-one {
  display: flex;
  flex-direction: row-reverse;
  gap: 20px;
  margin-bottom: 20px;
}
.main-servers__content .main-servers__top {
  width: calc(40% - 20px);
  background-position: 20%;
  margin-bottom: 0;
}
.main-servers__content .main-servers__list {
  width: 60%;
}
.main-servers__content .main-servers__item {
  width: 100%;
}
.main-servers__list {
  display: flex;
  justify-content: flex-start;
  gap: 20px;
}
.main-servers__list--stack {
  flex-direction: column;
}
.main-servers__item {
  width: calc(33.33% - 20px);
}
.main-servers__title {
  display: inline-block;
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 18px;
  padding: 25px;
  padding-bottom: 0;
}
.main-servers__link {
  cursor: pointer;
  height: 100%;
  z-index: 1;
}
.main-servers__link1 {
  position: relative;
}
.main-servers__link1::before,
.main-servers__link1:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.main-servers__link1:before {
  background: linear-gradient(to bottom, #D3F4FF 0%, #AAD7ED 52%, #2375B0 100%);
  z-index: -1;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.main-servers__link1:after {
  background: linear-gradient(150deg, #191127 20%, #692574 100%);
  z-index: -1;
  margin: 1px;
  box-shadow: none;
  transition: box-shadow 0.3s ease;
}
.main-servers__link1:hover::before {
  opacity: 0;
}
.main-servers__link1:hover::after {
  box-shadow: 0 0 12px 5px rgba(131, 37, 121, 0.5);
}
.main-servers__link1.main-servers__link--active::after {
  box-shadow: 0 0 12px 5px rgba(131, 37, 121, 0.5);
}
.main-servers__link1.main-servers__link--active:hover::after {
  opacity: 1;
}
.main-servers__link1.main-servers__link--active:hover::before {
  opacity: 1;
}
.main-servers__item-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  padding-bottom: 1px;
  margin-top: 45px;
  justify-self: center;
}
.main-servers__item-bottom img {
  width: 175px;
  height: 150px;
  object-fit: contain;
  border-radius: 10px;
  padding-left: 1px;
}
.main-servers__link1 .main-servers__item-bottom::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, #FFFEFB 0%, #FFAFF7 9%, #D69AD0 19%, #E939D7 27%, #A50094 33%, #A50095 36%, #000000 100%);
  background-blend-mode: color-dodge;
  filter: blur(50px);
  z-index: -1;
}
.main-servers__link2 {
  position: relative;
}
.main-servers__link::before,
.main-servers__link:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.main-servers__link2:before {
  background: linear-gradient(to bottom, #D3F4FF 0%, #aad7ed 52%, #2375b0 100%);
  z-index: -1;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.main-servers__link2:after {
  background: linear-gradient(150deg, #191127 20%, #3E2574 100%);
  z-index: -1;
  margin: 1px;
  box-shadow: none;
  transition: box-shadow 0.3s ease;
}
.main-servers__link2:hover::before {
  opacity: 0;
}
.main-servers__link2:hover::after {
  box-shadow: 0 0 12px 5px rgba(12, 77, 169, 0.5);
}
.main-servers__link2.main-servers__link--active::after {
  box-shadow: 0 0 12px 5px rgba(12, 77, 169, 0.5);
}
.main-servers__link2.main-servers__link--active:hover::after {
  opacity: 1;
}
.main-servers__link2.main-servers__link--active:hover::before {
  opacity: 1;
}
.main-servers__link2 .main-servers__item-bottom::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, #FFFEFB 0%, #B2C6E1 9%, #B2C6E1 19%, #2f66b4 27%, #0c4da9 33%, #0044A5 36%, #000000 100%);
  background-blend-mode: color-dodge;
  filter: blur(50px);
  z-index: -1;
}
.main-servers__link3 {
  position: relative;
}
.main-servers__link3::before,
.main-servers__link3::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.main-servers__link3::before {
  background: linear-gradient(to bottom, #D3F4FF 0%, #AAD7ED 52%, #2375B0 100%);
  z-index: -1;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.main-servers__link3::after {
  background: linear-gradient(150deg, #191127 20%, #003647 100%);
  z-index: -1;
  margin: 1px;
  box-shadow: none;
  transition: box-shadow 0.3s ease;
}
.main-servers__link3:hover::before {
  opacity: 0;
}
.main-servers__link3:hover::after {
  box-shadow: 0 0 12px 5px rgba(30, 208, 175, 0.5);
}
.main-servers__link3.main-servers__link--active::after {
  box-shadow: 0 0 12px 5px rgba(30, 208, 175, 0.5);
}
.main-servers__link3.main-servers__link--active:hover::after {
  opacity: 1;
}
.main-servers__link3.main-servers__link--active:hover::before {
  opacity: 1;
}
.main-servers__link3 .main-servers__item-bottom::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, #FFFEFB 0%, #69FFE4 9%, #65F7DD 19%, #7AFFE7 27%, #1ed0af 44%, #000000 100%);
  background-blend-mode: color-dodge;
  filter: blur(50px);
  z-index: -1;
}
.main-servers__procentbar {
  padding: 0 25px;
  margin-bottom: 25px;
}
.procentbar-server_num {
  display: inline-block;
  margin-bottom: 5px;
  font-weight: 500;
}
.main-servers__online {
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 30px;
}

/* ========== ONLINE USERS COMPACTO (derecha superior) ========== */
.main-servers__card--compact {
  position: relative;
  padding-bottom: 8px;
  min-height: auto;
}

.main-servers__header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 0 18px;
}

.main-servers__card--compact .main-servers__title {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0;
  padding: 0;
  line-height: 1.2;
}

/* Badge pequeño de usuarios online — esquina superior derecha */
.main-servers__online-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 4px 10px 4px 8px;
  white-space: nowrap;
  flex-shrink: 0;
  backdrop-filter: blur(4px);
}

.online-badge__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1;
}

.online-badge__value {
  font-size: 13px;
  font-weight: 700;
  color: #7CFF9A;
  line-height: 1;
  min-width: 1.2em;
  text-align: center;
}

.main-servers__card--compact .main-servers__procentbar {
  padding: 8px 18px 6px;
  margin-bottom: 0;
}

.main-servers__card--compact .procentbar-server_num {
  font-size: 12px;
  margin-bottom: 3px;
  opacity: 0.85;
}

.main-servers__card--compact .procentbar-server__progress {
  height: 8px;
  border-radius: 4px;
}

.main-servers__card--compact .procentbar-server__progress .progress {
  height: 6px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.main-servers__card--compact .main-servers__item-bottom {
  margin-top: 4px;
  padding-bottom: 6px;
  justify-content: center;
}


.main-servers__card--compact .main-servers__item-bottom img {
  width: 90px;
  height: 80px;
  object-fit: contain;
  padding-left: 0;
}

/* ============================================================
   MARCOS FANTASY / ORNAMENTALES (estilo servidores MU top)
   Bordes brillantes, esquinas decorativas, glow mágico
   ============================================================ */

/* Marco base reutilizable */
.fantasy-frame {
  position: relative;
  border-radius: 12px;
  isolation: isolate;
}

/* Capa de borde brillante exterior */
.fantasy-frame::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 13px;
  padding: 1.5px;
  background: linear-gradient(
    135deg,
    rgba(180, 140, 255, 0.9) 0%,
    rgba(100, 60, 180, 0.4) 25%,
    rgba(200, 160, 255, 0.85) 50%,
    rgba(80, 40, 140, 0.35) 75%,
    rgba(160, 120, 255, 0.9) 100%
  );
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
  opacity: 0.85;
  transition: opacity 0.35s ease, filter 0.35s ease;
}

.fantasy-frame:hover::before {
  opacity: 1;
  filter: brightness(1.25) drop-shadow(0 0 6px rgba(160, 100, 255, 0.45));
}

/* Glow suave exterior */
.fantasy-frame {
  box-shadow:
    0 0 0 1px rgba(120, 80, 200, 0.25),
    0 4px 20px rgba(0, 0, 0, 0.45),
    0 0 30px rgba(100, 50, 180, 0.15);
}

/* Esquinas ornamentales (pseudo con clips) */
.fantasy-frame::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 9px;
  border: 1px solid rgba(200, 170, 255, 0.12);
  pointer-events: none;
  z-index: 2;
  box-shadow: inset 0 0 20px rgba(80, 40, 140, 0.25);
}

/* --- Aplicar a la tarjeta del servidor (MUONLINE) --- */
/* ========== MARCO FANTASY FUERTE (MUONLINE card) ========== */
.main-servers__link1.main-servers__card--compact,
.main-servers__link1.main-servers__link--active.main-servers__card--compact {
  border-radius: 14px !important;
  overflow: visible !important;
  position: relative !important;
  /* Borde grueso visible + glow exterior fuerte */
  box-shadow:
    0 0 0 2px rgba(200, 160, 255, 0.55),
    0 0 0 4px rgba(120, 60, 200, 0.25),
    0 0 25px 4px rgba(140, 70, 255, 0.45),
    0 8px 32px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 230, 255, 0.2) !important;
}

.main-servers__link1.main-servers__card--compact::before,
.main-servers__link1.main-servers__link--active.main-servers__card--compact::before {
  border-radius: 14px !important;
  background: linear-gradient(
    145deg,
    #f0d8ff 0%,
    #c080ff 15%,
    #7a3dff 35%,
    #e0b0ff 55%,
    #9b50ff 75%,
    #4a1a8a 100%
  ) !important;
  opacity: 1 !important;
  z-index: -1 !important;
  /* margen más ancho = borde más grueso */
  inset: 0 !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
}

.main-servers__link1.main-servers__card--compact::after,
.main-servers__link1.main-servers__link--active.main-servers__card--compact::after {
  border-radius: 11px !important;
  margin: 3px !important; /* borde de ~3px de grosor */
  background: linear-gradient(160deg, #1e1235 0%, #32184f 45%, #4a2068 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 255, 0.18),
    inset 0 0 50px rgba(90, 40, 150, 0.4),
    0 0 20px rgba(160, 80, 255, 0.3) !important;
  z-index: -1 !important;
  opacity: 1 !important;
}

.main-servers__link1.main-servers__card--compact:hover::after,
.main-servers__link1.main-servers__link--active.main-servers__card--compact:hover::after {
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 255, 0.25),
    inset 0 0 60px rgba(130, 60, 200, 0.5),
    0 0 35px rgba(180, 100, 255, 0.6) !important;
}

/* Esquinas MUCHO más visibles */
.main-servers__card--compact {
  position: relative !important;
}

.main-servers__card--compact .corner-ornament {
  position: absolute !important;
  width: 22px !important;
  height: 22px !important;
  z-index: 10 !important;
  pointer-events: none !important;
  opacity: 1 !important;
}

.main-servers__card--compact .corner-ornament--tl {
  top: 5px !important; left: 5px !important;
  border-top: 3px solid #e8d0ff !important;
  border-left: 3px solid #e8d0ff !important;
  border-top-left-radius: 3px !important;
  box-shadow: -2px -2px 8px rgba(200, 140, 255, 0.7) !important;
}
.main-servers__card--compact .corner-ornament--tr {
  top: 5px !important; right: 5px !important;
  border-top: 3px solid #e8d0ff !important;
  border-right: 3px solid #e8d0ff !important;
  border-top-right-radius: 3px !important;
  box-shadow: 2px -2px 8px rgba(200, 140, 255, 0.7) !important;
}
.main-servers__card--compact .corner-ornament--bl {
  bottom: 5px !important; left: 5px !important;
  border-bottom: 3px solid #e8d0ff !important;
  border-left: 3px solid #e8d0ff !important;
  border-bottom-left-radius: 3px !important;
  box-shadow: -2px 2px 8px rgba(200, 140, 255, 0.7) !important;
}
.main-servers__card--compact .corner-ornament--br {
  bottom: 5px !important; right: 5px !important;
  border-bottom: 3px solid #e8d0ff !important;
  border-right: 3px solid #e8d0ff !important;
  border-bottom-right-radius: 3px !important;
  box-shadow: 2px 2px 8px rgba(200, 140, 255, 0.7) !important;
}

/* --- TOP panel (rankings) más fantasioso --- */
.main-servers__top--topplayers,
.main-servers__top {
  border-radius: 14px !important;
  position: relative !important;
  overflow: visible !important;
  box-shadow:
    0 0 0 2px rgba(255, 200, 80, 0.6),
    0 0 0 4px rgba(200, 130, 30, 0.3),
    0 0 28px 4px rgba(255, 170, 40, 0.4),
    0 8px 32px rgba(0, 0, 0, 0.55) !important;
}

/* Borde dorado del TOP */
.main-servers__top--topplayers {
  background: linear-gradient(180deg, #2a1a08 0%, #1a1008 100%) !important;
}

.main-servers__top--topplayers::before {
  display: block !important;
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 13px;
  padding: 1.5px;
  background: linear-gradient(
    135deg,
    #ffd78a 0%,
    #c9892a 25%,
    #ffe0a0 50%,
    #a86b18 75%,
    #ffd070 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
  opacity: 0.9;
}

/* --- News cards --- */
.news-card {
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(80, 160, 200, 0.2),
    0 4px 18px rgba(0, 0, 0, 0.4),
    0 0 25px rgba(40, 120, 180, 0.1);
  overflow: visible;
}

.news-card::before {
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    rgba(100, 200, 255, 0.7) 0%,
    rgba(40, 100, 160, 0.35) 40%,
    rgba(80, 180, 230, 0.65) 100%
  ) !important;
}

.news-card::after {
  border-radius: 11px;
  margin: 1.5px;
  box-shadow: inset 0 0 30px rgba(20, 60, 100, 0.3);
}

/* --- Castle Siege widget --- */
.main-servers__item--castle,
.castle-siege-widget,
[class*="castle"] {
  position: relative;
}

.main-servers__item--castle > * {
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(180, 140, 80, 0.25),
    0 4px 20px rgba(0, 0, 0, 0.45),
    0 0 28px rgba(160, 100, 40, 0.12);
}

/* Badge online más fantasioso */
.main-servers__online-badge {
  background: linear-gradient(135deg, rgba(20, 40, 20, 0.7) 0%, rgba(10, 25, 15, 0.85) 100%);
  border: 1px solid rgba(100, 255, 140, 0.35);
  box-shadow:
    0 0 10px rgba(60, 200, 100, 0.25),
    inset 0 1px 0 rgba(150, 255, 180, 0.15);
  border-radius: 16px;
}

.online-badge__value {
  text-shadow: 0 0 8px rgba(100, 255, 140, 0.6);
}

/* Título del servidor con leve glow */
.main-servers__card--compact .main-servers__title {
  text-shadow: 0 0 12px rgba(180, 120, 255, 0.45);
  letter-spacing: 0.5px;
}

/* Barra de progreso más mágica */
.main-servers__card--compact .procentbar-server__progress {
  border: 1px solid rgba(180, 140, 255, 0.35);
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.main-servers__card--compact .procentbar-server__progress .progress {
  background: linear-gradient(90deg, #5cff8a 0%, #2ecc71 50%, #1a9f5c 100%);
  box-shadow: 0 0 8px rgba(60, 220, 120, 0.5);
}


/* Responsive para el badge compacto */
@media screen and (max-width: 1000px) {
  .main-servers__header-row {
    padding: 12px 14px 0 14px;
  }
  .main-servers__card--compact .main-servers__title {
    font-size: 16px;
  }
  .online-badge__label {
    font-size: 9px;
  }
  .online-badge__value {
    font-size: 12px;
  }
  .main-servers__card--compact .main-servers__item-bottom img {
    width: 70px;
    height: 65px;
  }
  .main-servers__card--compact .main-servers__procentbar {
    padding-left: 14px;
    padding-right: 14px;
  }
}

.procentbar-server__progress {
  width: 100%;
  height: 16px;
  border: 1px #fff solid;
  border-radius: 8px;
}
.procentbar-server__progress .progress {
  display: block;
  height: 14px;
  background: linear-gradient(-100deg, #00B812 0%, #0A7F16 100%);
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.progress.progress--full {
  border-radius: 8px;
}
.main-servers__info {
  width: calc(100% - 200px);
  padding-bottom: 20px;
  padding-right: 15px;
}
@media screen and (min-width: 1900px) {
  .main-servers__content.main-servers__only-one .main-servers__title {
    width: 80%;
  }
}
@media screen and (max-width: 1400px) {
  .main-servers__list {
    gap: 15px;
  }
  .main-servers__item {
    width: calc(33.33% - 15px);
  }
  .main-servers__title {
    font-size: 26px;
  }
  .main-servers__content {
    flex-direction: column-reverse;
    gap: 20px;
    margin-bottom: 20px;
  }
  .main-servers__content .main-servers__top {
    width: 100%;
  }
  .main-servers__content .main-servers__list {
    width: 100%;
  }
  .main-servers__content .main-servers__item {
    width: 100%;
  }
    .main-servers__info {
      font-size: 14px;
      width: calc(100% - 200px);
  }
}
@media screen and (max-width: 1000px) {
  .main-servers__top {
    background-position: 10%;
  }
  .main-servers__header {
    font-size: 20px;
    margin-bottom: 10px;
  }
  .main-servers__top-item {
    font-size: 14px;
  }
  .main-servers__list {
    flex-direction: column;
  }
  .main-servers__item {
    width: 100%;
  }
  .main-servers__title {
    padding-left: 200px;
    font-size: 20px;
    padding-top: 20px;
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
  }
  .main-servers__procentbar {
    padding-left: 200px;
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
  }
  .main-servers__online {
    padding-left: 200px;
    position: relative;
    z-index: 2;
    font-size: 14px;
    margin-bottom: 15px;
  }
  .main-servers__info {
    display: flex;
    justify-content: space-between;
    padding: 0;
    padding-bottom: 15px;
    padding-right: 20px;
    width: 100%;
  }
  .main-servers__item-bottom img {
    position: absolute;
    width: auto;
    height: 150px;
    padding-left: 20px;
  }
  .main-servers__item1 .main-servers__item-bottom::before,
  .main-servers__item2 .main-servers__item-bottom::before,
  .main-servers__item3 .main-servers__item-bottom::before {
    bottom: 0;
    right: 40%;
    width: 50%;
    height: 200%;
    filter: blur(50px);
  }
  .main-servers__content.main-servers__only-one {
    display: block;
  }
  .main-servers__content.main-servers__only-one .main-servers__top {
    width: 100%;
    margin-bottom: 20px;
    background-position: 30%;
  }
  .main-servers__content.main-servers__only-one .main-servers__list {
    width: 100%;
  }
}
@media screen and (max-width: 768px) { 
  .main-servers__top {
    padding: 15px 10px;
    background-position: 30%;
    margin-bottom: 15px;
  }
  .main-servers__top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(10, 5, 25, 0.4);
    border-radius: 10px;
    z-index: 1;
    opacity: 1;
  }
  .main-servers__top:hover::before {
    opacity: 1;
  }
  .main-servers__header {
    font-size: 16px;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
  }
  .main-servers__top-list {
    z-index: 1;
    position: relative;
  }
  .main-servers__top-item {
    font-size: 14px;
  }
  .main-servers__content {
    margin-bottom: 30px;
  }
  .main-servers__list {
    gap: 10px;
  }
  .main-servers__title {
    padding-left: 100px;
    font-size: 12px;
    padding-top: 13px;
    padding-right: 15px;
  }
  .main-servers__procentbar {
    padding-left: 100px;
    margin-bottom: 5px;
  }
  .procentbar-server_num {
    font-size: 12px;
  }
  .procentbar-server__progress {
    border-radius: 5px;
  }
  .main-servers__online {
    padding-left: 0;
    font-size: 12px;
    margin-bottom: 5px;
  }
  .main-servers__item-bottom img {
    height: 110px;
    padding-left: 10px;
  }
  .main-servers__info {
    padding-left: 100px;
    font-size: 12px;
    flex-direction: column;
  }
  .main-servers__info br {
    display: none;
  }
  .procentbar-server__progress .progress {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }
  .main-servers__item1 .main-servers__item-bottom::before,
  .main-servers__item2 .main-servers__item-bottom::before,
  .main-servers__item3 .main-servers__item-bottom::before {
    right: 45%;
    width: 40%;
    filter: blur(24px);
  }
}
@media screen and (max-width: 400px) {
  .main-servers__item1 .main-servers__item-bottom::before,
  .main-servers__item2 .main-servers__item-bottom::before,
  .main-servers__item3 .main-servers__item-bottom::before {
    right: 30%;
    width: 50%;
  }
}
.updates {
  background-image: url("../image/backgrounds/updates-bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
.updates::before {
  content: '';
  position: absolute;
  top: 0;
  height: 350px;
  width: 100%;
  background: linear-gradient(to bottom, #181026 0%, rgba(24, 16, 38, 0.57) 70%, rgba(24, 16, 38, 0.45) 79%, rgba(24, 16, 38, 0.31) 88%, rgba(24, 16, 38, 0) 100%);
  pointer-events: none;
}
.updates::after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 137px;
  width: 100%;
  background: linear-gradient(to top, #181026 0%, rgba(24, 16, 38, 0.57) 63%, rgba(24, 16, 38, 0.45) 76%, rgba(24, 16, 38, 0.31) 84%, rgba(24, 16, 38, 0) 95%);
  pointer-events: none;
}
.updates__content {
  padding-top: 45px;
  padding-bottom: 185px;
  position: relative;
}
.updates__title {
  text-align: center;
  margin-bottom: 20px;
}
.updates__title span {
  background: linear-gradient(to right, #F94343 0%, #CC0000 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  display: inline-block;
}
.updates__description {
  text-align: center;
  margin-bottom: 60px;
  line-height: 20px;
}
.updates__list {
  width: fit-content;
  padding: 50px 35px;
  position: relative;
  background-color: rgba(7, 1, 1, 0.6);
  border-radius: 10px;
  border: 1px solid #1F3063;
  mask: linear-gradient(to top, transparent, black 0%);
  backdrop-filter: blur(4px);
}
.updates__item {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 25px;
  padding-bottom: 50px;
}
.updates__item:last-child {
  padding-bottom: 0;
}
.updates__text--header {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
}
.updates__text--description {
  color: #afafaf;
  max-width: 590px;
}
@media screen and (max-width: 1000px) {
  .updates {
    background-position: 90%;
  }
  .updates::before {
    height: 290px;
  }
  .updates__content {
    padding-top: 25px;
    padding-bottom: 140px;
  }
  .updates__title {
    text-align: left;
  }
  .updates__title span {
    padding-top: 12px;
  }
  .updates__description {
    text-align: left;
    margin-bottom: 55px;
  }
  .updates__list {
    width: 100%;
    padding: 30px;
    padding-right: 10px;
    z-index: 1;
  }
  .updates__item {
    padding-bottom: 25px;
    align-items: center;
  }
  .updates__text--header {
    font-size: 14px;
    margin-bottom: 5px;
  }
  .updates__text--description {
    font-size: 14px;
    max-width: 350px;
  }
}
@media screen and (max-width: 768px) {
  .updates {
    background-position: 80%;
  }
  .updates::before {
    height: 140px;
  }
  .updates__content {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .updates__title {
    text-align: center;
    margin-bottom: 10px;
  }
  .updates__title span {
    padding-top: 0;
  }
  .updates__description {
    text-align: center;
    margin-bottom: 20px;
    font-size: 14px;
  }
  .updates__list {
    width: 100%;
    padding: 20px 23px 20px 24px;
  }
  .updates__item {
    padding-bottom: 20px;
    gap: 20px;
  }
  .updates__item img {
    width: 40px;
  }
  .updates__text--header {
    margin-bottom: 2px;
  }
  .updates__text--description {
    max-width: 100%;
  }
}
.attributes {
  background-image: url("../image/backgrounds/attributes-bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
.attributes::before {
  content: '';
  position: absolute;
  top: 0;
  height: 150px;
  width: 100%;
  background: linear-gradient(to bottom, #181026 0%, rgba(24, 16, 38, 0.57) 63%, rgba(24, 16, 38, 0.45) 76%, rgba(24, 16, 38, 0.31) 84%, rgba(24, 16, 38, 0) 95%);
  pointer-events: none;
}
.attributes::after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 150px;
  width: 100%;
  background: linear-gradient(to top, #181026 0%, rgba(24, 16, 38, 0.57) 63%, rgba(24, 16, 38, 0.45) 76%, rgba(24, 16, 38, 0.31) 84%, rgba(24, 16, 38, 0) 95%);
  pointer-events: none;
}
.attributes__content {
  position: relative;
  padding-bottom: 118px;
}
.attributes__title {
  text-align: center;
  margin-bottom: 20px;
}
.attributes__title span {
  background: linear-gradient(to right, #F2B631 0%, #CD701B 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  display: inline-block;
}
.attributes__description {
  text-align: center;
  margin-bottom: 65px;
  line-height: 20px;
}
.attributes__item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 30px;
  padding-bottom: 60px;
}
.attributes__item:last-child {
  padding-bottom: 0;
}
.attributes__item--image {
  width: 153px;
  height: 86px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  position: relative;
  z-index: 1;
}
.attributes__item--image::before,
.attributes__item--image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.attributes__item--image::before {
  background: linear-gradient(to right, rgba(207, 145, 255, 0) 0%, #cf91ff 52%, rgba(207, 145, 255, 0) 100%);
  z-index: -1;
}
.attributes__item--image::after {
  background: linear-gradient(to bottom, #120A2B 0%, #22124E 100%);
  z-index: -1;
  margin: 1px;
}
.attributes__text--header {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
}
.attributes__text--description {
  color: #afafaf;
}
@media screen and (max-width: 1000px) {
  .attributes {
    background-position: 75%;
  }
  .attributes__content {
    padding-top: 25px;
    padding-bottom: 60px;
  }
  .attributes__title {
    text-align: left;
  }
  .attributes__list {
    position: relative;
    z-index: 1;
  }
  .attributes__item {
    gap: 15px;
    padding-bottom: 25px;
  }
  .attributes__item--image {
    width: 110px;
  }
  .attributes__description {
    text-align: left;
    margin-bottom: 30px;
  }
  .attributes__text {
    width: calc(100% - 110px);
  }
  .attributes__text--header {
    font-size: 14px;
    margin-bottom: 5px;
  }
  .attributes__text--description {
    font-size: 14px;
  }
}
@media screen and (max-width: 768px) {
  .attributes {
    background-position: 75%;
  }
  .attributes__content {
    padding-top: 20px;
    padding-bottom: 50px;
  }
  .attributes__title {
    text-align: center;
  }
  .attributes__item {
    gap: 20px;
    padding-bottom: 20px;
  }
  .attributes__item--image {
    width: 55px;
    height: 59px;
  }
  .attributes__image {
    width: 50px;
  }
  .attributes__description {
    text-align: center;
    margin-bottom: 20px;
  }
  .attributes__text {
    width: calc(100% - 55px);
  }
  .attributes__text--header {
    margin-bottom: 2px;
  }
}
.features__content {
  position: relative;
}
.features__title {
  text-align: center;
  margin-bottom: 20px;
  position: absolute;
  top: 0;
  z-index: 3;
  width: calc(100% - 425px);
}
@media screen and (max-width: 1700px) {
  .features__title {
    width: calc(100% - 395px);
  }
}
@media screen and (max-width: 1500px) {
  .features__title {
    width: calc(100% - 315px);
  }
}
@media screen and (max-width: 1300px) {
  .features__title {
    width: calc(100% - 300px);
  }
}
.features__title span {
  background: linear-gradient(to right, #F94343 0%, #CC0000 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  display: inline-block;
}
.features__description {
  margin-top: 20px;
}
.features .slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 1;
}
.features .slider__arrow--left {
  left: 365px;
}
@media screen and (max-width: 1500px) {
  .features .slider__arrow--left {
    left: 285px;
  }
}
@media screen and (max-width: 1300px) {
  .features .slider__arrow--left {
    left: 275px;
  }
}
.features .slider__arrow--right {
  right: 60px;
}
@media screen and (max-width: 1700px) {
  .features .slider__arrow--right {
    right: 30px;
  }
}
@media screen and (max-width: 1300px) {
  .features .slider__arrow--right {
    right: 25px;
  }
}
@media screen and (max-width: 1000px) {
  .features::after {
    height: 500px;
  }
  .features__content {
    padding-top: 25px;
  }
  .features__title {
    text-align: left;
    width: calc(100% - 280px);
    top: 25px;
  }
  .features__description {
    text-align: left;
  }
  .features .slider__arrow {
    top: 40%;
  }
  .features .slider__arrow--left {
    left: 265px;
  }
  .features .slider__arrow--right {
    right: 15px;
  }
}
@media screen and (max-width: 768px) {
  .features::after {
    height: 280px;
  }
  .features__content {
    padding-top: 20px;
  }
  .features__title {
    text-align: center;
    margin-bottom: 10px;
    width: calc(100% - 40px);
    top: 20px;
  }
  .features__description {
    text-align: center;
    font-size: 14px;
  }
  .features .slider__arrow--left {
    left: 10px;
  }
  .features .slider__arrow--right {
    right: 10px;
  }
}
.slider--first {
  background-image: url("../image/backgrounds/slides/slide-1.png");
}
.slider--second {
  background-image: url("../image/backgrounds/slides/slide-2.png");
}
.slider--third {
  background-image: url("../image/backgrounds/slides/slide-3.png");
}
.slider--fourth {
  background-image: url("../image/backgrounds/slides/slide-4.png");
}
.slider__title {
  font-size: 36px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 25px;
}
.slider__list {
  margin-bottom: 40px;
  position: relative;
  z-index: 2;
}
.slider--bg {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 1000px;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50%;
}
.slider--bg::before {
  content: '';
  position: absolute;
  top: 0;
  height: 240px;
  width: 100%;
  background: linear-gradient(to bottom, #181026 0%, rgba(24, 16, 38, 0.57) 63%, rgba(24, 16, 38, 0.4) 76%, rgba(24, 16, 38, 0.2) 84%, rgba(24, 16, 38, 0) 95%);
  pointer-events: none;
}
.slider--bg::after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 450px;
  width: 100%;
  background: linear-gradient(to top, #181026 20%, rgba(24, 16, 38, 0.57) 63%, rgba(24, 16, 38, 0.4) 76%, rgba(24, 16, 38, 0.2) 84%, rgba(24, 16, 38, 0) 95%);
  pointer-events: none;
  z-index: 1;
}
.slider__slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}
.slider__arrow {
  position: absolute;
  bottom: 40%;
}
.slider__arrow--right {
  right: -15px;
}
.slider__arrow--left {
  left: -15px;
}
.slider__text-list {
  padding-left: 20px;
}
.slider__text-item {
  list-style: disc;
  padding-bottom: 10px;
}
.slider__text-item:last-child {
  padding-bottom: 0;
}
.slider__bullets {
  position: relative;
  z-index: 2;
  padding-bottom: 25px;
}
@media screen and (max-width: 1000px) {
  .slider__title {
    font-size: 30px;
    margin-bottom: 20px;
  }
  .slider--bg {
    height: 750px;
    background-position: center;
  }
}
@media screen and (max-width: 768px) {
  .slider__title {
    font-size: 18px;
    margin-bottom: 15px;
    text-align: center;
  }
  .slider__text-item {
    font-size: 14px;
    padding-bottom: 5px;
  }
  .slider__arrow svg {
    width: 7px;
    height: 15px;
  }
  .slider--bg {
    height: 500px;
    background-position: 55%;
  }
  .slider--bg::before {
    height: 170px;
  }
  .slider--bg::after {
    height: 275px;
  }
}
.slick-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  position: absolute;
  top: 0;
  left: calc(50% - 165px);
}
@media screen and (max-width: 1000px) {
  .slider__arrow {
    bottom: 60%;
  }
  .slider__arrow--left {
    left: 0;
  }
  .slider__arrow--right {
    right: 0;
  }
}
@media screen and (max-width: 768px) {
  .slick-dots {
    left: calc(50% - 95px);
  }
}
.slick-dots li {
  width: 16px;
  height: 16px;
  position: relative;
}
.slick-dots li button {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 0;
  padding: 0;
  font-size: 0;
  border: none;
  border-radius: 50%;
  background-color: #2E2A3C;
  cursor: pointer;
}
.slick-dots li.slick-active button {
  background-color: #7518E3;
}
@media screen and (max-width: 768px) {
  .slick-dots {
    gap: 10px;
  }
  .slick-dots li {
    width: 10px;
    height: 10px;
  }
  .slick-dots li button {
    width: 10px;
    height: 10px;
  }
}
.register-now {
  background-image: url("../image/backgrounds/reister-now.png");
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}
.register-now::before {
  content: '';
  position: absolute;
  top: 0;
  height: 250px;
  width: 100%;
  background: linear-gradient(to bottom, #181026 0%, rgba(24, 16, 38, 0.57) 49%, rgba(24, 16, 38, 0.45) 64%, rgba(24, 16, 38, 0.31) 75%, rgba(24, 16, 38, 0.2) 87%, rgba(24, 16, 38, 0) 99%);
  pointer-events: none;
}
.register-now__content {
  position: relative;
  padding-top: 40px;
  padding-bottom: 136px;
}
.register-now__title {
  text-align: center;
  margin-bottom: 100px;
}
.register-now__title span {
  background: linear-gradient(to right, #F2B631 0%, #CD701B 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  display: inline-block;
}
.register-now__blocks {
  display: flex;
  gap: 30px;
}
.register-now__form {
  width: 580px;
}
@media screen and (max-width: 1500px) {
  .register-now__blocks {
    align-items: flex-start;
  }
  .register-now__form {
    width: 50%;
  }
}
@media screen and (max-width: 1000px) {
  .register-now__content {
    padding-top: 25px;
    padding-bottom: 35px;
  }
  .register-now__title {
    text-align: left;
    margin-bottom: 20px;
  }
  .register-now__blocks {
    flex-direction: column;
  }
  .register-now__form {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .register-now__content {
    padding-top: 20px;
    padding-bottom: 30px;
  }
  .register-now__title {
    text-align: center;
  }
  .register-now__blocks {
    gap: 20px;
  }
  .register-now__description {
    font-size: 14px;
    line-height: 20px;
  }
}
.register-form {
  padding: 40px;
  border-radius: 10px;
  position: relative;
  z-index: 1;
}
.register-form::before,
.register-form::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.register-form::before {
  background: linear-gradient(to right, rgba(207, 145, 255, 0) 0%, #cf91ff 52%, rgba(207, 145, 255, 0) 100%);
  z-index: -1;
}
.register-form::after {
  background-color: #191127;
  z-index: -1;
  margin: 2px;
}
.register-form__form {
  display: flex;
  flex-direction: column;
}
.register-form__title {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  line-height: 30px;
  margin-bottom: 60px;
  padding: 0 20px;
}
.register-form__title--button {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  color: #6AD5FC;
}
.register-form__title span {
  color: #F1B331;
}
.register-form__field {
  margin-bottom: 30px;
}
.register-form__input {
  width: 275px;
  height: 47px;
  background-color: #090416;
  border-radius: 5px;
  border: 1px solid #30204A;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 400;
  padding-left: 15px;
}
.register-form__label {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.register-form__submit {
  margin-top: 30px;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  padding: 10px 70px;
  border-radius: 10px;
  align-self: center;
  position: relative;
  z-index: 1;
}
.register-form__submit::before,
.register-form__submit::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.register-form__submit::before {
  background: linear-gradient(to bottom, #9086FF 0%, #003347 100%);
  z-index: -1;
}
.register-form__submit::after {
  background: linear-gradient(67deg, #7A19E9 0%, #31009A 100%);
  z-index: -1;
  margin: 1px;
}
@media screen and (max-width: 1500px) {
  .register-form__input {
    width: 70%;
  }
  .register-form__label {
    width: 100%;
  }
  .register-form__label span {
    width: 30%;
  }
}
@media screen and (max-width: 1000px) {
  .register-form {
    padding: 25px;
  }
  .register-form__title {
    margin-bottom: 30px;
  }
  .register-form__field {
    margin-bottom: 20px;
  }
  .register-form__label {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    font-size: 14px;
  }
  .register-form__input {
    width: 100%;
    height: 40px;
  }
  .register-form__submit {
    margin-top: 40px;
  }
}
@media screen and (max-width: 768px) {
  .register-form {
    padding: 20px 25px;
  }
  .register-form__title {
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 20px;
    text-align: left;
  }
  .register-form__title--button {
    font-size: 14px;
  }
  .register-form__label {
    gap: 8px;
    font-size: 12px;
  }
  .register-form__input {
    height: 30px;
  }
  .register-form__submit {
    margin-top: 25px;
  }
}
.checkbox {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  padding-top: 20px;
}
.checkbox__label {
  line-height: 30px;
  padding-left: 35px;
  position: relative;
  cursor: pointer;
}
.checkbox__label::before {
  content: '';
  display: inline-block;
  position: absolute;
  width: 20px;
  height: 20px;
  top: 4px;
  left: 0;
  border: 2px solid #30204A;
  border-radius: 50%;
  margin-right: 15px;
}
.checkbox__label::after {
  content: '';
  display: inline-block;
  opacity: 0;
  position: absolute;
  width: 10px;
  height: 10px;
  top: 9px;
  left: 5px;
  background-color: #7A19E9;
  border-radius: 50%;
  transition: opacity 0.3s;
}
.checkbox__input:checked + .checkbox__label::after {
  opacity: 1;
}
@media screen and (max-width: 1000px) {
  .checkbox {
    padding-top: 10px;
  }
  .checkbox__label {
    font-size: 14px;
    line-height: normal;
  }
  .checkbox__label::before {
    top: 0;
  }
  .checkbox__label::after {
    top: 5px;
  }
}
@media screen and (max-width: 768px) {
  .checkbox__label {
    font-size: 12px;
  }
}
.server-menu {
  width: 275px;
}
.server-menu__item {
  margin-bottom: 22px;
}
.server-menu__link {
  display: flex;
  gap: 5px;
  align-items: center;
  background: linear-gradient(to left, #3D5290 0%, #1F3063 100%);
  border-radius: 10px;
  padding: 5px 10px;
}
.server-menu__link.active {
  background: #5771BE;
  box-shadow: 0 0 10px 0 #0081BD;
}
.server-menu__image--wrapper {
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.server-menu__text {
  width: calc(100% - 55px);
}
.server-menu__header {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 5px;
}
.server-menu__description {
  font-size: 14px;
  color: #ffffff;
  line-height: 20px;
}
@media screen and (max-width: 1000px) {
  .server-menu {
    width: 100%;
    margin-left: -5px;
  }
  .server-menu__list {
    width: calc(100% + 5px);
    display: flex;
    gap: 10px;
    overflow: scroll;
    padding: 7px 5px;
  }
  .server-menu__item {
    margin-bottom: 0;
  }
  .server-menu__link {
    width: 150px;
    height: 60px;
    padding: 5px;
    justify-content: center;
  }
  .server-menu__image--wrapper {
    width: 30px;
  }
  .server-menu__header {
    font-size: 12px;
  }
  .server-menu__description {
    font-size: 10px;
    line-height: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .server-menu__text {
    width: 100%;
  }
}
.server-info {
  width: calc(100% - 305px);
  margin-bottom: 70px;
}
.server-info__image--wrapper {
  margin-bottom: 40px;
}
.server-info__image--wrapper img {
  border-radius: 10px;
  width: 100%;
  max-height: 400px;
  min-height: 250px;
  object-fit: cover;
}
@media screen and (max-width: 1000px) {
  .server-info {
    width: 100%;
    margin-bottom: 40px;
  }
  .server-info__image--wrapper {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 768px) {
  .server-info {
    margin-bottom: 80px;
  }
  .server-info__image--wrapper {
    margin-bottom: 15px;
  }
  .server-info__image--wrapper img {
    height: 105px;
    object-fit: cover;
  }
}
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}
.basic-information__header {
  font-size: 30px;
  font-weight: 700;
  color: #02B113;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 30px;
}
.basic-information__description--paragraph {
  padding-bottom: 20px;
}
.basic-information__description--block {
  padding-bottom: 12px;
  font-weight: 600;
}
.basic-information__title {
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 12px;
}
.basic-information__title--tip {
  text-align: center;
}
.basic-information--block {
  margin-bottom: 30px;
}
.basic-information--block:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 1000px) {
  .basic-information__header {
    margin-bottom: 20px;
  }
  .basic-information--block {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 768px) {
  .basic-information__content {
    font-size: 14px;
  }
  .basic-information__header {
    font-size: 18px;
    margin-bottom: 15px;
  }
  .basic-information--block {
    margin-bottom: 10px;
    margin-top: 5px;
  }
  .basic-information__description--paragraph {
    padding-bottom: 10px;
  }
  .basic-information__description--block {
    padding-bottom: 8px;
  }
  .basic-information__title {
    font-size: 18px;
  }
  .basic-information__title--tip {
    text-align: left;
  }
}
.tab-links {
  margin-bottom: 20px;
  overflow-x: auto;
}
.tab-links::-webkit-scrollbar {
  width: 100%;
  height: 12px;
  border-radius: 5px;
}
.tab-links::-webkit-scrollbar-track {
  background: #190D3C;
}
.tab-links::-webkit-scrollbar-thumb {
  background: linear-gradient(to left, #3D5290 0%, #1F3063 100%);
  border-radius: 40px;
  border: 3px solid #190D3C;
}
.tab-links__list {
  display: flex;
  gap: 30px;
  width: fit-content;
  position: relative;
}
.tab-links__list::before {
  content: '';
  position: absolute;
  bottom: 0;
  width: calc(100% - 2px);
  left: 2px;
  height: 1px;
  background-color: #391843;
  z-index: 2;
}
.tab-links__item {
  width: 100%;
}
.tab-links__link {
  display: block;
  width: max-content;
  color: #ffffff;
  padding: 20px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.tab-links__link::before,
.tab-links__link::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}
.tab-links__link::before {
  background: linear-gradient(to right, rgba(207, 145, 255, 0) 0%, #cf91ff 52%, rgba(207, 145, 255, 0) 100%);
  z-index: -1;
}
.tab-links__link::after {
  background-color: #191127;
  z-index: -1;
  margin: 1px;
  margin-bottom: 0;
}
.tab-links__link.active {
  font-weight: 700;
  cursor: auto;
}
.tab-links__link.active::after {
  background-color: #391843;
  z-index: -1;
  margin: 1px;
  margin-bottom: 0;
}
@media screen and (max-width: 1000px) {
  .tab-links__list {
    gap: 12px;
    padding: 10px 0;
  }
  .tab-links__link {
    font-size: 12px;
    padding: 10px 15px;
  }
}
@media screen and (max-width: 768px) {
  .tab-links {
    margin-bottom: 10px;
  }
  .tab-links__list {
    padding: 0;
    gap: 5px;
  }
  .tab-links__item {
    width: 100%;
  }
  .tab-links__link {
    padding: 10px 5px;
  }
}
.selection-text--green {
  color: #02B113;
}
.selection-text--yellow {
  color: #F2B631;
}
.selection-text--red {
  color: #F54141;
}
.selection-text--violet {
  color: #CF91FF;
}
.selection-text--light-blue {
  color: #65C6FF;
}
.selection-text--bold {
  font-weight: 700;
}
.selection-text--semi-bold {
  font-weight: 600;
}
.reset-system__header {
  font-size: 30px;
  font-weight: 700;
  color: #02B113;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 30px;
}
.reset-system__title {
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 12px;
}
.reset-system__title--green {
  color: #02B113;
  margin-bottom: 20px;
}
.reset-system__title--yellow {
  color: #F2B631;
  margin-bottom: 12px;
}
.reset-system__description {
  padding-bottom: 20px;
}
.reset-system__list {
  padding-left: 20px;
  margin-bottom: 32px;
  font-weight: 500;
}
.reset-system__list--style {
  font-weight: 400;
}
.reset-system__item {
  list-style: decimal;
}
@media screen and (max-width: 1000px) {
  .reset-system__header {
    margin-bottom: 20px;
  }
  .reset-system__title {
    margin-top: 0;
  }
  .reset-system__list {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 768px) {
  .reset-system__content {
    font-size: 14px;
  }
  .reset-system__header {
    font-size: 18px;
    margin-bottom: 15px;
  }
  .reset-system__title {
    font-size: 18px;
    margin-bottom: 10px;
  }
  .reset-system__list {
    margin-bottom: 20px;
  }
  .reset-system__description {
    padding-bottom: 10px;
  }
}
.mu-helper__header {
  font-size: 30px;
  font-weight: 700;
  color: #02B113;
  margin-bottom: 20px;
}
.mu-helper__description {
  padding-bottom: 32px;
}
.mu-helper__description--text {
  padding-bottom: 15px;
}
.mu-helper__description--text:last-child {
  padding: 0;
}
.mu-helper__description-list {
  margin-bottom: 15px;
  counter-reset: item;
}
.mu-helper__description-item {
  display: block;
}
.mu-helper__description-item::before {
  content: counters(item, ".") " ";
  counter-increment: item;
}
.mu-helper__description-sublist {
  counter-reset: item;
}
.mu-helper__description-subitem {
  display: block;
}
.mu-helper__description-subitem::before {
  content: counters(item, ".") ". ";
  counter-increment: item;
}
.mu-helper__settings-launch {
  display: flex;
  gap: 275px;
}
.mu-helper__settings-launch--title {
  font-size: 30px;
  font-weight: 600;
  color: #F2B631;
  margin-bottom: 20px;
}
.mu-helper__settings {
  width: 30%;
}
.mu-helper__launch {
  width: 50%;
}
.mu-helper__image--wrapper {
  margin-bottom: 20px;
}
.mu-helper__title {
  font-weight: 600;
  color: #F2B631;
  margin-bottom: 20px;
}
.mu-helper__block {
  display: flex;
  gap: 90px;
  margin-bottom: 12px;
}
.mu-helper__block .mu-helper__description {
  width: calc(100% - 366px);
}
.mu-helper .selection-text--yellow {
  font-weight: 700;
}
@media screen and (max-width: 1500px) {
  .mu-helper__settings-launch {
    gap: 70px;
  }
  .mu-helper__settings {
    width: 50%;
  }
  .mu-helper__block {
    gap: 40px;
  }
}
@media screen and (max-width: 1000px) {
  .mu-helper__settings {
    width: 100%;
  }
  .mu-helper__launch {
    width: 100%;
  }
  .mu-helper__settings-launch {
    flex-direction: column;
    gap: 0;
  }
  .mu-helper__description {
    padding-bottom: 20px;
  }
  .mu-helper__description-item {
    padding-bottom: 15px;
  }
  .mu-helper__description-item:last-child {
    padding: 0;
  }
  .mu-helper__block {
    flex-direction: column;
    gap: 0;
  }
  .mu-helper__block .mu-helper__description {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .mu-helper__content {
    font-size: 14px;
  }
  .mu-helper__header {
    font-size: 18px;
    margin-bottom: 15px;
  }
  .mu-helper__description {
    padding-bottom: 15px;
  }
  .mu-helper__description-item {
    padding-bottom: 0;
    line-height: 20px;
  }
  .mu-helper__settings-launch--title {
    font-size: 18px;
    margin-bottom: 10px;
  }
  .mu-helper__image--wrapper {
    margin-bottom: 10px;
  }
  .mu-helper__block {
    margin-bottom: 0;
  }
  .mu-helper__title {
    font-size: 18px;
  }
}
.bosses__list {
  display: flex;
  flex-wrap: wrap;
}
.bosses__item {
  width: calc(25% - 23px);
  margin-right: 30px;
  margin-bottom: 30px;
}
.bosses__item:nth-child(4n) {
  margin-right: 0;
}
@media screen and (max-width: 1500px) {
  .bosses__item {
    width: calc(33.33% - 20px);
    margin-right: 30px;
    margin-bottom: 30px;
  }
  .bosses__item:nth-child(3n) {
    margin-right: 0;
  }
  .bosses__item:nth-child(4n) {
    margin-right: 30px;
  }
}
@media screen and (max-width: 1300px) {
  .bosses__item {
    width: calc(50% - 15px);
    margin-right: 30px;
    margin-bottom: 30px;
  }
  .bosses__item:nth-child(even) {
    margin-right: 0;
  }
  .bosses__item:nth-child(odd) {
    margin-right: 30px;
  }
}
@media screen and (max-width: 1000px) {
  .bosses__list {
    margin-bottom: 15px;
  }
  .bosses__item {
    width: calc(50% - 8px);
    margin-right: 15px;
    margin-bottom: 15px;
  }
  .bosses__item:nth-child(odd) {
    margin-right: 15px;
  }
  .bosses__item:nth-child(2n + 2) {
    margin-right: 0;
  }
}
@media screen and (max-width: 768px) {
  .bosses__item {
    width: 100%;
    flex: auto;
    margin-right: 0;
    margin-bottom: 20px;
  }
  .bosses__item:nth-child(odd) {
    margin-right: 0;
  }
}
.product-card {
  border-radius: 10px;
  position: relative;
  z-index: 1;
}
.product-card::before,
.product-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.product-card::before {
  background: linear-gradient(to left, #3D5290 0%, #1F3063 100%);
  z-index: -1;
}
.product-card::after {
  background-color: #0C061E;
  z-index: -1;
  margin: 1px;
}
.product-card--character-types {
  width: 160px;
}
.product-card__header {
  display: flex;
  flex-direction: column;
  padding: 10px;
  text-align: center;
  font-weight: 600;
  font-size: 18px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  position: relative;
  z-index: 1;
}
.product-card__header::before,
.product-card__header::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}
.product-card__header::before {
  background: linear-gradient(to left, #3D5290 0%, #1F3063 100%);
  z-index: -1;
}
.product-card__header::after {
  background: linear-gradient(to right, #0C061E 0%, #20104F 78%, #351A84 100%);
  z-index: -1;
  margin: 1px;
}
.product-card__header--golden-monsters {
  padding: 22px 0;
}
.product-card__header--golden-monsters::after {
  background: linear-gradient(76deg, #F2B631 0%, #CC6D1A 100%);
}
.product-card__header--elite-monsters {
  padding: 22px 0;
  border: 2px solid #9A1818;
}
.product-card__header--elite-monsters::after {
  background: linear-gradient(76deg, #F13F3F 0%, #9A1818 100%);
  margin: -1px;
}
.product-card__header--mounts {
  padding: 22px 0;
}
.product-card__header--character-types {
  height: 67px;
  padding: 10px;
  justify-content: center;
}
.product-card__wrapper {
  padding: 20px 12px 25px 12px;
  font-size: 14px;
}
.product-card__wrapper--character-types {
  padding: 20px 0;
}
.product-card__wrapper--character-types .product-card__image-wrapper {
  margin-bottom: 0;
}
.product-card__image-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 25px;
}
.product-card__info {
  margin-bottom: 20px;
}
.product-card__info--description {
  margin-bottom: 5px;
  font-weight: 500;
}
.product-card__info--description .selection-text--yellow {
  font-weight: 600;
}
.product-card__info--mounts {
  text-align: center;
  margin-bottom: 0;
}
.product-card__info--mounts .product-card__info--description {
  font-weight: 400;
}
.product-card__description {
  margin-bottom: 20px;
  font-weight: 500;
}
.product-card__description:last-child {
  margin-bottom: 0;
}
.product-card__description .selection-text--green {
  font-weight: 600;
}
.product-card__description--mounts {
  text-align: center;
  font-weight: 400;
}
.product-card__description--mounts .selection-text--yellow {
  font-weight: 600;
}
@media screen and (max-width: 1920px) {
  .product-card--character-types {
    width: 130px;
    margin: 0 auto;
  }
}
@media screen and (max-width: 1000px) {
  .product-card__wrapper {
    padding: 20px 10px;
  }
  .product-card__image-wrapper {
    margin-bottom: 20px;
  }
  .product-card__header--character-types {
    font-size: 16px;
  }
  .product-card--character-types {
    width: 110px;
  }
}
@media screen and (max-width: 768px) {
  .product-card--character-types {
    width: 130px;
  }
}
@media screen and (max-width: 400px) {
  .product-card--character-types {
    width: 110px;
  }
}
.pagination__list {
  display: flex;
  justify-content: center;
  align-items: center;
}
.pagination__item--dots {
  width: 14px;
  height: 14px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.pagination__arrow {
  background-color: #090516;
  width: 32px;
  height: 32px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pagination__arrow-left {
  margin-right: 10px;
}
.pagination__arrow-right {
  margin-left: 10px;
}
.pagination__link {
  font-size: 14px;
  color: #afafaf;
}
.pagination__link.active {
  font-weight: 600;
  color: #ffffff;
}
.pagination__dots {
  display: block;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background-color: #ffffff;
  position: relative;
}
.pagination__dots::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background-color: #ffffff;
  bottom: 0;
  left: -4px;
}
.pagination__dots::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background-color: #ffffff;
  bottom: 0;
  left: 4px;
}
.golden-monsters__list {
  display: flex;
  flex-wrap: wrap;
}
.golden-monsters__item {
  width: calc(25% - 23px);
  margin-right: 30px;
  margin-bottom: 30px;
}
.golden-monsters__item:nth-child(4n) {
  margin-right: 0;
}
@media screen and (max-width: 1500px) {
  .golden-monsters__item {
    width: calc(33.33% - 20px);
    margin-right: 30px;
    margin-bottom: 30px;
  }
  .golden-monsters__item:nth-child(3n) {
    margin-right: 0;
  }
  .golden-monsters__item:nth-child(4n) {
    margin-right: 30px;
  }
}
@media screen and (max-width: 1300px) {
  .golden-monsters__item {
    width: calc(50% - 15px);
    margin-right: 30px;
    margin-bottom: 30px;
  }
  .golden-monsters__item:nth-child(even) {
    margin-right: 0;
  }
  .golden-monsters__item:nth-child(odd) {
    margin-right: 30px;
  }
}
@media screen and (max-width: 1000px) {
  .golden-monsters__list {
    margin-bottom: 15px;
  }
  .golden-monsters__item {
    width: calc(50% - 8px);
    margin-right: 15px;
    margin-bottom: 15px;
  }
  .golden-monsters__item:nth-child(odd) {
    margin-right: 15px;
  }
  .golden-monsters__item:nth-child(2n + 2) {
    margin-right: 0;
  }
}
@media screen and (max-width: 768px) {
  .golden-monsters__item {
    width: 100%;
    flex: auto;
    margin-right: 0;
    margin-bottom: 20px;
  }
  .golden-monsters__item:nth-child(odd) {
    margin-right: 0;
  }
}
.elite-monsters__list {
  display: flex;
  flex-wrap: wrap;
}
.elite-monsters__item {
  width: calc(25% - 23px);
  margin-right: 30px;
  margin-bottom: 30px;
}
.elite-monsters__item:nth-child(4n) {
  margin-right: 0;
}
@media screen and (max-width: 1500px) {
  .elite-monsters__item {
    width: calc(33.33% - 20px);
    margin-right: 30px;
    margin-bottom: 30px;
  }
  .elite-monsters__item:nth-child(3n) {
    margin-right: 0;
  }
  .elite-monsters__item:nth-child(4n) {
    margin-right: 30px;
  }
}
@media screen and (max-width: 1300px) {
  .elite-monsters__item {
    width: calc(50% - 15px);
    margin-right: 30px;
    margin-bottom: 30px;
  }
  .elite-monsters__item:nth-child(even) {
    margin-right: 0;
  }
  .elite-monsters__item:nth-child(odd) {
    margin-right: 30px;
  }
}
@media screen and (max-width: 1000px) {
  .elite-monsters__list {
    margin-bottom: 15px;
  }
  .elite-monsters__item {
    width: calc(50% - 8px);
    margin-right: 15px;
    margin-bottom: 15px;
  }
  .elite-monsters__item:nth-child(odd) {
    margin-right: 15px;
  }
  .elite-monsters__item:nth-child(2n + 2) {
    margin-right: 0;
  }
}
@media screen and (max-width: 768px) {
  .elite-monsters__item {
    width: 100%;
    flex: auto;
    margin-right: 0;
    margin-bottom: 20px;
  }
  .elite-monsters__item:nth-child(odd) {
    margin-right: 0;
  }
}
.item-stats__header {
  margin-bottom: 20px;
}
.item-stats--header {
  font-size: 18px;
  font-weight: 700;
  color: #F2B631;
  margin-bottom: 10px;
}
.item-stats__content {
  padding: 28px;
  text-align: center;
  border-radius: 10px;
  position: relative;
  z-index: 1;
}
.item-stats__content::before,
.item-stats__content::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.item-stats__content::before {
  background: linear-gradient(to left, #3D5290 0%, #1F3063 100%);
  z-index: -1;
}
.item-stats__content::after {
  background-color: #0C061E;
  z-index: -1;
  margin: 1px;
}
.item-stats__content--padding {
  padding-bottom: 35px;
}
.item-stats__rate {
  margin-bottom: 20px;
}
.item-stats__description {
  padding-bottom: 8px;
  line-height: 24px;
}
.item-stats__description:last-child {
  padding: 0;
}
.item-stats__description--style {
  padding-bottom: 22px;
  text-align: left;
}
.item-stats__description--style2 {
  padding-bottom: 16px;
}
.item-stats__description--padding {
  padding-bottom: 10px;
}
.item-stats__block {
  padding-bottom: 20px;
}
.item-stats__block:last-child {
  padding-bottom: 0;
}
@media screen and (max-width: 1000px) {
  .item-stats__header {
    margin-bottom: 15px;
  }
  .item-stats__header-description {
    font-size: 14px;
  }
  .item-stats--header {
    font-size: 14px;
  }
  .item-stats__content {
    font-size: 14px;
  }
  .item-stats__block:first-child {
    padding: 0;
  }
}
@media screen and (max-width: 768px) {
  .item-stats__header {
    margin-top: 10px;
  }
}
.mounts__list {
  display: flex;
  flex-wrap: wrap;
}
.mounts__item {
  width: calc(25% - 23px);
  margin-right: 30px;
  margin-bottom: 30px;
}
.mounts__item:nth-child(4n) {
  margin-right: 0;
}
@media screen and (max-width: 1500px) {
  .mounts__item {
    width: calc(33.33% - 20px);
    margin-right: 30px;
    margin-bottom: 30px;
  }
  .mounts__item:nth-child(3n) {
    margin-right: 0;
  }
  .mounts__item:nth-child(4n) {
    margin-right: 30px;
  }
}
@media screen and (max-width: 1300px) {
  .mounts__item {
    width: calc(50% - 15px);
    margin-right: 30px;
    margin-bottom: 30px;
  }
  .mounts__item:nth-child(even) {
    margin-right: 0;
  }
  .mounts__item:nth-child(odd) {
    margin-right: 30px;
  }
}
@media screen and (max-width: 1000px) {
  .mounts__list {
    margin-bottom: 15px;
  }
  .mounts__item {
    width: calc(50% - 8px);
    margin-right: 15px;
    margin-bottom: 15px;
  }
  .mounts__item:nth-child(odd) {
    margin-right: 15px;
  }
  .mounts__item:nth-child(2n + 2) {
    margin-right: 0;
  }
}
@media screen and (max-width: 768px) {
  .mounts__item {
    width: 100%;
    flex: auto;
    margin-right: 0;
    margin-bottom: 20px;
  }
  .mounts__item:nth-child(odd) {
    margin-right: 0;
  }
}
.character-types {
  margin-bottom: 30px;
}
.character-types__list {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}
@media screen and (max-width: 1750px) {
  .character-types .slider__arrow {
    position: absolute;
    top: 40%;
  }
  .character-types .slider__arrow--right {
    right: 10px;
  }
  .character-types .slider__arrow--left {
    left: -10px;
  }
}
@media screen and (max-width: 1000px) {
  .character-types .slider__arrow svg {
    width: 7px;
    height: 15px;
  }
  .character-types .slider__arrow--right {
    right: 10px;
  }
  .character-types .slider__arrow--left {
    left: 0;
  }
}
.socket-weapons__title {
  font-size: 18px;
  font-weight: 700;
  color: #6BD5FC;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 20px;
}
.socket-weapons__list {
  display: flex;
  flex-wrap: wrap;
}
.socket-weapons__item {
  flex: 1 0 calc(50% - 30px);
  margin-right: 30px;
  margin-bottom: 30px;
}
.socket-weapons__item:nth-child(2n) {
  margin-right: 0;
}
@media screen and (max-width: 1000px) {
  .socket-weapons__list {
    margin-bottom: 10px;
  }
  .socket-weapons__item {
    flex: 1 0 calc(50% - 15px);
    margin-right: 15px;
    margin-bottom: 15px;
  }
}
@media screen and (max-width: 768px) {
  .socket-weapons__content {
    padding-top: 5px;
  }
  .socket-weapons__list {
    margin-bottom: 0;
  }
  .socket-weapons__item {
    flex: auto;
    width: 100%;
    margin-right: 0;
    margin-bottom: 15px;
  }
}
.archangel-weapon__title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
}
.archangel-weapon__description {
  margin-bottom: 20px;
}
.archangel-weapon__item {
  display: flex;
  align-items: flex-end;
  margin-bottom: 30px;
}
.archangel-weapon__item:nth-child(2n) {
  margin-right: 0;
}
.archangel-weapon__item-stats {
  flex: 1 0 calc(50% - 30px);
  margin-right: 30px;
}
.archangel-weapon__image-wrapper {
  height: 290px;
}
.archangel-weapon__image-wrapper img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}
@media screen and (max-width: 1000px) {
  .archangel-weapon__content .item-stats--header {
    text-align: center;
    font-size: 18px;
    padding-bottom: 5px;
  }
  .archangel-weapon__item {
    display: flex;
    align-items: flex-end;
    margin-bottom: 25px;
    height: 285px;
  }
  .archangel-weapon__item:nth-child(2n) {
    margin-right: 0;
  }
  .archangel-weapon__item-stats {
    flex: 1 0 calc(50% - 15px);
    margin-right: 15px;
  }
  .archangel-weapon__image-wrapper {
    display: flex;
    height: 100%;
  }
  .archangel-weapon__image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
  }
}
@media screen and (max-width: 768px) {
  .archangel-weapon__content {
    padding-top: 5px;
    font-size: 14px;
  }
  .archangel-weapon__content .item-stats--header {
    margin: 0;
    padding-bottom: 0;
  }
  .archangel-weapon__title {
    margin-bottom: 15px;
  }
  .archangel-weapon__description {
    margin-bottom: 10px;
  }
  .archangel-weapon__item {
    gap: 15px;
    flex-direction: column;
    align-items: center;
    height: auto;
    margin-bottom: 15px;
  }
  .archangel-weapon__item-stats {
    flex: auto;
    width: 100%;
    margin-right: 0;
  }
}
.wings__title {
  font-size: 18px;
  font-weight: 700;
  color: #6BD5FC;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 20px;
}
.wings__list {
  display: flex;
  flex-wrap: wrap;
}
.wings__item {
  flex: 1 0 calc(50% - 30px);
  margin-right: 30px;
  margin-bottom: 30px;
}
.wings__item:nth-child(2n) {
  margin-right: 0;
}
.wings__item--33 {
  flex: 1 0 calc(33.33% - 18px);
  margin-right: 18px;
}
.wings__item--33:last-child {
  margin-right: 0;
}
.wings__item--33:nth-child(2n) {
  margin-right: 18px;
}
.wings__item--33 .item-stats__content {
  height: 250px;
}
@media screen and (max-width: 1700px) {
  .wings__item--33 .item-stats__content {
    height: 275px;
  }
}
@media screen and (max-width: 1350px) {
  .wings__item--33 .item-stats__content {
    height: 90%;
  }
}
.wings__attention {
  background-color: #981717;
  border-radius: 5px;
  padding: 14px 0;
  text-align: center;
  margin-bottom: 20px;
}
.wings__description {
  margin-bottom: 20px;
}
@media screen and (max-width: 1000px) {
  .wings__attention {
    padding: 8px 50px;
    margin-bottom: 15px;
  }
  .wings__attention--text {
    font-size: 14px;
    line-height: 22px;
  }
  .wings__description {
    padding-bottom: 10px;
    margin: 0;
  }
  .wings__list {
    margin-top: 15px;
  }
  .wings__list--craft .item-stats__content {
    height: 372px;
  }
  .wings__item {
    flex: 1 0 calc(50% - 15px);
    margin-right: 15px;
    margin-bottom: 15px;
  }
  .wings__item--33 {
    flex: 1 0 calc(50% - 15px);
    margin-right: 15px;
  }
  .wings__item--33:nth-child(2n) {
    margin-right: 0px;
  }
}
@media screen and (max-width: 768px) {
  .wings__content {
    font-size: 14px;
  }
  .wings__attention {
    padding: 6px 12px;
  }
  .wings__attention--text {
    line-height: 20px;
  }
  .wings__item {
    flex: auto;
    width: 100%;
    margin-right: 0;
  }
  .wings__item--33 {
    flex: auto;
    width: 100%;
    margin-right: 0;
  }
  .wings__item--33:nth-child(2n) {
    margin-right: 0px;
  }
}
.boxes__list {
  display: flex;
  flex-wrap: wrap;
}
.boxes__item {
  padding: 20px;
  width: calc(25% - 23px);
  margin-right: 30px;
  margin-bottom: 30px;
  border-radius: 10px;
  background-color: #090516;
}
.boxes__item:nth-child(4n) {
  margin-right: 0;
}
.boxes__item--wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.boxes__title {
  font-size: 18px;
  font-weight: 700;
  color: #F2B631;
}
.boxes__header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 18px;
}
.boxes__block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.boxes__icons {
  display: flex;
  align-items: center;
}
.boxes__description {
  margin-bottom: 8px;
}
.boxes__description:last-child {
  margin-bottom: 0;
}
.boxes__description--margin {
  margin-bottom: 35px;
}
.boxes__description--margin2 {
  margin-bottom: 72px;
}
@media screen and (max-width: 1500px) {
  .boxes__item {
    width: calc(33.33% - 20px);
    margin-right: 30px;
    margin-bottom: 30px;
  }
  .boxes__item:nth-child(3n) {
    margin-right: 0;
  }
  .boxes__item:nth-child(4n) {
    margin-right: 30px;
  }
}
@media screen and (max-width: 1300px) {
  .boxes__item {
    width: calc(50% - 15px);
    margin-right: 30px;
    margin-bottom: 30px;
  }
  .boxes__item:nth-child(even) {
    margin-right: 0;
  }
  .boxes__item:nth-child(odd) {
    margin-right: 30px;
  }
}
@media screen and (max-width: 1000px) {
  .boxes__list {
    font-size: 14px;
  }
  .boxes__item {
    padding: 20px 12px;
    width: calc(50% - 8px);
    margin-right: 15px;
    margin-bottom: 15px;
  }
  .boxes__item:nth-child(odd) {
    margin-right: 15px;
  }
  .boxes__item:nth-child(2n + 2) {
    margin-right: 0;
  }
  .boxes__header {
    margin-bottom: 12px;
  }
  .boxes__title {
    font-size: 14px;
  }
  .boxes__description--margin2 {
    margin-bottom: 5px;
  }
}
@media screen and (max-width: 768px) {
  .boxes__item {
    padding: 15px 12px;
    width: 100%;
    flex: auto;
    margin-right: 0;
    margin-bottom: 20px;
  }
  .boxes__item:nth-child(odd) {
    margin-right: 0;
  }
  .boxes__description--margin {
    margin-bottom: 0;
  }
  .boxes__description--margin2 {
    margin-bottom: 0;
  }
}
.excellent-option__description {
  padding-bottom: 20px;
}
.excellent-option__description--last {
  padding-bottom: 30px;
}
.excellent-option__list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.excellent-option__item {
  width: calc(33.33% - 50px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.excellent-option__title {
  font-size: 18px;
  font-weight: 700;
  color: #F2B631;
  text-align: center;
  margin-bottom: 20px;
}
.excellent-option__image-wrapper {
  margin-bottom: 20px;
}
.excellent-option__stat {
  line-height: 24px;
}
@media screen and (max-width: 1900px) {
  .excellent-option__item {
    width: calc(50% - 25px);
  }
  .excellent-option__item:first-child {
    margin-bottom: 25px;
  }
}
@media screen and (max-width: 1400px) {
  .excellent-option__stat {
    font-size: 14px;
    line-height: 20px;
  }
  .excellent-option__item {
    width: calc(50% - 15px);
  }
  .excellent-option__item:first-child {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 1000px) {
  .excellent-option__description--last {
    font-size: 14px;
    line-height: 24px;
  }
  .excellent-option__item {
    width: calc(50% - 15px);
    margin-right: 15px;
    margin-bottom: 15px;
  }
  .excellent-option__title {
    font-size: 14px;
    margin-bottom: 15px;
  }
  .excellent-option__image-wrapper {
    margin-bottom: 15px;
  }
  .excellent-option__stat {
    font-size: 12px;
  }
}
@media screen and (max-width: 768px) {
  .excellent-option__content {
    padding-top: 5px;
    font-size: 14px;
  }
  .excellent-option__description {
    line-height: 20px;
    padding-bottom: 10px;
  }
  .excellent-option__description--last {
    line-height: 20px;
    padding-bottom: 25px;
  }
  .excellent-option__item {
    width: 100%;
    margin-right: 0;
  }
}
.pvp-option-380__title {
  font-size: 18px;
  font-weight: 700;
  color: #6BD5FC;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 20px;
}
.pvp-option-380__block {
  margin-bottom: 30px;
}
.pvp-option-380__block-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 15px;
}
.pvp-option-380__item {
  padding-bottom: 10px;
  margin-left: 20px;
  list-style: disc;
}
.pvp-option-380__item:last-child {
  padding-bottom: 0;
}
.pvp-option-380__description {
  padding-bottom: 10px;
}
.pvp-option-380__description:last-child {
  padding-bottom: 0;
}
.pvp-option-380__table {
  max-width: 735px;
  width: 100%;
  border: 1px solid #30204A;
}
.pvp-option-380__table-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-bottom: 1px solid #30204A;
}
.pvp-option-380__table-row:last-child {
  border-bottom: none;
}
.pvp-option-380__table-row p {
  padding: 12px 15px;
}
.pvp-option-380__table-row p:first-child {
  width: 40%;
}
.pvp-option-380__table-row p:last-child {
  width: 60%;
}
@media screen and (max-width: 1000px) {
  .pvp-option-380__table {
    font-size: 14px;
  }
  .pvp-option-380__block {
    margin-bottom: 15px;
  }
}
@media screen and (max-width: 768px) {
  .pvp-option-380__content {
    font-size: 14px;
    padding-top: 5px;
  }
  .pvp-option-380__title {
    margin-bottom: 15px;
  }
  .pvp-option-380__block-title {
    font-size: 14px;
  }
  .pvp-option-380__item {
    line-height: 20px;
    padding-bottom: 15px;
  }
  .pvp-option-380__description {
    line-height: 20px;
  }
  .pvp-option-380__table {
    font-size: 12px;
  }
  .pvp-option-380__table-row p {
    padding: 15px 8px;
  }
  .pvp-option-380__table-row p:first-child {
    width: 50%;
  }
  .pvp-option-380__table-row p:last-child {
    width: 50%;
  }
}
.scroll-orbs-parchments__table {
  border: 1px solid #30204A;
}
.scroll-orbs-parchments__table--mobile {
  display: none;
}
.scroll-orbs-parchments__table-head {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid #30204A;
}
.scroll-orbs-parchments__table-head-item {
  width: 25%;
  text-align: center;
  font-weight: 700;
  color: #F2B631;
}
.scroll-orbs-parchments__table-body-row {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 15px 0;
  border-bottom: 1px solid #30204A;
}
.scroll-orbs-parchments__table-body-item {
  width: 25%;
  text-align: center;
}
.scroll-orbs-parchments__table-body-item--empty {
  position: relative;
}
.scroll-orbs-parchments__table-body-item--empty::before {
  content: '';
  position: absolute;
  top: 0;
  left: 38%;
  width: 62px;
  height: 1px;
  background-color: #ffffff;
}
.scroll-orbs-parchments__table-body-cell {
  line-height: 24px;
}
@media screen and (max-width: 1000px) {
  .scroll-orbs-parchments__table {
    display: none;
  }
  .scroll-orbs-parchments__table-block {
    border-top: 1px solid #7239F1;
    border-bottom: 1px solid #7239F1;
  }
  .scroll-orbs-parchments__table--mobile {
    display: block;
    font-size: 14px;
  }
  .scroll-orbs-parchments__table--mobile .scroll-orbs-parchments__table-body-row {
    padding: 10px;
    align-items: flex-start;
  }
  .scroll-orbs-parchments__table--mobile .scroll-orbs-parchments__table-body-item {
    width: 50%;
    text-align: left;
  }
  .scroll-orbs-parchments__table--mobile .scroll-orbs-parchments__table-body-item--empty::before {
    left: 0;
  }
  .scroll-orbs-parchments__table--mobile .scroll-orbs-parchments__table-body-cell {
    line-height: 20px;
  }
  .scroll-orbs-parchments__table--mobile .scroll-orbs-parchments__table-head {
    padding: 10px;
  }
  .scroll-orbs-parchments__table--mobile .scroll-orbs-parchments__table-head-item {
    width: 50%;
    text-align: left;
    line-height: 20px;
  }
  .scroll-orbs-parchments__table--mobile .scroll-orbs-parchments__table-head-item {
    width: 50%;
  }
  .scroll-orbs-parchments__table--mobile .scroll-orbs-parchments__table-head-cell {
    line-height: 20px;
  }
}
.filters {
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  background-color: #090516;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 25px;
  padding-bottom: 30px;
}
.filters--bot {
  border-radius: 10px;
}
.filters__list {
  display: flex;
  align-items: center;
  gap: 30px;
}
.filters__basic-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.filters__basic-item a {
  display: block;
  padding: 10px 20px;
  background-color: #2E2A3C;
  border-radius: 10px;
  transition: background-color 0.3s ease, border 0.3s ease;
  position: relative;
}
/* .filters__basic-item a:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
  border: 1px solid #49435D;
  z-index: 0;
  margin:  1px;
  opacity: 1;
  transition: opacity 0.2s ease 0.2s;
} */
.filters__basic-item a:hover {
  background-color: #7618E5;
  border: none;
}
.filters__basic-item a.active {
  background-color: #7618E5;
}
.filters__basic-button {
  color: #ffffff;
  font-size: 14px;
  font-weight: 400
}
.filters__basic--ratings {
  margin-bottom: 35px;
}
.filters__extra {
  display: none;
  margin-top: 25px;
}
@media screen and (max-width: 1790px) {
  .filters__extra .filters__list {
    flex-wrap: wrap;
    gap: 25px;
  }
}
@media screen and (max-width: 1618px) {
  .filters__extra .filters__list {
    justify-content: center;
  }
}
.filters__extra.active {
  display: block;
}
.filters__extra-list {
  display: flex;
  border-radius: 10px;
  border: 1px solid #49435D;
  background-color: #2E2A3C;
  margin-right: 30px;
}
.filters__extra-item:last-child .filters__extra-button {
  border-right: none;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.filters__extra-item:first-child .filters__extra-button {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.filters__extra-button {
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  padding: 10px 20px;
  border-right: 1px solid #49435D;
}
.filters__extra-button.active {
  background-color: #7618E5;
}
.filters__buttons {
  margin-left: auto;
}
.filters__rarity.active {
  background-color: #090516;
  font-weight: 600;
}
.filters__rarity--uncom {
  color: #02B113;
}
.filters__rarity--rare {
  color: #EDB8FF;
}
.filters__rarity--legn {
  color: #F2B631;
}
.filters__rarity--epic {
  color: #F54141;
}
.filters__buttons {
  display: flex;
  gap: 20px;
}
.filters__button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.filters__button:hover {
  background: #7618E5;
}
@media screen and (max-width: 1000px) {
  .filters {
    padding: 15px 10px;
    margin-bottom: 20px;
  }
  .filters__list {
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
  }
  .filters__item--search {
    order: -1;
  }
  .filters__item--clothes {
    width: 100%;
    order: 1;
  }
  .filters__item--buttons {
    order: 0;
  }
  .filters__item--extra {
    overflow: scroll;
  }
  .filters__buttons {
    margin: 0;
  }
  .filters__basic-list {
    justify-content: center;
  }
  .filters__basic--ratings {
    margin-bottom: 15px;
  }
  .filters__extra {
    margin-top: 15px;
  }
  .filters__extra-button {
    padding: 10px 12px;
  }
}
@media screen and (max-width: 768px) {
  .filters {
    padding: 20px 10px;
  }
  .filters__list {
    gap: 20px;
  }
  .filters__item--search {
    order: 1;
    width: 100%;
  }
  .filters__item--clothes {
    display: none;
  }
  .filters__item--clothes.active {
    display: block;
  }
  .filters__item--buttons {
    order: -1;
    width: 100%;
    justify-content: center;
  }
  .filters__basic-list {
    overflow: scroll;
    justify-content: flex-start;
  }
  .filters__basic-button span {
    font-size: 12px;
  }
  .filters__extra-list {
    width: max-content;
    margin-right: 0;
  }
  .filters__buttons {
    gap: 10px;
  }
  .filters__basic-item a {
    padding: 10px;
  }
}
.search {
  position: relative;
}
.search__input {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  border: 1px solid #2E2A3C;
  border-radius: 10px;
  background-color: #090516;
  color: #afafaf;
  padding: 12px 15px;
}
.search__input::-webkit-search-cancel-button {
  display: none;
}
.search__submit {
  position: absolute;
  width: 24px;
  height: 24px;
  top: 9px;
  right: 15px;
}
@media screen and (max-width: 1000px) {
  .search {
    width: 180px;
    margin-right: 20px;
  }
  .search__input {
    width: 180px;
  }
}
@media screen and (max-width: 768px) {
  .search {
    width: 100%;
    margin: 0 auto;
  }
  .search__input {
    width: 100%;
  }
}
.ratings {
  margin-bottom: 70px;
}
.ratings .filters__basic:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 1300px) {
  .ratings .filters .filters__basic-list {
    flex-wrap: wrap;
  }
}
.ratings {
  padding-bottom: 100px;
}
.ratings__header {
  font-size: 18px;
  font-weight: 400;
}
.ratings__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.ratings__top-buttons {
  border-radius: 10px;
  border: 1px solid #49435D;
  display: flex;
}
.ratings__button {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  background-color: #2E2A3C;
  padding: 10px 20px;
}
.ratings__button--personal {
  border-right: 1px solid #49435D;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.ratings__button--guild {
  border-left: 1px solid #49435D;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.ratings__button.active {
  background: #7618E5;
  border: none;
}
.ratings__table {
  border: 1px solid #30204A;
}
.ratings__table tbody tr {
  background-color: transparent;
  transition: background-color 0.3s ease;
}
.ratings__table tbody tr:hover {
  background-color: rgba(87, 31, 95, 0.7);
}
.ratings__table-header {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  background-color: #090516;
  border-bottom: 1px solid #30204A;
}
.ratings__table-header-item {
  font-weight: 700;
  width: 20%;
}
.ratings__table-header-item:first-child {
  width: 5%;
}
.ratings__table-header-item:last-child {
  width: 10%;
}
.ratings__table-header-item sup {
  font-size: 12px;
  font-weight: 700;
  color: #F2B631;
  padding-left: 5px;
}
.ratings__table-body-row {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #30204A;
  background-color: transparent;
  transition: background-color 0.3s ease;
}
.ratings__table-body-row:hover {
  background-color: rgba(87, 31, 95, 0.7);
}
.ratings__table-body-item {
  width: 20%;
}
.ratings__table-guild-link {
  color: #ffffff;
}
.ratings__table-body-item:first-child {
  width: 5%;
}
.ratings__table-body-item:last-child {
  width: 10%;
}
.ratings__table-body-item sup {
  font-size: 12px;
  color: #F2B631;
  padding-left: 5px;
}
@media screen and (max-width: 1000px) {
  .ratings-table__wrapp {
    max-width: 100%;
    overflow: auto;
  }
  .ratings__table {
    font-size: 14px;
    display: block;
    width: 1000px;
    overflow: auto;
  }
  .ratings .filters__list {
    justify-content: flex-start;
  }
  .ratings .filters__basic-list {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 15px;
  }
  .ratings .filters__basic-button {
    width: max-content;
  }
  .ratings__table-header {
    padding: 10px;
  }
  .ratings__table-body-row {
    padding: 10px;
  }
}
@media screen and (max-width: 768px) {
  .ratings .filters__list {
    justify-content: center;
  }
  .ratings .filters__basic-list {
    justify-content: center;
  }
}
.rules {
  margin-bottom: 70px;
}
.rules__content {
  margin-bottom: 60px;
}
.rules__header {
  font-size: 18px;
  font-weight: 700;
  color: #6BD5FC;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 30px;
}
.rules__block {
  margin-bottom: 30px;
}
.rules__title {
  font-size: 18px;
  font-weight: 600;
  color: #F2B631;
  margin-bottom: 20px;
}
.rules__item {
  line-height: 24px;
  padding-bottom: 15px;
}
.rules__item:last-child {
  padding-bottom: 0;
}
.rules__item a {
  color: #6BD5FC;
}
.rules__server-rules {
  margin-top: 30px;
}
.rules__privacy-policy {
  margin-top: 30px;
}
.rules__terms {
  margin-top: 30px;
}
.rules__refund-policy {
  margin-top: 30px;
}
.rules__contacts {
  margin: 0 auto;
  padding: 0 60px 0 365px;
}
@media screen and (max-width: 1700px) {
  .rules__contacts {
    padding: 0 30px 0 365px;
  }
}
@media screen and (max-width: 1500px) {
  .rules__contacts {
    padding: 0 30px 0 285px;
  }
}
@media screen and (max-width: 1300px) {
  .rules__contacts {
    padding: 0 25px 0 275px;
  }
}
@media screen and (max-width: 1000px) {
  .rules__header {
    margin-bottom: 20px;
  }
  .rules__title {
    margin-bottom: 15px;
  }
  .rules__contacts {
    padding: 0 15px 0 265px;
  }
  .rules .nav-buttons__list {
    justify-content: flex-start;
  }
}
@media screen and (max-width: 768px) {
  .rules {
    font-size: 14px;
    line-height: 20px;
  }
  .rules__header {
    margin-bottom: 15px;
  }
  .rules__title {
    font-size: 14px;
    margin-bottom: 10px;
  }
  .rules__block {
    margin-bottom: 20px;
  }
  .rules_item {
    padding-bottom: 12px;
  }
  .rules__server-rules {
    margin-top: 75px;
  }
  .rules__privacy-policy {
    margin-top: 75px;
  }
  .rules__terms {
    margin-top: 75px;
  }
  .rules__refund-policy {
    margin-top: 75px;
  }
  .rules__contacts {
    padding: 0;
    margin-top: 63px;
  }
  .rules .nav-buttons {
    top: 48px;
  }
  .rules .nav-buttons__list {
    flex-wrap: nowrap;
  }
}
.nav-buttons {
  margin-bottom: 30px;
}
.nav-buttons__list {
  padding: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  background-color: #090516;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.nav-buttons__link {
  width: max-content;
  display: block;
  padding: 10px 20px;
  background-color: #2E2A3C;
  border-radius: 10px;
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
  position: relative;
}
/* .nav-buttons__link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
  border: 1px solid #49435D;
  z-index: 0;
  margin: 1px;
  opacity: 1;
  transition: opacity 0.2s ease 0.2s;
} */
.nav-buttons__link:hover {
  background-color: #7618E5;
}
.nav-buttons__link.active {
  background-color: #7618E5;
}
@media screen and (max-width: 1500px) {
  .nav-buttons__list {
    flex-wrap: wrap;
    gap: 20px;
  }
}
@media screen and (max-width: 1000px) {
  .nav-buttons {
    margin-bottom: 15px;
    overflow: scroll;
  }
  .nav-buttons__list {
    flex-wrap: nowrap;
    width: 100%;
    padding: 20px 15px;
    gap: 10px;
  }
  .nav-buttons__item {
    padding: 0;
    margin-bottom: 0;
  }
  .nav-buttons__item:last-child {
    margin: 0;
  }
  .nav-buttons__link {
    display: block;
    width: max-content;
    padding: 10px 12px;
  }
}
@media screen and (max-width: 768px) {
  .nav-buttons {
    position: absolute;
    top: 0;
    width: 100%;
  }
  .nav-buttons__list {
    width: 100%;
    padding: 10px;
    flex-wrap: wrap;
  }
  .nav-buttons__item {
    margin-bottom: 0;
  }
  .nav-buttons__item:last-child {
    margin-right: 0;
  }
}
.modal {
  position: fixed;
  z-index: 12;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background: rgba(13, 6, 31, 0.6);
  display: flex;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.modal.active {
  opacity: 1;
  pointer-events: all;
}
.modal__block {
  padding: 40px 100px;
  border-radius: 10px;
  position: relative;
  z-index: 1;
}
.modal__block::before,
.modal__block::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.modal__block::before {
  background: linear-gradient(to right, rgba(207, 145, 255, 0) 0%, #cf91ff 52%, rgba(207, 145, 255, 0) 100%);
  z-index: -1;
}
.modal__block::after {
  background-color: #191127;
  z-index: -1;
  margin: 2px;
}
.modal__header {
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  background: linear-gradient(to right, #F2B631 0%, #CD701B 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  display: inline-block;
  margin: 0 auto;
  margin-bottom: 30px;
}
.modal__title {
  padding: 0;
  margin-bottom: 22px;
}
.modal__form {
  display: flex;
  flex-direction: column;
}
.modal__field {
  margin-bottom: 20px;
}
.modal__field--checkbox {
  padding-top: 15px;
}
.modal__field-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  position: relative;
}
.modal__block .modal__select {
  width: 275px;
  height: 47px;
  padding-left: 15px;
  color: #65C6FF;
  /* border: 1px solid #30204A; */
  border: none;
  border-radius: 5px;
  appearance: none;
  background: #090416 url('/templates/image/icons/select-arrow.svg') no-repeat 95% center; 
  background-size: 8%;
}
.modal__field-input {
  width: 275px;
  height: 47px;
  background-color: #090416;
  border-radius: 5px;
  /* border: 1px solid #30204A; */
  border: none;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 400;
  padding-left: 15px;
}
.modal__captcha {
  text-align: center;
}
.modal__submit {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  padding: 10px 70px;
  border-radius: 10px;
  align-self: center;
  position: relative;
  z-index: 1;
}
.modal__close-button {
  position: absolute;
  width: 24px;
  height: 24px;
  top: 15px;
  right: 15px;
}
@media screen and (max-width: 1000px) {
  .modal {
    align-items: flex-start;
    overflow: scroll;
  }
  .modal__block {
    margin: 85px 15px 80px 265px;
    padding: 25px;
  }
  .modal__header {
    font-size: 18px;
    margin-bottom: 25px;
  }
  .modal__title {
    padding: 0 55px;
  }
  .modal__field-label {
    flex-direction: column;
    align-items: flex-start;
    font-size: 14px;
    gap: 10px;
  }
  .modal__field-input {
    width: 100%;
    height: 40px;
    font-size: 14px;
  }
  .modal__field--checkbox {
    padding-top: 10px;
  }
}
@media screen and (max-width: 768px) {
  .modal__block {
    margin: 65px 20px 80px;
    padding: 40px 15px 20px;
  }
  .modal__title {
    padding: 0;
    margin-bottom: 15px;
  }
  .modal__field-label {
    font-size: 12px;
    gap: 8px;
  }
  .modal__field-input {
    height: 30px;
  }
  .site-nav__item .modal__field-label {
    width: 100%;
  }
  .site-nav__item .modal__field-label form {
    width: 100%;
  } 
}

/* Account Modal Styles - Mesmo estilo do modal de login */
.account-modal__body {
  padding: 0;
}
.account-modal__body .account-page__user-info {
  background: transparent;
  padding: 0;
  margin: 0;
}
.account-modal__body .user-info__menu {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.account-modal__body .user-info__menu-link {
  display: block;
  padding: 12px 15px;
  color: #ffffff;
  text-decoration: none;
  border-radius: 5px;
  background-color: rgba(9, 4, 22, 0.5);
  transition: all 0.3s ease;
  border: 1px solid rgba(207, 145, 255, 0.2);
  font-size: 16px;
  font-weight: 500;
  text-align: center;
}
.account-modal__body .user-info__menu-link:hover {
  background-color: rgba(207, 145, 255, 0.1);
  border-color: rgba(207, 145, 255, 0.4);
  color: #CF91FF;
}
.account-modal__body .accountinner__links {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.register-modal {
  width: 733px;
  display: none;
}
.register-modal.active {
  display: block;
}
.register-modal__form {
  background-color: #191127;
  display: flex;
  flex-direction: column;
}
.register-modal__form__title {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  line-height: 30px;
  margin-bottom: 60px;
  padding: 0 20px;
}
.register-modal__form__title--button {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  color: #6AD5FC;
}
.register-modal__form__title span {
  color: #F1B331;
}
.register-modal__form__field {
  margin-bottom: 30px;
}
.register-modal__form__input {
  width: 275px;
  height: 47px;
  background-color: #090416;
  border-radius: 5px;
  border: 1px solid #30204A;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 400;
  padding-left: 15px;
}
.register-modal__form__label {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.register-modal__form__submit {
  margin-top: 30px;
}
.register-modal__form__submit::before,
.register-modal__form__submit::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.register-modal__form__submit::before {
  background: linear-gradient(to bottom, #9086FF 0%, #003347 100%);
  z-index: -1;
}
.register-modal__form__submit::after {
  background: linear-gradient(67deg, #7A19E9 0%, #31009A 100%);
  z-index: -1;
  margin: 1px;
}
@media screen and (max-width: 1000px) {
  .register-modal {
    width: 100%;
  }
  .register-modal .modal__header {
    display: none;
  }
}
.sign-modal {
  width: 733px;
  opacity: 0;
  position: relative;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.sign-modal.active {
  opacity: 1;
  pointer-events: all;
  transition: opacity 0.3s ease;
}
.sign-modal__form {
  background-color: #191127;
  display: flex;
  flex-direction: column;
}
.sign-modal__submit {
  margin-top: 30px;
  margin-bottom: 20px;
}
.sign-modal__submit::before,
.sign-modal__submit::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.sign-modal__submit::before {
  background: linear-gradient(to bottom, #FFE486 0%, #7D4D06 100%);
  z-index: -1;
  transition: opacity 0.3s ease;
}
.sign-modal__submit:hover:before {
  opacity: 0;
}
.sign-modal__submit::after {
  background: linear-gradient(67deg, #F4BA32 0%, #C66216 100%);
  z-index: -1;
  margin: 1px;
  transition: opacity 0.3s ease;
}
.sign-modal__submit:hover:after {
  opacity: 0.7;
}
.sign-modal__tip {
  text-align: center;
  color: #6BD5FC;
}
.sign-modal__tip-link {
  font-weight: 700;
  color: #6BD5FC;
}
.sign-modal__link-register {
  color: #F4BA32;
  display: block;
  margin-top: 15px;
  text-transform: uppercase;
}
@media screen and (max-width: 1000px) {
  .sign-modal {
    width: 100%;
  }
  .sign-modal__tip {
    position: relative;
    top: 10px;
  }
  .sign-modal__submit {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 768px) {
  .sign-modal .modal__block {
    padding-top: 30px;
  }
  .sign-modal__tip {
    width: 100%;
    font-size: 12px;
    bottom: 108px;
    left: 0;
  }
  .sign-modal__tip-register {
    bottom: 85px;
  }
  .sign-modal__submit {
    margin-bottom: 15px;
    margin-top: 45px;
  }
}
.success-modal {
  width: 733px;
  display: none;
}
.success-modal.active {
  display: block;
}
.success-modal__block {
  padding: 75px 0;
  text-align: center;
}
.success-modal__icon {
  margin-bottom: 40px;
}
.success-modal__description {
  line-height: 24px;
}
@media screen and (max-width: 1000px) {
  .success-modal {
    width: 100%;
  }
  .success-modal__block {
    padding: 50px 0;
  }
  .success-modal__icon {
    margin-bottom: 25px;
  }
  .success-modal__description {
    font-size: 14px;
  }
}
@media screen and (max-width: 768px) {
  .success-modal__block {
    padding: 35px 0;
    margin-top: 80px;
  }
  .success-modal__icon {
    margin-bottom: 10px;
  }
  .success-modal__icon svg {
    width: 50px;
    height: 50px;
  }
  .success-modal__description {
    font-size: 14px;
  }
  .success-modal .modal__header {
    font-size: 14px;
    padding: 0 50px;
    line-height: 20px;
    margin-bottom: 20px;
  }
}
.contacts {
  background-image: url("../image/backgrounds/contacts.png");
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  height: 920px;
}
.contacts::before {
  content: '';
  position: absolute;
  top: 0;
  height: 300px;
  width: 100%;
  background: linear-gradient(to top, rgba(24, 16, 38, 0) 0%, rgba(24, 16, 38, 0.1) 25%, rgba(24, 16, 38, 0.2) 32%, rgba(24, 16, 38, 0.3) 41%, rgba(24, 16, 38, 0.5) 56%, rgba(24, 16, 38, 0.6) 65%, rgba(24, 16, 38, 0.85) 80%, #181026 100%);
  pointer-events: none;
}
.contacts::after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 260px;
  width: 100%;
  background: linear-gradient(to bottom, rgba(24, 16, 38, 0) 0%, rgba(24, 16, 38, 0.1) 11%, rgba(24, 16, 38, 0.2) 20%, rgba(24, 16, 38, 0.3) 31%, rgba(24, 16, 38, 0.5) 38%, rgba(24, 16, 38, 0.6) 44%, rgba(24, 16, 38, 0.85) 55%, #181026 77%);
  pointer-events: none;
}
.contacts__content {
  position: relative;
  z-index: 1;
  padding: 60px 25px;
}
.contacts__header {
  text-align: left;
}
.contacts__item {
  margin-bottom: 12px;
}
@media screen and (max-width: 1700px) {
  .contacts {
    background-position: center;
  }
}
@media screen and (max-width: 1000px) {
  .contacts {
    height: 600px;
    background-position: right;
  }
  .contacts::before {
    height: 290px;
  }
  .contacts::after {
    height: 470px;
  }
  .contacts__content {
    width: 75%;
    padding: 20px;
  }
  .contacts__header {
    margin-bottom: 15px;
  }
  .contacts__item {
    font-size: 14px;
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 768px) {
  .contacts {
    height: 400px;
    background-position: 75%;
  }
  .contacts::before {
    height: 190px;
  }
  .contacts::after {
    height: 330px;
  }
  .contacts__content {
    width: 100%;
  }
  .contacts__item {
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
  }
  .contacts__item:nth-child(2) {
    display: block;
  }
}
.account-page {
  position: relative;
}
.account-page__content {
  display: flex;
  margin-top: 30px;
  position: relative;
  flex-wrap: wrap;
}
/* .account-page--bg {
  background-image: url("/templates/image/backgrounds/account-bgd.webp");
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  width: 100%;
  height: 1080px;
}
.account-page--bg::before {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, 
  rgba(24, 16, 38, 0) 0%,
  rgba(24, 16, 38, 0.1) 14%,
  rgba(24, 16, 38, 0.2) 24%,
  rgba(24, 16, 38, 0.3) 38.5%,
  rgba(24, 16, 38, 0.5) 46.5%,
  rgba(24, 16, 38, 0.6) 64%,
  rgba(24, 16, 38, 0.845574) 75%,
  #181026 90.5%);
  pointer-events: none;
} */
.account-page__account-server {
  width: 100%;
  margin-bottom: 10px;
}
.account-page__content select {
  width: 225px;
  padding: 12px 17px;
  color: #65C6FF;
  border: 1px solid #30204A;
  border-radius: 5px;
  appearance: none;
  background: #2E2A3C url('/templates/image/icons/select-arrow.svg') no-repeat 95% center; 
  background-size: 17px;
}
.account-page__leftbar {
  width: calc(70% - 30px);
  margin-right: 60px;
}
.account-server {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 12px;
  border-radius: 10px;
  position: relative;
  z-index: 1;
}
/* .account-server::before, */
.account-server::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 10px;
}
/* .account-server::before {
  background: linear-gradient(-108deg,
  #534D68 0%,
  #2E2A3C 100%);
  z-index: -1;
} */
.account-server::after {
  background-color: #0D0720;
  z-index: -1;
  margin: 1px;
}
.account-server__item {
  font-size: 18px;
  font-weight: 400;
  color: #ffffff;
}
.account-server__character {
  display: flex;
  align-items: center;
}
.account-server__character form {
  margin-left: 15px;
}
.account-server__switch-server--link {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #ffffff;
  transition: color 0.3s ease;
}
.account-server__switch-server--link:hover {
  color: #65C6FF;
}
.account-page__account-menu {
  margin: 30px 0;
}
.account-menu__list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 25px;
}
.account-menu__item--mobile {
  display: none;
}
.account-menu__item {
  flex-basis: calc(25% - 25px);
}
.account-menu__item--link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  height: 54px;
  padding: 10px;
  background-color: #2E2A3C;
  border-radius: 10px;
  transition: background-color 0.3s ease;
}
.account-menu__item--text {
  color: #ffffff;
  font-size: 14px;
  width: calc(100% - 35px);
}
.account-menu__item--link:hover {
  background-color: #7618E5;
}
.account-menu__item--link svg {
  width: 20px;
}
.account-menu__item--link svg path {
  fill: #65C6FF;
  transition: fill 0.3s ease;
}
.account-menu__item--link:hover svg path {
  fill: #ffffff;
}
.user-panel__item .user-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 30px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  text-transform: uppercase;
  background: linear-gradient(-92deg,
  #534D68 0%,
  #2E2A3C 100%);
}
.user-panel__item.active .user-panel__header {
  border-radius: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
} 
.user-panel__item {
  margin-bottom: 30px;
  background: #150E24;
  border-radius: 10px;
  position: relative;
  z-index: 0;
}
/* .user-panel__item::before, */
.user-panel__item::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 10px;
}
/* .user-panel__item::before {
  background: linear-gradient(-92deg,
  #534D68 0%,
  #2E2A3C 100%);
  z-index: -1;
} */
.user-panel__item::after {
  background: #150E24;
  z-index: -1;
  margin: 1px;
}
.user-panel__pin-content {
  padding: 50px 30px 45px;
}
.user-panel__roll {
  border: none;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  color: #8E85AA;
  background: transparent;
  margin-right: 30px;
  position: relative;
  cursor: pointer;
}
.user-panel__roll::before {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background-color: #8E85AA;
  border-radius: 2px;
  position: absolute;
  right: -30px;
  bottom: 2px;
}
.user-panel__title {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 25px;
  font-size: 30px;
  font-weight: 700;
}
.user-panel__pin-desc {
  display: block;
  padding-bottom: 12px;
}
.user-panel__pin-desc--1 {
  font-weight: 700;
  line-height: 24px;
  color: #02B113;
  text-align: center;
}
.user-panel__pin-desc--3,
.user-panel__pin-desc--4 {
  font-weight: 700;
  line-height: 24px;
  color: #F34040;
}
.user-panel__form-field {
  margin-top: 12px;
  margin-bottom: 30px;
}
.user-panel__form-input {
  width: 255px;
  height: 47px;
  background-color: #090416;
  border-radius: 5px;
  border: 1px solid #30204A;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 400;
  padding-left: 15px;
}
.user-panel__form-random {
  color: #65C6FF;
  margin-left: 15px;
  cursor: pointer;
  transition: color 0.3s ease;
}
.user-panel__form-random:hover {
  color: #ffffff;
}
.user-panel__form-submit {
  font-size: 12px;
  color: #ffffff;
  padding: 10px 30px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.user-panel__form-submit:before,
.user-panel__form-submit:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}    
.user-panel__form-submit::before {
  background: linear-gradient(to right,
  rgba(207, 145, 255, 0%) 0%,
  rgba(207, 145, 255, 100%) 52%,
  rgba(207, 145, 255, 0%) 100%);
  z-index: -1;
  transform: rotateY(0);
  transition: transform 0.2s ease-in;
}      
.user-panel__form-submit::after {
  background: linear-gradient(to bottom,
  #2A1E54 0%,
  #5D43BA 100%);
  z-index: -1;
  margin: 1px;
  opacity: 1;
  transition: opacity 0.2s ease 0.2s;
}
.user-panel__form-submit:hover::before {
  transform: rotateY(90deg);
}
.user-panel__form-submit:hover::after {
  opacity: 0.8;
}
.user-panel__account-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 35px;
  position: relative;
}
.user-panel__account-info::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(-108deg, #534D68 0%, #2E2A3C 100%);
}
.user-panel__account-item {
  font-weight: 700;
}
.user-panel__info-content--wrapper {
  padding: 25px 30px 40px;
}
.user-panel__account-tip {
  padding-bottom: 20px;
}
.user-panel__reg-date {
  display: flex;
  gap: 20px;
  font-weight: 700;
}
.user-panel__points {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 30px;
}
.user-panel__points-item {
  width: calc(33.33% - 25px);
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
  background: linear-gradient(-118deg, #2E2A3C 0%, #231F31 100%);
  border-radius: 10px;
}
.user-panel__points-сount {
  font-size: 30px;
  font-weight: 700;
}
.user-panel__points-name {
  font-size: 12px;
  font-weight: 700;
  padding: 10px 35px;
  text-transform: uppercase;
  position: relative;
  z-index: 0;
}
.user-panel__points-name::after,
.user-panel__points-name::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}    
.user-panel__points-name::before {
  background: linear-gradient(to bottom,
    #9086FF 0%,
    #003347 100%);
  z-index: -1;
}      
.user-panel__points-name::after {
  background: linear-gradient(70deg,
  #7A19E9 0%,
  #31009A 100%);
  z-index: -1;
  margin: 1px;
}
.account-page__rightbar {
  width: calc(30% - 30px);
}
.user-info {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 40px;
}
.account-page__user-info {
  padding: 30px 20px;
  position: relative;
  z-index: 0;
  margin-bottom: 30px;
}
.account-page__user-info::after
/* .account-page__user-info::before */ { 
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}    
/* .account-page__user-info::before {
  background: linear-gradient(12deg,
  #C2BDFF 0%,
  #827AD4 100%);
  z-index: -1;
}       */
.account-page__user-info::after {
  background: #0C061D;
  z-index: -1;
  margin: 1px;
}
.user-info__server {
  width: calc(100% - 132px);
  display: flex;
  flex-direction: column;
  gap: 15px;
  font-size: 14px;
}
.account-page .user-info__server select {
  width: 100%;
}
.user-info__image img {
  border-radius: 10px;
}
.user-info__menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.user-info__menu-link {
  padding: 12px 24px;
  color: #AFAFAF;
  background: transparent;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  z-index: 0;
  transition: color 0.5s ease;
}
.user-info__menu-link::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 10px;
  background: linear-gradient(128deg,
    #008CB8 0%,
    #2BBAE6 47%,
    #0C6178 100%);  
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.user-info__menu-link:hover {
  color: #ffffff;
  transition: color 0.3s ease;
}
.user-info__menu-link:hover::before {
  opacity: 1;
}
.user-info__menu-link.active {
  background: linear-gradient(128deg,
    #008CB8 0%,
    #2BBAE6 47%,
    #0C6178 100%);   
    color: #ffffff; 
    font-weight: 700;
}
.user-info__menu-link svg path {
  fill: #AFAFAF;
  transition: fill 0.5s ease;
}
.user-info__menu-link:hover svg path {
  fill: #ffffff; 
}
.user-info__menu-link.active svg path {
  fill: #ffffff;  
}
.account-page__server-statistics {
  margin-bottom: 30px;
}
.server-statistics {
  margin-bottom: 30px;
  background: #0C061D;
  border-radius: 10px;
  position: relative;
  z-index: 0;
  padding: 1px;
}
.server-statistics::after,
.server-statistics::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}    
.server-statistics::before {
  background: linear-gradient(128deg,
  #008CB8 0%,
  #2BBAE6 47%,
  #0C6178 100%);
  z-index: -1;
}      
.server-statistics::after {
  background: #0C061D url("../img/lightning-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
  margin: 1px;
}
.server-statistics__header {
  display: block;
  padding: 10px;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  text-transform: uppercase;
  background: linear-gradient(67deg,
  #008CB8 0%,
  #0C6178 100%);
}
.server-statistics__list {
  display: none;
}
.server-statistics__list--show {
  display: block;
}
.server-statistics__item {
  padding: 15px 20px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  gap: 25px;
}
.server-statistics__item span {
  text-align: right;
}
.server-statistics__item:last-child::before {
  width: 0;
}
.server-statistics__item::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(-108deg, #534D68 0%, #2E2A3C 100%);
}

/* Class Percent widget (sidebar) - barras coloridas + ícone antes */
.class-percent-widget .class-percent__list {
  padding: 0;
  list-style: none;
  display: block;
}
.class-percent__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 15px 8px 20px;
  font-size: 13px;
  font-weight: 700;
  position: relative;
}
.class-percent__row::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(-108deg, #534D68 0%, #2E2A3C 100%);
}
.class-percent__row:last-child::before {
  width: 0;
}
/* Ícone da classe à esquerda */
.class-percent__ico {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
  border: 1px solid #3d3850;
  border-radius: 4px;
  box-shadow: inset 0 0 4px rgba(0,0,0,.3);
}
/* Faixa de fundo da barra (track) */
.class-percent__track {
  flex: 1;
  min-width: 0;
  height: 28px;
  border-radius: 6px;
  background: rgba(45, 41, 60, 0.8);
  overflow: hidden;
  display: flex;
  align-items: stretch;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.4);
}
/* Barra colorida (largura = percentual) */
.class-percent__bar {
  display: flex;
  align-items: center;
  min-width: 28px;
  height: 100%;
  border-radius: 5px;
  padding-left: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.15);
  transition: width 0.3s ease;
}
.class-percent__bar--dw {
  background: linear-gradient(180deg, #5ba8c9 0%, #3d8fb3 50%, #2a7a9e 100%);
}
.class-percent__bar--dk {
  background: linear-gradient(180deg, #d4725c 0%, #c45a42 50%, #a84a36 100%);
}
.class-percent__bar--elf {
  background: linear-gradient(180deg, #7bc97b 0%, #5fb35f 50%, #4a9a4a 100%);
}
.class-percent__bar--mg {
  background: linear-gradient(180deg, #a78bc4 0%, #8b6fb0 50%, #6e5690 100%);
}
.class-percent__bar--dl {
  background: linear-gradient(180deg, #9a9a9a 0%, #7a7a7a 50%, #5c5c5c 100%);
}
.class-percent__bar--sm {
  background: linear-gradient(180deg, #5eb5a6 0%, #4a9d8f 50%, #3a8276 100%);
}
.class-percent__bar--rf {
  background: linear-gradient(180deg, #e0a050 0%, #c48838 50%, #a06c28 100%);
}
.class-percent__pct {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  font-size: 12px;
  font-weight: 700;
}
/* Label: número laranja/amarelo + nome verde */
.class-percent__label {
  flex-shrink: 0;
  color: #82E0AA;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  min-width: 90px;
  text-align: right;
}
.class-percent__label .class-percent__num {
  color: #F5B041;
  margin-right: 4px;
}

.account-page__switch {
  padding: 18px 23px;
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  align-items: center;
  position: relative;
}
.account-page__switch::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(-108deg, #534D68 0%, #2E2A3C 100%);
}
.account-page__switch-item {
  color: #ffffff;
  padding: 10px 25px;
  font-size: 14px;
  background-color: #2E2A3C;
  border-radius: 10px;
  transition: background-color 0.3s ease;
  width: 30%;
  text-align: center;
}
.account-page__switch-item.account-page__switch-item--active {
  background-color: #7618E5;
}
.account-page__switch-item:hover {
  background-color: #7618E5;
}
.top-players {
  margin-bottom: 30px;
  background: #0C061D;
  border-radius: 10px;
  position: relative;
  z-index: 0;
  padding: 1px;
}
.account-page__top-players {
  margin-bottom: 30px;
}
.top-players {
  position: relative !important;
  border-radius: 14px !important;
  overflow: visible !important;
  box-shadow:
    0 0 0 2px rgba(255, 210, 90, 0.65),
    0 0 0 4px rgba(200, 130, 30, 0.35),
    0 0 30px 5px rgba(255, 170, 40, 0.4),
    0 8px 32px rgba(0, 0, 0, 0.55) !important;
}
.top-players::after,
.top-players::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
}    
.top-players::before {
  background: linear-gradient(145deg,
    #ffe9a8 0%,
    #e0a030 20%,
    #8a5a10 45%,
    #ffd070 70%,
    #c07818 100%);
  z-index: -1;
}      
.top-players::after {
  background: linear-gradient(180deg, #1a1208 0%, #0C061D 40%), url("../img/lightning-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: overlay;
  z-index: -1;
  margin: 2px;
  box-shadow: inset 0 0 40px rgba(80, 40, 0, 0.4);
}
.top-players__header {
  display: block;
  padding: 12px 10px;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  border-top-left-radius: 11px;
  border-top-right-radius: 11px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #F2B631 0%, #ffcc4d 40%, #CD701B 100%);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 0 12px rgba(255, 200, 80, 0.4);
  letter-spacing: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 240, 180, 0.35);
}
.top-players__table {
  display: none;
}
.top-players__table .top-players__table--active {
  display: block;
}
.top-players__table-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 28px;
}
.top-players__table-head-item {
  font-size: 14px;
}
.top-players__table-ava {
  width: 53px;
}
.top-players__table-name {
  margin-right: 45px;
}
.top-players__table-body-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 10px 20px 10px 20px;
  position: relative;
}
.top-players__table-body-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(-108deg, #534D68 0%, #2E2A3C 100%);
}
.top-players__table-body-item {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}
.top-players__table-body-num {
  width: 23px;
  text-align: center;
  margin-right: 20px;
}
.top-players__table-body-num img {
  display: block;
}
.top-players__table-body-ava img {
  width: 46px;
  height: 44px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.top-players__table-body-stats {
  display: flex;
  justify-content: space-between;
  width: 100px;
  margin-left: auto;
  margin-right: 5px;
}
.top-players__table-body-stats .top-players__table-body-item {
  width: 35px;
  text-align: center;
}
.top-players__table-body-name a {
  color: #ffffff;
}
.top-players__table-body-name {
  width: 100px;
  margin-left: 22px;
}
.account-page__ratings {
  margin-bottom: 30px;
}
.account-page__ratings-link {
  display: block;
  background: #0C061D;
  border-radius: 10px;
  position: relative;
  z-index: 0;
  padding: 1px;
}
.account-page__ratings-link::after,
.account-page__ratings-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}    
.account-page__ratings-link::before {
  background: linear-gradient(to bottom,
  #D1FF86 0%,
  #003347 100%);
  z-index: -1;
}      
.account-page__ratings-link::after {
  background: #0C061D url("../img/lightning-bg.png");
  z-index: -1;
  margin: 1px;
}
.account-page__ratings-header {
  display: block;
  padding: 10px;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  color: #ffffff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  text-transform: uppercase;
  background: linear-gradient(67deg,
  #00B812 0%,
  #0A7F16 100%);
}
.account-page__ratings-content {
  padding: 22px 20px 25px;
  text-align: center;
}
.account-page__ratings-text {
  color: #ffffff;
  font-size: 16px;
}
.account-page__ratings-text:hover,
.account-page__ratings-text:focus {
  color: #65C6FF;
}
.account-page__discord {
  margin-bottom: 30px;
}
.account-page__discord iframe {
  width: 100%;
  height: 400px;
}
.account-page__social {
  padding: 20px;
}
.account-page__social-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
.account-page__social-link svg path {
  fill: #ffffff;
  transition: fill 0.3s ease;
}
.account-page__social-link:hover svg path {
  fill: #7618E5;
}
@media screen and (max-width: 1700px) {
  .account-page__leftbar {
    width: calc(70% - 15px);
    margin-right: 30px;
  }
  .account-page__rightbar {
    width: calc(30% - 15px);
  }
  .user-info__menu-link {
    padding: 12px 14px;
    font-size: 16px;
  }
  .account-page__switch-item {
    padding: 10px 20px;
  }
  .top-players__table-body-ava img {
    width: 28px;
    height: 30px;
  }
  .top-players__table-ava {
    width: 35px;
  }
  .top-players__table-name {
    margin-right: 40px;
  }
}
@media screen and (max-width: 1500px) {
  /* .account-page--bg {
    background-position: center;
  } */
  .account-menu__item {
    flex-basis: calc(33.33% - 40px);
  }
  .user-info {
    gap: 20px;
  }
  .user-info__image img {
    width: 70px;
  }
  .user-info__server {
    width: calc(100% - 90px);
  }
  .user-info__menu-link {
    padding: 10px 12px;
    font-size: 14px;
    gap: 12px;
  }
  .server-statistics__header {
    font-size: 24px;
  }
  .account-page__switch-item {
    padding: 10px 14px;
  }
  .top-players__header {
    font-size: 24px;
  }
  .top-players__table-head {
    padding: 8px 18px;
  }
  .top-players__table-body-row {
    padding: 10px 18px;
  }
  .top-players__table-body-item {
    font-size: 14px;
  }
  .top-players__table-body-name {
    width: 90px;
    margin-left: 10px;
  }
  .user-panel__points-name {
    padding: 10px 20px;
  }
  .top-players__table-ava {
    width: 55px;
  }
  .top-players__table-body-stats {
    width: 90px;
    margin-right: 0;
  }
}
@media screen and (max-width: 1300px) {
  .account-page__leftbar {
    width: calc(65% - 15px);
  }
  .account-page__rightbar {
    width: calc(35% - 15px);
  }
  .account-server {
    justify-content: space-between;
  }
  .account-server__item {
    font-size: 16px;
  }
  .account-page__content select {
    width: 175px;
  }
  .account-server__switch-server--link {
    gap: 8px;
  }
  .account-menu__item {
    flex-basis: calc(33.33% - 25px);
    margin: 0;
  }
  .user-panel__title {
    font-size: 22px;
  }
  .server-statistics__item {
    font-size: 14px;
  }
  .user-panel__points {
    gap: 15px;
  }
  .user-panel__points-item {
    padding: 15px;
    width: calc(33.33% - 15px);
  }
  .user-panel__points-сount {
    font-size: 22px;
  }
  .user-panel__points-name {
    padding: 10px;
  }
  .account-page__ratings-header {
    font-size: 22px;
  }
}
@media screen and (max-width: 1200px) {
  .top-players__table-body-stats .top-players__table-body-item {
    width: 23px;
  }
  .top-players__table-body-row {
    padding: 10px;
  }
  .top-players__table-body-num {
    width: 15px;
    text-align: center;
    margin-right: 10px;
  }
}
@media screen and (max-width: 1000px) {
  .account-page {
    background-size: 130%;
  }
  /* .account-page--bg {
    height: 726px;
  } */
  .account-page::before {
    height: 726px;
  }
  .account-page__content {
    padding-bottom: 70px;
  }
  .account-page__rightbar {
    width: 100%;
    margin: 0;
  }
  .account-page__leftbar {
    width: 100%;
    margin: 0;
  }
  .account-page__user-info {
    position: absolute;
    top: 0;
    z-index: 1;
    width: 100%;
  }
  .user-info__image img {
    width: auto;
  }
  .account-page .user-info__server select {
    font-size: 18px;
  }
  .user-info__menu-link {
    padding: 16px 24px;
    font-size: 20px;
    gap: 18px;
  }
  .account-server {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
    margin-bottom: 20px;
    margin-top: 615px;
  }
  .account-page__content select {
    background-size: 15px;
  }
  .account-server__item {
    font-size: 18px;
  }
  .account-page__account-menu {
    margin: 0;
    margin-bottom: 15px;
  }
  .account-menu__list {
    gap: 0;
  }
  .account-menu__item--mobile {
    display: block;
  }
  .account-menu__item {
    flex-basis: calc(33.33% - 10px);
    margin-right: 15px;
    margin-bottom: 15px;
  }
  .account-menu__item:nth-child(3n) {
    margin-right: 0;
  }
  .user-panel__header {
    padding: 12px 20px;
  }
  .user-panel__pin-content {
    padding: 20px;
    padding-bottom: 30px;
  }
  .user-panel__title {
    font-size: 20px;
    margin-bottom: 20px;
  }
  .user-panel__pin-desc {
    font-size: 14px;
    line-height: 20px;
    padding-bottom: 10px;
  }
  .user-panel__pin-desc:last-child {
    padding-bottom: 25px;
  }
  .user-panel__form-label {
    font-size: 14px;
  }
  .user-panel__form-random {
    font-size: 14px;
  }
  .user-panel__account-info {
    padding: 20px 25px;
    font-size: 14px;
  }
  .user-panel__info-content--wrapper {
    padding: 20px;
  }
  .user-panel__account-tip {
    font-size: 14px;
    line-height: 20px;
  }
  .user-panel__reg-date {
    font-size: 14px;
    line-height: 24px;
  }
  .user-panel__points {
    margin-top: 20px;
  }
  .user-panel__points-item {
    padding: 25px;
    width: calc(50% - 8px);
  }
  .user-panel__points-сount {
    font-size: 30px;
  }
  .user-panel__points-name {
    padding: 10px 20px;
  }
  .server-statistics__header {
    font-size: 30px;
  }
  .account-page__switch {
    padding: 18px 25px;
  }
  .server-statistics__item {
    padding: 12px 18px;
    font-size: 16px;
  }
  .account-page__switch-item {
    padding: 10px 35px;
  }
  .top-players__header {
    font-size: 30px;
  }
  .top-players__table-head {
    padding: 8px 30px;
  }
  .top-players__table-body-row {
    padding: 10px 37px 10px 20px;
  }
  .top-players__table-body-num {
    width: 26px;
  }
  .top-players__table-body-ava img {
    width: 52px;
    height: 44px;
  }
  .top-players__table-name {
    width: 75px;
  }
  .top-players__table-body-name {
    width: 315px;
    text-align: center;
  }
  .top-players__table-body-stats {
    width: 115px;
    margin-right: 0;
  }
  .top-players__table-ava {
    width: 70px;
  }
  .account-page__ratings-header {
    font-size: 30px;
  }
  .account-page__discord {
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 768px) {
  .account-page {
    background-size: 300%;
    background-position: top;
  }
  /* .account-page--bg {
    background-position: 55%;
    top: 48px;
    height: 415px;
  } */
  .account-page__content {
    padding-bottom: 50px;
  }
  .account-page__user-info {
    padding: 20px 14px;
  }
  .user-info {
    gap: 5px;
    align-items: stretch;
    margin-bottom: 24px;
  }
  .user-info__image {
    display: flex;
  }
  .user-info__server {
    justify-content: space-between;
  }
  .user-info__menu {
    gap: 0;
  }
  .user-info__menu-link {
    font-size: 14px;
    gap: 14px;
    padding: 12px 18px;
  }
  .account-server {
    padding: 15px 23px;
    margin-top: 465px;
  }
  .account-server__item {
    font-size: 14px;
    width: 100%;
  }
  .account-server__item form {
    width: 100%;
  }
  .account-server__item form select {
    width: 60%;
  }
  .account-page__account-menu {
    margin-bottom: 20px;
  }
  .account-menu__item--link {
    gap: 8px;
    font-size: 12px;
    padding: 14px 8px;
  }
  .user-panel__item {
    margin-bottom: 20px;
  }
  .user-panel__header {
    font-size: 12px;
    padding: 12px;
  }
  .user-panel__roll {
    font-size: 10px;
  }
  .user-panel__roll::before {
    right: -28px;
  }
  .user-panel__pin-content {
    padding: 28px 12px 32px;
  }
  .user-panel__title {
    font-size: 16px;
    margin-bottom: 10px;
  }
  .user-panel__form-input {
    width: 150px;
  }
  .user-panel__form-field {
    margin-top: 14px;
    margin-bottom: 25px;
  }
  .user-panel__account-info {
    padding: 30px 10px 18px;
    flex-wrap: wrap;
  }
  .user-panel__account-item:first-child {
    width: 55px;
    margin-bottom: 10px;
  }
  .user-panel__account-item:nth-child(2) {
    width: calc(100% - 55px);
    margin-bottom: 10px;
  }
  .user-panel__account-item:nth-child(3) {
    width: 65px;
  }
  .user-panel__account-item:last-child {
    width: calc(100% - 65px);
  }
  .user-panel__info-content--wrapper {
    padding: 18px 12px 20px;
  }
  .user-panel__account-tip {
    padding-bottom: 15px;
  }
  .user-panel__reg-date {
    flex-direction: column;
    gap: 5px;
  }
  .user-panel__points {
    gap: 12px;
  }
  .user-panel__points-item {
    padding: 22px 8px;
    width: calc(50% - 6px);
    gap: 12px;
  }
  .user-panel__points-item:last-child {
    gap: 5px;
    padding: 22px 8px 16px;
  }
  .user-panel__points-name {
    padding: 10px 6px;
    text-align: center;
  }
  .server-statistics__header {
    font-size: 18px;
    padding: 8px;
  }
  .account-page__switch {
    padding: 16px;
  }
  .account-page__switch-item {
    padding: 7px 14px;
  }
  .server-statistics__item {
    padding: 12px 13px;
    font-size: 12px;
  }
  .server-statistics {
    margin-bottom: 20px;
  }
  .top-players__header {
    font-size: 18px;
    padding: 8px;
  }
  .top-players__table-head {
    padding: 12px;
  }
  .top-players__table-body-row {
    padding: 12px;
  }
  .top-players__table-body-num {
    width: 15px;
  }
  .top-players__table-body-ava img {
    width: 26px;
    height: 26px;
  }
  .top-players__table-ava {
    width: 50px;
  }
  .top-players__table-name {
    width: 85px;
  }
  .account-page__top-players {
    margin-bottom: 20px;
  }
  .account-page__ratings-header {
    font-size: 18px;
    padding: 8px;
  }
  .account-page__ratings-content {
    padding: 16px;
  }
  .account-page__ratings {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 500px) {
  .account-server__item form select {
    width: inherit;
  }
  .account-menu__item {
    flex-basis: calc(50% - 10px);
    margin-bottom: 20px;
    margin-right: 20px;
  }
  .account-menu__item:nth-child(2n) {
    margin-right: 0 !important;
  }
    .account-menu__item:nth-child(3n) {
    margin-right: 20px;
  }
  .account-menu__item--link {
    gap: 5px;
    padding: 14px 5px;
  }
}
@media screen and (max-width: 450px) {
  .account-server__item form select {
    width: inherit;
  }
  .top-players__table-body-name {
    width: 125px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .top-players__table-lvl,
  .top-players__table-reset,
  .top-players__table-hero {
    width: 15%;
    text-align: center;
  }
  .top-players__table-body-lvl,
  .top-players__table-body-reset,
  .top-players__table-body-hero {
    width: 15%;
    text-align: center;
  }
  .top-players__table-ava {
    width: 30px;
  }
  .top-players__table-name {
    width: 17px;
  }
}
.account-page__login-page {
  width: 100%;
  height: calc(100vh - 100px);
  align-items: center;
  justify-content: center;
  padding-top: 0;
}
.user-panel__login {
  width: 770px;
}
.user-panel__login-content .modal__block::before,
.user-panel__login-content .modal__block::after {
  display: none;
}
.account-page__content .modal__server-form select {
  width: 275px;
}
@media screen and (max-width: 1000px) {
  .user-panel__login-content .modal__block {
    margin: 0;
  }
  .modal__captcha {
    margin-top: 20px;
  }
  .modal__block .modal__select {
    height: 40px;
    width: 100%;
    background-size: 4%;
  }
  .modal__field form {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .modal__captcha {
    margin-top: 20px;
  }
  .modal__block .modal__select {
    height: 30px;
    font-size: 12px;
    padding: 7px 10px;
  }
}
.donate__header {
  display: block;
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 20px;
}
.donate__description {
  padding: 20px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  position: relative;
  z-index: 0;
  margin-bottom: 20px;
}
.donate__description::after,
.donate__description::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}    
/* .donate__description::before {
  background: linear-gradient(to bottom,
  #534D68 0%,
  #2E2A3C 100%);
  z-index: -1;
}       */
.donate__description::after {
  background: #1C2956;
  z-index: -1;
  margin: 2px;
}
.donate__description-text {
  text-align: center;
  line-height: 28px;
  font-weight: 500;
}
.donate__buttons {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-top: 35px;
}
.donate__button {
  font-size: 12px;
  color: #ffffff;
  padding: 10px 30px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.donate__button:before,
.donate__button:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.donate__button::before {
  background: linear-gradient(to right, rgba(207, 145, 255, 0%) 0%, rgba(207, 145, 255, 100%) 52%, rgba(207, 145, 255, 0%) 100%);
  z-index: -1;
  transform: rotateY(0);
  transition: transform 0.2s ease-in;
}
.donate__button::after {
  background: linear-gradient(to bottom, #2A1E54 0%, #5D43BA 100%);
  z-index: -1;
  margin: 1px;
  opacity: 1;
  transition: opacity 0.2s ease 0.2s;
}
.donate__button:hover::after {
  opacity: 0.8;
}
.donate__button:hover::before {
  transform: rotateY(90deg);
}
.donate__button:disabled,
.donate__button--disabled {
  font-size: 12px;
  color: #ffffff;
  padding: 10px 30px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  position: relative;
  z-index: 1;
  cursor: not-allowed;
}
.donate__button:disabled::before,
.donate__button:disabled::after,
.donate__button--disabled:before,
.donate__button--disabled:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.donate__button:disabled::before,
.donate__button--disabled:before {
  background: linear-gradient(to bottom, #534D68 0%, #2E2A3C 100%);
  z-index: -1;
}
.donate__button:disabled::after,
.donate__button--disabled:after {
  background: linear-gradient(to right, #534D68 0%, #2E2A3C 100%);
  z-index: -1;
  margin: 2px;
}
.donate__button:disabled:hover::before,
.donate__button.donate__button--disabled:hover::before {
  transform: rotate(0);
}
.donate__button:disabled:hover::after,
.donate__button.donate__button--disabled:hover::after {
  opacity: 1;
}
.donate__payments {
  margin: 50px 0;
}
.donate__payments-list {
  display: flex;
  flex-wrap: wrap;
  gap: 35px;
}
.donate__payments-item {
  width: calc(33.33% - 24px);
}
.donate__payments-link {
  display: flex;
  height: 188px;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 20px;
  position: relative;
  z-index: 0;
  cursor: pointer;
}
.donate__payments-link:before,
.donate__payments-link:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.donate__payments-link:before {
  background: linear-gradient(to bottom, #9086FF 0%, #003347 100%);
  z-index: -1;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.donate__payments-link:after {
  background: linear-gradient(to bottom, #0C061D 0%, #7A19E9 100%);
  z-index: -1;
  margin: 1px;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.donate__payments-link:hover::before {
  opacity: 0;
}
.donate__payments-link:hover::after {
  opacity: 0.8;
}
.ps_list__item_is_open .donate__payments-link:before {
  box-shadow: 0 0 20px 0 #7A19E9;
  z-index: -1;
  opacity: 1;
}
.ps_list__item_is_open .donate__payments-link:hover::after {
  opacity: 1;
}
.donate__payments-desc {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
}
.donate__form {
  display: none;
  position: relative;
  z-index: 0;
}
.donate__form-body {
  padding: 30px 30px 45px 30px;
} 
.donate__form::before,
.donate__form:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.donate__form:before {
  background: linear-gradient(-117deg, #534D68 0%, #2E2A3C 100%);
  z-index: -1;
}
.donate__form:after {
  background: #150E24;
  z-index: -1;
  margin: 1px;
}
.donate__form-header {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  display: block;
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  color: #191127;
  text-transform: uppercase;
  background: linear-gradient(128deg,
    #008CB8 0%,
    #2BBAE6 47%,
    #0C6178 100%); 
}
.donate__form-field {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  margin-bottom: 20px;
}
.donate__form-label {
  font-size: 18px;
  font-weight: 700;
  display: inline-block;
  width: 200px;
}
.donate__form-input {
  width: 300px;
  height: 47px;
  background-color: #090416;
  border-radius: 5px;
  border: 1px solid #30204A;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 400;
  padding-left: 15px;
}
.donate__form-info {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 30px;
}
.donate__tokens-summ {
  font-size: 18px;
  font-weight: 700;
}
.donate__tokens-summ {
  font-size: 18px;
  font-weight: 500;
}
.donate__form-alert {
  font-weight: 700;
  text-transform: uppercase;
  color: #F34040;
  line-height: 24px;
  text-align: center;
  padding-bottom: 35px;
}
.donate__checkbox-label {
  display: inline-block;
  margin-bottom: 20px;
  position: relative;
}
.donate__checkbox-text {
  display: inline-block;
  color: #65C6FF;
  line-height: 34px;
  font-weight: 700;
  padding-left: 35px;
}
.donate__form-checkbox {
  display: none;
}
.donate__checkbox-label .accountform__custom {
  position: absolute;
  top: calc(50% - 10px);
  left: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #ffffff;
  border-radius: 4px;
}
.donate__checkbox-label .accountform__custom::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 0;
  height: 0;
  border: solid #65C6FF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
}
.donate__form-checkbox:checked + .accountform__custom::after {
  width: 5px;
  height: 10px;
  opacity: 1;
  position: absolute;
  top: 1px;
  left: 5px;
}
.giftuser {
  margin-bottom: 20px;
  font-size: 20px;
  text-transform: uppercase;
  font-weight: 700;
  text-align: center;
  color: #65C6FF;
}
.giftuser__or {
  text-align: center;
  text-transform: capitalize;
  font-size: 18px;
  color: #65C6FF;
  margin-bottom: 20px;
}
.paypaldss {
  margin-bottom: 35px;
}
.paypaldss h3 {
  margin-bottom: 10px;
}
@media screen and (max-width: 1300px) {
  .donate__description {
    padding: 20px;
  }
}
@media screen and (max-width: 1000px) {
  .donate__header {
    font-size: 20px;
    text-align: center;
    margin-bottom: 15px;
  } 
  .donate__description {
    padding: 22px;
    margin-bottom: 15px;
    gap: 15px;
  }
  .donate__description-text {
    font-size: 14px;
    line-height: 20px;
  }
  .donate__buttons {
    margin-top: 15px;
  }
  .donate__payments {
    margin: 30px 0;
  }
  .donate__payments-list {
    gap: 15px;
  }
  .donate__payments-item {
    width: calc(50% - 8px);
  }
  .donate__payments-desc {
    font-size: 14px;
  }
  .donate__payments-link {
    height: 150px;
    padding: 22px;
  }
  .donate__form {
    margin-bottom: 30px;
  }
  .donate__form-body {
    padding: 20px 30px 28px 30px;
  }
  .donate__form-field {
   margin-bottom: 25px; 
  }
  .donate__form-label {
    font-size: 16px;
  }
  .donate__form-info {
    font-size: 16px;
    margin-bottom: 20px;
  }
  .donate__tokens-summ {
    font-size: 16px;
  }
  .giftuser__or {
    font-size: 16px;
  }
  .paypaldss {
    font-size: 16px;
  }
  .donate__checkbox-text {
    font-size: 16px;
    line-height: 30px;
  }
}
@media screen and (max-width: 768px) {
  .donate__header {
    font-size: 16px;
    margin-bottom: 20px;
  } 
  .donate__description {
    padding: 20px 18px;
    margin-bottom: 20px;
  }
  .donate__description-text {
    font-size: 12px;
  }
  .donate__buttons {
    margin-top: 20px;
    gap: 20px;
  }
  .donate__button {
    width: calc(50% - 10px);
    padding: 10px;
  }
  .donate__payments {
    margin: 25px 0;
  }
  .donate__payments-list {
    gap: 20px;
  }
  .donate__payments-item {
    width: calc(50% - 10px);
  }
  .donate__payments-link {
    height: 100px;
    padding: 10px;
  }
  .donate__payments-desc {
    font-size: 12px;
  }
  .donate__form-body {
    padding: 24px 12px 26px 12px;
  }
  .donate__form-field {
    flex-direction: column;
  }
  .donate__form-alert {
    font-size: 12px;
    padding-bottom: 10px;
  }
  .donate__form-field {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 14px;
  }
  .donate__form-label {
    font-size: 14px;
    width: 170px;
    margin-bottom: 0;
  }
  .donate__form-info {
    font-size: 14px;
    justify-content: space-between;
  }
  .donate__tokens-summ {
    font-size: 14px;
  }
  .donate__form-input {
    width: 100%;
  }
  .giftuser {
    font-size: 14px;
  }
  .donate__checkbox-text {
    font-size: 14px;
    line-height: normal;
  }
  .donate__buttons {
    margin-top: 0;
    flex-direction: column;
  }
  .donate__button {
    width: 100%;
  }
  .paypaldss  {
    font-size: 12px;
  }
}
.slide__header {
  font-size: 38px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 35px;
  margin-top: 65px;
}
.slide__content-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0 150px;
  padding-left: 200px;
}
.slide__content-list li {
  display: flex;
  align-items: center;
  gap: 15px;
  width: calc(50% - 25px);
  position: relative;
  padding: 10px;
  background-color: #090617;
  border-radius: 10px;
  margin-bottom: 10px;
}
.slide__content-list span {
  width: calc(100% - 35px);
}
.slide__image {
  position: relative;
}
.slide__image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(to bottom,
    rgba(25, 17, 39, 100%) 0%,
    rgba(25, 17, 39, 0) 20%,
    rgba(25, 17, 39, 0) 80%,
    rgba(25, 17, 39, 100%) 100%);
  pointer-events: none;
  z-index: 1;
}
.slide__image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(to right,
  rgba(25, 17, 39, 100%) 0%,
  rgba(25, 17, 39, 0) 20%,
  rgba(25, 17, 39, 0) 80%,
  rgba(25, 17, 39, 100%) 100%);
  pointer-events: none;
  z-index: 1;
}
.slide__content-list li svg {
  width: 20px;
  height: 20px;
}
.slide__content-list li svg path {
  fill: #65C6FF;
}
.slide__content-list li:nth-child(odd) {
  margin-right: 50px;
}
@media screen and (max-width: 1800px) {
  .slide__content-list {
    padding: 0 80px;
    padding-left: 110px;
  }
  .slide__header {
    margin-top: 45px;
  }
}
@media screen and (max-width: 1300px) {
  .slide__content-list {
    padding: 0 50px;
    padding-left: 70px;
  }
}
@media screen and (max-width: 1000px) {
  .slide__content-list {
    padding: 0 50px;
    padding-left: 70px;
  }
  .slide__header {
    margin-top: 65px;
  }
  .slide__content-list {
    padding: 0 50px;
  }
  .slide__content-list li {
    width: 100%;
  }
  .slide__content-list li:nth-child(odd) {
    margin-right: 0;
  }
}
@media screen and (max-width: 768px) {
  .main-slider {
    margin-top: 30px;
  }
  .slide__header {
    font-size: 25px;
    margin-bottom: 25px;
  }
  .slide__content-list li {
    font-size: 14px;
    padding-bottom: 5px;
  }
}
.adminlist__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 30px;
  font-size: 18px;
  font-weight: 700;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  text-transform: uppercase;
  position: relative;
  background: linear-gradient(-92deg, #534D68 0%, #2E2A3C 100%);
}
.adminlist__header::before,
.adminlist__header::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.adminlist__header::before {
  background: #150E24;
  z-index: -1;
  margin: 1px;
}
.adminlist__header::after {
  background: linear-gradient(-92deg, #534D68 0%, #2E2A3C 100%);
  z-index: -1;
}
.adminlist__table1 {
  position: relative;
  z-index: 0;
  margin-bottom: 30px;
  color: #65C6FF;
}
.adminlist__table1::before,
.adminlist__table1::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.adminlist__table1::before {
  background: linear-gradient(-92deg, #534D68 0%, #2E2A3C 100%);
  z-index: -1;
}
.adminlist__table1::after {
  background: #150E24;
  z-index: -1;
  margin: 1px;
}
.adminlist__table-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #2E2A3C;
}
.adminlist__table-row:last-child {
  border-bottom: none;
}
.adminlist__table-row:first-child {
  border-bottom: 1px solid #2E2A3C;
}
.adminlist__table-item {
  text-align: center;
  padding: 25px 10px;
  border-right: 1px solid #2E2A3C;
}
.adminlist__table-item a {
  color: #65C6FF;
}
.adminlist__table-item:first-child {
  width: 10%;
}
.adminlist__table-item:nth-child(2) {
  width: 22.5%;
}
.adminlist__table-item:nth-child(3) {
  width: 22.5%;
}
.adminlist__table-item:nth-child(4) {
  width: 22.5%;
}
.adminlist__table-item:last-child {
  width: 22.5%;
  border-right: none;
}
.adminlist__table2 {
  position: relative;
  z-index: 0;
  margin-bottom: 30px;
  color: #65C6FF;
}
.adminlist__table2::before,
.adminlist__table2::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 10px;
}
.adminlist__table2::before {
  background: linear-gradient(-92deg, #534D68 0%, #2E2A3C 100%);
  z-index: -1;
}
.adminlist__table2::after {
  background: #150E24;
  z-index: -1;
  margin: 1px;
}
.showEmail {
  display: none;
}
.adminlist__table-row .adminlist__table-email {
  width: 10%;
}
.adminlist__table-row .adminlist__button-email {
  width: 35%;
  padding: 6px;
  border: none;
}
.adminlist__table-row .adminlist__table-fb {
  border-left: 1px solid #2E2A3C;
  width: 23%;
}
.adminlist__button-email .button {
  border: 1px solid #65C6FF;
  border-radius: 4px;
  color: #65C6FF;
  padding: 6px;
  font-size: 18px;
  width: 70%;
}
.adminlist__button-email .showEmail {
  color: #65C6FF;
}
.adminlist__table1--mobile {
  display: none;
}
.adminlist__table2--mobile {
  display: none;
}
@media screen and (max-width: 1300px) {
  .adminlist__button-email .button {
    font-size: 14px;
    width: 100%;
  }
  .adminlist__table-row .adminlist__table-email {
    width: 15%;
  }
  .adminlist__table-row .adminlist__button-email {
    width: 30%;
  }
  .adminlist__table1 {
    font-size: 12px;
  }
  .adminlist__table2 {
    font-size: 12px;
  }
  .adminlist__button-email .button {
    font-size: 12px;
  }
}
@media screen and (max-width: 1000px) {
  .adminlist__table-item {
    padding: 18px 10px;
  }
  .adminlist__button-email .button {
    padding: 3px;
  }
}
@media screen and (max-width: 768px) {
  .adminlist__header {
    padding: 12px 5px;
    justify-content: center;
  }
  .account-page__adminlist .account-page__leftbar {
    margin-top: 15px;
  }
  .adminlist__table1--mobile {
    display: block;
  }
  .adminlist__table2--mobile {
    display: block;
  }
  .adminlist__table1 {
    display: none;
  }
  .adminlist__table2 {
    display: none;
  }
  .adminlist__table1--mobile {
    font-size: 12px;
    position: relative;
    z-index: 0;
    margin-bottom: 20px;
    color: #65C6FF;
  }
  .adminlist__table1--mobile::before,
  .adminlist__table1--mobile::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  .adminlist__table1--mobile::before {
    background: linear-gradient(-92deg, #534D68 0%, #2E2A3C 100%);
    z-index: -1;
  }
  .adminlist__table1--mobile::after {
    background: #150E24;
    z-index: -1;
    margin: 1px;
  }
  .adminlist__table2--mobile {
    font-size: 12px;
    position: relative;
    z-index: 0;
    color: #65C6FF;
    margin-bottom: 20px;
  }
  .adminlist__table2--mobile::before,
  .adminlist__table2--mobile::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 10px;
  }
  .adminlist__table2--mobile::before {
    background: linear-gradient(-92deg, #534D68 0%, #2E2A3C 100%);
    z-index: -1;
  }
  .adminlist__table2--mobile::after {
    background: #150E24;
    z-index: -1;
    margin: 1px;
  }
  .adminlist__table1--mobile .adminlist__table-item {
    width: 50%;
    text-align: left;
    padding: 14px 18px;
  }
  .adminlist__table2--mobile .adminlist__table-row {
    align-items: flex-start;
  }
  .adminlist__table1--mobile .adminlist__table-row:nth-child(6) {
    border-top: 1px solid #2E2A3C;
  }
  .adminlist__table2--mobile .adminlist__table-item {
    padding: 15px 20px;
    border: none;
    align-items: flex-start;
  }
  .adminlist__table2--mobile .adminlist__table-item:first-child {
    width: 20%;
  }
  .adminlist__table2--mobile .adminlist__table-item:nth-child(2) {
    width: 30%;
    padding-left: 10px;
    text-align: left;
  }
  .adminlist__table2--mobile .adminlist__table-item--mobile {
    width: 50%;
  }
  .adminlist__table-item--mobile {
    padding: 14px 0;
  }
  .adminlist__table-item--mobile .adminlist__table-item {
    width: auto !important;
    padding: 0;
    padding-bottom: 8px;
    padding-left: 0 !important;
    text-align: left;
  }
  .adminlist__table-item--mobile .adminlist__table-item:last-child {
    padding-bottom: 0;
  }
  .adminlist__button-email .button {
    width: 80%;
  }
  .adminlist__table2--mobile .adminlist__table-row:last-child {
    border: none;
  }
  .adminlist__table2--mobile .adminlist__table-row:last-child .adminlist__table-item:last-child {
    padding: 14px 0;
    text-align: left;
  }
  .showEmail {
    word-break: break-all;
    padding-right: 21px;
  }
}
.vote__alert1 {
  padding: 30px 10px;
  text-align: center;
  font-weight: 500;
  position: relative;
  z-index: 0;
  margin-bottom: 30px;
}
/* .vote__alert1::before, */
.vote__alert1::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 10px;
}
/* .vote__alert1::before {
  background: linear-gradient(-92deg, #534D68 0%, #2E2A3C 100%);
  z-index: -1;
} */
.vote__alert1::after {
  background: #1C2956;
  z-index: -1;
  margin: 1px;
}
.vote__alert2 {
  padding: 30px 10px;
  text-align: center;
  font-weight: 500;
  position: relative;
  z-index: 0;
  margin-bottom: 30px;
}
/* .vote__alert2::before, */
.vote__alert2::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 10px;
}
/* .vote__alert2::before {
  background: linear-gradient(to bottom, #FFE486 0%, #7D4D06 100%);
  z-index: -1;
} */
.vote__alert2::after {
  background: #754322;
  z-index: -1;
  margin: 1px;
}
.vote__banners {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 50px 0;
  flex-wrap: wrap;
  gap: 20px;
}
.vote__item {
  width: calc(20% - 20px);
}
.vote__item a {
  display: block;
  text-align: center;
  width: 100%;
  height: 100%;
}
.vote__image {
  margin-bottom: 30px;
}
.vote__image img {
  width: 100%;
}
.vote__alert3,
.vote__alert4 {
  padding: 30px 10px;
  text-align: center;
  font-weight: 500;
  position: relative;
  z-index: 0;
  margin-bottom: 30px;
}
/*.vote__alert3::before, */
.vote__alert3::after,
/* .vote__alert4::before, */
.vote__alert4::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 10px;
}
/* .vote__alert3::before,
.vote__alert4::before {
  background: linear-gradient(to bottom, #D1FF86 0%, #003347 100%);
  z-index: -1;
} */
.vote__alert3::after,
.vote__alert4::after {
  background: #134220;
  z-index: -1;
  margin: 1px;
}
@media screen and (max-width: 1000px) {
  .vote {
    font-size: 14px;
    line-height: 20px;
  }
  .vote__alert1,
  .vote__alert2,
  .vote__alert3,
  .vote__alert4 {
    font-weight: 400;
  }
}
@media screen and (max-width: 768px) {
  .vote__banners {
    margin: 30px 0;
    gap: 15px;
  }
  .vote__item {
    width: calc(33% - 15px);
  }
  .vote__alert1,
  .vote__alert2,
  .vote__alert3,
  .vote__alert4 {
    margin-bottom: 20px;
  }
  .vote__image {
    margin-bottom: 20px;
  }
}
.change-pwd__block form{
  position: relative;
  z-index: 0;
  margin-bottom: 30px;
  padding: 25px 0 40px 0;
}
/* .change-pwd__block form::before, */
.change-pwd__block form::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
/* .change-pwd__block form::before {
  background: linear-gradient(-92deg, #534D68 0%, #2E2A3C 100%);
  z-index: -1;
} */
.change-pwd__block form::after {
  background: #150E24;
  z-index: -1;
  margin: 1px;
}
.change-pwd__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 30px;
  font-size: 18px;
  font-weight: 700;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  text-transform: uppercase;
  position: relative;
  background: linear-gradient(-92deg, #534D68 0%, #2E2A3C 100%);
}
.change-pwd__header::before,
.change-pwd__header::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.change-pwd__header::before {
  background: #150E24;
  z-index: -1;
  margin: 1px;
}
.change-pwd__header::after {
  background: linear-gradient(-92deg, #534D68 0%, #2E2A3C 100%);
  z-index: -1;
}
.change-pwd__field {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  margin-bottom: 20px;
  padding: 0 10px;
}
.change-pwd__label {
  font-size: 18px;
  font-weight: 500;
  color: #65C6FF;
  display: inline-block;
  width: 200px;
}
.change-pwd__input {
  width: 300px;
  height: 47px;
  background-color: #090416;
  border-radius: 5px;
  border: 1px solid #30204A;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 400;
  padding-left: 15px;
}
.change-pwd__button {
  font-size: 12px;
  color: #ffffff;
  padding: 10px 30px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.change-pwd__button::before,
.change-pwd__button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.change-pwd__button::before {
  background: linear-gradient(to right, rgba(207, 145, 255, 0%) 0%, rgba(207, 145, 255, 100%) 52%, rgba(207, 145, 255, 0%) 100%);
  z-index: -1;
  transform: rotateY(0);
  transition: transform 0.3s ease;
}
.change-pwd__button::after {
  background: linear-gradient(to bottom, #2A1E54 0%, #5D43BA 100%);
  z-index: -1;
  margin: 1px;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.change-pwd__button:hover::before {
  transform: rotateY(90deg);
}
.change-pwd__button:hover::after {
  opacity: 0.8;
}
.change-pwd__submit {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.change-pwd .vote__alert2 a {
  color: #02B113;
  font-weight: 500;
}
.change-pwd .vote__alert2 img {
  margin-bottom: 25px;
}
@media screen and (max-width: 1300px) {
  .change-pwd__field {
    gap: 15px;
  }
  .change-pwd__input {
    width: 250px;
  }
}
@media screen and (max-width: 1000px) {
  .change-pwd .vote__alert2 img {
    margin-bottom: 15px;
  }
}
@media screen and (max-width: 768px) {
  .change-pwd__input {
    width: 235px;
  }
  .change-pwd__block form {
    padding-bottom: 25px;
  }
  .change-pwd__field {
    flex-direction: column;
    align-items: flex-start;
    padding: 0 12px;
    gap: 8px;
    margin-bottom: 15px;
  }
  .change-pwd__label {
    font-size: 14px;
  }
  .change-pwd__input {
    width: 100%;
  }
  .change-pwd__submit {
    margin-top: 15px;
  }
  .change-pwd .vote__alert2 img {
    width: 40px;
    margin-bottom: 20px;
  }
}
.exchanger__header {
  font-size: 30px;
  font-weight: 700;
  display: block;
  margin-bottom: 25px;
  text-transform: uppercase;
}
.exchanger__title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  padding: 12px 30px;
  font-size: 18px;
  font-weight: 700;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  text-transform: uppercase;
  position: relative;
  background: linear-gradient(-92deg, #534D68 0%, #2E2A3C 100%);
}
.exchanger__title::before
/* .exchanger__title::after */ {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.exchanger__title::before {
  background: #150E24;
  z-index: -1;
  margin: 1px;
}
/* .exchanger__title::after {
  background: linear-gradient(-92deg, #534D68 0%, #2E2A3C 100%);
  z-index: -1;
} */
.exchanger__body {
  position: relative;
  z-index: 0;
  margin-bottom: 30px;
  padding: 50px 20px;
}
/* .exchanger__body::before, */
.exchanger__body::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
/* .exchanger__body::before {
  background: linear-gradient(-92deg, #534D68 0%, #2E2A3C 100%);
  z-index: -1;
} */
.exchanger__body::after {
  background: #150E24;
  z-index: -1;
  margin: 1px;
}
.exchanger__item {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  padding-bottom: 10px;
}
.exchanger__block {
  margin-top: 15px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.exchanger__label {
  font-weight: 500;
  color: #65C6FF;
}
.exchanger__input {
  width: 70px;
  height: 47px;
  background-color: #090416;
  border-radius: 5px;
  border: 1px solid #30204A;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  padding: 5px;
}
.exchanger__input::-webkit-outer-spin-button,
.exchanger__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.exchanger__button {
  font-size: 12px;
  color: #ffffff;
  padding: 10px 30px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.exchanger__button::before,
.exchanger__button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.exchanger__button:hover::before {
  transform: rotateY(90deg);
}
.exchanger__button::before {
  background: linear-gradient(to right, rgba(207, 145, 255, 0%) 0%, rgba(207, 145, 255, 100%) 52%, rgba(207, 145, 255, 0%) 100%);
  z-index: -1;
  transform: rotateY(0);
  transition: transform 0.2s ease-in;
}
.exchanger__button:hover::after {
  opacity: 0.8;
}
.exchanger__button::after {
  background: linear-gradient(to bottom, #2A1E54 0%, #5D43BA 100%);
  z-index: -1;
  margin: 1px;
  opacity: 1;
  transition: opacity 0.2s ease 0.2s;
}
.exchanger__field {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 25px;
}
@media screen and (max-width: 1600px) {
  .exchanger__block {
    justify-content: space-between;
    gap: 25px;
  }
}
@media screen and (max-width: 1450px) {
  .exchanger__block {
    justify-content: space-between;
    gap: 25px;
  }
}
@media screen and (max-width: 1300px) {
  .exchanger__block {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 1000px) {
  .exchanger__header {
    font-size: 18px;
    margin-bottom: 20px;
  }
  .exchanger__title {
    padding: 12px 14px;
  }
  .exchanger__body {
    padding: 30px;
  }
  .exchanger__block {
    margin-top: 20px;
  }
}
@media screen and (max-width: 768px) {
  .exchanger__header {
    margin-bottom: 15px;
    text-align: center;
  }
  .exchanger__title {
    font-size: 14px;
  }
  .exchanger__body {
    padding: 15px;
    padding-bottom: 28px;
  }
  .exchanger__item {
    font-size: 12px;
    padding-bottom: 15px;
  }
  .exchanger__block {
    margin-top: 0;
  }
  .exchanger__label {
    font-size: 12px;
  }
  .exchanger__input {
    height: 40px;
    font-size: 14px;
  }
}
.pvp__header {
  display: block;
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 25px;
}
.pvp__alert {
  display: block;
  padding: 35px;
  text-align: center;
  font-weight: 500;
  position: relative;
  z-index: 0;
  margin-bottom: 30px;
}
.pvp__alert1::before,
.pvp__alert1::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.pvp__alert1::before {
  background: linear-gradient(to bottom, #D1FF86 0%, #003347 100%);
    z-index: -1;
}
.pvp__alert1::after {
  background: #134220;
  z-index: -1;
  margin: 1px;
}
.pvp__alert2::before,
.pvp__alert2::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.pvp__alert2::before {
  background: linear-gradient(to bottom, #FFE486 0%, #7D4D06 100%);
  z-index: -1;
}
.pvp__alert2::after {
  background: #754322;
  z-index: -1;
  margin: 1px;
}
.pvp .alert_yellow {
  display: block;
  padding: 22px 40px;
  text-align: center;
  font-weight: 500;
  position: relative;
  z-index: 0;
  margin-bottom: 30px;
}
.pvp .alert_yellow::before,
.pvp .alert_yellow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.pvp .alert_yellow::before {
  background: linear-gradient(to bottom, #9086FF 0%, #003347 100%);
  z-index: -1;
}
.pvp .alert_yellow::after {
  background: #331342;
  z-index: -1;
  margin: 1px;
}
.pvp .eligible-item {
  display: flex;
  align-items: center;
  gap: 23px;
  margin-bottom: 25px;
}
.pvp__button {
  font-size: 12px;
  color: #ffffff;
  padding: 10px 30px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.pvp__button::before,
.pvp__button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.pvp__button:hover::before {
  transform: rotateY(90deg);
}
.pvp__button::before {
  background: linear-gradient(to right, rgba(207, 145, 255, 0%) 0%, rgba(207, 145, 255, 100%) 52%, rgba(207, 145, 255, 0%) 100%);
  z-index: -1;
  transform: rotateY(0);
  transition: transform 0.2s ease-in;
}
.pvp__button:hover::after {
  opacity: 0.8;
}
.pvp__button::after {
  background: linear-gradient(to bottom, #2A1E54 0%, #5D43BA 100%);
  z-index: -1;
  margin: 1px;
  opacity: 1;
  transition: opacity 0.2s ease 0.2s;
}
.pvp__button-text {
  font-weight: 500;
  line-height: 28px;
}
@media screen and (max-width: 1000px) {
  .pvp__header  {
    font-size: 18px;
    margin-bottom: 20px;
  }
  .pvp__alert {
    font-size: 14px;
    padding: 18px 20px;
    line-height: 20px;
    margin-bottom: 30px;
  }
  .pvp__button-text {
    font-size: 14px;
  }
}
@media screen and (max-width: 768px) {
  .pvp__header  {
    text-align: center;
  }
  .pvp__alert {
    padding: 12px 16px;
    margin-bottom: 20px;
  }
  .pvp__button-text {
    font-size: 12px;
    line-height: normal;
  }
}
.add-sockets__header {
  display: block;
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 25px;
}
.add-sockets__alert {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 25px;
  padding: 35px;
  text-align: center;
  font-weight: 500;
  position: relative;
  z-index: 0;
  margin-bottom: 30px;
}
.add-sockets__alert1::before,
.add-sockets__alert1::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.add-sockets__alert1::before {
  background: linear-gradient(to bottom, #D1FF86 0%, #003347 100%);
    z-index: -1;
}
.add-sockets__alert1::after {
  background: #134220;
  z-index: -1;
  margin: 1px;
}
.add-sockets__alert2::before,
.add-sockets__alert2::after,
.add-sockets__alert3::before,
.add-sockets__alert3::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.add-sockets__alert2::before,
.add-sockets__alert3::before {
  background: linear-gradient(79deg, #008CB8 0%, #0C6178 100%);
    z-index: -1;
}
.add-sockets__alert2::after,
.add-sockets__alert3::after {
  background: #223E75;
  z-index: -1;
  margin: 1px;
}
.add-sockets__alert img {
  width: 56px;
}
.add-sockets__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 30px;
  font-size: 18px;
  font-weight: 700;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  text-transform: uppercase;
  position: relative;
  background: linear-gradient(-92deg, #534D68 0%, #2E2A3C 100%);
}
.add-sockets__title::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.add-sockets__title::after {
  background: linear-gradient(-92deg, #534D68 0%, #2E2A3C 100%);
  z-index: -1;
}
.add-sockets__block {
  margin-bottom: 30px;
  background: #150E24;
  border-radius: 10px;
  position: relative;
  z-index: 0;
}
.add-sockets__block::before,
.add-sockets__block::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 10px;
}
.add-sockets__block::before {
  background: linear-gradient(-92deg, #534D68 0%, #2E2A3C 100%);
  z-index: -1;
}
.add-sockets__block::after {
  background: #150E24;
  z-index: -1;
  margin: 1px;
}
.add-sockets__forms {
  padding: 20px 30px;
}
.add-sockets__form {
  margin-bottom: 20px;
}
.add-sockets__form:last-child {
  margin-bottom: 0;
}
.add_sockets__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.add_sockets__titles {
  font-weight: 500;
  color: #65C6FF;
  cursor: pointer;
}
.add_sockets__wrapp:last-child {
  margin-bottom: 0;
}
.add-sockets__arrow {
  position: relative;
  z-index: 0;
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.add-sockets__arrow::before,
.add-sockets__arrow::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 10px;
}
.add-sockets__arrow:hover::before {
  transform: rotateY(90deg);
}
.add-sockets__arrow::before {
  background: linear-gradient(to right, rgba(207, 145, 255, 0%) 0%, rgba(207, 145, 255, 100%) 52%, rgba(207, 145, 255, 0%) 100%);
  z-index: -1;
  transform: rotateY(0);
  transition: transform 0.2s ease-in;
}
.add-sockets__arrow:hover::after {
  opacity: 0.8;
}
.add-sockets__arrow::after {
  background: linear-gradient(to bottom, #2A1E54 0%, #5D43BA 100%);
  z-index: -1;
  margin: 1px;
  opacity: 1;
  transition: opacity 0.2s ease 0.2s;
}
.add_sockets__titles_active .add-sockets__arrow img {
  transform: rotate(180deg);
}
.socket-options {
  display: block;
  margin-top: 20px;
}
.socket-button {
  font-size: 12px;
  color: #ffffff;
  padding: 10px 30px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.socket-button::before,
.socket-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.socket-button::before {
  background: linear-gradient(to right, rgba(207, 145, 255, 0%) 0%, rgba(207, 145, 255, 100%) 52%, rgba(207, 145, 255, 0%) 100%);
  z-index: -1;
  transform: rotateY(0);
  transition: transform 0.2s ease-in;
}
.socket-button::after {
  background: linear-gradient(to bottom, #2A1E54 0%, #5D43BA 100%);
  z-index: -1;
  margin: 1px;
  opacity: 1;
  transition: opacity 0.2s ease 0.2s;
}
.socket-button:hover::before {
  transform: rotateY(90deg);
}
.socket-button:hover::after {
  opacity: 0.8;
}
.socket-options select {
  width: 100%;
  background-size: 17px;
  font-family: "Inter", "Arial", sans-serif;
  font-size: 18px;
  margin-bottom: 20px;
}
.add-sockets__form-button {
  display: flex;
  justify-content: center;
  align-items: center;
}
.add-sockets__button {
  font-size: 12px;
  color: #ffffff;
  padding: 10px 30px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.add-sockets__button::before,
.add-sockets__button::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: 0;
  border-radius: 10px;
}
.add-sockets__button::before {
  background: linear-gradient(to right, rgba(207, 145, 255, 0%) 0%, rgba(207, 145, 255, 100%) 52%, rgba(207, 145, 255, 0%) 100%);
  z-index: -1;
  transform: rotateY(0);
  transition: transform 0.2s ease-in;
}
.add-sockets__button:hover::before {
  transform: rotateY(90deg);
}
.add-sockets__button::after {
  background: linear-gradient(to bottom, #2A1E54 0%, #5D43BA 100%);
  z-index: -1;
  margin: 1px;
  opacity: 1;
  transition: opacity 0.2s ease 0.2s;
}
.add-sockets__button:hover::after {
  opacity: 0.8;
}
@media screen and (max-width: 1000px) {
  .add-sockets__header {
    font-size: 18px;
    margin-bottom: 20px;
  }
  .add-sockets__alert {
    font-size: 14px;
    padding: 18px 20px;
    line-height: 20px;
    margin-bottom: 30px;
  }
  .add-sockets__forms {
    padding: 20px;
  }
  .add_sockets__titles {
    font-size: 14px;
  }
  .add-sockets__arrow {
    width: 30px;
    height: 30px;
  }
}
@media screen and (max-width: 768px) {
  .add-sockets__header {
    text-align: center;
  }
  .add-sockets__alert {
    margin-bottom: 20px;
  }
  .add-sockets__title {
    padding: 8px 16px;
  }
  .add-sockets__forms {
    padding: 15px;
  }
  .add_sockets__top {
    gap: 10px;
  }
  .add_sockets__titles {
    width: calc(100% - 40px);
  }
  .socket-options select {
    padding: 12px;
    font-size: 14px;
  }
  .socket-options select {
    margin-bottom: 15px;
  }
}
.change-name {
  margin-bottom: 30px;
}
.change-name__header {
  display: block;
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 25px;
}
.change-name__field {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
}
.change-name__field--style {
  margin-bottom: 24px;
}
.change-name__label {
  font-weight: 500;
  line-height: 28px;
}
.change-name__value {
  font-weight: 700;
  color: #65C6FF;
  line-height: 28px;
}
.change-name__field--input {
  margin-bottom: 25px;
}
.change-name__field--input .change-name__label {
  margin-bottom: 12px;
}
.change-name__input {
  width: 275px;
  height: 47px;
  background-color: #090416;
  border-radius: 5px;
  border: 1px solid #30204A;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 400;
  padding-left: 15px;
}
.changeform__centertitle {
  line-height: 28px;
  font-weight: 500;
  color: #F74242;
  padding-bottom: 5px;
}
.change-name__form-button {
  font-size: 12px;
  color: #ffffff;
  padding: 10px 30px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.change-name__form-button::before,
.change-name__form-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.change-name__form-button::before {
  background: linear-gradient(to right, rgba(207, 145, 255, 0%) 0%, rgba(207, 145, 255, 100%) 52%, rgba(207, 145, 255, 0%) 100%);
  z-index: -1;
  transform: rotateY(0);
  transition: transform 0.2s ease-in;
}
.change-name__form-button:hover::before {
  transform: rotateY(90deg);
}
.change-name__form-button::after {
  background: linear-gradient(to bottom, #2A1E54 0%, #5D43BA 100%);
  z-index: -1;
  margin: 1px;
  opacity: 1;
  transition: opacity 0.2s ease 0.2s;
}
.change-name__form-button:hover::after {
  opacity: 0.8;
}
@media screen and (max-width: 1000px) {
  .change-name__header {
    font-size: 18px;
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 768px) {
  .change-name__header {
    text-align: center;
  }
  .change-name__label {
    font-size: 14px;
  }
  .change-name__value {
    font-size: 14px;
  }
  .changeform__centertitle {
    font-size: 14px;
  }
  .change-name__input {
    width: 100%;
    font-size: 14px;
  }
  .change-name__form-button {
    margin: 0 auto;
  }
}
.alert-error {
  font-weight: 500;
  position: relative;
  z-index: 0;
  padding: 22px 40px;
  text-align: center;
}
.alert-error::before,
.alert-error::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.alert-error::before {
  background: linear-gradient(to bottom, #FF8686 0%, #700000 100%);
  z-index: -1;
}
.alert-error::after {
  background: #A41D1D;
  z-index: -1;
  margin: 1px;
}
.alert-message {
  font-weight: 500;
  position: relative;
  z-index: 5;
  padding: 22px 40px;
  text-align: center;
  position: fixed;
  top: 100px;
  width: calc(100% - 420px);
  margin-bottom: 50px;
}
.alert-error::before,
.alert-error::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.alert-error::before {
  background: linear-gradient(to bottom, #FF8686 0%, #700000 100%);
  z-index: -1;
}
.alert-error::after {
  background: #A41D1D;
  z-index: -1;
  margin: 1px;
}
.alert-warning::before,
.alert-warning::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.alert-warning::before {
  background: linear-gradient(to bottom, #9086FF 0%, #003347 100%);
  z-index: -1;
}
.alert-warning::after {
  background: #331342;
  z-index: -1;
  margin: 1px;
}
.alert-success::before,
.alert-success::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.alert-success::before {
  background: linear-gradient(to bottom, #D1FF86 0%, #003347 100%);
  z-index: -1;
}
.alert-success::after {
  background: #134220;
  z-index: -1;
  margin: 1px;
}
.bandit__top {
  background: url("/templates/lottery/slot/images/lottery-img.webp");
  background-repeat: no-repeat;
  background-position: right;
  background-size: cover;
  border-radius: 10px;
}
.bandit__topleft {
  padding: 115px 20px 215px 20px;
}
.bandit__toptitle {
  font-size: 30px;
  font-weight: 700;
  display: block;
  margin-bottom: 25px;
  text-transform: uppercase;
}
.bandit__topdess {
  width: 360px;
  font-weight: 500;
  line-height: 28px;
}
.slot .message.hide {
  opacity: 0;
}
@keyframes spin {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 1800px;
  }
}
.slot .controls {
  padding: 10px 0;
  text-align: center;
}
.slot .machine {
  margin-bottom: 40px;
}
.slot .machine .message {
  font-family: "Inter", "Arial", sans-serif;
  font-size: 14px;
  font-weight: 400;
  padding: 5px;
  position: relative;
  z-index: 0;
  margin: 5px 0;
  text-align: center;
  transition: all 200ms cubic-bezier(0,.61,.27,.23);
}
.slot .machine .message.error::before,
.slot .machine .message.error::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.slot .machine .message.error::before {
  background: linear-gradient(to bottom, #FF8686 0%, #700000 100%);
  z-index: -1;
}
.slot .machine .message.error::after {
  background: #A41D1D;
  z-index: -1;
  margin: 1px;
}
.slot .machine .message.success::before,
.slot .machine .message.success::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.slot .machine .message.success::before{
  background: linear-gradient(to bottom, #D1FF86 0%, #003347 100%);
  z-index: -1;
}
.slot .machine .message.success::after {
  background: #134220;
  z-index: -1;
  margin: 1px;
}
.volute {
  width: fit-content;
  margin: 0 auto;
  margin-bottom: 35px;
  font-size: 12px;
  color: #ffffff;
  padding: 10px 30px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border-radius: 10px;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.volute::before,
.volute::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.volute::after {
  background: linear-gradient(to bottom, #2A1E54 0%, #5D43BA 100%);
  z-index: -1;
  margin:  1px;
  opacity: 1;
  transition: opacity 0.2s ease 0.2s;
}
.volute::before {
  background: linear-gradient(to right, rgba(207, 145, 255, 0%) 0%, rgba(207, 145, 255, 100%) 52%, rgba(207, 145, 255, 0%) 100%);
  z-index: -1;
  transform: rotateY(0);
  transition: transform 0.2s ease-in;
}
.bandit__button--second {
  width: 180px;
}
.bandit__button {
  font-size: 12px;
  color: #ffffff;
  padding: 10px 30px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.bandit__button::before,
.bandit__button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.bandit__button::after {
  background: linear-gradient(to bottom, #2A1E54 0%, #5D43BA 100%);
  z-index: -1;
  margin:  1px;
  opacity: 1;
  transition: opacity 0.2s ease 0.2s;
}
.bandit__button:hover::after {
  opacity: 0.8;
}
.bandit__button::before {
  background: linear-gradient(to right, rgba(207, 145, 255, 0%) 0%, rgba(207, 145, 255, 100%) 52%, rgba(207, 145, 255, 0%) 100%);
  z-index: -1;
  transform: rotateY(0);
  transition: transform 0.2s ease-in;
}
.bandit__button:hover::before { 
    transform: rotateY(90deg);
}
.bandit__action {
  display: flex;
  justify-content: center;
  gap: 55px;
  align-items: center;
  margin-bottom: 40px;
}
.bandit__input {
  width: 100px;
  height: 35px;
  background-color: #090416;
  border-radius: 5px;
  border: 1px solid #30204A;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  padding: 5px;
}
.bandit__input::-webkit-outer-spin-button,
.bandit__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.slot .machine .title dt {
  font-style: italic;
  font-size: 18px;
  color: Gold;
  font-family: 'Segoe UI';
  text-shadow: 1px 1px 0 black;
}
.slot .machine .title dd {
  padding-top: 7px;
  font-size: 12px;
  color: #FFFFFF;
  font-family: 'Segoe UI';
  text-shadow: 1px 1px 0 black;
}
.slot .machine .cells_container {
  display: flex;
}
.slot .machine .cell {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: calc(20%);
  width: 100%;
  height: 100px;
  background: url("/templates/lottery/slot/images/images.png") 0 0 repeat-y #0C061D;
  background-size: 83px 1800px;
  padding: 10px;
  width: calc(20% - 12px);
  margin-right: 15px;
  margin-bottom: 15px;
  background-color: #131823;
  border: 2px #827AD4 solid;
  border-radius: 4px;
}
.slot .machine .cell {
  background-position-x: 50% !important;
}
.slot .machine .cell:nth-child(5n) {
  margin-right: 0;
}
.slot .machine .cell:last-child {
  margin-right: 0;
}
.slot .machine .main_cells .cell:nth-child(1).animate {
  animation: spin 1000ms linear infinite;
}
.slot .machine .main_cells .cell:nth-child(2).animate {
  animation: spin 1200ms linear infinite;
}
.slot .machine .main_cells .cell:nth-child(3).animate {
  animation: spin 1300ms linear infinite;
}
.slot .machine .main_cells .cell:nth-child(4).animate {
  animation: spin 1200ms linear infinite;
}
.slot .machine .main_cells .cell:nth-child(5).animate {
  animation: spin 1400ms linear infinite;
}
.slot .machine .fake.first .cell:nth-child(1).animate {
  animation: spin 1300ms linear infinite;
}
.slot .machine .fake.first .cell:nth-child(2).animate {
  animation: spin 1500ms linear infinite;
}
.slot .machine .fake.first .cell:nth-child(3).animate {
  animation: spin 1800ms linear infinite;
}
.slot .machine .fake.first .cell:nth-child(4).animate {
  animation: spin 1400ms linear infinite;
}
.slot .machine .fake.first .cell:nth-child(5).animate {
  animation: spin 1200ms linear infinite;
}
.slot .machine .fake.second .cell:nth-child(1).animate {
  animation: spin 1800ms linear infinite;
}
.slot .machine .fake.second .cell:nth-child(2).animate {
  animation: spin 1600ms linear infinite;
}
.slot .machine .fake.second .cell:nth-child(3).animate {
  animation: spin 1700ms linear infinite;
}
.slot .machine .fake.second .cell:nth-child(4).animate {
  animation: spin 1500ms linear infinite;
}
.slot .machine .fake.second .cell:nth-child(5).animate {
  animation: spin 1300ms linear infinite;
}
.slot .machine .cell.animate.pause {
  animation-play-state: paused !important;
}
.slot .images_info {
  border-collapse: collapse;
  width: 300px;
}
.slot .images_info img {
  width: 20px;
  height: 20px;
}
.slot .images_info td {
  text-align: center;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.slot .images_info td:first-child {
  width: 20px;
  text-indent: 0;
}
.slot .images_info td, .slot .images_info th {
  vertical-align: middle;
}
.slot .images_info tr:nth-child(odd) td {
  background: rgba(2555, 255, 255, 0.2);
}
.slot .images_info tr:nth-child(even) td {
  background: rgba(2555, 255, 255, 0.3);
}
.slot .images_info th {
  background: rgba(2555, 255, 255, 0.5);
  padding: 5px;
}
.slot .info_table {
  width: 100%;
}
.slot .info_table td {
  vertical-align: top;
}
.bandit {
  margin-bottom: 70px;
}
.bandit__table {
  width: 100%;
  position: relative;
  border: 1px solid #2E2A3C;
}
.bandit__table thead th {
  padding: 15px 0;
  text-align: center;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  border-bottom: 1px solid #2E2A3C;
}
.bandit__table td {
  padding: 15px 0;
  text-align: center;
  color: #ffffff;
  font-size: 18px;
  font-weight: 500;
  border-bottom: 1px solid #2E2A3C;
  border-right: 1px solid #2E2A3C;
}
.bandit__table tr:last-child td {
  border-bottom: none;
}
.bandit__table td:last-child {
  border-right: none;
}
.bandit__table td img {
  height: 20px;
}
@media screen and (max-width: 1500px) {
  .bandit__top {
    background-position: center;
  }
  .bandit__topleft {
    padding-bottom: 140px;
  }
}
@media screen and (max-width: 1300px) {
  .bandit__topleft {
    padding: 100px 20px;
  }
  .bandit__action {
    gap: 25px;
  }
}
@media screen and (max-width: 1000px) {
  .slot .machine {
    margin-bottom: 20px;
  }
  .bandit {
    margin-bottom: 30px;
  }
  .bandit__toptitle {
    font-size: 14px;
    margin-bottom: 8px;
  }
  .bandit__topdess {
    font-size: 12px;
    line-height: 20px;
    width: 240px;
  }
  .bandit__topleft {
    padding: 69px 14px;
  }
  .bandit__action {
    gap: 25px;
    margin-bottom: 20px;
  }
  .bandit__input {
    width: 65px;
  }
  .bandit__table td img {
    height: 40px;
  }
}
@media screen and (max-width: 768px) {
  .bandit__top {
    background-position: 20%;
  }
  .bandit__topdess {
    font-size: 12px;
    line-height: 18px;
    width: 180px;
  }
  .bandit__topleft {
    padding: 64px 12px 79px;
  }
  .slot .machine {
    margin-bottom: 0;
  }
  .slot .machine .cell {
    width: calc(20%);
    margin-right: 8px;
  }
  .volute {
    width: 100%;
    margin-bottom: 10px;
  }
  .bandit__action {
    gap: 0;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }
  .bandit__button {
    width: calc(70% - 10px);
    margin-right: 20px;
    margin-bottom: 10px;
  }
  .bandit__input {
    width: calc(30% - 10px);
    margin-bottom: 10px;
  }
  .bandit__button.bandit__button--second {
    width: 100%;
    margin-right: 0;
  }
  .bandit__table thead th {
    font-size: 12px;
  }
  .bandit__table td {
    font-size: 12px;
  }
}
.sellchar__description {
  margin-bottom: 40px;
}
.sellchar__header {
  display: block;
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 25px;
}
.sellchar__rules {
  margin-bottom: 40px;
}
.sellchar__rules-text {
  line-height: 26px;
}
.sellchar__rules-link {
  text-transform: uppercase;
  font-weight: 700;
  color: #65C6FF;
}
.sellchar .sellchar__infotitle {
  text-align: left;
}
.sellchar__infotitle {
  display: block;
  font-size: 30px;
  font-weight: 700;
  line-height: 26px;
  margin-bottom: 30px;
  text-align: center;
}
.sellchar__table {
  margin-bottom: 40px;
}
.sellchar-table {
  width: 100%;
}
.sellchar-table {
  border-collapse: collapse;
}
.sellchar-table td {
  text-align: center;
  vertical-align: middle;
  padding: 10px;
  border: 1px solid #2E2A3C;
}
.sellchar-table a {
  color: #65C6FF;
}
a.sellchar-table__button {
  font-size: 12px;
  color: #ffffff;
  padding: 10px 30px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
a.sellchar-table__button::before,
a.sellchar-table__button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
a.sellchar-table__button::after {
  background: linear-gradient(to bottom, #2A1E54 0%, #5D43BA 100%);
  z-index: -1;
  margin:  1px;
  opacity: 1;
  transition: opacity 0.2s ease 0.2s;
}
a.sellchar-table__button:hover::after {
  opacity: 0.8;
}
a.sellchar-table__button::before {
  background: linear-gradient(to right, rgba(207, 145, 255, 0%) 0%, rgba(207, 145, 255, 100%) 52%, rgba(207, 145, 255, 0%) 100%);
  z-index: -1;
  transform: rotateY(0);
  transition: transform 0.2s ease-in;
}
a.sellchar-table__button:hover::before { 
    transform: rotateY(90deg);
}
.sellchar__search {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-bottom: 30px;
}
.sellchar__search-label {
  font-weight: 600;
  color: #65C6FF;
}
.sellchar__search-input {
  width: 300px;
  height: 47px;
  background-color: #090416;
  border-radius: 5px;
  border: 1px solid #30204A;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 400;
  padding: 5px;
}
.sellchar__alert {
  display: block;
  padding: 20px;
  text-align: center;
  font-weight: 500;
  position: relative;
  z-index: 0;
  margin-bottom: 30px;
}
/* .sellchar__alert--warning::before, */
.sellchar__alert--warning::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
/* .sellchar__alert--warning::before {
  background: linear-gradient(to bottom, #FFE486 0%, #7D4D06 100%);
  z-index: -1;
} */
.sellchar__alert--warning::after {
  background: #754322;
  z-index: -1;
  margin: 1px;
}
.sellchar-table .sort .fa-sort-up {
  display: none;
}
.sellchar-table .sort.ask .fa-sort-down {
  display: inline;
}
.sellchar-table .sort.desc .fa-sort-up {
  display: none;
}
.sellchar-table .sort.desc .fa-sort-down {
  display: none;
}
.sellchar-table .sort.desc .fa-sort-up {
  display: inline;
}
@media screen and (max-width: 1000px) {
  .sellchar__header {
    font-size: 18px;
    margin-bottom: 20px;
  }
  .sellchar__rules {
    margin-bottom: 30px;
  }
  .sellchar__infotitle {
    font-size: 20px;
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 768px) {
  .sellchar-table {
    display: block;
    width: 100%;
    overflow: scroll;
  }
  .sellchar__search-label {
    font-size: 14px;
  }
  .sellchar__search-input {
    width: 200px;
    font-size: 14px;
  }
}
.lottery-game-3__alert {
  display: block;
  padding: 22px 35px;
  text-align: center;
  font-weight: 500;
  position: relative;
  z-index: 0;
  margin-bottom: 40px;
}
.lottery-game-3__alert--success::before,
.lottery-game-3__alert--success::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.lottery-game-3__alert--success::before {
  background: linear-gradient(to bottom, #D1FF86 0%, #003347 100%);
  z-index: -1;
}
.lottery-game-3__alert--success::after {
  background: #134220;
  z-index: -1;
  margin: 1px;
}
.jackpot img {
  margin-bottom: 30px;
}
.jackpot__body {
  text-align: center;
}
.jackpot__num {
  width: fit-content;
  display: block;
  margin: 0 auto;
  margin-bottom: 20px;
  font-size: 100px;
  font-weight: 700;
  background: linear-gradient(to right, #F2B631 0%, #CD701B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.jackpot {
  text-align: center;
}
.jackpot__text {
  display: block;
  font-weight: 700;
  margin-bottom: 12px;
}
.jackpot__text .number{
  color: #65C6FF;
}
.jackpot__input {
  width: 160px;
  height: 47px;
  background-color: #090416;
  border-radius: 5px;
  border: 1px solid #30204A;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  padding: 5px;
  margin-bottom: 20px;
}
.jackpot__input::-webkit-outer-spin-button,
.jackpot__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.jackpot__button {
  width: 160px;
  font-size: 12px;
  color: #ffffff;
  padding: 10px 30px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  position: relative;
  z-index: 1;
  cursor: pointer;
  margin: 0 auto;
}
.jackpot__button::before,
.jackpot__button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.jackpot__button::after {
  background: linear-gradient(to bottom, #2A1E54 0%, #5D43BA 100%);
  z-index: -1;
  margin:  1px;
  opacity: 1;
  transition: opacity 0.2s ease 0.2s;
}
.jackpot__button:hover::after {
  opacity: 0.8;
}
.jackpot__button::before {
  background: linear-gradient(to right, rgba(207, 145, 255, 0%) 0%, rgba(207, 145, 255, 100%) 52%, rgba(207, 145, 255, 0%) 100%);
  z-index: -1;
  transform: rotateY(0);
  transition: transform 0.2s ease-in;
}
.jackpot__button:hover::before { 
    transform: rotateY(90deg);
}
/* .lottery-game-3__alert--warning::before, */
.lottery-game-3__alert--warning::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
/* .lottery-game-3__alert--warning::before {
  background: linear-gradient(to bottom, #FFE486 0%, #7D4D06 100%);
  z-index: -1;
} */
.lottery {
  margin-bottom: 60px;
}
.lottery-game-3__alert--warning::after {
  background: #754322;
  z-index: -1;
  margin: 1px;
}
@media screen and (max-width: 1000px) {
  .lottery-game-3__alert {
    font-size: 14px;
    margin-bottom: 30px;
  }
}
@media screen and (max-width: 768px) {
  .lottery-game-3__alert {
    padding: 20px;
    margin-bottom: 20px;
  }
  .jackpot__num {
    font-size: 60px;
  }
  .lottery {
    margin-bottom: 30px;
  }
}
.sellchar__item {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 30px;
  padding: 30px 50px;
  position: relative;
  z-index: 0;
}
.sellchar__item::before,
.sellchar__item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.sellchar__item::before {
  background: linear-gradient(-123deg, #534D68 0%, #2E2A3C 100%);
  z-index: -1;
}
.sellchar__item::after {
  background: #0C061D;
  z-index: -1;
  margin: 1px;
}
.sellchar__item .sellchar__infotitle {
  width: 100%;
}
.char-info {
  width: calc(50% - 25px);
}
.char__left {
  margin-right: 50px;
}
.char-info img {
  width: 70%;
  margin-bottom: 10px;
}
.char__element {
  display: flex;
  margin-bottom: 14px;
}
.char__element .info-name {
  width: 40%;
  font-size: 14px;
  font-weight: 700;
}
.char__element .info-value {
  width: 60%;
  font-size: 14px;
}
.char__right .infotitle {
  margin-bottom: 20px;
  color: #65C6FF;
  font-weight: 700;
}
.sellchar__sell-form {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 30px;
  padding: 30px 50px;
  position: relative;
  z-index: 0;
}
.sellchar__sell-form::before,
.sellchar__sell-form::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.sellchar__sell-form::before {
  background: linear-gradient(-123deg, #534D68 0%, #2E2A3C 100%);
  z-index: -1;
}
.sellchar__sell-form::after {
  background: url('/templates/image/content/charsell-form.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: -1;
  margin: 1px;
}
.sellchar__sell-form .sellchar__infotitle {
  width: 100%;
  text-align: center;
}
.sellchar__sell-form form {
  margin: 0 auto;
}
.sellchar__sell-form table {
  margin-bottom: 30px;
}
.sellchar__sell-form table td {
  padding: 10px 0;
} 
.sellchar__sell-form table tr td:first-child {
  padding-right: 20px;
} 
.sellchar__sell-form table input {
  width: 300px;
  height: 47px;
  background-color: #090416;
  border-radius: 5px;
  border: 1px solid #30204A;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 400;
  padding: 5px;
} 
.sellchar__sell-form table input[type='radio'] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid white;
  border-radius: 50%;
  margin: 0;
  margin-right: 20px;
  position: relative;
  cursor: pointer;
  outline: none;
} 
.sellchar__sell-form table input[type='radio']:checked {
  border: 1px solid white;
}
input[type="radio"]::before {
  content: '';
  width: 10px;
  height: 10px;
  background-color: #7A19E9;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
input[type="radio"]:checked::before {
  opacity: 1;
}
.sellchar__form-button {
  font-size: 12px;
  color: #ffffff;
  padding: 10px 30px;
  font-weight: 500;
  margin: 0 auto;
  width: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.sellchar__form-button::before,
.sellchar__form-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.sellchar__form-button::before {
  background: linear-gradient(to bottom, #FF8686 0%, #700000 100%);
  z-index: -1;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.sellchar__form-button::after {
  background: linear-gradient(to right, #F94343 0%, #CC0000 100%);
  z-index: -1;
  margin: 1px;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.sellchar__form-button:hover::before {
  opacity: 0;
}
.sellchar__form-button:hover::after {
  opacity: 0.8;
}
.sellchar__alert--message::before,
.sellchar__alert--message::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.sellchar__alert--message::before {
  background: linear-gradient(79deg, #008CB8 0%, #0C6178 100%);
  z-index: -1;
}
.sellchar__alert--message::after {
  background: #223E75;
  z-index: -1;
  margin: 1px;
}
.inventory_items {
  justify-content: center;
}
@media screen and (max-width: 1700px) {
  .char__right {
    padding: 0;
  }
}
@media screen and (max-width: 1000px) {
  .sellchar__item {
    flex-direction: column;
  }
  .sellchar__item .sellchar__infotitle {
    text-align: center;
  }
  .char__left {
    width: 100%;
    margin: 0;
    margin-bottom: 20px;
    text-align: center;
  }
  .char-info img {
    width: 256px;
    height: 325px;
    object-fit: contain;
  }
  .char__wrapp2 {
    text-align: left;
  }
  .char__right {
    width: 100%;
  }
  .sellchar__item .char__right .infotitle {
    text-align: center;
  }
  .char__element .info-name,
  .char__element .info-value {
    padding-left: 25%;
  }
  .sellchar__item div:first-of-type {
    margin: 0 auto;
  }
  .sellchar-table {
    display: block;
    overflow: scroll;
  }
}
@media screen and (max-width: 768px) {
  .sellchar__sell-form table tr {
    display: flex;
    flex-direction: column;
  }
  .inventory_items div:first-of-type {
    zoom: 70%;
  }
  .sellchar__sell-form {
    padding: 18px 12px;
  }
  .sellchar__sell-form table input {
    width: 256px;
  }
  .sellchar__rules {
    margin-bottom: 20px;
  }
  .sellchar__rules-text {
    font-size: 14px;
    line-height: 20px;
  }
  .sellchar-table {
    font-size: 12px;
  }
  .sellchar__table {
    margin-bottom: 20px;
  }
  .sellchar__item {
    padding: 18px 22px;
    margin-bottom: 20px;
  }
  .char__element .info-name,
  .char__element .info-value {
    font-size: 12px;
    padding-left: 0;
    width: 50%;
  }
  .sellchar__infotitle {
    margin-bottom: 12px;
  }
  .char__wrapp2 .char__element .info-name,
  .char__wrapp2 .char__element .info-value {
    padding-bottom: 10px;
  }
  .sellchar__item .char__right .infotitle {
    margin-bottom: 12px;
  }
  .sellchar__sell-form table {
    font-size: 14px;
  }
  .sellchar__sell-form table td {
    padding: 5px 0;
  }
  .sellchar__sell-form table tr td:first-child {
    padding-right: 0;
  }
  .sellchar__sell-form table tr:first-child,
  .sellchar__sell-form table tr:nth-child(2) {
    flex-direction: row;
  }
  .sellchar__sell-form table tr:first-child td:first-child,
  .sellchar__sell-form table tr:nth-child(2) td:first-child {
    padding-right: 0;
    width: 40%;
  }
  .sellchar__sell-form table tr:first-child td:nth-child(2),
  .sellchar__sell-form table tr:nth-child(2) td:nth-child(2) {
    padding-right: 0;
    width: 60%;
  }
  .sellchar__sell-form::after {
    background-position: 75%;
  }
  .sellchar__sell-form table input[type='radio'] {
    margin-right: 10px;
    margin-bottom: -3px;
  }
  .sellchar__alert {
    font-size: 12px;
    line-height: 20px;
    padding: 8px 12px;
    margin-bottom: 20px;
  }
}
.char-page {
  padding-bottom: 40px;
  position: relative;
}
.char-page--bg {
  background-image: url("/templates/image/backgrounds/char-bg.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100vh;
}
.char-page__content {
  padding-top: 300px;
}
.char-page__table {
  margin: 30px 0;
  padding: 30px 50px;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  border: 1px solid #2E2A3C;
}
.char-page__table::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.char-page__table::before {
  background: rgba(12, 6, 29, 0.6);
  backdrop-filter: blur(4px);
  z-index: -1;
  border-radius: 8px;
  z-index: -1;
}
.char-page__header {
  display: block;
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 30px;
  text-align: center;
  color: #65C6FF;
}
.char-page__table .tableflex {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 100px;
}
.char-page__table .infotitle {
  display: flex;
  font-size: 20px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid #30204A;
  justify-content: center;
  background-color: rgba(12, 6, 29, 0.5);
  transition: background-color 0.3s ease;
}
.char-page__table .infotitle:hover {
  background-color: rgba(87, 31, 95, 0.7);
}
.char-page__table .tableflex__item {
  border: 1px solid #30204A;
}
.char-page__table table {
  border-collapse: collapse;
}
.char-page__table table td {
  padding: 8px 10px;
  text-align: center;
  border-bottom: 1px solid #30204A;
}
.char-page__table table tr {
  background-color: rgba(12, 6, 29, 1);
  transition: background-color 0.3s ease;
}
.char-page__table table tr:hover {
  background-color: rgba(87, 31, 95, 0.7);
}
.char-page__table table tr td:first-child {
  padding-right: 20px;
  border-right: 1px solid #30204A;
  text-align: left;
}
.char-page__table table tr:last-child td {
  border-bottom: none;
}
.char-page__content .inventory {
  margin-bottom: 30px;
  position: relative;
  z-index: 0;
  border-radius: 10px;
}
.char-page__content .inventory::before,
.char-page__content .inventory::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 10px;
}
.char-page__content .inventory::before {
  background: linear-gradient(-92deg, #534D68 0%, #2E2A3C 100%);
  z-index: -1;
}
.char-page__content .inventory::after {
  background: #150E24;
  z-index: -1;
  margin: 2px;
}
.char-page__content .inventory::before,
.char-page__content .inventory::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.char-page__content .inventory::after {
  background: linear-gradient(-123deg, #534D68 0%, #2E2A3C 100%);
  z-index: -2;
  margin: -1px;
}
.char-page__content .inventory::before {
  background: #0C061D;
  z-index: -1;
  margin: 0px;
}
.char-page__content .inventory_items {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
.inventory__header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 30px;
  font-size: 18px;
  font-weight: 700;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  text-transform: uppercase;
  background: linear-gradient(-92deg, #534D68 0%, #2E2A3C 100%);
}
.inventory__update {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 25px;
  padding: 20px;
  text-align: center;
  font-weight: 500;
  position: relative;
  z-index: 0;
  margin-bottom: 30px;
}
.inventory__update::before,
.inventory__update::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.inventory__update::before {
  background: linear-gradient(79deg, #008CB8 0%, #0C6178 100%);
  z-index: -1;
}
.inventory__update::after {
  background: #223E75;
  z-index: -1;
  margin: 1px;
}
.back-button {
  padding: 10px 20px;
  background-color: #090516;
  color: #AFAFAF;
  border-radius: 10px;
  transition: background-color 0.3s ease, color 0.3s ease;
  position: relative;
}
.back-button:hover {
  background-color: #7618E5;
  color: #ffffff;
}
@media screen and (max-width: 1000px) {
  .char-page__content {
    padding: 0;
    padding-top: 200px;
  }
  .char-page__table .tableflex {
    gap: 20px;
    font-size: 14px;
  }
  .char-page__table {
    padding: 20px;
  }
  .char-page--bg {
    height: 600px;
    background-position: 25%;
  }
}
@media screen and (max-width: 768px) {
  .char-page__header {
    font-size: 18px;
  }
  .char-page__table .infotitle {
    font-size: 14px;
  }
  .char-page__table table {
    font-size: 12px;
    width: 100%;
  }
  .char-page__table .tableflex__item {
    width: 100%;
  }
  .char-page__table .tableflex {
    gap: 75px;
  }
  .char-page--bg {
    background-position: 49%;
    top: -50px;
    height: 500px;
  }
  .char-page__content {
    padding: 0;
    padding-top: 150px;
  }
  .back-button {
    font-size: 12px;
    padding: 10px;
  }
}
@media screen and (max-width: 600px) {
  .char-page__table .tableflex {
    flex-direction: column;
    gap: 30px;
  }
  .inventory__update {
    font-size: 12px;
    padding: 12px 18px;
  }
  .char-page__table {
    margin-bottom: 20px;
  }
  .char-page__content .inventory {
    margin-bottom: 20px;
  }
}
.guild-page {
  margin-top: 30px;
  padding-bottom: 40px;
}
.guild-page .guildinfo__item {
  margin-bottom: 10px;
}
.guild-page__header {
  font-size: 30px;
  text-transform: uppercase;
  font-weight: 700;
  display: block;
  margin-bottom: 30px;
}
.guild__label {
  color: #ffffff;
  font-size: 20px;
  text-transform: uppercase;
  font-weight: 700;
  padding-right: 20px;
}
.guild__name {
  color: #F2B631;
}
.guild__score {
  color: #02B113;
}
.guildinfo {
  margin-bottom: 30px;
}
.guild-page table {
  border-collapse: collapse;
}
.guild-page table thead {
  background-color: #090516;
}
.guild-page table td {
  border: 1px solid #30204A;
  padding: 20px 0;
  border-right: 1px solid transparent;
}
.guild-page table tr td:last-child {
  border-right: 1px solid #30204A; 
}
.guld-page__update {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 25px;
  padding: 20px;
  text-align: center;
  font-weight: 500;
  position: relative;
  z-index: 0;
  margin-bottom: 30px;
}
.guld-page__update::before,
.guld-page__update::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.guld-page__update::before {
  background: linear-gradient(79deg, #008CB8 0%, #0C6178 100%);
  z-index: -1;
}
.guld-page__update::after {
  background: #223E75;
  z-index: -1;
  margin: 1px;
}
.guild-page .table_adaptive {
  margin-bottom: 30px;
}
@media screen and (max-width: 1000px) {
  .guild-page .table_adaptive {
    max-width: 100%;
    overflow: auto;
  }
  .guild-page table {
    display: table;
    width: 1200px;
    overflow: auto;
    padding: 10px;
  }
}
@media screen and (max-width: 768px) {
  .guild-page table {
    width: 800px;
  }
  .guild-page table td {
    padding: 20px 10px;
  }
  .guild-page__header {
    font-size: 18px;
    margin-bottom: 20px;
  }
  .guild__label {
    font-size: 14px;
  }
  .guild__name {
    padding-left: 10px;
  }
  .guildinfo__item {
    font-size: 14px;
  }
}
.reg-page {
  position: relative;
}
.reg-page--bg {
  background-image: url("/templates/image/backgrounds/register-bg.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right;
  position: absolute;
  top: 0;
  height: 700px;
  width: 100%;
  z-index: -1;
  opacity: 0.5;
}
.reg-page--bg::before {
  content: '';
  position: absolute;
  top: 0;
  height: 150px;
  width: 100%;
  background: linear-gradient(to bottom, #181026 0%, rgba(24, 16, 38, 0.57) 63%, rgba(24, 16, 38, 0.45) 76%, rgba(24, 16, 38, 0.31) 84%, rgba(24, 16, 38, 0) 95%);
  pointer-events: none;
  z-index: -1;
}
.reg-page--bg::after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 150px;
  width: 100%;
  background: linear-gradient(to top, #181026 0%, rgba(24, 16, 38, 0.57) 63%, rgba(24, 16, 38, 0.45) 76%, rgba(24, 16, 38, 0.31) 84%, rgba(24, 16, 38, 0) 95%);
  pointer-events: none;
  z-index: -1;
}
.reg-page__content {
  padding-top: 30px;
  margin-bottom: 40px;
  text-align: center;
}
.reg-page__header {
  text-transform: uppercase;
  font-size: 30px;
  font-weight: 700;
  background: linear-gradient(to right, #F2B631 0%, #CD701B 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  display: inline-block;
  margin-bottom: 30px;
}
.reg-page__description {
  display: block;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  line-height: 30px;
  margin-bottom: 22px;
}
.country__body {
  position: absolute;
  top: 100%;
  max-height: 330px;
  opacity: 0;
  pointer-events: none;
  overflow: scroll;
  width: 100%;
  background: #000000;
  background-color: #2E2A3C;
  border-radius: 4px;
  margin-top: 5px;
  z-index: 2;
}
.country__item {
  padding: 10px 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
  border-bottom: 1px solid #7a697d;
}
.country__body.country__body_active {
  opacity: 1;
  pointer-events: all;
}
.shadowwrapper {
  text-align: left;
  padding: 30px 150px;
  margin: 0 100px;
  position: relative;
  z-index: 0;
  background: linear-gradient(to right, rgba(207, 145, 255, 0) 0%, #cf91ff 52%, rgba(207, 145, 255, 0) 100%);
}
.shadowwrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
  background-color: #0C061D;
  z-index: -1;
  margin: 2px;
}
.reg-page .selectdiv .copyright22 {
  font-size: 18px;
  text-transform: capitalize;
  font-weight: 400;
}
.reg-page .modal__field-label {
  justify-content: space-between;
  gap: 50px;
  margin-bottom: 20px;
}
.reg-page .register-form {
  display: flex;
  flex-direction: column;
}
.reg-page .formregister__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.reg-page .formregister__label {
  width: 30%;
}
.reg-page .formregister__input {
  display: block;
  width: 380px;
  height: 47px;
  background-color: #2E2A3C;
  border-radius: 5px;
  /* border: 1px solid #30204A; */
  border: none;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 400;
  padding-left: 15px;
}
.reg-page .country_select {
  position: relative;
}
.reg-page .country_select .country__heading {
  display: flex;
  gap: 15px;
  align-items: center;
}
.reg-page .country_select .country__heading svg {
  margin-left: auto;
  margin-right: 18px;
}
.formregister__notic {
  font-size: 16px;
  margin-bottom: 20px;
}
.reg-page select.formregister__input {
  display: block;
  width: 380px;
  height: 47px;
  padding-left: 15px;
  color: #ffffff;
  /* border: 1px solid #30204A; */
  border: none;
  border-radius: 5px;
  appearance: none;
  background: #2E2A3C url("/templates/image/icons/select-arrow.svg") no-repeat;
  background-position: 95% 50%;
  background-size: 19px;
  cursor: pointer;
}
.reg-page .formregister__checkbox-label {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
}
.reg-page .formregister__checkbox-label label {
  margin-right: auto;
}
.reg-page .rer-button {
  text-align: center;
}
.reg-page .formregister__button {
  font-size: 12px;
  color: #ffffff;
  padding: 10px 30px;
  font-weight: 500;
  margin: 0 auto;
  width: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.reg-page .formregister__button::before,
.reg-page .formregister__button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.reg-page .formregister__button::after {
  background: linear-gradient(to bottom, #2A1E54 0%, #5D43BA 100%);
  z-index: -1;
  margin:  1px;
  opacity: 1;
  transition: opacity 0.2s ease 0.2s;
}
.reg-page .formregister__button:hover::after {
  opacity: 0.8;
}
.reg-page .formregister__button::before {
  background: linear-gradient(to right, rgba(207, 145, 255, 0%) 0%, rgba(207, 145, 255, 100%) 52%, rgba(207, 145, 255, 0%) 100%);
  z-index: -1;
  transform: rotateY(0);
  transition: transform 0.2s ease-in;
}
.reg-page .formregister__button:hover::before { 
    transform: rotateY(90deg);
}
.reg-page .formregister__checkbox {
  display: none;
}
.reg-page .formregister__checkbox-label .accountform__custom {
  position: absolute;
  top: calc(50% - 10px);
  left: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #ffffff;
  border-radius: 4px;
}
.reg-page .formregister__checkbox-label .accountform__custom::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 0;
  height: 0;
  border: solid #65C6FF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
}
.reg-page .formregister__checkbox:checked + .accountform__custom::after {
  width: 5px;
  height: 10px;
  opacity: 1;
  top: 1px;
  left: 5px;
}
.reg-page .formregister__agreetext {
  padding-left: 30px;
}
.reg-page .formregister__agreetext a {
  color: #65C6FF;
}
@media screen and (max-width: 1550px) {
  .shadowwrapper {
    padding: 30px 100px;
    margin: 0 50px;
  }
}
@media screen and (max-width: 1200px) {
  .shadowwrapper {
    padding: 30px 50px;
    margin: 0;
  }
}
@media screen and (max-width: 1000px) {
  .reg-page .formregister__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  .reg-page .formregister__label {
    width: 100%;
    gap: 20px;
  }
  .reg-page .formregister__input {
    width: 100%;
  }
  .reg-page .country_select {
    width: 100%;
  }
  .reg-page .modal__field-label form {
    width: 100%;
  }
  .reg-page select.formregister__input {
    width: 100%;
  }
  .reg-page .modal__field-label {
    gap: 20px;
  }
  .reg-page .modal__field-label {
    font-size: 18px;
  }
}
@media screen and (max-width: 768px) {
  .shadowwrapper {
    padding: 20px 12px;
  }
  .reg-page__header {
    font-size: 18px;
    margin-bottom: 20px;
  }
  .reg-page__description {
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 20px;
  }
  .reg-page select.formregister__input {
    font-size: 12px;
  }
  .reg-page .formregister__label {
    font-size: 12px;
  }
  .reg-page .formregister__input {
    font-size: 12px;
    height: 40px;
  }
  .formregister__notic {
    font-size: 12px;
  }
  .reg-page .formregister__agreetext {
    font-size: 12px;
  }
  .reg-page .formregister__button {
    width: 100%;
  }
  .alert-message {
    font-size: 12px;
    padding: 18px;
    height: fit-content;
  }
  .reg-page .modal__field-label {
    font-size: 12px;
  }
  .country__item {
    font-size: 12px;
  }
}
@media screen and (max-width: 1700px) {
  .alert-message {
    width: calc(100% - 395px);
  }
}
@media screen and (max-width: 1500px) {
  .alert-message {
    width: calc(100% - 315px);
  }
}
@media screen and (max-width: 1300px) {
  .alert-message {
    width: calc(100% - 300px);
  }
}
@media screen and (max-width: 1150px) {
  .alert-message {
    width: calc(100% - 270px);
  }
}
@media screen and (max-width: 1000px) {
  .alert-message {
    width: calc(100% - 280px);
  }
}
@media screen and (max-width: 768px) {
  .alert-message {
    bottom: 75px;
    width: calc(100% - 40px);
  }
}
.footer__content {
  margin-bottom: 40px;
  background-color: #20114A;
  padding: 15px 40px;
  border-radius: 10px;
}
.wrapper__footer {
  padding: 0 60px;
}
.footer-info__adress {
  padding-bottom: 15px;
  font-size: 14px;
  color: #ffffff;
  text-align: center;
}
.footer-info__copyright {
  font-size: 14px;
  text-align: center;
}
.footer-docs__list {
  padding: 15px 40px;
  display: flex;
  gap: 40px;
}
.footer-docs__link {
  font-size: 14px;
  color: #ffffff;
  transition: color 0.3s ease;
}
.footer-docs__link:hover {
  font-size: 14px;
  color: #65C6FF;
}
.error-page--bg {
  background-image: url("/templates/image/backgrounds/error-bg.webp");
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100vh;
}
@media screen and (max-width: 768px) {
  .footer-info__adress {
    padding-bottom: 10px;
    font-size: 12px;
  }
  .footer-docs__list {
    padding: 10px 20px;
  }
  .footer-docs__link {
    font-size: 12px;
  }
  .footer-info__copyright {
    font-size: 12px;
  }
  .footer__content {
    margin-bottom: 25px;
  }
}
.statistics-page {
  margin-top: 30px;
  margin-bottom: 70px;
}
.statistics-page__header {
  display: block;
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 20px;
}
.fortress__title {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 30px;
  font-size: 18px;
  font-weight: 700;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  text-transform: uppercase;
  background: linear-gradient(-92deg, #534D68 0%, #2E2A3C 100%);
}
.fortress__info {
  margin-bottom: 40px;
  border-radius: 10px;
  position: relative;
  z-index: 0;
}
.fortress__info::before,
.fortress__info::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 10px;
}
.fortress__info::before {
  background: linear-gradient(-92deg, #534D68 0%, #2E2A3C 100%);
  z-index: -1;
}
.fortress__info::after {
  background: #150E24;
  z-index: -1;
  margin: 1px;
}
.fortress__info table {
  width: 100%;
  padding: 20px;
  border-collapse: collapse;
}
.fortress__info table td {
  padding: 10px;
  border-bottom: 1px solid #2E2A3C;
  border-right: 1px solid #2E2A3C;
}
.fortress__info table td:last-child {
  border-right: none;
}
.fortress__info table tr:last-child td {
  border-bottom: none;
}
.fortress__statisctics {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 40px;
  padding: 20px;
  position: relative;
  z-index: 0;
}
.fortress__statisctics::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
  background: #0C061D;
  z-index: -1;
  margin: 1px;
}
/* .fortress__statisctics::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
  background: linear-gradient(-123deg, #534D68 0%, #2E2A3C 100%);
  z-index: -2;
} */
.fortress__img {
  margin-right: 140px;
}
.fortress__header {
  display: block;
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 20px;
  text-align: center;
}
.fortress__island {
  width: 100%;
  margin-top: 40px;
}
.fortress__header--pad {
  margin-top: 30px;
}
.fortress__item {
  margin-bottom: 10px;
  font-size: 20px;
}
.fortress__item a { 
  color: #65C6FF;
}
.fortress__table {
  padding: 20px;
  border-collapse: collapse;
  background: #150E24;
  width: 100%;
}
.fortress__table td {
  padding: 10px;
  border: 1px solid #2E2A3C;
}
.statistics-page table tr{
  background-color: transparent;
  transition: background-color 0.3s ease;
}
.statistics-page table tr:hover{
  background-color: rgba(87, 31, 95, 0.3);
}
.fortress__table--island {
  margin-bottom: 40px;
}
.statistics-server .filters__basic-list {
  background-color: #090516;
  border-radius: 10px;
  padding: 20px 25px;
  margin-bottom: 30px;
}
.statistics-server table td.header {
  font-size: 20px;
  padding: 20px 0;
}
@media screen and (max-width: 1000px) {
  .fortress__info table {
    font-size: 16px;
  }
  .fortress__statisctics {
    flex-direction: column;
    gap: 30px;
  }
  .fortress__img img {
    height: 200px;
  }
  .fortress__item {
    font-size: 16px;
  }
  .fortress__table {
    font-size: 16px;
  }
  .statistics-server .filters__basic-list {
    padding: 15px 10px;
    margin-bottom: 20px;
  }
  .statistics-server .filters__basic-list {
    gap: 15px;
    justify-content: flex-start;
  }
  .statistics-server table td.header {
    font-size: 18px;
    padding: 20px 0;
  }
}
@media screen and (max-width: 768px) {
  .statistics-page {
    margin-bottom: 40px;
  }
  .fortress__title {
    font-size: 14px;
    padding: 8px 10px;
    text-align: center;
  }
  .fortress__info table {
    font-size: 14px;
  }
  .fortress__header {
    font-size: 14px;
  }
  .fortress__header--pad {
    margin-top: 20px;
  }
  .fortress__table {
    font-size: 14px;
  }
  .fortress__statisctics {
    margin-bottom: 20px;
  }
  .statistics-server table td.header {
    font-size: 16px;
    padding: 10px 0;
  }
}
.files-page {
  margin-top: 30px;
  margin-bottom: 70px;
}
.files-page__top {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  margin-bottom: 30px;
}
.files-page__header {
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  display: block;
}
.files-page__content .download__bigt {
  font-weight: 600;
  color: #65C6FF;
  display: block;
  margin-bottom: 20px;
}
.files-page__content .userpanel__basic {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* border: 1px solid #2E2A3C; */
  border-radius: 10px;
  background-color: #150E24;
  padding: 10px 20px;
  margin-bottom: 30px;
}
.files-page__content .download__notic {
  font-size: 14px;
  color: #fafafa;
  display: block;
  margin-bottom: 60px;
  text-align: center;
}
.files-page__content .userpanel__basic--mc {
  justify-content: space-around;
  padding: 30px;
}
.files-page__content .userpanel__basic--mc a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.files-page__content .userpanel__basic--mc a span {
  font-size: 14px;
  color: #ffffff;
  transition: color 0.3s ease;
}
.files-page__content .userpanel__basic--mc a span:hover {
  color: #65C6FF;
}
.files-page__content .userpanel__files a {
  display: flex;
  align-items: center;
  gap: 20px;
}
.files-page__alert {
  padding: 20px;
  text-align: center;
  font-weight: 500;
  position: relative;
  z-index: 0;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
}
.files-page__alert img {
  width: 40px;
  height: auto;
}
/* .files-page__alert--warning::before, */
.files-page__alert--warning::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
/* .files-page__alert--warning::before {
  background: linear-gradient(to bottom, #FFE486 0%, #7D4D06 100%);
  z-index: -1;
} */
.files-page__alert--warning::after {
  background: #754322;
  z-index: -1;
  margin: 1px;
}
/* .files-page__alert--success::before, */
.files-page__alert--success::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
/* .files-page__alert--success::before {
  background: linear-gradient(to bottom, #D1FF86 0%, #003347 100%);
  z-index: -1;
} */
.files-page__alert--success::after {
  background: #134220;
  z-index: -1;
  margin: 1px;
}
/* .files-page__alert--message::before, */
.files-page__alert--message::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
/* .files-page__alert--message::before {
  background: linear-gradient(79deg, #008CB8 0%, #0C6178 100%);
  z-index: -1;
} */
.files-page__alert--message::after {
  background: #223E75;
  z-index: -1;
  margin: 1px;
}
.quickstart-page__welcome {
  background-image: url("/templates/image/backgrounds/quickstart-banner.webp");
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom: 40px;
  position: relative;
}
.quickstart-page__welcome::before {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(to bottom, rgba(25, 17, 39, 100%) 0%, rgba(25, 17, 39, 0) 20%, rgba(25, 17, 39, 0) 80%, rgba(25, 17, 39, 100%) 100%);
  pointer-events: none;
  z-index: 1;
}
.quickstart-page__welcome::after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(to right, rgba(25, 17, 39, 100%) 0%, rgba(25, 17, 39, 0) 20%, rgba(25, 17, 39, 0) 80%, rgba(25, 17, 39, 100%) 100%);
  pointer-events: none;
  z-index: 1;
}
.quickstart-page__blocks {
  padding: 50px;
  width: 60%;
  position: relative;
  z-index: 2;
  @media screen and (max-width: 1425px) {
    width: 70%;
  }
  @media screen and (max-width: 1000px) {
    width: 100%;
    padding: 20px;
  }
}
.quickstart-page__welcome .files-page__alert--title {
  position: absolute;
  width: 100%;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Alice", serif;
  font-size: 48px;
  color: #ffffff;
  text-transform: uppercase;
  @media screen and (max-width: 1250px) {
    font-size: 30px;
    top: -17px;
  }
  @media screen and (max-width: 768px) {
    font-size: 22px;
    top: -13px;
  }
}
.quickstart-page__welcome .files-page__alert {
  padding: 36px 30px;
  text-align: center;
  font-weight: 700;
  position: relative;
  z-index: 0;
  margin-bottom: 76px;
  @media screen and (max-width: 1250px) {
    padding: 24px 20px;
    font-weight: 500;
  }
  @media screen and (max-width: 1000px) {
    font-size: 16px;
    margin-bottom: 44px;
  }
  @media screen and (max-width: 768px) {
    font-size: 14px;
    margin-bottom: 36px;
  }
}
.quickstart-page__welcome .files-page__alert:last-child {
  margin-bottom: 0;
}
.quickstart-page__welcome .files-page__alert--warning::after {
  background: #090617;
  border-radius: 40px;
}
.quickstart-page__welcome .files-page__alert--warning::before {
  background: linear-gradient(to bottom, #6C12DA 0%, #390B74 100%);
  z-index: -1;
  content: '';
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 1px;
  top: 0;
  border-radius: 40px;
}
.quickstart-page__welcome .files-page__alert--success::after {
  background: #090617;
  border-radius: 40px;
}
.quickstart-page__welcome .files-page__alert--success::before {
  background: linear-gradient(to bottom, #6C12DA 0%, #390B74 100%);
  z-index: -1;
  content: '';
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 1px;
  top: 0;
  border-radius: 40px;
}
.quickstart-page__welcome .files-page__alert--message::before {
  background: linear-gradient(to bottom, #6C12DA 0%, #390B74 100%);
  z-index: -1;
  content: '';
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 1px;
  top: 0;
  border-radius: 40px;
}
.quickstart-page__welcome .files-page__alert--message::after {
  background: #090617;
  border-radius: 40px;
}
.files-page__contacts {
  color: #65C6FF;
}
.files-page__client {
  color: #02B113;
}
.quickstart-page {
  margin-top: 30px;
}
.quickstart-page__header {
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  display: block;
  margin-bottom: 30px;
  text-align: center;
}
.download_notice {
  /* border: 1px solid #2E2A3C; */
  border-radius: 10px;
  background-color: #150E24;
  padding: 10px;
  text-align: center;
  margin-bottom: 30px;
}
.newsmodule-item__button {
  font-size: 12px;
  color: #ffffff;
  padding: 10px 30px;
  font-weight: 500;
  width: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.newsmodule-item__button::before,
.newsmodule-item__button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.newsmodule-item__button::before {
  background: linear-gradient(to right, rgba(207, 145, 255, 0%) 0%, rgba(207, 145, 255, 100%) 52%, rgba(207, 145, 255, 0%) 100%);
  z-index: -1;
  transform: rotateY(0);
  transition: transform 0.2s ease-in;
}
.newsmodule-item__button::after {
  background: linear-gradient(to bottom, #2A1E54 0%, #5D43BA 100%);
  z-index: -1;
  margin:  1px;
  opacity: 1;
  transition: opacity 0.2s ease 0.2s;
}
.newsmodule-item__button:hover::after {
  opacity: 0.8;
}
.newsmodule-item__button:hover::before { 
    transform: rotateY(90deg);
}
.quickstart-page__title {
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  display: block;
  margin-bottom: 30px;
}
@media screen and (max-width: 1000px) {
  .files-page__content .userpanel__basic {
    flex-direction: column;
    gap: 20px;
  }
  .files-page__content .userpanel__basic--mc {
    flex-direction: row;
    justify-content: space-between;
    gap: 30px;
  }
  .userpanel__basic.download__blockautos {
    flex-direction: row;
  }
  .files-page__content .download__notic {
    margin-bottom: 30px;
  }
}
@media screen and (max-width: 768px) {
  .files-page {
    margin-bottom: 40px;
  }
  .files-page__top {
    flex-direction: column-reverse;
    gap: 20px;
  }
  .files-page__header {
    font-size: 18px;
  }
  .files-page__content .download__bigt {
    font-size: 14px;
  }
  .files-page__content .userpanel__basic {
    font-size: 14px;
    align-items: flex-start;
    margin-bottom: 20px;
  }
  .files-page__content .userpanel__basic--mc {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 12px;
  }
  .files-page__alert {
    font-size: 14px;
    margin-bottom: 20px;
  }
  .quickstart-page__title,
  .quickstart-page__header {
    font-size: 18px;
    margin-bottom: 20px;
  }
  .download_notice {
    font-size: 14px;
  }
}
.ratings .filters__list {
  flex-wrap: wrap;
}
.ratings__table-body-item:first-child img {
  width: 15px;
}
.ratings__guild__table {
  border: 1px solid #30204A;
}
@media screen and (max-width: 1500px) {
  .ratings__table-header-item,
  .ratings__table-body-item {
    text-align: center;
  }
  .ratings__table-body-item:first-child,
  .ratings__table-header-item:first-child {
    text-align: left;
  }
  .ratings__table-body-item:nth-child(2),
  .ratings__table-header-item:nth-child(2) {
    padding-right: 20px;
    text-align: left;
  }
  .ratings__table-body-item:nth-child(6),
  .ratings__table-header-item:nth-child(6),
  .ratings__table-body-item:nth-child(7),
  .ratings__table-header-item:nth-child(7) {
    width: 15%;
  }
}
@media screen and (max-width: 1000px) {
  .ratings {
    padding-bottom: 0;
    margin-bottom: 40px;
  }
  .ratings__table-header-item,
  .ratings__table-body-item {
    text-align: left;
  }
  .ratings__table-body-item:nth-child(2),
  .ratings__table-header-item:nth-child(2) {
    padding-right: 0;
    text-align: left;
  }
  .ratings__guild__table {
    font-size: 14px;
    display: block;
    width: 1000px;
    overflow: auto;
  }
}
.ratings table {
  display: table;
  width: 100%;
  border-collapse: collapse;
}
.ratings table thead {
  background-color: #090516;
}
.ratings table td {
  border-bottom: 1px solid #30204A;
  padding: 20px 5px;
}
.forget-page {
  background-image: url("/templates/image/backgrounds/forget-bg.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.forget-page__content {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.forget-page__content .add-funds {
  padding: 40px 100px;
  border-radius: 10px;
  position: relative;
  z-index: 1;
}
.forget-page__content .add-funds::before,
.forget-page__content .add-funds::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.forget-page__content .add-funds::before {
  background: linear-gradient(to right, rgba(207, 145, 255, 0) 0%, #cf91ff 52%, rgba(207, 145, 255, 0) 100%);
  z-index: -1;
}
.forget-page__content .add-funds::after {
  background-color: #191127;
  z-index: -1;
  margin: 2px;
}
.forget-page__content .add-funds__heading {
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  display: block;
  margin-bottom: 30px;
  text-align: center;
}
.forget-page__content .block_pp {
  color: #ffffff;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  position: relative;
  display: inline-block;
}
.forget-page__content .add-funds__count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0;
}
.forget-page__content .add-funds__count input {
  width: 275px;
  height: 40px;
  background-color: #090416;
  border-radius: 5px;
  border: 1px solid #30204A;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 400;
  padding-left: 15px;
}
.forget-page__content .forget__button {
  font-size: 12px;
  color: #ffffff;
  padding: 10px 30px;
  font-weight: 500;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.forget-page__content .forget__button::before,
.forget-page__content .forget__button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.forget-page__content .forget__button::before {
  background: linear-gradient(to right, rgba(207, 145, 255, 0%) 0%, rgba(207, 145, 255, 100%) 52%, rgba(207, 145, 255, 0%) 100%);
  z-index: -1;
  transform: rotateY(0);
  transition: transform 0.2s ease-in;
}
.forget-page__content .forget__button::after {
  background: linear-gradient(to bottom, #2A1E54 0%, #5D43BA 100%);
  z-index: -1;
  margin:  1px;
  opacity: 1;
  transition: opacity 0.2s ease 0.2s;
}
.forget-page__content .forget__button:hover::after {
  opacity: 0.8;
}
.forget-page__content .forget__button:hover::before { 
    transform: rotateY(90deg);
}
@media screen and (max-width: 1000px) {
  .forget-page__content .add-funds {
    padding: 40px;
  }
  .forget-page__content .add-funds__count {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    justify-content: center;
  }
}
@media screen and (max-width: 768px) {
  .forget-page__content .add-funds {
    padding: 20px 10px;
  }
  .forget-page__content .add-funds__heading {
    font-size: 18px;
    margin-bottom: 20px;
  }
  .forget-page__content .block_pp {
    font-size: 14px;
  }
  .forget-page__content .add-funds__count input {
    font-size: 14px;
    width: 100%;
    height: 40px;
  }
}
.site-menu__parts {
  padding: 0 20px 30px 20px;
}
.site-menu__menu-header {
  padding: 12px;
  padding-right: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  background: linear-gradient(-100deg, #534D68 0%, #2E2A3C 100%);
  margin-bottom: 15px;
  cursor: pointer;
}
.site-menu__menu-header--arrow {
  margin-left: auto;
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}
.site-menu__menu-header--arrow.active {
  transform: rotate(0);
}
.site-menu__list {
  padding-left: 30px;
  position: relative;
  margin-top: 10px;
  opacity: 0;
  pointer-events: none;
  transform: translate(0, -20px);
  max-height: 0; 
  overflow: hidden; 
  transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.5s ease; 
}
.site-menu__list.active {
  transform: translate(0, 0);
  opacity: 1;
  pointer-events: all;
  max-height: 500px;  
  margin-bottom: 25px; 
}
.site-menu__list::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12px;
  width: 2px;
  height: 100%;
  background: linear-gradient(to top, #534D68 0%, #2E2A3C 100%);
  border-radius: 4px;
}
.site-menu__nav--nologin {
  padding: 0 20px 30px 20px;
}
.site-menu__nav--nologin .site-menu__list {
  max-height: 100%;
  opacity: 1;
  pointer-events: all;
  padding: 0;
  margin-bottom: 0;
}
.site-menu__nav--nologin .site-menu__list::before {
  display: none;
}
.site-menu__nav--nologin .site-menu__link {
  padding: 13px 10px;
  margin-bottom: 10px;
  border-radius: 10px;
  background-color: transparent;
  transition: background-color 0.3s ease;
}
.site-menu__nav--nologin .site-menu__link:hover {
  background-color: #2E2A3C;
  text-decoration: none;
}
@media screen and (max-width: 768px) {
  .site-menu__parts {
    padding: 0;
  }
  .site-menu__list-mobile {
    margin: 0;
    padding-left: 20px;
  }
  .site-menu__menu-header {
    font-size: 14px;
  }
  .site-menu__link {
    font-size: 14px;
    padding: 5px;
  }
  .site-menu__list::before {
    left: 8px;
  }
}
.payment-fail {
  position: relative;
  padding: 12px 20px;
}
.payment-fail::before,
.payment-fail::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}
.payment-fail::before {
  background: linear-gradient(to bottom, #FFE486 0%, #7D4D06 100%);
  z-index: -1;
}
.payment-fail::after {
  background: #754322;
  z-index: -1;
  margin: 1px;
}
@media screen and (max-width: 1700px) {
  .time-counter {
    margin-bottom: 50px;
  }
}
@media screen and (max-width: 1000px) {
  .time-counter {
    width: 100%;
  }
  .time-counter__header {
    width: 100%;
  }
  .hero__pegi img {
    height: 50px;
    width: 50px;
  }
}
@media screen and (max-width: 768px) {
  .hero__pegi {
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
  }
  .hero__pegi img {
    height: 32px;
    width: 32px;
  }
  .hero {
    background-position: center;
  }
  .time-counter {
    margin-bottom: 15px;
  }
}
.slide__text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 32px;
  font-weight: 800;
  text-transform: uppercase;
  width: 500px;
  background: linear-gradient(to bottom, #ffffff, #d19cff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 1));
}
.slide__text::before {
  content: "";
  position: absolute;
  top: -100px;
  left: 0;
  width: 100%;
  height: 121px;
  background-image: url("/images/Slides/2025/blic.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position-y: center;
}
.slide__text::after {
  content: "";
  position: absolute;
  bottom: -100px;
  left: 0;
  width: 100%;
  height: 121px;
  background-image: url("/images/Slides/2025/blic.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position-y: center;
  transform: scaleX(-1);
}
.slide__text--right {
  right: 84px;
}
.slide__text--left {
  left: 84px;
}
@media screen and (max-width: 1000px) {
  .slide__text {
    font-size: 18px;
    width: 300px;
  }
  .slide__text::before {
    top: -65px;
    height: 80px;
  }
  .slide__text::after {
    bottom: -65px;
    height: 80px;
  }
  .slide__text--right {
    right: 35px;
  }
  .slide__text--left {
    left: 35px;
  }
}
@media screen and (max-width: 768px) {
  .slick-slide img {
    width: 100%;
  }
  .slide__text {
    top: 30%;
    width: 275px;
  }
  .slide__text::before {
    display: none;
  }
  .slide__text::after {
    display: none;
  }
  .slide__text--right {
    right: 50%;
    transform: translateX(50%);
  }
  .slide__text--left {
    left: 50%;
    transform: translateX(-50%);
  }
}
@media screen and (min-width: 3000px) {
  .slide__text {
    font-size: 40px;
    width: 700px;
  }
  .slide__text::before {
    top: -150px;
    height: 150px;
  }
  .slide__text::after {
    bottom: -150px;
    height: 150px;
  }
}
.main-news .swiper-slide img {
  border-radius: 10px;
}
.hero__reg-button {
  display: none;
}
@media screen and (max-width: 768px) {
  .hero__reg-button {
    display: block;
    margin-left: auto;
    margin-right: 30px;
    border-radius: 10px;
    position: relative;
    z-index: 1;
    font-size: 12px;
    color: #ffffff;
    padding: 8px 12px;
    text-transform: uppercase;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .hero__reg-button::before,
  .hero__reg-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 1;
    border-radius: 10px;
    transition: opacity 0.3s ease;
  }
  .hero__reg-button::before {
    background: linear-gradient(to bottom, #ffffff 0%, #1B086C 100%);
    z-index: -1;
  }
  .hero__reg-button::after {
    background: linear-gradient(67deg, #7038ED 0%, #5032A9 100%);
    z-index: -1;
    margin: 1px;
  }
}
.home-button {
  display: none;
}
@media screen and (max-width: 768px) {
  .home-button {
    display: block;
    position: relative;
    padding: 5px 8px;
    background-color: #361242;
    border-radius: 10px;
    width: auto;
    height: auto;
  }
  .home-button::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    z-index: -1;
    background: linear-gradient(to bottom, #EDB8FF 0%, #470000 100%);
    opacity: 1;
    border-radius: 10px;
  }
}
.account-page__content select.donate__form-select {
  width: 300px;
}
.payment__fail {
  margin-top: 200px;
  @media screen and (max-width: 768px) {
    margin-top: 120px;
    margin-bottom: 50px;
  }
}

.streamblock {
  position: fixed;
  bottom: 5px;
  right: 5px;
  width: 320px;
  z-index: 9999;
}
.streamblock__heading {
  width: 320px;
  height: 42px;
  padding: 11px 10px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 10px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}
.streamblock__heading::before,
.streamblock__heading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  transition: opacity 0.3s ease;
  border-radius: 10px;
}
.streamblock__heading::after {
  background: #090617;
  z-index: -1;
  margin: 1px;
}
.streamblock__heading::before {
  background: linear-gradient(to bottom, #ffffff 0%, #1B086C 100%);
  z-index: -1;
}
.streamblock__ico {
  display: block;
  width: 8px;
  height: 8px;
  background-color: #00B812;
  border-radius: 50%;
  margin-right: 8px;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 100% {
    opacity: 1; 
  }
  50% {
    opacity: 0; 
  }
}
.streamblock__status {
  display: flex;
  align-items: center;
}
.streamblock__heading svg {
  transform: rotate(0deg);
  margin: 0 auto;
  transition: transform 0.4s ease-in-out;
}
.streamblock__heading_active svg {
  transform: rotate(180deg);
}
.streamblock__body {
  display: none;
  padding: 5px;
  background-color: rgba(0, 0, 0, 0.8);
}
.site-menu__button--log {
  margin-top: 10px;
  margin-bottom: 0;
}
@media screen and (min-width: 2000px) {
  .top-players__table-body-stats {
    width: 40%;
    margin-right: 0;
  }
  .top-players__table-body-stats .top-players__table-body-item {
    width: 25%;
  }
}
div#mcTooltip{line-height:20px;color:#DDD;border:1px solid #555;font-size:12px;font-family:Verdana,Arial;border-radius:3px;float:left;position:relative;overflow:hidden;border-style:solid;padding:0}
div#mcTooltip,div.mcTooltipInner{background-color:#000;-webkit-border-radius:50px 10px 10px 10px;-moz-border-radius:10px;-khtml-border-radius:10px 10px 10px 10px;border-radius:10px 10px 10px 10px;behavior:url(../css/border-radius.htc)}
div#mcTooltip a{color:#6CF}
div#mcttCloseButton{width:14px;height:14px;position:absolute;cursor:pointer;overflow:hidden;top:12px;right:12px;left:auto}
div#mcOverlay{background-color:#000;opacity:.5;filter:alpha(opacity=50);display:none;top:0;left:0;width:100%;height:100%;overflow:visible;z-index:4}
div#mcTooltipWrapper{position:absolute;visibility:hidden;overflow:visible;z-index:9999999999;top:-2000px}
div.mcTooltipInner{float:left;position:relative;width:auto;height:auto;text-align:center}
div#mcttCo{position:absolute;text-align:center}
div#mcttCo em,div#mcttCo b{display:block;width:0;height:0;overflow:hidden}

.admincp-button {
    position: absolute;
    top: 11px;
    right: 650px;
    padding: 4px;
    background: #47239b !important;
    border: 2px solid #000000 !important;
    color: #0feb36 !important;
    font-weight: bold !important;
    z-index: 999;
}

.page-title {
    color: #10ff93;
    font-family: 'PT Sans', sans-serif;
    font-size: 32px;
    margin-bottom: 10px;
    font-weight: bold;
}

/* NEWS MODULE */
.panel-news {
	margin-bottom: 30px;
	color: #ffffff;
	border: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	-moz-box-shadow: 0 0 0px #e3e3e3;
	-webkit-box-shadow: 0 0 0px #e3e3e3;
	box-shadow: 0 0 0px #e3e3e3;
	background-color: #150E24;
}
.panel-news .panel-heading {
	padding-top: 10px;
	padding-bottom: 10px;
	background: transparent;
}
.panel-news .panel-title {
	color: #ffffff;
	font-size: 24px;
	font-weight: bold;
}
.panel-news .panel-title a {
	color: #ffffff;
}
.panel-news .panel-body {
	padding: 10px;
	background-color: #150E24;
	color: #ffffff;
}
.panel-news .panel-body p {
	color: #ffffff;
}
.panel-news .panel-body a {
	color: #6BD5FC;
}
.panel-news .panel-body a:hover {
	color: #65C6FF;
}
.panel-news .panel-footer {
	border-top: 1px solid #534D68;
	background: transparent;
	color: #dcdcdc;
	font-style: italic;
	font-size: 11px;
	height: 40px;
	color: #777;
}

.panel {
    margin-bottom: 20px;
    background-color: #0c6178;
    border: 1px solid #59ff00fc;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgb(118 21 21);
    box-shadow: 0 1px 1px rgb(197 25 25);
}


/* RANKINGS MODULE */
.rankings-table {
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
}

.rankings-class-image {
	width: 30px;
	height: auto;
	-moz-box-shadow: 0 0 5px #666;
	-webkit-box-shadow: 0 0 5px #666;
	box-shadow: 0 0 5px #666;
	-moz-border-radius: 0px;
	border-radius: 0px;
}
.rankings-table tr td {
	border-bottom: 1px solid #e3e3e3;
	padding: 10px;
	font-size: 18px;
	vertical-align: middle !important;
	text-align: center;
}
.rankings-table-place {
	color: #666;
	font-weight: bold;
	font-size: 24px;
	text-align: center;
}
.rankings-table tr:first-child td {
	color: #6637d8;
	border-bottom: 3px solid #6637d8;
}
.rankings-update-time {
	text-align: right;
	font-size: 11px;
	color: #ccc;
	padding: 10px 0px;
}
.rankings_menu {
	width: 100%;
	overflow: auto;
	text-align: center;
	margin-bottom: 10px;
}
.rankings_menu span {
	width: 100%;
	display: inline-block;
	padding: 10px 0px;
	color: #ccc;
	font-size: 24px;
}
.rankings_menu a {
	display: inline-block;
	width: 200px;
    border: 1px solid #260a6b;
    text-align: center;
    padding: 2px 0px;
    margin: 2px;
    background: #6637d8;
	-moz-border-radius: 2px;
	border-radius: 2px;
	color: #ccc;
}
.rankings_menu a.active {
	color: #e7ddff;
	border-color: #fff;
}
.rankings_guild_logo tr td {
	border: 0px !important;
	padding: 0px !important;
	margin: 0px !important;
}
.rankings-gens-img {
	width: auto !important;
	height: 30px !important;
	border: 0 !important;
	-moz-box-shadow: 0 0 0px #000 !important;
	-webkit-box-shadow: 0 0 0px #000 !important;
	box-shadow: 0 0 0px #000 !important;
	-moz-border-radius: 0px !important;
	border-radius: 0px !important;
}


.table-striped>tbody>tr:nth-of-type(odd) { 
    background-color: #1f162f;
}

.table-hover>tbody>tr:hover { 
    background-color: #1f162f;
}

/* MY ACCOUNT MODULE */
.myaccount-table {
	width: 100%;
	background: #20114A;
	border: 1px solid #20114A;
}
.myaccount-table tr td:first-child {
	color: #fff;
	font-weight: bold;
}
.myaccount-table tr td {
	border-bottom: 1px solid #e3e3e3;
	padding: 15px !important;
}
.myaccount-table tr:last-child td {
	border: 0px;
}

/* GENERAL TABLE UI */
.general-table-ui {
    width: 100%;
    table-layout: fixed;
    background: #f2b631;
    border: 1px solid #65c6ff;
    padding: 10px;
    margin: 10px 0px;
}
.general-table-ui tr td {
	padding: 5px;
	vertical-align: middle !important;
}
.general-table-ui tr:first-child td {
	color: #3f6588;
}
.general-table-ui tr:nth-child(2n+2) td {
	background: #65c6ff;
}
.general-table-ui tr td {
	text-align: center;
}
.general-table-ui img {
	width: 50px;
	height: auto;
	-moz-box-shadow: 0 0 5px #666;
	-webkit-box-shadow: 0 0 5px #666;
	box-shadow: 0 0 5px #666;
	-moz-border-radius: 0px;
	border-radius: 0px;
}

/* TERMS OF SERVICE PAGE */
.tos_list li {
	color: #aa0000;
	font-weight: bold;
	font-size: 18px;
	margin-bottom: 40px;
}
.tos_list li p {
	color: #444;
	text-align: justify;
	text-justify: inter-word;
	text-transform: none;
	padding-right: 35px;
	font-size: 14px;
	font-weight: normal;
}

/* PAYPAL */
.paypal-gateway-container {
	width: 100%;
}

.paypal-gateway-content {
	background: #fef2da;
	border: 3px solid #f79433;
	padding: 15px;
	overflow: auto;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	font-weight: bold;
}

.paypal-gateway-logo {
	width: 100%;
	height: 100px;
	background: #fff9ec url('../img/paypal-logo-200-68.png') no-repeat center;
	background-size: contain;
	margin-bottom: 15px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.paypal-gateway-conversion-rate {
	margin: 0px auto;
	text-align: center;
	color: #000;
	font-size: 18px;
	padding: 10px 0px;
}

.paypal-gateway-form {
	width: 100%;
	margin: 20px auto;
	text-align: center;
}

.paypal-gateway-form div {
	display: inline-block;
	padding: 0px 10px;
	color: #000;
	font-size: 24px;
}

.paypal-gateway-form input[type=text] {
	width: 60px;
	font-size: 24px;
	border: 3px solid #f79433;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	color: #f79433;
}

.paypal-gateway-continue {
	margin: 0px auto;
	text-align: center;
}

.paypal-gateway-continue input[type=submit] {
	background: url('../img/paypal-submit.jpg') no-repeat;
	width: 200px;
	height: 40px;
	border: 0px;
}

.module-requirements {
	font-size: 12px;
	margin-top: 20px;
}

/* ADD STATS MODULE */
.panel-addstats {
	margin-bottom: 30px;
	background: #f1f1f1;
	border: 1px solid #e3e3e3;
	-moz-border-radius: 0px;
	border-radius: 0px;
	color: #333;
}
.panel-addstats .character-avatar img {
	width: 100px;
	height: auto;
	-moz-box-shadow: 0 0 5px #666;
	-webkit-box-shadow: 0 0 5px #666;
	box-shadow: 0 0 5px #666;
	-moz-border-radius: 0px;
	border-radius: 0px;
}
.panel-addstats .character-name {
	color: #666;
	font-family: 'PT Sans', sans-serif;
	font-size: 18px;
	border-bottom: 1px solid #e3e3e3;
	padding: 20px 0px;
	margin-bottom: 20px !important;
	font-weight: bold;
}

/* DOWNLOADS */
.panel-downloads {
	margin-bottom: 30px;
	background: #20114A;
	border: 1px solid #20114A;
	-moz-border-radius: 0px;
	border-radius: 0px;
	color: #fff;
}
	.download-description {
		font-size: 11px;
		position: relative;
		top: -7px;
		color: #c0a9ff;
	}

.online-status-indicator {
	margin-left: 5px;
}

/* MY ACCOUNT CHARACTER LIST */
.myaccount-character-block {
	background: #333;
	border: 1px solid #666;
	padding: 5px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	display: inline-block;
	margin: 0px auto;
	-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
	.myaccount-character-block img {
		width: 100px;
		height: auto;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		-moz-box-shadow: 0 0 5px #000;
		-webkit-box-shadow: 0 0 5px #000;
		box-shadow: 0 0 5px #000;
		-moz-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}
		.myaccount-character-block img:hover {
			-webkit-filter: brightness(120%);
			filter: brightness(120%);
		}
.myaccount-character-block-location {
    font-size: 12px;
    color: #9cff04;
    margin-bottom: 20px;
    margin-top: 2px;
    line-height: 1.2;
}
.myaccount-character-block-level {
	position: relative;
	top: -77px;
	display: inline-block;
	background: rgba(0,0,0,0.5);
	padding: 0px 5px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	color: #fff;
	font-size: 10px;
}
.myaccount-character-name a {
    font-weight: bold;
    color: #f2b631;
    font-size: 16px;
}


/* --- EFECTO ÉPICO DE ZOOM Y PERMANENCIA CON ESTILO DE LETRA --- */

/* 1. Contenedor del texto (centrado) */
.hero-custom-text {
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    perspective: 800px; /* Para el efecto 3D del zoom */
}

/* 2. Estilos base del texto (con el brillo de la imagen) y asignación de la animación */
.hero-arrive-and-stay-effect {
    color: white; /* El texto base es blanco */
    font-size: 3.5rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
    opacity: 0; /* Empieza invisible */

    /* ESTILO DE BRILLO PERMANENTE DE LA IMAGEN */
    text-shadow: 
        0 0 10px rgba(255, 255, 255, 0.7), /* Brillo blanco central */
        0 0 20px rgba(0, 191, 255, 0.6),  /* Aura azul claro */
        0 0 30px rgba(0, 191, 255, 0.4),
        0 0 40px rgba(0, 191, 255, 0.2);
    
    /* Animación: solo el acercamiento, y se queda al final */
    animation: 
        arrive-and-stay 2.5s ease-out forwards; 
}

/* 3. Animación de acercamiento y permanencia */
@keyframes arrive-and-stay {
    0% {
        opacity: 0;
        transform: scale(0.1) rotateX(45deg); /* Empieza pequeño y girado */
    }
    100% {
        opacity: 1;
        transform: scale(1) rotateX(0deg); /* Termina en su tamaño normal, visible */
        /* Aquí el texto ya tiene el text-shadow definido en .hero-arrive-and-stay-effect */
    }
}

/* 4. Regla para ocultar en dispositivos móviles */
@media (max-width: 768px) {
    .hero-custom-text {
        display: none;
    }
}

/* ============================================================
   TOP BAR: marquee + clocks
   ============================================================ */
.site-nav__item--server {
  flex: 1;
  min-width: 0;
  height: auto !important;
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
}
.topbar-left .copyright22 {
  flex-shrink: 0;
  margin-right: 0 !important;
  white-space: nowrap;
}
.topbar-marquee {
  flex: 1 1 auto;
  min-width: 120px;
  max-width: none; /* casi toda la barra */
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.topbar-marquee__track {
  display: flex;
  width: max-content;
  animation: topbar-scroll 22s linear infinite;
  white-space: nowrap;
}
.topbar-marquee__track span {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 235, 255, 0.95);
  letter-spacing: 0.4px;
  padding-right: 3rem;
}
@keyframes topbar-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.topbar-clocks {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto; /* empuja relojes a la derecha */
}
.topbar-clock {
  font-size: 11px;
  font-weight: 600;
  color: #e0c8ff;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(180,140,255,0.35);
  border-radius: 12px;
  padding: 4px 10px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media screen and (max-width: 1100px) {
  .topbar-clock { font-size: 10px; padding: 2px 6px; }
}
@media screen and (max-width: 768px) {
  .topbar-marquee { display: none; }
  .topbar-clocks { gap: 6px; margin-left: 0; }
}

/* ============================================================
   BOTONES MENÚ LATERAL - estilo MU Online más premium
   ============================================================ */
.site-menu__nav-button,
.site-menu__link.site-menu__nav-button {
  background: linear-gradient(180deg, rgba(50, 30, 90, 0.85) 0%, rgba(25, 12, 50, 0.95) 100%) !important;
  border: 1px solid rgba(160, 120, 255, 0.35) !important;
  box-shadow:
    0 0 0 1px rgba(80, 40, 140, 0.3),
    inset 0 1px 0 rgba(200, 170, 255, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.35) !important;
  border-radius: 10px !important;
  transition: all 0.25s ease !important;
}
.site-menu__nav-button:hover,
.site-menu__link.site-menu__nav-button:hover,
.site-menu__link.site-menu__nav-button.active {
  background: linear-gradient(180deg, rgba(90, 50, 160, 0.95) 0%, rgba(45, 20, 90, 1) 100%) !important;
  border-color: rgba(200, 160, 255, 0.65) !important;
  box-shadow:
    0 0 0 1px rgba(160, 100, 255, 0.4),
    0 0 16px rgba(140, 80, 255, 0.45),
    inset 0 1px 0 rgba(230, 200, 255, 0.2) !important;
  transform: translateY(-1px);
}

.site-menu__social-link {
  background: linear-gradient(180deg, rgba(40, 25, 80, 0.9) 0%, rgba(20, 10, 45, 0.95) 100%) !important;
  border: 1px solid rgba(140, 100, 220, 0.4) !important;
  box-shadow: 0 0 12px rgba(100, 60, 180, 0.2), inset 0 1px 0 rgba(180,150,255,0.1) !important;
  border-radius: 10px !important;
}
.site-menu__social-link:hover {
  border-color: rgba(180, 140, 255, 0.7) !important;
  box-shadow: 0 0 18px rgba(140, 80, 255, 0.4) !important;
}
.site-menu__social-link--discord {
  border-color: rgba(88, 101, 242, 0.5) !important;
}
.site-menu__social-link--instagram {
  border-color: rgba(225, 48, 108, 0.45) !important;
}
.site-menu__social-link--facebook {
  border-color: rgba(24, 119, 242, 0.45) !important;
}

/* ============================================================
   RANKINGS PAGE - fondo negro solo en módulo rankings
   ============================================================ */
body.page-rankings,
body.lang-en.page-rankings,
html body.page-rankings {
  background: #050508 !important;
}
body.page-rankings .site-bg {
  background: #050508 !important;
  background-image: none !important;
}
body.page-rankings .site-bg::after {
  background: rgba(0,0,0,0.85) !important;
}
body.page-rankings .wrapper,
body.page-rankings .main-new,
body.page-rankings .panel,
body.page-rankings .rankings,
body.page-rankings table,
body.page-rankings .table {
  color: #e8e8f0 !important;
}
body.page-rankings .rankings-table,
body.page-rankings .module-rankings,
body.page-rankings [class*="ranking"] {
  background: rgba(8, 8, 12, 0.92) !important;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 0 0 1px rgba(120, 80, 200, 0.25);
}

/* ============================================================
   ZONA DE BANNERS DE EVENTOS (cuadrante hero)
   ============================================================ */
.event-banners-zone {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 24px auto 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  z-index: 2;
  padding: 0 24px;
  box-sizing: border-box;
}
.event-banner-slot {
  width: 100%;
  aspect-ratio: 16 / 5; /* mismo ratio que 720x225 / banners anchos */
  min-height: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(180, 140, 255, 0.4);
  box-shadow:
    0 0 0 1px rgba(100, 50, 180, 0.2),
    0 0 20px rgba(100, 50, 180, 0.25),
    0 6px 20px rgba(0,0,0,0.4);
  background: #120a22;
  position: relative;
  display: block;
}
.event-banner-slot > span {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.4);
  font-size: 13px;
  text-align: center;
  pointer-events: none;
  padding: 12px;
}
.event-banner-slot a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.event-banner-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* llena el cuadro sin deformar */
  object-position: center;
  display: block;
}
@media screen and (max-width: 1000px) {
  .event-banners-zone {
    grid-template-columns: 1fr;
    max-width: 640px;
  }
  .event-banner-slot {
    aspect-ratio: 16 / 5;
  }
}
@media screen and (min-width: 1001px) and (max-width: 1300px) {
  .event-banners-zone {
    gap: 12px;
    padding: 0 16px;
  }
}


/* ============================================================
   SERVER CARD - fondo con imagen
   ============================================================ */
.main-servers__link1.main-servers__card--compact::after,
.main-servers__link1.main-servers__link--active.main-servers__card--compact::after {
  /* Imagen de fondo + degradado oscuro encima */
  background:
    linear-gradient(160deg, rgba(20,10,40,0.75) 0%, rgba(40,15,70,0.7) 50%, rgba(25,10,45,0.85) 100%),
    url("../img/backgrounds/server-card-bg.jpg") center / cover no-repeat !important;
}

/* Si no existe server-card-bg.jpg, usa hero-bg como fallback */
.main-servers__link1.main-servers__card--compact::after {
  background:
    linear-gradient(160deg, rgba(20,10,40,0.78) 0%, rgba(45,18,75,0.72) 50%, rgba(25,10,45,0.88) 100%),
    url("../img/backgrounds/hero-bg.jpg") center / cover no-repeat !important;
}

/* ============================================================
   NEWS CARD - fondo con imagen
   ============================================================ */
.news-card::after {
  background:
    linear-gradient(180deg, rgba(15,12,30,0.88) 0%, rgba(20,15,40,0.92) 100%),
    url("../img/backgrounds/news-bg.jpg") center top / cover no-repeat !important;
  border-radius: 11px;
  margin: 1.5px;
  box-shadow: inset 0 0 30px rgba(20, 60, 100, 0.3);
}
/* fallback si no hay news-bg.jpg */
.news-card {
  background: transparent;
}

/* ============================================================
   DONATION / BUY CREDITS - banner de pago
   ============================================================ */
.donation-payment-banner {
  width: 100%;
  max-width: 900px;
  margin: 0 auto 24px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 0 0 2px rgba(200, 160, 255, 0.4),
    0 0 25px rgba(140, 70, 255, 0.3),
    0 8px 30px rgba(0,0,0,0.45);
}
.donation-payment-banner img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  background: #0d0818;
}
.donation-payment-banner--placeholder {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a0f2e 0%, #2d1548 100%);
  border: 1px dashed rgba(180,140,255,0.4);
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  text-align: center;
  padding: 30px;
}

.btn-back-intro {
  color: #e0c8ff !important;
  font-weight: 700 !important;
  border: 1px solid rgba(180,140,255,0.4);
  border-radius: 8px;
  padding: 4px 12px !important;
  background: rgba(80,40,140,0.35);
}
.btn-back-intro:hover {
  background: rgba(120,60,200,0.5) !important;
  color: #fff !important;
}



/* ============================================================
   FIX LAYOUT: top bar + user-nav (home / language / LOG IN)
   ============================================================ */
.main-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
}

.main-nav > .site-nav {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  margin-right: 12px !important;
}

.main-nav > .user-nav {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 12px !important;
  margin-left: auto !important;
  position: relative !important;
  z-index: 20 !important;
}

/* Desktop: home solo icono limpio, language y login alineados */
@media screen and (min-width: 769px) {
  .home-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    background-color: #361242 !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
    position: relative !important;
  }
  .home-button::before {
    content: '' !important;
    position: absolute !important;
    inset: -1px !important;
    z-index: -1 !important;
    background: linear-gradient(to bottom, #EDB8FF 0%, #470000 100%) !important;
    border-radius: 10px !important;
    opacity: 1 !important;
  }
  .home-button svg {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
  }

  .language {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }

  .user-nav__login-button {
    height: 40px !important;
    padding: 0 16px !important;
    flex-shrink: 0 !important;
  }

  /* REGISTER del hero: oculto en desktop (está en el menú lateral) */
  .hero__reg-button {
    display: none !important;
  }
  .hero__pegi {
    min-height: 0 !important;
    margin: 0 !important;
  }
}

@media screen and (max-width: 768px) {
  .main-nav > .site-nav {
    max-width: calc(100% - 160px) !important;
  }
  .hero__reg-button {
    display: flex !important;
  }
}

/* Links privacy / inicio no empujan el user-nav */
.site-nav__item--links {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}
.site-nav__item--server {
  overflow: hidden;
}


/* ============================================================
   NEWS CARD - marco épico con adornos
   ============================================================ */
.news-card {
  position: relative !important;
  border-radius: 14px !important;
  overflow: visible !important;
  box-shadow:
    0 0 0 2px rgba(60, 180, 220, 0.55),
    0 0 0 4px rgba(20, 80, 120, 0.3),
    0 0 28px 4px rgba(40, 160, 220, 0.35),
    0 8px 28px rgba(0, 0, 0, 0.5) !important;
  background: rgba(10, 18, 28, 0.92) !important;
}
.news-card::before {
  content: "" !important;
  position: absolute !important;
  inset: -2px !important;
  border-radius: 15px !important;
  background: linear-gradient(
    135deg,
    #7ee8ff 0%,
    #1a6a9a 25%,
    #5ad0ff 50%,
    #0d4a70 75%,
    #8ef0ff 100%
  ) !important;
  z-index: -2 !important;
  opacity: 0.95 !important;
  pointer-events: none !important;
}
.news-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 2px !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(8, 16, 28, 0.88) 0%, rgba(12, 22, 36, 0.94) 100%),
    url("../img/backgrounds/news-bg.jpg") center top / cover no-repeat !important;
  z-index: -1 !important;
  margin: 0 !important;
  box-shadow: inset 0 0 40px rgba(0, 40, 80, 0.45) !important;
  pointer-events: none !important;
}
/* Esquinas ornamentales del news */
.news-card .news-ornament {
  position: absolute;
  width: 22px;
  height: 22px;
  z-index: 5;
  pointer-events: none;
}
.news-card .news-ornament--tl {
  top: 5px; left: 5px;
  border-top: 3px solid #9ef0ff;
  border-left: 3px solid #9ef0ff;
  border-top-left-radius: 3px;
  box-shadow: -2px -2px 8px rgba(100, 220, 255, 0.55);
}
.news-card .news-ornament--tr {
  top: 5px; right: 5px;
  border-top: 3px solid #9ef0ff;
  border-right: 3px solid #9ef0ff;
  border-top-right-radius: 3px;
  box-shadow: 2px -2px 8px rgba(100, 220, 255, 0.55);
}
.news-card .news-ornament--bl {
  bottom: 5px; left: 5px;
  border-bottom: 3px solid #9ef0ff;
  border-left: 3px solid #9ef0ff;
  border-bottom-left-radius: 3px;
  box-shadow: -2px 2px 8px rgba(100, 220, 255, 0.55);
}
.news-card .news-ornament--br {
  bottom: 5px; right: 5px;
  border-bottom: 3px solid #9ef0ff;
  border-right: 3px solid #9ef0ff;
  border-bottom-right-radius: 3px;
  box-shadow: 2px 2px 8px rgba(100, 220, 255, 0.55);
}
.news-card__header {
  position: relative;
  z-index: 2;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
  background: linear-gradient(90deg, #0a6a8a 0%, #12a0c8 50%, #0a6a8a 100%) !important;
  box-shadow: inset 0 1px 0 rgba(180, 240, 255, 0.35);
  text-shadow: 0 0 10px rgba(100, 220, 255, 0.4);
}
.news-card__body {
  position: relative;
  z-index: 2;
}

/* YouTube social button */
.site-menu__social-link--youtube {
  border-color: rgba(255, 40, 40, 0.55) !important;
}
.site-menu__social-link--youtube:hover {
  border-color: rgba(255, 80, 80, 0.85) !important;
  box-shadow: 0 0 18px rgba(255, 50, 50, 0.45) !important;
}

/* Logout top button */
.user-nav__logout-button {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 40px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  background: linear-gradient(67deg, #8b2040 0%, #4a1020 100%) !important;
  border: 1px solid rgba(255, 120, 140, 0.35) !important;
  box-shadow: 0 0 12px rgba(180, 40, 60, 0.25) !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}
.user-nav__logout-button:hover {
  filter: brightness(1.15);
  box-shadow: 0 0 18px rgba(220, 60, 80, 0.45) !important;
}
@media screen and (max-width: 1000px) {
  .user-nav__logout-button span { display: none; }
  .user-nav__logout-button { width: 40px; justify-content: center; padding: 0; }
}

/* Logo Mu Maya más grande en la web */
.logo__image {
  width: min(220px, 100%) !important;
  height: auto !important;
  max-width: 100% !important;
}
.logo {
  display: flex;
  justify-content: center;
  align-items: center;
}



/* Logo izquierda (sidebar) oculto — solo logo central */
.site-menu .logo {
  display: none !important;
}

/* Logo centrado en el hero */
.hero-center-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 10px auto 20px;
  position: relative;
  z-index: 5;
  pointer-events: auto;
}
.hero-center-logo img {
  width: min(340px, 55vw);
  height: auto;
  filter:
    drop-shadow(0 0 22px rgba(80, 180, 255, 0.5))
    drop-shadow(0 8px 24px rgba(0, 0, 0, 0.75));
}
.hero-center-logo a {
  display: inline-block;
}

/* Mobile: logo móvil se mantiene si hace falta */
@media screen and (max-width: 768px) {
  .hero-center-logo img {
    width: min(260px, 80vw);
  }
}

/* ===== FLOATING EVENTO RULETA (derecha) ===== */
.mu-event-float {
  position: fixed;
  right: 18px;
  top: 42%;
  transform: translateY(-50%);
  z-index: 9990;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none !important;
  width: 110px;
  padding: 14px 10px 14px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(70, 30, 130, 0.97), rgba(25, 10, 50, 0.98));
  border: 2px solid rgba(255, 210, 100, 0.75);
  box-shadow: 0 0 28px rgba(160, 90, 255, 0.55), 0 10px 28px rgba(0,0,0,0.5);
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
  animation: muEventPulse 2.4s ease-in-out infinite;
}
.mu-event-float:hover {
  transform: translateY(-50%) scale(1.08);
  filter: brightness(1.12);
  box-shadow: 0 0 36px rgba(255, 190, 60, 0.65), 0 10px 30px rgba(0,0,0,0.5);
}
.mu-event-float img {
  width: 78px;
  height: 78px;
  object-fit: contain;
  display: block;
  margin-bottom: 8px;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.55));
}
.mu-event-float__label {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
  color: #ffe08a !important;
  text-shadow: 0 0 10px rgba(255, 200, 80, 0.7), 0 2px 4px rgba(0,0,0,0.9);
  -webkit-text-fill-color: #ffe08a;
  background: none;
}
@keyframes muEventPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(140, 80, 255, 0.4), 0 8px 22px rgba(0,0,0,0.4); }
  50% { box-shadow: 0 0 34px rgba(255, 180, 60, 0.65), 0 8px 26px rgba(0,0,0,0.45); }
}

/* YouTube promo float (debajo del evento) */
.mu-yt-float {
  position: fixed;
  right: 18px;
  top: calc(42% + 120px);
  z-index: 9989;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none !important;
  width: 110px;
  padding: 12px 8px 12px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(160, 20, 30, 0.95), rgba(60, 8, 12, 0.97));
  border: 2px solid rgba(255, 80, 80, 0.65);
  box-shadow: 0 0 22px rgba(255, 40, 40, 0.4), 0 8px 20px rgba(0,0,0,0.45);
  transition: transform 0.2s, filter 0.2s;
}
.mu-yt-float:hover {
  transform: scale(1.07);
  filter: brightness(1.1);
}
.mu-yt-float__icon {
  font-size: 36px;
  line-height: 1;
  color: #ff3b3b;
  margin-bottom: 6px;
  text-shadow: 0 0 12px rgba(255, 50, 50, 0.7);
}
.mu-yt-float__label {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  color: #fff !important;
  line-height: 1.2;
}
.mu-yt-float__sub {
  font-size: 10px;
  color: rgba(255,200,200,0.85);
  margin-top: 2px;
  text-align: center;
}

/* Video / animated background support */
.mu-bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  pointer-events: none;
  opacity: 0.35;
}
.mu-bg-video-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(10,5,25,0.35) 0%, rgba(5,2,15,0.75) 100%);
}

@media (max-width: 768px) {
  .mu-event-float {
    right: 8px;
    width: 88px;
    padding: 10px 6px;
    top: 40%;
  }
  .mu-event-float img { width: 60px; height: 60px; }
  .mu-event-float__label { font-size: 12px; letter-spacing: 1px; }
  .mu-yt-float {
    right: 8px;
    width: 88px;
    top: calc(40% + 100px);
    padding: 10px 6px;
  }
  .mu-yt-float__icon { font-size: 28px; }
  .mu-yt-float__label { font-size: 11px; }
}

/* ===== DONATION / BUY CREDITS métodos de pago ===== */
.donation-payment-banner {
  max-width: 960px;
  margin: 0 auto 16px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(160, 120, 255, 0.4);
  box-shadow: 0 0 24px rgba(80, 40, 160, 0.25);
}
.donation-payment-banner img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 220px;
  object-fit: cover;
}
.donation-payment-banner--placeholder {
  padding: 28px 20px;
  text-align: center;
  background: rgba(20, 10, 45, 0.9);
  color: rgba(230, 210, 255, 0.85);
  font-size: 14px;
  line-height: 1.6;
}

.mu-pay-methods {
  max-width: 960px;
  margin: 0 auto 20px;
  padding: 18px 16px 20px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(28, 14, 55, 0.95), rgba(12, 6, 28, 0.94));
  border: 1px solid rgba(160, 120, 255, 0.4);
  box-shadow: 0 0 24px rgba(80, 40, 160, 0.25);
  color: #efe8ff;
}
.mu-pay-methods h3 {
  margin: 0 0 14px;
  font-size: 15px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #ffe08a;
  text-align: center;
}
.mu-pay-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 800px) {
  .mu-pay-grid { grid-template-columns: repeat(2, 1fr); }
}
.mu-pay-card {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(140, 100, 220, 0.35);
  border-radius: 12px;
  padding: 14px 12px;
  text-align: center;
  transition: border-color 0.2s, transform 0.15s;
}
.mu-pay-card:hover {
  border-color: rgba(255, 200, 100, 0.55);
  transform: translateY(-2px);
}
.mu-pay-card__icon {
  font-size: 28px;
  margin-bottom: 6px;
  display: block;
}
.mu-pay-card__title {
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  margin-bottom: 4px;
}
.mu-pay-card__desc {
  font-size: 11px;
  color: rgba(210, 190, 255, 0.75);
  line-height: 1.35;
}
.mu-pay-card--auto .mu-pay-card__title { color: #7dffa0; }
.mu-pay-note {
  margin-top: 14px;
  font-size: 12px;
  text-align: center;
  color: rgba(200, 180, 255, 0.7);
  line-height: 1.45;
}
.mu-pay-note strong { color: #ffe08a; }

/* ============================================================
   V7.1 - MENÚ LATERAL COMPACTO / PREMIUM
   ============================================================ */
@media screen and (min-width: 769px) {
  .site-menu {
    width: 252px !important;
    left: 24px !important;
    top: 18px !important;
    margin-left: 0 !important;
    height: calc(100vh - 36px) !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: 18px !important;
    filter: drop-shadow(0 18px 38px rgba(0,0,0,.48));
  }

  .site-menu__wrapper {
    min-height: 100%;
    padding: 14px 12px 16px !important;
    border: 1px solid rgba(164, 126, 230, .28) !important;
    border-radius: 18px !important;
    background:
      radial-gradient(circle at 50% -5%, rgba(127,74,209,.23), transparent 34%),
      linear-gradient(180deg, rgba(18,13,31,.96) 0%, rgba(9,8,17,.975) 62%, rgba(14,9,25,.98) 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.06),
      inset 0 0 34px rgba(80,42,130,.10),
      0 0 0 1px rgba(0,0,0,.22) !important;
  }

  .site-menu__wrapper::after {
    display: none !important;
  }

  .site-menu__nav--nologin {
    padding: 0 !important;
  }

  .mu-side-panel-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 2px 13px;
    padding: 11px 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,.075);
  }

  .mu-side-panel-head__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 11px;
    color: #f4d88d;
    background: linear-gradient(145deg, rgba(104,63,160,.72), rgba(38,22,67,.9));
    border: 1px solid rgba(224,190,255,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 5px 14px rgba(0,0,0,.3);
  }

  .mu-side-panel-head strong {
    display: block;
    color: #fff7dc;
    font-size: 13px;
    line-height: 1.1;
    letter-spacing: 1.6px;
  }

  .mu-side-panel-head span {
    display: block;
    margin-top: 4px;
    color: rgba(222,213,236,.55);
    font-size: 9px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .9px;
  }

  .site-menu__nav--nologin .site-menu__list {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .site-menu__nav--nologin .site-menu__item {
    margin: 0 !important;
    padding: 0 !important;
  }

  .site-menu__nav--nologin .site-menu__link.site-menu__nav-button {
    min-height: 44px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(232,226,239,.75) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .15px !important;
    transform: none !important;
  }

  .site-menu__nav--nologin .site-menu__link.site-menu__nav-button::before,
  .site-menu__nav--nologin .site-menu__link.site-menu__nav-button::after {
    display: none !important;
  }

  .site-menu__nav--nologin .site-menu__link.site-menu__nav-button i {
    display: grid !important;
    place-items: center !important;
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    border-radius: 9px !important;
    color: #cab7e4 !important;
    background: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(255,255,255,.055) !important;
    transition: .2s ease !important;
  }

  .site-menu__nav--nologin .site-menu__link.site-menu__nav-button:hover,
  .site-menu__nav--nologin .site-menu__link.site-menu__nav-button.active {
    color: #fff !important;
    background: linear-gradient(90deg, rgba(105,62,165,.36), rgba(53,31,86,.18)) !important;
    border-color: rgba(193,155,244,.14) !important;
    box-shadow: inset 3px 0 0 #b384df, inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  .site-menu__nav--nologin .site-menu__link.site-menu__nav-button:hover i,
  .site-menu__nav--nologin .site-menu__link.site-menu__nav-button.active i {
    color: #ffe6a0 !important;
    background: rgba(151,94,217,.16) !important;
    border-color: rgba(226,193,255,.15) !important;
    box-shadow: 0 0 14px rgba(146,83,219,.18) !important;
  }

  .site-menu__nav--nologin .mu-nav-event {
    margin-top: 5px !important;
    color: #f9e5ad !important;
    background: linear-gradient(90deg, rgba(137,90,29,.17), rgba(80,48,13,.05)) !important;
    border-color: rgba(226,181,78,.13) !important;
  }
  .site-menu__nav--nologin .mu-nav-event i {
    color: #f4c75c !important;
    background: rgba(203,147,35,.10) !important;
  }
  .site-menu__nav--nologin .mu-nav-invasion i {
    color: #ec9c9c !important;
    background: rgba(176,59,66,.09) !important;
  }

  .site-menu__social {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
    margin: 13px 2px 0 !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255,255,255,.07) !important;
  }

  .site-menu__social .site-menu__social-link {
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.025) !important;
    box-shadow: none !important;
    font-size: 10px !important;
  }
}

/* Discord flotante: debajo de YouTube, fuera del menú izquierdo */
.mu-discord-float {
  position: fixed;
  right: 18px;
  top: calc(42% + 215px);
  z-index: 9988;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none !important;
  width: 110px;
  padding: 12px 8px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(76,88,206,.96), rgba(29,35,92,.98));
  border: 2px solid rgba(129,142,255,.58);
  box-shadow: 0 0 22px rgba(88,101,242,.38), 0 8px 20px rgba(0,0,0,.45);
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.mu-discord-float:hover {
  transform: scale(1.07);
  filter: brightness(1.1);
  box-shadow: 0 0 28px rgba(110,124,255,.52), 0 9px 22px rgba(0,0,0,.48);
}
.mu-discord-float__icon {
  font-size: 34px;
  line-height: 1;
  color: #a9b4ff;
  margin-bottom: 6px;
  text-shadow: 0 0 12px rgba(109,123,255,.72);
}
.mu-discord-float__label {
  color: #fff !important;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1.2;
  text-transform: uppercase;
}
.mu-discord-float__sub {
  margin-top: 2px;
  color: rgba(220,224,255,.82);
  font-size: 9px;
  text-align: center;
}

@media (max-width: 768px) {
  .mu-discord-float {
    right: 8px;
    top: calc(40% + 182px);
    width: 88px;
    padding: 10px 6px;
  }
  .mu-discord-float__icon { font-size: 27px; }
  .mu-discord-float__label { font-size: 11px; }
  .mu-discord-float__sub { font-size: 8px; }
}


/* ===== HOME WEBZEN HERO + NEW LAYOUT ===== */
.wrapper--wide{max-width:1280px;width:min(1280px,calc(100% - 32px));margin:0 auto;}
.webzen-hero{padding:8px 0 22px;}
.webzen-hero__shell{position:relative;background:rgba(6,10,18,.88);border:1px solid rgba(103,126,173,.25);box-shadow:0 20px 48px rgba(0,0,0,.35);overflow:hidden;}
.webzen-hero__slides .slick-list,.webzen-hero__slides .slick-track{height:100%;}
.webzen-hero__slide,.webzen-hero__slide-link{display:block;position:relative;}
.webzen-hero__slide img{display:block;width:100%;height:580px;object-fit:cover;}
.webzen-hero__slide-link::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.25) 46%,rgba(0,0,0,.58) 100%),linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.35) 100%);z-index:1;}
.webzen-hero__overlay{position:absolute;left:7%;bottom:24%;z-index:2;max-width:min(560px,48vw);color:#fff;text-shadow:0 3px 18px rgba(0,0,0,.55);}
.webzen-hero__kicker{display:inline-block;margin-bottom:14px;padding:7px 12px;border:1px solid rgba(255,255,255,.25);background:rgba(10,16,28,.55);font-size:12px;letter-spacing:.22em;text-transform:uppercase;}
.webzen-hero__overlay h2{margin:0 0 14px;font-size:56px;line-height:1.05;font-weight:700;color:#fff;}
.webzen-hero__overlay p{margin:0;max-width:520px;font-size:18px;line-height:1.55;color:rgba(255,255,255,.88);}
.webzen-hero__online-chip{position:absolute;top:18px;right:22px;z-index:10;display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid rgba(76,219,122,.35);background:rgba(5,14,10,.78);backdrop-filter:blur(5px);}
.webzen-hero__online-label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#93d7ab;}
.webzen-hero__online-value{font-size:20px;line-height:1;color:#fff;}
.webzen-hero__thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));background:rgba(6,9,16,.96);}
.webzen-hero__thumb{display:grid;grid-template-columns:92px 1fr;align-items:center;gap:12px;padding:12px 14px;color:#c9d3e7;background:transparent;border:0;border-right:1px solid rgba(255,255,255,.06);border-top:1px solid rgba(255,255,255,.06);cursor:pointer;transition:.25s ease;text-align:left;min-height:92px;}
.webzen-hero__thumb:hover,.webzen-hero__thumb.is-active{background:rgba(218,104,49,.9);color:#fff;}
.webzen-hero__thumb-image{display:block;height:64px;overflow:hidden;background:#111c2b;}
.webzen-hero__thumb-image img{width:100%;height:100%;object-fit:cover;display:block;}
.webzen-hero__thumb-copy strong{display:block;font-size:15px;line-height:1.15;font-weight:700;}
.webzen-hero__thumb-copy small{display:block;margin-top:5px;font-size:12px;line-height:1.35;color:inherit;opacity:.9;}
.webzen-hero__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:52px;height:70px;border:1px solid rgba(255,255,255,.22);background:rgba(7,11,18,.62);color:#fff;font-size:28px;cursor:pointer;transition:.2s ease;}
.webzen-hero__arrow:hover{background:rgba(218,104,49,.88);}
.webzen-hero__arrow--prev{left:18px;}
.webzen-hero__arrow--next{right:18px;}
.main-new__content{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:30px;align-items:start;}
.main-new__left,.main-new__right{width:auto;margin:0;}
.home-content-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:30px;align-items:start;}
.home-ranking-widget,.home-ranking-widget *{box-sizing:border-box;}
.home-ranking-widget{background:#150e24;border-radius:10px;overflow:hidden;position:sticky;top:85px;}
.home-ranking-widget::before{content:'';position:absolute;inset:0;border:1px solid rgba(83,77,104,.9);border-radius:10px;pointer-events:none;}
.home-ranking-widget__switch{display:flex;padding:10px;gap:8px;background:rgba(10,8,18,.95);border-bottom:1px solid rgba(255,255,255,.06);}
.home-ranking-widget__tab{flex:1;min-height:38px;padding:0 10px;border:1px solid rgba(109,123,162,.3);background:#1b1730;color:#cfd9ec;font-size:12px;font-weight:700;text-transform:uppercase;cursor:pointer;transition:.2s ease;}
.home-ranking-widget__tab.is-active,.home-ranking-widget__tab:hover{background:linear-gradient(135deg,#ec8b3a,#ca5d2a);border-color:rgba(255,195,128,.45);color:#fff;}
.home-ranking-widget__panel{display:none;padding:14px;}
.home-ranking-widget__panel.is-active{display:block;}
.home-ranking-widget__head,.home-ranking-widget__row{display:grid;grid-template-columns:34px minmax(0,1fr) 58px 52px;gap:10px;align-items:center;}
.home-ranking-widget__head{padding:0 0 10px;color:#8ea2c7;font-size:11px;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.08);}
.home-ranking-widget__head--guild,.home-ranking-widget__row--guild{grid-template-columns:34px minmax(0,1fr) 72px;}
.home-ranking-widget__row{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:13px;color:#dde6f4;}
.home-ranking-widget__row:last-child{border-bottom:0;padding-bottom:0;}
.home-ranking-widget__place{font-weight:700;color:#ffb36a;}
.home-ranking-widget__player{display:flex;align-items:center;gap:10px;min-width:0;}
.home-ranking-widget__player img,.home-ranking-widget__guild-logo img{display:block;width:28px;height:28px;object-fit:cover;border-radius:6px;background:#0c1020;}
.home-ranking-widget__player > span:last-child,.home-ranking-widget__player a{display:inline-flex;align-items:center;gap:6px;min-width:0;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.home-ranking-widget__level,.home-ranking-widget__reset{text-align:right;color:#86d3ff;font-weight:700;}
.home-ranking-widget__status{display:inline-block;width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 3px rgba(255,255,255,.05);}
.home-ranking-widget__status.is-online{background:#31df7a;}
.home-ranking-widget__status.is-offline{background:#7b8599;}
.home-ranking-widget__empty{margin:0;color:#cdd6e5;font-size:13px;line-height:1.6;}
.statistics__item--online-compact{display:flex;justify-content:space-between;align-items:center;}
.statistics__item-online-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#33df7b;box-shadow:0 0 12px rgba(51,223,123,.55);margin-right:8px;vertical-align:middle;}
.main-rightbar__server-statistics .statistics__title span{letter-spacing:.08em;}
@media (max-width: 1200px){
  .main-new__content{grid-template-columns:minmax(0,1fr);}
  .home-content-grid{grid-template-columns:minmax(0,1fr);}
  .home-ranking-widget{position:relative;top:0;}
  .main-rightbar__scroll{position:relative;top:0;overflow:visible;}
}
@media (max-width: 991px){
  .webzen-hero__slide img{height:430px;}
  .webzen-hero__overlay{left:5%;right:5%;bottom:18%;max-width:none;}
  .webzen-hero__overlay h2{font-size:38px;}
  .webzen-hero__overlay p{font-size:16px;}
  .webzen-hero__thumbs{grid-template-columns:1fr 1fr;}
}
@media (max-width: 640px){
  .wrapper--wide{width:min(100%,calc(100% - 18px));}
  .webzen-hero__slide img{height:320px;}
  .webzen-hero__overlay{bottom:14%;}
  .webzen-hero__overlay h2{font-size:28px;}
  .webzen-hero__overlay p{font-size:14px;line-height:1.45;}
  .webzen-hero__thumbs{grid-template-columns:1fr;}
  .webzen-hero__thumb{grid-template-columns:76px 1fr;min-height:80px;}
  .webzen-hero__online-chip{top:12px;right:12px;padding:8px 10px;}
  .webzen-hero__online-value{font-size:16px;}
  .webzen-hero__arrow{width:40px;height:52px;font-size:22px;}
}


/* ===== V7.3 HOME: BANNER ANCHO + SIDEBAR ORDENADO ===== */
@media screen and (min-width: 1001px) {
  .wrapper--wide {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    padding-left: 300px !important;
    padding-right: 28px !important;
  }
}
@media screen and (min-width: 1501px) {
  .wrapper--wide { padding-left: 300px !important; padding-right: 36px !important; }
}
.webzen-hero { padding-top: 10px; padding-bottom: 28px; }
.webzen-hero__shell { width: 100%; border-radius: 2px; }
.webzen-hero__slide img {
  height: clamp(520px, 35vw, 680px) !important;
  aspect-ratio: 2.45 / 1;
  object-fit: cover;
  object-position: center;
}
.webzen-hero__thumbs { grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); }
.webzen-hero__thumb { min-height: 96px; grid-template-columns: 104px 1fr; }
.webzen-hero__thumb-image { height: 70px; }

.main-new { padding-top: 4px; }
.main-new__content {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 320px !important;
  gap: 28px !important;
  align-items: start;
}
.main-new__left { width: auto !important; margin: 0 !important; min-width: 0; }
.main-new__right { width: auto !important; margin: 0 !important; }
.main-leftbar__trailer { display: none !important; }
.main-leftbar__news { width: 100% !important; }
.news-card { margin: 0 !important; }
.news-card__header { display:block; padding:18px 22px; }
.news-card__body { padding: 0 18px 18px; }
.newsmodule__item { padding-left: 6px; padding-right: 6px; }

.main-rightbar__scroll {
  position: sticky !important;
  top: 84px !important;
  overflow: visible !important;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.main-rightbar__server-statistics,
.home-ranking-widget { margin: 0 !important; width: 100% !important; }
.home-ranking-widget { position: relative !important; top: auto !important; }
.home-ranking-widget__panel { padding: 12px !important; }
.home-ranking-widget__row { grid-template-columns: 28px minmax(0,1fr) 50px 46px !important; gap: 7px !important; }
.home-ranking-widget__head { grid-template-columns: 28px minmax(0,1fr) 50px 46px !important; gap: 7px !important; }
.home-ranking-widget__head--guild,
.home-ranking-widget__row--guild { grid-template-columns: 28px minmax(0,1fr) 62px !important; }
.home-ranking-widget__player { gap: 7px !important; }
.home-ranking-widget__player img,
.home-ranking-widget__guild-logo img { width: 24px !important; height: 24px !important; }

/* El online queda deliberadamente discreto: solo una cápsula pequeña en el banner. */
.webzen-hero__online-chip {
  transform: scale(.8);
  transform-origin: top right;
  top: 14px !important;
  right: 16px !important;
}
.statistics__item--online-compact { font-size: 11px !important; opacity: .88; }

@media screen and (max-width: 1250px) and (min-width: 1001px) {
  .main-new__content { grid-template-columns: minmax(0,1fr) 290px !important; gap: 20px !important; }
  .wrapper--wide { padding-left: 292px !important; padding-right: 22px !important; }
}
@media screen and (max-width: 1000px) {
  .wrapper--wide { width: 100% !important; max-width: none !important; padding: 0 16px !important; }
  .webzen-hero__slide img { height: 430px !important; }
  .main-new__content { grid-template-columns: 1fr !important; }
  .main-rightbar__scroll { position: relative !important; top: 0 !important; }
}
@media screen and (max-width: 640px) {
  .wrapper--wide { padding: 0 9px !important; }
  .webzen-hero__slide img { height: 340px !important; }
  .webzen-hero__thumb { grid-template-columns: 82px 1fr !important; min-height: 82px; }
  .webzen-hero__thumb-image { height: 58px; }
}

.home-ranking-widget__head--level,
.home-ranking-widget__row--level { grid-template-columns: 28px minmax(0,1fr) 56px !important; }

/* ===== V7.4 HOME COMMAND CENTER / MEDIA / EVENTS ===== */
.home-command-center{padding:0 0 28px;}
.home-flow-wrapper{display:flex;flex-direction:column;gap:18px;}
.home-quick-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.home-quick-action{min-height:78px;display:flex;align-items:center;gap:14px;padding:14px 16px;background:linear-gradient(180deg,rgba(24,31,46,.97),rgba(11,15,25,.98));border:1px solid rgba(111,132,170,.26);color:#e8eef9;text-decoration:none;position:relative;overflow:hidden;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;}
.home-quick-action::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,#cf6a32,transparent);opacity:.45;}
.home-quick-action:hover{transform:translateY(-2px);border-color:rgba(231,139,77,.55);box-shadow:0 12px 30px rgba(0,0,0,.24);color:#fff;}
.home-quick-action--event{background:linear-gradient(135deg,rgba(67,27,90,.96),rgba(18,16,35,.98));}
.home-quick-action__icon{width:42px;height:42px;display:grid;place-items:center;flex:0 0 42px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);font-size:18px;color:#ffad67;}
.home-quick-action strong,.home-quick-action small{display:block;}
.home-quick-action strong{font-size:14px;line-height:1.25;text-transform:uppercase;letter-spacing:.03em;}
.home-quick-action small{margin-top:4px;font-size:11px;color:#8e9ab2;}

.home-live-events{background:linear-gradient(180deg,rgba(15,20,31,.97),rgba(8,11,18,.98));border:1px solid rgba(101,121,157,.25);padding:16px 18px;box-shadow:0 12px 34px rgba(0,0,0,.22);}
.home-live-events__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:14px;}
.home-live-events__eyebrow{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#9fb0cd;}
.home-live-events__pulse{width:8px;height:8px;border-radius:50%;background:#35dc77;box-shadow:0 0 0 0 rgba(53,220,119,.5);animation:homePulse 1.8s infinite;}
@keyframes homePulse{0%{box-shadow:0 0 0 0 rgba(53,220,119,.45)}70%{box-shadow:0 0 0 8px rgba(53,220,119,0)}100%{box-shadow:0 0 0 0 rgba(53,220,119,0)}}
.home-live-events__head h3{margin:5px 0 0;color:#fff;font-size:20px;line-height:1.15;}
.home-live-events__meta{display:flex;align-items:center;gap:18px;font-size:11px;color:#8390a7;}
.home-live-events__meta a{color:#ff9c58;text-decoration:none;font-weight:700;text-transform:uppercase;letter-spacing:.05em;}
.home-live-events__meta a i{margin-left:5px;}
.home-live-events__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.home-live-event{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'state clock' 'name time';gap:6px 14px;align-items:end;padding:12px 14px;background:#121827;border:1px solid rgba(104,122,157,.2);text-decoration:none;color:#dbe4f3;min-width:0;transition:.2s ease;}
.home-live-event:hover{border-color:rgba(230,139,76,.48);background:#171f30;color:#fff;}
.home-live-event.is-primary{border-color:rgba(229,134,68,.42);background:linear-gradient(135deg,rgba(58,31,28,.92),rgba(19,24,38,.96));}
.home-live-event__state{grid-area:state;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:#ffaf72;font-weight:800;}
.home-live-event--active .home-live-event__state{color:#4ce18a;}
.home-live-event--soon .home-live-event__state{color:#ffd66f;}
.home-live-event__name{grid-area:name;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.home-live-event__time{grid-area:time;text-align:right;}
.home-live-event__time small,.home-live-event__time strong{display:block;}
.home-live-event__time small{font-size:9px;text-transform:uppercase;color:#6f7d96;letter-spacing:.08em;}
.home-live-event__time strong{margin-top:2px;font-size:16px;color:#fff;font-variant-numeric:tabular-nums;}
.home-live-event__clock{grid-area:clock;font-size:11px;color:#8493aa;text-align:right;}
.home-live-event--loading{display:block;min-height:65px;color:#8f9db4;}

/* News: featured first item + clean secondary cards */
.news-card__body{background:linear-gradient(180deg,rgba(20,14,36,.98),rgba(12,9,23,.98));}
.newsmodule{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important;}
.newsmodule__item{margin:0 !important;padding:16px !important;background:rgba(27,21,44,.9);border:1px solid rgba(94,84,119,.32);min-height:108px;transition:.2s ease;}
.newsmodule__item:hover{border-color:rgba(225,132,67,.42);transform:translateY(-1px);}
.newsmodule__item:first-child{grid-column:1/-1;min-height:150px;padding:24px !important;background:linear-gradient(135deg,rgba(62,30,42,.96),rgba(25,20,46,.96));position:relative;overflow:hidden;}
.newsmodule__item:first-child::after{content:'LATEST';position:absolute;right:18px;top:16px;font-size:9px;letter-spacing:.2em;color:#ffb173;border:1px solid rgba(255,177,115,.3);padding:5px 7px;}
.newsmodule__title{display:inline-block;margin-bottom:8px;color:#ff9c58 !important;font-size:10px !important;letter-spacing:.12em;text-transform:uppercase;}
.newsmodule__info-list{display:block !important;}
.newsmodule__info-item{margin:0 0 8px !important;}
.newsmodule__info-item:first-child a{font-size:15px;line-height:1.4;color:#eef3ff !important;font-weight:700;}
.newsmodule__item:first-child .newsmodule__info-item:first-child a{font-size:21px;}
.newsmodule__info-item:last-child{font-size:11px;color:#7f8ba2;}

/* Sidebar ordering and Castle Siege */
.home-sidebar-castle{width:100%;}
.home-sidebar-castle:empty{display:none;}
.home-sidebar-castle .panel{margin:0 !important;background:#150e24 !important;border:1px solid rgba(83,77,104,.8) !important;border-radius:10px;overflow:hidden;}
.home-sidebar-castle .panel-heading{padding:13px 14px;background:rgba(10,8,18,.92);border-bottom:1px solid rgba(255,255,255,.06);}
.home-sidebar-castle .panel-title{margin:0;color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:.08em;}
.home-sidebar-castle .panel-body{padding:14px;}
.home-sidebar-castle .castle-owner-grid{gap:10px !important;}
.home-sidebar-castle .castle-owner-logo img{max-width:64px !important;height:auto !important;}
.home-sidebar-castle .castle-owner-text,.home-sidebar-castle .castle-stage-col{font-size:11px;line-height:1.45;}

.home-showcase{padding:34px 0 50px;}
.home-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px;}
.home-section-heading__eyebrow{display:block;margin-bottom:5px;font-size:10px;letter-spacing:.2em;color:#d57b42;text-transform:uppercase;font-weight:800;}
.home-section-heading h2{margin:0;color:#fff;font-size:28px;line-height:1.1;}
.home-section-heading p{margin:0;color:#8591a7;font-size:13px;}
.home-section-heading__link{color:#ff9453;text-decoration:none;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;}
.home-section-heading__link i{margin-right:6px;}
.home-feature-events{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:34px;}
.home-feature-event{position:relative;min-height:235px;overflow:hidden;border:1px solid rgba(113,126,153,.28);text-decoration:none;color:#fff;background:#0d121d;}
.home-feature-event__bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .45s ease;}
.home-feature-event::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,14,.08) 0%,rgba(5,8,14,.82) 62%,rgba(5,8,14,.98) 100%);}
.home-feature-event:hover .home-feature-event__bg{transform:scale(1.045);}
.home-feature-event__content{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;}
.home-feature-event__tag{display:inline-block;margin-bottom:8px;padding:5px 7px;background:rgba(217,104,48,.9);font-size:9px;letter-spacing:.15em;font-weight:800;}
.home-feature-event h3{margin:0 0 7px;font-size:23px;color:#fff;}
.home-feature-event p{margin:0 0 12px;font-size:12px;line-height:1.55;color:#c7d0df;max-width:440px;}
.home-feature-event__cta{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#ffae72;font-weight:800;}
.home-feature-event__cta i{margin-left:5px;}

.home-media{padding:24px;background:linear-gradient(180deg,rgba(18,23,35,.96),rgba(10,13,22,.98));border:1px solid rgba(98,115,148,.25);margin-bottom:26px;}
.home-section-heading--media{margin-bottom:20px;}
.home-media__layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr);gap:24px;}
.home-media__subhead{display:flex;align-items:center;gap:9px;margin-bottom:12px;color:#c9d4e6;font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;}
.home-media__subhead i{color:#e88042;}
.home-video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.home-video-card{display:block;background:#111824;border:1px solid rgba(101,118,151,.22);text-decoration:none;color:#fff;overflow:hidden;transition:.2s ease;}
.home-video-card:hover{transform:translateY(-2px);border-color:rgba(229,133,69,.48);}
.home-video-card__visual{position:relative;display:block;aspect-ratio:16/9;background:#080b12;overflow:hidden;}
.home-video-card__visual img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}
.home-video-card:hover .home-video-card__visual img{transform:scale(1.035);}
.home-video-card__visual::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(4,7,12,.52));}
.home-video-card__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(209,44,44,.92);box-shadow:0 8px 25px rgba(0,0,0,.4);font-size:14px;color:#fff;}
.home-video-card__copy{display:block;padding:12px 13px;}
.home-video-card__copy strong,.home-video-card__copy small{display:block;}
.home-video-card__copy strong{font-size:13px;line-height:1.3;}
.home-video-card__copy small{margin-top:5px;color:#8491a7;font-size:11px;line-height:1.4;}
.home-guide-list{display:flex;flex-direction:column;gap:8px;}
.home-guide-card{display:grid;grid-template-columns:38px minmax(0,1fr) 14px;align-items:center;gap:10px;padding:11px 12px;background:#111824;border:1px solid rgba(101,118,151,.2);text-decoration:none;color:#e8eef8;transition:.2s ease;}
.home-guide-card:hover{border-color:rgba(228,135,71,.45);background:#151e2d;color:#fff;transform:translateX(2px);}
.home-guide-card__icon{width:38px;height:38px;display:grid;place-items:center;background:rgba(224,126,63,.1);color:#f09a5e;border:1px solid rgba(224,126,63,.18);}
.home-guide-card__copy strong,.home-guide-card__copy small{display:block;}
.home-guide-card__copy strong{font-size:12px;line-height:1.25;}
.home-guide-card__copy small{margin-top:3px;font-size:10px;line-height:1.35;color:#7f8da3;}
.home-guide-card__arrow{font-size:10px;color:#66768f;}

.home-bottom-grid{display:grid;grid-template-columns:minmax(320px,.8fr) minmax(0,1.35fr);gap:16px;}
.home-patch-card{padding:24px;background:linear-gradient(135deg,rgba(35,28,52,.98),rgba(15,19,29,.98));border:1px solid rgba(105,92,135,.35);}
.home-patch-card__eyebrow{font-size:9px;letter-spacing:.16em;color:#dc8b54;text-transform:uppercase;font-weight:800;}
.home-patch-card h3{margin:8px 0 14px;color:#fff;font-size:22px;}
.home-patch-card ul{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:8px;}
.home-patch-card li{display:flex;gap:9px;align-items:flex-start;color:#aeb9cb;font-size:11px;line-height:1.5;}
.home-patch-card li i{margin-top:3px;color:#4bd584;font-size:9px;}
.home-patch-card>a{color:#ff9e5c;font-size:11px;text-decoration:none;text-transform:uppercase;font-weight:800;letter-spacing:.05em;}
.home-download-cta{position:relative;min-height:260px;overflow:hidden;border:1px solid rgba(111,126,157,.25);background:#0b101a;}
.home-download-cta__bg{position:absolute;inset:0;background-size:cover;background-position:center 30%;}
.home-download-cta::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,8,13,.95) 0%,rgba(5,8,13,.62) 58%,rgba(5,8,13,.28) 100%);}
.home-download-cta__content{position:relative;z-index:2;padding:32px;max-width:520px;}
.home-download-cta__content>span{font-size:9px;letter-spacing:.2em;color:#f3a26d;font-weight:800;}
.home-download-cta h3{margin:8px 0 8px;color:#fff;font-size:34px;}
.home-download-cta p{margin:0 0 20px;color:#c0c9d7;font-size:13px;line-height:1.55;}
.home-download-cta__actions{display:flex;flex-wrap:wrap;gap:10px;}
.home-download-cta__actions a{display:inline-flex;align-items:center;gap:8px;padding:11px 15px;background:#d96d34;color:#fff;text-decoration:none;font-size:11px;text-transform:uppercase;font-weight:800;letter-spacing:.04em;border:1px solid #e88956;}
.home-download-cta__actions a.home-download-cta__secondary{background:rgba(13,19,31,.75);border-color:rgba(255,255,255,.16);}

@media screen and (min-width:1001px){
  .home-command-center .wrapper--wide{padding-left:300px !important;padding-right:28px !important;}
}
@media screen and (max-width:1250px){
  .home-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr));}
  .home-feature-events{grid-template-columns:1fr 1fr;}
  .home-feature-event:last-child{grid-column:1/-1;}
  .home-media__layout{grid-template-columns:1fr;}
}
@media screen and (max-width:1000px){
  .home-command-center .wrapper--wide{padding-left:16px !important;padding-right:16px !important;}
  .home-live-events__list{grid-template-columns:1fr;}
  .home-section-heading{align-items:flex-start;flex-direction:column;}
  .home-bottom-grid{grid-template-columns:1fr;}
}
@media screen and (max-width:768px){
  .newsmodule{grid-template-columns:1fr !important;}
  .newsmodule__item:first-child{grid-column:auto;}
  .home-feature-events{grid-template-columns:1fr;}
  .home-feature-event:last-child{grid-column:auto;}
  .home-video-grid{grid-template-columns:1fr;}
}
@media screen and (max-width:560px){
  .home-quick-actions{grid-template-columns:1fr;}
  .home-live-events__head{align-items:flex-start;flex-direction:column;}
  .home-live-events__meta{width:100%;justify-content:space-between;}
  .home-media{padding:16px;}
  .home-download-cta__content{padding:24px 20px;}
  .home-download-cta h3{font-size:28px;}
}


/* ===== V7.4 ACCESOS FLOTANTES DERECHA ===== */
.mu-action-dock{
  position:fixed;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  z-index:9995;
  display:flex;
  flex-direction:column;
  gap:9px;
  width:54px;
  pointer-events:none;
}
.mu-action-dock__item{
  position:relative;
  width:54px;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  border-radius:14px 0 0 14px;
  text-decoration:none!important;
  overflow:visible;
  pointer-events:auto;
  transition:transform .2s ease,filter .2s ease;
}
.mu-action-dock__item:hover{transform:translateX(-2px);filter:brightness(1.08);}
.mu-action-dock__icon{
  position:relative;
  z-index:2;
  flex:0 0 54px;
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:#fff;
  font-size:25px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 8px 22px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(8px);
}
.mu-action-dock__copy{
  position:absolute;
  right:45px;
  top:0;
  height:54px;
  min-width:0;
  width:0;
  padding:0;
  overflow:hidden;
  opacity:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  white-space:nowrap;
  border-radius:12px 0 0 12px;
  background:rgba(7,9,15,.96);
  border:1px solid rgba(255,255,255,.10);
  border-right:0;
  box-shadow:0 8px 20px rgba(0,0,0,.34);
  transition:width .22s ease,opacity .18s ease,padding .22s ease;
}
.mu-action-dock__item:hover .mu-action-dock__copy,
.mu-action-dock__item:focus-visible .mu-action-dock__copy{
  width:158px;
  padding:0 18px 0 14px;
  opacity:1;
}
.mu-action-dock__copy strong{display:block;color:#fff;font-size:12px;font-weight:900;letter-spacing:.7px;text-transform:uppercase;line-height:1.1;}
.mu-action-dock__copy small{display:block;margin-top:4px;color:rgba(222,230,243,.62);font-size:9px;letter-spacing:.15px;}
.mu-action-dock__item--ruleta .mu-action-dock__icon{background:linear-gradient(145deg,#4f217f,#21102f);border-color:rgba(255,210,105,.48);box-shadow:0 0 20px rgba(147,78,232,.30),0 8px 22px rgba(0,0,0,.38);}
.mu-action-dock__item--ruleta .mu-action-dock__copy{border-color:rgba(232,190,86,.22);}
.mu-action-dock__icon--ruleta img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 2px 7px rgba(0,0,0,.55));}
.mu-action-dock__item--youtube .mu-action-dock__icon{background:linear-gradient(145deg,#c91e2d,#4e0910);border-color:rgba(255,99,99,.45);}
.mu-action-dock__item--youtube .mu-action-dock__icon i{color:#fff;text-shadow:0 0 12px rgba(255,65,65,.45);}
.mu-action-dock__item--discord .mu-action-dock__icon{background:linear-gradient(145deg,#5968de,#232b72);border-color:rgba(151,163,255,.46);}
.mu-action-dock__item--discord .mu-action-dock__icon i{color:#fff;text-shadow:0 0 12px rgba(130,145,255,.48);}
@media screen and (min-width:1001px){
  .wrapper--wide{padding-right:88px!important;}
  .home-command-center .wrapper--wide{padding-right:88px!important;}
}
@media screen and (max-width:1000px){
  .mu-action-dock{right:7px;width:46px;gap:7px;}
  .mu-action-dock__item,.mu-action-dock__icon{width:46px;height:46px;flex-basis:46px;border-radius:12px;}
  .mu-action-dock__icon{font-size:21px;}
  .mu-action-dock__icon--ruleta img{width:36px;height:36px;}
  .mu-action-dock__copy{display:none!important;}
}
@media screen and (max-width:640px){
  .mu-action-dock{top:auto;right:10px;bottom:12px;transform:none;flex-direction:row;width:auto;}
  .mu-action-dock__item,.mu-action-dock__icon{width:42px;height:42px;flex-basis:42px;border-radius:11px;}
  .mu-action-dock__icon{font-size:19px;}
  .mu-action-dock__icon--ruleta img{width:32px;height:32px;}
}


/* ===== MU MAYA LIVE RANKINGS ===== */
.mu-live-rankings{max-width:1180px;margin:0 auto;padding:24px;border:1px solid rgba(218,170,77,.22);border-radius:14px;background:linear-gradient(180deg,rgba(18,14,27,.97),rgba(7,8,13,.98));box-shadow:0 22px 50px rgba(0,0,0,.3);}
.mu-live-rankings__head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.07);}
.mu-live-rankings__head span{display:block;color:#d9a957;font-size:10px;font-weight:900;letter-spacing:.22em;}
.mu-live-rankings__head h1{margin:5px 0 0;color:#fff1c8;font-family:"Philosopher",serif;font-size:32px;}
.mu-live-rankings__head small{color:#8794aa;font-size:11px;}
.mu-live-rankings__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
.mu-live-rankings__tabs a{padding:10px 14px;border:1px solid rgba(255,255,255,.08);border-radius:7px;background:#151827;color:#b9c4d7;font-size:12px;font-weight:800;text-transform:uppercase;}
.mu-live-rankings__tabs a.is-active,.mu-live-rankings__tabs a:hover{border-color:rgba(235,170,74,.4);background:linear-gradient(135deg,#b35e28,#d98b3e);color:#fff;}
.mu-live-rankings__table{overflow:hidden;border:1px solid rgba(255,255,255,.06);border-radius:10px;}
.mu-live-rankings__row{display:grid;grid-template-columns:46px 170px minmax(170px,1fr) 90px 90px 170px;gap:12px;align-items:center;min-height:64px;padding:8px 14px;border-bottom:1px solid rgba(255,255,255,.055);color:#d9e1ed;font-size:13px;}
.mu-live-rankings__row:last-child{border-bottom:0;}.mu-live-rankings__row.is-head{min-height:42px;background:rgba(255,255,255,.035);color:#7f8ca2;font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;}
.mu-live-rankings__row--guild,.mu-live-rankings__table--guild .mu-live-rankings__row{grid-template-columns:46px minmax(180px,1fr) minmax(180px,1fr) 120px;}
.mu-live-rankings__class{display:flex;align-items:center;gap:10px;min-width:0;}.mu-live-rankings__class img{width:44px;height:44px;border-radius:8px;object-fit:cover;border:1px solid rgba(218,170,77,.28);}.mu-live-rankings__class small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#b8c4d7;font-size:11px;}
.mu-live-rankings__player a{color:#fff0bf;font-weight:800;}.mu-live-rankings__number{color:#79d7ff;font-weight:800;}.mu-live-rankings__pos{color:#e7ad55;font-weight:900;}.mu-live-rankings__error{padding:20px;color:#e7b2b2;background:rgba(112,29,29,.18);border-radius:8px;}
@media(max-width:850px){.mu-live-rankings{padding:14px}.mu-live-rankings__table{overflow-x:auto}.mu-live-rankings__row{min-width:760px}.mu-live-rankings__head{align-items:flex-start;flex-direction:column}}


/* ranking thumbnails */
.mu-live-rankings__player--with-thumb{display:flex;align-items:center;gap:10px;min-width:0;}
.mu-live-rankings__player--with-thumb img{width:36px;height:36px;border-radius:8px;object-fit:cover;border:1px solid rgba(218,170,77,.22);background:#111827;flex:0 0 36px;}
.mu-live-rankings__player--with-thumb a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ===== MU MAYA PORTAL PROFESSIONAL LAYER v80 ===== */
.webzen-hero__cta{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}.webzen-hero__cta a{display:inline-flex;align-items:center;gap:9px;padding:13px 20px;border-radius:6px;background:linear-gradient(135deg,#d47832,#f0a147);color:#fff;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 10px 28px rgba(217,117,43,.24)}.webzen-hero__cta a.is-secondary{background:rgba(8,13,22,.68);border:1px solid rgba(255,255,255,.2);box-shadow:none}.webzen-hero__cta a:hover{transform:translateY(-1px);filter:brightness(1.08)}

.mu-notification-center{position:absolute;top:18px;right:130px;z-index:12}.mu-notification-center__button{position:relative;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(7,11,18,.78);color:#f7d891;cursor:pointer;backdrop-filter:blur(6px)}.mu-notification-center__button>span{position:absolute;right:-4px;top:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:10px;background:#d75935;color:#fff;font-size:10px;font-weight:900;display:grid;place-items:center}.mu-notification-center__panel{position:absolute;right:0;top:52px;width:330px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.2s ease;border:1px solid rgba(218,170,77,.24);border-radius:10px;background:rgba(7,10,17,.98);box-shadow:0 18px 50px rgba(0,0,0,.5);overflow:hidden}.mu-notification-center__panel.is-open{opacity:1;visibility:visible;transform:none}.mu-notification-center__head{display:flex;justify-content:space-between;padding:13px 14px;border-bottom:1px solid rgba(255,255,255,.07)}.mu-notification-center__head strong{color:#fff1c6}.mu-notification-center__head small{color:#7f8ca1}.mu-notification-center__panel>a{display:flex;gap:11px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.05);color:#d5deed}.mu-notification-center__panel>a:last-child{border-bottom:0}.mu-notification-center__panel>a>i{width:28px;height:28px;display:grid;place-items:center;border-radius:7px;background:rgba(218,170,77,.1);color:#e1ad5d}.mu-notification-center__panel>a span{min-width:0}.mu-notification-center__panel>a strong,.mu-notification-center__panel>a small{display:block}.mu-notification-center__panel>a strong{font-size:12px;color:#f4ead3}.mu-notification-center__panel>a small{margin-top:3px;font-size:10px;line-height:1.4;color:#8997ac}

.home-top3-section{padding:14px 0 22px}.home-top3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.home-top3__card{position:relative;display:flex;align-items:center;gap:15px;min-height:138px;padding:17px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:linear-gradient(145deg,rgba(25,21,33,.96),rgba(9,11,18,.96));overflow:hidden}.home-top3__card:after{content:"";position:absolute;inset:auto -20px -55px auto;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(218,170,77,.14),transparent 70%)}.home-top3__card--1{border-color:rgba(237,192,84,.42);box-shadow:0 15px 35px rgba(212,151,51,.09)}.home-top3__card--2{border-color:rgba(185,196,216,.3)}.home-top3__card--3{border-color:rgba(190,119,73,.32)}.home-top3__medal{position:absolute;right:12px;top:10px;font-size:30px;font-family:"Philosopher",serif;font-weight:700;color:rgba(255,220,139,.18)}.home-top3__portrait{width:92px;height:104px;flex:0 0 92px;border-radius:10px;overflow:hidden;border:1px solid rgba(218,170,77,.24);background:#0f1420}.home-top3__portrait img{width:100%;height:100%;object-fit:cover}.home-top3__copy>span{color:#d6aa63;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.home-top3__copy h3{margin:5px 0 12px;font-size:20px}.home-top3__copy h3 a{color:#fff0c0}.home-top3__copy>div{display:flex;gap:12px}.home-top3__copy small{color:#8e9bb0}.home-top3__copy small b{color:#8fdcff}.home-empty-state{grid-column:1/-1;padding:24px;border:1px solid rgba(255,255,255,.07);border-radius:10px;color:#8d99ad;text-align:center}

.home-portal-grid{display:grid;grid-template-columns:1.15fr .95fr .95fr;gap:18px;margin-top:26px}.home-weekly,.home-activity,.home-roulette-feed{border:1px solid rgba(255,255,255,.07);border-radius:12px;background:linear-gradient(180deg,rgba(20,17,29,.96),rgba(8,10,16,.96));overflow:hidden}.home-section-minihead{padding:15px 16px 12px;border-bottom:1px solid rgba(255,255,255,.06)}.home-section-minihead span{display:block;color:#d9a957;font-size:9px;font-weight:900;letter-spacing:.18em}.home-section-minihead h3{margin:4px 0 0;color:#f5ead1;font-family:"Philosopher",serif;font-size:21px}.home-weekly__list{padding:8px}.home-weekly__item{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px;border-radius:8px;color:#cbd5e4}.home-weekly__item:hover,.home-weekly__item.is-today{background:rgba(218,170,77,.1)}.home-weekly__item.is-today{box-shadow:inset 3px 0 0 #d89a48}.home-weekly__item>span{color:#d8a65c;font-size:10px;font-weight:900;text-transform:uppercase}.home-weekly__item strong{font-size:12px}.home-weekly__item small{color:#7f8aa0;font-size:9px;text-align:right}.home-activity__list,.home-roulette-feed__list{padding:8px}.home-activity__list>div,.home-roulette-feed__list>div{display:flex;gap:10px;align-items:center;padding:10px;border-bottom:1px solid rgba(255,255,255,.05)}.home-activity__list>div:last-child,.home-roulette-feed__list>div:last-child{border-bottom:0}.home-activity__list i,.home-roulette-feed__list i{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:rgba(218,170,77,.09);color:#dfa857}.home-activity__list strong,.home-roulette-feed__list strong{display:block;color:#e9eef7;font-size:12px}.home-activity__list small,.home-roulette-feed__list small{display:block;margin-top:2px;color:#8190a7;font-size:10px}.home-roulette-feed__list>div.is-jackpot{background:linear-gradient(90deg,rgba(201,143,44,.15),transparent)}.home-roulette-feed__list>div.is-jackpot i{color:#ffd875;box-shadow:0 0 18px rgba(255,201,80,.15)}.home-roulette-feed__list>p{padding:16px;color:#8793a7;font-size:11px}

.home-gallery{margin-top:30px}.home-gallery__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.home-gallery__grid a{position:relative;height:190px;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#0b0e15}.home-gallery__grid img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease,filter .35s ease}.home-gallery__grid a:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.82))}.home-gallery__grid span{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;color:#fff3cf;font-weight:800;font-size:13px}.home-gallery__grid a:hover img{transform:scale(1.05);filter:brightness(1.08)}

.newsmodule__item--featured{display:grid!important;grid-template-columns:210px minmax(0,1fr);gap:18px;align-items:stretch;background:linear-gradient(135deg,rgba(51,35,31,.78),rgba(16,17,27,.9))!important}.newsmodule__featured-image{display:block;min-height:130px;overflow:hidden;border-radius:8px}.newsmodule__featured-image img{width:100%;height:100%;object-fit:cover;display:block}.newsmodule__item--featured .newsmodule__title,.newsmodule__item--featured .newsmodule__body{grid-column:2}.newsmodule__item--featured .newsmodule__title{align-self:end}

.mu-account-wallet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 16px}.mu-account-wallet>div{padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:rgba(14,17,26,.8);text-align:center}.mu-account-wallet span,.mu-account-wallet strong{display:block}.mu-account-wallet span{font-size:9px;color:#8794a8;text-transform:uppercase;letter-spacing:.08em}.mu-account-wallet strong{margin-top:4px;color:#ffd37e;font-size:16px}

.mu-server-status-card__dot{width:8px;height:8px;border-radius:50%;background:#36df82;box-shadow:0 0 12px rgba(54,223,130,.6);margin-left:auto}.mu-server-status-card__online{color:#65e69b;font-size:11px;letter-spacing:.08em}.mu-server-status-card .statistics__title,.mu-server-rates-card .statistics__title{display:flex!important;align-items:center}.mu-server-status-card .statistics__item,.mu-server-rates-card .statistics__item{display:flex;justify-content:space-between;gap:12px;align-items:center}.mu-sidebar-more{display:flex;justify-content:space-between;align-items:center;padding:10px 13px;border-top:1px solid rgba(255,255,255,.06);color:#d9a957;font-size:10px;font-weight:800;text-transform:uppercase}.home-castle-premium{position:relative;margin-top:16px;border:1px solid rgba(214,161,72,.22);border-radius:11px;overflow:hidden;background:#0b0d14}.home-castle-premium__visual{height:110px;background-size:cover;background-position:center}.home-castle-premium__visual:after{content:"";position:absolute;left:0;right:0;top:0;height:135px;background:linear-gradient(180deg,transparent,rgba(11,13,20,.98))}.home-castle-premium__body{position:relative;margin-top:-25px;padding:0 15px 15px;z-index:2}.home-castle-premium__body>span{color:#d7a656;font-size:9px;font-weight:900;letter-spacing:.16em}.home-castle-premium__body h3{margin:5px 0;color:#fff0c3;font-family:"Philosopher",serif;font-size:21px}.home-castle-premium__body p{margin:5px 0;color:#929fb2;font-size:10px}.home-castle-premium__count{margin:10px 0;padding:9px;border:1px solid rgba(255,255,255,.06);border-radius:7px;background:rgba(255,255,255,.025)}.home-castle-premium__count small,.home-castle-premium__count strong{display:block}.home-castle-premium__count small{color:#8996aa}.home-castle-premium__count strong{margin-top:3px;color:#7fdbff}.home-castle-premium__body a{display:flex;justify-content:space-between;margin-top:10px;color:#dda957;font-size:10px;font-weight:800;text-transform:uppercase}

.home-ranking-widget__all{margin-left:auto;color:#cfa05a;font-size:9px;text-transform:uppercase}.home-ranking-widget .statistics__title{display:flex!important;align-items:center}.home-ranking-widget__player>span{display:flex!important;flex-direction:column;align-items:flex-start!important;gap:1px!important}.home-ranking-widget__player>span small{display:block;color:#77859a;font-size:8px;max-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.home-ranking-widget__status{margin-left:auto;flex:0 0 7px}

.mu-live-rankings__row.is-podium{background:linear-gradient(90deg,rgba(218,170,77,.07),transparent)}.mu-live-rankings__row.is-podium-1{box-shadow:inset 3px 0 0 #dfb54f}.mu-live-rankings__row.is-podium-2{box-shadow:inset 3px 0 0 #aeb8c7}.mu-live-rankings__row.is-podium-3{box-shadow:inset 3px 0 0 #b97749}.mu-live-rankings__pos i{margin-right:6px}.mu-live-rankings__player--with-thumb>span{display:flex;flex-direction:column;gap:2px;min-width:0}.mu-live-rankings__online{display:flex;align-items:center;gap:5px;color:#7f8ba0;font-size:9px}.mu-live-rankings__online i{width:6px;height:6px;border-radius:50%;background:#697487}.mu-live-rankings__online.is-online{color:#68d99a}.mu-live-rankings__online.is-online i{background:#32dc7b;box-shadow:0 0 8px rgba(50,220,123,.55)}

.mu-portal-page{max-width:1180px;margin:0 auto;padding:24px;border:1px solid rgba(218,170,77,.2);border-radius:14px;background:linear-gradient(180deg,rgba(18,14,27,.97),rgba(7,8,13,.98));box-shadow:0 22px 55px rgba(0,0,0,.3)}.mu-portal-page__head{margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.07)}.mu-portal-page__head>span{color:#d9a957;font-size:10px;font-weight:900;letter-spacing:.2em}.mu-portal-page__head h1{margin:6px 0 7px;color:#fff0c3;font-family:"Philosopher",serif;font-size:34px}.mu-portal-page__head p{margin:0;color:#8d99ac}.mu-class-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.mu-class-card{border:1px solid rgba(255,255,255,.07);border-radius:10px;overflow:hidden;background:#10131c}.mu-class-card__visual{height:210px;background:#0a0d13}.mu-class-card__visual img{width:100%;height:100%;object-fit:cover}.mu-class-card__body{padding:14px}.mu-class-card__body>span{color:#d9a957;font-size:9px;font-weight:900;letter-spacing:.14em}.mu-class-card h2{margin:5px 0 8px;color:#f6ead1;font-size:20px}.mu-class-card p{min-height:52px;margin:0 0 10px;color:#9aa7ba;font-size:11px;line-height:1.55}.mu-class-card small{color:#718097;font-size:9px;line-height:1.4}.mu-serverinfo-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.mu-serverinfo-stat{padding:18px;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:#10131c;text-align:center}.mu-serverinfo-stat i{color:#d9a957;font-size:22px}.mu-serverinfo-stat span,.mu-serverinfo-stat strong{display:block}.mu-serverinfo-stat span{margin-top:9px;color:#8895aa;font-size:9px;text-transform:uppercase}.mu-serverinfo-stat strong{margin-top:4px;color:#f6e5bd;font-size:18px}.mu-serverinfo-sections{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:18px}.mu-serverinfo-sections article{padding:18px;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:rgba(15,18,27,.88)}.mu-serverinfo-sections h2{margin:0 0 10px;color:#f1dfb8;font-size:18px}.mu-serverinfo-sections h2 i{color:#d9a957;margin-right:7px}.mu-serverinfo-sections p{color:#8c9aaf;font-size:11px;line-height:1.6}.mu-serverinfo-sections a{display:inline-flex;margin:6px 8px 0 0;padding:8px 10px;border-radius:6px;background:rgba(218,170,77,.1);color:#dfa95a;font-size:10px;font-weight:800;text-transform:uppercase}

.mu-profile-overview{position:relative;display:grid;grid-template-columns:180px minmax(0,1fr) auto;gap:22px;align-items:center;max-width:960px;margin:0 auto 22px;padding:20px;border:1px solid rgba(218,170,77,.22);border-radius:13px;background:linear-gradient(135deg,rgba(27,20,30,.98),rgba(9,11,18,.98));overflow:hidden}.mu-profile-overview__portrait{width:180px;height:210px;border-radius:10px;overflow:hidden;background:#0c1018}.mu-profile-overview__portrait img{width:100%;height:100%;object-fit:cover}.mu-profile-overview__content>span{color:#d9a957;font-size:9px;font-weight:900;letter-spacing:.16em}.mu-profile-overview__content h1{margin:4px 0;color:#fff0c5;font-family:"Philosopher",serif;font-size:34px}.mu-profile-overview__content>p{margin:0;color:#aeb9c9}.mu-profile-overview__stats{display:grid;grid-template-columns:repeat(4,minmax(90px,1fr));gap:8px;margin-top:16px}.mu-profile-overview__stats>div{padding:10px;border:1px solid rgba(255,255,255,.06);border-radius:7px;background:rgba(255,255,255,.025)}.mu-profile-overview__stats small,.mu-profile-overview__stats strong{display:block}.mu-profile-overview__stats small{color:#7e8ba0;font-size:9px;text-transform:uppercase}.mu-profile-overview__stats strong{margin-top:3px;color:#8edcff;font-size:13px}.mu-profile-overview__status{align-self:start;display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.08);color:#8d98aa;font-size:9px;font-weight:900}.mu-profile-overview__status i{width:7px;height:7px;border-radius:50%;background:#6b7586}.mu-profile-overview__status.is-online{color:#76dfa4;border-color:rgba(49,219,124,.2)}.mu-profile-overview__status.is-online i{background:#31db7c;box-shadow:0 0 8px rgba(49,219,124,.55)}

@media(max-width:1100px){.home-top3{grid-template-columns:1fr 1fr}.home-portal-grid{grid-template-columns:1fr 1fr}.home-roulette-feed{grid-column:1/-1}.home-gallery__grid{grid-template-columns:1fr 1fr}.mu-class-grid{grid-template-columns:repeat(3,1fr)}.mu-serverinfo-grid{grid-template-columns:repeat(3,1fr)}.mu-serverinfo-sections{grid-template-columns:1fr 1fr}.mu-profile-overview{grid-template-columns:150px minmax(0,1fr)}.mu-profile-overview__status{position:absolute;right:15px;top:15px}.mu-profile-overview__portrait{width:150px;height:185px}}
@media(max-width:760px){.mu-notification-center{right:70px;top:12px}.mu-notification-center__panel{width:min(310px,calc(100vw - 36px))}.home-top3{grid-template-columns:1fr}.home-portal-grid{grid-template-columns:1fr}.home-roulette-feed{grid-column:auto}.home-gallery__grid{grid-template-columns:1fr 1fr}.newsmodule__item--featured{grid-template-columns:1fr!important}.newsmodule__item--featured .newsmodule__title,.newsmodule__item--featured .newsmodule__body{grid-column:1}.newsmodule__featured-image{height:160px}.mu-class-grid{grid-template-columns:1fr 1fr}.mu-serverinfo-grid{grid-template-columns:1fr 1fr}.mu-serverinfo-sections{grid-template-columns:1fr}.mu-profile-overview{grid-template-columns:1fr;padding-top:52px}.mu-profile-overview__portrait{width:100%;height:300px}.mu-profile-overview__stats{grid-template-columns:1fr 1fr}.mu-account-wallet{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:480px){.home-gallery__grid,.mu-class-grid,.mu-serverinfo-grid{grid-template-columns:1fr}.home-gallery__grid a{height:220px}.home-weekly__item{grid-template-columns:62px minmax(0,1fr)}.home-weekly__item small{grid-column:2;text-align:left}.mu-profile-overview__stats{grid-template-columns:1fr 1fr}.mu-account-wallet{grid-template-columns:1fr}.webzen-hero__cta a{width:100%;justify-content:center}}
.mu-live-rankings__empty{padding:28px;text-align:center;color:#8491a4;font-size:12px}.mu-live-rankings__guild{display:flex;align-items:center;gap:10px}.mu-live-rankings__guild img{width:34px;height:34px}.mu-live-rankings__player--with-thumb img{width:38px;height:38px;border-radius:8px;object-fit:cover;border:1px solid rgba(218,170,77,.24);background:#0d1119;flex:0 0 38px}
.home-video-card__category{display:block;margin-bottom:4px;color:#d9a957;font-size:8px;font-weight:900;letter-spacing:.12em}.home-video-grid .home-video-card:first-child{grid-column:span 2}.home-video-grid .home-video-card:first-child .home-video-card__visual{min-height:250px}@media(max-width:760px){.home-video-grid .home-video-card:first-child{grid-column:auto}.home-video-grid .home-video-card:first-child .home-video-card__visual{min-height:180px}}

/* ===== HOTFIX DE CUADRATURA · RANKING LIVE V4 ===== */
.mu-live-rankings__row{
  grid-template-columns:52px 180px minmax(260px,1fr) 90px 90px 170px !important;
  align-items:center !important;
}
.mu-live-rankings__player--with-thumb{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  min-width:0 !important;
}
.mu-live-rankings__player--with-thumb > span{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:5px !important;
  min-width:0 !important;
}
.mu-live-rankings__player--with-thumb img{
  width:44px !important;
  height:44px !important;
  flex:0 0 44px !important;
}
.mu-live-rankings__player--with-thumb a{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mu-live-rankings__online{
  margin:0 !important;
}
.mu-ranking-title{
  display:flex !important;
  align-items:center !important;
  margin-top:4px !important;
  line-height:1 !important;
}
.mu-ranking-title .maya-title-badge{
  max-width:100%;
}

@media(max-width:850px){
  .mu-live-rankings__row{min-width:860px !important;}
}

/* ===== HOTFIX COMPACTO · STATUS + TÍTULO INLINE ===== */
.mu-live-rankings__player--with-thumb > span{
  gap:4px !important;
}
.mu-live-rankings__meta{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  min-width:0 !important;
}
.mu-live-rankings__online{
  display:inline-flex !important;
  align-items:center !important;
  gap:5px !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  min-height:unset !important;
}
.mu-ranking-title{
  display:inline-flex !important;
  align-items:center !important;
  margin:0 !important;
}
.mu-ranking-title .maya-title-badge.is-compact{
  min-height:28px !important;
  padding:6px 10px !important;
  font-size:10px !important;
  border-radius:8px !important;
}

/* ============================================================
   MU TOPBAR SAFE V2
   Mantiene la geometría original de WebEngine; solo cambia skin.
   ============================================================ */
.main-nav{
  height:60px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  flex-wrap:nowrap !important;
  overflow:visible !important;
  background:linear-gradient(180deg,rgba(3,10,20,.96),rgba(3,8,17,.94)) !important;
  border-bottom:1px solid rgba(202,155,81,.35) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.28), inset 0 -1px 0 rgba(68,137,225,.12) !important;
}
.main-nav::before{
  background:
    radial-gradient(circle at 22% 50%,rgba(36,112,216,.16),transparent 28%),
    radial-gradient(circle at 78% 50%,rgba(90,46,139,.11),transparent 34%),
    linear-gradient(180deg,rgba(4,11,22,.98),rgba(2,8,16,.97)) !important;
  backdrop-filter:blur(6px) !important;
}
.main-nav::after{
  height:1px !important;
  background:linear-gradient(90deg,transparent 0%,rgba(194,142,67,.28) 14%,rgba(226,174,86,.62) 50%,rgba(194,142,67,.28) 86%,transparent 100%) !important;
  box-shadow:0 0 9px rgba(64,135,223,.18) !important;
}
.main-nav > .site-nav{
  flex:1 1 auto !important;
  min-width:0 !important;
  max-width:none !important;
  width:auto !important;
  margin-right:12px !important;
  overflow:hidden !important;
}
.main-nav > .site-nav .site-nav__list{
  width:100% !important;
  height:60px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  margin:0 !important;
  padding:0 !important;
}
.mu-safe-toplinks{
  display:flex !important;
  align-items:center !important;
  gap:4px !important;
  width:auto !important;
  max-width:100% !important;
  min-width:0 !important;
  flex:1 1 auto !important;
  overflow:hidden !important;
}
.mu-safe-nav-link{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:40px !important;
  padding:0 12px !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#e8dfcf !important;
  font-family:Alice,Georgia,serif !important;
  font-size:14px !important;
  font-weight:400 !important;
  letter-spacing:.025em !important;
  white-space:nowrap !important;
  text-transform:uppercase !important;
  flex:0 0 auto !important;
  transition:color .18s ease,text-shadow .18s ease !important;
}
.mu-safe-nav-link::before{display:none !important}
.mu-safe-nav-link::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  bottom:2px !important;
  width:0 !important;
  height:1px !important;
  transform:translateX(-50%) !important;
  background:linear-gradient(90deg,transparent,#4d9cff,#deb55c,transparent) !important;
  box-shadow:0 0 8px rgba(80,157,255,.42) !important;
  transition:width .18s ease !important;
}
.mu-safe-nav-link:hover{
  color:#fff5df !important;
  text-shadow:0 0 10px rgba(82,160,255,.35) !important;
}
.mu-safe-nav-link:hover::after{width:72% !important}

.main-nav > .user-nav{
  display:flex !important;
  flex:0 0 auto !important;
  align-items:center !important;
  gap:9px !important;
  margin-left:auto !important;
  position:relative !important;
  z-index:20 !important;
}
@media screen and (min-width:769px){
  .main-nav .home-button,
  .main-nav .language{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:9px !important;
    border:1px solid rgba(207,162,93,.34) !important;
    background:linear-gradient(180deg,rgba(18,18,27,.96),rgba(7,8,14,.98)) !important;
    color:#eee4cf !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.02) !important;
  }
  .main-nav .home-button::before,
  .main-nav .language::before{
    display:none !important;
  }
  .main-nav .user-nav__login-button{
    height:40px !important;
    min-width:150px !important;
    padding:0 17px !important;
    border-radius:9px !important;
    border:1px solid rgba(211,164,92,.42) !important;
    background:linear-gradient(90deg,rgba(30,24,42,.98),rgba(66,43,108,.98)) !important;
    color:#f5ead6 !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.03) !important;
    font-family:Alice,Georgia,serif !important;
    font-size:13px !important;
    text-transform:uppercase !important;
    white-space:nowrap !important;
  }
}

/* En resoluciones menores reduce el menú sin tocar anchos del template */
@media screen and (max-width:1300px) and (min-width:769px){
  .mu-safe-nav-link{padding:0 8px !important;font-size:12px !important;}
  .main-nav > .user-nav{gap:7px !important;}
  .main-nav .user-nav__login-button{min-width:130px !important;padding:0 12px !important;font-size:12px !important;}
}
@media screen and (max-width:1080px) and (min-width:769px){
  .mu-safe-nav-link{padding:0 6px !important;font-size:11px !important;}
}
@media screen and (max-width:768px){
  .main-nav > .site-nav{max-width:calc(100% - 150px) !important;}
  .mu-safe-toplinks{display:none !important;}
}

/* ============================================================
   MAYA HOTFIX UI v85 - estable
   ============================================================ */
@media screen and (min-width:769px){
  .site-menu{width:220px !important;left:16px !important;top:16px !important;height:calc(100vh - 32px) !important;}
  .site-menu__wrapper{padding:11px 9px 13px !important;}
  .site-menu .logo__image{width:168px !important;height:auto !important;}
  .mu-side-panel-head{margin-bottom:9px !important;padding:9px 7px 10px !important;}
  .mu-side-panel-head__icon{width:34px !important;height:34px !important;flex-basis:34px !important;}
  .site-menu__nav--nologin .site-menu__list{gap:3px !important;}
  .site-menu__nav--nologin .site-menu__link.site-menu__nav-button{min-height:38px !important;padding:4px 7px !important;gap:7px !important;font-size:11px !important;}
  .site-menu__nav--nologin .site-menu__link.site-menu__nav-button i{width:26px !important;height:26px !important;flex-basis:26px !important;font-size:11px !important;}

  /* La campana vive dentro del topbar: no la recortes. */
  .main-nav>.site-nav{overflow:visible !important;}
  .main-nav>.site-nav .site-nav__list{overflow:visible !important;}
  .mu-safe-toplinks{overflow:visible !important;}

  .webzen-hero__online-chip.mu-nav-online-chip{
    position:relative !important;top:auto !important;right:auto !important;z-index:30 !important;
    height:34px !important;margin:0 4px 0 2px !important;padding:0 10px !important;
    display:inline-flex !important;align-items:center !important;gap:8px !important;
    border-radius:999px !important;border:1px solid rgba(74,220,139,.28) !important;
    background:linear-gradient(180deg,rgba(5,29,16,.96),rgba(4,16,11,.98)) !important;
    white-space:nowrap !important;backdrop-filter:none !important;
  }
  .webzen-hero__online-chip.mu-nav-online-chip .webzen-hero__online-label{font-size:9px !important;letter-spacing:.14em !important;color:#8cdba8 !important;}
  .webzen-hero__online-chip.mu-nav-online-chip .webzen-hero__online-value{font-size:17px !important;}

  .mu-notification-center.mu-notification-center--topbar{
    position:relative !important;top:auto !important;right:auto !important;z-index:100 !important;margin:0 6px 0 0 !important;
  }
  .mu-notification-center.mu-notification-center--topbar .mu-notification-center__button{
    width:36px !important;height:36px !important;border-radius:10px !important;
    border-color:rgba(221,177,93,.32) !important;background:linear-gradient(180deg,#151522,#080910) !important;
  }
  .mu-notification-center.mu-notification-center--topbar .mu-notification-center__panel{
    top:43px !important;right:0 !important;z-index:1000 !important;width:330px !important;
  }
}
@media screen and (max-width:768px){
  .webzen-hero__online-chip.mu-nav-online-chip,.mu-notification-center.mu-notification-center--topbar{display:none !important;}
}

/* Contacto más compacto y limpio */
.page-contact #content>div{max-width:1080px;margin:0 auto;padding:22px;border:1px solid rgba(70,211,173,.28);border-radius:16px;background:linear-gradient(180deg,rgba(8,79,99,.96),rgba(6,66,85,.94));box-shadow:0 20px 50px rgba(0,0,0,.25);}
.page-contact #content input[type="text"],.page-contact #content input[type="email"],.page-contact #content textarea{width:100% !important;border-radius:9px !important;border:1px solid rgba(255,255,255,.14) !important;background:#f8fafc !important;color:#20252b !important;padding:11px 13px !important;}
.page-contact #content textarea{min-height:220px !important;}
.page-contact #content label{color:#fff !important;font-weight:800 !important;margin-bottom:7px !important;}
.page-contact #content .btn,.page-contact #content button,.page-contact #content input[type="submit"]{border-radius:8px !important;padding:10px 17px !important;background:linear-gradient(180deg,#438ad8,#326fbd) !important;color:#fff !important;border:0 !important;}

/* Página Guías */
.mu-guides-page{max-width:1160px;margin:0 auto;color:#e5eaf2;}
.mu-guides-hero{display:grid;grid-template-columns:minmax(0,1.3fr) 320px;gap:18px;padding:24px;border:1px solid rgba(212,166,83,.2);border-radius:18px;background:radial-gradient(circle at 12% 0,rgba(84,48,137,.2),transparent 36%),linear-gradient(155deg,#151620,#080a10);box-shadow:0 22px 55px rgba(0,0,0,.32);}
.mu-guides-eyebrow{display:block;color:#d7a657;font-size:10px;font-weight:900;letter-spacing:.2em;margin-bottom:9px;}
.mu-guides-hero h1{margin:0;color:#fff1c8;font-family:"Philosopher",serif;font-size:38px;line-height:1.1;}
.mu-guides-hero p{max-width:660px;margin:13px 0 0;color:#99a5b7;font-size:13px;line-height:1.65;}
.mu-guides-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px;}
.mu-guides-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 15px;border-radius:9px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);color:#edf1f7;font-weight:800;}
.mu-guides-btn.is-youtube{background:linear-gradient(135deg,#cf2530,#7f0e15);border-color:rgba(255,91,99,.3);color:#fff;}
.mu-guides-feature{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:220px;padding:18px;border:1px solid rgba(255,255,255,.07);border-radius:15px;background:linear-gradient(145deg,rgba(104,20,29,.38),rgba(12,12,18,.94));}
.mu-guides-feature__icon{font-size:56px;color:#ff5b64;margin-bottom:10px;}
.mu-guides-feature strong{color:#fff2cf;font-size:18px;letter-spacing:.08em;}
.mu-guides-feature span{margin-top:7px;color:#939fb0;font-size:12px;}
.mu-guides-block{margin-top:17px;padding:20px;border:1px solid rgba(255,255,255,.06);border-radius:16px;background:linear-gradient(160deg,rgba(15,18,27,.97),rgba(7,9,14,.98));}
.mu-guides-head{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:15px;}
.mu-guides-head small{display:block;color:#d7a657;font-size:9px;font-weight:900;letter-spacing:.18em;}
.mu-guides-head h2{margin:4px 0 0;color:#fff0c5;font-family:"Philosopher",serif;font-size:27px;}
.mu-guides-head>a{color:#9bb9ff;font-size:12px;font-weight:800;}
.mu-guides-video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;}
.mu-guides-video{display:block;overflow:hidden;border:1px solid rgba(255,255,255,.06);border-radius:13px;background:rgba(255,255,255,.025);transition:.18s ease;}
.mu-guides-video:hover{transform:translateY(-2px);border-color:rgba(214,168,86,.3);}
.mu-guides-video__image{display:block;aspect-ratio:16/9;overflow:hidden;background:#0c0f16;}
.mu-guides-video__image img{width:100%;height:100%;object-fit:cover;display:block;}
.mu-guides-video__copy{display:block;padding:13px;}
.mu-guides-video__copy small,.mu-guides-link small{display:block;color:#d5a45c;font-size:9px;font-weight:900;letter-spacing:.14em;}
.mu-guides-video__copy strong,.mu-guides-link strong{display:block;margin-top:6px;color:#fff0cf;font-size:16px;}
.mu-guides-video__copy em,.mu-guides-link em{display:block;margin-top:6px;color:#939faf;font-size:11px;line-height:1.55;font-style:normal;}
.mu-guides-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.mu-guides-link{display:flex;gap:11px;padding:14px;border:1px solid rgba(255,255,255,.06);border-radius:12px;background:rgba(255,255,255,.02);}
.mu-guides-link>i{width:40px;height:40px;display:grid;place-items:center;flex:0 0 40px;border-radius:10px;background:linear-gradient(145deg,#492b70,#171622);color:#efc476;}
@media(max-width:900px){.mu-guides-hero{grid-template-columns:1fr}.mu-guides-video-grid,.mu-guides-links{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.mu-guides-video-grid,.mu-guides-links{grid-template-columns:1fr}.mu-guides-hero{padding:18px}.mu-guides-hero h1{font-size:30px}.mu-guides-head{align-items:flex-start;flex-direction:column}}


/* ===== V9 HOTFIX LAYOUT DESCUADRE ===== */
/* Compacta el menú izquierdo y devuelve aire al contenido principal */
.site-menu{
  width:236px !important;
  margin-left:12px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-bottom:24px !important;
}
.site-menu__wrapper{padding:10px 10px 16px !important;}
.site-menu__nav-button{
  justify-content:flex-start !important;
  padding:14px 14px !important;
  margin-bottom:10px !important;
  font-size:15px !important;
}
.site-menu__link{font-size:15px !important; gap:10px !important;}
.site-menu__link i{width:18px; text-align:center;}
.site-menu__social{display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important;}
.site-menu__social-link{width:100% !important; justify-content:center !important;}

.wrapper{
  padding:0 26px 0 272px !important;
}
.wrapper--wide{
  box-sizing:border-box !important;
}
@media screen and (min-width:1001px){
  .wrapper--wide{
    padding-left:272px !important;
    padding-right:82px !important;
  }
  .home-command-center .wrapper--wide{
    padding-left:272px !important;
    padding-right:82px !important;
  }
}
@media screen and (min-width:1501px){
  .wrapper--wide{
    padding-left:280px !important;
    padding-right:86px !important;
  }
  .home-command-center .wrapper--wide{
    padding-left:280px !important;
    padding-right:86px !important;
  }
}

.main-new__content{
  grid-template-columns:minmax(0,1fr) 286px !important;
  gap:22px !important;
}
.home-content-grid{
  grid-template-columns:286px minmax(0,1fr) !important;
  gap:22px !important;
}
.main-rightbar__scroll{top:76px !important;}
.home-ranking-widget,.main-rightbar__server-statistics{max-width:286px !important;}

/* Ajustes de las tarjetas para que no se vean cortadas */
.news-card,.home-ranking-widget,.main-rightbar__server-statistics,.mu-live-rankings,.home-castle-premium{
  width:100% !important;
}

@media screen and (max-width:1700px){
  .wrapper{padding:0 22px 0 262px !important;}
  .wrapper--wide,.home-command-center .wrapper--wide{padding-left:262px !important; padding-right:80px !important;}
}
@media screen and (max-width:1500px){
  .site-menu{width:224px !important; margin-left:10px !important;}
  .wrapper{padding:0 20px 0 248px !important;}
  .wrapper--wide,.home-command-center .wrapper--wide{padding-left:248px !important; padding-right:78px !important;}
}
@media screen and (max-width:1300px){
  .site-menu{width:214px !important;}
  .wrapper{padding:0 16px 0 234px !important;}
  .wrapper--wide,.home-command-center .wrapper--wide{padding-left:234px !important; padding-right:70px !important;}
  .main-new__content{grid-template-columns:minmax(0,1fr) 270px !important;}
}
@media screen and (max-width:1000px){
  .site-menu{width:235px !important; margin-left:8px !important;}
  .wrapper{padding:0 14px 0 252px !important;}
  .wrapper--wide,.home-command-center .wrapper--wide{padding-left:252px !important; padding-right:14px !important;}
}
@media screen and (max-width:768px){
  .wrapper,.wrapper--wide,.home-command-center .wrapper--wide{padding:0 12px !important;}
}


/* ===== V10 HOME REORDER / COMPACT LAYOUT ===== */
.home-maya-hub{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:22px;
  align-items:start;
  margin:18px 0 22px;
}
.home-maya-hub__left,
.home-maya-hub__right{min-width:0;}
.home-maya-hub__right{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.home-hub-card{width:100%;}
.home-hub-card .home-ranking-widget,
.home-hub-card .main-rightbar__server-statistics{
  margin:0 !important;
  width:100% !important;
  max-width:none !important;
  position:relative !important;
  top:0 !important;
}
.home-hub-card--flat .home-ranking-widget{border-radius:12px;overflow:hidden;}
.home-maya-titles{
  margin:0 !important;
  min-height:146px;
}
.home-maya-titles__copy h3{font-size:24px !important;}
.home-maya-titles__copy p{font-size:11px !important;line-height:1.55 !important;max-width:520px;}
.home-maya-titles__next strong{font-size:14px !important;}
.home-maya-titles__next small{font-size:10px !important;line-height:1.45 !important;}

.main-new{margin-top:0 !important;}
.main-new__content{
  grid-template-columns:minmax(0,1fr) 280px !important;
  gap:20px !important;
}
.main-rightbar__scroll{
  top:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:16px !important;
}
.main-rightbar__server-statistics,
.home-ranking-widget,
.home-castle-premium,
.class-percent-widget{margin:0 !important;}

/* Compacta la zona media para eliminar sensación de vacío */
.home-maya-pass,
.home-top3-section,
.home-showcase,
.home-media,
.home-live-events{margin-bottom:18px !important;}

@media screen and (max-width:1450px){
  .home-maya-hub{grid-template-columns:minmax(0,1fr) 300px;}
}
@media screen and (max-width:1180px){
  .home-maya-hub{grid-template-columns:1fr;}
  .home-maya-hub__right{grid-template-columns:1fr;}
}


/* ============================================================
   V11 · MU MAYA SEASON 21 · HOME CONSOLIDADO
   ============================================================ */
:root{--maya-gold:#d9aa55;--maya-cyan:#35c7ef;--maya-panel:#0b0d15;--maya-panel2:#111522;}

/* Flujo vertical más compacto */
.home-top3-section,.main-new,.home-titles-wrap,.home-showcase{position:relative;}
.home-top3-section{padding-bottom:14px !important;}
.main-new{padding-top:0 !important;margin-top:0 !important;margin-bottom:18px !important;}
.home-titles-wrap{margin-top:0 !important;margin-bottom:18px !important;}
.home-showcase{padding-top:18px !important;}

/* Noticias arriba + sidebar realmente dentro del ancho útil */
.main-new__content{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 320px !important;
  gap:20px !important;
  align-items:start !important;
}
.main-new__left,.main-new__right{min-width:0 !important;width:auto !important;margin:0 !important;}
.main-rightbar__scroll{position:relative !important;top:0 !important;display:flex !important;flex-direction:column !important;gap:14px !important;overflow:visible !important;}

.news-card{margin:0 !important;overflow:hidden !important;border-radius:13px !important;}
.news-card__header{
  display:flex !important;align-items:center !important;justify-content:center !important;
  min-height:54px !important;padding:12px 18px !important;text-align:center !important;
  font-size:17px !important;font-weight:900 !important;letter-spacing:.06em !important;
  text-transform:uppercase !important;
}
.news-card__body{padding:16px !important;min-height:0 !important;}
.newsmodule{gap:10px !important;}
.newsmodule__item{min-height:88px !important;padding:13px !important;border-radius:9px;}
.newsmodule__item:first-child{min-height:128px !important;padding:18px !important;}
.newsmodule__featured-image{max-height:120px !important;overflow:hidden;border-radius:8px;}
.newsmodule__featured-image img{height:120px !important;object-fit:cover !important;}
.newsmodule__item:first-child .newsmodule__info-item:first-child a{font-size:18px !important;line-height:1.3 !important;}

/* Server Status premium, compacto y sin títulos partidos */
.mu-server-status-card--premium{
  margin:0 !important;width:100% !important;max-width:none !important;
  overflow:hidden;border:1px solid rgba(53,199,239,.36) !important;border-radius:12px !important;
  background:radial-gradient(circle at 90% 0%,rgba(41,191,229,.15),transparent 30%),linear-gradient(180deg,#101827,#080b13) !important;
  box-shadow:0 16px 34px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.03) !important;
}
.mu-server-status-card--premium .statistics__title{
  min-height:48px !important;padding:0 14px !important;background:linear-gradient(90deg,#0d7698,#11a3c8) !important;
  color:#fff !important;font-size:17px !important;font-weight:900 !important;letter-spacing:.08em !important;
  white-space:nowrap !important;
}
.mu-server-status-card--premium .statistics__card{padding:5px 0 !important;background:transparent !important;}
.mu-server-status-card--premium .statistics__item{
  min-height:38px !important;padding:8px 13px !important;border-bottom:1px solid rgba(255,255,255,.055) !important;
  font-size:11px !important;
}
.mu-server-status-card--premium .statistics__item:last-child{border-bottom:0 !important;}
.selection-text--gold{color:#efc56e !important;font-weight:900 !important;}

/* Ranking más elegante y legible */
.home-sidebar-ranking-premium{width:100%;}
.home-sidebar-ranking-premium .home-ranking-widget{
  width:100% !important;max-width:none !important;margin:0 !important;position:relative !important;top:0 !important;
  border-radius:12px !important;background:linear-gradient(180deg,#15101f,#0b0c14) !important;
  border:1px solid rgba(217,170,85,.28) !important;box-shadow:0 14px 28px rgba(0,0,0,.24) !important;
}
.home-sidebar-ranking-premium .statistics__title{min-height:44px !important;padding:0 13px !important;background:linear-gradient(90deg,rgba(89,51,22,.96),rgba(42,28,24,.96)) !important;color:#f4d791 !important;}
.home-sidebar-ranking-premium .home-ranking-widget__switch{padding:7px !important;gap:6px !important;background:#0b0d14 !important;}
.home-sidebar-ranking-premium .home-ranking-widget__tab{min-height:32px !important;font-size:10px !important;border-radius:7px !important;}
.home-sidebar-ranking-premium .home-ranking-widget__panel{padding:9px 11px 11px !important;}
.home-sidebar-ranking-premium .home-ranking-widget__head--level,
.home-sidebar-ranking-premium .home-ranking-widget__row--level{grid-template-columns:24px minmax(0,1fr) 48px !important;gap:7px !important;}
.home-sidebar-ranking-premium .home-ranking-widget__head--guild,
.home-sidebar-ranking-premium .home-ranking-widget__row--guild{grid-template-columns:24px minmax(0,1fr) 52px !important;gap:7px !important;}
.home-sidebar-ranking-premium .home-ranking-widget__row{padding:8px 0 !important;font-size:11px !important;}
.home-sidebar-ranking-premium .home-ranking-widget__player img,
.home-sidebar-ranking-premium .home-ranking-widget__guild-logo img{width:25px !important;height:25px !important;}
.home-sidebar-ranking-premium .home-ranking-widget__player>span small{max-width:115px !important;font-size:8px !important;}

/* Datos restantes de la derecha */
.mu-server-rates-card,.home-castle-premium,.class-percent-widget{width:100% !important;max-width:none !important;margin:0 !important;border-radius:11px !important;}
.mu-server-rates-card .statistics__title{font-size:13px !important;min-height:40px !important;}
.mu-server-rates-card .statistics__item{min-height:35px !important;padding:7px 12px !important;font-size:10px !important;}

/* Titles ya no ocupa una franja vacía */
.home-titles-wrap{display:block !important;}
.home-maya-titles{
  display:grid !important;grid-template-columns:88px minmax(0,1fr) 185px auto !important;
  gap:14px !important;align-items:center !important;margin:0 !important;min-height:112px !important;
  padding:12px 15px !important;border-radius:12px !important;
}
.home-maya-titles__portrait{width:78px !important;}
.home-maya-titles__copy h3{font-size:20px !important;margin:2px 0 4px !important;}
.home-maya-titles__copy p{font-size:10px !important;line-height:1.45 !important;max-width:560px !important;}
.home-maya-titles__next{min-width:0 !important;width:185px !important;padding-left:12px !important;}
.home-maya-titles__next strong{font-size:12px !important;}
.home-maya-titles>a{white-space:nowrap !important;}

/* Server Info */
.mu-serverinfo-page--maya .mu-portal-page__head strong{color:#f0c56f;}
.mu-serverinfo-page--maya .mu-serverinfo-stat{background:linear-gradient(180deg,#121725,#0b0e16) !important;border-color:rgba(217,170,85,.18) !important;}
.mu-serverinfo-page--maya .mu-serverinfo-stat strong{font-size:20px !important;}

/* Responsive */
@media(max-width:1450px){.main-new__content{grid-template-columns:minmax(0,1fr) 300px !important;}.home-maya-titles{grid-template-columns:82px minmax(0,1fr) 165px auto !important;}.home-maya-titles__portrait{width:72px !important;}}
@media(max-width:1180px){.main-new__content{grid-template-columns:1fr !important;}.main-new__right{max-width:none !important;}.main-rightbar__scroll{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;}.home-maya-titles{grid-template-columns:82px minmax(0,1fr) auto !important;}.home-maya-titles__next{display:none !important;}}
@media(max-width:800px){.main-rightbar__scroll{grid-template-columns:1fr !important;}.home-maya-titles{grid-template-columns:70px minmax(0,1fr) !important;}.home-maya-titles__portrait{width:64px !important;}.home-maya-titles>a{grid-column:1/-1 !important;justify-content:center !important;}}


/* ============================================================
   V12 · HOME SIN ESPACIOS MUERTOS
   News full-width + Titles/Ranking/Server Dashboard
   ============================================================ */
.home-v12-shell{
  box-sizing:border-box;
  width:100%;
  max-width:none;
  margin:0;
  padding-left:272px;
  padding-right:82px;
}
.main-new--v12{margin:14px 0 16px !important;padding:0 !important;}
.main-new--v12 .main-new__content{
  display:block !important;
  width:100% !important;
}
.main-new--v12 .main-new__left{
  display:block !important;
  width:100% !important;
  max-width:none !important;
}
.main-new--v12 .main-leftbar__news,
.main-new--v12 .news-card{width:100% !important;max-width:none !important;}
.main-new--v12 .news-card__body{min-height:0 !important;}
.main-new--v12 .newsmodule{
  display:grid !important;
  grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr) !important;
  gap:12px !important;
}
.main-new--v12 .newsmodule__item--featured{grid-row:span 4 !important;}
.main-new--v12 .newsmodule__item:not(.newsmodule__item--featured){min-height:72px !important;}

.home-v12-dashboard{margin:0 0 20px;}
.home-v12-dashboard__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  margin-bottom:10px;padding:0 2px;
}
.home-v12-dashboard__head span{display:block;color:#dca85a;font-size:9px;font-weight:900;letter-spacing:.20em;text-transform:uppercase;}
.home-v12-dashboard__head h2{margin:4px 0 0;color:#fff1cb;font-family:"Philosopher",Georgia,serif;font-size:23px;line-height:1.1;}
.home-v12-dashboard__head p{margin:0;color:#8592a8;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;}
.home-v12-dashboard__grid{
  display:grid;
  grid-template-columns:minmax(360px,1.15fr) minmax(330px,.95fr) 290px;
  gap:14px;
  align-items:stretch;
}
.home-v12-legacy,
.home-v12-ranking,
.home-v12-status,
.home-v12-mini-card{
  border:1px solid rgba(217,170,85,.18);
  background:linear-gradient(160deg,rgba(19,17,26,.98),rgba(7,10,16,.98));
  box-shadow:0 16px 34px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.025);
}
.home-v12-legacy{display:grid;grid-template-columns:128px minmax(0,1fr);gap:16px;align-items:center;padding:17px;border-radius:13px;min-height:232px;overflow:hidden;position:relative;}
.home-v12-legacy::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 8% 50%,rgba(194,112,40,.15),transparent 26%);pointer-events:none;}
.home-v12-legacy__portrait{position:relative;width:116px;height:116px;isolation:isolate;z-index:1;}
.home-v12-legacy__portrait-base{position:absolute;left:17%;top:32%;width:66%;height:34%;object-fit:cover;object-position:center 25%;border-radius:7px;background:#08101a;z-index:1;}
.home-v12-legacy__portrait-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;filter:drop-shadow(0 7px 13px rgba(0,0,0,.48));}
.home-v12-legacy__copy{position:relative;z-index:1;min-width:0;}
.home-v12-eyebrow{display:block;color:#c9974d;font-size:9px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;}
.home-v12-legacy h3{margin:5px 0 5px;color:#f8e5b5;font-family:alice,Georgia,serif;font-size:25px;line-height:1.05;}
.home-v12-legacy p{margin:0;color:#8e9aaf;font-size:11px;line-height:1.55;max-width:520px;}
.home-v12-legacy__progress-copy{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:15px;color:#caa566;font-size:9px;text-transform:uppercase;letter-spacing:.06em;}
.home-v12-legacy__progress-copy strong{color:#f1d08c;font-size:10px;white-space:nowrap;}
.home-v12-progress{height:6px;margin-top:7px;border-radius:999px;overflow:hidden;background:#090b12;border:1px solid rgba(255,255,255,.05);}
.home-v12-progress span{display:block;height:100%;background:linear-gradient(90deg,#82471d,#d59336,#f4c566);box-shadow:0 0 14px rgba(224,167,69,.25);}
.home-v12-legacy__bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;}
.home-v12-legacy__bottom small{color:#7f8ca2;font-size:9px;}
.home-v12-legacy__bottom a{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:7px;border:1px solid rgba(221,176,88,.26);background:#2a2018;color:#f2d58f!important;font-size:9px;font-weight:900;text-transform:uppercase;white-space:nowrap;}

.home-v12-ranking{border-radius:13px;overflow:hidden;min-width:0;}
.home-v12-ranking .home-ranking-widget{width:100% !important;max-width:none !important;height:100%;margin:0 !important;border:0 !important;border-radius:0 !important;position:relative !important;top:0 !important;background:transparent !important;box-shadow:none !important;}
.home-v12-ranking .statistics__title{min-height:42px !important;padding:0 12px !important;background:linear-gradient(90deg,#4c2f1c,#24191a) !important;color:#f0cf88 !important;font-size:12px !important;}
.home-v12-ranking .home-ranking-widget__switch{padding:6px !important;gap:5px !important;background:#090b11 !important;}
.home-v12-ranking .home-ranking-widget__tab{min-height:30px !important;font-size:9px !important;border-radius:6px !important;}
.home-v12-ranking .home-ranking-widget__panel{padding:8px 10px 10px !important;}
.home-v12-ranking .home-ranking-widget__row{padding:7px 0 !important;font-size:10px !important;}
.home-v12-ranking .home-ranking-widget__head--level,
.home-v12-ranking .home-ranking-widget__row--level{grid-template-columns:22px minmax(0,1fr) 44px !important;gap:6px !important;}
.home-v12-ranking .home-ranking-widget__head--guild,
.home-v12-ranking .home-ranking-widget__row--guild{grid-template-columns:22px minmax(0,1fr) 48px !important;gap:6px !important;}
.home-v12-ranking .home-ranking-widget__player img,
.home-v12-ranking .home-ranking-widget__guild-logo img{width:23px !important;height:23px !important;}

.home-v12-serverstack{display:flex;flex-direction:column;gap:12px;min-width:0;}
.home-v12-status{border-color:rgba(53,199,239,.26);border-radius:13px;overflow:hidden;flex:1;}
.home-v12-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;background:linear-gradient(90deg,#0b6685,#0d92b1);}
.home-v12-card-head>span{color:#fff;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;}
.home-v12-card-head b{display:flex;align-items:center;gap:6px;color:#90f0b4;font-size:9px;letter-spacing:.08em;}
.home-v12-card-head b i{width:7px;height:7px;border-radius:50%;background:#3de27d;box-shadow:0 0 10px rgba(61,226,125,.72);}
.home-v12-status__online{display:flex;align-items:baseline;gap:8px;padding:14px 13px 9px;}
.home-v12-status__online strong{color:#fff;font-size:28px;line-height:1;font-weight:900;}
.home-v12-status__online span{color:#8290a5;font-size:9px;text-transform:uppercase;letter-spacing:.07em;}
.home-v12-facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.05);border-top:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04);}
.home-v12-facts>div{padding:9px 11px;background:#0b0e17;}
.home-v12-facts small,.home-v12-facts strong{display:block;}
.home-v12-facts small{color:#728097;font-size:8px;text-transform:uppercase;letter-spacing:.08em;}
.home-v12-facts strong{margin-top:2px;color:#efd087;font-size:11px;}
.home-v12-status>a{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;color:#7fd7f1;font-size:9px;font-weight:800;text-transform:uppercase;}
.home-v12-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.home-v12-mini-card{padding:11px 12px;border-radius:11px;min-width:0;}
.home-v12-mini-card span,.home-v12-mini-card strong,.home-v12-mini-card small{display:block;}
.home-v12-mini-card span{color:#b98c4c;font-size:8px;font-weight:900;letter-spacing:.08em;}
.home-v12-mini-card strong{margin-top:5px;color:#f0e1c0;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.home-v12-mini-card small{margin-top:3px;color:#748196;font-size:8px;line-height:1.3;}
.home-v12-mini-card--castle{border-color:rgba(111,110,221,.20);}

@media(max-width:1550px){
  .home-v12-shell{padding-left:250px;padding-right:76px;}
  .home-v12-dashboard__grid{grid-template-columns:minmax(330px,1.1fr) minmax(300px,.9fr) 270px;}
}
@media(max-width:1300px){
  .home-v12-shell{padding-left:235px;padding-right:68px;}
  .home-v12-dashboard__grid{grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);}
  .home-v12-serverstack{grid-column:1/-1;display:grid;grid-template-columns:1.15fr .85fr;}
  .home-v12-mini-grid{height:100%;}
}
@media(max-width:1000px){
  .home-v12-shell{padding-left:252px;padding-right:14px;}
  .home-v12-dashboard__grid{grid-template-columns:1fr;}
  .home-v12-serverstack{grid-column:auto;display:grid;grid-template-columns:1fr 1fr;}
  .main-new--v12 .newsmodule{grid-template-columns:1fr !important;}
  .main-new--v12 .newsmodule__item--featured{grid-row:auto !important;}
}
@media(max-width:768px){
  .home-v12-shell{padding:0 12px;}
  .home-v12-dashboard__head{align-items:flex-start;flex-direction:column;gap:4px;}
  .home-v12-legacy{grid-template-columns:90px minmax(0,1fr);padding:13px;}
  .home-v12-legacy__portrait{width:82px;height:82px;}
  .home-v12-serverstack{grid-template-columns:1fr;}
  .home-v12-mini-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:520px){
  .home-v12-legacy{grid-template-columns:1fr;text-align:center;}
  .home-v12-legacy__portrait{margin:auto;}
  .home-v12-legacy__progress-copy,.home-v12-legacy__bottom{align-items:center;flex-direction:column;}
  .home-v12-mini-grid{grid-template-columns:1fr;}
}


/* ===== V14 YOUTUBE EMBEDS VISIBLES ===== */
.home-video-grid--embeds{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:14px !important;}
.home-youtube-embed-card{overflow:hidden;border:1px solid rgba(77,177,234,.22);border-radius:14px;background:linear-gradient(180deg,rgba(12,20,33,.97),rgba(7,10,17,.99));box-shadow:0 14px 30px rgba(0,0,0,.24);}
.home-youtube-embed-card__player{position:relative;aspect-ratio:16/9;background:#05070c;overflow:hidden;}
.home-youtube-embed-card__player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.home-youtube-embed-card__copy{padding:13px 14px 14px;}
.home-youtube-embed-card__copy>span{display:block;color:#e3ad56;font-size:9px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;}
.home-youtube-embed-card__copy strong{display:block;margin-top:5px;color:#f5f0e7;font-size:14px;line-height:1.3;}
.home-youtube-embed-card__copy small{display:block;margin-top:5px;color:#8e9bad;font-size:10px;line-height:1.5;}
.home-youtube-embed-card__copy a{display:inline-flex;align-items:center;gap:6px;margin-top:9px;color:#ff7c83;font-size:10px;font-weight:800;text-transform:uppercase;}

.mu-guides-video-grid--embeds{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:14px !important;}
.mu-guides-video--embed{overflow:hidden !important;}
.mu-guides-video__player{position:relative;aspect-ratio:16/9;background:#05070c;overflow:hidden;}
.mu-guides-video__player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.mu-guides-video--embed .mu-guides-video__copy a{display:inline-flex;align-items:center;gap:6px;margin-top:9px;color:#ff858b;font-size:10px;font-weight:900;text-transform:uppercase;}
@media(max-width:760px){.home-video-grid--embeds,.mu-guides-video-grid--embeds{grid-template-columns:1fr !important;}}


/* ============================================================
   V18 - RECARGAS / PAYPAL / WHATSAPP
   ============================================================ */

.mu-donation-top {
  padding-top: 82px;
  margin-bottom: 18px;
}

.mu-nav-whatsapp-recharge {
  color: #dffff0 !important;
  border-color: rgba(56,217,128,.28) !important;
  background: linear-gradient(90deg, rgba(20,80,55,.30), rgba(9,25,22,.20)) !important;
}
.mu-nav-whatsapp-recharge i { color: #42e88c !important; }
.mu-nav-whatsapp-recharge:hover {
  border-color: rgba(66,232,140,.62) !important;
  background: linear-gradient(90deg, rgba(24,120,73,.42), rgba(20,55,45,.30)) !important;
}
.mu-mobile-wa-recharge {
  background: linear-gradient(135deg, #128c55, #25d366) !important;
  color: #fff !important;
}

.donation-payment-banner {
  position: relative;
  max-width: 960px;
  margin: 0 auto 16px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(184,135,255,.36);
  background: #0b0714;
  box-shadow: 0 18px 42px rgba(0,0,0,.38), 0 0 34px rgba(111,58,196,.16);
}
.donation-payment-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 50px rgba(0,0,0,.28);
}
.donation-payment-banner img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: cover;
}

.mu-pay-methods {
  max-width: 960px;
  margin: 0 auto 16px;
  padding: 22px;
  border-radius: 16px;
  color: #f4edff;
  background:
    radial-gradient(circle at 50% 0%, rgba(111,65,190,.20), transparent 40%),
    linear-gradient(160deg, rgba(24,13,48,.97), rgba(10,6,23,.98));
  border: 1px solid rgba(173,129,242,.30);
  box-shadow: 0 16px 42px rgba(0,0,0,.28);
}
.mu-pay-methods__eyebrow {
  text-align: center;
  color: #b99bf2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2.4px;
  margin-bottom: 7px;
}
.mu-pay-methods h3 {
  margin: 0;
  color: #fff2ca;
  text-align: center;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: .4px;
  text-transform: none;
}
.mu-pay-methods__lead {
  max-width: 680px;
  margin: 9px auto 18px;
  color: rgba(225,215,244,.72);
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
}
.mu-pay-grid--primary {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}
.mu-pay-card {
  min-height: 178px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  padding: 18px;
  border-radius: 14px;
  text-decoration: none !important;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.mu-pay-card::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: -52px;
  top: -55px;
  border-radius: 50%;
  opacity: .20;
  filter: blur(4px);
}
.mu-pay-card:hover { transform: translateY(-3px); }
.mu-pay-card--paypal {
  background: linear-gradient(135deg, rgba(16,38,78,.92), rgba(8,15,34,.94));
  border: 1px solid rgba(67,143,255,.35);
}
.mu-pay-card--paypal::after { background: #3489ff; }
.mu-pay-card--whatsapp {
  background: linear-gradient(135deg, rgba(15,78,53,.90), rgba(6,27,22,.95));
  border: 1px solid rgba(54,220,132,.34);
  color: inherit !important;
}
.mu-pay-card--whatsapp::after { background: #25d366; }
.mu-pay-card--paypal:hover { border-color: rgba(79,160,255,.62); }
.mu-pay-card--whatsapp:hover { border-color: rgba(63,232,139,.62); }
.mu-pay-card__icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 10px;
  border-radius: 10px;
  font-size: 22px;
  background: rgba(255,255,255,.075);
}
.mu-pay-card--paypal .mu-pay-card__icon { color: #72b5ff; }
.mu-pay-card--whatsapp .mu-pay-card__icon { color: #52ee98; }
.mu-pay-card__title {
  margin: 0 0 5px;
  color: #fff !important;
  font-size: 16px;
  font-weight: 800;
}
.mu-pay-card__badge {
  display: inline-block;
  margin-bottom: 9px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.07);
}
.mu-pay-card__desc {
  max-width: 390px;
  color: rgba(222,215,240,.74);
  font-size: 11px;
  line-height: 1.5;
}
.mu-pay-card__cta {
  margin-top: 11px;
  color: #74f0a7;
  font-size: 11px;
  font-weight: 800;
}

.mu-wa-shop {
  max-width: 960px;
  margin: 0 auto 22px;
  padding: 22px;
  border-radius: 16px;
  border: 1px solid rgba(201,158,87,.28);
  background:
    radial-gradient(circle at 12% 0%, rgba(192,135,58,.13), transparent 38%),
    linear-gradient(150deg, rgba(20,13,31,.98), rgba(9,7,17,.98));
  box-shadow: 0 18px 45px rgba(0,0,0,.30);
}
.mu-wa-shop__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 17px;
}
.mu-wa-shop__kicker {
  display: block;
  color: #e5bb70;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.8px;
  margin-bottom: 5px;
}
.mu-wa-shop__head h3 {
  margin: 0 0 4px;
  color: #fff;
  font-size: 19px;
}
.mu-wa-shop__head p {
  margin: 0;
  color: rgba(220,210,235,.62);
  font-size: 11px;
}
.mu-wa-shop__brand {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #54e998;
  background: rgba(37,211,102,.08);
  border: 1px solid rgba(37,211,102,.22);
}
.mu-wa-packages {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
}
.mu-wa-package {
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-template-areas:
    "coin amount"
    "coin price"
    "button button";
  gap: 1px 10px;
  align-items: center;
  padding: 15px;
  min-height: 126px;
  border-radius: 13px;
  color: #fff !important;
  text-decoration: none !important;
  background: linear-gradient(145deg, rgba(38,24,54,.94), rgba(14,10,24,.98));
  border: 1px solid rgba(181,134,232,.23);
  transition: transform .17s ease, border-color .17s ease, box-shadow .17s ease;
}
.mu-wa-package:hover {
  transform: translateY(-3px);
  border-color: rgba(226,184,103,.47);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.mu-wa-package__coin {
  grid-area: coin;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e9bd68;
  background: rgba(218,165,76,.10);
  border: 1px solid rgba(218,165,76,.24);
}
.mu-wa-package__amount {
  grid-area: amount;
  font-size: 13px;
  color: #fff1c7;
}
.mu-wa-package__price {
  grid-area: price;
  color: rgba(235,225,245,.70);
  font-size: 11px;
}
.mu-wa-package__button {
  grid-area: button;
  margin-top: 12px;
  height: 31px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #eafff1;
  background: linear-gradient(135deg, rgba(18,126,73,.82), rgba(37,211,102,.78));
  border: 1px solid rgba(82,238,152,.25);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .8px;
}
.mu-wa-shop__note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  color: rgba(214,203,229,.68);
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.055);
  font-size: 10px;
  line-height: 1.45;
}
.mu-wa-shop__note i {
  color: #d8ad61;
  margin-top: 2px;
}

/* PayPal nativo: SOLO diseño, no lógica */
.paypal-gateway-container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto 24px;
}
.paypal-gateway-content {
  position: relative;
  overflow: hidden;
  padding: 24px !important;
  color: #e9e0f8 !important;
  font-weight: 500 !important;
  background:
    radial-gradient(circle at 50% -20%, rgba(64,133,240,.18), transparent 45%),
    linear-gradient(150deg, rgba(18,19,38,.98), rgba(8,7,20,.99)) !important;
  border: 1px solid rgba(84,143,235,.28) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.32);
}
.paypal-gateway-content::before {
  content: "PAGO AUTOMÁTICO · PAYPAL";
  display: block;
  margin: 0 0 14px;
  text-align: center;
  color: #8ec5ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
}
.paypal-gateway-logo {
  width: 100% !important;
  height: 76px !important;
  margin: 0 0 14px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.96) url('../img/paypal-logo-200-68.png') no-repeat center !important;
  background-size: auto 48px !important;
  border: 1px solid rgba(255,255,255,.10);
}
.paypal-gateway-conversion-rate {
  margin: 0 auto !important;
  padding: 8px 0 5px !important;
  color: rgba(232,224,246,.85) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.paypal-gateway-conversion-rate strong,
.paypal-gateway-conversion-rate span { color: #ffd889 !important; }
.paypal-gateway-form {
  width: 100% !important;
  margin: 15px auto !important;
  text-align: center !important;
}
.paypal-gateway-form div {
  padding: 4px 7px !important;
  color: rgba(232,224,246,.82) !important;
  font-size: 15px !important;
}
.paypal-gateway-form input[type=text] {
  width: 88px !important;
  height: 40px !important;
  padding: 0 10px !important;
  text-align: center !important;
  color: #fff4d1 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  outline: none !important;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(222,181,105,.42) !important;
  border-radius: 9px !important;
}
.paypal-gateway-form input[type=text]:focus {
  border-color: rgba(255,209,123,.75) !important;
  box-shadow: 0 0 0 3px rgba(211,166,87,.08) !important;
}
.paypal-gateway-continue {
  margin: 10px auto 0 !important;
  text-align: center !important;
}
.paypal-gateway-continue input[type=submit] {
  width: 220px !important;
  height: 44px !important;
  cursor: pointer !important;
  border: 1px solid rgba(122,177,255,.45) !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .7px !important;
  background: linear-gradient(135deg,#1a6fc2,#184e9a) !important;
  box-shadow: 0 8px 20px rgba(21,82,158,.22) !important;
}
.paypal-gateway-continue input[type=submit]:hover { filter: brightness(1.12); }
.module-requirements {
  color: rgba(215,203,232,.55) !important;
  font-size: 10px !important;
}

@media (max-width:800px) {
  .mu-donation-top { padding-top: 70px; }
  .mu-pay-grid--primary,
  .mu-wa-packages { grid-template-columns: 1fr; }
  .mu-pay-card { min-height: 150px; }
}
@media (max-width:520px) {
  .mu-pay-methods,
  .mu-wa-shop { padding: 15px; border-radius: 12px; }
  .mu-wa-shop__head { align-items: flex-start; }
  .paypal-gateway-content { padding: 16px !important; }
  .paypal-gateway-form div {
    display: block !important;
    margin: 4px auto;
  }
}

/* ============================================================
   V19 · HOME NEWS COMPACT FIX
   Reduce el bloque Latest News, centra el panel y elimina el
   vacío visual del card principal.
   ============================================================ */
.main-new--v12 .main-leftbar__news,
.main-new--v12 .news-card{
  max-width:980px !important;
  margin:0 auto !important;
}

.main-new--v12 .news-card{
  border-radius:12px !important;
  box-shadow:0 14px 26px rgba(0,0,0,.28) !important;
}

.main-new--v12 .news-card__header{
  min-height:46px !important;
  padding:10px 16px !important;
  font-size:15px !important;
}

.main-new--v12 .news-card__body{
  padding:14px !important;
}

/* Si solo hay una noticia destacada no forzar layout gigante */
.main-new--v12 .newsmodule{
  display:block !important;
}

.main-new--v12 .newsmodule__item,
.main-new--v12 .newsmodule__item:first-child,
.main-new--v12 .newsmodule__item--featured{
  width:100% !important;
  min-height:150px !important;
  margin:0 !important;
  padding:18px !important;
  border-radius:10px !important;
  overflow:hidden !important;
}

.main-new--v12 .newsmodule__item--featured,
.main-new--v12 .newsmodule__item:first-child{
  display:grid !important;
  grid-template-columns:220px minmax(0,1fr) !important;
  gap:16px !important;
  align-items:center !important;
  background:linear-gradient(135deg,rgba(33,22,46,.96),rgba(10,10,22,.96)) !important;
}

.main-new--v12 .newsmodule__item--featured .newsmodule__title,
.main-new--v12 .newsmodule__item--featured .newsmodule__body,
.main-new--v12 .newsmodule__item:first-child .newsmodule__title,
.main-new--v12 .newsmodule__item:first-child .newsmodule__body{
  grid-column:2 !important;
}

.main-new--v12 .newsmodule__item--featured .newsmodule__title,
.main-new--v12 .newsmodule__item:first-child .newsmodule__title{
  margin:0 0 6px !important;
}

.main-new--v12 .newsmodule__featured-image,
.main-new--v12 .newsmodule__image{
  width:220px !important;
  min-width:220px !important;
  max-width:220px !important;
  height:120px !important;
  margin:0 !important;
  border-radius:10px !important;
  overflow:hidden !important;
  align-self:stretch !important;
}

.main-new--v12 .newsmodule__featured-image a,
.main-new--v12 .newsmodule__image a{
  display:block !important;
  width:100% !important;
  height:100% !important;
}

.main-new--v12 .newsmodule__featured-image img,
.main-new--v12 .newsmodule__image img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
}

.main-new--v12 .newsmodule__body{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  min-width:0 !important;
}

.main-new--v12 .newsmodule__info-list{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
}

.main-new--v12 .newsmodule__info-item{
  margin:0 !important;
}

.main-new--v12 .newsmodule__info-item:first-child a,
.main-new--v12 .newsmodule__item:first-child .newsmodule__info-item:first-child a{
  display:block !important;
  font-size:15px !important;
  line-height:1.35 !important;
  font-weight:800 !important;
}

.main-new--v12 .newsmodule__info-item:last-child{
  font-size:11px !important;
  color:#8d98ad !important;
}

/* Evitar marcos exagerados/vacíos laterales */
.main-new--v12 .newsmodule__item::after,
.main-new--v12 .newsmodule__item::before{
  opacity:.55 !important;
}

@media (max-width: 1100px){
  .main-new--v12 .main-leftbar__news,
  .main-new--v12 .news-card{
    max-width:none !important;
  }
}

@media (max-width: 760px){
  .main-new--v12 .newsmodule__item--featured,
  .main-new--v12 .newsmodule__item:first-child{
    grid-template-columns:1fr !important;
  }

  .main-new--v12 .newsmodule__item--featured .newsmodule__title,
  .main-new--v12 .newsmodule__item--featured .newsmodule__body,
  .main-new--v12 .newsmodule__item:first-child .newsmodule__title,
  .main-new--v12 .newsmodule__item:first-child .newsmodule__body{
    grid-column:1 !important;
  }

  .main-new--v12 .newsmodule__featured-image,
  .main-new--v12 .newsmodule__image{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:170px !important;
  }
}