@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url("partial.css");
@import url("plugins.css");

* {
  font-family: "Roboto", sans-serif;
  border: none;
  outline: none !important;
  box-sizing: border-box;
  position: relative;
  cursor: url("../../media/imagens/cursor1.gif"), auto;
}

/* MU Online Custom Cursor – pointer for clickable elements */
a,
button,
input[type="submit"],
input[type="button"],
select,
label,
.btn,
.rank-tab,
.swiper-pagination-bullet,
.lang-item,
[role="button"],
[onclick],
.clickable {
  cursor: url("../../media/imagens/cursor2.png"), pointer !important;
}

/* Cursor click ripple effect on linkable content */
.mu-click-ripple {
  position: fixed;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 184, 8, 0.5) 0%, transparent 70%);
  pointer-events: none;
  transform: scale(0);
  animation: muClickPulse 0.4s ease-out forwards;
  z-index: 99999;
}

@keyframes muClickPulse {
  0% {
    transform: scale(0);
    opacity: 1;
  }

  60% {
    transform: scale(1.8);
    opacity: 0.5;
  }

  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

body {
  position: relative;
  background-color: #080202;
  overflow-x: hidden;
}

.header-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 860px;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.header-video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.header-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(8, 2, 2, 0.1) 0%, rgba(8, 2, 2, 0.5) 70%, #08020275 100%);
  pointer-events: none;
}

.nav,
header,
main,
footer,
.auth-modal-overlay {
  position: relative;
  z-index: 1;
}

a {
  transition: all 0.3s ease-in-out;
}

.offline {
  color: #ffb808 !important;
}

.online {
  color: #17db6f !important;
}

.nav {
  display: flex;
  width: 100%;
  max-width: 1500px;
  background: url("../images/bg-menu.png") no-repeat center;
  margin: auto;
  height: 233px;
  align-items: center;
  opacity: 0.9;
}

.nav .nav-left {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  gap: 40px;
  align-items: center;
  height: 150px;
  padding-right: 50px;
  list-style: none;
  margin: -65px 0 30px 0px;
}

.nav .nav-right {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  gap: 40px;
  align-items: center;
  height: 150px;
  padding-left: 50px;
  list-style: none;
  margin: -65px 0 30px 0px;
}

.nav ul li a {
  color: #fff;
  transition: all 0.3s ease-in-out;
}

.nav ul li a:hover {
  color: #f26332;
}

.nav .p-online {
  flex: none;
  width: 194px;
  height: 80px;
  margin-top: -70px;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav .p-online p {
  font-size: 17px;
  color: #fff;
  width: 150px;
  margin: 0;
  text-align: center;
  font-weight: 500;
  text-shadow: 1px 1px 10px #000000;
}

.nav .p-online p a {
  display: block;
  font-size: 17px;
  color: #6bff00;
  text-shadow: 1px 1px 10px #000000;
  margin-top: 3px;
}

header {
  height: 395px;
  width: 1153px;
  margin: auto;
  position: relative;
}

header .lang {
  padding: 5px;
  position: absolute;
  top: -80px;
  right: 860px;
  display: flex;
  gap: 5px;
  z-index: 50;
  border-radius: 10px;
  border: solid 1px #ffb8085e;
  background: #3a2800;
}

header .lang img {
  width: 32px;
  height: 20px;
  transition: all 0.3s ease-in-out;
}

header .lang img:hover {
  filter: grayscale(80%);
}

header .logo {
  position: relative;
  width: 550px;
  left: 305px;
  top: -25px;
  animation: logoPulseVibe 3s ease-in-out infinite;
}

.footer-logo img {
  animation: logoPulseVibe 3s ease-in-out infinite;
}

@keyframes logoPulseVibe {
  0% {
    transform: scale(1) translate(0, 0) rotate(0deg);
    filter: drop-shadow(0 0 12px rgba(255, 180, 0, 0.4)) drop-shadow(0 0 25px rgba(255, 100, 0, 0.2));
  }
  25% {
    transform: scale(1.03) translate(-1px, 1px) rotate(-0.5deg);
    filter: drop-shadow(0 0 18px rgba(255, 200, 0, 0.6)) drop-shadow(0 0 35px rgba(255, 120, 0, 0.4));
  }
  27% {
    transform: scale(1.03) translate(1.5px, -1px) rotate(0.5deg);
  }
  29% {
    transform: scale(1.03) translate(-1.5px, -1px) rotate(-0.5deg);
  }
  31% {
    transform: scale(1.03) translate(1px, 1px) rotate(0deg);
  }
  50% {
    transform: scale(1.05) translate(0, 0) rotate(0deg);
    filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 45px rgba(255, 140, 0, 0.5));
  }
  75% {
    transform: scale(1.02) translate(0, 0) rotate(0deg);
    filter: drop-shadow(0 0 16px rgba(255, 180, 0, 0.5)) drop-shadow(0 0 30px rgba(255, 100, 0, 0.3));
  }
  100% {
    transform: scale(1) translate(0, 0) rotate(0deg);
    filter: drop-shadow(0 0 12px rgba(255, 180, 0, 0.4)) drop-shadow(0 0 25px rgba(255, 100, 0, 0.2));
  }
}

header .btns {
  display: flex;
  gap: 550px;
  align-items: end;
  margin-top: -30px;
}

header .btns .download-large:hover {
  filter: brightness(150%);
}

header .btns .redes {
  display: flex;
  gap: 20px;
  margin-bottom: 10px;
}

header .btns .redes a:hover {
  filter: brightness(50%);
}

/** web-container **/

.web-container {
  width: 1153px;
  padding-top: 7%;
  margin: auto;
  display: flex;
}

.web-container .main {
  flex: 1;
}

.web-container .main-top {
  display: flex;
}

.web-container .main-top .slider {
  width: 565px;
  height: 250px;
}

.web-container .main-top .box-login {
  width: 290px;
  height: 237px;
  background: #120b04;
  border: 1px solid #7a5600;
}

.web-container .main-top .box-login .title {
  width: 100%;
  height: 60px;
  background: url("../images/sky-left.png") no-repeat;
  color: #fff;
  padding: 1rem 0 0 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
}

.web-container .main-top .box-login form {
  padding: 10px;
}

.web-container .main-top .box-login form .user {
  width: 168px;
  height: 43px;
  background: url("../images/input-login.png");
}

.web-container .main-top .box-login form .password {
  width: 168px;
  height: 43px;
  background: url("../images/input-password.png");
}

.web-container .main-top .box-login form input {
  width: 168px;
  height: 43px;
  padding-left: 40px;
  background: transparent;
  font-size: 14px;
  color: #fff;
}

.web-container .main-top .box-login form button {
  flex: 1;
  height: 81px;
  background: linear-gradient(90deg, #ad962b, #6e3b00);
  border-radius: 10px;
  color: #fff;
  transition: all 0.3s ease-in-out;
}

.web-container .main-top .box-login form button:hover {
  background: linear-gradient(90deg, #b26908, #cd8422);
}

.web-container .main-top .box-login .recovery {
  color: #fff;
  display: inline-block;
  font-size: 13px;
  margin: 10px 0 0 10px;
}

.web-container .main-top .box-login .recovery:hover {
  color: #f26332;
}

.web-container .main-top .box-login .info-account>*:not(:last-child) {
  margin-bottom: 0.8rem;
}

.web-container .main-top .box-login .info-account ul {
  padding: 0px;
  color: #fff;
  font-size: 13px;
}

.web-container .main-top .box-login .info-account ul>*:not(:last-child) {
  margin-bottom: 0.5rem;
}

.web-container .main-top .box-login .info-account ul span {
  float: right;
  color: #e3ce29;
}

.web-container .main-top .box-login .info-account ul li a {
  padding: 3px;
  background: rgb(65 48 23);
  display: block;
  border-radius: 5px;
}

.web-container .main-top .box-login .info-account ul li a:hover {
  background: rgb(116 92 41);
}

.web-container .main-top .box-login .info-account ul li a.logout {
  background: rgb(153, 25, 33);
}

.web-container .main-top .box-login .info-account ul li a.logout:hover {
  background: rgb(207, 38, 49);
}

.fast-buttons a:hover {
  filter: brightness(150%);
}

.web-container .web-title {
  width: 100%;
  height: 60px;
  background: url("../images/sky-right.png") no-repeat right;
  color: #fff;
  padding: 1rem 0 0 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
}

.web-container .web-sub-title {
  padding: 20px;
  text-align: center;
  color: #c1564a;
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 4px;
}

.web-container .main-notice-info {
  display: flex;
}

.web-container .box-notice {
  width: 571px;
  height: 414px;
  background: linear-gradient(180deg, #120b04, #120b04);
  border: 1px solid #7a5600;
}

.web-container .box-notice ul {
  padding: 10px;
}

.web-container .box-notice ul li {
  padding: 0.5rem 0;
}

.web-container .box-notice ul li:not(:last-child) {
  border-bottom: 1px solid #6c1c21;
}

.web-container .box-notice ul li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 14px;
  padding: 13px 10px;
  border-radius: 5px;
}

.web-container .box-notice ul li a:hover {
  background: #241c0c;
}

.web-container .box-notice ul li a .tag {
  color: #ee2b31;
  margin-right: 10px;
}

.web-container .box-notice ul li a .date {
  color: #ffb808;
}

.web-container .box-events,
.web-container .box-info {
  width: 291px;
  height: 414px;
  background: linear-gradient(180deg, #120b04, #120b04);
  border: 1px solid #7a5600;
}

.web-container .box-events ul,
.web-container .box-info ul,
.main-ranking-staff .box-staff ul {
  padding: 10px 10px 10px 15px;
  color: #fff;
  font-size: 13px;
}

.web-container ul.info li::before {
  content: "";
  position: absolute;
  top: 7px;
  left: -10px;
  background-color: #ad2b33;
  border-radius: 100%;
  width: 5px;
  height: 5px;
}

.web-container .box-events ul li.starting {
  color: #00ad4e !important;
}

.web-container .box-events ul li span {
  float: right;
  color: #e3ce29;
}

.web-container .box-info ul li,
.main-ranking-staff .box-staff ul li {
  padding: 0 0 0.9rem 0;
  margin-left: 5px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.main-ranking-staff .box-staff ul li::before {
  content: none !important;
  display: none !important;
}

.web-container .box-info ul li span {
  float: right;
  color: #c08487;
  font-weight: 500;
}

.web-container .box-info ul li {
  position: relative !important;
  padding-left: 15px !important;
}

.web-container .box-info ul li::before {
  content: "" !important;
  position: absolute !important;
  top: 7px !important;
  left: 0 !important;
  background-color: #ad2b33 !important;
  border-radius: 100% !important;
  width: 5px !important;
  height: 5px !important;
  display: block !important;
}

.web-container .box-info a {
  position: absolute;
  bottom: 30px;
  left: 30px;
  display: block;
  padding: 10px;
  border-radius: 5px;
  background: linear-gradient(180deg, #895200, #321f00);
  border: 1px solid #7a5600;
  color: #fff;
  width: 80%;
  text-align: center;
}

.web-container .box-info a:hover {
  background: linear-gradient(180deg, #886400, rgb(95 51 0));
}

.web-container .main-ranking-staff {
  display: flex;
}

.web-container .main-ranking-staff .box-ranking {
  flex: 1;
  height: 450px;
  background: linear-gradient(180deg, #120b04, #120b04);
  border: 1px solid #7a5600;
}

.web-container .main-ranking-staff .box-staff {
  width: 291px;
  height: 450px;
  background: linear-gradient(180deg, #120b04, #120b04);
  border: 1px solid #7a5600;
}

.web-container .main-ranking-staff .box-staff ul li span {
  float: right;
  font-weight: 500;
}

.web-container .main-ranking-staff .box-staff a.btn-support {
  position: absolute;
  bottom: 30px;
  left: 30px;
  display: block;
  padding: 10px;
  border-radius: 5px;
  background: linear-gradient(180deg, #623d03, #52340a);
  border: 1px solid #7a5600;
  color: #fff;
  width: 80%;
  text-align: center;
}

.web-container .main-ranking-staff .box-staff a.btn-support:hover {
  background: linear-gradient(180deg, #a36300, #4d3616);
}

.web-container .main-ranking-staff .ranks {
  padding: 10px;
}

.web-container .main-ranking-staff .ranks .rankings-table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  padding: 50px 10px;
}

.web-container .main-ranking-staff .ranks .rankings-table>div {
  border: 1px solid #923b31;
  border-radius: 10px;
  padding: 5px;
}

.web-container .main-ranking-staff .ranks .rankings-table table {
  width: 100%;
}

.web-container .main-ranking-staff .ranks .rankings-table table thead {
  color: #ffb808;
}

.web-container .main-ranking-staff .ranks .rankings-table table thead th {
  font-weight: normal;
  text-align: left;
  padding: 15px;
}

.web-container .main-ranking-staff .ranks .rankings-table table tbody tr td {
  color: #fff;
  font-size: 13px;
  padding: 10px 5px;
}

.web-container .main-ranking-staff .ranks .rankings-table table tbody tr td:first-child img {
  margin: auto;
}

.web-container .main-ranking-staff .ranks .rankings-table table tbody tr td:first-child {
  text-align: center;
}

.web-container .main-ranking-staff .ranks .rankings-table table tbody tr td a:hover {
  color: #923b31;
}

.web-container .main-ranking-staff .ranks .buttons {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #923b31;
}

.web-container .main-ranking-staff .ranks .buttons a {
  color: #923b31;
  text-align: center;
}

.web-container .main-ranking-staff .ranks .ranking-view {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 70px;
  grid-gap: 10px;
}

.web-container .main-ranking-staff .ranks .ranking-view>a {
  padding: 5px;
  border: 1px solid #923b31;
  border-radius: 10px;
}

.web-container .main-ranking-staff .ranks .ranking-view>a:hover {
  background: #4b2521;
  color: #fff;
}

.web-container .main-ranking-staff .ranks .ranking-view img,
.web-container .main-ranking-staff .ranks .ranking-view svg {
  width: 96px;
  margin: auto;
  border-radius: 5px;
}

.web-container .main-ranking-staff .ranks .ranking-view.hidden {
  display: none !important;
}

.web-container .main-ranking-staff .ranks .ranking-view p:first-child {
  color: #fff;
}

.web-container .main-ranking-staff .ranks .ranking-view p {
  color: rgb(197, 82, 53);
  text-align: center;
  padding: 10px 5px;
  font-size: 13px;
}

.web-container .main-ranking-staff .ranks .level {
  position: absolute;
  top: 80px;
  right: 26px;
  background: #1e0911;
  padding: 2px 5px !important;
  font-size: 10px !important;
  border-radius: 5px 0 0 5px;
}

.web-container .castle-siege {
  width: 100%;
  height: 408px;
  background: url("../images/bg-castle-siege.jpg");
  border: 1px solid #7a5600;
  display: flex;
  justify-content: center;
  align-items: center;
}

.web-container .castle-siege .mark {
  right: 180px;
  top: 60px;
}

.web-container .castle-siege .info {
  top: 50px;
}

.web-container .castle-siege .info>div {
  padding: 10px;
  background-color: #2d2004;
  border: 1px solid #8a6100;
  color: #fff;
  font-size: 13px;
  border-radius: 5px;
  margin: 0.3rem 0;
}

.web-container .castle-siege .info>div a {
  color: #e3ce29;
}

.web-container .castle-siege .info .next-confrontation span {
  color: #e3ce29;
}

.web-container .content {
  border: 1px solid #7a5600;
  background: linear-gradient(180deg, #120b04, #120b04);
}

.web-container .content .box-web {
  padding: 10px;
}

.web-container .content form p {
  color: #fff;
  font-size: 13px;
}

.web-container .content form input:not(input[type="checkbox"]),
.web-container .content form select,
.web-container .content form textarea {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  background-color: #271a07;
  color: #fff;
}

.web-container .content form button {
  padding: 10px 20px;
  background: linear-gradient(90deg, #ad962b, #6e3b00);
  border-radius: 10px;
  color: #fff;
  transition: all 0.3s ease-in-out;
}

.web-container .content form button:hover {
  background: linear-gradient(90deg, #b26908, #cd8422);
}

.web-container .terms {
  color: #fff;
  font-size: 13px;
}

.web-container .box-web table {
  width: 100%;
}

.web-container .box-web table thead {
  color: #ffb808;
}

.web-container .box-web table thead tr th {
  padding: 10px;
}

.web-container .box-web table thead {
  font-weight: normal;
  text-align: left;
  padding: 15px;
}

.web-container .box-web table tbody tr td {
  color: #fff;
  font-size: 13px;
  padding: 10px;
  border: 5px solid #190c15;
  background-color: #2e1718;
  border-radius: 12px;
}

.web-container .box-web table tbody tr td a {
  color: #eab719;
}

.web-container .box-web table tbody tr td a:hover {
  color: #ffda67;
}

.web-container .box-section {
  padding: 10px;
  background: #371514;
  border-radius: 5px;
  font-size: 13px;
}

.web-container .box-section h4 {
  color: #fff;
  font-size: 15px;
  border-bottom: 1px solid #7a5600;
}

.web-container .box-section p {
  padding: 10px;
  color: #b7afaf;
}

.web-container .ranking .buttons {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px;
  padding: 10px;
  border-bottom: 1px solid #923b31;
  margin-bottom: 20px;
}

.web-container .ranking .buttons a {
  color: #923b31;
  text-align: center;
}

.web-container .ranking .rankings {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px;
}

.web-container .ranking .rankings>a {
  padding: 10px;
  border: 1px solid #923b31;
  border-radius: 5px;
  color: rgb(197, 82, 53);
  font-size: 13px;
  text-align: center;
}

.web-container .ranking .rankings>a:hover {
  background: #4b2521;
}

.web-container .ranking .rankings>a p:first-child {
  color: #fff;
}

.web-container .ranking .rankings div img,
.web-container .ranking .rankings div svg {
  width: 96px;
  margin: auto;
  border-radius: 5px;
}

.web-container .select-shopping {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.web-container .select-shopping>div {
  padding: 10px;
  border-radius: 5px;
  background: #271d1e;
  color: #fff;
  text-align: center;
  font-size: 13px;
}

.web-container .select-shopping>div>*:not(:last-child),
.web-container .select-shopping .info>*:not(:last-child) {
  margin-bottom: 0.5rem;
}

.web-container .select-shopping>div a {
  padding: 5px;
  border-radius: 5px;
  background: #481d23;
  text-align: center;
  color: #fff;
  display: block;
  font-size: 14px;
}

.web-container .select-shopping>div a:hover {
  background: #742828;
}

.web-container .shopping-view .select-category {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.web-container .shopping-view>*:not(:last-child) {
  margin-bottom: 2rem;
}

.web-container .shopping-view .select-category button,
.web-container .shopping-view .select-category a {
  padding: 5px 10px;
  color: #fff;
  background: #2d2004;
  border: none;
  border-radius: 5px;
  font-size: 12px;
}

.web-container .shopping-view .select-category button:hover,
.web-container .shopping-view .select-category a:hover {
  background: #7e4740;
}

.web-container .shopping-view .items a {
  padding: 5px;
  border-radius: 5px;
  background: #481d23;
  text-align: center;
  color: #fff;
  display: block;
  font-size: 14px;
}

.web-container .shopping-view .items a:hover {
  background: #742828;
}

.web-container .shopping-view .select-category button:hover {
  background: #b94437;
}

.web-container .shopping-view .items {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.web-container .shopping-view .items>div {
  padding: 10px;
  border-radius: 5px;
  background: #271d1e;
  color: #fff;
  text-align: center;
  font-size: 13px;
}

.web-container .shopping-view .items>div .tag {
  padding: 2px 5px;
  background: #522629;
  color: #fff;
  font-size: 11px;
  position: absolute;
  top: -17px;
  right: -11px;
  border-radius: 5px;
}

.web-container .shopping-view .items>div .image {
  width: 100px;
  height: 100px;
  background: #522629;
  border-radius: 5px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.web-container .shopping-view .items>div>*:not(:last-child) {
  margin-bottom: 0.5rem;
}

.web-container .detail-item {
  display: flex;
  gap: 20px;
}

.web-container .detail-item .image {
  width: 150px;
  height: 150px;
  background: #522629;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.web-container .detail-item .option {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 13px;
  padding: 10px;
  border-radius: 5px;
  background: #331313;
}

.web-container .detail-item .details {
  flex: 1;
}

.web-container .detail-item .details>*:not(:last-child) {
  margin-bottom: 0.5rem;
}

.web-container .detail-item .details .sockets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.web-container .detail-item .details .price_total_item {
  display: inline-flex;
  gap: 5px;
  padding: 10px;
  border-radius: 5px;
  background: #4e1d1d;
  color: #fff;
}

.web-container .menu-user {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin: 2rem auto;
}

.web-container .menu-user li a {
  background: #923b31;
  text-decoration: none;
  display: block;
  padding: 5px;
  border-radius: 5px;
  text-align: center;
  color: #fff;
}

.web-container .menu-user li a:hover {
  background: #c54638;
}

.web-container .characters {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
}

.web-container .characters a {
  background: #522629;
  padding: 15px;
  border-radius: 5px;
  display: block;
  width: 100%;
  margin: auto;
  color: #fff;
  text-align: center;
}

.web-container .characters a:hover {
  background: #b94437;
}

.web-container .info-character .image {
  width: 130px;
  padding: 10px;
  border-radius: 5px;
  margin: auto;
  background-color: #531e21;
}

.web-container .info-character>*:not(:last-child) {
  margin-bottom: 3rem;
}

.web-container .ticket .info aside,
.web-container .post .info {
  padding: 10px;
  background-color: #3a1414;
  color: #fff;
  border-radius: 10px;
}

.web-container .ticket .answereds>*:not(:last-child) {
  margin-bottom: 0.5rem;
}

.web-container .post> :last-child {
  margin-top: 2rem;
}

.web-container .ticket .answereds>div,
.web-container .post .comments>div {
  padding: 10px;
  background-color: #3a1414;
  color: #fff;
  border-radius: 10px;
}

.web-container .ticket .posted,
.web-container .post .posted {
  color: rgb(228, 205, 79);
  font-size: 13px;
  margin: 10px 0 0;
}

.web-container .preview .image {
  width: 140px;
  padding: 10px;
  background: #532626;
  border-radius: 5px;
  margin: auto auto 2rem;
}

.web-container .preview .infos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

footer {
  width: 1157px;
  margin: 3rem auto;
  padding: 80px 0 0;
}

footer ul {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding-bottom: 1rem;
}

footer ul li a {
  text-decoration: none;
  color: #dca79b;
  margin: 0 10px;
}

footer .copyright {
  display: flex;
  gap: 30px;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: #b2827c;
}

footer .copyright a {
  color: #ffd94c;
}

.to-go-back {
  width: 140px;
  padding: 5px;
  color: #fff;
  background: #923b31;
  border-radius: 5px;
  display: block;
  margin: 1rem auto;
  text-align: center;
}

.to-go-back:hover {
  background: #b94437;
}

.warning {
  padding: 8px;
  background-color: rgb(145, 48, 48);
  color: #fff;
  text-align: center;
  border-radius: 5px;
  font-size: 13px;
}

/* ==========================================================================
   Antigravity Adaptations Override Block
   ========================================================================== */

/* Exact layout overrides to align login, slider and fast-buttons side-by-side */
.web-container .main-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 1153px !important;
  height: 250px !important;
  margin: auto !important;
}

.web-container .main-top .box-login {
  width: 290px !important;
  height: 250px !important;
  flex: none !important;
}

.web-container .main-top .slider {
  width: 565px !important;
  height: 250px !important;
  margin: 0 auto !important;
  flex: none !important;
  border: 1px solid #7a5600;
  background: #000000;
}

.web-container .main-top .fast-buttons {
  width: 290px !important;
  height: 250px !important;
  flex: none !important;
}

/* Swiper images layout fitting */
.slider_web,
.swiper-wrapper,
.swiper-slide {
  width: 100% !important;
  height: 100% !important;
}

.swiper-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Fast-buttons vertical list stack */
.fast-buttons ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  width: 100% !important;
}

.fast-buttons ul li {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

.fast-buttons ul li a {
  display: block !important;
  width: 100% !important;
}

.fast-buttons ul li a img {
  width: 100% !important;
  display: block !important;
}

/* Login Form Inputs and Button layout alignments */
.box-login form {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 10px !important;
  gap: 5px !important;
  margin: 0 !important;
}

.box-login form .user,
.box-login form .password {
  width: 168px !important;
  height: 43px !important;
  margin-bottom: 5px !important;
}

.box-login input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #fff !important;
  height: 43px !important;
  width: 168px !important;
  padding-left: 40px !important;
  outline: none !important;
}

.box-login button {
  width: 80px !important;
  height: 91px !important;
  background: linear-gradient(90deg, #ad962b, #6e3b00) !important;
  border-radius: 10px !important;
  border: none !important;
  color: #fff !important;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  outline: none !important;
  flex: none !important;
  margin: 0 0 5px 0 !important;
}

.box-login button:hover {
  background: linear-gradient(90deg, #b26908, #cd8422) !important;
}

.box-login .recovery {
  color: #fff;
  display: inline-block;
  font-size: 13px;
  margin: 0 0 0 10px;
}

/* Targeted CSS Overrides to style Bootstrap components matching the dark red theme */
.content,
.box-web,
.content .card,
.content .list-group-item,
.content .modal-content,
.content .jumbotron {
  background: linear-gradient(180deg, #120b04, #120b04) !important;
  border-color: #7a5600 !important;
  color: #fff !important;
}

.content .card-header,
.content .card-footer {
  background-color: #241c0c !important;
  border-color: #7a5600 !important;
  color: #ffb808 !important;
}

.content table,
.content th,
.content td {
  color: #fff !important;
  background-color: transparent !important;
  border-color: rgba(122, 86, 0, 0.5) !important;
}

.content thead th {
  color: #ffb808 !important;
  border-bottom-color: #7a5600 !important;
  background-color: #241c0c !important;
}

.content .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(88, 36, 39, 0.2) !important;
}

.content .table-hover tbody tr:hover {
  background-color: rgba(88, 36, 39, 0.4) !important;
  color: #fff !important;
}

.content input,
.content select,
.content textarea {
  background-color: #271a07 !important;
  border: 1px solid #7a5600 !important;
  color: #fff !important;
}

.content input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

.content .btn-primary,
.content .btn-success,
.content .btn-info,
.content .btn-warning,
.content .badge-primary {
  background: linear-gradient(90deg, #ad962b, #6e3b00) !important;
  border: none !important;
  color: #fff !important;
}

.content .btn-primary:hover,
.content .btn-success:hover,
.content .btn-info:hover {
  background: linear-gradient(180deg, #6c1c21, rgb(149, 40, 13)) !important;
}

.content a {
  color: #ffb808;
  text-decoration: none;
}

.content a:hover {
  color: #fff;
}

.content .text-muted,
.content .card-text,
.content p {
  color: #c0ac84 !important;
}

.content .alert-info,
.content .alert-warning,
.content .alert-danger,
.content .alert-success {
  background-color: #241c0c !important;
  border-color: #7a5600 !important;
  color: #fff !important;
}

/* Modal Overlay and Popup Styles for Registration Terms */
.auth-modal-overlay {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.85) !important;
  z-index: 99999 !important;
  align-items: center !important;
  justify-content: center !important;
}

.auth-modal-overlay.is-open {
  display: flex !important;
}

.auth-modal {
  background: linear-gradient(180deg, #120b04, #120b04) !important;
  border: 1px solid #7a5600 !important;
  width: 90% !important;
  max-width: 600px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8) !important;
}

.auth-modal-header {
  background: #241c0c !important;
  border-bottom: 1px solid #7a5600 !important;
  padding: 12px 18px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.auth-modal-header h3 {
  margin: 0 !important;
  color: #fff !important;
  font-size: 16px !important;
  text-transform: uppercase !important;
}

.auth-modal-close {
  background: none !important;
  border: none !important;
  color: #888 !important;
  font-size: 24px !important;
  cursor: pointer !important;
  line-height: 1 !important;
}

.auth-modal-close:hover {
  color: #fff !important;
}

.auth-modal-body {
  padding: 18px !important;
  color: #ccc !important;
  max-height: 400px !important;
  overflow-y: auto !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* Custom ranking list alignment overrides for dark mode */
.rank-list-header {
  background: #241c0c !important;
  border: 1px solid #7a5600 !important;
  color: #ffb808 !important;
}

.rank-item {
  background: linear-gradient(180deg, #120b04, #120b04) !important;
  border-bottom: 1px solid #7a5600 !important;
  color: #fff !important;
}

.rank-item:hover {
  background: #241c0c !important;
}

.rank-tabs .rank-tab {
  background: #241c0c !important;
  border: 1px solid #7a5600 !important;
  color: #fff !important;
}

.rank-tabs .rank-tab.active {
  background: linear-gradient(90deg, #ad962b, #6e3b00) !important;
  border-color: #f30 !important;
}

.rank-timer-bar {
  background: #120b04 !important;
  border: 1px solid #7a5600 !important;
  color: #fff !important;
}

.rank-filter-bar {
  background: #120b04 !important;
  border: 1px solid #7a5600 !important;
}

/* Fix bullet points showing on lists */
.box-login ul,
.box-login ul li,
.info-account ul,
.info-account ul li,
.box-notice ul,
.box-notice ul li,
.box-events ul,
.box-events ul li,
.box-info ul,
.box-info ul li {
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  background: none !important;
}

/* Disable all default pseudo bullet-points from the template css for clean margins */
.box-login ul li::before,
.box-login ul li::after,
.info-account ul li::before,
.info-account ul li::after,
.box-notice ul li::before,
.box-notice ul li::after,
.box-info ul li::before,
.box-info ul li::after {
  display: none !important;
  content: "" !important;
}

.box-events ul.event-list {
  padding: 10px 15px !important;
  max-height: 280px !important;
  overflow-y: auto !important;
}

.box-events ul.event-list::-webkit-scrollbar {
  width: 5px;
}

.box-events ul.event-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

.box-events ul.event-list::-webkit-scrollbar-thumb {
  background: #ff6b00;
  border-radius: 4px;
}

.box-events ul.event-list li {
  display: flex;
  justify-content: flex-start !important;
  align-items: center !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding-bottom: 6px !important;
  list-style: none !important;
  margin: 0 !important;
  background: none !important;
}

.box-events ul.event-list li.hidden-cat-event {
  display: none !important;
}

.box-events ul.event-list li::before {
  content: "•" !important;
  position: static !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
  color: #ad2b33 !important;
  /* Red dot bullet */
  font-size: 18px !important;
  margin-right: 8px !important;
  vertical-align: middle !important;
  display: inline-block !important;
  flex: none !important;
}

.box-events ul.event-list li span {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.box-events ul.event-list li span:first-child {
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  margin-right: auto !important;
  /* Pushes the timer badge to the right */
}

.box-events ul.event-list li .timer-badge44 {
  color: #ffd94c !important;
  /* Yellow text timer */
  font-size: 13px !important;
  font-weight: 700 !important;
  flex: none !important;
}

/* Event Category Selector Dark Red Theme */
.event-category-wrapper {
  margin: 10px 15px !important;
}

.custom-select-trigger44 {
  background-color: #241c0c !important;
  border: 1px solid #7a5600 !important;
  color: #fff !important;
}

.custom-options44 {
  background-color: linear-gradient(180deg, #120b04, #120b04) !important;
  border: 1px solid #7a5600 !important;
}

.custom-option44 {
  color: #ccc !important;
}

.custom-option44:hover,
.custom-option44.active {
  background-color: rgba(122, 86, 0, 0.4) !important;
  color: #fff !important;
}

/* Override list-info for dark red theme */
ul.list-info li {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  height: auto !important;
  padding: 8px !important;
}

ul.list-info li::before {
  color: #888 !important;
}

ul.list-info li:nth-of-type(1)::before {
  color: #e3ce29 !important;
  /* Gold */
}

ul.list-info li:nth-of-type(2)::before {
  color: #ccc !important;
  /* Silver */
}

ul.list-info li:nth-of-type(3)::before {
  color: #c4a090 !important;
  /* Bronze */
}

ul.list-info li:nth-of-type(1) {
  background: rgba(122, 86, 0, 0.15) !important;
}

ul.list-info li:nth-of-type(2) {
  background: rgba(255, 255, 255, 0.02) !important;
}

ul.list-info li:nth-of-type(3) {
  background: rgba(122, 86, 0, 0.1) !important;
}

ul.list-info li:nth-of-type(4) {
  background: rgba(255, 255, 255, 0.01) !important;
}

ul.list-info li:nth-of-type(5) {
  background: rgba(122, 86, 0, 0.05) !important;
}

/* Efeito Hover nos Ranks (Pulse / Zoom) */
.box-ranking ul.list-info li {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: 1px solid rgba(255, 255, 255, 0.03);
}

.box-ranking ul.list-info li:hover {
  transform: scale(1.025);
  box-shadow: 0 4px 12px rgba(255, 184, 8, 0.25);
  background: rgba(122, 86, 0, 0.2) !important;
  border-color: rgba(255, 184, 8, 0.3) !important;
}

/* Efeito Glitter nos Nomes (Char e Guild) */
.rank-name-glitter {
  background: linear-gradient(90deg, #ffffff 0%, #ffb808 25%, #e3ce29 50%, #ffb808 75%, #ffffff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textGlitter 3s linear infinite;
  display: inline-block;
  font-weight: 700 !important;
}

@keyframes textGlitter {
  0% {
    background-position: 0% center;
  }

  100% {
    background-position: -200% center;
  }
}

/* COUNTDOWN TIMER STYLING - TEMA RED */
.mu-countdown-container {
  background: rgba(35, 25, 5, 0.95);
  border: 2px solid #8a6100;
  box-shadow: 0 0 20px rgba(138, 97, 0, 0.4);
  border-radius: 8px;
  padding: 20px 25px;
  margin-bottom: 25px;
  text-align: center;
}

.mu-countdown-title {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 5px;
  text-shadow: 1px 1px 5px #000;
}

.mu-countdown-description {
  font-size: 13px;
  color: #a0a0b0;
  margin-bottom: 20px;
}

.mu-countdown-timer {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.mu-countdown-box {
  background: #111;
  border: 1px solid rgba(138, 97, 0, 0.6);
  border-radius: 6px;
  min-width: 80px;
  padding: 12px 10px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
}

.mu-countdown-box span {
  display: block;
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 3px;
  font-family: monospace;
}

.mu-countdown-box small {
  display: block;
  font-size: 10px;
  color: #a0a0b0;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.mu-countdown-finished {
  font-size: 20px;
  font-weight: 800;
  color: #2ecc71;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 10px 0;
  text-shadow: 0 2px 10px rgba(46, 204, 113, 0.2);
}

/* COUNTDOWN HEADER ADAPTATION */
.mu-countdown-header-wrap {
  margin: 0;
  margin-left: 0px;
  text-align: left;
  padding: 15px 10px;
  max-width: 380px;
  display: inline-block;
  vertical-align: bottom;
  background: rgba(35, 25, 5, 0.8);
  border: 1.5px solid #8a6100;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}

.mu-countdown-header-wrap .mu-countdown-title {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 3px;
  text-shadow: 1px 1px 5px #000;
  text-align: center;
}

.mu-countdown-header-wrap .mu-countdown-description {
  font-size: 11px;
  color: #a0a0b0;
  margin-bottom: 12px;
  text-align: center;
  font-weight: 500;
}

.mu-countdown-header-wrap .mu-countdown-timer {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.mu-countdown-header-wrap .mu-countdown-box {
  background: #111;
  border: 1px solid rgba(138, 97, 0, 0.6);
  border-radius: 6px;
  min-width: 55px;
  padding: 6px 4px;
  text-align: center;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
}

.mu-countdown-header-wrap .mu-countdown-box span {
  display: block;
  font-size: 20px;
  font-weight: 900;
  color: #e3ce29;
  line-height: 1.1;
  margin-bottom: 2px;
  font-family: monospace;
}

.mu-countdown-header-wrap .mu-countdown-box small {
  display: block;
  font-size: 8px;
  color: #a0a0b0;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.mu-countdown-header-wrap .mu-countdown-finished {
  font-size: 14px;
  font-weight: 800;
  color: #2ecc71;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 10px 0;
  text-shadow: 0 2px 10px rgba(46, 204, 113, 0.2);
  text-align: center;
}

/* SERVER INFOS NEW SECTION LAYOUT */
.info-section-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

.info-section-title-new {
  font-size: 20px;
  font-weight: 800;
  color: #ffb808;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-table-new {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  border: 1px solid #8a6100;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.info-table-new tr {
  border-bottom: 1px solid rgba(138, 97, 0, 0.2);
}

.info-table-new tr:last-child {
  border-bottom: none;
}

.info-table-new tr.bg-row-1 {
  background: rgba(35, 25, 5, 0.7);
}

.info-table-new tr.bg-row-2 {
  background: rgba(48, 29, 27, 0.5);
}

.info-table-new td {
  padding: 12px 18px;
}

.info-table-new td.info-label {
  font-weight: 600;
  color: #fff;
}

.info-table-new td.info-value {
  text-align: right;
  font-weight: 700;
  color: #e3ce29;
}

.info-services-section {
  border: 1px solid #8a6100;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  margin-bottom: 20px;
}

.info-services-title-bar {
  background: #2d2004;
  color: #ffb808;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1.5px solid #8a6100;
}

.info-services-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}

.info-services-table thead tr {
  background: rgba(0, 0, 0, 0.6);
  border-bottom: 1.5px solid #8a6100;
}

.info-services-table th {
  padding: 12px 18px;
  font-weight: 700;
  color: #ffb808;
}

.info-services-table th.center-col,
.info-services-table td.center-col {
  text-align: center;
}

.info-services-table tr {
  border-bottom: 1px solid rgba(138, 97, 0, 0.2);
}

.info-services-table tr.bg-row-1 {
  background: rgba(35, 25, 5, 0.7);
}

.info-services-table tr.bg-row-2 {
  background: rgba(48, 29, 27, 0.5);
}

.info-services-table td {
  padding: 11px 18px;
  color: #fff;
}

.info-services-table td.service-name {
  font-weight: 600;
}

.info-services-table td.status-yes {
  color: #2ecc71;
  font-weight: 700;
}

.info-services-table td.status-no {
  color: #e74c3c;
  font-weight: 700;
}