:root {
  --bk-night: #071112;
  --bk-panel: #101915;
  --bk-panel-2: #16231d;
  --bk-ink: #2c1b0d;
  --bk-cream: #fff4d1;
  --bk-parchment: #f7e7bd;
  --bk-gold: #f8c95c;
  --bk-amber: #ff9f2e;
  --bk-teal: #22d2a7;
  --bk-red: #f05262;
  --bk-line: rgba(255, 220, 128, 0.24);
  --bk-shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
}

html {
  min-height: 100%;
  width: 100%;
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bk-night) !important;
  color: var(--bk-cream);
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
}

.SiteBackgroundRotator,
.SiteMagicAura {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.SiteBackgroundRotator {
  z-index: 0;
  overflow: hidden;
  background: var(--bk-night);
}

.SiteBackgroundRotator span {
  position: absolute;
  inset: -3vh -3vw;
  opacity: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: saturate(1.12) contrast(1.06) brightness(0.78);
  transform: scale(1.06);
  animation: baiakeirosBgCycle 91s linear infinite;
  animation-delay: calc(var(--bg-index) * -7s);
}

.SiteBackgroundRotator::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 48% 28%, rgba(255, 197, 82, 0.13), transparent 25%),
    linear-gradient(180deg, rgba(3, 10, 12, 0.26), rgba(3, 10, 10, 0.76) 42%, rgba(8, 8, 8, 0.94)),
    linear-gradient(90deg, rgba(5, 20, 17, 0.78), rgba(94, 46, 14, 0.18) 48%, rgba(10, 30, 25, 0.84));
}

.SiteMagicAura {
  z-index: 0;
  opacity: 0.48;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 18% 32%, rgba(34, 210, 167, 0.18), transparent 16%),
    radial-gradient(circle at 75% 26%, rgba(248, 201, 92, 0.17), transparent 18%),
    radial-gradient(circle at 58% 72%, rgba(176, 84, 255, 0.13), transparent 20%),
    conic-gradient(from 140deg at 42% 45%, transparent 0deg, rgba(34, 210, 167, 0.09) 70deg, transparent 150deg, rgba(255, 159, 46, 0.08) 235deg, transparent 320deg);
  filter: blur(20px);
  animation: baiakeirosMagicDrift 16s ease-in-out infinite alternate;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3, 10, 12, 0.28), rgba(3, 10, 10, 0.78) 42%, rgba(8, 8, 8, 0.94)),
    linear-gradient(90deg, rgba(5, 20, 17, 0.75), rgba(94, 46, 14, 0.20) 48%, rgba(10, 30, 25, 0.82));
}

@keyframes baiakeirosBgCycle {
  0% {
    opacity: 0;
    transform: scale(1.06) translate3d(0, 0, 0);
  }

  5%,
  13% {
    opacity: 1;
  }

  21% {
    opacity: 0;
    transform: scale(1.1) translate3d(-1.4%, 0.8%, 0);
  }

  100% {
    opacity: 0;
    transform: scale(1.1) translate3d(-1.4%, 0.8%, 0);
  }
}

@keyframes baiakeirosMagicDrift {
  from {
    transform: translate3d(-1.5%, -1%, 0) scale(1);
  }

  to {
    transform: translate3d(1.5%, 1%, 0) scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .SiteBackgroundRotator span,
  .SiteMagicAura {
    animation: none;
  }

  .SiteBackgroundRotator span:first-child {
    opacity: 1;
  }
}

a {
  transition: color 160ms ease, transform 160ms ease, filter 160ms ease;
}

img,
video,
canvas {
  max-width: 100%;
}

#ArtworkHelper {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0 !important;
  min-height: 100vh;
  height: auto;
  overflow-x: hidden;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255, 213, 92, 0.08), rgba(34, 210, 167, 0.05) 44%, rgba(0, 0, 0, 0));
}

#Bodycontainer {
  display: block;
  width: 100% !important;
  max-width: 1380px;
  min-width: 0 !important;
  height: auto;
  margin: 0 auto;
  padding: 0;
}

#ContentRow {
  position: relative;
  top: auto !important;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 210px;
  gap: 18px;
  align-items: start;
  margin-top: 0;
}

#MenuColumn,
#ContentColumn,
#ThemeboxesColumn,
.Content,
#ContentHelper,
.Content .Box,
.Content .BoxContent,
.TableContainer,
.TableContentContainer,
.GameHero,
.GameHero * {
  box-sizing: border-box;
}

#MenuColumn {
  position: sticky;
  top: 16px;
  left: auto;
  width: 180px;
  margin: 0;
  padding: 0;
  overflow: visible;
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  line-height: 1.25;
}

#ContentColumn {
  position: relative;
  min-width: 0;
  margin: 0;
}

#ThemeboxesColumn {
  position: relative;
  top: auto;
  right: auto;
  width: 210px;
  margin: 0;
  text-align: center;
}

#LeftArtwork {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  display: flex;
  width: 180px !important;
  min-height: 0;
  height: auto !important;
  align-items: center;
  justify-content: center;
  margin: 0 0 18px;
  overflow: visible;
  filter:
    drop-shadow(-18px 10px 18px rgba(0, 0, 0, 0.54))
    drop-shadow(18px 10px 18px rgba(0, 0, 0, 0.48))
    drop-shadow(0 20px 24px rgba(0, 0, 0, 0.62));
}

#LeftArtwork #TibiaLogoArtworkTop {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 225px !important;
  max-width: none !important;
  height: auto !important;
  cursor: pointer;
  animation: baiakeirosLogoFloat 4.8s ease-in-out infinite;
  transform-origin: center center;
  transition: filter 180ms ease;
  filter:
    drop-shadow(-14px 8px 12px rgba(2, 8, 6, 0.58))
    drop-shadow(14px 8px 12px rgba(2, 8, 6, 0.52))
    drop-shadow(0 0 14px rgba(236, 168, 52, 0.18));
}

#LeftArtwork #TibiaLogoArtworkTop:hover {
  filter:
    saturate(1.12)
    brightness(1.08)
    drop-shadow(-16px 10px 14px rgba(2, 8, 6, 0.64))
    drop-shadow(16px 10px 14px rgba(2, 8, 6, 0.58))
    drop-shadow(0 0 18px rgba(236, 168, 52, 0.26));
}

@keyframes baiakeirosLogoFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-0.4deg);
  }

  50% {
    transform: translate3d(0, -4px, 0) rotate(0.4deg);
  }
}

.GameHero {
  position: relative;
  display: flex;
  min-height: 310px;
  margin: 5px 5px 16px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 222, 134, 0.36);
  border-radius: 8px;
  background-position: center;
  background-size: cover;
  box-shadow: var(--bk-shadow);
}

.GameHero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 17, 18, 0.92) 0%, rgba(8, 18, 16, 0.70) 48%, rgba(8, 18, 16, 0.22) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.50));
}

.GameHero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--bk-red), var(--bk-gold), var(--bk-teal));
}

.GameHero__content {
  position: relative;
  z-index: 1;
  width: min(590px, 100%);
  padding: 34px;
  align-self: flex-end;
  color: #fff8df;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.62);
}

.GameHero__eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 11px;
  border: 1px solid rgba(255, 220, 128, 0.34);
  border-radius: 999px;
  background: rgba(9, 27, 23, 0.78);
  color: var(--bk-gold);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.GameHero h1 {
  margin: 16px 0 8px;
  color: #fff9e7;
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  font-size: 3.75rem;
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: 0;
}

.GameHero p {
  max-width: 500px;
  margin: 0 0 22px;
  color: #f9e7bc;
  font-size: 1rem;
  line-height: 1.55;
}

.GameHero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.GameHero__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 17px;
  border: 1px solid rgba(71, 36, 15, 0.88);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 241, 183, 0.20), rgba(114, 54, 24, 0.28)),
    linear-gradient(180deg, #5b2f1c, #231611);
  color: #fff4cd !important;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 236, 169, 0.38), inset 0 -2px 0 rgba(49, 22, 10, 0.72), 0 10px 24px rgba(0, 0, 0, 0.28);
}

.GameHero__button--primary {
  border-color: rgba(83, 43, 14, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 247, 190, 0.58), rgba(255, 247, 190, 0) 36%),
    linear-gradient(180deg, #d89a38, #8a451b 56%, #4e2411);
  color: #281000 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.GameHero__button:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.GameHero__status {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 32px);
  min-height: 38px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 220, 128, 0.30);
  border-radius: 8px;
  background: rgba(9, 23, 22, 0.86);
  color: #fff3cc !important;
  font-size: 0.86rem;
  text-decoration: none !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.32);
}

.GameHero__status strong {
  color: var(--bk-gold);
  font-size: 1.05rem;
}

.GameHero__statusDot {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 999px;
  background: var(--bk-red);
  box-shadow: 0 0 0 4px rgba(240, 82, 98, 0.18);
}

.GameHero__statusDot.is-online {
  background: var(--bk-teal);
  box-shadow: 0 0 0 4px rgba(34, 210, 167, 0.18), 0 0 18px rgba(34, 210, 167, 0.48);
}

#Loginbox,
.SmallMenuBox#DownloadBox {
  left: 0;
  top: 0;
  width: 180px;
  max-width: 100%;
  margin: 0 0 12px;
  padding: 9px;
  border: 1px solid var(--bk-line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(27, 44, 34, 0.98), rgba(12, 24, 21, 0.98));
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.32);
}

.LanguageSwitcher {
  display: flex;
  width: 180px;
  margin: 0 0 12px;
  padding: 7px;
  gap: 7px;
  justify-content: center;
  border: 1px solid var(--bk-line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(28, 45, 37, 0.96), rgba(9, 20, 19, 0.98));
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.24);
}

.LanguageSwitcher__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 32px;
  padding: 0;
  cursor: pointer;
  border: 1px solid rgba(255, 220, 128, 0.22);
  border-radius: 8px;
  background: rgba(255, 244, 209, 0.08);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.LanguageSwitcher__button img {
  width: 24px;
  height: 16px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.22);
}

.LanguageSwitcher__button:hover,
.LanguageSwitcher__button.is-active {
  transform: translateY(-1px);
  border-color: rgba(255, 226, 135, 0.72);
  background: rgba(255, 202, 82, 0.18);
}

#Loginbox #LoginTop,
#Loginbox #LoginBottom,
#Loginbox .LoginBorder,
.SmallMenuBox .SmallBoxTop,
.SmallMenuBox .SmallBoxBottom,
.SmallMenuBox .SmallBoxBorder {
  display: none;
}

#LoginBox #LoginButtonContainer,
#Loginbox #LoginButtonContainer,
.SmallMenuBox .SmallBoxButtonContainer,
#Loginbox .Loginstatus {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: auto;
  background: transparent !important;
}

#Loginbox #LoginButton,
.MediumButtonBackground {
  display: block;
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 231, 150, 0.55);
  border-radius: 8px;
  background-image: linear-gradient(180deg, #ffe07a, #f08f23 56%, #ab4819) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 10px 18px rgba(0, 0, 0, 0.25);
}

#Loginbox #LoginButton {
  background: linear-gradient(180deg, #f4cf73 0%, #c27024 58%, #884216 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 198, 0.5),
    inset 0 -2px 0 rgba(74, 31, 9, 0.35),
    0 9px 16px rgba(0, 0, 0, 0.24);
}

#Loginbox #LoginButton .Button,
.MediumButtonOver {
  display: none;
}

#Loginbox #LoginButton #ButtonText,
.MediumButtonText {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: none !important;
  background-repeat: no-repeat !important;
}

.MediumButtonText {
  opacity: 0;
  pointer-events: none;
}

#Loginbox #LoginButton #ButtonText::after,
#DownloadBox .MediumButtonBackground::after {
  content: "Entrar";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2b1200;
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

#DownloadBox .MediumButtonBackground::after {
  content: "Download";
}

#DownloadBox a,
#PlayNowContainer {
  display: block;
  width: 100%;
}

#DownloadBox a,
#DownloadBox a:visited,
#DownloadBox a:hover,
#DownloadBox a:active,
#DownloadBox a:focus {
  color: #ffe7a3 !important;
  text-decoration: none !important;
  outline: none;
}

#DownloadBox a *,
#DownloadBox .ModernActionText {
  text-decoration: none !important;
}

#PlayNowContainer {
  position: relative;
  top: auto;
  left: auto;
  height: 40px;
}

.ModernActionText {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2b1200;
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

#Loginbox #LoginButton #ButtonText.ModernActionHost::after,
#DownloadBox .MediumButtonBackground.ModernActionHost::after {
  display: none;
}

#DownloadBox .MediumButtonBackground.ModernActionHost {
  overflow: hidden;
}

#DownloadBox .MediumButtonBackground.ModernActionHost .ModernActionText {
  position: relative;
  z-index: 3;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: #ffe7a3;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1;
  opacity: 1 !important;
  text-shadow: 1px 1px 0 #2a1208;
  visibility: visible !important;
}

#Loginbox #LoginButton #ButtonText.ModernActionHost {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

#Loginbox #LoginButton #ButtonText.ModernActionHost .ModernActionText {
  position: relative;
  z-index: 3;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: #fff3c5 !important;
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif !important;
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(37, 15, 4, 0.72) !important;
}

#Loginbox #LoginButton:hover {
  background: linear-gradient(180deg, #ffe086 0%, #d9822c 58%, #9c4d19 100%) !important;
  filter: none;
  transform: translateY(-1px);
}

#DownloadBox .MediumButtonBackground.ModernActionHost:hover .ModernActionText,
#DownloadBox .MediumButtonBackground.ModernActionHost:not(:hover) .ModernActionText {
  color: #ffe7a3;
  text-decoration: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#Loginbox .Loginstatus {
  margin-top: 8px;
  min-height: 32px;
  border: 1px solid rgba(34, 210, 167, 0.22);
  border-radius: 8px;
  background: rgba(4, 14, 13, 0.54) !important;
}

#LoginstatusText_2 {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 32px;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  cursor: pointer;
}

#Loginbox .LoginstatusText {
  background-image: none !important;
  display: none !important;
  pointer-events: none;
}

#LoginstatusText_2::after {
  content: "Criar Conta";
  position: relative;
  z-index: 2;
  color: #dafcef;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.ModernLinkText {
  position: relative;
  z-index: 2;
  display: block;
  color: #dafcef;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

#LoginstatusText_2.ModernLinkHost::after {
  display: none;
}

#Menu {
  left: 0;
  display: grid;
  gap: 7px;
  margin-top: 14px;
}

#MenuTop,
#MenuBottom {
  display: none;
}

.MenuButton {
  width: 180px;
  height: 46px;
  overflow: hidden;
  border: 1px solid rgba(255, 220, 128, 0.28);
  border-radius: 8px;
  background-image: linear-gradient(135deg, rgba(42, 72, 48, 0.98), rgba(15, 34, 31, 0.98) 54%, rgba(83, 32, 30, 0.92)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 18px rgba(0, 0, 0, 0.24);
}

.MenuButton:hover {
  filter: brightness(1.08) saturate(1.08);
}

.MenuButton .Button,
.MenuButton .Label,
.MenuButton .Lights {
  display: none;
}

.MenuButton .Icon {
  top: 7px;
  left: 10px;
  width: 32px;
  height: 32px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.52));
}

.MenuButtonText {
  position: absolute;
  top: 0;
  right: 26px;
  bottom: 0;
  left: 50px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff3cb;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55);
  text-transform: uppercase;
  white-space: nowrap;
}

.Extend {
  top: 17px;
  right: 8px;
  filter: brightness(1.45) saturate(1.2);
}

.Submenu {
  width: 180px;
  margin: 2px 0 8px;
  overflow: hidden;
  border: 1px solid rgba(34, 210, 167, 0.18);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: rgba(6, 23, 21, 0.92);
  box-shadow: 0 12px 18px rgba(0, 0, 0, 0.22);
}

.LeftChain,
.RightChain {
  display: none;
}

.Submenuitem {
  min-height: 32px;
  transition: background-color 160ms ease;
}

.Submenuitem:hover {
  background-color: rgba(34, 210, 167, 0.14) !important;
}

.ActiveSubmenuItemIcon {
  top: 11px;
  left: 10px;
}

.SubmenuitemLabel {
  width: 100%;
  padding: 8px 10px 8px 28px;
  border-bottom: 1px solid rgba(255, 220, 128, 0.12);
  color: #d8eee7;
  font-size: 0.78rem;
  line-height: 1.2;
  white-space: normal;
}

.Submenu a:hover .SubmenuitemLabel {
  color: #ffffff;
}

.Content .Box {
  margin: 5px 5px 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 220, 128, 0.30);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(43, 29, 19, 0.96), rgba(19, 26, 22, 0.98));
  box-shadow: var(--bk-shadow);
}

.Content .Corner-tl,
.Content .Corner-tr,
.Content .Corner-bl,
.Content .Corner-br,
.Content .CornerWrapper-b,
.Content .Border_1 {
  display: none;
}

.Content .BorderTitleText {
  height: 42px !important;
  border-bottom: 1px solid rgba(255, 220, 128, 0.26);
  background-image: linear-gradient(90deg, rgba(118, 42, 34, 0.96), rgba(146, 91, 31, 0.96) 42%, rgba(19, 79, 66, 0.96)) !important;
}

.Content .Box:has(.InfoBar) {
  background: rgba(7, 18, 17, 0.88);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
}

.Content .Box:has(.InfoBar) .BorderTitleText {
  height: auto !important;
  min-height: 44px;
  border-bottom: 0;
  background-image:
    linear-gradient(90deg, rgba(126, 54, 31, 0.96), rgba(126, 92, 33, 0.92) 48%, rgba(23, 75, 55, 0.96)) !important;
}

.Content .Title {
  top: 11px;
  left: 16px;
  max-width: calc(100% - 32px);
  height: auto;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.52));
}

.Content .Border_2,
.Content .Border_3 {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.Content .BoxContent {
  min-height: 320px;
  height: auto !important;
  padding: 18px;
  overflow-x: auto;
  background-color: var(--bk-parchment);
  background-image: linear-gradient(180deg, #fff6dc, #efdcb0) !important;
  color: var(--bk-ink);
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  font-size: 0.92rem;
  line-height: 1.45;
}

.Content .BoxContent:has(> .ThemeErrorBox:only-child),
.Content .BoxContent:has(> .GuildsPage:only-child),
.Content .BoxContent:has(> .PointsPage:only-child),
.Content .BoxContent:has(> .StripePointsPage:only-child),
.Content .BoxContent:has(> .ForumPage:only-child),
.Content .BoxContent:has(> .OnlinePage:only-child) {
  min-height: 0;
}

.ThemeErrorBox,
.ThemeErrorBox * {
  box-sizing: border-box;
}

.ThemeErrorBox {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(180, 42, 28, 0.34);
  border-radius: 8px;
  color: #7c1d12;
  background:
    linear-gradient(180deg, rgba(255, 244, 209, 0.88), rgba(245, 216, 158, 0.82)),
    #f6ddb0;
  box-shadow: 0 8px 16px rgba(73, 39, 16, 0.12);
}

.ThemeErrorBox__icon {
  display: flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(139, 31, 20, 0.42);
  border-radius: 50%;
  color: #fff6d6;
  background: #a72a1d;
  font-weight: 900;
  line-height: 1;
}

.ThemeErrorBox__body {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.ThemeErrorBox__body strong {
  color: #6e180f;
  font-size: 0.9rem;
  text-transform: uppercase;
}

.ThemeErrorBox__body ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 17px;
}

.ThemeErrorBox__body li {
  color: #b00000;
  font-size: 0.86rem;
  line-height: 1.35;
}

.Content .BoxContent td,
.Content .BoxContent th,
.Content th {
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
}

.Content .BoxContent img {
  height: auto;
}

.Content a {
  color: #0c6b62;
}

.Content a:hover {
  color: #9a390f;
}

.InfoBar {
  top: auto;
  display: flex;
  min-height: 42px;
  height: auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  color: #fff8da;
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  font-size: 0.78rem;
}

.InfoBar > img.InfoBarBigLogo,
.InfoBar > .InfoBarNumbers,
.InfoBarItem {
  display: inline-flex;
  align-items: center;
}

.InfoBarItem {
  gap: 6px;
  min-height: 28px;
  padding-right: 8px;
  border-right: 1px solid rgba(255, 220, 128, 0.14);
  text-decoration: none !important;
  white-space: nowrap;
}

.InfoBar > img.InfoBarBigLogo,
.InfoBarItem .InfoBarBigLogo {
  width: 16px;
  height: 16px;
  margin: 0 0 0 7px !important;
  object-fit: contain;
}

.InfoBar > img.InfoBarBigLogo:first-child {
  margin-left: 0 !important;
}

.InfoBarNumbers {
  position: static;
  top: auto;
  min-height: 28px;
  margin-left: -3px;
  padding: 0 8px 0 0;
  border-right: 1px solid rgba(255, 220, 128, 0.14);
}

.InfoBarSmallElement {
  margin-left: 0;
}

.InfoBarItem .InfoBarSmallElement {
  margin-left: 0;
}

.InfoBarOnline {
  display: inline-flex;
  float: none !important;
  align-items: center;
  margin-top: 0 !important;
  margin-left: auto;
  gap: 6px;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid rgba(255, 220, 128, 0.24);
  border-radius: 999px;
  background: rgba(5, 18, 17, 0.56);
}

.InfoBarOnline .InfoBarNumbers {
  min-height: 0;
  margin-left: 0;
  padding: 0;
  border-right: 0;
}

.InfoBarOnline .InfoBarBigLogo {
  width: 16px;
  height: 16px;
  margin: 0 !important;
}

.InfoBarOnline a {
  display: inline-flex;
  align-items: center;
}

.InfoBarLinks,
.InfoBar a {
  color: #fff8dc !important;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none !important;
}

.InfoBar a:hover {
  color: var(--bk-gold) !important;
}

#statusbar {
  background: linear-gradient(180deg, #10251f, #0b1716) !important;
}

#statusbar .container {
  width: 100%;
  max-width: 100%;
  padding: 8px;
}

#carouselExampleCaptions {
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(255, 220, 128, 0.20);
}

#carouselExampleCaptions img {
  display: block;
  width: 100% !important;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

.TableContainer,
.TableContentContainer {
  max-width: 100%;
  border-color: rgba(67, 50, 31, 0.45);
  border-radius: 8px;
  overflow-x: auto;
}

.TableContent {
  width: 100%;
}

.TableContainer .CaptionContainer,
.TableContainer .CaptionContainer .CaptionInnerContainer {
  background-color: #123a34 !important;
}

.TableContainer .CaptionContainer .Text {
  color: #fff4cf;
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
}

.TableContainer .Odd {
  background-color: #f8e9c1;
}

.TableContainer .Even,
.TableContentContainer {
  background-color: #e4c99a;
}

.InnerTableContainer .TableContentContainer {
  box-shadow: 0 10px 18px rgba(73, 39, 16, 0.20);
}

.Content .BoxContent .TableContainer {
  margin: 0 0 16px;
  overflow: hidden;
  border: 1px solid rgba(68, 44, 24, 0.28);
  border-radius: 8px;
  background: rgba(26, 18, 13, 0.10);
  box-shadow: 0 10px 18px rgba(73, 39, 16, 0.14);
}

.Content .BoxContent .TableContainer .CaptionContainer,
.Content .BoxContent .TableContainer .CaptionInnerContainer {
  min-height: 38px;
  height: auto !important;
  border: 0;
  background: linear-gradient(90deg, #71331f, #8a5a24 48%, #185044) !important;
}

.Content .BoxContent .CaptionEdgeLeftTop,
.Content .BoxContent .CaptionEdgeRightTop,
.Content .BoxContent .CaptionEdgeLeftBottom,
.Content .BoxContent .CaptionEdgeRightBottom,
.Content .BoxContent .CaptionBorderTop,
.Content .BoxContent .CaptionBorderBottom,
.Content .BoxContent .CaptionVerticalLeft,
.Content .BoxContent .CaptionVerticalRight,
.Content .BoxContent .TableShadowContainerRightTop,
.Content .BoxContent .TableShadowContainer,
.Content .BoxContent .TableShadowRightTop,
.Content .BoxContent .TableBottomShadow,
.Content .BoxContent .TableBottomLeftShadow,
.Content .BoxContent .TableBottomRightShadow {
  display: none !important;
}

.Content .BoxContent .TableContainer .CaptionContainer .Text {
  margin: 0;
  padding: 10px 13px;
  color: #fff4cf;
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
}

.Content .BoxContent .TableContainer .Table3,
.Content .BoxContent .TableContainer .Table4,
.Content .BoxContent .TableContainer .Table5 {
  width: 100% !important;
  border: 0 !important;
  background: transparent !important;
}

.Content .BoxContent .InnerTableContainer {
  width: auto !important;
  margin: 0 !important;
  padding: 8px !important;
}

.Content .BoxContent .TableContentAndRightShadow {
  margin: 0 !important;
  background: transparent !important;
}

.Content .BoxContent .TableContentContainer {
  width: 100% !important;
  margin: 0 0 8px !important;
  overflow-x: auto;
  border: 1px solid rgba(83, 58, 34, 0.26) !important;
  border-radius: 8px;
  background: #f8e8bf !important;
  box-shadow: none !important;
}

.Content .BoxContent .TableContent {
  width: 100% !important;
  border-collapse: collapse;
}

.Content .BoxContent .TableContent td,
.Content .BoxContent .TableContent th {
  padding: 8px 10px !important;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.Content .BoxContent .LabelH td,
.Content .BoxContent tr.LabelH td {
  background: #d6bd8d !important;
  color: #3a220f !important;
  font-weight: 900;
}

.Content .BoxContent .LabelV,
.Content .BoxContent .LabelV80,
.Content .BoxContent .LabelV100,
.Content .BoxContent .LabelV120,
.Content .BoxContent .LabelV150,
.Content .BoxContent .LabelV175,
.Content .BoxContent .LabelV200,
.Content .BoxContent .LabelV250 {
  width: auto !important;
  min-width: 120px;
  padding-right: 10px !important;
  color: #3b2410;
}

.AccountStatusImage {
  width: 54px;
  max-width: 54px;
  height: auto;
}

.BigBoldText {
  color: #3a220f;
  line-height: 1.1;
}

.premiumbenefits {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 !important;
}

.premiumbenefits > div {
  display: flex !important;
  min-width: 160px;
  flex: 1 1 0;
  align-items: center;
  justify-content: flex-start !important;
  gap: 8px;
  margin: 0 !important;
  padding: 10px;
  border: 1px solid rgba(83, 58, 34, 0.16);
  border-radius: 8px;
  background: rgba(255, 249, 232, 0.42);
}

.PremiumFeatureImage1 {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  object-fit: contain;
}

.InnerTableButtonRow {
  width: 100% !important;
  margin: 0 !important;
}

.InnerTableButtonRow > tbody > tr {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px;
}

.InnerTableButtonRow td {
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
}

.InnerTableButtonRow form {
  margin: 0 !important;
}

.BigButton {
  display: inline-flex !important;
  width: auto !important;
  min-width: 132px;
  height: 34px !important;
  background-image: none !important;
}

.BigButton > div {
  width: 100%;
}

.BigButtonOver {
  display: none !important;
}

.BigButtonText {
  position: relative !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 34px !important;
  padding: 0 12px !important;
  border: 0 !important;
  background: transparent !important;
  line-height: 1 !important;
}

#LoginFormButtonCell {
  width: auto !important;
}

#LoginFormButtonCell > div {
  display: grid;
  gap: 7px;
  float: none !important;
}

.AccountLogin,
.AccountLogin * {
  box-sizing: border-box;
}

.AccountLogin {
  display: grid;
  gap: 16px;
  color: #e9d8b2;
}

.AccountLogin__header {
  padding: 18px 20px;
  border: 1px solid rgba(200, 138, 54, 0.45);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(123, 54, 33, 0.92), rgba(15, 51, 37, 0.94)),
    radial-gradient(circle at 84% 18%, rgba(229, 160, 55, 0.22), transparent 34%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
}

.AccountLogin__header span,
.AccountLoginCard__title span,
.AccountLoginField span,
.AccountLoginCheck span {
  color: rgba(245, 226, 185, 0.82);
}

.AccountLogin__header h1 {
  margin: 4px 0 0;
  color: #fff6d6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: 0;
  text-shadow: 1px 1px 0 #2b160f;
}

.AccountLogin__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(250px, 0.75fr);
  gap: 14px;
  align-items: stretch;
}

.AccountLoginCard {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  margin: 0;
  padding: 18px;
  border: 1px solid rgba(182, 124, 54, 0.5);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(8, 34, 26, 0.96), rgba(5, 22, 18, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 244, 198, 0.08), 0 12px 24px rgba(0, 0, 0, 0.22);
}

.AccountLoginCard__title {
  display: grid;
  gap: 4px;
}

.AccountLoginCard__title strong {
  color: #fff5cf;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.2;
}

.AccountLogin__error {
  padding: 10px 12px;
  border: 1px solid rgba(255, 111, 74, 0.45);
  border-radius: 6px;
  color: #ffd5c2;
  background: rgba(105, 31, 19, 0.52);
}

.AccountLoginField {
  display: grid;
  gap: 6px;
}

.AccountLoginField input {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid rgba(207, 158, 87, 0.55);
  border-radius: 6px;
  color: #2d1b10;
  background: #fff5dc;
  outline: none;
}

.AccountLoginField input:focus {
  border-color: #f5c46d;
  box-shadow: 0 0 0 3px rgba(245, 196, 109, 0.18);
}

.AccountLoginCheck {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
}

.AccountLoginCheck input {
  width: 16px;
  height: 16px;
  accent-color: #9b5128;
}

.AccountLoginActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.AccountLoginActions button,
.AccountLoginCard--create button {
  min-height: 40px;
  padding: 9px 18px;
  border: 1px solid #d59c5a;
  border-radius: 6px;
  color: #fff3c5;
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(37, 15, 4, 0.72);
  background: linear-gradient(180deg, #b66a30, #7b3c1d);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 198, 0.22),
    0 6px 14px rgba(0, 0, 0, 0.24);
  cursor: pointer;
}

.AccountLoginActions button:hover,
.AccountLoginCard--create button:hover {
  background: linear-gradient(180deg, #cc7b38, #8d4720);
  transform: translateY(-1px);
}

.AccountLoginActions a {
  color: #f4cf82;
  font-weight: 700;
  text-decoration: none;
}

.AccountLoginActions a:hover {
  color: #fff4c7;
  text-decoration: underline;
}

.AccountLoginPerks {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.AccountLoginPerks li {
  position: relative;
  padding-left: 18px;
  color: rgba(233, 216, 178, 0.9);
  line-height: 1.35;
}

.AccountLoginPerks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e0a046;
  box-shadow: 0 0 8px rgba(224, 160, 70, 0.55);
}

.AccountActionPage,
.AccountActionPage * {
  box-sizing: border-box;
}

.AccountActionPage {
  display: grid;
  max-width: 720px;
  margin: 0 auto;
  gap: 14px;
  color: #e9d8b2;
}

.AccountActionPage__header,
.AccountActionForm {
  border: 1px solid rgba(182, 124, 54, 0.48);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 244, 198, 0.08), 0 12px 24px rgba(0, 0, 0, 0.20);
}

.AccountActionPage__header {
  padding: 16px 18px;
  background:
    linear-gradient(135deg, rgba(118, 54, 32, 0.92), rgba(11, 48, 38, 0.96)),
    radial-gradient(circle at 84% 12%, rgba(230, 167, 71, 0.18), transparent 34%);
}

.AccountActionPage__header span,
.AccountActionField span {
  color: rgba(245, 226, 185, 0.82);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.AccountActionPage__header h1 {
  margin: 4px 0 5px;
  color: #fff6d6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
  line-height: 1.12;
  text-shadow: 1px 1px 0 #2b160f;
}

.AccountActionPage__header p {
  margin: 0;
  color: rgba(245, 226, 185, 0.86);
  line-height: 1.42;
}

.AccountActionForm {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 16px;
  background: linear-gradient(180deg, rgba(8, 34, 26, 0.96), rgba(5, 22, 18, 0.96));
}

.AccountActionMessage p {
  margin: 0;
  color: rgba(245, 226, 185, 0.88);
  line-height: 1.45;
}

.AccountActionField {
  display: grid;
  gap: 6px;
}

.AccountActionField small {
  color: rgba(245, 226, 185, 0.78);
  font-size: 0.78rem;
  font-weight: 700;
}

.AccountActionNotice {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid rgba(226, 174, 84, 0.42);
  border-radius: 7px;
  color: #fff0bd;
  background: linear-gradient(135deg, rgba(109, 59, 27, 0.78), rgba(18, 73, 54, 0.76));
}

.AccountActionNotice strong {
  color: #ffffff;
}

.AccountActionNotice span {
  color: rgba(245, 226, 185, 0.86);
}

.AccountSexCards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.AccountSexCards__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.AccountSexCard {
  position: relative;
  display: grid;
  min-height: 195px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(207, 158, 87, 0.38);
  border-radius: 8px;
  background: #0b211c;
  box-shadow: inset 0 1px 0 rgba(255, 244, 198, 0.08), 0 12px 24px rgba(0, 0, 0, 0.22);
}

.AccountSexCard img {
  width: 100%;
  height: 195px;
  object-fit: cover;
  object-position: center top;
  filter: saturate(0.95) contrast(1.05);
  transition: transform 180ms ease, filter 180ms ease;
}

.AccountSexCard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 13, 12, 0.04), rgba(4, 13, 12, 0.72));
  box-shadow: inset 0 0 0 1px rgba(255, 238, 190, 0.05);
  pointer-events: none;
}

.AccountSexCard span {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 1;
  display: inline-flex;
  justify-content: center;
  padding: 9px 12px;
  border: 1px solid rgba(255, 220, 128, 0.26);
  border-radius: 7px;
  color: #fff6d6;
  background: rgba(7, 24, 21, 0.82);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 900;
  text-shadow: 1px 1px 0 #2b160f;
}

.AccountSexCard:hover img,
.AccountSexCards__input:focus + .AccountSexCard img,
.AccountSexCards__input:checked + .AccountSexCard img {
  transform: scale(1.025);
  filter: saturate(1.08) contrast(1.08);
}

.AccountSexCards__input:checked + .AccountSexCard {
  border-color: rgba(255, 229, 132, 1);
  box-shadow:
    inset 0 0 0 3px rgba(255, 207, 87, 0.60),
    0 0 0 2px rgba(255, 229, 132, 0.38),
    0 18px 34px rgba(0, 0, 0, 0.36),
    0 0 24px rgba(245, 180, 60, 0.26);
}

.AccountSexCards__input:checked + .AccountSexCard::before {
  content: "\2713";
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 244, 196, 0.76);
  border-radius: 50%;
  color: #2a1306;
  background: linear-gradient(180deg, #ffe586, #f2a733);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.28);
}

.CharacterCreateField--sexCards {
  grid-column: 1 / -1;
}

.AccountSexCards--create {
  --account-sex-card-height: 191px;
}

.AccountSexCards--create .AccountSexCard {
  min-height: var(--account-sex-card-height);
  background:
    radial-gradient(circle at 50% 32%, rgba(248, 201, 92, 0.16), transparent 34%),
    #0b211c;
}

.AccountSexCards--create .AccountSexCard img {
  height: var(--account-sex-card-height);
  object-fit: contain;
  object-position: center;
}

.AccountSexCards--compact {
  gap: 8px;
}

.AccountSexCards--compact .AccountSexCard {
  min-height: var(--account-sex-card-height);
}

.AccountSexCards--compact .AccountSexCard img {
  height: var(--account-sex-card-height);
  object-fit: contain;
  object-position: center;
}

.AccountSexCards--compact .AccountSexCard span {
  right: auto;
  bottom: 9px;
  left: 9px;
  justify-content: flex-start;
  width: fit-content;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 0.82rem;
  text-transform: uppercase;
}

.AccountSexCards--compact .AccountSexCards__input:checked + .AccountSexCard::before {
  top: 7px;
  right: 7px;
  width: 25px;
  height: 25px;
  font-size: 0.92rem;
}

.AccountActionField input,
.AccountActionField select {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid rgba(207, 158, 87, 0.55);
  border-radius: 6px;
  color: #2d1b10;
  background: #fff5dc;
  outline: none;
}

.AccountActionField select {
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, #7a421e 50%) right 15px center / 7px 7px no-repeat,
    linear-gradient(135deg, #fff8e6, #ead6aa);
  cursor: pointer;
}

.AccountActionField input:focus,
.AccountActionField select:focus {
  border-color: #f5c46d;
  box-shadow: 0 0 0 3px rgba(245, 196, 109, 0.18);
}

.AccountActionInputStatus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  gap: 8px;
  align-items: center;
}

.AccountActionInputStatus img {
  width: 16px;
  height: 16px;
}

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

.AccountActionCountry img {
  width: 22px;
  height: auto;
  image-rendering: pixelated;
}

.AccountActionForm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.AccountActionButton {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border: 1px solid rgba(207, 158, 87, 0.58);
  border-radius: 6px;
  color: #fff6d6 !important;
  background: linear-gradient(180deg, #945226, #693318);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  text-decoration: none !important;
  text-shadow: 1px 1px 0 #2a1208;
  cursor: pointer;
}

.AccountActionButton--secondary {
  background: rgba(12, 47, 38, 0.88);
}

.AccountRedirectPage {
  max-width: 520px;
}

.AccountRedirectCard {
  min-height: 0;
  padding: 18px;
  text-align: center;
}

.AccountRedirectCard .AccountActionForm__actions {
  justify-content: center;
}

.AccountManage,
.AccountManage * {
  box-sizing: border-box;
}

.AccountManage {
  display: grid;
  max-width: 820px;
  margin: 0 auto;
  gap: 10px;
  color: #e9d8b2;
}

.AccountManage__hero,
.AccountManage__status,
.AccountManageNotice,
.AccountManagePanel {
  border: 1px solid rgba(182, 124, 54, 0.48);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(8, 34, 26, 0.96), rgba(5, 22, 18, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 244, 198, 0.08), 0 12px 24px rgba(0, 0, 0, 0.20);
}

.AccountManage__hero {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background:
    linear-gradient(135deg, rgba(118, 54, 32, 0.92), rgba(11, 48, 38, 0.96)),
    radial-gradient(circle at 84% 12%, rgba(230, 167, 71, 0.18), transparent 34%);
}

.AccountManage__hero span,
.AccountManage__status span,
.AccountManageInfoGrid span {
  color: rgba(245, 226, 185, 0.78);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.AccountManage__hero h1 {
  margin: 3px 0 4px;
  color: #fff6d6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  line-height: 1.12;
  text-shadow: 1px 1px 0 #2b160f;
}

.AccountManage__hero p {
  margin: 0;
  color: rgba(245, 226, 185, 0.9);
}

.AccountManage__status {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  overflow: hidden;
  padding: 10px 12px;
}

.AccountManage__status.is-premium {
  border-color: rgba(220, 176, 76, 0.72);
  background:
    linear-gradient(135deg, rgba(20, 84, 48, 0.92), rgba(86, 67, 25, 0.82)),
    radial-gradient(circle at 88% 16%, rgba(255, 220, 111, 0.30), transparent 35%);
}

.AccountManage__status.is-premium::after {
  content: "";
  position: absolute;
  inset: -60% auto -60% -35%;
  width: 34%;
  transform: rotate(16deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 220, 0.30), transparent);
  animation: premiumStatusShine 5.4s ease-in-out infinite;
}

.AccountManage__status > * {
  position: relative;
  z-index: 1;
}

.AccountManage__statusIcon {
  width: 54px;
  max-width: 54px;
  height: auto;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.28));
}

.AccountManage__status strong,
.AccountManageInfoGrid strong {
  display: block;
  min-width: 0;
  color: #fff5cf;
  overflow-wrap: anywhere;
}

.AccountManage__status strong span,
.AccountManageInfoGrid strong span {
  font-size: inherit;
  text-transform: none;
}

.AccountManage__status small {
  display: block;
  margin-top: 3px;
  color: rgba(245, 226, 185, 0.82);
}

.AccountManage__actions,
.AccountManage__panelActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.AccountManage__actions {
  padding: 8px;
  border: 1px solid rgba(182, 124, 54, 0.32);
  border-radius: 8px;
  background: rgba(8, 34, 26, 0.76);
}

.AccountManage__actions a,
.AccountManageButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid rgba(207, 158, 87, 0.58);
  border-radius: 6px;
  color: #fff6d6 !important;
  background: linear-gradient(180deg, #945226, #693318);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  text-decoration: none !important;
  text-shadow: 1px 1px 0 #2a1208;
  cursor: pointer;
}

.AccountManage__actions a {
  background: rgba(255, 246, 214, 0.08);
}

.AccountManageButton--gold {
  border-color: rgba(245, 204, 98, 0.74);
  background: linear-gradient(180deg, #bc8434, #7b421f);
}

.AccountManageButton--danger {
  border-color: rgba(219, 111, 76, 0.66);
  background: linear-gradient(180deg, #9b3e2d, #612318);
}

.AccountManageNotice {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-color: rgba(223, 177, 86, 0.56);
  background: linear-gradient(135deg, rgba(88, 50, 22, 0.94), rgba(12, 45, 35, 0.94));
}

.AccountManageNotice--warning {
  border-color: rgba(219, 111, 76, 0.62);
}

.AccountManageNotice strong,
.AccountManageNotice span {
  display: block;
}

.AccountManageNotice strong {
  color: #fff3c4;
}

.AccountManageNotice span {
  color: rgba(245, 226, 185, 0.86);
}

.AccountManagePanel {
  overflow: hidden;
}

.AccountManagePanel > header {
  padding: 10px 14px;
  color: #fff3c4;
  background: linear-gradient(90deg, #743821, #8a5a24 52%, #23543a);
  border-bottom: 1px solid rgba(255, 220, 128, 0.22);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 #2b160f;
}

.AccountManageInfoGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  padding: 10px;
}

.AccountManageInfoGrid--compact {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.AccountManageInfoGrid > div {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(207, 158, 87, 0.24);
  border-radius: 6px;
  background: rgba(255, 246, 214, 0.08);
}

.AccountManage__panelActions {
  padding: 0 10px 10px;
}

.AccountManage__panelActions form,
.AccountManage__hero form,
.AccountManageNotice form {
  margin: 0;
}

.AccountManageTableWrap {
  overflow-x: auto;
  padding: 10px;
}

.AccountManageTable {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  color: #3a220f;
  background: #f8e8bf;
}

.AccountManageTable th,
.AccountManageTable td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(83, 58, 34, 0.16);
  text-align: left;
  vertical-align: middle;
}

.AccountManageTable th {
  color: #fff3c4;
  background: linear-gradient(90deg, #743821, #23543a);
  font-size: 0.76rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.AccountManageTable a {
  color: #145247 !important;
  font-weight: 900;
  text-decoration: none !important;
}

.AccountManageTableActions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.AccountManageIconAction {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(83, 58, 34, 0.16);
  border-radius: 6px;
  background: rgba(255, 246, 220, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.AccountManageIconAction svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  filter: drop-shadow(0 1px 0 rgba(255, 246, 215, 0.44));
}

.AccountManageIconAction--edit {
  color: #c89122 !important;
}

.AccountManageIconAction--delete {
  color: #b63224 !important;
}

.AccountManageIconAction:hover {
  transform: translateY(-1px);
  border-color: rgba(83, 58, 34, 0.28);
  background: rgba(255, 237, 184, 0.72);
}

.AccountManageIconAction--delete:hover {
  background: rgba(255, 219, 210, 0.72);
}

.AccountManageTable img {
  max-width: 24px;
  height: auto;
  vertical-align: middle;
}

.AccountManageTable__outfit {
  width: 70px;
  text-align: center !important;
}

.AccountManageTable__outfit img {
  width: 54px;
  max-width: none;
  height: 54px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.24));
}

.AccountManageTable em {
  color: #9b321f;
  font-style: normal;
  font-weight: 900;
}

.AccountManageBadge {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  border-radius: 999px;
  color: #fff5d7;
  font-size: 0.75rem;
  font-weight: 900;
}

.AccountManageBadge.is-online {
  background: linear-gradient(180deg, #3c9a4b, #1d6b34);
}

.AccountManageBadge.is-offline {
  background: linear-gradient(180deg, #a84c2f, #7a2d1f);
}

.CharacterCreatePage,
.CharacterCreatePage * {
  box-sizing: border-box;
}

.CharacterCreatePage {
  display: grid;
  max-width: 820px;
  margin: 0 auto;
  gap: 12px;
  color: #e9d8b2;
}

.CharacterCreatePage__header,
.CharacterCreateNotice,
.CharacterCreatePanel {
  border: 1px solid rgba(182, 124, 54, 0.48);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(8, 34, 26, 0.96), rgba(5, 22, 18, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 244, 198, 0.08), 0 12px 24px rgba(0, 0, 0, 0.20);
}

.CharacterCreatePage__header {
  padding: 16px 18px;
  background:
    linear-gradient(135deg, rgba(118, 54, 32, 0.92), rgba(11, 48, 38, 0.96)),
    radial-gradient(circle at 84% 12%, rgba(230, 167, 71, 0.18), transparent 34%);
}

.CharacterCreatePage__header span {
  color: rgba(245, 226, 185, 0.78);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.CharacterCreatePage__header h1 {
  margin: 4px 0 5px;
  color: #fff6d6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
  line-height: 1.12;
  text-shadow: 1px 1px 0 #2b160f;
}

.CharacterCreatePage__header p {
  max-width: 640px;
  margin: 0;
  color: rgba(245, 226, 185, 0.86);
  line-height: 1.42;
}

.CharacterCreateNotice {
  padding: 10px 12px;
  border-color: rgba(219, 111, 76, 0.62);
  color: #ffd5c2;
  background: rgba(105, 31, 19, 0.52);
}

.CharacterCreateForm {
  display: grid;
  gap: 12px;
  margin: 0;
}

.CharacterCreatePanel {
  overflow: hidden;
}

.CharacterCreatePanel > header {
  padding: 10px 14px;
  color: #fff3c4;
  background: linear-gradient(90deg, #743821, #8a5a24 52%, #23543a);
  border-bottom: 1px solid rgba(255, 220, 128, 0.22);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 #2b160f;
}

.CharacterCreateGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(180px, 0.8fr);
  gap: 12px;
  padding: 12px;
}

.CharacterCreateField {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
}

.CharacterCreateField > span {
  color: #f4cf82;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.CharacterCreateNameInput {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  gap: 8px;
  align-items: center;
}

.CharacterCreateField input[type="text"],
.CharacterCreateField input[type="password"],
.CharacterCreateField input:not([type]),
.CharacterCreateField select {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid rgba(207, 158, 87, 0.55);
  border-radius: 6px;
  color: #2d1b10;
  background: #fff5dc;
  outline: none;
}

.CharacterCreateField input:focus,
.CharacterCreateField select:focus {
  border-color: #f5c46d;
  box-shadow: 0 0 0 3px rgba(245, 196, 109, 0.18);
}

.CharacterCreateNameInput img {
  width: 16px;
  height: 16px;
}

.AccountCreateGrid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.AccountCreatePage {
  max-width: 1000px;
}

.AccountCreateTopGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 12px;
  align-items: start;
}

.AccountCreateTopGrid .CharacterCreateGrid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.AccountCreatePage .CharacterCreateOptions--cards:not(.AccountCreateOptions--compact) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.AccountCreateCountry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  gap: 8px;
  align-items: center;
}

.AccountCreateCountry img {
  max-width: 18px;
  max-height: 18px;
}

.AccountCreateRules {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px;
  color: #f5e2b9;
  font-weight: 800;
}

.AccountCreateRules input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex: 0 0 auto;
}

.AccountCreateRules a {
  color: #f4cf82 !important;
  text-decoration: none !important;
}

.AccountCreateOptions--compact label {
  min-height: 74px;
}

.CharacterCreateField small {
  min-height: 1em;
  color: #ffb19b;
  font-size: 0.78rem;
  font-weight: 800;
}

.CharacterCreateOptions {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.CharacterCreateOptions--inline {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}

.CharacterCreateOptions input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.CharacterCreateOptions label {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid rgba(207, 158, 87, 0.28);
  border-radius: 6px;
  color: #f5e2b9;
  background: rgba(255, 246, 214, 0.08);
  font-weight: 900;
  cursor: pointer;
}

.CharacterCreateOptions--cards {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.CharacterCreateOptions--cards label {
  position: relative;
  min-height: 138px;
  overflow: hidden;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 34%, rgba(245, 196, 109, 0.20), transparent 34%),
    linear-gradient(135deg, rgba(255, 246, 214, 0.12), rgba(255, 246, 214, 0.04)),
    rgba(8, 34, 26, 0.58);
  text-align: center;
}

.CharacterCreateOptions--cards label::after {
  content: "";
  position: absolute;
  right: 18%;
  bottom: 38px;
  left: 18%;
  height: 9px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.26);
  filter: blur(2px);
}

.CharacterCreateVocation__sprite {
  position: relative;
  z-index: 1;
  display: flex;
  width: 78px;
  height: 78px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 220, 128, 0.18);
  border-radius: 8px;
  background:
    radial-gradient(circle at center, rgba(255, 220, 128, 0.18), transparent 62%),
    rgba(4, 16, 14, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 244, 198, 0.10);
}

.CharacterCreateVocation__sprite img {
  display: block;
  max-width: 64px;
  max-height: 64px;
  image-rendering: pixelated;
  filter: drop-shadow(0 8px 7px rgba(0, 0, 0, 0.34));
  transform-origin: 50% 90%;
  animation: characterCreateIdle 1.8s ease-in-out infinite;
}

.CharacterCreateOptions--cards label strong {
  position: relative;
  z-index: 1;
}

.CharacterCreateOptions--cards label:hover .CharacterCreateVocation__sprite img,
.CharacterCreateOptions input[type="radio"]:checked + label .CharacterCreateVocation__sprite img {
  animation-duration: 1.15s;
  transform: translateY(-2px);
}

.CharacterCreateOptions input[type="radio"]:checked + label {
  border-color: rgba(245, 196, 109, 0.84);
  color: #fff6d6;
  background: linear-gradient(180deg, #945226, #693318);
  box-shadow: inset 0 1px 0 rgba(255, 244, 198, 0.18), 0 0 0 2px rgba(245, 196, 109, 0.12);
}

.CharacterCreateOptions input[type="radio"]:checked + label .CharacterCreateVocation__sprite {
  border-color: rgba(255, 226, 135, 0.54);
  background:
    radial-gradient(circle at center, rgba(255, 226, 135, 0.26), transparent 62%),
    rgba(40, 20, 9, 0.34);
}

@keyframes characterCreateIdle {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-3px) scale(1.02);
  }
}

.CharacterCreateActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.CharacterCreateButton {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border: 1px solid rgba(207, 158, 87, 0.58);
  border-radius: 6px;
  color: #fff6d6 !important;
  background: linear-gradient(180deg, #945226, #693318);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  text-decoration: none !important;
  text-shadow: 1px 1px 0 #2a1208;
  cursor: pointer;
}

.CharacterCreateButton--secondary {
  background: rgba(12, 47, 38, 0.88);
}

.BoxContent > form[action*="account/manage"] > .TableContainer,
.BoxContent > form[action*="account/manage"] + br + div + .TableContainer {
  max-width: 820px !important;
  margin: 0 auto 10px !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16) !important;
}

.BoxContent > form[action*="account/manage"] .InnerTableContainer,
.BoxContent > form[action*="account/manage"] .TableContentContainer,
.BoxContent > form[action*="account/manage"] + br + div + .TableContainer .InnerTableContainer,
.BoxContent > form[action*="account/manage"] + br + div + .TableContainer .TableContentContainer {
  padding: 0 !important;
}

.BoxContent > form[action*="account/manage"] .TableContent > tbody > tr,
.BoxContent > form[action*="account/manage"] .TableContent > tbody > tr > td:first-child table tr {
  gap: 8px !important;
}

.BoxContent > form[action*="account/manage"] .TableContent > tbody > tr > td,
.BoxContent > form[action*="account/manage"] + br + div + .TableContainer .TableContent > tbody > tr > td {
  padding: 8px 10px !important;
}

.BoxContent > form[action*="account/manage"] .CaptionInnerContainer,
.BoxContent > form[action*="account/manage"] + br + div + .TableContainer .CaptionInnerContainer {
  padding: 9px 12px !important;
}

.HighscoresPage,
.HighscoresPage * {
  box-sizing: border-box;
}

.HighscoresPage {
  display: grid;
  max-width: 900px;
  margin: 0 auto;
  gap: 12px;
  color: #3a220f;
}

.HighscoresPage__header,
.HighscoresFilter,
.HighscoresPanel {
  border: 1px solid rgba(83, 58, 34, 0.20);
  border-radius: 8px;
  box-shadow: 0 10px 18px rgba(73, 39, 16, 0.12);
}

.HighscoresPage__header {
  padding: 16px 18px;
  background:
    linear-gradient(135deg, rgba(123, 54, 33, 0.92), rgba(15, 51, 37, 0.94)),
    radial-gradient(circle at 84% 18%, rgba(229, 160, 55, 0.22), transparent 34%);
}

.HighscoresPage__header span {
  color: rgba(245, 226, 185, 0.82);
  font-weight: 900;
  text-transform: uppercase;
}

.HighscoresPage__header h1 {
  margin: 4px 0 0;
  color: #fff6d6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.55rem;
  line-height: 1.1;
  text-shadow: 1px 1px 0 #2b160f;
}

.HighscoresFilter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(255, 249, 232, 0.72), rgba(255, 249, 232, 0.42)),
    #f4dfad;
}

.HighscoresFilter label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.HighscoresFilter span {
  color: #6f3a1c;
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.HighscoresFilter select {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(83, 58, 34, 0.26);
  border-radius: 6px;
  color: #2d1b10;
  background: #fff5dc;
  outline: none;
}

.HighscoresNote {
  margin: 0;
  padding: 9px 11px;
  border: 1px solid rgba(83, 58, 34, 0.16);
  border-radius: 8px;
  color: #60411f;
  background: rgba(255, 249, 232, 0.50);
  font-size: 0.84rem;
}

.HighscoresPanel {
  overflow: hidden;
  background: #f4dfad;
}

.HighscoresPanel > header {
  padding: 10px 14px;
  color: #fff3c4;
  background: linear-gradient(90deg, #743821, #8a5a24 52%, #23543a);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 #2b160f;
}

.HighscoresTableWrap {
  overflow-x: auto;
}

.HighscoresTable {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  background: #f8e8bf;
}

.HighscoresTable th,
.HighscoresTable td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(83, 58, 34, 0.14);
  text-align: left;
  vertical-align: middle;
}

.HighscoresTable th {
  color: #fff3c4;
  background: linear-gradient(90deg, #743821, #23543a);
  font-size: 0.76rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.HighscoresTable td:nth-last-child(-n+3),
.HighscoresTable th:nth-last-child(-n+3) {
  text-align: right;
}

.HighscoresTable a {
  font-weight: 900;
  text-decoration: none !important;
}

.HighscoresTable a.is-online {
  color: #1f6b35 !important;
}

.HighscoresTable a.is-offline {
  color: #9b321f !important;
}

.HighscoresTable__outfit img {
  position: static !important;
  display: block;
  max-width: 54px;
  max-height: 54px;
  margin: -6px auto -2px !important;
  object-fit: contain;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.28));
}

.HighscoresPagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  padding: 10px 12px;
}

.HighscoresPagination a {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border: 1px solid rgba(83, 58, 34, 0.22);
  border-radius: 8px;
  background: rgba(255, 249, 232, 0.62);
  color: #145247 !important;
  font-weight: 900;
  text-decoration: none !important;
}

.BoxContent > form[action*="account/manage"] {
  display: grid;
  gap: 14px;
  margin: 0 !important;
}

.BoxContent > form[action*="account/manage"] > .TableContainer,
.BoxContent > form[action*="account/manage"] + br + div + .TableContainer {
  overflow: hidden;
  border: 1px solid rgba(182, 124, 54, 0.5);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(8, 34, 26, 0.96), rgba(5, 22, 18, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 244, 198, 0.08), 0 12px 24px rgba(0, 0, 0, 0.22);
}

.BoxContent > form[action*="account/manage"] > .TableContainer .CaptionContainer,
.BoxContent > form[action*="account/manage"] + br + div + .TableContainer .CaptionContainer {
  display: block !important;
  height: auto !important;
}

.BoxContent > form[action*="account/manage"] > .TableContainer .CaptionInnerContainer,
.BoxContent > form[action*="account/manage"] + br + div + .TableContainer .CaptionInnerContainer {
  display: block;
  height: auto !important;
  min-height: 0 !important;
  padding: 12px 16px;
  background: linear-gradient(90deg, #743821, #23543a);
}

.BoxContent > form[action*="account/manage"] > .TableContainer .CaptionInnerContainer > span,
.BoxContent > form[action*="account/manage"] + br + div + .TableContainer .CaptionInnerContainer > span {
  display: none !important;
}

.BoxContent > form[action*="account/manage"] > .TableContainer .CaptionInnerContainer .Text,
.BoxContent > form[action*="account/manage"] + br + div + .TableContainer .CaptionInnerContainer .Text {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  color: #fff6d6 !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px !important;
  line-height: 1.2;
  text-align: left;
  text-shadow: 1px 1px 0 #2b160f;
}

.BoxContent > form[action*="account/manage"] .Table4,
.BoxContent > form[action*="account/manage"] .TableContent,
.BoxContent > form[action*="account/manage"] + br + div + .TableContainer .Table3,
.BoxContent > form[action*="account/manage"] + br + div + .TableContainer .TableContent {
  background: transparent !important;
}

.BoxContent > form[action*="account/manage"] .InnerTableContainer,
.BoxContent > form[action*="account/manage"] .TableContentContainer,
.BoxContent > form[action*="account/manage"] + br + div + .TableContainer .InnerTableContainer,
.BoxContent > form[action*="account/manage"] + br + div + .TableContainer .TableContentContainer {
  padding: 0 !important;
  margin: 0 !important;
}

.BoxContent > form[action*="account/manage"] .TableContent > tbody > tr > td,
.BoxContent > form[action*="account/manage"] + br + div + .TableContainer .TableContent > tbody > tr > td {
  padding: 16px !important;
  border: 0 !important;
  color: #e9d8b2;
}

.BoxContent > form[action*="account/manage"] .TableContent > tbody > tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
}

.BoxContent > form[action*="account/manage"] .TableContent > tbody > tr > td:first-child table tr {
  display: grid;
  grid-template-columns: minmax(120px, 170px) minmax(0, 1fr);
  gap: 8px 12px;
  align-items: center;
  margin-bottom: 10px;
}

.BoxContent > form[action*="account/manage"] .LabelV {
  width: auto !important;
  padding: 0 !important;
  color: #f5e2b9 !important;
  background: transparent !important;
}

.BoxContent > form[action*="account/manage"] input[type="text"],
.BoxContent > form[action*="account/manage"] input[type="password"] {
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid rgba(207, 158, 87, 0.55);
  border-radius: 6px;
  color: #2d1b10;
  background: #fff5dc;
}

.BoxContent > div[style*="text-align:center"] h1,
.BoxContent > div[style*="text-align: center"] h1 {
  color: #fff6d6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  letter-spacing: 0;
  text-shadow: 1px 1px 0 #2b160f;
}

#DowloadBox {
  display: inline-grid;
  gap: 2px;
  justify-items: center;
  float: none !important;
  margin-left: 12px;
}

#createaccount {
  display: grid;
  gap: 14px;
  max-width: 760px;
  margin: 0 auto !important;
  color: #e9d8b2;
}

#createaccount .TableContainer {
  overflow: hidden;
  border: 1px solid rgba(182, 124, 54, 0.5);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(8, 34, 26, 0.96), rgba(5, 22, 18, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 244, 198, 0.08), 0 12px 24px rgba(0, 0, 0, 0.22);
}

#createaccount > table:first-of-type {
  display: block;
  width: 100% !important;
  border: 0 !important;
  border-spacing: 0 !important;
  background: transparent !important;
}

#createaccount > table:first-of-type > thead,
#createaccount > table:first-of-type > tbody,
#createaccount > table:first-of-type > tbody > tr,
#createaccount > table:first-of-type > tbody > tr > td {
  display: block;
  width: 100% !important;
  border: 0 !important;
  background: transparent !important;
}

#createaccount > table:first-of-type > thead td {
  display: block;
  padding: 14px 16px !important;
  border: 1px solid rgba(200, 138, 54, 0.45) !important;
  border-radius: 8px 8px 0 0;
  color: #fff6d6 !important;
  background: linear-gradient(90deg, #743821, #23543a) !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  text-shadow: 1px 1px 0 #2b160f;
}

#createaccount > table:first-of-type > tbody > tr > td {
  padding: 0 !important;
}

#createaccount .TableContainer > table > tbody > tr > td > table,
#createaccount .TableContainer > table > tbody > tr > td > table > tbody,
#createaccount .TableContainer > table > tbody > tr > td > table > tbody > tr,
#createaccount .TableContainer > table > tbody > tr > td > table > tbody > tr > td {
  display: block;
  width: 100% !important;
}

#createaccount .TableContentContainer {
  margin-bottom: 12px !important;
}

#createaccount .TableContentAndRightShadow,
#createaccount .TableShadowContainer,
#createaccount .TableShadowContainerRightTop,
#createaccount .TableShadowRightTop,
#createaccount .TableBottomShadow,
#createaccount .TableBottomLeftShadow,
#createaccount .TableBottomRightShadow {
  display: block;
  background-image: none !important;
}

#createaccount .TableShadowContainer,
#createaccount .TableShadowContainerRightTop,
#createaccount .TableShadowRightTop,
#createaccount .TableBottomShadow,
#createaccount .TableBottomLeftShadow,
#createaccount .TableBottomRightShadow {
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden;
}

#createaccount .TableContent {
  border: 0 !important;
  background: transparent !important;
}

#createaccount .TableContent > tbody > tr {
  display: grid;
  grid-template-columns: minmax(135px, 180px) minmax(0, 1fr);
  gap: 8px 12px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 220, 128, 0.10);
}

#createaccount .TableContent > tbody > tr:last-child {
  border-bottom: 0;
}

#createaccount .TableContent > tbody > tr > td {
  display: block;
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
}

#createaccount .TableContent > tbody > tr > td:first-child:empty {
  display: none;
}

#createaccount .TableContent > tbody > tr > td:first-child:empty + td,
#createaccount .TableContent > tbody > tr > td[colspan="2"] {
  grid-column: 1 / -1;
}

#createaccount .LabelV {
  min-width: 0;
  color: #f5e2b9 !important;
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1.2;
  background: transparent !important;
}

#createaccount input[type="text"],
#createaccount input[type="password"],
#createaccount select {
  width: min(100%, 360px) !important;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(207, 158, 87, 0.55);
  border-radius: 6px;
  color: #2d1b10;
  background: #fff5dc;
  font-size: 0.9rem;
  outline: none;
}

#createaccount input[type="text"]:focus,
#createaccount input[type="password"]:focus,
#createaccount select:focus {
  border-color: #f5c46d;
  box-shadow: 0 0 0 3px rgba(245, 196, 109, 0.18);
}

#createaccount select {
  cursor: pointer;
}

#createaccount img[id$="_indicator"],
#createaccount #account_country_img {
  width: 16px;
  height: 16px;
  margin-left: 6px;
  vertical-align: middle;
}

#createaccount .FormFieldError {
  display: block;
  margin-top: 2px;
  color: #ffb19b;
  font-size: 0.78rem;
  font-weight: 800;
}

#SuggestAccountNumber {
  margin-top: 4px;
  font-size: 0.72rem !important;
  font-weight: 800;
}

#createaccount .OptionContainer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  margin: 3px 12px 3px 0 !important;
  padding: 6px 10px;
  border: 1px solid rgba(200, 138, 54, 0.28);
  border-radius: 8px;
  color: #f5e2b9;
  background: rgba(255, 249, 232, 0.08);
  text-align: left;
}

#createaccount .OptionContainer input {
  margin: 0;
}

#createaccount .vocation-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px !important;
  margin: 0 !important;
}

#createaccount .vocation-option {
  width: auto !important;
  min-width: 0;
  transform: none !important;
}

#createaccount .vocation-option:hover {
  transform: none !important;
}

#createaccount .vocation-option label {
  width: 100%;
  min-height: 128px;
  padding: 10px;
  border: 1px solid rgba(200, 138, 54, 0.28);
  border-radius: 8px;
  background: rgba(255, 249, 232, 0.08);
  color: #f5e2b9 !important;
}

#createaccount .vocation-option:hover label {
  border-color: rgba(150, 78, 24, 0.50);
  background: rgba(255, 244, 209, 0.14);
}

#createaccount .vocation-option img {
  width: 72px !important;
  height: 72px !important;
  margin: 0 0 8px !important;
  border-radius: 8px !important;
}

#createaccount .vocation-option input[type="radio"]:checked + label {
  border-color: #8a4a21;
  box-shadow: inset 0 0 0 2px rgba(138, 74, 33, 0.24);
}

#createaccount .vocation-option input[type="radio"]:checked + label img {
  border-color: #8a4a21 !important;
  box-shadow: 0 0 0 3px rgba(138, 74, 33, 0.20) !important;
  background-color: rgba(138, 74, 33, 0.10) !important;
}

#createaccount #accept_rules {
  width: 18px;
  height: 18px;
  margin: 0 8px 0 0;
  vertical-align: middle;
}

#createaccount label[for="accept_rules"] {
  color: #f5e2b9;
  font-weight: 800;
}

#createaccount a {
  color: #f4cf82 !important;
  font-weight: 800;
}

.AccountCreateHint {
  display: grid;
  gap: 6px;
  max-width: 760px;
  margin: 0 auto 14px;
  padding: 18px 20px;
  border: 1px solid rgba(200, 138, 54, 0.45);
  border-radius: 8px;
  color: #e9d8b2;
  background:
    linear-gradient(135deg, rgba(123, 54, 33, 0.92), rgba(15, 51, 37, 0.94)),
    radial-gradient(circle at 84% 18%, rgba(229, 160, 55, 0.22), transparent 34%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
}

.AccountCreateHint span {
  color: rgba(245, 226, 185, 0.82);
  font-weight: 900;
  text-transform: uppercase;
}

.AccountCreateHint h1 {
  margin: 0;
  color: #fff6d6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: 0;
  text-shadow: 1px 1px 0 #2b160f;
}

.AccountCreateHint p {
  max-width: 620px;
  margin: 0;
  color: rgba(245, 226, 185, 0.86);
  line-height: 1.45;
}

#createaccount > table:last-of-type {
  width: 100% !important;
  margin-top: 6px;
}

#createaccount > table:last-of-type td {
  border: 0 !important;
}

.Content .BoxContent > form[action*="account/lost"] {
  display: grid;
  width: min(100%, 700px);
  max-width: 700px;
  gap: 14px;
  margin: 14px auto 0;
  text-align: left;
}

.Content .BoxContent:has(> form[action*="account/lost"]) {
  color: #3a220f;
  text-align: left;
  overflow-wrap: anywhere;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.34);
}

.Content .BoxContent > form[action*="account/lost"]::before {
  content: "Recuperacao de Conta";
  display: block;
  padding: 13px 15px;
  border: 1px solid rgba(255, 220, 128, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(113, 51, 31, 0.96), rgba(138, 90, 36, 0.94) 48%, rgba(24, 80, 68, 0.96));
  color: #fff4cf;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}

.Content .BoxContent > form[action*="account/lost"] table {
  display: block;
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid rgba(83, 58, 34, 0.24);
  border-radius: 8px;
  background: #f8e8bf;
  box-shadow: 0 10px 18px rgba(73, 39, 16, 0.12);
}

.Content .BoxContent > form[action*="account/lost"] tbody,
.Content .BoxContent > form[action*="account/lost"] tr {
  display: block;
  width: 100%;
}

.Content .BoxContent > form[action*="account/lost"] table:last-of-type {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.Content .BoxContent > form[action*="account/lost"] td {
  display: block;
  width: 100% !important;
  max-width: 100%;
  padding: 12px 14px !important;
  border: 0 !important;
  background: transparent !important;
  color: #3a220f !important;
  box-sizing: border-box;
}

.Content .BoxContent > form[action*="account/lost"] tr:first-child td {
  background: #d6bd8d !important;
  color: #3a220f !important;
  font-size: 0.88rem;
  font-weight: 900;
  text-transform: uppercase;
}

.Content .BoxContent > form[action*="account/lost"] input[type="text"] {
  width: 100% !important;
  max-width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid rgba(138, 74, 33, 0.36);
  border-radius: 6px;
  background: #fff6dc;
  color: #2d1b10;
  font-size: 0.92rem;
  box-sizing: border-box;
}

.LostAccountChoices {
  display: grid;
  gap: 10px;
  margin: 0;
}

.LostAccountChoice {
  display: block;
  position: relative;
  cursor: pointer;
}

.LostAccountChoice__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.LostAccountChoice__card {
  display: block;
  position: relative;
  min-height: 38px;
  padding: 10px 46px 10px 12px;
  border: 1px solid rgba(83, 58, 34, 0.16);
  border-radius: 8px;
  background: rgba(255, 249, 232, 0.52);
  color: #3a220f;
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.LostAccountChoice:hover .LostAccountChoice__card {
  border-color: rgba(138, 74, 33, 0.45);
  background: rgba(255, 244, 209, 0.72);
}

.LostAccountChoice__input:checked + .LostAccountChoice__card {
  border-color: #8a4a21;
  background: rgba(255, 244, 209, 0.86);
  box-shadow: inset 0 0 0 2px rgba(138, 74, 33, 0.18);
}

.LostAccountChoice__input:checked + .LostAccountChoice__card::before {
  content: "\2713";
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 244, 196, 0.76);
  border-radius: 50%;
  color: #2a1306;
  background: linear-gradient(180deg, #ffe586, #f2a733);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.28);
}

.LostAccountChoice__input:focus-visible + .LostAccountChoice__card {
  outline: 2px solid rgba(138, 74, 33, 0.55);
  outline-offset: 2px;
}

.Content .BoxContent > form[action*="account/lost"] .BigButton {
  margin: 0 auto;
}

.Content .BoxContent > form[action*="account/lost"] table:last-of-type td {
  display: flex;
  justify-content: center;
}

.Content .BoxContent > form[action*="account/lost"] + br,
.Content .BoxContent > form[action*="account/lost"] br {
  display: none;
}

.Content .BoxContent .TableContainer:has(#vocationFilter),
.Content .BoxContent .TableContainer:has(#skillFilter) {
  max-width: 760px;
  margin: 0 auto 16px;
}

.Content .BoxContent .TableContainer:has(#vocationFilter) .InnerTableContainer,
.Content .BoxContent .TableContainer:has(#skillFilter) .InnerTableContainer {
  padding: 12px !important;
}

.Content .BoxContent .TableContainer:has(#vocationFilter) .InnerTableContainer > table > tbody,
.Content .BoxContent .TableContainer:has(#skillFilter) .InnerTableContainer > table > tbody {
  display: grid;
  gap: 10px;
}

.Content .BoxContent .TableContainer:has(#vocationFilter) .InnerTableContainer > table > tbody > tr,
.Content .BoxContent .TableContainer:has(#skillFilter) .InnerTableContainer > table > tbody > tr {
  display: grid;
  grid-template-columns: minmax(110px, 150px) minmax(0, 1fr);
  gap: 8px 12px;
  align-items: center;
}

.Content .BoxContent .TableContainer:has(#vocationFilter) label,
.Content .BoxContent .TableContainer:has(#skillFilter) label {
  color: #3a220f;
  font-size: 0.84rem;
  font-weight: 900;
  text-transform: uppercase;
}

.Content .BoxContent #vocationFilter,
.Content .BoxContent #skillFilter {
  width: min(100%, 360px);
  min-height: 38px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 0.9rem;
}

.Content .BoxContent .TableContainer:has(#vocationFilter) + p {
  max-width: 760px;
  margin: 0 auto 16px;
  padding: 10px 12px;
  border: 1px solid rgba(83, 58, 34, 0.18);
  border-radius: 8px;
  background: rgba(255, 249, 232, 0.50);
  color: #53371a;
  font-size: 0.84rem;
  line-height: 1.35;
}

.Content .BoxContent .TableContainer:has(#vocationFilter) + p i {
  font-style: normal;
}

.Content .BoxContent .TableContainer:has(#vocationFilter) + p + .TableContainer {
  overflow: hidden;
}

.Content .BoxContent .TableContainer:has(#vocationFilter) + p + .TableContainer .InnerTableContainer,
.Content .BoxContent .TableContainer:has(#vocationFilter) + p + .TableContainer .TableContentContainer {
  max-width: 100%;
  overflow-x: auto;
}

.Content .BoxContent .TableContainer:has(#vocationFilter) + p + .TableContainer .TableContent {
  min-width: 720px;
  table-layout: fixed;
}

.Content .BoxContent .TableContainer:has(#vocationFilter) + p + .TableContainer .TableContent tr {
  transition: background-color 140ms ease;
}

.Content .BoxContent .TableContainer:has(#vocationFilter) + p + .TableContainer .TableContent tr:not(.LabelH):hover {
  background-color: #fff0c9 !important;
}

.Content .BoxContent .TableContainer:has(#vocationFilter) + p + .TableContainer .TableContent td {
  padding: 10px 12px !important;
  border-bottom: 1px solid rgba(83, 58, 34, 0.14);
  max-width: 1px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.Content .BoxContent .TableContainer:has(#vocationFilter) + p + .TableContainer .TableContent .LabelH td {
  padding-top: 11px !important;
  padding-bottom: 11px !important;
  color: #fff4cf !important;
  background: linear-gradient(90deg, #71331f, #8a5a24 48%, #185044) !important;
  font-size: 0.78rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.Content .BoxContent .TableContainer:has(#vocationFilter) + p + .TableContainer .TableContent td:first-child {
  color: #8a4a21;
  font-weight: 900;
  white-space: nowrap;
}

.Content .BoxContent .TableContainer:has(#vocationFilter) + p + .TableContainer .TableContent td:nth-child(2) img {
  position: static !important;
  display: block;
  max-width: 54px;
  max-height: 54px;
  margin: -6px auto -2px !important;
  object-fit: contain;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.28));
}

.Content .BoxContent .TableContainer:has(#vocationFilter) + p + .TableContainer .TableContent a {
  color: #144f45 !important;
  font-size: 0.92rem;
  text-decoration: none !important;
}

.Content .BoxContent .TableContainer:has(#vocationFilter) + p + .TableContainer .TableContent a:hover {
  color: #8a3f17 !important;
}

.Content .BoxContent .TableContainer:has(#vocationFilter) + p + .TableContainer .TableContent a span {
  font-weight: 900;
}

.Content .BoxContent .TableContainer:has(#vocationFilter) + p + .TableContainer .TableContent tr:last-child td[colspan] {
  border-bottom: 0;
  text-align: right !important;
}

.Content .BoxContent .TableContainer:has(#vocationFilter) + p + .TableContainer .size_xxs {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border: 1px solid rgba(83, 58, 34, 0.22);
  border-radius: 8px;
  background: rgba(255, 249, 232, 0.62);
  color: #3a220f !important;
  font-size: 0.78rem;
  font-weight: 900;
}

.LastKills {
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
}

.LastKills__header {
  padding: 18px 20px;
  border: 1px solid rgba(200, 138, 54, 0.45);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(123, 54, 33, 0.92), rgba(15, 51, 37, 0.94)),
    radial-gradient(circle at 84% 18%, rgba(229, 160, 55, 0.22), transparent 34%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
}

.LastKills__header span {
  color: rgba(245, 226, 185, 0.82);
  font-weight: 900;
  text-transform: uppercase;
}

.LastKills__header h1 {
  margin: 4px 0 0;
  color: #fff6d6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: 0;
  text-shadow: 1px 1px 0 #2b160f;
}

.LastKills__list {
  display: grid;
  gap: 10px;
}

.LastKills__item {
  display: grid;
  grid-template-columns: 46px 54px minmax(128px, 142px) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(83, 58, 34, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 249, 232, 0.58), rgba(255, 249, 232, 0.28)),
    #f4dfad;
  color: #3a220f;
  box-shadow: 0 8px 16px rgba(73, 39, 16, 0.12);
}

.LastKills__item:hover {
  background:
    linear-gradient(180deg, rgba(255, 249, 232, 0.82), rgba(255, 249, 232, 0.38)),
    #f8e8bf;
}

.LastKills__outfit {
  position: relative;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border: 1px solid rgba(83, 58, 34, 0.18);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 220, 128, 0.30), transparent 58%),
    rgba(20, 70, 55, 0.20);
  box-shadow: inset 0 1px 0 rgba(255, 249, 232, 0.32);
}

.LastKills__outfit img {
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 78px;
  max-width: none;
  height: auto;
  transform: translateX(-50%);
  image-rendering: pixelated;
  filter: drop-shadow(0 7px 6px rgba(0, 0, 0, 0.28));
}

.LastKills__rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(83, 58, 34, 0.24);
  border-radius: 8px;
  background: #d6bd8d;
  color: #7b3517;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
}

.LastKills__time {
  min-width: 0;
  color: #62421f;
  font-size: 0.78rem;
  font-weight: 900;
  white-space: normal;
  overflow-wrap: anywhere;
}

.LastKills__text {
  min-width: 0;
  color: #3a220f;
  font-size: 0.9rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.LastKills__text a {
  color: #145247 !important;
  font-weight: 900;
  text-decoration: none !important;
}

.LastKills__text a:hover {
  color: #8a3f17 !important;
}

.LastKills__text b,
.LastKills__text strong {
  color: #8a3f17;
}

.LastKills__world {
  justify-self: end;
  padding: 5px 8px;
  border: 1px solid rgba(83, 58, 34, 0.18);
  border-radius: 999px;
  background: rgba(255, 249, 232, 0.54);
  color: #62421f;
  font-size: 0.74rem;
  font-weight: 900;
}

.LastKills__empty {
  padding: 18px;
  border: 1px solid rgba(83, 58, 34, 0.18);
  border-radius: 8px;
  background: rgba(255, 249, 232, 0.58);
  color: #3a220f;
  font-weight: 900;
  text-align: center;
}

.SpellsPage,
.SpellsPage * {
  box-sizing: border-box;
}

.SpellsPage {
  display: grid;
  gap: 14px;
  max-width: 960px;
  margin: 0 auto;
  color: #e9d8b2;
}

.SpellsPage__header,
.SpellsFilter,
.SpellsTabs {
  overflow: hidden;
  border: 1px solid rgba(182, 124, 54, 0.48);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(8, 34, 26, 0.96), rgba(5, 22, 18, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 244, 198, 0.08), 0 12px 24px rgba(0, 0, 0, 0.20);
}

.SpellsPage__header {
  padding: 18px 20px;
  background:
    linear-gradient(135deg, rgba(123, 54, 33, 0.92), rgba(15, 51, 37, 0.94)),
    radial-gradient(circle at 84% 18%, rgba(229, 160, 55, 0.22), transparent 34%);
}

.SpellsPage__header span,
.SpellsFilter label {
  color: rgba(245, 226, 185, 0.82);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.SpellsPage__header h1 {
  margin: 4px 0 0;
  color: #fff6d6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: 0;
  text-shadow: 1px 1px 0 #2b160f;
}

.SpellsFilter {
  display: grid;
  gap: 8px;
  padding: 14px;
}

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

.SpellsFilter select {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid rgba(207, 158, 87, 0.55);
  border-radius: 6px;
  color: #2d1b10;
  background: #fff5dc;
  outline: none;
}

.SpellsFilter button {
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid #1b0f09;
  border-radius: 6px;
  color: #ffe7a3;
  background:
    linear-gradient(180deg, rgba(255, 239, 178, 0.18), rgba(92, 41, 18, 0.16)),
    #8a4a21;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 235, 170, 0.30), 0 10px 16px rgba(0, 0, 0, 0.22);
}

.SpellsTabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.SpellsTabs > input[type="radio"] {
  position: absolute;
  left: -200vw;
}

.SpellsTabs > label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 12px;
  border-right: 1px solid rgba(255, 220, 128, 0.16);
  border-bottom: 1px solid rgba(255, 220, 128, 0.16);
  background: rgba(255, 244, 209, 0.07);
  color: #f4cf82;
  font-weight: 900;
  cursor: pointer;
}

.SpellsTabs > label:last-of-type {
  border-right: 0;
}

.SpellsTabs > input:checked + label {
  background: linear-gradient(90deg, #743821, #8a5a24 52%, #23543a);
  color: #fff6d6;
  text-shadow: 1px 1px 0 #2b160f;
}

.SpellsTabs__panels {
  grid-column: 1 / -1;
}

.SpellsTabs__panel {
  display: none;
}

.SpellsTabs > input:first-child:checked ~ .SpellsTabs__panels > .SpellsTabs__panel:first-child,
.SpellsTabs > input:nth-child(3):checked ~ .SpellsTabs__panels > .SpellsTabs__panel:nth-child(2),
.SpellsTabs > input:nth-child(5):checked ~ .SpellsTabs__panels > .SpellsTabs__panel:nth-child(3) {
  display: block;
}

.SpellsTableWrap {
  width: 100%;
  overflow-x: auto;
}

.SpellsPage .dataTables_wrapper {
  color: #3a220f;
}

.SpellsPage .dataTables_length,
.SpellsPage .dataTables_filter,
.SpellsPage .dataTables_info {
  margin: 10px 0;
  color: #f2ddb0 !important;
  font-weight: 800;
}

.SpellsPage .dataTables_length label,
.SpellsPage .dataTables_filter label {
  color: #f7df9b !important;
  font-weight: 900;
}

.SpellsPage .dataTables_length select,
.SpellsPage .dataTables_filter input {
  min-height: 34px;
  margin: 0 6px;
  padding: 6px 9px;
  border: 1px solid rgba(83, 58, 34, 0.26);
  border-radius: 6px;
  color: #2d1b10;
  background: #fff5dc;
  outline: none;
}

.SpellsPage .dataTables_filter input:focus,
.SpellsPage .dataTables_length select:focus {
  border-color: #9a6427;
  box-shadow: 0 0 0 3px rgba(154, 100, 39, 0.14);
}

.SpellsPage .dataTables_wrapper .dataTables_paginate,
.SpellsPage .dataTables_paginate {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  float: none !important;
  margin: 12px 0 4px !important;
  padding: 0 !important;
  color: #f2ddb0 !important;
}

.SpellsPage .dataTables_wrapper .dataTables_paginate .paginate_button,
.SpellsPage .dataTables_wrapper .dataTables_paginate span.paginate_button,
.SpellsPage .dataTables_wrapper .dataTables_paginate a.paginate_button,
.SpellsPage .dataTables_paginate .paginate_button {
  display: inline-flex !important;
  min-width: 34px !important;
  min-height: 34px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 7px 12px !important;
  margin: 0 !important;
  border: 1px solid rgba(245, 196, 109, 0.55) !important;
  border-radius: 6px !important;
  color: #fff3c5 !important;
  background: linear-gradient(180deg, rgba(138, 74, 33, 0.96), rgba(98, 48, 22, 0.96)) !important;
  font-weight: 900 !important;
  font-size: 0.82rem !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 235, 170, 0.22), 0 4px 10px rgba(0, 0, 0, 0.18) !important;
  cursor: pointer !important;
}

.SpellsPage .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.SpellsPage .dataTables_paginate .paginate_button:hover {
  border-color: rgba(255, 231, 163, 0.85) !important;
  color: #fff8df !important;
  background: linear-gradient(180deg, #b8682f, #7c3a18) !important;
}

.SpellsPage .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.SpellsPage .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.SpellsPage .dataTables_paginate .paginate_button.current,
.SpellsPage .dataTables_paginate .paginate_button.current:hover {
  border-color: rgba(255, 244, 209, 0.95) !important;
  color: #2d1b10 !important;
  background: #fff5dc !important;
  box-shadow: 0 0 0 2px rgba(255, 231, 163, 0.28) !important;
}

.SpellsPage .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.SpellsPage .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.SpellsPage .dataTables_paginate .paginate_button.disabled,
.SpellsPage .dataTables_paginate .paginate_button.disabled:hover {
  cursor: default !important;
  border-color: rgba(245, 196, 109, 0.18) !important;
  color: rgba(245, 226, 185, 0.45) !important;
  background: rgba(0, 0, 0, 0.15) !important;
  box-shadow: none !important;
}

.SpellsTable {
  width: 100% !important;
  border-collapse: collapse;
  color: #3a220f;
  background: #f5e4b9;
}

.SpellsTable th,
.SpellsTable td {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(83, 58, 34, 0.14);
  text-align: left;
  vertical-align: middle;
}

.SpellsPage table.dataTable.SpellsTable thead > tr > th,
.SpellsPage .SpellsTable thead > tr > th,
.SpellsTable th {
  border-bottom: 1px solid rgba(255, 229, 132, 0.32) !important;
  background: linear-gradient(180deg, #8c5127, #6f3a1c) !important;
  color: #fff3c5 !important;
  font-size: 0.76rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 1px rgba(37, 15, 4, 0.72) !important;
}

.SpellsPage table.dataTable.SpellsTable tbody > tr > td,
.SpellsPage .SpellsTable tbody > tr > td,
.SpellsTable td {
  color: #3a220f !important;
  background: transparent;
}

.SpellsPage table.dataTable.SpellsTable thead > tr > th.sorting,
.SpellsPage table.dataTable.SpellsTable thead > tr > th.sorting_asc,
.SpellsPage table.dataTable.SpellsTable thead > tr > th.sorting_desc,
.SpellsTable th.sorting,
.SpellsTable th.sorting_asc,
.SpellsTable th.sorting_desc {
  color: #fff3c5 !important;
}

.SpellsPage table.dataTable.SpellsTable thead > tr > th.sorting::before,
.SpellsPage table.dataTable.SpellsTable thead > tr > th.sorting::after,
.SpellsPage table.dataTable.SpellsTable thead > tr > th.sorting_asc::before,
.SpellsPage table.dataTable.SpellsTable thead > tr > th.sorting_asc::after,
.SpellsPage table.dataTable.SpellsTable thead > tr > th.sorting_desc::before,
.SpellsPage table.dataTable.SpellsTable thead > tr > th.sorting_desc::after,
.SpellsTable th.sorting::before,
.SpellsTable th.sorting::after,
.SpellsTable th.sorting_asc::before,
.SpellsTable th.sorting_asc::after,
.SpellsTable th.sorting_desc::before,
.SpellsTable th.sorting_desc::after {
  color: rgba(255, 243, 197, 0.92) !important;
  opacity: 1 !important;
}

.SpellsTable tbody tr:nth-child(even) {
  background: rgba(255, 249, 232, 0.34);
}

.SpellsTable strong {
  color: #2f1b0c;
}

.SpellsTable code {
  display: inline-flex;
  max-width: 100%;
  padding: 4px 7px;
  border: 1px solid rgba(83, 58, 34, 0.16);
  border-radius: 6px;
  background: rgba(255, 249, 232, 0.70);
  color: #145247;
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  font-weight: 900;
  white-space: normal;
}

.SpellsTable__item {
  min-width: 74px;
}

.SpellsTable__item img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  vertical-align: middle;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.20));
}

.SpellsTable__item span {
  margin-right: 4px;
  color: #6f3a1c;
  font-size: 0.76rem;
  font-weight: 900;
}

.SpellsTable__vocations {
  color: #62421f;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.35;
}

.OnlinePage,
.OnlinePage * {
  box-sizing: border-box;
}

.OnlinePage {
  display: grid;
  gap: 14px;
  max-width: 980px;
  margin: 0 auto;
  color: #3a220f;
}

.OnlinePage__header {
  padding: 18px 20px;
  border: 1px solid rgba(200, 138, 54, 0.45);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(123, 54, 33, 0.92), rgba(15, 51, 37, 0.94)),
    radial-gradient(circle at 84% 18%, rgba(229, 160, 55, 0.22), transparent 34%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
}

.OnlinePage__header span {
  color: rgba(245, 226, 185, 0.82);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.OnlinePage__header h1 {
  margin: 4px 0 0;
  color: #fff6d6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.55rem;
  line-height: 1.15;
  text-shadow: 1px 1px 0 #2b160f;
}

.OnlinePage__top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.OnlinePage__card,
.OnlinePage__section {
  overflow: hidden;
  border: 1px solid rgba(83, 58, 34, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 249, 232, 0.72), rgba(255, 249, 232, 0.42)),
    #f4dfad;
  box-shadow: 0 10px 18px rgba(73, 39, 16, 0.1);
}

.OnlinePage__card h2,
.OnlinePage__section > h2 {
  margin: 0;
  padding: 10px 14px;
  color: #fff3c4;
  background: linear-gradient(90deg, #743821, #8a5a24 52%, #23543a);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.9rem;
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 #2b160f;
}

.OnlinePage__card > :not(h2),
.OnlinePage__section > :not(h2) {
  padding-left: 14px;
  padding-right: 14px;
}

.OnlinePage__card > :last-child,
.OnlinePage__section > :last-child {
  padding-bottom: 14px;
}

.OnlinePage__card > :first-child + *,
.OnlinePage__section > :first-child + * {
  padding-top: 12px;
}

.OnlinePage__message {
  margin: 0;
  padding: 12px 14px;
  color: #4a2812;
  line-height: 1.45;
  text-align: center;
}

.OnlinePage__info {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 12px 14px 14px;
}

.OnlinePage__info div {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 8px 12px;
  padding: 8px 10px;
  border: 1px solid rgba(83, 58, 34, 0.12);
  border-radius: 6px;
  background: rgba(255, 249, 232, 0.58);
}

.OnlinePage__info dt {
  margin: 0;
  color: #6f3a1c;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.OnlinePage__info dd {
  margin: 0;
  color: #3a220f;
  font-weight: 700;
  line-height: 1.35;
}

.OnlinePage__info dd small {
  display: block;
  margin-top: 2px;
  color: rgba(58, 34, 15, 0.72);
  font-size: 0.76rem;
  font-weight: 600;
}

.OnlineFragsList {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 12px 14px 14px;
  list-style: none;
}

.OnlineFragsList li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid rgba(83, 58, 34, 0.12);
  border-radius: 6px;
  background: rgba(255, 249, 232, 0.58);
  color: #3a220f;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.35;
}

.OnlineFragsList img {
  flex: 0 0 auto;
}

.OnlineVocationsGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 14px 14px;
}

.OnlineVocationCard {
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 12px 10px;
  border: 1px solid rgba(83, 58, 34, 0.14);
  border-radius: 8px;
  background: rgba(255, 249, 232, 0.72);
  text-align: center;
}

.OnlineVocationCard span {
  color: #6f3a1c;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.2;
}

.OnlineVocationCard strong {
  color: #3a220f;
  font-size: 1.15rem;
  line-height: 1;
}

.OnlinePlayersTableWrap {
  overflow-x: auto;
  padding: 0 14px 14px;
}

.OnlinePlayersTable {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  background: #f8e8bf;
}

.OnlinePlayersTable th,
.OnlinePlayersTable td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(83, 58, 34, 0.14);
  text-align: left;
  vertical-align: middle;
}

.OnlinePlayersTable th {
  color: #fff3c4;
  background: linear-gradient(90deg, #743821, #8a5a24 52%, #23543a);
  font-size: 0.76rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.OnlinePlayersTable tbody tr:nth-child(even) {
  background: rgba(255, 249, 232, 0.34);
}

.OnlinePlayerOutfit {
  position: relative;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border: 1px solid rgba(83, 58, 34, 0.18);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 220, 128, 0.30), transparent 58%),
    rgba(20, 70, 55, 0.20);
}

.OnlinePlayerOutfit img {
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 78px;
  max-width: none;
  height: auto;
  transform: translateX(-50%);
  image-rendering: pixelated;
  filter: drop-shadow(0 7px 6px rgba(0, 0, 0, 0.28));
}

.HousesPage,
.HouseView {
  max-width: 920px;
  margin: 0 auto;
  color: #3a220f;
}

.HousesPage,
.HousesPage * {
  box-sizing: border-box;
}

.HousesPage {
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.HousesPage__header {
  padding: 18px 20px;
  border: 1px solid rgba(200, 138, 54, 0.45);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(123, 54, 33, 0.92), rgba(15, 51, 37, 0.94)),
    radial-gradient(circle at 84% 18%, rgba(229, 160, 55, 0.22), transparent 34%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
}

.HousesPage__header span {
  color: rgba(245, 226, 185, 0.82);
  font-weight: 900;
  text-transform: uppercase;
}

.HousesPage__header h1 {
  margin: 4px 0 0;
  color: #fff6d6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: 0;
  text-shadow: 1px 1px 0 #2b160f;
}

.HousesIntro,
.HousesPanel,
.HousesSearch,
.HouseView {
  border: 1px solid rgba(83, 58, 34, 0.18);
  border-radius: 8px;
  background: rgba(255, 249, 232, 0.56);
  box-shadow: 0 10px 18px rgba(73, 39, 16, 0.12);
}

.HousesIntro {
  display: grid;
  gap: 8px;
  padding: 14px;
  line-height: 1.45;
}

.HousesIntro p {
  margin: 0;
}

.HousesPanel,
.HousesSearch {
  overflow: hidden;
}

.HousesPanel__header {
  padding: 12px 14px;
  background: linear-gradient(90deg, #71331f, #8a5a24 48%, #185044);
  color: #fff4cf;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 800;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.42);
}

.HousesList {
  display: grid;
  gap: 10px;
  padding: 12px;
  min-width: 0;
}

.HouseCard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(83, 58, 34, 0.16);
  border-radius: 8px;
  background: #f4dfad;
}

.HouseCard__body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.HouseCard__body strong {
  color: #3a220f;
  font-size: 0.96rem;
  overflow-wrap: anywhere;
}

.HouseCard__body span {
  color: #60411f;
  font-size: 0.82rem;
  line-height: 1.35;
}

.HouseCard__body a,
.HouseView__body a {
  color: #145247 !important;
  font-weight: 900;
  text-decoration: none !important;
}

.HouseCard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.HouseCard__meta span,
.HousesSearch legend {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid rgba(83, 58, 34, 0.16);
  border-radius: 999px;
  background: rgba(255, 249, 232, 0.58);
  color: #62421f;
  font-size: 0.76rem;
  font-weight: 900;
}

.HouseCard__button {
  display: inline-flex;
  min-height: 34px;
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid #1b0f09;
  outline: 1px solid rgba(214, 170, 82, 0.44);
  outline-offset: -4px;
  border-radius: 6px;
  background: #6f3a1c;
  color: #f7df9b !important;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 800;
  text-decoration: none !important;
  text-shadow: 0 2px 0 #160b05;
  box-sizing: border-box;
}

.HouseCard__button:hover {
  background: #925025;
  color: #fff1bd !important;
}

.HousesEmpty,
.HousesPage__errors {
  padding: 16px;
  color: #3a220f;
  font-weight: 900;
  text-align: center;
}

.HousesSearch__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
}

.HousesSearch fieldset {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(83, 58, 34, 0.16);
  border-radius: 8px;
  background: rgba(255, 249, 232, 0.42);
}

.HousesSearch legend {
  width: fit-content;
  margin: 0 0 2px;
  text-transform: uppercase;
}

.HousesSearch label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  min-width: 0;
  color: #3a220f;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.HousesSearch input[type="radio"] {
  flex: 0 0 auto;
  margin: 0;
  accent-color: #8a4a21;
}

.HousesSearch__actions {
  display: flex;
  justify-content: center;
  padding: 0 12px 14px;
}

.HouseView {
  display: grid;
  grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
  gap: 16px;
  padding: 14px;
}

.HouseView__media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  border: 1px solid rgba(83, 58, 34, 0.16);
  border-radius: 8px;
  background: rgba(255, 249, 232, 0.46);
}

.HouseView__media img {
  max-width: 100%;
  max-height: 240px;
  object-fit: contain;
}

.HouseView__body {
  display: grid;
  align-content: center;
  gap: 10px;
  line-height: 1.5;
}

.HouseView__body p {
  margin: 0;
}

.ForumPage,
.ForumPage * {
  box-sizing: border-box;
}

.ForumPage {
  display: grid;
  gap: 14px;
  max-width: 980px;
  margin: 0 auto;
  color: #3a220f;
}

.ForumPage__header {
  padding: 18px 20px;
  border: 1px solid rgba(200, 138, 54, 0.45);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(123, 54, 33, 0.92), rgba(15, 51, 37, 0.94)),
    radial-gradient(circle at 84% 18%, rgba(229, 160, 55, 0.22), transparent 34%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
}

.ForumPage__header--compact {
  padding: 16px 18px;
}

.ForumPage__header span {
  color: rgba(245, 226, 185, 0.82);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ForumPage__header h1 {
  margin: 4px 0 0;
  color: #fff6d6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.55rem;
  line-height: 1.15;
  text-shadow: 1px 1px 0 #2b160f;
}

.ForumPage__header p {
  margin: 8px 0 0;
  color: rgba(245, 226, 185, 0.88);
  line-height: 1.45;
}

.ForumBreadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 0.82rem;
}

.ForumBreadcrumb a {
  color: #6f3a1c !important;
  font-weight: 900;
  text-decoration: none !important;
}

.ForumBreadcrumb a:hover {
  color: #8a4a21 !important;
}

.ForumBreadcrumb strong {
  color: #3a220f;
  overflow-wrap: anywhere;
}

.ForumToolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.ForumToolbar--footer {
  justify-content: flex-start;
}

.ForumPagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.ForumPagination a,
.ForumPagination__current {
  display: inline-flex;
  min-width: 30px;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 1px solid rgba(182, 124, 54, 0.42);
  border-radius: 6px;
  font-weight: 900;
  text-decoration: none !important;
}

.ForumPagination a {
  color: #6f3a1c !important;
  background: rgba(255, 249, 232, 0.72);
}

.ForumPagination a:hover {
  background: rgba(255, 244, 209, 0.95);
}

.ForumPagination__current {
  color: #fff3c4;
  background: #6f3a1c;
  border-color: #4f2812;
}

.ForumBoardList,
.ForumThreadList,
.ForumPostList {
  display: grid;
  gap: 10px;
}

.ForumBoardCard,
.ForumThreadCard {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(83, 58, 34, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 249, 232, 0.72), rgba(255, 249, 232, 0.42)),
    #f4dfad;
  box-shadow: 0 10px 18px rgba(73, 39, 16, 0.1);
}

.ForumBoardCard {
  grid-template-columns: minmax(0, 1.4fr) auto auto;
  align-items: center;
}

.ForumThreadCard {
  grid-template-columns: minmax(0, 1.5fr) auto auto auto;
  align-items: center;
}

.ForumBoardCard__title,
.ForumThreadCard__title {
  color: #4a2812 !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: 900;
  text-decoration: none !important;
}

.ForumBoardCard__title:hover,
.ForumThreadCard__title:hover {
  color: #6f3a1c !important;
}

.ForumBoardCard__desc,
.ForumThreadCard__main p {
  margin: 4px 0 0;
  color: rgba(58, 34, 15, 0.78);
  font-size: 0.82rem;
  line-height: 1.4;
}

.ForumBoardCard__stats,
.ForumThreadCard__stats {
  display: grid;
  gap: 8px;
  min-width: 72px;
}

.ForumBoardCard__stats div,
.ForumThreadCard__stats div,
.ForumBoardCard__last,
.ForumThreadCard__last,
.ForumThreadCard__starter {
  display: grid;
  gap: 2px;
}

.ForumBoardCard__stats span,
.ForumThreadCard__stats span,
.ForumBoardCard__last > span,
.ForumThreadCard__last > span,
.ForumThreadCard__starter > span {
  color: rgba(58, 34, 15, 0.62);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ForumBoardCard__stats strong,
.ForumThreadCard__stats strong {
  color: #3a220f;
  font-size: 0.92rem;
}

.ForumBoardCard__last,
.ForumThreadCard__last,
.ForumThreadCard__starter {
  min-width: 130px;
  font-size: 0.78rem;
  line-height: 1.35;
}

.ForumBoardCard__last em,
.ForumThreadCard__last em {
  color: rgba(58, 34, 15, 0.55);
  font-style: normal;
}

.ForumBoardCard__admin {
  grid-column: 1 / -1;
}

.ForumThreadCard__mod {
  display: flex;
  gap: 6px;
  grid-column: 1 / -1;
}

.ForumEmpty {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 18px;
  border: 1px dashed rgba(182, 124, 54, 0.45);
  border-radius: 8px;
  background: rgba(255, 249, 232, 0.5);
}

.ForumEmpty strong {
  color: #4a2812;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
}

.ForumEmpty span {
  color: rgba(58, 34, 15, 0.78);
  line-height: 1.45;
}

.ForumPost {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(83, 58, 34, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 249, 232, 0.72), rgba(255, 249, 232, 0.42)),
    #f4dfad;
  box-shadow: 0 10px 18px rgba(73, 39, 16, 0.1);
}

.ForumPost__author {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 14px;
  border-right: 1px solid rgba(83, 58, 34, 0.14);
  background: rgba(255, 244, 209, 0.42);
}

.ForumPost__authorName {
  font-weight: 900;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.ForumPost__outfit {
  display: grid;
  place-items: center;
  min-height: 83px;
  overflow: hidden;
}

.ForumPost__outfit img {
  width: 74px;
  height: 74px;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.28));
}

.ForumPost__meta {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.74rem;
  line-height: 1.35;
}

.ForumPost__meta li {
  display: grid;
  gap: 1px;
}

.ForumPost__meta span {
  color: rgba(58, 34, 15, 0.58);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ForumPost__body {
  display: grid;
  grid-template-rows: 1fr auto;
  min-width: 0;
}

.ForumPost__content {
  padding: 14px 16px;
  color: #3a220f;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.ForumPost__content img {
  max-width: 100%;
  height: auto;
}

.ForumPost__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid rgba(83, 58, 34, 0.12);
  background: rgba(255, 244, 209, 0.38);
  font-size: 0.76rem;
}

.ForumPost__edited {
  color: rgba(58, 34, 15, 0.68);
}

.ForumPost__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.ForumIconBtn,
.ForumAdminBtn {
  display: inline-flex;
  min-width: 30px;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 1px solid rgba(182, 124, 54, 0.42);
  border-radius: 6px;
  color: #4a2812 !important;
  background: rgba(255, 249, 232, 0.86);
  font-weight: 900;
  text-decoration: none !important;
  cursor: pointer;
}

.ForumIconBtn:hover,
.ForumAdminBtn:hover {
  background: rgba(255, 244, 209, 0.98);
}

.ForumIconBtn--danger,
.ForumAdminBtn--danger {
  color: #fff4ea !important;
  background: #7a2d1f;
  border-color: #5d2218;
}

.ForumAdminActions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ForumAdminActions form {
  margin: 0;
}

.ForumRemoveForm {
  display: inline-flex;
  margin: 0;
}

.ForumForm,
.ForumPanel {
  overflow: hidden;
  border: 1px solid rgba(182, 124, 54, 0.5);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(8, 34, 26, 0.96), rgba(5, 22, 18, 0.96)),
    radial-gradient(circle at 86% 10%, rgba(229, 160, 55, 0.16), transparent 32%);
  box-shadow: inset 0 1px 0 rgba(255, 244, 198, 0.08), 0 12px 24px rgba(0, 0, 0, 0.22);
}

.ForumForm {
  display: grid;
  gap: 12px;
  padding: 16px;
  color: #e9d8b2;
}

.ForumForm__field {
  display: grid;
  gap: 6px;
}

.ForumForm__field span {
  color: #f5e2b9;
  font-weight: 900;
}

.ForumForm__field input[type="text"],
.ForumForm__field select,
.ForumForm__field textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid rgba(207, 158, 87, 0.55);
  border-radius: 6px;
  color: #fff9e8;
  background: rgba(0, 0, 0, 0.22);
}

.ForumForm__field textarea {
  min-height: 180px;
  resize: vertical;
}

.ForumForm__field small {
  color: rgba(245, 226, 185, 0.72);
  line-height: 1.4;
}

.ForumForm__options {
  display: grid;
  gap: 8px;
}

.ForumForm__options label {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.ForumForm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}

.ForumPanel > header {
  padding: 10px 14px;
  color: #fff3c4;
  background: linear-gradient(90deg, #743821, #8a5a24 52%, #23543a);
  border-bottom: 1px solid rgba(255, 220, 128, 0.22);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  text-transform: uppercase;
}

.ForumPreviewList {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.ForumPreviewItem {
  padding: 10px 12px;
  border: 1px solid rgba(245, 196, 109, 0.22);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.18);
  color: #e9d8b2;
  line-height: 1.45;
}

.ForumPreviewItem strong {
  display: block;
  margin-bottom: 4px;
  color: #fff3c4;
}

@media (max-width: 860px) {
  .ForumPage__header {
    padding: 14px 16px;
  }

  .ForumPage__header h1 {
    font-size: 1.35rem;
  }

  .ForumToolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .ForumToolbar .GuildButton {
    width: 100%;
    text-align: center;
  }

  .ForumPagination {
    justify-content: center;
  }

  .ForumBoardCard,
  .ForumThreadCard {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
    align-items: stretch;
  }

  .ForumBoardCard__stats,
  .ForumThreadCard__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    min-width: 0;
  }

  .ForumBoardCard__stats div,
  .ForumThreadCard__stats div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid rgba(83, 58, 34, 0.14);
    border-radius: 6px;
    background: rgba(255, 249, 232, 0.58);
  }

  .ForumBoardCard__stats div span,
  .ForumThreadCard__stats div span {
    margin: 0;
    white-space: nowrap;
  }

  .ForumBoardCard__stats div span::after,
  .ForumThreadCard__stats div span::after {
    content: ":";
    margin-left: 1px;
  }

  .ForumBoardCard__last,
  .ForumThreadCard__last,
  .ForumThreadCard__starter {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid rgba(83, 58, 34, 0.14);
    border-radius: 6px;
    background: rgba(255, 249, 232, 0.58);
    line-height: 1.4;
  }

  .ForumBoardCard__last > span,
  .ForumThreadCard__last > span,
  .ForumThreadCard__starter > span {
    display: inline;
    margin-right: 4px;
  }

  .ForumBoardCard__last > span::after,
  .ForumThreadCard__last > span::after,
  .ForumThreadCard__starter > span::after {
    content: ":";
  }

  .ForumBoardCard__last time,
  .ForumThreadCard__last time {
    display: inline;
    font-weight: 700;
  }

  .ForumBoardCard__last time::after,
  .ForumThreadCard__last time::after {
    content: " · ";
    font-weight: 400;
    color: rgba(58, 34, 15, 0.45);
  }

  .ForumBoardCard__last > div,
  .ForumThreadCard__last > div,
  .ForumThreadCard__starter > div {
    display: inline;
  }

  .ForumBoardCard__last em,
  .ForumThreadCard__last em {
    display: inline;
  }

  .ForumBoardCard__admin {
    padding-top: 8px;
    border-top: 1px solid rgba(83, 58, 34, 0.12);
  }

  .ForumAdminActions {
    justify-content: flex-start;
  }

  .ForumPost {
    grid-template-columns: 1fr;
  }

  .ForumPost__author {
    border-right: 0;
    border-bottom: 1px solid rgba(83, 58, 34, 0.14);
  }

  .OnlinePage__header {
    padding: 14px 16px;
  }

  .OnlinePage__header h1 {
    font-size: 1.35rem;
  }

  .OnlinePage__top {
    grid-template-columns: 1fr;
  }

  .OnlinePage__info div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .OnlineVocationsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .OnlinePlayersTableWrap {
    overflow: visible;
  }

  .OnlinePlayersTable {
    min-width: 0;
  }

  .OnlinePlayersTable thead {
    display: none;
  }

  .OnlinePlayersTable tbody {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .OnlinePlayersTable tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 6px 10px;
    padding: 10px 12px;
    border: 1px solid rgba(83, 58, 34, 0.16);
    border-radius: 8px;
    background: rgba(255, 249, 232, 0.72);
  }

  .OnlinePlayersTable tbody tr:nth-child(even) {
    background: rgba(255, 249, 232, 0.72);
  }

  .OnlinePlayersTable tbody td {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 8px;
    width: auto !important;
    padding: 2px 0 !important;
    border-bottom: 0;
  }

  .OnlinePlayersTable tbody td::before {
    content: attr(data-label);
    color: #6f3a1c;
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
  }

  .OnlinePlayersTable__outfit {
    flex: 0 0 46px;
    display: block;
  }

  .OnlinePlayersTable__outfit::before {
    display: none;
  }

  .OnlinePlayersTable__name {
    flex: 1 1 calc(100% - 56px);
    display: flex;
    align-items: center;
    min-height: 46px;
    font-weight: 900;
    line-height: 1.2;
  }

  .OnlinePlayersTable__name::before {
    display: none;
  }

  .OnlinePlayersTable tbody td[data-label="Resets"],
  .OnlinePlayersTable tbody td[data-label="Level"],
  .OnlinePlayersTable tbody td[data-label="Vocation"],
  .OnlinePlayersTable tbody td[data-label="#"] {
    flex: 1 1 100%;
  }

  .OnlinePlayersTable tbody tr:not(:has(.OnlinePlayersTable__outfit)) .OnlinePlayersTable__name {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 8px;
    min-height: 0;
  }

  .OnlinePlayersTable tbody tr:not(:has(.OnlinePlayersTable__outfit)) .OnlinePlayersTable__name::before {
    display: block;
  }
}

.GuildsPage {
  display: grid;
  gap: 14px;
  max-width: 900px;
  margin: 0 auto;
  color: #3a220f;
}

.GuildsPage__header {
  padding: 18px 20px;
  border: 1px solid rgba(200, 138, 54, 0.45);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(123, 54, 33, 0.92), rgba(15, 51, 37, 0.94)),
    radial-gradient(circle at 84% 18%, rgba(229, 160, 55, 0.22), transparent 34%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
}

.GuildsPage__header span {
  color: rgba(245, 226, 185, 0.82);
  font-weight: 900;
  text-transform: uppercase;
}

.GuildsPage__header h1 {
  margin: 4px 0 0;
  color: #fff6d6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  text-shadow: 1px 1px 0 #2b160f;
}

.GuildsList {
  display: grid;
  gap: 12px;
}

.GuildCard,
.GuildsEmpty,
.GuildsCTA,
.GuildsTools {
  border: 1px solid rgba(83, 58, 34, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 249, 232, 0.62), rgba(255, 249, 232, 0.34)),
    #f4dfad;
  box-shadow: 0 10px 18px rgba(73, 39, 16, 0.12);
}

.GuildCard {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-width: 0;
  padding: 12px;
}

.GuildCard__logo {
  display: flex;
  width: 70px;
  height: 70px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(83, 58, 34, 0.18);
  border-radius: 8px;
  background: rgba(255, 249, 232, 0.54);
}

.GuildCard__logo img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.GuildCard__body {
  min-width: 0;
}

.GuildCard__body h3 {
  margin: 0 0 5px;
  color: #3a220f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.08rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.GuildCard__body p {
  margin: 0;
  color: #60411f;
  font-size: 0.88rem;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.GuildCard__admin {
  display: inline-flex;
  margin-top: 7px;
  color: #9c1d16 !important;
  font-size: 0.76rem;
  font-weight: 900;
  text-decoration: none !important;
}

.GuildCard__action {
  margin: 0;
  min-width: 0;
}

.GuildButton {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  cursor: pointer;
  border: 1px solid #1b0f09;
  outline: 1px solid rgba(214, 170, 82, 0.44);
  outline-offset: -4px;
  border-radius: 6px;
  background: #6f3a1c;
  color: #ffe7a3 !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none !important;
  text-shadow: 0 1px 0 #2b160f;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
}

.GuildButton:hover {
  background: #925025;
  color: #fff9e8 !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.28);
}

.Content a.GuildButton,
.Content a.GuildButton:hover {
  text-decoration: none !important;
}

.Content a.GuildButton {
  color: #ffe7a3 !important;
}

.Content a.GuildButton:hover {
  color: #fff9e8 !important;
}

.GuildButton--secondary {
  background: rgba(12, 47, 38, 0.88);
  color: #fff1bd !important;
  text-decoration: none !important;
}

.GuildButton--secondary:hover {
  background: rgba(18, 64, 52, 0.96);
  color: #fff9e8 !important;
}

.GuildsEmpty {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 18px;
  text-align: center;
}

.GuildsEmpty strong,
.GuildsCTA strong {
  color: #3a220f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
}

.GuildsEmpty span,
.GuildsCTA span,
.GuildsTools span {
  color: #60411f;
  font-size: 0.86rem;
}

.GuildsCTA {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding: 14px;
}

.GuildsCTA > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.GuildsCTA form {
  margin: 0;
}

.GuildsTools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  padding: 12px;
}

.GuildsTools a {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 6px 9px;
  border: 1px solid rgba(83, 58, 34, 0.18);
  border-radius: 999px;
  background: rgba(255, 249, 232, 0.56);
  color: #145247 !important;
  font-size: 0.78rem;
  font-weight: 900;
  text-decoration: none !important;
}

.GuildsTools a:hover {
  color: #8a3f17 !important;
}

.GuildViewPage,
.GuildViewPage * {
  box-sizing: border-box;
}

.GuildViewPage {
  display: grid;
  gap: 14px;
  max-width: 900px;
  margin: 0 auto;
  color: #3a220f;
}

.GuildViewHero,
.GuildViewPanel,
.GuildViewActions {
  border: 1px solid rgba(83, 58, 34, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 249, 232, 0.66), rgba(255, 249, 232, 0.38)),
    #f4dfad;
  box-shadow: 0 10px 18px rgba(73, 39, 16, 0.12);
}

.GuildViewHero {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  background:
    linear-gradient(135deg, rgba(123, 54, 33, 0.92), rgba(15, 51, 37, 0.94)),
    radial-gradient(circle at 84% 18%, rgba(229, 160, 55, 0.22), transparent 34%);
}

.GuildViewHero__logo {
  display: flex;
  width: 76px;
  height: 76px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 220, 128, 0.28);
  border-radius: 8px;
  background: rgba(8, 24, 20, 0.34);
}

.GuildViewHero__logo img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.GuildViewHero__body {
  min-width: 0;
}

.GuildViewHero__body span {
  color: rgba(245, 226, 185, 0.82);
  font-weight: 900;
  text-transform: uppercase;
}

.GuildViewHero__body h1 {
  margin: 4px 0;
  color: #fff6d6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.75rem;
  line-height: 1.08;
  overflow-wrap: anywhere;
  text-shadow: 1px 1px 0 #2b160f;
}

.GuildViewHero__body p {
  margin: 0;
  color: rgba(245, 226, 185, 0.86);
}

.GuildViewHero__body a,
.GuildViewInfo a,
.GuildViewTable a,
.GuildViewInvites a {
  color: #145247 !important;
  font-weight: 900;
  text-decoration: none !important;
}

.GuildViewHero__body a {
  color: #fff3c4 !important;
}

.GuildViewHero > .GuildButton {
  min-height: 38px;
  padding: 10px 14px;
  border-color: rgba(255, 231, 163, 0.48);
  color: #fff8df !important;
  background: linear-gradient(180deg, #b85a28, #7a3d1d 56%, #542812);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 198, 0.22),
    0 8px 16px rgba(0, 0, 0, 0.28);
}

.GuildViewHero > .GuildButton:hover {
  color: #fffce9 !important;
  background: linear-gradient(180deg, #d07034, #925025 56%, #643418);
}

.GuildViewPanel {
  overflow: hidden;
}

.GuildViewPanel > header {
  padding: 10px 14px;
  color: #fff3c4;
  background: linear-gradient(90deg, #743821, #8a5a24 52%, #23543a);
  border-bottom: 1px solid rgba(255, 220, 128, 0.22);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 #2b160f;
}

.GuildViewInfo {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.GuildViewDescription {
  padding: 10px;
  border: 1px solid rgba(83, 58, 34, 0.16);
  border-radius: 6px;
  background: rgba(255, 248, 225, 0.56);
  color: #4c3218;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.GuildViewMeta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.GuildViewMeta > div {
  padding: 9px 10px;
  border: 1px solid rgba(83, 58, 34, 0.16);
  border-radius: 6px;
  background: rgba(255, 248, 225, 0.56);
}

.GuildViewMeta span {
  display: block;
  color: #6b4b24;
  font-size: 0.70rem;
  font-weight: 900;
  text-transform: uppercase;
}

.GuildViewMeta strong {
  color: #37200d;
}

.GuildViewTableWrap {
  overflow-x: auto;
}

.GuildViewTable {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  background: #f8e8bf;
}

.GuildViewTable th,
.GuildViewTable td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(83, 58, 34, 0.14);
  text-align: left;
  vertical-align: middle;
}

.GuildViewTable th {
  color: #fff3c4;
  background: linear-gradient(90deg, #743821, #23543a);
  font-size: 0.76rem;
  text-transform: uppercase;
  white-space: nowrap;
}

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

.GuildViewMember__outfit {
  position: relative;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border: 1px solid rgba(83, 58, 34, 0.18);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 220, 128, 0.30), transparent 58%),
    rgba(20, 70, 55, 0.20);
  box-shadow: inset 0 1px 0 rgba(255, 249, 232, 0.32);
}

.GuildViewMember__outfit img {
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 78px;
  max-width: none;
  height: auto;
  transform: translateX(-50%);
  image-rendering: pixelated;
  filter: drop-shadow(0 7px 6px rgba(0, 0, 0, 0.28));
}

.GuildViewMember__body {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
  min-width: 0;
}

.GuildViewMember small {
  color: #6b4b24;
  font-weight: 800;
}

.GuildViewNickForm {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  margin: 0;
}

.GuildViewNickForm input {
  width: 104px;
  min-height: 28px;
  padding: 5px 7px;
  border: 1px solid rgba(83, 58, 34, 0.26);
  border-radius: 5px;
  background: #fff5dc;
  color: #2d1b10;
}

.GuildViewNickForm button {
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid #1b0f09;
  border-radius: 5px;
  color: #ffe7a3;
  background: #8a4a21;
  font-weight: 900;
  cursor: pointer;
}

.GuildViewDanger {
  color: #9b321f !important;
}

.GuildViewBadge {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  border-radius: 999px;
  color: #fff5d7;
  font-size: 0.75rem;
  font-weight: 900;
}

.GuildViewBadge.is-online {
  background: linear-gradient(180deg, #3c9a4b, #1d6b34);
}

.GuildViewBadge.is-offline {
  background: linear-gradient(180deg, #a84c2f, #7a2d1f);
}

.GuildViewLevel--short {
  display: none;
}

.GuildViewInvites {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.GuildViewInvites > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 9px 10px;
  border: 1px solid rgba(83, 58, 34, 0.16);
  border-radius: 6px;
  background: rgba(255, 248, 225, 0.56);
}

.GuildViewActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  padding: 12px;
}

.GuildViewActions form {
  margin: 0;
}

.GuildButton--danger {
  background: #7a2d1f !important;
}

.GuildCreatePage {
  display: grid;
  gap: 14px;
  max-width: 760px;
  min-height: 0;
  margin: 0 auto;
  color: #e9d8b2;
}

.Content .BoxContent:has(.GuildCreatePage) {
  min-height: 0 !important;
  height: auto !important;
  padding: 18px;
  overflow: visible;
}

.Content .BoxContent:has(.GuildCreatePage) > br {
  display: none;
}

.GuildCreateForm {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 16px;
  border: 1px solid rgba(182, 124, 54, 0.5);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(8, 34, 26, 0.96), rgba(5, 22, 18, 0.96)),
    radial-gradient(circle at 86% 10%, rgba(229, 160, 55, 0.16), transparent 32%);
  box-shadow: inset 0 1px 0 rgba(255, 244, 198, 0.08), 0 12px 24px rgba(0, 0, 0, 0.22);
}

.GuildCreateForm--empty {
  align-content: start;
}

.GuildCreateForm__intro {
  display: grid;
  gap: 4px;
  padding-bottom: 4px;
}

.GuildCreateForm__intro strong {
  color: #fff6d6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.12rem;
  text-shadow: 1px 1px 0 #2b160f;
}

.GuildCreateForm__intro span,
.GuildCreateField small {
  color: rgba(245, 226, 185, 0.82);
}

.GuildCreateField {
  display: grid;
  gap: 6px;
}

.GuildCreateField span {
  color: #f4cf82;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.GuildCreateField input,
.GuildCreateField select,
.GuildCreateField textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid rgba(207, 158, 87, 0.55);
  border-radius: 6px;
  color: #2d1b10;
  background: #fff5dc;
  outline: none;
}

.GuildCreateField textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.45;
  font-family: inherit;
}

.GuildCreateField input:focus,
.GuildCreateField select:focus,
.GuildCreateField textarea:focus {
  border-color: #f5c46d;
  box-shadow: 0 0 0 3px rgba(245, 196, 109, 0.18);
}

.GuildCreateForm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.GuildCreateSuccess {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 16px;
  border: 1px solid rgba(182, 124, 54, 0.5);
  border-radius: 8px;
  color: #e9d8b2;
  background:
    linear-gradient(180deg, rgba(8, 34, 26, 0.96), rgba(5, 22, 18, 0.96)),
    radial-gradient(circle at 86% 10%, rgba(229, 160, 55, 0.16), transparent 32%);
  box-shadow: inset 0 1px 0 rgba(255, 244, 198, 0.08), 0 12px 24px rgba(0, 0, 0, 0.22);
}

.GuildCreateSuccess p {
  margin: 0;
  color: rgba(245, 226, 185, 0.92);
  line-height: 1.5;
}

.GuildCreateSuccess strong {
  color: #fff6d6;
}

.GuildCreateSuccess .GuildCreateForm__actions form {
  margin: 0;
}

.GuildManageBack {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.GuildInviteLayout {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.85fr);
  align-items: start;
}

.GuildInviteHero {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(245, 196, 109, 0.35);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(229, 160, 55, 0.18), rgba(8, 34, 26, 0.2)),
    radial-gradient(circle at 12% 18%, rgba(255, 244, 198, 0.12), transparent 42%);
}

.GuildInviteHero__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #fff6d6;
  font-size: 1.5rem;
  background: linear-gradient(180deg, #d8892d, #8f4d16);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 244, 198, 0.35);
}

.GuildInviteHero__copy {
  display: grid;
  gap: 4px;
}

.GuildInviteHero__copy strong {
  color: #fff6d6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
}

.GuildInviteHero__copy span {
  color: rgba(245, 226, 185, 0.88);
  line-height: 1.45;
}

.GuildInviteField {
  position: relative;
}

.CharacterAutocomplete,
.GuildInviteAutocomplete {
  position: relative;
}

.CharacterAutocomplete__input,
.GuildInviteAutocomplete__input {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid rgba(245, 196, 109, 0.65);
  border-radius: 8px;
  color: #2d1b10;
  font-size: 1rem;
  background: #fff5dc;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 0 rgba(245, 196, 109, 0);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.CharacterAutocomplete__input:focus,
.GuildInviteAutocomplete__input:focus {
  border-color: #f5c46d;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 4px rgba(245, 196, 109, 0.22);
  outline: none;
}

.CharacterAutocomplete__hint,
.GuildInviteAutocomplete__hint {
  margin: 6px 0 0;
  color: rgba(245, 226, 185, 0.72);
  font-size: 0.78rem;
}

.CharacterSearch .CharacterAutocomplete__hint {
  margin: 8px 0 0;
}

.CharacterSearch__control .CharacterAutocomplete {
  flex: 1 1 auto;
  min-width: 0;
  z-index: 5;
}

.CharacterSearchPanel .CharacterAutocomplete__dropdown {
  z-index: 120;
}

.CharacterSearch .CharacterAutocomplete.is-open .CharacterAutocomplete__dropdown {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  margin-top: 8px;
  max-height: none;
  overflow: visible;
}

.CharacterSearch .CharacterAutocomplete.is-open.CharacterAutocomplete--scrollable .CharacterAutocomplete__dropdown {
  max-height: min(280px, 52vh);
  overflow: auto;
}

.CharacterAutocomplete__dropdown,
.GuildInviteAutocomplete__dropdown {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow: auto;
  border: 1px solid rgba(245, 196, 109, 0.55);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(12, 42, 34, 0.98), rgba(7, 24, 20, 0.98));
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35);
}

.CharacterAutocomplete--sidebar .CharacterAutocomplete__dropdown {
  left: -10px;
  right: -10px;
  z-index: 120;
}

.CharacterAutocomplete__option,
.GuildInviteAutocomplete__option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid rgba(245, 196, 109, 0.12);
  color: #f5e6c0;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.CharacterAutocomplete__option:last-child,
.GuildInviteAutocomplete__option:last-child {
  border-bottom: 0;
}

.CharacterAutocomplete__option:hover,
.CharacterAutocomplete__option.is-active,
.GuildInviteAutocomplete__option:hover,
.GuildInviteAutocomplete__option.is-active {
  background: rgba(229, 160, 55, 0.16);
}

.CharacterAutocomplete__option-name,
.GuildInviteAutocomplete__option-name {
  color: #fff6d6;
  font-weight: 700;
}

.CharacterAutocomplete__option-meta,
.GuildInviteAutocomplete__option-meta {
  grid-column: 1;
  color: rgba(245, 226, 185, 0.78);
  font-size: 0.82rem;
}

.CharacterAutocomplete__option-status,
.GuildInviteAutocomplete__option-status {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.CharacterAutocomplete__option-status.is-online,
.GuildInviteAutocomplete__option-status.is-online {
  color: #d8ffd8;
  background: rgba(56, 142, 72, 0.35);
}

.CharacterAutocomplete__option-status.is-offline,
.GuildInviteAutocomplete__option-status.is-offline {
  color: rgba(245, 226, 185, 0.75);
  background: rgba(255, 255, 255, 0.08);
}

.CharacterAutocomplete__empty,
.CharacterAutocomplete__loading,
.GuildInviteAutocomplete__empty,
.GuildInviteAutocomplete__loading {
  padding: 12px;
  color: rgba(245, 226, 185, 0.82);
  font-size: 0.88rem;
}

.CharacterSuggestionsPage {
  display: grid;
  gap: 14px;
  max-width: 720px;
  margin: 0 auto;
}

.CharacterSuggestions {
  overflow: hidden;
  border: 1px solid rgba(83, 58, 34, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 249, 232, 0.72), rgba(255, 249, 232, 0.42)),
    #f4dfad;
  box-shadow: 0 10px 18px rgba(73, 39, 16, 0.1);
}

.CharacterSuggestions__header {
  padding: 10px 14px;
  color: #fff3c4;
  background: linear-gradient(90deg, #743821, #8a5a24 52%, #23543a);
}

.CharacterSuggestions__header span {
  display: block;
  color: rgba(245, 226, 185, 0.82);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.CharacterSuggestions__header h2 {
  margin: 2px 0 0;
  color: #fff6d6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  line-height: 1.15;
}

.CharacterSuggestions__list {
  display: grid;
  gap: 8px;
  padding: 12px 14px 14px;
}

.CharacterSuggestions__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(83, 58, 34, 0.14);
  border-radius: 8px;
  background: rgba(255, 249, 232, 0.72);
  color: #3a220f !important;
  text-decoration: none !important;
  transition: border-color 160ms ease, background 160ms ease;
}

.CharacterSuggestions__item:hover {
  border-color: rgba(111, 58, 28, 0.34);
  background: rgba(255, 244, 209, 0.95);
}

.CharacterSuggestions__name {
  grid-column: 1;
  font-weight: 900;
  line-height: 1.2;
}

.CharacterSuggestions__meta {
  grid-column: 1;
  color: rgba(58, 34, 15, 0.72);
  font-size: 0.78rem;
  font-weight: 700;
}

.CharacterSuggestions__item .CharacterAutocomplete__option-status {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.GuildInvitePreview {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(56, 142, 72, 0.45);
  border-radius: 8px;
  background: rgba(18, 58, 42, 0.55);
}

.GuildInvitePreview__label {
  color: #9fd9a8;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.GuildInvitePreview strong {
  color: #fff6d6;
  font-size: 1.05rem;
}

.GuildInvitePreview span:last-child {
  color: rgba(245, 226, 185, 0.82);
  font-size: 0.86rem;
}

.GuildInvitePending {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(182, 124, 54, 0.5);
  border-radius: 8px;
  color: #e9d8b2;
  background:
    linear-gradient(180deg, rgba(8, 34, 26, 0.96), rgba(5, 22, 18, 0.96)),
    radial-gradient(circle at 86% 10%, rgba(229, 160, 55, 0.16), transparent 32%);
  box-shadow: inset 0 1px 0 rgba(255, 244, 198, 0.08), 0 12px 24px rgba(0, 0, 0, 0.22);
}

.GuildInvitePending header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(245, 196, 109, 0.2);
}

.GuildInvitePending header span {
  color: #fff6d6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
}

.GuildInvitePending header small {
  color: #f4cf82;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.GuildInvitePending__list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.GuildInvitePending__list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(245, 196, 109, 0.18);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.18);
}

.GuildInvitePending__player {
  display: grid;
  gap: 2px;
}

.GuildInvitePending__player strong {
  color: #fff6d6;
}

.GuildInvitePending__player span {
  color: rgba(245, 226, 185, 0.72);
  font-size: 0.78rem;
}

.GuildInvitePending__cancel {
  color: #ffb4a8 !important;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.GuildInvitePending__cancel:hover {
  color: #ffd5cc !important;
}

.GuildInvitePending__empty {
  margin: 0;
  color: rgba(245, 226, 185, 0.78);
  line-height: 1.5;
  font-size: 0.9rem;
}

.GuildLeaveHero {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(245, 196, 109, 0.35);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(229, 160, 55, 0.14), rgba(8, 34, 26, 0.2)),
    radial-gradient(circle at 12% 18%, rgba(255, 244, 198, 0.1), transparent 42%);
}

.GuildLeaveHero__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #fff6d6;
  font-size: 1.45rem;
  font-weight: 700;
  background: linear-gradient(180deg, #b85f2d, #7a3316);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 244, 198, 0.35);
}

.GuildLeaveHero__icon--muted {
  background: linear-gradient(180deg, #6d5a44, #3f3024);
}

.GuildLeaveHero__copy {
  display: grid;
  gap: 4px;
}

.GuildLeaveHero__copy strong {
  color: #fff6d6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
}

.GuildLeaveHero__copy span {
  color: rgba(245, 226, 185, 0.88);
  line-height: 1.45;
}

.GuildLeaveChoices {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.GuildLeaveChoices__label {
  color: #f4cf82;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.GuildLeaveChoice {
  display: block;
  cursor: pointer;
}

.GuildLeaveChoice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.GuildLeaveChoice__card {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid rgba(245, 196, 109, 0.28);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.GuildLeaveChoice__card strong {
  color: #fff6d6;
  font-size: 1rem;
}

.GuildLeaveChoice__card small {
  color: rgba(245, 226, 185, 0.72);
  font-size: 0.8rem;
}

.GuildLeaveChoice input:checked + .GuildLeaveChoice__card {
  border-color: rgba(245, 196, 109, 0.75);
  background: rgba(229, 160, 55, 0.14);
  box-shadow: inset 0 0 0 1px rgba(245, 196, 109, 0.25);
}

.GuildLeaveChoice:hover .GuildLeaveChoice__card {
  border-color: rgba(245, 196, 109, 0.5);
}

.GuildLeaveEmpty__message {
  margin: 0;
  color: rgba(245, 226, 185, 0.86);
  line-height: 1.55;
}

.GuildPassLeadershipPage .GuildPassLeadershipHero .GuildLeaveHero__icon {
  background: linear-gradient(180deg, #d4a03a, #8a5a18);
}

.GuildPassLeadershipPage .GuildCreateForm__actions .GuildButton[type="submit"] {
  min-width: 180px;
}

.GuildDeleteGuildPage .GuildDeleteGuildHero__icon {
  background: linear-gradient(180deg, #a83a2a, #5c1a12);
}

.GuildDeleteGuild__warning {
  margin: 0;
  padding: 0 4px;
  color: rgba(245, 226, 185, 0.9);
  line-height: 1.55;
}

.GuildDeleteGuild__warning strong {
  color: #ffd4c8;
}

.GuildChangeDescriptionPage .GuildChangeDescriptionHero__icon {
  background: linear-gradient(180deg, #3f8f68, #1f4a35);
}

.GuildFormNotice {
  margin: 0;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
}

.GuildFormNotice--success {
  color: #d8f5e0;
  border: 1px solid rgba(88, 196, 128, 0.45);
  background: rgba(36, 92, 58, 0.35);
}

.GuildChangeMotdPage .GuildChangeMotdHero__icon {
  background: linear-gradient(180deg, #4a7fb8, #254a72);
  font-size: 1.2rem;
}

.GuildChangeMotdPage .GuildCreateField--textarea textarea {
  min-height: 96px;
}

.GuildChangeLogoPage .GuildChangeLogoHero__icon {
  background: linear-gradient(180deg, #8a6a3a, #4a3218);
  font-size: 1.2rem;
}

.GuildChangeLogoPreview {
  display: grid;
  gap: 8px;
}

.GuildChangeLogoPreview > span {
  color: #f4cf82;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.GuildChangeLogoPreview__frame {
  display: inline-flex;
  width: 88px;
  height: 88px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 220, 128, 0.28);
  border-radius: 8px;
  background: rgba(8, 24, 20, 0.34);
}

.GuildChangeLogoPreview__frame img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.GuildCreateField--file input[type="file"] {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid rgba(207, 158, 87, 0.55);
  border-radius: 6px;
  color: #e9d8b2;
  background: rgba(0, 0, 0, 0.22);
}

.GuildCreateField--file input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 6px 12px;
  border: 1px solid rgba(207, 158, 87, 0.55);
  border-radius: 4px;
  color: #2d1b10;
  background: #f5c46d;
  cursor: pointer;
}

.GuildFormNotice--error {
  color: #ffd4c8;
  border: 1px solid rgba(196, 88, 88, 0.45);
  background: rgba(92, 36, 36, 0.35);
}

.GuildFormNotice--error div + div {
  margin-top: 6px;
}

.GuildManagerPage {
  display: grid;
  gap: 14px;
  max-width: 900px;
  margin: 0 auto;
}

.GuildManagerHero {
  margin: 0;
  border-color: rgba(182, 124, 54, 0.5);
  background:
    linear-gradient(135deg, rgba(123, 54, 33, 0.94), rgba(15, 51, 37, 0.96)),
    radial-gradient(circle at 84% 18%, rgba(229, 160, 55, 0.24), transparent 36%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 244, 198, 0.1);
}

.GuildManagerHero .GuildInviteHero__copy strong {
  color: #fff6d6;
  text-shadow: 1px 1px 0 #2b160f;
}

.GuildManagerHero .GuildInviteHero__copy span {
  color: rgba(245, 226, 185, 0.95);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.GuildManagerPanel {
  overflow: hidden;
  border: 1px solid rgba(182, 124, 54, 0.5);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(8, 34, 26, 0.96), rgba(5, 22, 18, 0.96)),
    radial-gradient(circle at 86% 10%, rgba(229, 160, 55, 0.16), transparent 32%);
  box-shadow: inset 0 1px 0 rgba(255, 244, 198, 0.08), 0 12px 24px rgba(0, 0, 0, 0.22);
}

.GuildManagerPanel > header {
  padding: 10px 14px;
  color: #fff3c4;
  background: linear-gradient(90deg, #743821, #8a5a24 52%, #23543a);
  border-bottom: 1px solid rgba(255, 220, 128, 0.22);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 #2b160f;
}

.GuildManagerOptions {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.GuildManagerOption {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(245, 196, 109, 0.28);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  color: inherit;
  text-decoration: none !important;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.GuildManagerOption:hover {
  border-color: rgba(245, 196, 109, 0.55);
  background: rgba(229, 160, 55, 0.1);
  transform: translateY(-1px);
}

.GuildManagerOption--danger:hover {
  border-color: rgba(255, 140, 120, 0.55);
  background: rgba(122, 45, 31, 0.22);
}

.GuildManagerOption__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff6d6;
  font-size: 1.15rem;
  background: linear-gradient(180deg, #d8892d, #8f4d16);
  box-shadow: inset 0 1px 0 rgba(255, 244, 198, 0.28);
}

.GuildManagerOption--danger .GuildManagerOption__icon {
  background: linear-gradient(180deg, #c24a38, #7a2d1f);
}

.GuildManagerOption__body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.GuildManagerOption__body strong {
  color: #fff6d6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
}

.GuildManagerOption__body small {
  color: rgba(245, 226, 185, 0.72);
  font-size: 0.8rem;
  line-height: 1.4;
}

.GuildManagerOption__arrow {
  color: rgba(245, 226, 185, 0.55);
  font-size: 1.1rem;
}

.GuildManagerAddRank,
.GuildManagerRanksForm {
  margin: 12px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.GuildManagerRanks {
  display: grid;
  gap: 12px;
}

.GuildManagerRank {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(245, 196, 109, 0.22);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.16);
}

.GuildManagerRank__head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.GuildManagerRank__id {
  color: #f4cf82;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.GuildManagerRank__delete {
  min-height: 32px !important;
  padding: 6px 12px !important;
  font-size: 0.78rem !important;
}

.GuildManagerLevelField {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.GuildManagerLevelField__label {
  color: #f4cf82;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

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

.GuildManagerLevelChoice {
  position: relative;
  display: block;
  cursor: pointer;
}

.GuildManagerLevelChoice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.GuildManagerLevelChoice span {
  display: block;
  padding: 10px 8px;
  border: 1px solid rgba(245, 196, 109, 0.28);
  border-radius: 8px;
  color: rgba(245, 226, 185, 0.88);
  background: rgba(0, 0, 0, 0.18);
  font-size: 0.78rem;
  font-weight: 900;
  text-align: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.GuildManagerLevelChoice--leader input:checked + span {
  border-color: rgba(255, 120, 100, 0.75);
  background: rgba(180, 40, 30, 0.28);
  color: #ffe2dc;
  box-shadow: inset 0 0 0 1px rgba(255, 120, 100, 0.25);
}

.GuildManagerLevelChoice--vice input:checked + span {
  border-color: rgba(245, 210, 80, 0.75);
  background: rgba(180, 140, 20, 0.22);
  color: #fff4c8;
  box-shadow: inset 0 0 0 1px rgba(245, 210, 80, 0.25);
}

.GuildManagerLevelChoice--member input:checked + span {
  border-color: rgba(120, 210, 120, 0.75);
  background: rgba(30, 120, 50, 0.24);
  color: #dff8df;
  box-shadow: inset 0 0 0 1px rgba(120, 210, 120, 0.25);
}

.GuildManagerLevelChoice:hover span {
  border-color: rgba(245, 196, 109, 0.5);
}

.GuildManagerInfo {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.GuildManagerInfoCard {
  padding: 12px 14px;
  border: 1px solid rgba(245, 196, 109, 0.22);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.16);
  color: rgba(245, 226, 185, 0.88);
}

.GuildManagerInfoCard h3 {
  margin: 0 0 4px;
  color: #fff6d6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
}

.GuildManagerInfoCard p {
  margin: 0 0 8px;
  color: rgba(245, 226, 185, 0.72);
  font-size: 0.82rem;
  line-height: 1.45;
}

.GuildManagerInfoCard ul {
  margin: 0;
  padding-left: 18px;
  line-height: 1.5;
}

.GuildManagerInfoCard li + li {
  margin-top: 4px;
}

.TeamPage {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
}

.TeamPage__header {
  padding: 18px 20px;
  border: 1px solid rgba(200, 138, 54, 0.45);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(123, 54, 33, 0.92), rgba(15, 51, 37, 0.94)),
    radial-gradient(circle at 84% 18%, rgba(229, 160, 55, 0.22), transparent 34%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
}

.TeamPage__header span {
  color: rgba(245, 226, 185, 0.82);
  font-weight: 900;
  text-transform: uppercase;
}

.TeamPage__header h1 {
  margin: 4px 0 0;
  color: #fff6d6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: 0;
  text-shadow: 1px 1px 0 #2b160f;
}

.TeamGroup {
  overflow: hidden;
  border: 1px solid rgba(83, 58, 34, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 249, 232, 0.90), rgba(247, 235, 204, 0.96)),
    #f6e7bf;
  box-shadow: 0 10px 24px rgba(27, 15, 7, 0.16);
}

.TeamGroup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  color: #fff3c4;
  background:
    linear-gradient(90deg, rgba(126, 55, 29, 0.96), rgba(152, 93, 28, 0.94), rgba(36, 78, 61, 0.96));
  border-bottom: 1px solid rgba(255, 220, 128, 0.28);
}

.TeamGroup__header span {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 rgba(38, 18, 8, 0.9);
}

.TeamGroup__header strong {
  padding: 4px 9px;
  border: 1px solid rgba(255, 220, 128, 0.28);
  border-radius: 999px;
  color: #fff8d8;
  background: rgba(8, 24, 20, 0.30);
  font-size: 0.76rem;
  white-space: nowrap;
}

.TeamGroup__members {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.TeamMember {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) minmax(150px, auto);
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 86px;
  padding: 10px 12px;
  border: 1px solid rgba(83, 58, 34, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 252, 239, 0.76), rgba(235, 219, 179, 0.54)),
    rgba(255, 248, 225, 0.72);
}

.TeamMember__outfit {
  position: relative;
  width: 62px;
  height: 62px;
  overflow: hidden;
  border: 1px solid rgba(83, 58, 34, 0.20);
  border-radius: 8px;
  background:
    radial-gradient(circle at center, rgba(255, 220, 128, 0.20), transparent 60%),
    linear-gradient(180deg, rgba(12, 42, 34, 0.95), rgba(6, 18, 17, 0.98));
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.28);
}

.TeamMember__outfit img {
  position: absolute;
  left: 50%;
  bottom: 2px;
  max-width: none;
  transform: translateX(-50%);
  image-rendering: pixelated;
}

.TeamMember__body {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.TeamMember__body h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin: 0;
  color: #2f1b0c;
  font-family: Verdana, Arial, sans-serif;
  font-size: 0.98rem;
  font-weight: 900;
}

.TeamMember__body h3 a {
  min-width: 0;
  color: #145247 !important;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.TeamMember__body h3 a:hover {
  color: #8a3f17 !important;
}

.TeamMember__body h3 img {
  flex: 0 0 auto;
}

.TeamMember__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.TeamBadge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid rgba(83, 58, 34, 0.18);
  border-radius: 999px;
  color: #5c3a18;
  background: rgba(255, 248, 225, 0.74);
  font-size: 0.76rem;
  font-weight: 900;
}

.TeamBadge--online {
  color: #e7ffe3;
  border-color: rgba(92, 166, 82, 0.36);
  background: linear-gradient(180deg, #2c7a3c, #14592d);
}

.TeamBadge--offline {
  color: #ffe8d9;
  border-color: rgba(176, 72, 44, 0.34);
  background: linear-gradient(180deg, #8d3d22, #632714);
}

.TeamMember__last {
  justify-self: end;
  min-width: 150px;
  max-width: 220px;
  padding: 8px 10px;
  border: 1px solid rgba(83, 58, 34, 0.16);
  border-radius: 8px;
  background: rgba(255, 249, 232, 0.62);
  text-align: right;
}

.TeamMember__last span {
  display: block;
  color: #6b4b24;
  font-size: 0.70rem;
  font-weight: 900;
  text-transform: uppercase;
}

.TeamMember__last strong {
  display: block;
  margin-top: 3px;
  color: #37200d;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.TeamEmpty {
  display: grid;
  gap: 6px;
  padding: 20px;
  border: 1px solid rgba(83, 58, 34, 0.18);
  border-radius: 8px;
  color: #3a220f;
  background: linear-gradient(180deg, rgba(255, 249, 232, 0.90), rgba(247, 235, 204, 0.96));
  text-align: center;
}

.CharacterPage,
.CharacterPage * {
  box-sizing: border-box;
}

.CharacterPage {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
}

.CharacterAdmin {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(214, 170, 82, 0.34);
  border-radius: 6px;
  color: #fff3c4 !important;
  background: #6f3a1c;
  font-weight: 900;
  text-decoration: none;
}

.CharacterHero {
  position: relative;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 16px;
  border: 1px solid #1b120c;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(126, 55, 29, 0.96), rgba(152, 93, 28, 0.92), rgba(30, 74, 60, 0.96)),
    #1b2c24;
  box-shadow: 0 14px 28px rgba(5, 10, 8, 0.28);
}

.CharacterHero--paladin {
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(22, 54, 39, 0.94) 0%, rgba(35, 53, 35, 0.86) 42%, rgba(12, 20, 17, 0.38) 100%),
    linear-gradient(180deg, rgba(255, 219, 122, 0.18), rgba(4, 16, 14, 0.46)),
    var(--hero-banner-image, url("images/characters/paladin-banner.png")) right 38% / auto 118% no-repeat,
    #14241d;
  border-color: rgba(236, 190, 90, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 172, 0.16),
    0 16px 32px rgba(5, 10, 8, 0.34);
}

.CharacterHero--paladin::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 22%, rgba(247, 197, 93, 0.16), transparent 28%),
    linear-gradient(90deg, rgba(4, 13, 11, 0.26), transparent 52%);
}

.CharacterHero--paladin > * {
  position: relative;
  z-index: 1;
}

.CharacterHero--sorcerer {
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(42, 16, 10, 0.94) 0%, rgba(58, 22, 14, 0.86) 42%, rgba(12, 8, 10, 0.38) 100%),
    linear-gradient(180deg, rgba(255, 132, 64, 0.18), rgba(8, 10, 18, 0.46)),
    var(--hero-banner-image, url("images/characters/sorcerer-banner.png")) right 38% / auto 118% no-repeat,
    #1a1018;
  border-color: rgba(255, 148, 72, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 196, 140, 0.16),
    0 16px 32px rgba(8, 4, 6, 0.34);
}

.CharacterHero--sorcerer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 28%, rgba(255, 118, 48, 0.22), transparent 30%),
    linear-gradient(90deg, rgba(10, 6, 8, 0.28), transparent 52%);
}

.CharacterHero--sorcerer > * {
  position: relative;
  z-index: 1;
}

.CharacterHero--druid {
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(14, 38, 28, 0.94) 0%, rgba(22, 48, 34, 0.86) 42%, rgba(8, 16, 12, 0.38) 100%),
    linear-gradient(180deg, rgba(132, 220, 148, 0.16), rgba(6, 14, 10, 0.46)),
    var(--hero-banner-image, url("images/characters/druid-banner.png")) right 38% / auto 118% no-repeat,
    #102018;
  border-color: rgba(132, 210, 148, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(196, 244, 204, 0.16),
    0 16px 32px rgba(4, 10, 8, 0.34);
}

.CharacterHero--druid::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 26%, rgba(120, 210, 140, 0.2), transparent 30%),
    linear-gradient(90deg, rgba(6, 12, 10, 0.28), transparent 52%);
}

.CharacterHero--druid > * {
  position: relative;
  z-index: 1;
}

.CharacterHero--knight {
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(28, 24, 22, 0.94) 0%, rgba(42, 34, 30, 0.86) 42%, rgba(10, 10, 12, 0.38) 100%),
    linear-gradient(180deg, rgba(196, 196, 210, 0.14), rgba(8, 8, 12, 0.46)),
    var(--hero-banner-image, url("images/characters/knight-banner.png")) right 38% / auto 118% no-repeat,
    #141418;
  border-color: rgba(180, 186, 198, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(228, 232, 240, 0.14),
    0 16px 32px rgba(4, 4, 8, 0.34);
}

.CharacterHero--knight::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 24%, rgba(196, 202, 220, 0.18), transparent 30%),
    linear-gradient(90deg, rgba(8, 8, 10, 0.3), transparent 52%);
}

.CharacterHero--knight > * {
  position: relative;
  z-index: 1;
}

.CharacterHero__portrait {
  position: relative;
  grid-row: span 2;
  width: 112px;
  height: 112px;
  overflow: hidden;
  border: 1px solid rgba(255, 220, 128, 0.32);
  border-radius: 8px;
  background:
    radial-gradient(circle at center, rgba(255, 220, 128, 0.22), transparent 58%),
    linear-gradient(180deg, rgba(12, 42, 34, 0.96), rgba(6, 18, 17, 0.98));
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.34);
}

.CharacterHero__portrait img {
  position: absolute;
  left: 50%;
  bottom: 0;
  max-width: none;
  transform: translateX(-50%) scale(1.44);
  transform-origin: center bottom;
  image-rendering: pixelated;
}

.CharacterHero__main {
  min-width: 0;
}

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

.CharacterHero__name h1 {
  min-width: 0;
  margin: 0;
  color: #fff8df;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  line-height: 1.05;
  overflow-wrap: anywhere;
  text-shadow: 1px 2px 0 rgba(30, 12, 5, 0.85);
}

.CharacterHero__oldName {
  margin-top: 5px;
  color: rgba(255, 244, 209, 0.72);
  font-size: 0.82rem;
}

.CharacterHero__badges,
.CharacterInfoGrid,
.CharacterDetails,
.CharacterSkillList,
.CharacterQuestList,
.CharacterAccountList {
  display: grid;
  gap: 8px;
}

.CharacterHero__badges {
  display: flex;
  flex-wrap: wrap;
  margin-top: 12px;
}

.CharacterBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 5px 9px;
  border: 1px solid rgba(255, 220, 128, 0.24);
  border-radius: 999px;
  color: #fff3c4;
  background: rgba(8, 24, 20, 0.36);
  font-size: 0.76rem;
  font-weight: 900;
  white-space: nowrap;
}

.CharacterBadge--online {
  color: #e7ffe3;
  border-color: rgba(92, 166, 82, 0.36);
  background: linear-gradient(180deg, #2c7a3c, #14592d);
}

.CharacterBadge--offline {
  color: #ffe8d9;
  border-color: rgba(176, 72, 44, 0.34);
  background: linear-gradient(180deg, #8d3d22, #632714);
}

.CharacterHero__stats {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.CharacterHero__stats > div {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid rgba(255, 220, 128, 0.24);
  border-radius: 8px;
  background: rgba(8, 24, 20, 0.34);
}

.CharacterHero__stats span {
  color: rgba(255, 244, 209, 0.72);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.CharacterHero__stats strong {
  color: #fff8df;
  font-size: 0.95rem;
  line-height: 1.2;
  white-space: nowrap;
}

.CharacterStatValue--short {
  display: none;
}

.CharacterBar {
  height: 9px;
  overflow: hidden;
  border: 1px solid rgba(25, 10, 5, 0.72);
  border-radius: 999px;
  background: rgba(6, 12, 10, 0.76);
}

.CharacterBar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #913420, #d16338);
}

.CharacterBar--mana i {
  background: linear-gradient(90deg, #1b5d8f, #4aa3dc);
}

.CharacterGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.CharacterPanel {
  overflow: hidden;
  border: 1px solid rgba(83, 58, 34, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 249, 232, 0.90), rgba(247, 235, 204, 0.96)),
    #f6e7bf;
  box-shadow: 0 10px 24px rgba(27, 15, 7, 0.16);
}

.CharacterPanel > header {
  padding: 12px 14px;
  color: #fff3c4;
  background: linear-gradient(90deg, #78371e, #935a20, #254b39);
  border-bottom: 1px solid rgba(255, 220, 128, 0.28);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.98rem;
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 rgba(38, 18, 8, 0.9);
}

.CharacterInfoGrid {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  padding: 12px;
}

.CharacterInfoGrid > div,
.CharacterInfoList > div,
.CharacterQuestList > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(83, 58, 34, 0.16);
  border-radius: 6px;
  background: rgba(255, 248, 225, 0.62);
}

.CharacterInfoGrid__accountStatus.is-premium {
  position: relative;
  overflow: hidden;
  border-color: rgba(213, 172, 71, 0.68);
  background:
    linear-gradient(135deg, rgba(255, 238, 159, 0.72), rgba(62, 119, 62, 0.18)),
    rgba(255, 248, 225, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 229, 0.72),
    0 0 0 1px rgba(255, 217, 105, 0.16),
    0 8px 20px rgba(76, 95, 32, 0.18);
}

.CharacterInfoGrid__accountStatus.is-premium > * {
  position: relative;
  z-index: 1;
}

.CharacterInfoGrid__accountStatus.is-premium::after {
  content: "";
  position: absolute;
  inset: -45% auto -45% -35%;
  width: 48%;
  transform: rotate(16deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 220, 0.38), transparent);
  animation: premiumStatusShine 4.8s ease-in-out infinite;
  z-index: 0;
}

.CharacterInfoGrid__accountStatus.is-premium strong {
  color: #1f6b35;
  text-shadow: 0 1px 0 rgba(255, 249, 206, 0.92), 0 0 10px rgba(232, 184, 62, 0.46);
}

@keyframes premiumStatusShine {
  0%,
  38% {
    left: -42%;
    opacity: 0;
  }

  54% {
    opacity: 0.9;
  }

  74%,
  100% {
    left: 104%;
    opacity: 0;
  }
}

.CharacterSkillList > div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(83, 58, 34, 0.16);
  border-radius: 6px;
  background: rgba(255, 248, 225, 0.62);
}

.CharacterSkillIcon {
  width: 32px;
  height: 32px;
  padding: 2px;
  border: 1px solid rgba(70, 45, 22, 0.26);
  border-radius: 6px;
  background: #13271f;
  image-rendering: auto;
  box-shadow: inset 0 1px 0 rgba(255, 244, 198, 0.12);
}

.CharacterInfoList,
.CharacterComment,
.CharacterSkillList,
.CharacterQuestList,
.CharacterEventList,
.CharacterAccountList,
.CharacterSignature {
  padding: 12px;
}

.CharacterInfoList {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.CharacterInfoGrid span,
.CharacterInfoList span,
.CharacterSkillList span,
.CharacterQuestList span {
  color: #6b4b24;
  font-size: 0.70rem;
  font-weight: 900;
  text-transform: uppercase;
}

.CharacterInfoGrid strong,
.CharacterInfoList strong,
.CharacterSkillList strong,
.CharacterQuestList strong {
  color: #37200d;
  overflow-wrap: anywhere;
}

.CharacterInfoList a,
.CharacterEventList a,
.CharacterAccountList a {
  color: #145247 !important;
  font-weight: 900;
  text-decoration: none;
}

.CharacterComment {
  color: #3a220f;
  overflow-wrap: anywhere;
}

.CharacterDetails {
  grid-template-columns: minmax(190px, 0.75fr) minmax(260px, 1fr) minmax(170px, 0.62fr);
  align-items: start;
  gap: 14px;
}

.CharacterQuestList {
  max-height: none;
  overflow: visible;
  padding-right: 12px;
}

.CharacterQuestList > div {
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  min-height: 34px;
  padding: 6px 4px 6px 0;
  border-width: 0 0 1px;
  border-color: rgba(83, 58, 34, 0.14);
  border-radius: 0;
  background: transparent;
}

.CharacterSkillList {
  max-height: none;
  overflow: visible;
  padding-right: 12px;
}

.CharacterQuestList .is-done,
.CharacterEventList .is-done {
  color: #237038;
}

.CharacterQuestList .is-missing,
.CharacterEventList .is-missing,
.CharacterInfoList em {
  color: #9b321f;
  font-style: normal;
}

.CharacterQuestList .QuestState {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 230, 0.45);
}

.CharacterQuestList .QuestState span {
  color: inherit;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}

.CharacterQuestList .QuestState.is-done {
  border: 1px solid rgba(50, 132, 63, 0.44);
  color: #f6ffe8;
  background: linear-gradient(180deg, #3c9a4b, #1d6b34);
}

.CharacterQuestList .QuestState.is-missing {
  border: 1px solid rgba(153, 59, 42, 0.42);
  color: #fff1dc;
  background: linear-gradient(180deg, #a84c2f, #7a2d1f);
}

.CharacterEquipment {
  display: grid;
  grid-template-columns: repeat(3, 44px);
  gap: 5px;
  justify-content: center;
  padding: 14px 12px;
  background:
    radial-gradient(circle at center, rgba(255, 220, 128, 0.12), transparent 62%),
    #111815;
}

.CharacterEquipment > div {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(214, 170, 82, 0.28);
  background: #232823;
}

.CharacterEquipment img {
  max-width: 40px;
  max-height: 40px;
}

.CharacterEquipment__soul {
  grid-column: 2 / -1;
  width: auto !important;
  height: 44px !important;
  color: #f0d89d;
  font-size: 0.68rem;
  font-weight: 900;
  text-align: center;
}

.CharacterEventList {
  display: grid;
  gap: 8px;
}

.CharacterEventList > div {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(83, 58, 34, 0.16);
  border-radius: 6px;
  background: rgba(255, 248, 225, 0.62);
}

.CharacterEventList time {
  color: #6b4b24;
  font-size: 0.76rem;
  font-weight: 900;
}

.CharacterEventList span {
  color: #37200d;
  overflow-wrap: anywhere;
}

.CharacterSignature {
  display: grid;
  gap: 10px;
  justify-items: center;
}

.CharacterSignature img {
  max-width: 100%;
  height: auto;
}

.CharacterSignature__links {
  display: grid;
  gap: 8px;
  width: 100%;
}

.CharacterSignature__links input {
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid rgba(83, 58, 34, 0.20);
  border-radius: 6px;
  background: rgba(255, 248, 225, 0.74);
  color: #37200d;
}

.CharacterAccountList article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(83, 58, 34, 0.16);
  border-radius: 6px;
  background: rgba(255, 248, 225, 0.62);
}

.CharacterAccountList article > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.CharacterAccountList strong {
  color: #145247;
  overflow-wrap: anywhere;
}

.CharacterAccountList span:not(.CharacterBadge) {
  color: #6b4b24;
  font-size: 0.78rem;
}

.CharacterAccountList form {
  margin: 0;
}

.CharacterAccountList button {
  min-height: 32px;
  padding: 7px 12px;
  border: 1px solid #1b0f09;
  border-radius: 6px;
  color: #ffe7a3;
  background: #8a4a21;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  cursor: pointer;
}

.CharacterSearchPanel {
  display: grid;
  gap: 0;
  overflow: visible;
  border: 1px solid rgba(182, 124, 54, 0.48);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(8, 34, 26, 0.96), rgba(5, 22, 18, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 244, 198, 0.08), 0 12px 24px rgba(0, 0, 0, 0.20);
  transition: padding-bottom 0.22s ease;
}

.CharacterSearchPanel--expanded {
  padding-bottom: calc(var(--autocomplete-expand, 0px) + 10px);
}

.CharacterSearchPanel--standalone {
  margin: 4px 2px 8px;
}

.CharacterSearchPanel > header {
  padding: 14px 16px;
  background:
    linear-gradient(90deg, #743821, #8a5a24 52%, #23543a);
  border-bottom: 1px solid rgba(255, 220, 128, 0.22);
}

.CharacterSearchPanel > header span {
  display: block;
  color: rgba(255, 238, 190, 0.78);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.CharacterSearchPanel > header h1 {
  margin: 3px 0 0;
  color: #fff6d6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
  line-height: 1.12;
  text-shadow: 1px 1px 0 #2b160f;
}

.CharacterSearch {
  display: grid;
  gap: 8px;
  padding: 18px;
  overflow: visible;
  background:
    radial-gradient(circle at 94% 18%, rgba(231, 164, 65, 0.14), transparent 30%),
    rgba(3, 18, 15, 0.36);
}

.CharacterSearch > label {
  color: #f4cf82;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.CharacterSearch__control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  overflow: visible;
}

.CharacterSearch input {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid rgba(207, 158, 87, 0.55);
  border-radius: 6px;
  color: #2d1b10;
  background: #fff5dc;
  outline: none;
}

.CharacterSearch input:focus {
  border-color: #f5c46d;
  box-shadow: 0 0 0 3px rgba(245, 196, 109, 0.18);
}

.CharacterSearch button {
  min-height: 42px;
  padding: 9px 18px;
  border: 1px solid #1b0f09;
  border-radius: 6px;
  color: #ffe7a3;
  background:
    linear-gradient(180deg, rgba(255, 239, 178, 0.18), rgba(92, 41, 18, 0.16)),
    #8a4a21;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 235, 170, 0.30), 0 10px 16px rgba(0, 0, 0, 0.22);
}

.CharacterSearch button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.CharacterSearch form,
.CharacterSearch table,
.CharacterSearch tbody,
.CharacterSearch tr,
.CharacterSearch td {
  display: block;
  width: 100% !important;
}

.CharacterSearch table {
  margin: 0 !important;
  border: 0 !important;
}

.CharacterSearch tr:first-child {
  display: none;
}

.CharacterSearch td {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.CharacterSearch table table tr {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.CharacterSearch table table td:first-child {
  width: auto !important;
  color: #6b4b24;
  font-weight: 900;
}

.CharacterSearch table table input[name="name"] {
  width: 100% !important;
  min-height: 36px;
  margin: 0;
}

.CharacterSearch .BigButton,
.CharacterSearch .BigButtonText {
  width: 104px !important;
  min-width: 104px !important;
  height: 36px !important;
}

@media (max-width: 760px) {
  .AccountActionPage__header,
  .AccountActionForm {
    padding: 14px;
  }

  .AccountSexCards {
    grid-template-columns: 1fr;
  }

  .AccountSexCard,
  .AccountSexCard img {
    min-height: 180px;
    height: 180px;
  }

  .AccountSexCards--create .AccountSexCard,
  .AccountSexCards--create .AccountSexCard img {
    min-height: var(--account-sex-card-height);
    height: var(--account-sex-card-height);
  }

  .AccountActionForm__actions,
  .AccountActionButton {
    width: 100%;
  }

  .GuildViewHero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .GuildViewHero__logo {
    margin: 0 auto;
  }

  .GuildViewActions,
  .GuildViewActions .GuildButton,
  .GuildViewActions form {
    width: 100%;
  }

  .GuildViewTableWrap {
    overflow: visible;
  }

  .GuildViewTable {
    min-width: 0;
  }

  .GuildViewTable thead {
    display: none;
  }

  .GuildViewTable,
  .GuildViewTable tbody {
    display: block;
    width: 100% !important;
  }

  .GuildViewTable tbody {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: #f8e8bf;
  }

  .GuildViewTable tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name status"
      "rank vocation"
      "level level";
    gap: 5px 10px;
    padding: 10px 12px;
    border: 1px solid rgba(83, 58, 34, 0.16);
    border-radius: 8px;
    background: rgba(255, 249, 232, 0.72);
    border-bottom: 0;
    width: 100%;
  }

  .GuildViewTable td {
    display: block;
    width: auto !important;
    padding: 0 !important;
    border-bottom: 0;
  }

  .GuildViewTable td::before {
    display: none;
  }

  .GuildViewTable td[data-label="Name"] {
    grid-area: name;
    min-width: 0;
  }

  .GuildViewTable td[data-label="Status"] {
    grid-area: status;
    justify-self: end;
    align-self: start;
  }

  .GuildViewTable td[data-label="Rank"] {
    grid-area: rank;
    color: #6f3a1c;
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .GuildViewTable td[data-label="Vocation"] {
    grid-area: vocation;
    justify-self: end;
    color: #5a3a1a;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: right;
  }

  .GuildViewTable td[data-label="Level"] {
    grid-area: level;
    padding-top: 4px !important;
    color: #37200d;
    font-size: 0.82rem;
    font-weight: 900;
    border-top: 1px solid rgba(83, 58, 34, 0.1);
  }

  .GuildViewMember {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
  }

  .GuildViewMember__outfit {
    width: 40px;
    height: 40px;
  }

  .GuildViewMember__body {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .GuildViewMember__body > a {
    font-size: 0.92rem;
    line-height: 1.15;
  }

  .GuildViewBadge {
    min-height: 22px;
    padding: 3px 10px;
    font-size: 0.68rem;
    white-space: nowrap;
  }

  .GuildViewLevel--full {
    display: none;
  }

  .GuildViewLevel--short {
    display: inline;
  }

  .GuildViewNickForm {
    width: 100%;
  }

  .GuildViewMember {
    align-items: start;
  }

  .GuildViewNickForm input {
    width: 100%;
  }

  .CharacterCreateGrid {
    grid-template-columns: 1fr;
  }

  .AccountCreateTopGrid,
  .AccountCreateTopGrid .CharacterCreateGrid,
  .AccountCreatePage .CharacterCreateOptions--cards:not(.AccountCreateOptions--compact) {
    grid-template-columns: 1fr;
  }

  .CharacterCreateOptions--cards {
    grid-template-columns: 1fr;
  }

  .CharacterCreateActions,
  .CharacterCreateActions .CharacterCreateButton {
    width: 100%;
  }

  .HighscoresFilter {
    grid-template-columns: 1fr;
  }

  .HighscoresTable {
    min-width: 0;
  }

  .HighscoresTable thead {
    display: none;
  }

  .HighscoresTable,
  .HighscoresTable tbody,
  .HighscoresTable tr,
  .HighscoresTable td {
    display: block;
    width: 100% !important;
  }

  .HighscoresTable tr {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 0 8px;
    margin: 0 0 10px;
    overflow: hidden;
    border: 1px solid rgba(83, 58, 34, 0.18);
    border-radius: 8px;
    background: #f8e8bf;
  }

  .HighscoresTable td {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 8px;
    padding: 7px 10px !important;
    border-bottom: 0;
    text-align: left !important;
  }

  .HighscoresTable td::before {
    content: attr(data-label);
    color: #6f3a1c;
    font-weight: 900;
  }

  .HighscoresTable td:first-child {
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d6bd8d;
    font-size: 1.05rem;
  }

  .HighscoresTable td:first-child::before {
    display: none;
  }

  .HighscoresTable__outfit {
    grid-row: 2;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #ead6a8;
  }

  .HighscoresTable__outfit::before {
    display: none;
  }

  .HighscoresTable__name {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    min-height: 58px;
    font-size: 1rem;
  }

  .HighscoresTable__name::before {
    display: none;
  }

  .HighscoresTable__name ~ td {
    grid-column: 1 / -1;
  }

  .AccountManage__hero,
  .AccountManage__status,
  .AccountManageNotice {
    align-items: stretch;
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .AccountManageTable {
    min-width: 0;
  }

  .AccountManageTable thead {
    display: none;
  }

  .AccountManageTable,
  .AccountManageTable tbody,
  .AccountManageTable tr,
  .AccountManageTable td {
    display: block;
    width: 100% !important;
  }

  .AccountManageTable tr {
    padding: 8px;
    border-bottom: 1px solid rgba(83, 58, 34, 0.16);
  }

  .AccountManageTable td {
    padding: 5px 0 !important;
    border-bottom: 0;
  }

  .Content .BoxContent .TableContainer:has(#vocationFilter) .InnerTableContainer > table > tbody > tr,
  .Content .BoxContent .TableContainer:has(#skillFilter) .InnerTableContainer > table > tbody > tr {
    grid-template-columns: 1fr;
  }

  .Content .BoxContent #vocationFilter,
  .Content .BoxContent #skillFilter {
    width: 100%;
  }

  .Content .BoxContent .TableContainer:has(#vocationFilter) + p + .TableContainer .TableContent {
    min-width: 0;
    table-layout: auto;
  }

  .Content .BoxContent .TableContainer:has(#vocationFilter) + p + .TableContainer .TableContent,
  .Content .BoxContent .TableContainer:has(#vocationFilter) + p + .TableContainer .TableContent tbody,
  .Content .BoxContent .TableContainer:has(#vocationFilter) + p + .TableContainer .TableContent tr,
  .Content .BoxContent .TableContainer:has(#vocationFilter) + p + .TableContainer .TableContent td {
    display: block;
    width: 100% !important;
  }

  .Content .BoxContent .TableContainer:has(#vocationFilter) + p + .TableContainer .TableContent tr.LabelH {
    display: none;
  }

  .Content .BoxContent .TableContainer:has(#vocationFilter) + p + .TableContainer .TableContent tr:not(.LabelH) {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 0 8px;
    margin: 0 0 10px;
    overflow: hidden;
    border: 1px solid rgba(83, 58, 34, 0.18);
    border-radius: 8px;
    background: #f8e8bf !important;
  }

  .Content .BoxContent .TableContainer:has(#vocationFilter) + p + .TableContainer .TableContent td {
    padding: 7px 10px !important;
    border-bottom: 0;
    text-align: left !important;
    max-width: none;
  }

  .Content .BoxContent .TableContainer:has(#vocationFilter) + p + .TableContainer .TableContent td:first-child {
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d6bd8d !important;
    font-size: 1.1rem;
  }

  .Content .BoxContent .TableContainer:has(#vocationFilter) + p + .TableContainer .TableContent td:nth-child(2) {
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ead6a8 !important;
  }

  .Content .BoxContent .TableContainer:has(#vocationFilter) + p + .TableContainer .TableContent td:nth-child(2) img {
    margin: -10px auto -4px !important;
  }

  .Content .BoxContent .TableContainer:has(#vocationFilter) + p + .TableContainer .TableContent td:nth-child(3) {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    min-height: 58px;
    font-size: 1rem;
  }

  .Content .BoxContent .TableContainer:has(#vocationFilter) + p + .TableContainer .TableContent td:nth-child(n+4) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 8px;
  }

  .Content .BoxContent .TableContainer:has(#vocationFilter) + p + .TableContainer .TableContent td:nth-child(n+4)::before {
    display: block;
    min-width: 0;
    color: #6f3a1c;
    font-weight: 900;
  }

  .Content .BoxContent .TableContainer:has(#vocationFilter) + p + .TableContainer .TableContent td:nth-child(4)::before {
    content: "Vocation:";
  }

  .Content .BoxContent .TableContainer:has(#vocationFilter) + p + .TableContainer .TableContent td:nth-child(5)::before {
    content: "Resets:";
  }

  .Content .BoxContent .TableContainer:has(#vocationFilter) + p + .TableContainer .TableContent td:nth-child(6)::before {
    content: "Value:";
  }

  .Content .BoxContent .TableContainer:has(#vocationFilter) + p + .TableContainer .TableContent td:nth-child(7)::before {
    content: "Points:";
  }

  .LastKills__item {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 8px 10px;
    align-items: start;
    padding: 10px;
  }

  .LastKills__time,
  .LastKills__text,
  .LastKills__world {
    grid-column: 2;
  }

  .LastKills__outfit {
    grid-column: 2;
  }

  .LastKills__rank {
    grid-row: 1 / span 4;
  }

  .LastKills__time {
    font-size: 0.74rem;
    white-space: normal;
  }

  .LastKills__header {
    padding: 16px;
  }

  .LastKills__header h1 {
    font-size: 23px;
  }

  .SpellsFilter__control {
    grid-template-columns: 1fr;
  }

  .SpellsFilter button {
    width: 100%;
  }

  .SpellsPage__header {
    padding: 14px 16px;
  }

  .SpellsPage__header h1 {
    font-size: 22px;
  }

  .SpellsTabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .SpellsTabs > label {
    min-height: 40px;
    padding: 8px 6px;
    font-size: 0.76rem;
  }

  .SpellsTabs__panels {
    padding: 0 0 10px;
  }

  .SpellsTableWrap {
    overflow: visible;
  }

  .SpellsPage .dataTables_wrapper {
    overflow: visible;
  }

  .SpellsPage .dataTables_length,
  .SpellsPage .dataTables_filter {
    float: none !important;
    width: 100% !important;
    margin: 0 0 10px !important;
    text-align: left !important;
  }

  .SpellsPage .dataTables_length label,
  .SpellsPage .dataTables_filter label {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .SpellsPage .dataTables_filter input {
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .SpellsPage .dataTables_info {
    float: none !important;
    width: 100% !important;
    margin: 8px 0 !important;
    text-align: center !important;
  }

  .SpellsPage .dataTables_paginate {
    justify-content: center !important;
    width: 100% !important;
  }

  .SpellsPage table.dataTable.SpellsTable {
    min-width: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  .SpellsPage table.dataTable.SpellsTable thead {
    display: none !important;
  }

  .SpellsPage table.dataTable.SpellsTable tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }

  .SpellsPage table.dataTable.SpellsTable tbody tr {
    display: grid !important;
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(83, 58, 34, 0.16) !important;
    border-radius: 8px !important;
    background: rgba(255, 249, 232, 0.72) !important;
    box-sizing: border-box !important;
  }

  .SpellsPage table.dataTable.SpellsTable tbody td {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    border-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  .SpellsPage table.dataTable.SpellsTable tbody td::before {
    display: none;
  }

  #tb_instantSpells tbody tr {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "name name"
      "words words"
      "level mana"
      "vocations vocations";
    gap: 6px 10px;
  }

  #tb_conjureSpells tbody tr {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "name name"
      "words words"
      "level mana"
      "soul soul"
      "item reagent"
      "vocations vocations";
    gap: 6px 10px;
  }

  #tb_runeSpells tbody tr {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "name name"
      "level maglevel"
      "item item"
      "vocations vocations";
    gap: 6px 10px;
  }

  .SpellsTable td[data-label="Name"] {
    grid-area: name;
  }

  .SpellsTable td[data-label="Words"] {
    grid-area: words;
  }

  .SpellsTable td[data-label="Level"] {
    grid-area: level;
  }

  .SpellsTable td[data-label="Mana"] {
    grid-area: mana;
  }

  .SpellsTable td[data-label="Soul"] {
    grid-area: soul;
  }

  .SpellsTable td[data-label="Item"] {
    grid-area: item;
  }

  .SpellsTable td[data-label="Reagent"] {
    grid-area: reagent;
  }

  .SpellsTable td[data-label="Magic Level"] {
    grid-area: maglevel;
  }

  .SpellsTable td[data-label="Vocations"] {
    grid-area: vocations;
    padding-top: 4px !important;
    border-top: 1px solid rgba(83, 58, 34, 0.1) !important;
    font-size: 0.74rem !important;
    line-height: 1.35 !important;
  }

  .SpellsTable td[data-label="Level"]::before,
  .SpellsTable td[data-label="Mana"]::before,
  .SpellsTable td[data-label="Soul"]::before,
  .SpellsTable td[data-label="Magic Level"]::before,
  .SpellsTable td[data-label="Item"]::before,
  .SpellsTable td[data-label="Reagent"]::before {
    display: inline;
    content: attr(data-label) ": ";
    margin-right: 4px;
    color: #6f3a1c;
    font-size: 0.66rem;
    font-weight: 900;
    text-transform: uppercase;
  }

  .SpellsTable td[data-label="Mana"],
  .SpellsTable td[data-label="Magic Level"],
  .SpellsTable td[data-label="Reagent"] {
    text-align: right;
  }

  .SpellsTable td[data-label="Name"] strong {
    font-size: 0.95rem;
    line-height: 1.2;
  }

  .SpellsTable td[data-label="Words"] code {
    width: 100%;
    word-break: break-word;
  }

  .SpellsTable__item {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  .SpellsTable td[data-label="Reagent"] .SpellsTable__item,
  .SpellsTable td[data-label="Item"] .SpellsTable__item {
    justify-content: flex-start;
  }

  .SpellsTable td[data-label="Reagent"] {
    text-align: left;
  }

  .LastKills__world {
    justify-self: start;
  }

  .HouseCard,
  .HousesSearch__grid,
  .HouseView {
    grid-template-columns: minmax(0, 1fr);
  }

  .HousesPage__header {
    padding: 16px;
  }

  .HousesPage__header h1 {
    font-size: 23px;
  }

  .HousesPanel__header {
    font-size: 0.82rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .HousesSearch__grid {
    gap: 10px;
    padding: 10px;
  }

  .HousesSearch fieldset {
    padding: 10px;
  }

  .HouseCard {
    grid-template-areas:
      "body"
      "meta"
      "action";
    gap: 10px;
    align-items: stretch;
  }

  .HouseCard__body {
    grid-area: body;
  }

  .HouseCard__meta {
    grid-area: meta;
    justify-content: flex-start;
    min-width: 0;
  }

  .HouseCard__button {
    grid-area: action;
    display: flex;
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
  }

  .HousesSearch__actions .BigButton,
  .HousesSearch__actions .BigButtonText {
    width: 100% !important;
    max-width: 100%;
    min-width: 0 !important;
  }

  .GuildCard,
  .GuildsCTA {
    grid-template-columns: 1fr;
  }

  .GuildsPage__header {
    padding: 16px;
  }

  .GuildsPage__header h1 {
    font-size: 23px;
  }

  .GuildCard {
    justify-items: center;
    text-align: center;
  }

  .GuildCard__action,
  .GuildCard__action .GuildButton,
  .GuildsCTA form,
  .GuildsCTA .GuildButton {
    width: 100%;
  }

  .GuildsCTA {
    display: grid;
    text-align: center;
  }

  .GuildInviteLayout {
    grid-template-columns: 1fr;
  }

  .GuildCreateForm__actions,
  .GuildCreateForm__actions .GuildButton {
    width: 100%;
  }

  .GuildManagerLevelChoices {
    grid-template-columns: 1fr;
  }

  .GuildManagerOption {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 10px;
  }

  .GuildManagerOption__icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .TeamMember {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
  }

  .TeamPage__header {
    padding: 16px;
  }

  .TeamPage__header h1 {
    font-size: 23px;
  }

  .TeamMember__outfit {
    width: 58px;
    height: 58px;
  }

  .TeamMember__last {
    grid-column: 1 / -1;
    justify-self: stretch;
    min-width: 0;
    text-align: left;
  }

  .TeamGroup__header {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .CharacterPage {
    gap: 12px;
    width: 100%;
    min-width: 0;
  }

  .CharacterHero,
  .CharacterGrid,
  .CharacterDetails {
    grid-template-columns: minmax(0, 1fr);
  }

  .CharacterHero {
    grid-template-areas:
      "portrait"
      "main"
      "stats";
    gap: 12px;
    padding: 12px;
    text-align: center;
    overflow: hidden;
  }

  .CharacterHero__portrait {
    grid-area: portrait;
    grid-row: auto;
    margin: 0 auto;
    width: 96px;
    height: 96px;
  }

  .CharacterHero__main {
    grid-area: main;
    width: 100%;
    min-width: 0;
  }

  .CharacterHero__name {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 4px;
  }

  .CharacterHero__name h1 {
    flex: 1 1 auto;
    max-width: 100%;
    font-size: 1.65rem;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .CharacterHero__badges {
    justify-content: center;
    gap: 6px;
    max-width: 100%;
    margin-top: 10px;
  }

  .CharacterBadge {
    max-width: 100%;
    font-size: 0.72rem;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
    padding: 5px 8px;
  }

  .CharacterHero__stats {
    grid-area: stats;
    grid-column: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    min-width: 0;
  }

  .CharacterHero__stats > div {
    min-width: 0;
    text-align: left;
  }

  .CharacterStatValue--full {
    display: none;
  }

  .CharacterStatValue--short {
    display: inline;
  }

  .CharacterHero__stats strong {
    display: block;
    font-size: clamp(0.68rem, 3.2vw, 0.84rem);
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .CharacterInfoGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
  }

  .CharacterInfoList {
    grid-template-columns: 1fr;
  }

  .CharacterPanel > header {
    font-size: 0.9rem;
    padding: 10px 12px;
    line-height: 1.2;
  }

  .CharacterPanel--wide {
    grid-row: auto;
  }

  .CharacterEventList > div,
  .CharacterAccountList article {
    grid-template-columns: 1fr;
  }

  .CharacterAccountList .CharacterBadge,
  .CharacterAccountList button {
    width: 100%;
  }

  .CharacterSearch__control {
    grid-template-columns: 1fr;
  }

  .CharacterSearch button {
    width: 100%;
  }
}

input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea,
.searchchar_input {
  max-width: 100%;
  border: 1px solid rgba(44, 27, 13, 0.30) !important;
  border-radius: 8px !important;
  background: #fff9e8 !important;
  color: var(--bk-ink) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.10);
}

.BigButton,
.BigButtonText,
.rank_button,
.discord_button,
.donate_button,
.searchchar_button {
  border-radius: 8px !important;
}

.BigButton,
.rank_button,
.discord_button,
.donate_button,
.searchchar_button {
  background-image: linear-gradient(180deg, #ffe07a, #ef8d24 55%, #a94417) !important;
  box-shadow: 0 9px 16px rgba(0, 0, 0, 0.25);
}

.BigButtonText,
.rank_button,
.discord_button,
.donate_button,
.searchchar_button {
  color: #2b1200 !important;
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

#RightArtwork {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  width: 180px;
  height: 98px;
  margin: 0 0 12px;
  overflow: hidden;
  border: 1px solid var(--bk-line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(35, 52, 37, 0.96), rgba(10, 22, 20, 0.98));
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.28);
}

#RightArtwork #Creature {
  top: 12px !important;
  left: 31px !important;
}

#RightArtwork #Boss {
  top: 12px !important;
  left: 86px !important;
}

#PedestalAndOnline {
  top: 44px !important;
  left: 12px !important;
  opacity: 0.88;
}

#Themeboxes {
  display: grid;
  gap: 12px;
  justify-items: stretch;
}

#Themeboxes,
#Themeboxes * {
  box-sizing: border-box;
}

#Themeboxes > form {
  margin: 0 !important;
}

.rank,
.discord,
.donate,
.searchchar,
.serversave,
.rashid,
.daily-monster,
.Themebox {
  width: 210px !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
  overflow: hidden;
  border: 1px solid var(--bk-line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(26, 43, 34, 0.98), rgba(9, 20, 19, 0.98)) !important;
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.26);
}

#Topbar.Themebox {
  min-height: 252px;
}

#Topbar .top_level {
  position: relative !important;
  inset: auto !important;
  display: grid;
  width: 100% !important;
  height: auto !important;
  min-height: 0;
  gap: 3px;
  padding: 9px 10px !important;
  background: transparent !important;
  color: #f4e5c1 !important;
  text-align: left !important;
}

#Topbar .top_level > div {
  min-width: 0;
}

#Topbar .topfont {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  min-height: 40px;
  color: #fff4d3 !important;
  font-size: 0.78rem !important;
  line-height: 1.15;
}

#Topbar .topfont br {
  display: none;
}

#Topbar .topfont img {
  position: static !important;
  grid-row: 1 / span 2;
  max-width: 44px;
  max-height: 44px;
  margin: 0 !important;
  object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.46));
}

#Topbar .topfont span,
#Topbar .topfont small {
  grid-column: 2;
  min-width: 0;
  margin-left: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#Topbar .topfont small span {
  color: rgba(255, 244, 209, 0.72) !important;
  font-size: 0.72rem;
}

#Topbar .Bottom {
  display: none;
}

.rank_header,
.discord_header,
.donate_header,
.searchchar_header,
.serversave_header,
.rashid_header,
.daily-monster_header {
  width: 100% !important;
  min-height: 40px;
  height: auto !important;
  padding: 13px 12px 10px;
  background-image: linear-gradient(90deg, #693324, #9f6628 54%, #12483d) !important;
  color: #fff1c7 !important;
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif !important;
  font-size: 0.85rem;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-transform: uppercase;
}

.rank_content,
.discord_content,
.donate_content,
.searchchar_content,
.serversave_content,
.rashid_content,
.daily-monster_content {
  width: 100% !important;
  height: auto !important;
  min-height: 0;
  padding: 14px !important;
  background-image: none !important;
  color: #f4e5c1;
}

.rank_content {
  display: grid !important;
  gap: 6px;
}

.discord_content,
.donate_content,
.searchchar_content,
.serversave_content {
  display: grid !important;
  gap: 10px;
  justify-items: center;
  align-items: center;
}

.discord {
  position: relative;
}

.discord::before {
  content: "";
  position: absolute;
  inset: 40px 0 auto;
  height: 88px;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 0%, rgba(88, 101, 242, 0.20), transparent 58%),
    linear-gradient(180deg, rgba(88, 101, 242, 0.10), transparent);
}

.discord_header {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.discord_header::before {
  content: "";
  width: 18px;
  height: 18px;
  background: url("images/themeboxes/discord/discord.png") center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.55));
}

.discord_content {
  position: relative;
  min-height: 122px !important;
  padding: 14px 14px 16px !important;
}

.discord_emblem {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid rgba(170, 181, 255, 0.30);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 35%, rgba(88, 101, 242, 0.42), rgba(18, 28, 35, 0.88) 70%),
    #17202a;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 8px 16px rgba(0, 0, 0, 0.35);
}

.discord_emblem img {
  max-width: 38px;
  max-height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.42));
}

.discord_text {
  display: grid;
  gap: 3px;
  text-align: center;
}

.discord_text strong {
  color: #fff4d3;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.82rem;
  line-height: 1.15;
  text-shadow: 1px 1px 0 rgba(20, 8, 4, 0.88);
}

.discord_text span {
  color: rgba(244, 229, 193, 0.78);
  font-size: 0.72rem;
  line-height: 1.25;
}

.rank_bottom,
.discord_bottom,
.donate_bottom,
.searchchar_bottom,
.serversave_bottom,
.rashid_bottom,
.daily-monster_bottom {
  display: none;
}

.rank_player {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  min-height: 0 !important;
  padding: 0 !important;
  color: #f4e5c1 !important;
}

.rank_outfitWrap {
  position: relative;
  display: grid;
  place-items: end center;
  flex-shrink: 0;
  width: 54px;
  height: 64px;
  margin-left: -4px;
}

.rank_outfitWrap--gold::before,
.rank_outfitWrap--silver::before,
.rank_outfitWrap--bronze::before {
  content: "";
  position: absolute;
  inset: -2px -4px 6px;
  z-index: 0;
  pointer-events: none;
  animation: rankBoltFlicker 0.34s steps(2) infinite;
}

.rank_outfitWrap--gold::before {
  background:
    radial-gradient(ellipse 4px 24px at 50% 6%, rgba(255, 244, 150, 0.98), transparent 72%),
    radial-gradient(ellipse 3px 18px at 18% 26%, rgba(255, 228, 100, 0.9), transparent 72%),
    radial-gradient(ellipse 3px 18px at 82% 26%, rgba(255, 228, 100, 0.9), transparent 72%),
    radial-gradient(ellipse 3px 15px at 30% 58%, rgba(255, 210, 72, 0.78), transparent 72%),
    radial-gradient(ellipse 3px 15px at 70% 58%, rgba(255, 210, 72, 0.78), transparent 72%),
    radial-gradient(ellipse 2px 12px at 50% 38%, rgba(255, 236, 120, 0.62), transparent 72%);
  filter: blur(0.35px);
}

.rank_outfitWrap--silver::before {
  background:
    radial-gradient(ellipse 4px 22px at 50% 6%, rgba(244, 248, 255, 0.95), transparent 72%),
    radial-gradient(ellipse 3px 17px at 18% 28%, rgba(220, 230, 246, 0.84), transparent 72%),
    radial-gradient(ellipse 3px 17px at 82% 28%, rgba(220, 230, 246, 0.84), transparent 72%),
    radial-gradient(ellipse 3px 14px at 30% 60%, rgba(200, 212, 232, 0.68), transparent 72%),
    radial-gradient(ellipse 3px 14px at 70% 60%, rgba(200, 212, 232, 0.68), transparent 72%),
    radial-gradient(ellipse 2px 11px at 50% 40%, rgba(236, 242, 252, 0.52), transparent 72%);
  filter: blur(0.35px);
  animation-duration: 0.4s;
}

.rank_outfitWrap--bronze::before {
  background:
    radial-gradient(ellipse 3px 20px at 50% 8%, rgba(255, 188, 118, 0.78), transparent 72%),
    radial-gradient(ellipse 3px 15px at 20% 30%, rgba(255, 156, 88, 0.62), transparent 72%),
    radial-gradient(ellipse 3px 15px at 80% 30%, rgba(255, 156, 88, 0.62), transparent 72%),
    radial-gradient(ellipse 2px 12px at 32% 62%, rgba(255, 132, 72, 0.5), transparent 72%),
    radial-gradient(ellipse 2px 12px at 68% 62%, rgba(255, 132, 72, 0.5), transparent 72%);
  filter: blur(0.35px);
  animation-duration: 0.46s;
}

.rank_outfitWrap--gold .rank_outfit {
  filter:
    drop-shadow(0 0 5px rgba(255, 220, 80, 0.92))
    drop-shadow(0 0 10px rgba(255, 196, 48, 0.45))
    drop-shadow(0 6px 8px rgba(0, 0, 0, 0.46));
}

.rank_outfitWrap--silver .rank_outfit {
  filter:
    drop-shadow(0 0 5px rgba(228, 236, 248, 0.88))
    drop-shadow(0 0 10px rgba(190, 202, 220, 0.42))
    drop-shadow(0 6px 8px rgba(0, 0, 0, 0.46));
}

.rank_outfitWrap--bronze .rank_outfit {
  filter:
    drop-shadow(0 0 4px rgba(255, 156, 88, 0.72))
    drop-shadow(0 0 8px rgba(255, 118, 54, 0.36))
    drop-shadow(0 6px 8px rgba(0, 0, 0, 0.46));
}

@keyframes rankBoltFlicker {
  0%,
  100% {
    opacity: 0.62;
    transform: scale(0.97);
  }

  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rank_outfitWrap--gold::before,
  .rank_outfitWrap--silver::before,
  .rank_outfitWrap--bronze::before {
    animation: none;
    opacity: 0.82;
    transform: none;
  }
}

.rank_outfit {
  position: relative;
  z-index: 1;
  display: block;
  width: 58px;
  height: 58px;
  margin: 0 !important;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.46));
}

.rank_outfit--empty {
  display: block;
}

.rank_text {
  margin-left: 0 !important;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #f4e5c1 !important;
}

.rank_stats {
  display: inline-block;
  margin-top: 1px;
  color: rgba(255, 244, 209, 0.78) !important;
  font-size: 0.683rem;
  line-height: 1.2;
}

.donate_text,
.rashid_text,
.daily-monster_text,
.serversave_text {
  color: #f4e5c1 !important;
}

.rank_text a {
  color: #fff4d3 !important;
  text-decoration: none !important;
}

.rank_text a:hover {
  color: #ffe7a3 !important;
  text-decoration: none !important;
}

.rank_button,
.discord_button,
.donate_button,
.searchchar_button,
.daily-monster_button {
  width: 100% !important;
  min-height: 34px;
  height: auto !important;
  padding: 8px 10px;
  border: 0 !important;
}

.discord_content a,
.donate_content a {
  width: 100%;
}

.searchchar_input {
  width: 100% !important;
  min-height: 34px;
}

.daily-monster_content {
  display: grid;
  gap: 10px;
  justify-items: center;
}

.daily-monster_sprite,
.daily-monster_empty {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.36));
}

.daily-monster_empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 220, 128, 0.22);
  border-radius: 8px;
  background: rgba(255, 244, 209, 0.08);
  color: var(--bk-gold);
  font-size: 2rem;
  font-weight: 900;
}

.daily-monster_text {
  display: grid;
  gap: 3px;
  text-align: center;
}

.daily-monster_text b {
  color: #fff4d1;
  font-size: 0.94rem;
}

.daily-monster_text small {
  color: rgba(255, 244, 209, 0.70);
  font-size: 0.72rem;
  line-height: 1.3;
}

.daily-monster_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 10px;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffe37e, #f59a25 58%, #bd541a);
  color: #291100 !important;
  font-size: 0.82rem;
  font-weight: 900;
  text-decoration: none !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.rank_button,
.discord_button,
.donate_button,
.searchchar_button,
.ShopButton,
.offer_table input[type="submit"],
.offer_table input[type="button"],
.offer_table button {
  border: 1px solid rgba(78, 38, 13, 0.92) !important;
  background:
    linear-gradient(180deg, rgba(255, 244, 191, 0.56), rgba(255, 244, 191, 0) 36%),
    linear-gradient(180deg, #d79936, #8b451b 56%, #4d230f) !important;
  color: #2b1200 !important;
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 0 rgba(255, 242, 190, 0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 191, 0.58),
    inset 0 -2px 0 rgba(54, 24, 9, 0.76),
    0 8px 16px rgba(0, 0, 0, 0.28) !important;
}

.rank_button:hover,
.discord_button:hover,
.donate_button:hover,
.searchchar_button:hover,
.ShopButton:hover,
.offer_table input[type="submit"]:hover,
.offer_table input[type="button"]:hover,
.offer_table button:hover {
  filter: brightness(1.08) saturate(1.08);
  transform: translateY(-1px);
}

.donate_content img {
  display: block;
  width: 100%;
  max-width: 156px;
  max-height: 70px;
  object-fit: contain;
}

.serversave_countdown {
  width: 100%;
  max-width: 132px;
  padding: 6px 8px !important;
  color: var(--bk-gold) !important;
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  line-height: 1.1;
}

.ShopHero,
.ShopCatalog,
.ShopPopular,
.ShopHero *,
.ShopCatalog *,
.ShopPopular * {
  box-sizing: border-box;
}

.ShopHero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 0 0 16px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 220, 128, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(110deg, rgba(13, 30, 27, 0.94), rgba(117, 50, 31, 0.74) 56%, rgba(18, 72, 61, 0.88)),
    radial-gradient(circle at 78% 20%, rgba(255, 218, 104, 0.20), transparent 30%);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.30);
}

.ShopHero__eyebrow {
  display: inline-flex;
  margin-bottom: 8px;
  color: var(--bk-gold);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ShopHero h2 {
  margin: 0 0 6px;
  color: #fff8df;
  font-size: 2.05rem;
  font-weight: 900;
  line-height: 1.05;
}

.ShopHero p {
  max-width: 560px;
  margin: 0;
  color: rgba(255, 244, 209, 0.82);
  font-size: 0.98rem;
  line-height: 1.5;
}

.ShopHero__wallet {
  display: grid;
  min-width: 150px;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 220, 128, 0.24);
  border-radius: 8px;
  background: rgba(6, 18, 18, 0.72);
  text-align: center;
}

.ShopHero__wallet span {
  color: rgba(255, 244, 209, 0.70);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ShopHero__wallet strong,
.ShopHero__wallet a {
  color: #fff4d1 !important;
  font-size: 1.1rem;
  font-weight: 900;
}

.ShopConfirmPage,
.ShopConfirmPage * {
  box-sizing: border-box;
}

.ShopConfirmPage {
  display: grid;
  gap: 14px;
  color: #e9d8b2;
}

.ShopConfirmHero,
.ShopConfirmPanel {
  border: 1px solid rgba(207, 158, 87, 0.34);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(8, 34, 26, 0.96), rgba(5, 22, 18, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 244, 198, 0.08), 0 12px 24px rgba(0, 0, 0, 0.18);
}

.ShopConfirmHero {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(123, 54, 33, 0.92), rgba(15, 51, 37, 0.94)),
    radial-gradient(circle at 86% 18%, rgba(229, 160, 55, 0.22), transparent 34%);
}

.ShopConfirmHero span,
.ShopConfirmWallet span,
.ShopConfirmDetails span {
  color: rgba(245, 226, 185, 0.82);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ShopConfirmHero h2 {
  margin: 3px 0 0;
  color: #fff6d6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.55rem;
  line-height: 1.1;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  text-shadow: 1px 1px 0 #2b160f;
}

.ShopConfirmWallet {
  min-width: 170px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 220, 128, 0.24);
  border-radius: 8px;
  background: rgba(6, 18, 18, 0.72);
  text-align: center;
}

.ShopConfirmWallet strong {
  display: block;
  margin-top: 4px;
  color: #fff4d1;
  font-size: 1.08rem;
  font-weight: 900;
}

.ShopConfirmLayout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.ShopConfirmOffer {
  position: sticky;
  top: 16px;
}

.ShopConfirmPanel {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.ShopConfirmDetails {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ShopConfirmDetails > div {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(255, 220, 128, 0.16);
  border-radius: 7px;
  background: rgba(255, 244, 209, 0.06);
}

.ShopConfirmDetails > div:nth-child(2) {
  grid-column: auto;
}

.ShopConfirmPanel--success {
  display: grid;
  gap: 12px;
  color: #fff6d6;
}

.ShopConfirmDetails strong {
  display: block;
  margin-top: 4px;
  color: #fff6d6;
  overflow-wrap: anywhere;
}

.ShopConfirmActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  padding-top: 2px;
}

.ShopConfirmActions form {
  margin: 0;
}

.ShopConfirmPanel--success p {
  margin: 0;
  line-height: 1.5;
}

.ShopConfirmPanel--success .ShopButton {
  width: fit-content;
  text-decoration: none !important;
}

@media (max-width: 680px) {
  .ShopConfirmHero,
  .ShopConfirmDetails {
    grid-template-columns: 1fr;
  }

  .ShopConfirmLayout {
    grid-template-columns: 1fr;
  }

  .ShopConfirmOffer {
    position: static;
  }

  .ShopConfirmHero {
    display: grid;
  }

  .ShopConfirmWallet,
  .ShopConfirmActions,
  .ShopConfirmActions form,
  .ShopConfirmActions .ShopButton {
    width: 100%;
  }
}

.StripePointsPage,
.StripePointsPage * {
  box-sizing: border-box;
}

.PointsPage,
.PointsPage * {
  box-sizing: border-box;
}

.PointsPage {
  display: grid;
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
  color: #e9d8b2;
}

.PointsPage__hero {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border: 1px solid rgba(207, 158, 87, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(123, 54, 33, 0.92), rgba(15, 51, 37, 0.94)),
    radial-gradient(circle at 86% 18%, rgba(229, 160, 55, 0.22), transparent 34%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
}

.PointsPage__intro span,
.PointsPage__wallet span {
  color: rgba(245, 226, 185, 0.82);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.PointsPage__intro h1 {
  margin: 4px 0 6px;
  color: #fff6d6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  line-height: 1.05;
  text-shadow: 1px 1px 0 #2b160f;
}

.PointsPage__intro p {
  margin: 0;
  max-width: 560px;
  color: rgba(255, 244, 209, 0.84);
  line-height: 1.45;
}

.PointsPage__wallet {
  min-width: 180px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 220, 128, 0.24);
  border-radius: 8px;
  background: rgba(6, 18, 18, 0.72);
  text-align: center;
}

.PointsPage__wallet strong,
.PointsPage__wallet a {
  display: block;
  margin-top: 5px;
  color: #fff4d1 !important;
  font-size: 1.15rem;
  font-weight: 900;
  text-decoration: none !important;
}

.PointsPage__notice {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid rgba(111, 58, 28, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 244, 209, 0.96), rgba(245, 216, 158, 0.9)),
    #f6ddb0;
  box-shadow: 0 8px 16px rgba(73, 39, 16, 0.1);
}

.PointsPage__notice strong {
  color: #5a2f14;
  font-size: 0.9rem;
  text-transform: uppercase;
}

.PointsPage__notice span {
  color: #6b4b24;
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.45;
  text-transform: none;
}

.PointsPage__notice .ShopButton {
  width: fit-content;
  margin-top: 4px;
  text-decoration: none !important;
}

.PointsGatewayGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.PointsGateway {
  position: relative;
  display: grid;
  gap: 12px;
  min-height: 100%;
  padding: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 220, 128, 0.22);
  border-radius: 10px;
  color: inherit;
  background:
    linear-gradient(180deg, rgba(28, 45, 37, 0.98), rgba(9, 20, 19, 0.98)),
    radial-gradient(circle at 88% 12%, rgba(229, 160, 55, 0.12), transparent 34%);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.24);
  text-decoration: none !important;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.PointsGateway:hover {
  border-color: rgba(255, 226, 135, 0.55);
  transform: translateY(-3px);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.3);
}

.PointsGateway__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #2b1200;
  background: linear-gradient(180deg, #ffe07a, #ef8d24 55%, #a94417);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.PointsGateway__badge--accent {
  color: #eafff8;
  background: linear-gradient(180deg, #63f0c8, #1f9f7d 58%, #0d5d49);
}

.PointsGateway__logo {
  display: grid;
  min-height: 92px;
  place-items: center;
  padding: 14px 12px 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 42%, rgba(214, 255, 231, 0.14), transparent 38%),
    linear-gradient(180deg, rgba(14, 34, 29, 0.98), rgba(7, 18, 16, 0.98));
}

.PointsGateway__logo img {
  max-width: 150px;
  max-height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.34));
}

.PointsGateway__body {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.PointsGateway__body strong {
  color: #fff8df;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
  line-height: 1.15;
}

.PointsGateway__body p {
  margin: 0;
  color: rgba(255, 244, 209, 0.76);
  font-size: 0.88rem;
  line-height: 1.42;
}

.PointsGateway__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.PointsGateway__tags span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 220, 128, 0.18);
  border-radius: 999px;
  color: rgba(255, 244, 209, 0.82);
  background: rgba(255, 244, 209, 0.08);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.PointsGateway__cta {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border-top: 1px solid rgba(255, 220, 128, 0.14);
  color: #ffe7a3;
  background: #6f3a1c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.88rem;
  font-weight: 900;
  text-shadow: 0 2px 0 #160b05;
}

.PointsGateway:hover .PointsGateway__cta {
  color: #fff1bd;
  background: #925025;
}

.PointsGateway--stripe {
  background:
    linear-gradient(180deg, rgba(28, 45, 37, 0.98), rgba(9, 20, 19, 0.98)),
    radial-gradient(circle at 88% 12%, rgba(99, 91, 255, 0.14), transparent 34%);
}

.PointsGateway--mercadopago {
  background:
    linear-gradient(180deg, rgba(28, 45, 37, 0.98), rgba(9, 20, 19, 0.98)),
    radial-gradient(circle at 88% 12%, rgba(0, 166, 255, 0.16), transparent 34%);
}

.PointsPage__empty {
  padding: 18px;
  border: 1px dashed rgba(255, 220, 128, 0.28);
  border-radius: 8px;
  color: rgba(255, 244, 209, 0.82);
  text-align: center;
}

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

.PointsPage__perks article {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid rgba(182, 124, 54, 0.48);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(8, 34, 26, 0.96), rgba(5, 22, 18, 0.96)),
    radial-gradient(circle at 88% 12%, rgba(229, 160, 55, 0.14), transparent 34%);
  box-shadow: inset 0 1px 0 rgba(255, 244, 198, 0.08), 0 10px 20px rgba(0, 0, 0, 0.18);
}

.PointsPage__perks strong {
  color: #fff6d6;
  font-size: 0.9rem;
}

.PointsPage__perks article span {
  color: rgba(245, 226, 185, 0.9);
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.45;
  text-transform: none;
}

@media (max-width: 760px) {
  .PointsPage__hero,
  .PointsPage__perks {
    grid-template-columns: 1fr;
  }

  .PointsPage__hero {
    display: grid;
  }

  .PointsPage__wallet {
    width: 100%;
  }

  .PointsPage__notice .ShopButton {
    width: 100%;
    justify-content: center;
  }
}

.StripePointsPage {
  display: grid;
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
  color: #e9d8b2;
}

.StripePointsHero,
.StripeAccountBox,
.StripeRulesBox {
  border: 1px solid rgba(207, 158, 87, 0.34);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(8, 34, 26, 0.96), rgba(5, 22, 18, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 244, 198, 0.08), 0 12px 24px rgba(0, 0, 0, 0.18);
}

.StripePointsHero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background:
    linear-gradient(135deg, rgba(123, 54, 33, 0.92), rgba(15, 51, 37, 0.94)),
    radial-gradient(circle at 86% 18%, rgba(229, 160, 55, 0.22), transparent 34%);
}

.StripePointsHero span,
.StripeAccountBox span {
  color: rgba(245, 226, 185, 0.82);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.StripePointsHero h1,
.StripeRulesBox h2 {
  margin: 3px 0 0;
  color: #fff6d6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: 0;
  text-shadow: 1px 1px 0 #2b160f;
}

.StripePointsHero p {
  max-width: 600px;
  margin: 8px 0 0;
  color: rgba(255, 244, 209, 0.84);
  line-height: 1.45;
}

.StripePointsHero__brand {
  display: grid;
  place-items: center;
  min-width: 172px;
  min-height: 78px;
  padding: 12px;
  border: 1px solid rgba(255, 220, 128, 0.24);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 42%, rgba(214, 255, 231, 0.13), transparent 38%),
    rgba(6, 18, 18, 0.72);
}

.StripePointsHero__brand img {
  width: 150px;
  max-width: 100%;
  height: auto;
  padding: 7px 9px;
  border-radius: 6px;
  background: #fff8e6;
}

.StripeOffers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.StripeOffer {
  position: relative;
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(255, 220, 128, 0.22);
  border-radius: 8px;
  background:
    radial-gradient(circle at 86% 12%, rgba(99, 91, 255, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(28, 45, 37, 0.98), rgba(9, 20, 19, 0.98));
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.24);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.StripeOffer:hover {
  border-color: rgba(255, 226, 135, 0.55);
  transform: translateY(-3px);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.30);
}

.StripeOffer__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  min-height: 128px;
  align-items: center;
  padding: 16px;
}

.StripeOffer__icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: #ffe7a3;
  background:
    radial-gradient(circle at 50% 42%, rgba(214, 255, 231, 0.16), transparent 38%),
    linear-gradient(180deg, rgba(14, 34, 29, 0.98), rgba(7, 18, 16, 0.98));
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.08),
    0 0 18px rgba(255, 255, 255, 0.16);
  font-size: 1.2rem;
}

.StripeOffer__body span {
  color: #ffe7a3;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.05rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 1px 1px 0 #2b160f;
}

.StripeOffer__body strong {
  color: #fff6d6;
  font-size: 0.92rem;
  font-weight: 900;
  text-transform: uppercase;
}

.StripeOffer__body small {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid rgba(255, 220, 128, 0.18);
  border-radius: 999px;
  color: rgba(245, 226, 185, 0.82);
  background: rgba(255, 244, 209, 0.08);
  font-size: 0.86rem;
  font-weight: 900;
}

.StripeOffer form {
  margin: 0;
}

.StripeOffer__button {
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-top: 1px solid rgba(255, 231, 163, 0.24);
  color: #ffe7a3;
  background:
    linear-gradient(180deg, rgba(255, 239, 178, 0.18), rgba(92, 41, 18, 0.16)),
    #6f3a1c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.9rem;
  font-weight: 900;
  text-shadow: 0 2px 0 #160b05;
  cursor: pointer;
}

a.StripeOffer__button {
  text-decoration: none;
}

.StripeOffer__button:hover {
  color: #fff1bd;
  background: #925025;
}

.StripeOffer__button:disabled {
  cursor: default;
  color: rgba(242, 221, 176, 0.52);
  background: rgba(34, 37, 33, 0.86);
}

.StripeAccountBox {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}

.StripeAccountBox > div {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(255, 220, 128, 0.16);
  border-radius: 7px;
  background: rgba(255, 244, 209, 0.06);
}

.StripeAccountBox strong {
  display: block;
  margin-top: 4px;
  color: #fff6d6;
  overflow-wrap: anywhere;
}

.StripeAccountBox p {
  grid-column: 1 / -1;
  margin: 0;
  color: #fff6d6;
  font-weight: 800;
}

.StripeRulesBox {
  padding: 16px;
}

.StripeRulesBox h2 {
  margin-bottom: 10px;
  font-size: 1.35rem;
}

.StripeRulesBox div,
.StripeRulesList {
  color: rgba(245, 226, 185, 0.88);
  line-height: 1.5;
}

.StripeRulesList {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.StripeRulesList li {
  position: relative;
  padding: 9px 10px 9px 28px;
  border: 1px solid rgba(255, 220, 128, 0.14);
  border-radius: 7px;
  background: rgba(255, 244, 209, 0.05);
}

.StripeRulesList li::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f4cf82;
  box-shadow: 0 0 10px rgba(244, 207, 130, 0.42);
}

/* Fallback for stale compiled Stripe markup. */
.Content .BoxContent:has(h1):has([src*="powered_by_stripe"]),
.Content .BoxContent:has(h1):has(form[action*="system=stripe"]) {
  min-height: 0 !important;
}

.Content .BoxContent:has([src*="powered_by_stripe"]) h1,
.Content .BoxContent:has(form[action*="system=stripe"]) h1 {
  color: #fff6d6 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  text-shadow: 1px 1px 0 #2b160f !important;
}

.Content .BoxContent:has(form[action*="system=stripe"]) button,
.Content .BoxContent:has(form[action*="system=stripe"]) input[type="submit"] {
  border: 1px solid #1b0f09 !important;
  border-radius: 6px !important;
  color: #ffe7a3 !important;
  background:
    linear-gradient(180deg, rgba(255, 239, 178, 0.18), rgba(92, 41, 18, 0.16)),
    #6f3a1c !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 900 !important;
}

@media (max-width: 680px) {
  .StripePointsHero,
  .StripeAccountBox {
    grid-template-columns: 1fr;
  }

  .StripePointsHero {
    display: grid;
  }

  .StripePointsHero img {
    max-width: 100%;
  }
}

.ShopPopular,
.ShopCatalog {
  margin: 0 0 16px;
}

.ShopSectionTitle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  color: #4a2a12;
}

.ShopSectionTitle span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffe37e, #f59a25);
  color: #2a1100;
  font-weight: 900;
}

.ShopSectionTitle h3 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.34);
}

.ShopPopular__grid,
.ShopGrid {
  display: grid;
  gap: 12px;
}

.ShopPopular__grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.ShopGrid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.ShopPopularCard,
.ShopCard,
.ShopEmpty {
  min-width: 0;
  border: 1px solid rgba(255, 220, 128, 0.20);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(28, 45, 37, 0.96), rgba(9, 20, 19, 0.98));
  color: #f7e7bd;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
}

.ShopPopularCard {
  display: grid;
  grid-template-columns: auto minmax(64px, 82px) minmax(120px, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px;
}

.ShopPopularCard__rank {
  color: var(--bk-gold);
  font-weight: 900;
}

.ShopPopularCard__image,
.ShopCard__media {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 74px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 42%, rgba(214, 255, 231, 0.16), transparent 38%),
    linear-gradient(180deg, rgba(14, 34, 29, 0.98), rgba(7, 18, 16, 0.98)) !important;
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.08),
    0 0 18px rgba(255, 255, 255, 0.18),
    0 12px 22px rgba(0, 0, 0, 0.34);
}

.ShopPopularCard__image img,
.ShopCard__media img {
  max-width: 96px;
  max-height: 86px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 7px rgba(255, 255, 255, 0.34))
    drop-shadow(0 8px 10px rgba(0, 0, 0, 0.36));
}

.ShopPopularCard__body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ShopPopularCard__body strong,
.ShopCard h3 {
  color: #fff8df;
  overflow-wrap: break-word;
  word-break: normal;
}

.ShopPopularCard form {
  grid-column: 1 / -1;
  width: 100%;
  margin: 2px 0 0;
}

.ShopPopularCard__body span {
  color: rgba(255, 244, 209, 0.76);
  font-size: 0.82rem;
}

.ShopTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.ShopTabs__item {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 220, 128, 0.18);
  border-radius: 8px;
  background: rgba(255, 244, 209, 0.08);
  color: #fff4d1 !important;
  font-size: 0.86rem;
  font-weight: 900;
  text-decoration: none !important;
}

.ShopTabs__item:hover,
.ShopTabs__item.is-active {
  border-color: rgba(255, 226, 135, 0.66);
  background: rgba(255, 202, 82, 0.18);
  transform: translateY(-1px);
}

.ShopCard {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.ShopCard__media {
  min-height: 132px;
  padding: 18px 12px 12px;
  background:
    linear-gradient(180deg, rgba(255, 244, 209, 0.08), rgba(255, 244, 209, 0)),
    radial-gradient(circle at center, rgba(34, 210, 167, 0.16), transparent 58%);
}

.ShopCard__body {
  display: grid;
  gap: 8px;
  padding: 0 14px 12px;
}

.ShopCard h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
}

.ShopCard__description {
  color: rgba(255, 244, 209, 0.72);
  font-size: 0.82rem;
  line-height: 1.38;
}

.ShopCard__description br {
  display: none;
}

.ShopCard__footer {
  display: grid;
  gap: 10px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255, 220, 128, 0.14);
  background: rgba(4, 13, 13, 0.26);
}

.ShopCard__price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: var(--bk-gold);
}

.ShopCard__price strong {
  color: #fff4d1;
  font-size: 1.25rem;
  font-weight: 900;
}

.ShopCard__price span {
  color: rgba(255, 244, 209, 0.72);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ShopButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 38px;
  padding: 9px 12px;
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffe37e, #f59a25 58%, #bd541a);
  color: #291100 !important;
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.1;
  text-decoration: none !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.ShopButton:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.ShopButton--ghost {
  border: 1px solid rgba(255, 220, 128, 0.28);
  background: rgba(255, 244, 209, 0.08);
  color: #fff4d1 !important;
  text-shadow: none;
}

.ShopEmpty {
  grid-column: 1 / -1;
  padding: 18px;
  text-align: center;
}

.ShopCheckout,
.ShopCheckout * {
  box-sizing: border-box;
}

.ShopCheckout {
  display: grid;
  gap: 14px;
  color: #f7e7bd;
}

.ShopCheckout__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 22px;
  border: 1px solid rgba(255, 220, 128, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(110deg, rgba(13, 30, 27, 0.94), rgba(117, 50, 31, 0.74) 56%, rgba(18, 72, 61, 0.88)),
    radial-gradient(circle at 78% 20%, rgba(255, 218, 104, 0.20), transparent 30%);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.30);
}

.ShopCheckout__hero span,
.ShopCheckoutForm span {
  color: rgba(245, 226, 185, 0.82);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ShopCheckout__hero h2 {
  margin: 4px 0 6px;
  color: #fff8df;
  font-size: 2rem;
  line-height: 1.05;
}

.ShopCheckout__hero p {
  margin: 0;
  color: rgba(255, 244, 209, 0.82);
}

.ShopCheckout__wallet {
  display: grid;
  min-width: 150px;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 220, 128, 0.24);
  border-radius: 8px;
  background: rgba(6, 18, 18, 0.72);
  text-align: center;
}

.ShopCheckout__wallet strong,
.ShopCheckout__wallet a {
  color: #fff4d1 !important;
  font-size: 1.08rem;
  font-weight: 900;
}

.ShopCheckout__grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.ShopCheckoutOffer,
.ShopCheckoutPanel {
  overflow: hidden;
  border: 1px solid rgba(255, 220, 128, 0.20);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(28, 45, 37, 0.96), rgba(9, 20, 19, 0.98));
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
}

.ShopCheckoutOffer {
  align-self: start;
}

.ShopCheckoutOffer > header,
.ShopCheckoutPanel > header {
  padding: 10px 14px;
  color: #fff3c4;
  background: linear-gradient(90deg, #743821, #8a5a24 52%, #23543a);
  border-bottom: 1px solid rgba(255, 220, 128, 0.22);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 #2b160f;
}

.ShopCheckoutOffer__body {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.ShopCheckoutOffer__image {
  display: grid;
  min-height: 118px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 42%, rgba(214, 255, 231, 0.16), transparent 38%),
    linear-gradient(180deg, rgba(14, 34, 29, 0.98), rgba(7, 18, 16, 0.98));
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.08),
    0 0 18px rgba(255, 255, 255, 0.16),
    0 12px 22px rgba(0, 0, 0, 0.28);
}

.ShopCheckoutOffer__image img {
  max-width: 112px;
  max-height: 100px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 7px rgba(255, 255, 255, 0.30))
    drop-shadow(0 8px 10px rgba(0, 0, 0, 0.36));
}

.ShopCheckoutOffer h3 {
  margin: 0 0 8px;
  color: #fff8df;
  font-size: 1.2rem;
  line-height: 1.18;
}

.ShopCheckoutOffer__description {
  color: rgba(255, 244, 209, 0.74);
  font-size: 0.88rem;
  line-height: 1.42;
}

.ShopCheckoutOffer__price {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  margin-top: 12px;
  color: var(--bk-gold);
}

.ShopCheckoutOffer__price strong {
  color: #fff4d1;
  font-size: 1.45rem;
  font-weight: 900;
}

.ShopCheckoutForm {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.ShopCheckoutForm label {
  display: grid;
  gap: 6px;
}

.ShopCheckoutForm input,
.ShopCheckoutForm select {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid rgba(207, 158, 87, 0.55);
  border-radius: 6px;
  color: #2d1b10;
  background: #fff5dc;
  outline: none;
}

.ShopCheckoutForm input:focus,
.ShopCheckoutForm select:focus {
  border-color: #f5c46d;
  box-shadow: 0 0 0 3px rgba(245, 196, 109, 0.18);
}

.ShopCheckout__note {
  margin: 0;
  color: #4a2a12;
  font-size: 0.86rem;
  font-weight: 800;
}

.offer_container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  text-align: left !important;
}

.offer_container .offer_type {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin: 0 7px 8px 0 !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(255, 220, 128, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 244, 191, 0.12), rgba(255, 244, 191, 0)),
    linear-gradient(180deg, rgba(39, 65, 52, 0.96), rgba(13, 27, 24, 0.98)) !important;
  color: #fff4d1 !important;
  font-weight: 900;
  text-decoration: none !important;
}

.offer_container .offer_type:hover {
  border-color: rgba(255, 226, 135, 0.66);
  background:
    linear-gradient(180deg, rgba(255, 244, 191, 0.18), rgba(255, 244, 191, 0)),
    linear-gradient(180deg, rgba(113, 60, 28, 0.96), rgba(25, 37, 29, 0.98)) !important;
  transform: translateY(-1px);
}

.offer_table {
  width: 100% !important;
  max-width: 100%;
  margin: 8px 0 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 10px !important;
}

.offer_table tr {
  border-radius: 8px;
}

.offer_table tr:first-child,
.offer_table tr:nth-child(2) {
  display: none;
}

.offer_table td {
  padding: 12px !important;
  border-top: 1px solid rgba(255, 220, 128, 0.18);
  border-bottom: 1px solid rgba(255, 220, 128, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 244, 191, 0.08), rgba(255, 244, 191, 0)),
    linear-gradient(180deg, rgba(29, 47, 38, 0.96), rgba(10, 21, 20, 0.98)) !important;
  color: #f7e7bd !important;
  vertical-align: middle;
}

.offer_table td:first-child {
  border-left: 1px solid rgba(255, 220, 128, 0.18);
  border-radius: 8px 0 0 8px;
}

.offer_table td:last-child {
  border-right: 1px solid rgba(255, 220, 128, 0.18);
  border-radius: 0 8px 8px 0;
}

.offer_table img {
  max-width: 96px;
  max-height: 86px;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.32));
}

.offer_table input[type="submit"],
.offer_table input[type="button"],
.offer_table button {
  min-height: 36px;
  min-width: 88px;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 8px;
}

#Footer {
  margin: 18px 5px 0;
  padding: 16px 10px 28px;
  color: rgba(255, 244, 209, 0.78);
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  font-size: 0.76rem;
}

.scrollToTop {
  border: 1px solid rgba(255, 220, 128, 0.28);
  border-radius: 8px;
  background: rgba(7, 18, 18, 0.82);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.30);
}

/* Medieval shop/button pass: flat forged metal, carved borders, no gradient cards. */
.GameHero__button,
#DownloadBox .MediumButtonBackground,
.rank_button,
.discord_button,
.donate_button,
.searchchar_button,
.ShopButton,
.offer_table input[type="submit"],
.offer_table input[type="button"],
.offer_table button {
  position: relative;
  overflow: hidden;
  border: 1px solid #1b0f09 !important;
  outline: 1px solid rgba(214, 170, 82, 0.44);
  outline-offset: -4px;
  border-radius: 6px !important;
  background: #6f3a1c !important;
  color: #f7df9b !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 800 !important;
  letter-spacing: 0;
  text-shadow: 0 2px 0 #160b05 !important;
  box-shadow:
    inset 0 0 0 2px rgba(255, 232, 157, 0.16),
    inset 0 -4px 0 rgba(32, 16, 8, 0.54),
    0 2px 0 #120905,
    0 8px 14px rgba(0, 0, 0, 0.34) !important;
}

.GameHero__button--primary,
.ShopButton:not(.ShopButton--ghost) {
  background: #8a4a21 !important;
  color: #ffe7a3 !important;
}

.ShopButton--ghost {
  background: #29312b !important;
  color: #f2ddb0 !important;
}

.GameHero__button:hover,
#DownloadBox .MediumButtonBackground:hover,
.rank_button:hover,
.discord_button:hover,
.donate_button:hover,
.searchchar_button:hover,
.ShopButton:hover,
.offer_table input[type="submit"]:hover,
.offer_table input[type="button"]:hover,
.offer_table button:hover {
  background: #925025 !important;
  color: #fff1bd !important;
  filter: none;
  transform: translateY(-1px);
}

.ShopHero {
  border: 1px solid #1b120c;
  outline: 1px solid rgba(214, 170, 82, 0.30);
  outline-offset: -5px;
  background: #201813 !important;
  box-shadow: inset 0 0 0 2px rgba(255, 226, 145, 0.08), 0 14px 24px rgba(0, 0, 0, 0.34);
}

.ShopHero__wallet {
  border-color: rgba(214, 170, 82, 0.34);
  background: #111815;
}

.ShopTabs {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px;
  margin: 0 0 16px !important;
  padding: 8px;
  border: 1px solid rgba(214, 170, 82, 0.24);
  border-radius: 6px;
  background: #14100d;
}

.ShopTabs__item,
.offer_container .offer_type {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 1px solid #24140b !important;
  outline: 1px solid rgba(214, 170, 82, 0.28);
  outline-offset: -4px;
  border-radius: 6px !important;
  background: #3b2b20 !important;
  color: #e9d09b !important;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 800;
  text-align: center;
  text-decoration: none !important;
  box-shadow: inset 0 -3px 0 rgba(13, 8, 5, 0.45);
}

.ShopTabs__item:hover,
.ShopTabs__item.is-active,
.offer_container .offer_type:hover {
  background: #67411f !important;
  border-color: #090604 !important;
  color: #fff1bd !important;
}

.ShopPopularCard,
.ShopCard,
.ShopEmpty,
.offer_table td {
  border-color: rgba(214, 170, 82, 0.28) !important;
  background: #191f1a !important;
  color: #e9d8b2 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 226, 145, 0.06), 0 10px 18px rgba(0, 0, 0, 0.25);
}

.ShopGrid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.ShopHistory,
.ShopHistory * {
  box-sizing: border-box;
}

.ShopHistory {
  display: grid;
  gap: 16px;
  max-width: 920px;
  margin: 0 auto;
}

.ShopHistory__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  border: 1px solid #1b120c;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(126, 55, 29, 0.96), rgba(152, 93, 28, 0.94), rgba(30, 74, 60, 0.96)),
    #1b2c24;
  box-shadow: 0 12px 26px rgba(5, 10, 8, 0.28);
}

.ShopHistory__header span {
  color: var(--bk-gold);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ShopHistory__header h1 {
  margin: 3px 0 0;
  color: #fff8df;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.75rem;
  line-height: 1.05;
  text-shadow: 1px 2px 0 rgba(30, 12, 5, 0.85);
}

.ShopHistory__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 220, 128, 0.42);
  border-radius: 6px;
  color: #fff3c4 !important;
  background: rgba(8, 24, 20, 0.42);
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.ShopHistory__link:hover {
  background: rgba(255, 202, 82, 0.16);
  color: #fff8df !important;
}

.ShopHistory__section {
  overflow: hidden;
  border: 1px solid rgba(214, 170, 82, 0.28);
  border-radius: 8px;
  background: #101915;
  box-shadow: 0 10px 24px rgba(5, 10, 8, 0.22);
}

.ShopHistory__sectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(214, 170, 82, 0.24);
  background: linear-gradient(90deg, #72371e, #8d5720, #244433);
}

.ShopHistory__sectionHeader h2 {
  margin: 0;
  color: #fff3c4;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 rgba(30, 12, 5, 0.85);
}

.ShopHistory__sectionHeader strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 26px;
  padding: 3px 9px;
  border: 1px solid rgba(255, 220, 128, 0.34);
  border-radius: 999px;
  color: #fff7d4;
  background: rgba(8, 24, 20, 0.38);
  font-size: 0.78rem;
}

.ShopHistory__list {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.ShopHistoryCard {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(190px, 1.05fr) minmax(220px, 1.15fr);
  gap: 12px;
  align-items: stretch;
  padding: 12px;
  border: 1px solid rgba(214, 170, 82, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(35, 50, 41, 0.96), rgba(16, 25, 21, 0.98)),
    #131d18;
}

.ShopHistoryCard__main,
.ShopHistoryCard__people,
.ShopHistoryCard__dates {
  min-width: 0;
}

.ShopHistoryCard__main {
  display: grid;
  align-content: center;
  gap: 4px;
}

.ShopHistoryCard__eyebrow,
.ShopHistoryCard span {
  color: rgba(255, 228, 173, 0.66);
  font-size: 0.70rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ShopHistoryCard strong {
  color: #f2dfb8;
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

.ShopHistoryCard__main > strong {
  color: #fff5cf;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.04rem;
}

.ShopHistoryCard small {
  color: var(--bk-gold);
  font-weight: 900;
}

.ShopHistoryCard__people,
.ShopHistoryCard__dates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ShopHistoryCard--pacc .ShopHistoryCard__dates {
  grid-template-columns: 1fr;
}

.ShopHistoryCard__people > div,
.ShopHistoryCard__dates > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(214, 170, 82, 0.15);
  border-radius: 6px;
  background: rgba(255, 244, 209, 0.04);
}

.ShopHistoryCard .is-positive {
  color: #9df0a4;
}

.ShopHistoryCard .is-negative,
.ShopHistoryCard .is-pending {
  color: #ffad8d;
}

.ShopHistoryEmpty {
  padding: 18px;
  border: 1px dashed rgba(214, 170, 82, 0.26);
  border-radius: 8px;
  color: #e9d8b2;
  background: rgba(255, 244, 209, 0.04);
  text-align: center;
  font-weight: 800;
}

.ShopHistoryLogin {
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 22px 18px;
  border: 1px solid rgba(214, 170, 82, 0.28);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(214, 170, 82, 0.15), transparent 54%),
    linear-gradient(180deg, rgba(35, 50, 41, 0.96), rgba(16, 25, 21, 0.98));
  color: #e9d8b2;
  text-align: center;
}

.ShopHistoryLogin strong {
  color: #fff5cf;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.12rem;
}

.ShopHistoryLogin span {
  max-width: 360px;
  color: rgba(233, 216, 178, 0.82);
  line-height: 1.35;
}

.ShopHistoryLogin form {
  margin: 4px 0 0;
}

.ShopHistoryLogin button {
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid #1b0f09;
  border-radius: 6px;
  color: #ffe7a3;
  background: #8a4a21;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 -3px 0 rgba(13, 8, 5, 0.45);
}

.Content .BoxContent > div[style*="text-align: center"]:has(h1) {
  padding: 18px;
  border: 1px solid #1b120c;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(126, 55, 29, 0.96), rgba(152, 93, 28, 0.94), rgba(30, 74, 60, 0.96)),
    #1b2c24;
  box-shadow: 0 12px 26px rgba(5, 10, 8, 0.28);
}

.Content .BoxContent > div[style*="text-align: center"]:has(h1) h1 {
  margin: 0;
  color: #fff8df;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.75rem;
  line-height: 1.05;
  text-shadow: 1px 2px 0 rgba(30, 12, 5, 0.85);
}

.Content .BoxContent > div[style*="text-align: center"]:has(h1) ~ h2 {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(214, 170, 82, 0.28);
  border-radius: 8px 8px 0 0;
  color: #fff3c4;
  background: linear-gradient(90deg, #72371e, #8d5720, #244433);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 rgba(30, 12, 5, 0.85);
}

.Content .BoxContent > div[style*="text-align: center"]:has(h1) ~ table {
  display: block;
  width: 100% !important;
  margin: 0 0 16px !important;
  padding: 12px;
  border: 1px solid rgba(214, 170, 82, 0.28);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: #101915;
  box-shadow: 0 10px 24px rgba(5, 10, 8, 0.22);
}

.Content .BoxContent > div[style*="text-align: center"]:has(h1) ~ table tbody,
.Content .BoxContent > div[style*="text-align: center"]:has(h1) ~ table tr {
  display: grid;
  gap: 10px;
}

.Content .BoxContent > div[style*="text-align: center"]:has(h1) ~ table tr:first-child {
  display: none;
}

.Content .BoxContent > div[style*="text-align: center"]:has(h1) ~ table tr:not(:first-child) {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  padding: 12px;
  border: 1px solid rgba(214, 170, 82, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(35, 50, 41, 0.96), rgba(16, 25, 21, 0.98)),
    #131d18;
}

.Content .BoxContent > div[style*="text-align: center"]:has(h1) ~ table td {
  display: block;
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  color: #f2dfb8 !important;
  background: transparent !important;
  overflow-wrap: anywhere;
}

.Content .BoxContent > div[style*="text-align: center"]:has(h1) ~ table td[colspan] {
  grid-column: 1 / -1;
  padding: 16px !important;
  border: 1px dashed rgba(214, 170, 82, 0.26) !important;
  border-radius: 8px;
  color: #e9d8b2 !important;
  text-align: center;
}

.Content .BoxContent > div[style*="text-align: center"]:has(h1) ~ table td span[style*="green"] {
  color: #9df0a4 !important;
}

.Content .BoxContent > div[style*="text-align: center"]:has(h1) ~ table td span[style*="red"] {
  color: #ffad8d !important;
}

.ShopCard {
  border-radius: 6px;
}

.ShopCard__media {
  min-height: 112px;
  margin: 12px 12px 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(214, 255, 231, 0.16), transparent 38%),
    linear-gradient(180deg, rgba(14, 34, 29, 0.98), rgba(7, 18, 16, 0.98)) !important;
}

.ShopCard__footer {
  background: #111815 !important;
  border-top-color: rgba(214, 170, 82, 0.24);
}

.ShopCard h3,
.ShopPopularCard__body strong {
  color: #ffe7a3;
  font-family: Georgia, "Times New Roman", serif;
}

.ShopCard__description,
.ShopPopularCard__body span {
  color: #cdbb94;
}

.ShopCard__price strong {
  color: #f5d47c;
}

.daily-monster_button,
.daily-monster a[href*="server-info"] {
  display: none !important;
}

.Content .BoxContent .BigButton {
  display: inline-flex !important;
  width: auto !important;
  min-width: 132px;
  height: 34px !important;
  overflow: hidden;
  border: 1px solid #1b0f09 !important;
  outline: 1px solid rgba(214, 170, 82, 0.44);
  outline-offset: -4px;
  border-radius: 6px !important;
  background: #6f3a1c !important;
  box-shadow:
    inset 0 0 0 2px rgba(255, 232, 157, 0.16),
    inset 0 -4px 0 rgba(32, 16, 8, 0.54),
    0 2px 0 #120905,
    0 8px 14px rgba(0, 0, 0, 0.22) !important;
}

.Content .BoxContent .BigButtonText {
  position: relative !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 34px !important;
  padding: 0 12px !important;
  color: #f7df9b !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center;
  text-shadow: 0 2px 0 #160b05 !important;
}

.Content .BoxContent .BigButton:hover {
  background: #925025 !important;
  transform: translateY(-1px);
}

@media (max-width: 1100px) {
  #ContentRow {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  #ThemeboxesColumn {
    grid-column: 1 / -1;
    width: 100%;
  }

  #RightArtwork {
    margin-right: auto;
    margin-left: auto;
  }

  #Themeboxes {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    align-items: start;
  }
}

@media (max-width: 900px) {
  #ContentRow {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 14px;
  }

  .GameHero h1 {
    font-size: 3rem;
  }

  .GameHero__content {
    padding: 28px;
  }
}

.MobileHeader,
.MobileFixedChrome,
.MobileTopBar,
.MobileNavOverlay,
.MobileDrawerHeader {
  display: none;
}

@media (max-width: 760px) {
  html {
    overflow-x: clip;
    width: 100%;
  }

  body {
    overflow-x: visible !important;
  }

  .AccountLogin__grid {
    grid-template-columns: 1fr;
  }

  .AccountLogin__header {
    padding: 16px;
  }

  .AccountLogin__header h1 {
    font-size: 23px;
  }

  .AccountLoginCard {
    padding: 15px;
  }

  .AccountLoginActions {
    align-items: stretch;
    flex-direction: column;
  }

  .AccountLoginActions button,
  .AccountLoginCard--create button {
    width: 100%;
  }

  .BoxContent > form[action*="account/manage"] .TableContent > tbody > tr,
  .BoxContent > form[action*="account/manage"] .TableContent > tbody > tr > td:first-child table tr {
    grid-template-columns: 1fr;
  }

  .BoxContent > form[action*="account/manage"] .TableContent > tbody > tr > td,
  .BoxContent > form[action*="account/manage"] + br + div + .TableContainer .TableContent > tbody > tr > td {
    padding: 14px !important;
  }

  #LoginFormButtonCell > div {
    justify-items: stretch;
  }

  #ArtworkHelper {
    padding: 12px;
    overflow-x: hidden;
  }

  #MobileFixedChrome {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 0;
    z-index: 12000;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }

  #MobileFixedChrome[hidden] {
    display: none !important;
  }

  .MobileHeader__brand {
    position: absolute;
    top: max(10px, env(safe-area-inset-top, 0px));
    left: 50%;
    right: auto;
    bottom: auto;
    z-index: 1;
    display: block;
    width: fit-content;
    max-width: min(406px, 78vw);
    margin: 0;
    padding: 0;
    pointer-events: none;
    opacity: 1;
    visibility: visible;
    transform: translate3d(-50%, 0, 0);
    -webkit-transform: translate3d(-50%, 0, 0);
    transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s ease;
  }

  #MobileFixedChrome.is-scrolled-away .MobileHeader__brand,
  body.is-mobile-nav-open #MobileFixedChrome .MobileHeader__brand {
    opacity: 0;
    visibility: hidden;
    transform: translate3d(-50%, -10px, 0);
    -webkit-transform: translate3d(-50%, -10px, 0);
  }

  body.is-mobile-nav-open #MobileFixedChrome .MobileHeader__brand img {
    pointer-events: none;
  }

  .MobileHeader__brand img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 76px;
    margin: 0 auto;
    object-fit: contain;
    object-position: center center;
    pointer-events: auto;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.38));
  }

  #ContentRow {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 0;
  }

  .MobileHeader {
    position: relative;
    z-index: 1100;
    display: block;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    pointer-events: none;
  }

  .MobileTopBar {
    display: flex;
    position: sticky;
    top: 12px;
    z-index: 13001;
    align-items: center;
    width: fit-content;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: auto;
  }

  .MobileTopBar__toggle {
    display: grid;
    gap: 5px;
    justify-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(255, 220, 128, 0.28);
    border-radius: 10px;
    background:
      linear-gradient(135deg, rgba(18, 44, 38, 0.96), rgba(10, 24, 22, 0.98)),
      #0d1f1c;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
    cursor: pointer;
  }

  .MobileTopBar__bar {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: #fff3c4;
    transition: transform 0.22s ease, opacity 0.22s ease, width 0.22s ease;
  }

  body.is-mobile-nav-open .MobileTopBar__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  body.is-mobile-nav-open .MobileTopBar__bar:nth-child(2) {
    opacity: 0;
    width: 0;
  }

  body.is-mobile-nav-open .MobileTopBar__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .MobileNavOverlay {
    position: fixed;
    inset: 0;
    z-index: 1190;
    background: rgba(4, 10, 9, 0.62);
    backdrop-filter: blur(2px);
  }

  .MobileNavOverlay[hidden] {
    display: none !important;
  }

  body.is-mobile-nav-open .MobileNavOverlay {
    display: block !important;
  }

  #MenuColumn {
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 1200;
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    width: min(320px, 88vw) !important;
    max-width: 88vw !important;
    height: 100dvh;
    margin: 0 !important;
    padding: 12px 12px 24px;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid rgba(255, 220, 128, 0.22);
    background:
      linear-gradient(180deg, rgba(10, 28, 25, 0.98), rgba(6, 18, 16, 0.99)),
      #081412;
    box-shadow: 18px 0 40px rgba(0, 0, 0, 0.42);
    transform: translateX(-108%);
    transition: transform 0.28s ease;
    -webkit-overflow-scrolling: touch;
  }

  body.is-mobile-nav-open #MenuColumn {
    transform: translateX(0);
  }

  .MobileDrawerHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 2px 8px;
    border-bottom: 1px solid rgba(255, 220, 128, 0.16);
    color: #fff3c4;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.05rem;
    font-weight: 900;
    text-transform: uppercase;
  }

  .MobileDrawerHeader__close {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 220, 128, 0.28);
    border-radius: 8px;
    color: #fff3c4;
    background: rgba(255, 244, 209, 0.08);
    font-size: 1rem;
    cursor: pointer;
  }

  #ContentColumn,
  #ThemeboxesColumn {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #ContentColumn {
    order: 1;
  }

  #ThemeboxesColumn {
    order: 2;
  }

  #LeftArtwork {
    display: none !important;
  }

  #Loginbox,
  .SmallMenuBox#DownloadBox,
  .LanguageSwitcher {
    width: 100% !important;
    max-width: 100% !important;
  }

  #Menu {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0;
    gap: 0;
  }

  #Menu .menuitem {
    border-bottom: 1px solid rgba(255, 220, 128, 0.1);
  }

  #Menu .MenuButton {
    width: 100% !important;
    max-width: 100% !important;
    height: 50px;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
  }

  #Menu .MenuButton:hover {
    background: rgba(255, 244, 209, 0.06) !important;
    filter: none;
  }

  #Menu .MenuButton .Icon {
    top: 9px;
    left: 0;
    width: 28px;
    height: 28px;
  }

  #Menu .MenuButtonText {
    right: 36px;
    left: 38px;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
  }

  #Menu .Extend {
    top: 16px;
    right: 4px;
    width: 18px;
    height: 18px;
    background-size: 14px 14px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    filter: none;
    opacity: 0.9;
  }

  #Menu .Submenu {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: rgba(0, 0, 0, 0.18);
    box-shadow: none;
  }

  #Menu .Submenuitem {
    min-height: 42px;
    padding-left: 12px;
    background: transparent !important;
  }

  #Menu .Submenuitem:hover {
    background: rgba(20, 67, 63, 0.55) !important;
  }

  #Menu .SubmenuitemLabel {
    padding-left: 28px;
    font-size: 0.8rem;
  }

  #Menu .ActiveSubmenuItemIcon {
    left: 10px;
  }

  .GameHero {
    flex-direction: column;
    justify-content: flex-end;
    min-height: 360px;
    margin-right: 0;
    margin-left: 0;
  }

  .GameHero::before {
    background:
      linear-gradient(180deg, rgba(7, 17, 18, 0.62), rgba(7, 17, 18, 0.92)),
      linear-gradient(90deg, rgba(8, 18, 16, 0.74), rgba(8, 18, 16, 0.28));
  }

  .GameHero__content {
    padding: 22px;
  }

  .GameHero h1 {
    font-size: 2.25rem;
  }

  .GameHero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .GameHero__button {
    width: 100%;
  }

  .GameHero__status {
    position: relative;
    right: auto;
    bottom: auto;
    align-self: flex-start;
    margin: 16px 0 22px 22px;
  }

  .InfoBar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 4px;
    justify-content: center;
  }

  .InfoBarItem {
    flex: 0 0 auto;
    gap: 0;
    min-width: 36px;
    min-height: 36px;
    justify-content: center;
    padding: 6px 8px;
    border-right: 1px solid rgba(255, 220, 128, 0.14);
  }

  .InfoBarItem:last-of-type {
    border-right: 0;
  }

  .InfoBarItem .InfoBarSmallElement {
    display: none;
  }

  .InfoBarItem .InfoBarBigLogo {
    width: 20px;
    height: 20px;
    margin: 0 !important;
  }

  .InfoBarOnline {
    width: 100%;
    justify-content: center;
    margin-left: 0;
  }

  .ShopHero {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px;
  }

  .ShopHero h2 {
    font-size: 1.68rem;
  }

  .ShopHero__wallet {
    min-width: 0;
  }

  .ShopCheckout__hero,
  .ShopCheckout__grid {
    grid-template-columns: 1fr;
  }

  .ShopCheckoutOffer {
    grid-row: auto;
  }

  .ShopPopular__grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  .ShopGrid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }

  .ShopPopularCard {
    grid-template-columns: auto minmax(56px, 72px) minmax(100px, 1fr);
  }

  .ShopHistory__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .ShopHistory__link {
    width: 100%;
  }

  .ShopHistoryCard {
    grid-template-columns: 1fr;
  }

  .ShopHistoryCard__people,
  .ShopHistoryCard__dates {
    grid-template-columns: 1fr 1fr;
  }

  .Content .BoxContent > div[style*="text-align: center"]:has(h1) ~ table tr:not(:first-child) {
    grid-template-columns: 1fr;
  }

  .offer_table,
  .offer_table tbody,
  .offer_table tr,
  .offer_table td {
    display: block;
    width: 100% !important;
  }

  .offer_table tr {
    margin-bottom: 12px;
    border: 1px solid rgba(255, 220, 128, 0.18);
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(29, 47, 38, 0.96), rgba(10, 21, 20, 0.98));
  }

  .offer_table td,
  .offer_table td:first-child,
  .offer_table td:last-child {
    border: 0;
    border-radius: 0;
    text-align: center !important;
  }

  .offer_table td:nth-child(2) {
    text-align: left !important;
  }

  .offer_table input[type="submit"],
  .offer_table input[type="button"],
  .offer_table button {
    width: 100%;
  }

  .Content .BoxContent .TableContainer .TableContent,
  .Content .BoxContent .TableContainer .TableContent tbody,
  .Content .BoxContent .TableContainer .TableContent tr,
  .Content .BoxContent .TableContainer .TableContent td {
    display: block;
    width: 100% !important;
  }

  .Content .BoxContent .TableContainer .TableContent tr {
    border-bottom: 1px solid rgba(83, 58, 34, 0.16);
  }

  .Content .BoxContent .TableContainer .TableContent td {
    border: 0 !important;
  }

  .Content .BoxContent .LabelV,
  .Content .BoxContent .LabelV80,
  .Content .BoxContent .LabelV100,
  .Content .BoxContent .LabelV120,
  .Content .BoxContent .LabelV150,
  .Content .BoxContent .LabelV175,
  .Content .BoxContent .LabelV200,
  .Content .BoxContent .LabelV250 {
    min-width: 0;
    padding-bottom: 2px !important;
  }

  .InnerTableButtonRow > tbody > tr {
    display: grid;
    grid-template-columns: 1fr;
  }

  .Content .BoxContent .BigButton,
  .Content .BoxContent .BigButtonText {
    width: 100% !important;
  }

  .premiumbenefits > div {
    min-width: 100%;
  }

  #createaccount {
    max-width: 100%;
  }

  .AccountCreateHint {
    max-width: 100%;
    padding: 16px;
  }

  .AccountCreateHint h1 {
    font-size: 23px;
  }

  #createaccount .TableContent > tbody > tr {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  #createaccount input[type="text"],
  #createaccount input[type="password"],
  #createaccount select {
    width: 100% !important;
  }

  #createaccount .vocation-container {
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  }

  #createaccount .vocation-option label {
    min-height: 116px;
  }

  .Content .BoxContent > form[action*="account/lost"] {
    gap: 10px;
    margin-top: 10px;
  }

  .Content .BoxContent > form[action*="account/lost"]::before {
    padding: 13px 12px;
    font-size: 1.26rem;
  }

  .Content .BoxContent > form[action*="account/lost"] td {
    padding: 11px !important;
  }

  .LostAccountChoice__card {
    font-size: 0.9rem;
    padding: 11px 48px 11px 12px;
  }

  #Themeboxes {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .rank,
  .discord,
  .donate,
  .searchchar,
  .serversave,
  .rashid,
  .daily-monster,
  .Themebox {
    width: 100% !important;
  }
}

@media (max-width: 520px) {
  #ArtworkHelper {
    padding: 10px;
  }

  .Content .Box {
    margin-right: 0;
    margin-left: 0;
  }

  .Content .BoxContent {
    padding: 13px;
    font-size: 0.86rem;
  }

  .Content .BoxContent td,
  .Content .BoxContent th {
    font-size: 0.80rem;
  }

  .Content .Title {
    left: 12px;
    max-width: calc(100% - 24px);
  }

  .GameHero {
    min-height: 330px;
  }

  .GameHero__content {
    padding: 18px;
  }

  .GameHero h1 {
    font-size: 2rem;
  }

  .GameHero p {
    font-size: 0.92rem;
  }

  .InfoBar {
    gap: 8px;
  }

  .InfoBarItem {
    max-width: 100%;
  }

  .ShopHero {
    padding: 16px;
  }

  .ShopHero h2 {
    font-size: 1.45rem;
  }

  .ShopTabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .ShopTabs__item {
    justify-content: center;
    text-align: center;
  }

  .ShopPopular__grid,
  .ShopGrid {
    grid-template-columns: 1fr;
  }

  .ShopPopularCard {
    grid-template-columns: auto minmax(56px, 72px) minmax(0, 1fr);
  }

  .ShopHistory__header h1 {
    font-size: 1.45rem;
  }

  .ShopHistory__sectionHeader {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .ShopHistoryCard__people,
  .ShopHistoryCard__dates {
    grid-template-columns: 1fr;
  }

  .CharacterHero {
    padding: 12px;
  }

  .CharacterHero__name h1 {
    font-size: 1.4rem;
  }

  .CharacterHero__stats {
    grid-template-columns: 1fr;
  }

  .CharacterHero__stats strong {
    font-size: 0.84rem;
  }

  .CharacterInfoGrid {
    grid-template-columns: 1fr;
  }

  .CharacterEquipment {
    grid-template-columns: repeat(3, 40px);
  }

  .CharacterEquipment > div {
    width: 40px;
    height: 40px;
  }

  #Themeboxes {
    grid-template-columns: 1fr;
  }
}