/* ============================================================
   AeloriaOT - Medieval MMORPG Theme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Rajdhani:wght@400;500;600;700&family=IM+Fell+English:ital@0;1&display=swap');

/* ---- CSS Variables — AeloriaOT Golden Royal ---- */
:root {
  /* Pergaminho dourado — quente, luminoso */
  --parchment:       #f5eacc;
  --parchment-dark:  #e8d8a8;
  --parchment-mid:   #d8c888;
  --parchment-deep:  #c0a860;

  /* Azul royal profundo */
  --wood-dark:       #0a1428;
  --wood-mid:        #0e1e3a;
  --wood-light:      #1a2e58;

  /* Azul royal — cor primária */
  --royal:           #0e2254;
  --royal-dark:      #08162e;
  --royal-deep:      #04080f;
  --royal-light:     #1a3a7a;
  --royal-bright:    #2a50a0;

  /* Dourado vivo — como na imagem */
  --gold:            #d4a020;
  --gold-light:      #f0c030;
  --gold-bright:     #ffe060;
  --gold-dark:       #a87810;
  --gold-glow:       #ffe060;

  /* Texto */
  --text-main:       #0e1828;
  --text-mid:        #1e2e48;
  --text-dim:        #4a5e78;
  --text-light:      #f8f0d8;
  --text-link:       #0e2254;
  --text-link-hover: #2a50a0;

  /* Bordas */
  --border-wood:     #0e2254;
  --border-inner:    #c8b070;
  --border-panel:    #8a7040;
  --border-gold:     #d4a020;

  /* Backgrounds */
  --bg-page:         #04080f;
  --box-bg:          #f5eacc;
  --box-inner:       #e8d8a8;
  --box-header-from: #0e2254;
  --box-header-to:   #04080f;
  --panel-bg:        #e8d8a8;
  --panel-mid:       #f5eacc;

  /* Aliases */
  --royal-blue:      #0e2254;
  --royal-blue-dark: #08162e;
  --royal-blue-deep: #04080f;
  --royal-blue-light:#1a3a7a;
  --crimson:         #0e2254;
  --crimson-dark:    #08162e;
  --crimson-deep:    #04080f;
  --crimson-light:   #1a3a7a;

  /* Status */
  --color-success:   #1a6b2a;
  --color-danger:    #8b1a1a;
  --color-warning:   #c87808;

  --shadow: 2px 2px 10px rgba(0,0,0,0.6);
  --shadow-deep: 0 6px 24px rgba(0,0,0,0.7);
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scrollbar-color: var(--gold) var(--wood-dark);
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 8px; background: var(--wood-dark); }
::-webkit-scrollbar-thumb { background: var(--wood-mid); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-page) !important;
  background-image:
    linear-gradient(180deg,
      rgba(4,8,15,0.72) 0%,
      rgba(6,12,24,0.55) 30%,
      rgba(6,12,24,0.55) 70%,
      rgba(4,8,15,0.80) 100%),
    url('../images/bg_aeloria_royal.png') !important;
  background-size: cover !important;
  background-position: center top !important;
  background-attachment: fixed !important;
  font-family: 'Rajdhani', 'Verdana', sans-serif;
  color: var(--text-main);
  overflow-x: hidden;
  font-size: 12px;
  line-height: 1.4;
}

/* ---- Bodycontainer ---- */
#ArtworkHelper {
  min-width: 1000px;
  text-align: center;
  background: none !important;
}

#Bodycontainer {
  min-width: 1000px;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto !important;
  padding: 0;
  display: block !important;
  position: relative;
  z-index: 1;
}

/* ============================================================
   HERO BANNER
   ============================================================ */
#SiteHeroBanner {
  position: relative;
  width: 100%;
  height: 170px;
  background: transparent;
  border: 0;
  overflow: hidden;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}
#SiteHeroBanner::before {
  display: none;
}
#SiteHeroBanner::after {
  display: none;
}
#HeroTitle {
  position: relative;
  text-align: center;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.hero-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  cursor: pointer;
}
.hero-logo-link:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 4px;
}

/* Coroa grande acima do nome */
.hero-crown-wrap {
  margin-bottom: -4px;
  filter: drop-shadow(0 0 14px rgba(212,160,32,0.8)) drop-shadow(0 2px 6px rgba(0,0,0,0.9));
  animation: crownFloat 3.5s ease-in-out infinite;
}
.hero-crown-svg {
  width: 100px;
  height: 67px;
  display: block;
}
@keyframes crownFloat {
  0%,100% { transform: translateY(0px); filter: drop-shadow(0 0 12px rgba(212,160,32,0.7)) drop-shadow(0 2px 6px rgba(0,0,0,0.9)); }
  50%      { transform: translateY(-4px); filter: drop-shadow(0 0 24px rgba(255,224,80,1.0)) drop-shadow(0 2px 6px rgba(0,0,0,0.9)); }
}

/* Nome com ornamentos laterais */
.hero-name-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-ornament-left,
.hero-ornament-right {
  width: 70px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.85;
}

#HeroTitle .server-name {
  font-family: 'Cinzel', serif;
  font-size: 48px;
  font-weight: 900;
  letter-spacing: 6px;
  text-transform: uppercase;
  background: linear-gradient(180deg,
    #fffce8 0%,
    #ffe878 15%,
    #f0c030 35%,
    #d4a020 55%,
    #a87810 75%,
    #7a5808 90%,
    #5a3a04 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: titleShimmer 4s ease-in-out infinite;
  line-height: 1;
  text-shadow: none;
}
@keyframes titleShimmer {
  0%,100% { filter: drop-shadow(0 2px 8px rgba(212,160,32,0.5)); }
  50%      { filter: drop-shadow(0 2px 20px rgba(255,224,80,0.9)) drop-shadow(0 0 40px rgba(212,160,32,0.5)); }
}

/* Ícones medievais abaixo do nome */
.hero-icons-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
.hero-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 5px rgba(212,160,32,0.6));
  transition: filter 0.3s;
  animation: iconPulse 4s ease-in-out infinite;
}
.hero-icon-crown {
  width: 28px;
  height: 28px;
  animation: iconPulse 4s ease-in-out infinite 0.5s;
}
.hero-icon:hover {
  filter: drop-shadow(0 0 12px rgba(255,224,80,1.0));
}
.hero-icon-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.6;
  box-shadow: 0 0 4px var(--gold);
}
@keyframes iconPulse {
  0%,100% { opacity: 0.85; }
  50%      { opacity: 1.0; filter: drop-shadow(0 0 9px rgba(255,224,80,0.9)); }
}

/* Manter compatibilidade com hero-divider se existir */
.hero-divider { display: none; }
.server-tagline { display: none; }

/* ============================================================
   LAYOUT COLUMNS
   ============================================================ */
#ContentRow {
  position: relative !important;
  top: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  width: 100% !important;
  padding: 10px !important;
  gap: 10px !important;
  animation: pageIn 0.35s ease forwards;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
#MenuColumn {
  position: relative !important;
  left: auto !important; top: auto !important; bottom: auto !important;
  float: none !important;
  width: 195px !important;
  min-width: 195px !important;
  max-width: 195px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 195px !important;
  font-family: 'Rajdhani', sans-serif;
  order: 1;
}
#ContentColumn {
  position: relative !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  order: 2;
}
#ThemeboxesColumn {
  position: relative !important;
  top: auto !important; right: auto !important; left: auto !important;
  float: none !important;
  width: 195px !important;
  min-width: 195px !important;
  max-width: 195px !important;
  margin: 0 !important;
  flex: 0 0 195px !important;
  text-align: left !important;
  order: 3;
}

/* ============================================================
   LEFT ARTWORK (Logo)
   ============================================================ */
#LeftArtwork {
  position: relative !important;
  top: auto !important; left: auto !important;
  width: 100% !important;
  height: auto !important;
  margin-bottom: 6px;
  text-align: center;
  cursor: pointer;
}
#LeftArtwork #TibiaLogoArtworkTop {
  position: relative !important;
  top: auto !important; left: auto !important;
  width: 175px !important;
  height: 175px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
  transition: filter 0.3s ease;
  cursor: pointer;
  display: block !important;
  margin: 0 auto !important;
}
#LeftArtwork #TibiaLogoArtworkTop:hover {
  filter: drop-shadow(0 2px 16px rgba(212,160,32,0.5));
}
#LeftArtwork #LogoLink { display: none !important; }

/* ============================================================
   LOGIN BOX  — estilo RubinOT
   ============================================================ */
#Loginbox {
  position: relative !important;
  left: auto !important; top: auto !important;
  width: 100% !important;
  margin-bottom: 6px !important;
  background: linear-gradient(180deg, #0e2254 0%, #04080f 100%) !important;
  border: 1px solid var(--gold-dark) !important;
  border-radius: 3px !important;
  padding: 8px !important;
  overflow: hidden !important;
  box-shadow: var(--shadow);
}
#Loginbox::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
  pointer-events: none;
}
#Loginbox #LoginTop,
#Loginbox #LoginBottom,
#Loginbox .LoginBorder,
#Loginbox #LoginButtonOver,
#Loginbox .Button,
#Loginbox div[style*="clear"] { display: none !important; }

#Loginbox #LoginButtonContainer {
  position: relative !important;
  left: auto !important;
  width: 100% !important;
  height: auto !important;
  background: none !important;
  background-image: none !important;
  margin-bottom: 6px !important;
  padding: 0 !important;
}
#Loginbox #LoginButton > div {
  width: 100% !important; height: 38px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  position: relative !important; top: auto !important; left: auto !important;
  background: none !important; background-image: none !important;
}
#Loginbox #LoginButton #ButtonText {
  position: relative !important;
  top: auto !important; left: auto !important;
  width: 120px !important; height: 20px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
#Loginbox .Loginstatus {
  position: relative !important;
  top: auto !important; left: auto !important;
  width: 100% !important; height: auto !important;
  background: none !important; background-image: none !important;
  padding: 0 !important;
}
#Loginbox #LoginstatusText_2 {
  width: 100% !important; height: 34px !important;
  background: linear-gradient(180deg, #1a4a8a 0%, #112d5c 100%) !important;
  background-image: none !important;
  border: 1px solid var(--royal-blue-deep) !important;
  border-radius: 3px !important;
  cursor: pointer;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: all 0.2s ease;
  position: relative !important; top: auto !important; left: auto !important;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
#Loginbox #LoginstatusText_2::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  pointer-events: none;
}
#Loginbox #LoginstatusText_2:hover {
  background: linear-gradient(180deg, #2a5aaa 0%, #1a3d74 100%) !important;
}
#Loginbox #LoginstatusText_2_1,
#Loginbox #LoginstatusText_2_2 { display: none !important; }
#Loginbox #LoginstatusText_2[data-label]::after {
  content: attr(data-label);
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #a0c4f0;
  pointer-events: none;
}
#Loginbox #LoginstatusText_2.login-state-logout {
  background: linear-gradient(180deg, #6a1a1a 0%, #3d0f0f 100%) !important;
  border-color: rgba(140,30,30,0.6) !important;
}
#Loginbox #LoginstatusText_2.login-state-logout[data-label]::after { color: #f0a0a0; }
#Loginbox #LoginstatusText_2.login-state-logout:hover {
  background: linear-gradient(180deg, #8a2020 0%, #4d1414 100%) !important;
}

/* ============================================================
   DOWNLOAD BOX
   ============================================================ */
.SmallMenuBox#DownloadBox {
  position: relative !important;
  left: auto !important; top: auto !important;
  width: 100% !important;
  margin-bottom: 6px !important;
  background: linear-gradient(180deg, #1a5528 0%, #0d3d18 100%) !important;
  border: 1px solid #1a5528 !important;
  border-radius: 3px !important;
  padding: 8px !important;
  overflow: hidden !important;
  box-shadow: var(--shadow);
}
.SmallMenuBox#DownloadBox::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(80,200,80,0.5), transparent);
  pointer-events: none;
}
.SmallMenuBox .SmallBoxTop,
.SmallMenuBox .SmallBoxBorder,
.SmallMenuBox .SmallBoxBottom,
.SmallMenuBox .BorderRight,
.SmallMenuBox .MediumButtonOver { display: none !important; }
.SmallMenuBox .SmallBoxButtonContainer {
  position: relative !important; left: auto !important;
  width: 100% !important; height: auto !important;
  background: none !important; background-image: none !important;
  padding: 0 !important;
}
#PlayNowContainer {
  position: relative !important;
  top: auto !important; left: auto !important;
  width: 100% !important; height: auto !important;
}
.MediumButtonBackground {
  width: 100% !important;
  height: 38px !important;
  background: linear-gradient(180deg, #2e7d32 0%, #1b5e20 50%, #0d3d0d 100%) !important;
  background-image: none !important;
  border: 1px solid #4caf50 !important;
  border-radius: 3px !important;
  position: relative !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.5);
}
.MediumButtonBackground:hover {
  background: linear-gradient(180deg, #388e3c 0%, #2e7d32 50%, #1b5e20 100%) !important;
  border-color: #66bb6a !important;
}
.MediumButtonText {
  position: relative !important;
  top: auto !important; left: auto !important;
  width: 120px !important; height: 20px !important;
  object-fit: contain !important;
  display: block !important;
  border: none !important; background: none !important;
}

/* ============================================================
   MENU — Pergaminho Medieval
   ============================================================ */
#Menu {
  position: relative !important;
  left: auto !important;
  background: none !important;
  width: 100%;
}
#MenuTop, #MenuBottom { display: none !important; }

.menuitem {
  margin-bottom: 5px;
  position: relative;
}

/* === BOTÃO PRINCIPAL — Pergaminho Escuro === */
.MenuButton {
  width: 100% !important;
  height: auto !important;
  background: linear-gradient(180deg,
    #1a3a7a 0%,
    #0e2254 35%,
    #081838 70%,
    #04080f 100%) !important;
  border: 1px solid #4a2e08 !important;
  border-top: 1px solid #d8c090 !important;
  border-bottom: 2px solid var(--gold) !important;
  border-radius: 3px !important;
  padding: 8px 9px 8px 10px !important;
  cursor: pointer;
  transition: background 0.2s ease, filter 0.2s ease;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(240,192,48,0.3),
    inset 0 -2px 0 rgba(0,0,0,0.5),
    0 2px 8px rgba(0,0,0,0.6),
    0 0 1px rgba(212,160,32,0.4);
}

/* Linha de luz no topo — efeito couro/madeira */
.MenuButton::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(240,192,48,0.9) 50%, transparent 95%);
  pointer-events: none;
}

/* Faixa lateral vermelha escura — lacre medieval */
.MenuButton::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0; width: 3px;
  background: linear-gradient(180deg,
    #f0c030 0%,
    #d4a020 40%,
    #a87810 70%,
    #f0c030 100%);
  pointer-events: none;
}

.MenuButton:hover {
  background: linear-gradient(180deg,
    #2a50a0 0%,
    #1a3a7a 35%,
    #0e2254 70%,
    #081838 100%) !important;
  filter: brightness(1.1);
}

/* Submenu aberto */
.menuitem:has(.Submenu[style*="display: block"]) .MenuButton,
.menuitem:has(.Submenu[style*="visibility: visible"]) .MenuButton {
  background: linear-gradient(180deg,
    #b89858 0%,
    #9a7838 40%,
    #7a5820 100%) !important;
  border-bottom: 2px solid #2e1a5a !important;
  border-radius: 3px 3px 0 0 !important;
}

.MenuButton > div:first-child,
.MenuButton .Lights,
.MenuButton .light_lu,
.MenuButton .light_ld,
.MenuButton .light_ru { display: none !important; }
.LeftChain, .RightChain { display: none !important; }

/* === ÍCONE === */
.Icon.ModernIcon {
  position: relative !important;
  top: auto !important; left: auto !important;
  width: 22px !important; height: 22px !important;
  flex-shrink: 0;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)) saturate(1.1);
  transition: filter 0.2s;
}
.MenuButton:hover .Icon.ModernIcon {
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.7)) saturate(1.3) brightness(1.1);
}

/* === LABEL === */
.Label.ModernLabel {
  background-image: none !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  width: auto !important;
  flex: 1 !important;
  font-family: 'Cinzel', serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #f8f0d8 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-shadow:
    0 1px 3px rgba(0,0,0,0.9),
    0 0 12px rgba(240,192,48,0.2) !important;
  padding: 0 !important;
  position: relative !important;
  top: auto !important; left: auto !important;
}
.MenuButton:hover .Label.ModernLabel {
  color: #ffe060 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 14px rgba(255,224,96,0.4) !important;
}
.menuitem .Submenu:not([style*="display: none"]) ~ span .Label.ModernLabel,
.menuitem .Submenu[style*="visibility: visible"] .Label.ModernLabel {
  color: #ffe060 !important;
  text-shadow: 0 0 12px rgba(255,224,96,0.5) !important;
}

.Lights { display: none !important; }

/* === SETA EXTEND === */
.MenuButton .Extend {
  position: relative !important;
  top: auto !important; right: auto !important;
  transform: none !important;
  width: 14px !important; height: 14px !important;
  background-image: none !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
  transition: transform 0.25s ease;
}
.MenuButton .Extend::after {
  content: '▾' !important;
  color: #c8b070 !important;
  font-size: 14px !important;
  position: static !important;
  line-height: 1;
  transition: color 0.2s;
}
.MenuButton:hover .Extend::after { color: #ffe060 !important; }

/* === SUBMENUS — Pergaminho === */
.Submenu {
  background: linear-gradient(180deg,
    #f0e6d2 0%,
    #eadec8 40%,
    #e4d8bc 100%) !important;
  border: 1px solid #8b6340 !important;
  border-top: none !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 0 4px 4px !important;
  box-shadow:
    0 3px 8px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.4);
  overflow: hidden;
  position: relative;
}

/* Textura de pergaminho — borda lateral esquerda decorativa */
.Submenu::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg,
    #c4a24d,
    #8b6340 30%,
    #c4a24d 60%,
    #8b6340);
  opacity: 0.5;
  pointer-events: none;
}

.Submenuitem {
  position: relative !important;
  margin: 0 !important; padding: 0 !important;
}

/* Separador entre itens */
.Submenuitem + .Submenuitem .SubmenuitemLabel {
  border-top: none !important;
}

.ActiveSubmenuItemIcon {
  left: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 5px !important; height: 5px !important;
  background: #8b1a1a !important;
  border-radius: 50% !important;
  background-image: none !important;
  box-shadow: 0 0 4px rgba(139,26,26,0.5);
}

.SubmenuitemLabel {
  padding: 8px 10px 8px 20px !important;
  border-bottom: 1px solid rgba(139,99,64,0.25) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #3d2314 !important;
  letter-spacing: 0.3px !important;
  transition: color 0.15s, background 0.15s, padding-left 0.15s;
  position: relative;
}

/* Ornamento à esquerda no hover */
.SubmenuitemLabel::before {
  content: '›';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #c4a24d;
  font-size: 14px;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.15s, left 0.15s;
}

.Submenuitem:hover .SubmenuitemLabel {
  color: #1e5799 !important;
  background: rgba(30,87,153,0.08) !important;
  padding-left: 24px !important;
}
.Submenuitem:hover .SubmenuitemLabel::before {
  opacity: 1;
  left: 10px;
}
.Submenuitem:last-child .SubmenuitemLabel {
  border-bottom: none !important;
}

.Submenu a { text-decoration: none !important; }
.Submenu a:link, .Submenu a:visited, .Submenu a:focus { color: #3d2314 !important; }
.Submenu a:hover { color: #1e5799 !important; }

/* ============================================================
   CONTENT BOXES — pergaminho medieval
   ============================================================ */
.Content .Box {
  font-size: 0pt;
  position: relative;
  margin: 0 0 8px 0 !important;
  border: 1px solid var(--border-wood) !important;
  background: var(--box-bg) !important;
  border-radius: 3px;
  overflow: visible;
  box-shadow: var(--shadow);
}
.Content .Corner-tl, .Content .Corner-tr,
.Content .Corner-bl, .Content .Corner-br,
.Content .CornerWrapper-b { display: none !important; }
.Content .Border_1 { display: none !important; }

.Content .BorderTitleText {
  background: linear-gradient(180deg, var(--box-header-from) 0%, var(--box-header-to) 100%) !important;
  border-bottom: 1px solid var(--royal-blue-deep) !important;
  height: 30px !important;
  position: relative;
  display: flex;
  align-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  border-radius: 2px 2px 0 0;
}
.Content .Title {
  display: none !important;
}
.Content .ModernPageTitle {
  display: inline-flex !important;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  color: #fff4d3 !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.85);
  background: transparent !important;
  border: 0 !important;
}
.Content .ModernTitleIcon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 18px;
  margin-right: 7px;
  color: #fff4d3 !important;
  font-size: 14px !important;
}
.Content .Border_2 {
  margin: 2px !important; padding: 0 !important;
  background: var(--border-inner) !important;
  border-radius: 2px;
}
.Content .Border_3 {
  margin: 1px !important;
  border-top: 1px solid var(--border-inner) !important;
  border-bottom: 1px solid var(--border-inner) !important;
}
.Content .BoxContent {
  font-family: 'Rajdhani', 'Verdana', sans-serif !important;
  font-size: 13px !important;
  background: var(--box-bg) !important;
  background-image: none !important;
  color: var(--text-main) !important;
  min-height: 200px !important;
  padding: 10px !important;
  border-radius: 0 0 2px 2px;
}

/* Info Bar */
.InfoBar {
  position: relative !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 0 4px !important;
  font-family: 'Rajdhani', sans-serif !important;
  color: var(--text-light) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  overflow: hidden !important;
}
.InfoBarBigLogo {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  object-fit: contain;
  border: 0 !important;
  flex: 0 0 auto;
}
.InfoBar a,
.InfoBar a:link,
.InfoBar a:visited {
  color: #fff3cc !important;
  font-size: 12px !important;
  text-decoration: none !important;
}
.InfoBar a:hover {
  color: var(--gold-bright) !important;
  text-decoration: none !important;
}
.InfoBarLinks {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 22px;
  padding: 0 3px;
  border-radius: 2px;
  font-size: 12px !important;
  transition: background 0.18s ease, color 0.18s ease, text-shadow 0.18s ease;
}
.InfoBarLinks:hover {
  background: rgba(212,160,32,0.12);
}
.InfoBarSmallElement {
  margin-left: 5px !important;
  color: #fff4d4 !important;
  font-family: 'Cinzel', 'Verdana', serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0;
  line-height: 1.1;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.95),
    0 0 6px rgba(212,160,32,0.45);
}
.InfoBarLinks:hover .InfoBarSmallElement,
.InfoBarSmallElement a:hover {
  color: var(--gold-bright) !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.95),
    0 0 8px rgba(255,224,96,0.75);
}
.InfoBarNumbers {
  position: static !important;
  top: auto !important;
  color: #fff4d4 !important;
  display: inline-flex;
  align-items: center;
}
.InfoBarStatusBlock {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 8px !important;
  white-space: nowrap;
}
.InfoBarLanguageSwitcher {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-height: 22px !important;
  margin-left: 8px !important;
  padding-left: 9px !important;
  border-left: 1px solid rgba(212,160,32,0.55) !important;
  flex: 0 0 auto !important;
}
.InfoBarLanguage {
  width: 30px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2px !important;
  border: 1px solid transparent !important;
  border-radius: 3px !important;
  background: rgba(4,8,15,0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.InfoBarLanguage:hover,
.InfoBarLanguage.is-active {
  background: rgba(212,160,32,0.18) !important;
  border-color: rgba(255,224,96,0.75) !important;
  transform: translateY(-1px);
}
.InfoBarLanguage img {
  width: 22px !important;
  height: 14px !important;
  display: block !important;
  object-fit: cover !important;
  border: 1px solid rgba(255,244,212,0.55) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.55) !important;
}

/* Tables */
.Content th,
.Content .BoxContent th {
  background: linear-gradient(180deg, var(--box-header-from) 0%, var(--box-header-to) 100%) !important;
  color: var(--text-light) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 6px 8px !important;
  border-bottom: 1px solid var(--royal-blue-deep) !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  letter-spacing: 0.05em;
}
.Content .BoxContent td {
  font-family: 'Rajdhani', 'Verdana', sans-serif !important;
  font-size: 13px !important;
  color: var(--text-main) !important;
}
.Content a { color: var(--text-link) !important; font-family: 'Rajdhani', sans-serif !important; transition: color 0.2s; }
.Content a:hover { color: var(--text-link-hover) !important; text-decoration: none !important; }

.TableContainer { border: 1px solid var(--border-wood) !important; border-radius: 2px; box-shadow: var(--shadow); }
.TableContainer .Odd,
.Content .BoxContent .Odd,
.Content .BoxContent tr.Odd,
.Content .BoxContent tr.Odd td  { background-color: var(--parchment-dark) !important; }
.TableContainer .Even,
.Content .BoxContent .Even,
.Content .BoxContent tr.Even,
.Content .BoxContent tr.Even td { background-color: var(--box-bg) !important; }

.TableContainer .CaptionContainer,
.TableContainer .CaptionContainer .CaptionInnerContainer {
  background: linear-gradient(180deg, var(--box-header-from) 0%, var(--box-header-to) 100%) !important;
}
.TableContainer .CaptionContainer .Text {
  color: var(--text-light) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
}
.TableContentContainer { background-color: var(--box-bg) !important; border-color: var(--border-wood) !important; box-shadow: none !important; }
.TableContent td { border-color: var(--border-inner) !important; }
.Content .BoxContent .Odd  { background-color: var(--parchment-dark) !important; }
.Content .BoxContent .Even { background-color: var(--box-bg) !important; }

/* Cantos decorativos ocultos */
.TableContainer .CaptionContainer .CaptionEdgeLeftTop,
.TableContainer .CaptionContainer .CaptionEdgeRightTop,
.TableContainer .CaptionContainer .CaptionEdgeLeftBottom,
.TableContainer .CaptionContainer .CaptionEdgeRightBottom,
.TableContainer .CaptionContainer .CaptionBorderTop,
.TableContainer .CaptionContainer .CaptionBorderBottom,
.TableContainer .CaptionContainer .CaptionVerticalLeft,
.TableContainer .CaptionContainer .CaptionVerticalRight,
.TableShadowContainerRightTop,
.TableShadowRightTop,
.TableBottomShadow,
.TableShadowContainer { display: none !important; }

.TableContainer .Table1, .TableContainer .Table2,
.TableContainer .Table3, .TableContainer .Table4, .TableContainer .Table5 {
  background-color: var(--box-bg) !important;
  border: 1px solid var(--border-inner) !important;
  width: 100% !important;
}
.TableContainer .Table1 .InnerTableContainer,
.TableContainer .Table2 .InnerTableContainer,
.TableContainer .Table3 .InnerTableContainer,
.TableContainer .Table4 .InnerTableContainer,
.TableContainer .Table5 .InnerTableContainer { background-color: var(--box-bg) !important; }
.TableContainer .Table2 td, .TableContainer .Table3 td,
.TableContainer .Table4 td, .TableContainer .Table5 td {
  border-color: var(--border-inner) !important;
  color: var(--text-main) !important;
}
.TableContentContainer { background-color: var(--box-bg) !important; }
.TableContentAndRightShadow { background-color: var(--box-bg) !important; background-image: none !important; }

.SmallBox .ErrorMessage {
  background: rgba(180,30,30,0.12) !important;
  color: #8b0000 !important;
  border: 1px solid rgba(180,30,30,0.3);
  border-radius: 2px;
  font-family: 'Rajdhani', sans-serif;
}
.SmallBox .Message {
  background: rgba(30,87,153,0.10) !important;
  color: var(--royal-blue-dark) !important;
  border: 1px solid rgba(30,87,153,0.25);
  border-radius: 2px;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================================
   NEWS
   ============================================================ */
.Content #News .NewsHeadlineBackground,
.Content #FeaturedArticle .NewsHeadlineBackground,
.Content #NewsArchive .NewsHeadlineBackground {
  background: linear-gradient(180deg, var(--box-header-from) 0%, var(--box-header-to) 100%) !important;
  border-left: none !important;
  border-right: none !important;
}
.Content #News .NewsHeadlineDate,
.Content #FeaturedArticle .NewsHeadlineDate,
.Content #NewsArchive .NewsHeadlineDate { color: rgba(240,230,210,0.7) !important; font-size: 10pt !important; }
.Content #News .NewsHeadlineText,
.Content #FeaturedArticle .NewsHeadlineText,
.Content #NewsArchive .NewsHeadlineText { color: #f0e6d2 !important; font-family: 'Cinzel', serif !important; font-size: 11px !important; }
.Content #NewsArchive .NewsHeadlineDate { color: var(--text-dim) !important; }

.Content #NewsTicker .BoxContent {
  background: var(--box-bg) !important;
  min-height: 80px !important;
}
.Content #NewsTicker .NewsTickerDate {
  font-size: 10pt !important;
  font-weight: 600 !important;
  color: var(--text-dim) !important;
}
.Content #NewsTicker .NewsTickerShortText,
.Content #NewsTicker .NewsTickerFullText {
  font-size: 11pt !important;
  color: var(--text-main) !important;
}
.Content #NewsTicker .NewsTickerText {
  font-size: 10pt !important;
  color: var(--text-main) !important;
}

/* ============================================================
   RIGHT COLUMN — Creature Box
   ============================================================ */
#RightArtwork { display: none !important; }

#ModernCreatureBox {
  background: linear-gradient(180deg, #0e2254 0%, #04080f 100%);
  border: 1px solid var(--gold-dark);
  border-radius: 3px;
  padding: 8px;
  margin-bottom: 6px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
}
#ModernCreatureBox::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
}
#ModernCreatureBox .mcb-title {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 8px;
  display: block;
  text-shadow: 0 0 8px rgba(255,183,45,0.4);
}
#ModernCreatureBox .mcb-creatures {
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: flex-end;
}
#ModernCreatureBox .mcb-creature-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
#ModernCreatureBox .mcb-creature-wrap > span {
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: rgba(240,230,210,0.75);
  letter-spacing: 1px;
  text-transform: uppercase;
}
#ModernCreatureBox .mcb-label {
  font-family: 'Cinzel', serif;
  font-size: 5.5px;
  font-weight: 600;
  letter-spacing: .2px;
  display: block;
  text-align: center;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#ModernCreatureBox .mcb-label-creature { color: var(--gold-light); text-shadow: 0 0 6px rgba(255,183,45,0.3); }
#ModernCreatureBox .mcb-label-boss     { color: #f09090; text-shadow: 0 0 6px rgba(200,80,80,0.25); }

/* ============================================================
   THEMEBOXES (Highscores, etc.)
   ============================================================ */
#Themeboxes { width: 100%; }

.Themebox {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  top: auto !important;
  margin-bottom: 6px;
  background: linear-gradient(180deg, #0e2254 0%, #04080f 100%);
  border: 1px solid var(--gold-dark);
  border-radius: 3px;
  overflow: hidden;
  padding: 8px;
  box-shadow: var(--shadow);
}
.Themebox::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
}
#Themeboxes div { font-size: 10pt; background-repeat: no-repeat; }
.Themebox .Bottom { display: none !important; }

/* Highscores wrap dentro do Themebox */
.Themebox .hs-wrap {
  margin: -8px !important;
  width: calc(100% + 16px) !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-top: none !important;
}
.Themebox .hs-wrap::before { display: none !important; }

/* ============================================================
   FOOTER
   ============================================================ */
#Footer {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  color: rgba(240,230,210,0.5) !important;
  padding: 16px 0 20px !important;
  border-top: 1px solid rgba(255,255,255,0.1);
  letter-spacing: 1px;
  text-align: center;
}
#Footer a { color: var(--gold-light) !important; }
#Footer a:hover { color: #fff !important; }

/* ============================================================
   BUTTONS
   ============================================================ */
.BigButton, .BigButtonText {
  background: linear-gradient(180deg, var(--box-header-from) 0%, var(--box-header-to) 100%) !important;
  border: 1px solid var(--royal-blue-deep) !important;
  border-radius: 2px !important;
  color: var(--text-light) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* ============================================================
   FORMS
   ============================================================ */
input[type="text"], input[type="password"], input[type="email"],
select, textarea {
  background: var(--parchment-dark) !important;
  border: 1px solid var(--border-wood) !important;
  border-bottom-color: var(--wood-mid) !important;
  color: var(--text-main) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
  padding: 4px 7px !important;
  border-radius: 2px !important;
  outline: none !important;
  transition: border-color 0.2s;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
select:focus, textarea:focus {
  border-color: var(--royal-blue) !important;
  box-shadow: 0 0 5px rgba(30,87,153,0.2) !important;
}
::placeholder { color: #9a8060 !important; opacity: 1; }
::-webkit-input-placeholder { color: #9a8060 !important; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--royal-blue); }
.Content .BoxContent hr {
  border: none !important;
  border-top: 1px solid var(--border-inner) !important;
  margin: 8px 0 !important;
}

/* ============================================================
   CONTENT PAGES overrides
   ============================================================ */
.Content .BoxContent {
  background-color: var(--box-bg) !important;
  background-image: none !important;
  color: var(--text-main) !important;
  font-family: 'Rajdhani', 'Verdana', sans-serif !important;
  font-size: 13px !important;
}
.Content .BoxContent td,
.Content .BoxContent p,
.Content .BoxContent span,
.Content .BoxContent li,
.Content .BoxContent div {
  color: var(--text-main) !important;
  font-family: 'Rajdhani', 'Verdana', sans-serif !important;
  font-size: 13px !important;
}
.Content .BoxContent a,
.Content .BoxContent a:link,
.Content .BoxContent a:visited { color: var(--text-link) !important; text-decoration: none !important; }
.Content .BoxContent a:hover   { color: var(--text-link-hover) !important; text-decoration: underline !important; }

/* Buttons inside content */
.Content .BoxContent input[type="submit"],
.Content .BoxContent input[type="button"],
.Content .BoxContent button,
input[type="submit"], input[type="button"], button {
  background: linear-gradient(180deg, var(--box-header-from) 0%, var(--box-header-to) 100%) !important;
  border: 1px solid var(--royal-blue-deep) !important;
  color: var(--text-light) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
  padding: 6px 14px !important;
  border-radius: 2px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1) !important;
}
.Content .BoxContent input[type="submit"]:hover,
.Content .BoxContent button:hover,
input[type="submit"]:hover, button:hover {
  background: linear-gradient(180deg, #2a6db5 0%, #1e5799 100%) !important;
}

/* Headings */
.Content .BoxContent h1, .Content .BoxContent h2,
.Content .BoxContent h3, .Content .BoxContent h4 {
  color: var(--royal-blue) !important;
  font-family: 'Cinzel', serif !important;
  border-bottom: 1px solid var(--border-inner) !important;
  padding-bottom: 4px !important;
}

/* Color helpers */
.Content .BoxContent td .white,
.Content .BoxContent td .whites,
.Content .BoxContent .white    { color: var(--text-main) !important; }
.Content .BoxContent td .green { color: #1a5528 !important; }
.Content .BoxContent td .yellow{ color: var(--gold-dark) !important; }
.Content .BoxContent td .red   { color: #8b0000 !important; }
.Content .BoxContent td .grey  { color: var(--text-dim) !important; }
.Content .BoxContent td .orange{ color: #b8630a !important; }

.Content .BoxContent .ff_info,
.Content .BoxContent .ff_white,
.Content .BoxContent .ff_whitelarge { color: var(--text-main) !important; }
.Content .BoxContent .ff_red        { color: #8b0000 !important; }
.Content .BoxContent .ff_correct    { color: #1a5528 !important; }
.Content .BoxContent .ff_pagetext,
.Content .BoxContent .ff_pagetextgrey { color: var(--text-dim) !important; }
.Content .BoxContent .ff_pagetextred  { color: #8b0000 !important; }
.Content .BoxContent .ff_infotext,
.Content .BoxContent .ff_smallinfo,
.Content .BoxContent .ff_large { color: var(--text-main) !important; }

.Content .Box .BorderTitleText,
.Content .Box .Title {
  background: linear-gradient(180deg, var(--box-header-from) 0%, var(--box-header-to) 100%) !important;
}

/* SmallBox */
.SmallBox, .SmallBox .ErrorMessage, .SmallBox .Message {
  background: var(--box-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--border-inner) !important;
}
.SmallBox .ErrorMessage { color: #8b0000 !important; border-color: rgba(180,30,30,0.4) !important; }

/* Guilds */
#GuildLogoHolder { background: var(--parchment-dark) !important; border-color: var(--border-wood) !important; }
.Content .BoxContent .GuildLogo { background: var(--parchment-dark) !important; }

/* LabelH */
.LabelH, .LabelH td, td.LabelH, tr .LabelH {
  background: linear-gradient(180deg, var(--box-header-from) 0%, var(--box-header-to) 100%) !important;
  color: var(--text-light) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  border-bottom: 1px solid var(--royal-blue-deep) !important;
  padding: 6px 8px !important;
  white-space: nowrap !important;
}

/* DataTables */
.dataTables_wrapper,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  background: transparent !important;
  color: var(--text-main) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 12px !important;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: var(--parchment-dark) !important;
  border: 1px solid var(--border-wood) !important;
  color: var(--text-main) !important;
  border-radius: 2px !important;
  padding: 3px 6px !important;
}
table.dataTable thead th,
table.dataTable thead td,
table.dataTable tfoot th,
table.dataTable tfoot td {
  background: linear-gradient(180deg, var(--box-header-from) 0%, var(--box-header-to) 100%) !important;
  color: var(--text-light) !important;
  border-bottom: 1px solid var(--royal-blue-deep) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
}
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc { background-color: var(--royal-blue-dark) !important; }
table.dataTable tbody tr { background-color: var(--box-bg) !important; }
table.dataTable tbody tr:nth-child(odd) { background-color: var(--parchment-dark) !important; }
table.dataTable tbody tr:hover { background-color: var(--parchment-mid) !important; }
table.dataTable tbody td {
  color: var(--text-main) !important;
  border-color: var(--border-inner) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: var(--parchment-dark) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-wood) !important;
  border-radius: 2px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--parchment-mid) !important;
  color: var(--royal-blue) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: linear-gradient(180deg, var(--box-header-from) 0%, var(--box-header-to) 100%) !important;
  color: var(--text-light) !important;
  border-color: var(--royal-blue-deep) !important;
}

/* Spells tabs */
.Content .BoxContent .nav-tabs,
.Content .BoxContent .nav-tabs li a,
.Content .BoxContent .spell-filter {
  background: var(--parchment-dark) !important;
  border-color: var(--border-wood) !important;
  color: var(--text-main) !important;
}
.Content .BoxContent a.btn,
.Content .BoxContent .btn {
  background: var(--parchment-dark) !important;
  border: 1px solid var(--border-wood) !important;
  color: var(--text-main) !important;
  border-radius: 2px !important;
  padding: 4px 10px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 12px !important;
  transition: all 0.15s !important;
}
.Content .BoxContent a.btn:hover,
.Content .BoxContent .btn:hover,
.Content .BoxContent a.btn.active,
.Content .BoxContent .btn.active {
  background: linear-gradient(180deg, var(--box-header-from) 0%, var(--box-header-to) 100%) !important;
  border-color: var(--royal-blue-deep) !important;
  color: var(--text-light) !important;
}

/* Topbar Themebox */
#Topbar.Themebox {
  background: linear-gradient(180deg, var(--box-header-from) 0%, var(--box-header-to) 100%) !important;
  border: 1px solid var(--royal-blue-deep) !important;
  border-radius: 3px !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  margin-bottom: 6px !important;
  position: relative !important;
  overflow: hidden !important;
}
#Topbar.Themebox::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
}
#Topbar .top_level {
  position: relative !important;
  top: auto !important; left: auto !important;
  width: 100% !important; height: auto !important;
  padding: 0 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 12px !important;
  color: var(--text-light) !important;
  font-weight: normal !important;
  text-align: left !important;
  background: none !important;
  background-image: none !important;
}

/* ============================================================
   SCROLL + HELPER
   ============================================================ */
.scrollToTop {
  background: linear-gradient(180deg, var(--box-header-from) 0%, var(--box-header-to) 100%) !important;
  border: 1px solid var(--royal-blue-deep) !important;
  border-radius: 3px !important;
  padding: 5px !important;
  transition: all 0.2s !important;
}
.scrollToTop:hover { border-color: var(--gold) !important; }

#HelperDivContainer {
  background: var(--box-bg) !important;
  border: 1px solid var(--border-wood) !important;
  color: var(--text-main) !important;
  box-shadow: var(--shadow-deep) !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) { #ThemeboxesColumn { display: none !important; } }
@media (max-width: 800px)  { #MenuColumn { display: none !important; } }

/* ============================================================
   TABELAS GERAIS — garantir tema pergaminho em todas as páginas
   ============================================================ */
.TableContainer,
.TableContainer .Table1,
.TableContainer .Table2,
.TableContainer .Table3,
.TableContainer .Table4,
.TableContainer .Table5 {
  background-color: var(--box-bg) !important;
  color: var(--text-main) !important;
}
.TableContainer .Table1 tr td,
.TableContainer .Table2 tr td,
.TableContainer .Table3 tr td,
.TableContainer .Table4 tr td,
.TableContainer .Table5 tr td {
  background-color: var(--box-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--border-inner) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
}
.TableContainer .Table1 tr.Odd td,
.TableContainer .Table2 tr.Odd td,
.TableContainer .Table3 tr.Odd td { background-color: var(--parchment-dark) !important; }
.TableContainer .Table1 tr.Even td,
.TableContainer .Table2 tr.Even td,
.TableContainer .Table3 tr.Even td { background-color: var(--box-bg) !important; }

/* Labels de formulário (Email Address, Your Password, etc.) */
.TableContainer .LabelV,
td.LabelV, tr .LabelV {
  background: linear-gradient(180deg, var(--royal) 0%, var(--royal-dark) 100%) !important;
  color: #f0e8d0 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 6px 10px !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6) !important;
}

/* Status Offline/Online na tabela */
.TableContainer .offline, td.offline, .Content .offline { color: #8b3030 !important; font-weight: 700 !important; }
.TableContainer .online,  td.online,  .Content .online  { color: #2a6b2a !important; font-weight: 700 !important; }

/* Força fundo claro em TODAS as td dentro de .Content */
.Content table td,
.Content table tr {
  background-color: transparent !important;
  color: var(--text-main) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
}
.Content table tr.Odd,
.Content table tr.Odd td  { background-color: var(--parchment-dark) !important; }
.Content table tr.Even,
.Content table tr.Even td { background-color: var(--box-bg) !important; }

/* ============================================================
   ELEMENTOS REAIS — Coroas e ornamentos
   ============================================================ */

/* Coroa decorativa antes do título das caixas de conteúdo */
.Content .BorderTitleText::before {
  content: '♛';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--gold-bright);
  opacity: 0.7;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 0 8px rgba(255,208,80,0.5);
}
.Content .Title {
  left: 28px !important;
}

.Content .BorderTitleText::before {
  display: none !important;
}

.Content .Title {
  display: none !important;
}

/* Ornamento dourado nas caixas do highscores e creature */
#ModernCreatureBox::after,
.Themebox::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  pointer-events: none;
}

/* Separador real nos submenus */
.Submenu::after {
  content: '';
  position: absolute;
  bottom: 0; left: 8px; right: 8px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dark), transparent);
  pointer-events: none;
}

/* LabelH com ornamento de coroa */
.LabelH::before,
td.LabelH::before {
  content: '♛ ';
  color: var(--gold-bright);
  opacity: 0.8;
  font-size: 11px;
}

/* Linha dourada no topo da página */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--gold-dark) 10%,
    var(--gold-bright) 35%,
    #fff8a0 50%,
    var(--gold-bright) 65%,
    var(--gold-dark) 90%,
    transparent 100%);
  box-shadow: 0 0 12px rgba(240,192,48,0.5);
  z-index: 9999;
  pointer-events: none;
}

/* Ornamento nos box footers */
.hs-wrap::after {
  content: '♛';
  display: block;
  text-align: center;
  color: var(--gold);
  font-size: 10px;
  padding: 3px 0;
  opacity: 0.5;
  background: var(--parchment-dark);
  border-top: 1px solid var(--border-inner);
}

/* Hover royal no menu item */
.Submenuitem:hover .SubmenuitemLabel::before {
  content: '›';
  color: var(--gold);
}

/* Royal seal no footer */
#Footer::before {
  content: '♛ ';
  color: var(--gold-dark);
  opacity: 0.5;
}
#Footer::after {
  content: ' ♛';
  color: var(--gold-dark);
  opacity: 0.5;
}

/* Highlight dourado em tabelas - primeira coluna número */
.TableContainer .Table1 td:first-child,
.TableContainer .Table2 td:first-child {
  color: var(--gold-dark) !important;
  font-weight: 700 !important;
}

/* Borda dourada nos boxes do conteúdo */
.Content .Box {
  border: 1px solid var(--gold-dark) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(212,160,32,0.08) !important;
}
.Content .Box::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dark), transparent);
  pointer-events: none;
}

/* Logo PNG no hero */
.hero-logo-img {
  display: block;
  max-width: 720px;
  width: 88%;
  min-width: 240px;
  height: auto;
  max-height: 185px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 20px rgba(212,160,32,0.7))
    drop-shadow(0 0 40px rgba(212,160,32,0.35))
    drop-shadow(0 4px 12px rgba(0,0,0,0.9));
  animation: logoShimmer 4s ease-in-out infinite;
  opacity: 1;
  position: relative;
  z-index: 5;
}
.hero-logo-link:hover .hero-logo-img {
  filter:
    drop-shadow(0 0 28px rgba(255,224,80,0.95))
    drop-shadow(0 0 55px rgba(212,160,32,0.5))
    drop-shadow(0 4px 12px rgba(0,0,0,0.9));
}
@keyframes logoShimmer {
  0%,100% {
    filter:
      drop-shadow(0 0 16px rgba(212,160,32,0.6))
      drop-shadow(0 0 32px rgba(212,160,32,0.25))
      drop-shadow(0 4px 12px rgba(0,0,0,0.9));
  }
  50% {
    filter:
      drop-shadow(0 0 28px rgba(255,224,80,0.95))
      drop-shadow(0 0 55px rgba(212,160,32,0.5))
      drop-shadow(0 4px 12px rgba(0,0,0,0.9));
  }
}

/* ============================================================
   FORMULÁRIOS — Account Login / Create Account
   ============================================================ */

/* Labels de campo (Email Address, Your Password) */
td.LabelV,
tr td.LabelV,
.TableContent td.LabelV {
  background: linear-gradient(180deg, #0e2254 0%, #08162e 100%) !important;
  color: #f0e8d0 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 6px 10px !important;
  border-right: 1px solid var(--gold-dark) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
}

/* Botão Create Account e similares — corrigir bug de estilo azul brilhante */
.Content .BoxContent a.Button,
.Content .BoxContent span.Button,
.Content .BoxContent div.Button,
a.Button, span.Button, div.Button,
.TableContent a[class*="Button"],
.TableContent input[type="submit"],
.TableContent input[type="button"],
.TableContent button,
a.button, span.button {
  background: linear-gradient(180deg, #1a3a7a 0%, #0e2254 50%, #081838 100%) !important;
  border: 1px solid var(--gold-dark) !important;
  color: #f0e8d0 !important;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  padding: 7px 16px !important;
  border-radius: 2px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-block !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 4px rgba(0,0,0,0.4) !important;
  transition: all 0.2s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: none !important; /* remove qualquer imagem herdada */
}

.Content .BoxContent a.Button:hover,
a.Button:hover, span.Button:hover,
.TableContent input[type="submit"]:hover,
.TableContent button:hover {
  background: linear-gradient(180deg, #2a50a0 0%, #1a3a7a 50%, #0e2254 100%) !important;
  border-color: var(--gold) !important;
  color: #fff !important;
}

/* Campos de input dentro dos forms de conta */
.TableContent input[type="text"],
.TableContent input[type="password"],
.TableContent input[type="email"] {
  background: #f5eacc !important;
  border: 1px solid var(--gold-dark) !important;
  color: #0e1828 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
  padding: 5px 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ============================================================
   LOGIN PAGE — LabelV e Create Account
   ============================================================ */

/* LabelV — labels do form de login (Email Address, Password) */
td.LabelV,
.TableContent td.LabelV {
  background: linear-gradient(180deg, #0e2254 0%, #081838 100%) !important;
  color: #f0e4cc !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 5px 35px !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7) !important;
  border-right: 1px solid rgba(212,160,32,0.25) !important;
  width: 1% !important;
  text-align: right !important;
}
td.LabelV span,
.TableContent td.LabelV span {
  background: transparent !important;
  color: #f0e4cc !important;
}

/* Botão Create Account — seletor específico do form */
.MediumButtonForm .MediumButtonBackground {
  background-image: none !important;
  background: linear-gradient(180deg, #1a3a7a 0%, #0e2254 50%, #081838 100%) !important;
  border: 1px solid #d4a020 !important;
  border-radius: 3px !important;
  width: 140px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  position: relative !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 6px rgba(0,0,0,0.5) !important;
  transition: background 0.2s !important;
}
.MediumButtonForm .MediumButtonBackground:hover {
  background: linear-gradient(180deg, #2a50a0 0%, #1a3a7a 50%, #0e2254 100%) !important;
  border-color: #f0c030 !important;
}
.MediumButtonOver {
  display: none !important;
}
/* A imagem do botão Create Account — mostrar normalmente */
.MediumButtonForm .MediumButtonText {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 95px !important;
  height: 20px !important;
  object-fit: contain !important;
  display: block !important;
  border: none !important;
  background: none !important;
  cursor: pointer !important;
}

/* Botão Login — igual ao Create Account (azul royal) */
#Loginbox #LoginButton {
  position: relative !important;
  top: auto !important; left: auto !important;
  width: 95% !important;
  height: 38px !important;
  background: linear-gradient(180deg, #1a3a7a 0%, #0e2254 50%, #081838 100%) !important;
  background-image: none !important;
  border: 1px solid #d4a020 !important;
  border-radius: 3px !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 6px rgba(0,0,0,0.5);
}
#Loginbox #LoginButton:hover {
  background: linear-gradient(180deg, #2a50a0 0%, #1a3a7a 50%, #0e2254 100%) !important;
  border-color: #f0c030 !important;
}

/* Botões Login e Account Lost */
#LoginFormButtonCell .BigButton,
#LoginFormButtonCell input[type="submit"],
#LoginFormButtonCell input[type="image"] {
  background: linear-gradient(180deg, #1a3a7a 0%, #0e2254 100%) !important;
  border: 1px solid #d4a020 !important;
  color: #f0e4cc !important;
  padding: 6px 14px !important;
  border-radius: 2px !important;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  cursor: pointer !important;
}

/* ============================================================
   ACCOUNT MANAGEMENT — characters and readable table labels
   ============================================================ */
.TableContent tr.LabelH td,
.TableContent tr.LabelH th {
  color: #f7e8bf !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85) !important;
  font-family: 'Rajdhani', Verdana, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
}

.Content .TableContent td.LabelV,
.Content .TableContent .LabelV,
.TableContainer .TableContent td.LabelV {
  color: #f7e8bf !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85) !important;
  font-weight: 700 !important;
}

.Content .TableContent td:not(.LabelV) {
  color: #172236;
}

.Content .TableContent td:not(.LabelV) a {
  color: #002b75;
  font-weight: 700;
}

.AccountCharacterOutfitCell {
  width: 62px !important;
  min-width: 62px !important;
  position: relative;
  vertical-align: middle !important;
  padding: 4px 2px !important;
  overflow: visible;
}

.AccountCharacterNumber {
  position: absolute;
  top: 5px;
  left: 5px;
  color: #061126;
  font-weight: 700;
  line-height: 1;
  z-index: 2;
}

.AccountCharacterOutfitFrame {
  position: relative;
  display: block;
  width: 52px;
  height: 66px;
  margin: 0 auto 0 2px;
  overflow: visible;
}

.AccountCharacterOutfit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 72px;
  max-width: none;
  transform: translate(-56%, -50%);
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.34));
}

.AccountCharacterOutfitSmall {
  width: 60px;
  height: 60px;
}

#charactertrade_Submenu,
#shops_Submenu {
  display: none;
  visibility: hidden;
}

/* ============================================================
   RESPONSIVE LAYOUT
   ============================================================ */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  min-width: 0 !important;
}

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

input,
select,
textarea,
button {
  max-width: 100%;
}

#ArtworkHelper,
#Bodycontainer {
  min-width: 0 !important;
}

#Bodycontainer {
  width: min(100%, 1280px) !important;
  max-width: 100vw !important;
}

#ContentRow {
  max-width: 100%;
}

#ContentColumn,
.Content,
.Content .Box,
.Content .Border_2,
.Content .Border_3,
.Content .BoxContent {
  max-width: 100%;
}

.Content .BoxContent {
  overflow-wrap: anywhere;
}

.TableContainer,
.TableContentContainer,
.TableContentAndRightShadow,
.InnerTableContainer {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.TableContainer table,
.TableContent {
  max-width: 100%;
}

.Content .BoxContent table {
  border-collapse: collapse;
}

.Content .BoxContent img {
  height: auto;
}

#newsticker .BoxContent,
.Content #newsticker .BoxContent,
.Content #News .BoxContent,
.Content #FeaturedArticle .BoxContent {
  width: 100% !important;
  min-height: 120px !important;
  height: auto !important;
}

#newsticker .Row,
#newsticker .Odd,
#newsticker .Even,
#newsticker .NewsTickerText,
#newsticker .NewsTickerShortText,
#newsticker .NewsTickerFullText {
  max-width: 100%;
}

#newsticker .NewsTickerText {
  display: block !important;
  padding-right: 28px !important;
  overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
  #ContentRow {
    gap: 8px !important;
    padding: 8px !important;
  }

  #MenuColumn,
  #ThemeboxesColumn {
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    flex-basis: 180px !important;
  }

  #LeftArtwork #TibiaLogoArtworkTop {
    width: 155px !important;
    height: 155px !important;
  }
}

@media (max-width: 980px) {
  #ContentRow {
    flex-wrap: wrap !important;
  }

  #MenuColumn {
    display: block !important;
  }

  #ContentColumn {
    flex: 1 1 calc(100% - 190px) !important;
  }

  #ThemeboxesColumn {
    display: flex !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    order: 3;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px !important;
  }

  #ThemeboxesColumn > * {
    flex: 0 0 180px;
  }
}

@media (max-width: 760px) {
  body {
    background-attachment: scroll !important;
  }

  #SiteHeroBanner {
    height: clamp(92px, 26vw, 140px) !important;
    padding: 8px 12px !important;
  }

  .hero-logo-img {
    width: min(92vw, 520px) !important;
    min-width: 0 !important;
    max-height: 135px !important;
  }

  #ContentRow {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 8px 6px !important;
    gap: 8px !important;
  }

  #MenuColumn,
  #ContentColumn,
  #ThemeboxesColumn {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 1 auto !important;
  }

  #MenuColumn {
    order: 1;
  }

  #ContentColumn {
    order: 2;
    margin: 0 !important;
    padding: 0 !important;
  }

  #ThemeboxesColumn {
    order: 3;
  }

  #LeftArtwork {
    display: none !important;
  }

  #Loginbox,
  .SmallMenuBox#DownloadBox,
  .Menu,
  .Themebox {
    margin-bottom: 8px !important;
  }

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

  .Menu .menuitem,
  .Menu .MenuItem {
    width: 100% !important;
  }

  .SubmenuitemLabel {
    min-height: 34px;
    display: flex !important;
    align-items: center;
  }

  .Content .BorderTitleText {
    min-height: 32px !important;
    height: auto !important;
  }

  .InfoBar {
    height: auto !important;
    min-height: 32px !important;
    padding: 3px 6px !important;
    overflow: visible !important;
  }

  .InfoBarLanguageSwitcher {
    margin-left: 4px !important;
    padding-left: 6px !important;
    gap: 4px !important;
  }

  .InfoBarLanguage {
    width: 32px !important;
    height: 24px !important;
  }

  .Content .Title {
    max-width: calc(100% - 36px);
    height: auto !important;
  }

  .Content .BoxContent {
    min-height: 0 !important;
    padding: 8px !important;
    font-size: 14px !important;
  }

  #newsticker .BoxContent,
  .Content #newsticker .BoxContent,
  .Content #News .BoxContent,
  .Content #FeaturedArticle .BoxContent {
    min-height: 130px !important;
  }

  #newsticker .Row,
  #newsticker .Odd,
  #newsticker .Even {
    width: 100% !important;
    min-height: 58px;
  }

  #newsticker .NewsTickerText {
    padding-left: 36px !important;
    padding-right: 30px !important;
    line-height: 1.35 !important;
  }

  #newsticker .NewsTickerDate,
  #newsticker .NewsTickerShortText,
  #newsticker .NewsTickerFullText {
    display: inline;
    white-space: normal !important;
  }

  .Content th,
  .Content .BoxContent th,
  .Content .BoxContent td,
  .TableContainer .Table1 tr td,
  .TableContainer .Table2 tr td,
  .TableContainer .Table3 tr td,
  .TableContainer .Table4 tr td,
  .TableContainer .Table5 tr td {
    font-size: 13px !important;
    padding: 6px !important;
  }

  td.LabelV,
  .TableContent td.LabelV {
    width: auto !important;
    padding: 6px 8px !important;
    text-align: left !important;
    white-space: normal !important;
  }

  .MediumButtonForm .MediumButtonBackground {
    width: min(100%, 180px) !important;
  }
}

@media (max-width: 520px) {
  #ContentRow {
    padding: 6px !important;
  }

  .Content .Box {
    border-radius: 2px;
  }

  .Content .Border_2,
  .Content .Border_3 {
    margin: 0 !important;
  }

  .Content .BoxContent {
    padding: 6px !important;
  }

  .TableContent input[type="text"],
  .TableContent input[type="password"],
  .TableContent input[type="email"],
  .TableContent select,
  .TableContent textarea {
    width: 100% !important;
    min-width: 0 !important;
  }

  .Content .BoxContent a.Button,
  .Content .BoxContent span.Button,
  .Content .BoxContent div.Button,
  .TableContent input[type="submit"],
  .TableContent input[type="button"],
  .TableContent button {
    width: 100%;
    text-align: center;
    white-space: normal;
  }
}

/* ============================================================
   MOBILE LEFT DRAWER MENU
   ============================================================ */
#MobileMenuToggle,
#MobileMenuOverlay {
  display: none;
}

@media (max-width: 760px) {
  body.mobile-menu-open {
    overflow: hidden;
  }

  #MobileMenuToggle {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 10020;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 78px;
    min-height: 38px;
    padding: 8px 11px;
    border: 1px solid var(--gold-dark);
    border-radius: 3px;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0) 44%),
      linear-gradient(180deg, var(--royal-light) 0%, var(--royal) 52%, var(--royal-dark) 100%);
    color: var(--text-light);
    font-family: 'Cinzel', serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    box-shadow: 0 3px 12px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.12);
    cursor: pointer;
  }

  #MobileMenuToggle::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    top: 1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
    opacity: 0.8;
  }

  .MobileMenuToggleIcon {
    position: relative;
    width: 18px;
    height: 12px;
    flex: 0 0 18px;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transition: transform 0.2s ease, border-color 0.2s ease;
  }

  .MobileMenuToggleIcon::before,
  .MobileMenuToggleIcon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: currentColor;
    transition: transform 0.2s ease, top 0.2s ease;
  }

  .MobileMenuToggleIcon::before {
    top: 3px;
  }

  .MobileMenuToggleIcon::after {
    display: none;
  }

  body.mobile-menu-open .MobileMenuToggleIcon {
    border-color: transparent;
  }

  body.mobile-menu-open .MobileMenuToggleIcon::before {
    top: 3px;
    transform: rotate(45deg);
  }

  body.mobile-menu-open .MobileMenuToggleIcon::after {
    top: 3px;
    display: block;
    transform: rotate(-45deg);
  }

  #MobileMenuOverlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(3, 6, 12, 0.50);
    pointer-events: none;
  }

  #MobileMenuOverlay:not([hidden]) {
    display: block;
  }

  #MenuColumn {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 10010;
    display: block !important;
    width: min(84vw, 305px) !important;
    max-width: 305px !important;
    min-width: 0 !important;
    height: 100vh !important;
    padding: 58px 10px 12px !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 90px),
      linear-gradient(180deg, var(--royal) 0%, var(--royal-dark) 52%, var(--royal-deep) 100%);
    border-right: 1px solid var(--gold-dark);
    box-shadow: 8px 0 24px rgba(0,0,0,0.65), inset -1px 0 0 rgba(255,255,255,0.06);
    transform: translateX(calc(-100% - 14px));
    transition: transform 0.22s ease;
    pointer-events: auto;
  }

  body.mobile-menu-open #MenuColumn,
  body.mobile-menu-open #MenuColumn * {
    filter: none !important;
  }

  #MenuColumn::before {
    content: 'Menu';
    position: absolute;
    top: 14px;
    left: 100px;
    right: 12px;
    color: var(--gold-light);
    font-family: 'Cinzel', serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  }

  #MenuColumn::after {
    content: '';
    position: absolute;
    top: 43px;
    left: 10px;
    right: 10px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-dark), transparent);
  }

  body.mobile-menu-open #MenuColumn {
    transform: translateX(0);
  }

  #MenuColumn #Loginbox,
  #MenuColumn .SmallMenuBox#DownloadBox,
  #MenuColumn #Menu {
    width: 100% !important;
    pointer-events: auto;
  }

  #MenuColumn .menuitem {
    width: 100% !important;
    pointer-events: auto;
  }

  #MenuColumn .MenuButton {
    min-height: 48px !important;
    padding: 12px 12px 12px 13px !important;
    pointer-events: auto;
    touch-action: manipulation;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  #MenuColumn .MenuButton > *,
  #MenuColumn .menuitem > span {
    pointer-events: auto;
  }

  #MenuColumn .MenuButton:active,
  #MenuColumn .MenuButton[aria-expanded="true"] {
    background: linear-gradient(180deg, #b89858 0%, #9a7838 42%, #6b4a1c 100%) !important;
    border-color: var(--gold-light) !important;
    filter: brightness(1.08);
  }

  #MenuColumn .MenuButton[aria-expanded="true"] .Label.ModernLabel {
    color: #fff1a8 !important;
  }

  #MenuColumn .MenuButton .Extend::after {
    transition: transform 0.18s ease, color 0.18s ease;
  }

  #MenuColumn .MenuButton[aria-expanded="true"] .Extend::after,
  #MenuColumn .mobile-submenu-open .MenuButton .Extend::after {
    color: var(--gold-bright) !important;
    transform: rotate(180deg);
  }

  #MenuColumn .Submenu {
    position: relative !important;
    z-index: 1;
    pointer-events: auto;
    margin: 0 0 8px 0 !important;
    border-color: rgba(212,160,32,0.85) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 3px 10px rgba(0,0,0,0.35);
    animation: mobileSubmenuIn 0.16s ease both;
  }

  #MenuColumn .SubmenuitemLabel {
    min-height: 44px;
    padding: 12px 12px 12px 24px !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
    pointer-events: auto;
  }

  #MenuColumn .Submenu a {
    display: block;
    min-height: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(30,87,153,0.18);
  }

  #MenuColumn .Submenuitem:active .SubmenuitemLabel {
    color: #0e2254 !important;
    background: rgba(30,87,153,0.16) !important;
    transform: translateX(2px);
  }

  @keyframes mobileSubmenuIn {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  #ContentRow {
    padding-top: 8px !important;
  }

  #ContentColumn {
    width: 100% !important;
    max-width: 100vw !important;
  }

}
/* ============================================================
   INVENTORY FIX — Classic Tibia Desktop
   ============================================================ */

.Content .BoxContent table {
  border-collapse: separate !important;
  border-spacing: 2px !important;
}

.Content .BoxContent td {
  padding: 1px !important;
  vertical-align: middle !important;
}

/* NÃO alterar sprites do inventário */
.Content .BoxContent td img {
  max-width: none !important;
  height: auto !important;
  image-rendering: auto !important;
}

/* Slots vazios */
.Content .BoxContent td img[src*="no_"] {
  width: 40px !important;
  height: 40px !important;
}

/* Items equipados */
.Content .BoxContent .item_image,
.Content .BoxContent td img[src*="/items/"] {
  width: 32px !important;
  height: 32px !important;
  display: block !important;
  margin: auto !important;
}

/* Corrige espaçamento lateral do inventário */
.Content .BoxContent table tbody tr td {
  min-width: 40px !important;
  min-height: 40px !important;
}
/* =========================================================
   DONATE SHOP - AELORIAOT
   ========================================================= */

.DonateGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
    margin-top: 15px;
}

.DonateCard {
    position: relative;
    cursor: pointer;
}

.DonateCard input[type="radio"] {
    display: none;
}

.DonateCardInner {
    background: linear-gradient(180deg, #2f2f2f 0%, #232323 100%);
    border: 1px solid #4d4d4d;
    border-radius: 12px;
    padding: 14px;
    text-align: center;
    transition: 0.2s ease;
    position: relative;
    overflow: hidden;
    min-height: 185px;
}

.DonateCard:hover .DonateCardInner {
    transform: translateY(-3px);
    border-color: #d4af37;
    box-shadow: 0 0 14px rgba(212, 175, 55, 0.35);
}

.DonateCard input[type="radio"]:checked + .DonateCardInner {
    border: 2px solid #d4af37;
    box-shadow: 0 0 18px rgba(212, 175, 55, 0.45);
}

/* Ícone */
.DonateIcon {
    margin-bottom: 10px;
}

.DonateIcon img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    image-rendering: auto !important;
}

/* Coins */
.DonateCoins {
    color: #f5c542;
    font-size: 26px;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 8px;
}

.DonateCoins small {
    display: block;
    font-size: 12px;
    color: #cfcfcf;
    margin-top: 5px;
    font-weight: normal;
}

/* Preço */
.DonatePrice {
    font-size: 22px;
    font-weight: bold;
    color: #ffffff;
    margin-top: 8px;
}

/* Valor */
.DonateValue {
    margin-top: 10px;
    font-size: 12px;
    color: #9f9f9f;
}

/* Popular */
.DonatePopular {
    position: absolute;
    top: 10px;
    right: -30px;
    background: #d4af37;
    color: #1b1b1b;
    font-size: 11px;
    font-weight: bold;
    padding: 4px 30px;
    transform: rotate(45deg);
    box-shadow: 0 0 10px rgba(0,0,0,.4);
    
.DonateIcon img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    image-rendering: auto !important;
    filter: drop-shadow(0 0 6px rgba(255,215,0,0.35));
}
}