/* ============================================================
   AlfasTryhardOt - Modern Dark MMORPG Theme
   ============================================================ */

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

/* ---- CSS Variables ---- */
:root {
  --gold:        #c9a84c;
  --gold-light:  #f0d080;
  --gold-glow:   #ffde87;
  --dark-bg:     #0a0c10;
  --panel-bg:    #0e1118;
  --panel-mid:   #131820;
  --panel-light: #1a2030;
  --border-dark: #1e2535;
  --border-gold: #3a2e12;
  --text-main:   #c8b98a;
  --text-light:  #e8dcc0;
  --text-dim:    #7a6a50;
  --red-glow:    #c03030;
  --shadow:      0 4px 24px rgba(0,0,0,0.8);
  --glow-gold:   0 0 12px rgba(201,168,76,0.4);
}

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

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

body {
  margin: 0;
  padding: 0;
  background-color: var(--dark-bg) !important;
  background-image: none !important;
  font-family: 'Rajdhani', 'Verdana', sans-serif;
  color: var(--text-main);
  overflow-x: hidden;
}

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

#ArtworkHelper::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 60% at 50% 0%, rgba(100,50,10,0.15) 0%, transparent 60%),
    radial-gradient(ellipse 80% 40% at 20% 100%, rgba(30,50,100,0.10) 0%, transparent 50%),
    radial-gradient(ellipse 80% 40% at 80% 100%, rgba(80,20,20,0.10) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* ---- Bodycontainer ---- */
#Bodycontainer {
  min-width: 1000px;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto !important;
  padding: 0;
  display: block !important;   /* override display:table from basic.css */
  position: relative;
  z-index: 1;
}

/* ============================================================
   HERO BANNER
   ============================================================ */
#SiteHeroBanner {
  position: relative;
  width: 100%;
  height: 120px;
  background: linear-gradient(135deg, #080a10 0%, #0e1218 40%, #0a0c10 100%);
  border-bottom: 1px solid var(--border-gold);
  overflow: hidden;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

#SiteHeroBanner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 100% at 50% 0%, rgba(201,168,76,0.08) 0%, transparent 70%),
    repeating-linear-gradient(90deg, transparent 0px, transparent 39px, rgba(201,168,76,0.03) 39px, rgba(201,168,76,0.03) 40px);
  pointer-events: none;
}

#SiteHeroBanner::after {
  content: '\2694';
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 50px;
  color: rgba(201,168,76,0.10);
  pointer-events: none;
  animation: runeFloat 4s ease-in-out infinite;
}

@keyframes runeFloat {
  0%, 100% { transform: translateY(-50%) rotate(0deg); opacity: 0.10; }
  50%       { transform: translateY(-60%) rotate(8deg); opacity: 0.20; }
}

#HeroTitle { position: relative; text-align: center; z-index: 5; }

#HeroTitle .server-name {
  font-family: 'Cinzel', serif;
  font-size: 40px;
  font-weight: 900;
  letter-spacing: 6px;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff 0%, #f0d080 25%, #c9a84c 55%, #a07828 80%, #6a4e1a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 14px rgba(201,168,76,0.5));
  animation: titleShimmer 4s ease-in-out infinite;
  display: block;
  line-height: 1;
  margin-bottom: 3px;
}

@keyframes titleShimmer {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(201,168,76,0.5)); }
  50%       { filter: drop-shadow(0 0 24px rgba(255,220,100,0.8)) drop-shadow(0 0 40px rgba(201,168,76,0.4)); }
}

#HeroTitle .server-tagline {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 7px;
  text-transform: uppercase;
  color: var(--text-dim);
  display: block;
  margin-top: 2px;
}

.hero-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 3px 0;
}

.hero-divider-line {
  width: 70px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: linePulse 3s ease-in-out infinite;
}

.hero-divider-diamond {
  width: 5px;
  height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 6px var(--gold);
  animation: diamondPulse 3s ease-in-out infinite;
}

@keyframes linePulse    { 0%,100%{opacity:.5} 50%{opacity:1} }
@keyframes diamondPulse { 0%,100%{box-shadow:0 0 4px var(--gold);transform:rotate(45deg) scale(1)} 50%{box-shadow:0 0 14px var(--gold-glow);transform:rotate(45deg) scale(1.3)} }

/* ============================================================
   LAYOUT COLUMNS
   The original basic.css uses:
     #ContentRow  { position:relative; top:155px }
     #MenuColumn  { position:absolute; left:0; width:180px }
     #ContentColumn { margin-left:205px; margin-right:205px }
     #ThemeboxesColumn { position:absolute; right:0; width:180px }
   We override ALL of this with flexbox.
   ============================================================ */

#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;
}

#MenuColumn {
  /* was: position:absolute; left:0; width:180px */
  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 {
  /* was: margin-left:205px; margin-right:205px */
  position: relative !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  order: 2;
}

#ThemeboxesColumn {
  /* was: position:absolute; right:0; width:180px */
  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: 8px;
  text-align: center;
  cursor: pointer;
}

#LeftArtwork #TibiaLogoArtworkTop {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  height: auto !important;
  max-width: 175px;
  filter: drop-shadow(0 0 8px rgba(201,168,76,0.3));
  transition: filter 0.3s ease;
}
#LeftArtwork #TibiaLogoArtworkTop:hover {
  filter: drop-shadow(0 0 18px rgba(201,168,76,0.6));
}
#LeftArtwork #LogoLink { display: none !important; }

/* ============================================================
   LOGIN BOX
   ============================================================ */
#Loginbox {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  margin-bottom: 8px !important;
  background: linear-gradient(180deg, #0f1520 0%, #0a0e17 100%);
  border: 1px solid var(--border-dark);
  border-top-color: rgba(201,168,76,0.35);
  border-radius: 3px;
  padding: 8px 7px;
  overflow: hidden;
}
#Loginbox::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

#Loginbox #LoginTop,
#Loginbox #LoginBottom,
#Loginbox .LoginBorder { display: none !important; }

#Loginbox #LoginButtonContainer {
  background: none !important;
  height: auto !important;
  width: 100% !important;
  position: relative !important;
  left: auto !important;
  margin-bottom: 7px;
}

#Loginbox #LoginButton {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  height: 34px !important;
  background: linear-gradient(135deg, #1a1208 0%, #2a1e08 50%, #1a1208 100%) !important;
  border: 1px solid var(--gold) !important;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
#Loginbox #LoginButton:hover {
  background: linear-gradient(135deg, #2a2010 0%, #3a2c10 100%) !important;
  box-shadow: 0 0 10px rgba(201,168,76,0.25);
}
#Loginbox #LoginButton .Button { display: none !important; }

#Loginbox #LoginButton #ButtonText {
  position: relative !important;
  top: auto !important; left: auto !important;
  width: 100% !important;
  height: 34px !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;
}

#Loginbox #LoginstatusText_2 {
  width: 100%;
  height: 26px;
  background: linear-gradient(135deg, #100c1a 0%, #1a1228 100%) !important;
  border: 1px solid rgba(100,80,180,0.3);
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  position: relative !important;
}
#Loginbox #LoginstatusText_2:hover {
  background: linear-gradient(135deg, #18103a 0%, #241840 100%) !important;
}
#Loginbox .LoginstatusText {
  position: relative !important;
  top: auto !important; left: auto !important;
  width: 100% !important;
  height: 22px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
#LoginstatusText_2_1 { visibility: visible !important; }
#LoginstatusText_2_2 { display: none !important; }

/* ============================================================
   DOWNLOAD BOX
   ============================================================ */
.SmallMenuBox#DownloadBox {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  margin-bottom: 8px !important;
  background: linear-gradient(180deg, #0f1520 0%, #0a0e17 100%);
  border: 1px solid var(--border-dark);
  border-top-color: rgba(201,168,76,0.35);
  border-radius: 3px;
  padding: 7px;
  overflow: hidden;
}
.SmallMenuBox#DownloadBox::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.SmallMenuBox .SmallBoxTop,
.SmallMenuBox .SmallBoxBorder,
.SmallMenuBox .SmallBoxBottom { display: none !important; }

.SmallMenuBox .SmallBoxButtonContainer {
  background: none !important;
  height: auto !important;
  width: 100% !important;
  position: relative !important;
  left: auto !important;
}
#PlayNowContainer {
  position: relative !important;
  top: auto !important; left: auto !important;
  width: 100% !important;
  height: auto !important;
}
.MediumButtonBackground {
  width: 100% !important;
  height: 34px !important;
  background: linear-gradient(135deg, #0f1e0a 0%, #183010 50%, #0f1e0a 100%) !important;
  border: 1px solid rgba(60,140,40,0.5) !important;
  border-radius: 2px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.MediumButtonBackground:hover {
  background: linear-gradient(135deg, #182e0e 0%, #224518 100%) !important;
  box-shadow: 0 0 10px rgba(60,180,40,0.15);
}
.MediumButtonOver { display: none !important; }
.MediumButtonText {
  position: relative !important;
  top: auto !important; left: auto !important;
  width: 100% !important;
  height: 28px !important;
  object-fit: contain;
}

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

.menuitem { margin-bottom: 3px; }

.MenuButton {
  width: 100% !important;
  height: auto !important;
  background: linear-gradient(135deg, #0c1220 0%, #111828 50%, #0c1220 100%) !important;
  border: 1px solid var(--border-dark) !important;
  border-left: 2px solid var(--gold) !important;
  border-radius: 2px;
  padding: 5px 7px 5px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 7px;
  position: relative;
  overflow: hidden;
}
.MenuButton:hover {
  background: linear-gradient(135deg, #141a2c 0%, #1a2238 100%) !important;
  border-left-color: var(--gold-light) !important;
  box-shadow: -2px 0 6px rgba(201,168,76,0.15);
}

.MenuButton > div:first-child { display: none !important; }
.Lights { display: none !important; }
.Extend {
  position: absolute !important;
  top: 50% !important;
  right: 7px !important;
  transform: translateY(-50%) !important;
  width: 10px !important;
  height: 12px !important;
  background-image: none !important;
}
.Extend::after {
  content: '\25BE';
  color: var(--text-dim);
  font-size: 12px;
  position: absolute;
  top: -7px; left: 0;
}

.Icon {
  position: relative !important;
  top: auto !important; left: auto !important;
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0;
  filter: drop-shadow(0 0 3px rgba(201,168,76,0.25));
}
.Label {
  position: relative !important;
  top: auto !important; left: auto !important;
  width: auto !important;
  height: 20px !important;
  flex: 1;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
}

/* Submenus */
.Submenu {
  background: linear-gradient(180deg, #0a0f1a 0%, #070c14 100%) !important;
  border: 1px solid var(--border-dark);
  border-top: none;
  border-left: 2px solid rgba(201,168,76,0.12);
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 0 2px 2px;
}
.Submenuitem {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}
.LeftChain, .RightChain { display: none !important; }

.ActiveSubmenuItemIcon {
  left: 4px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 5px !important;
  height: 5px !important;
  background: var(--gold) !important;
  border-radius: 50%;
  background-image: none !important;
  box-shadow: 0 0 4px var(--gold);
}
.SubmenuitemLabel {
  padding: 6px 10px 6px 20px !important;
  border-bottom: 1px solid rgba(30,37,53,0.8) !important;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.4px;
  transition: color 0.15s, padding-left 0.15s;
}
.Submenuitem:hover .SubmenuitemLabel {
  color: var(--gold-light);
  padding-left: 24px !important;
}
.Submenu a { text-decoration: none !important; }
.Submenu a:link, .Submenu a:visited, .Submenu a:focus { color: var(--text-dim) !important; }

/* ============================================================
   CONTENT BOXES
   ============================================================ */
.Content .Box {
  font-size: 0pt;
  position: relative;
  margin: 0 0 10px 0 !important;
  border: 1px solid var(--border-dark) !important;
  border-top: 1px solid rgba(201,168,76,0.2) !important;
  background: linear-gradient(180deg, var(--panel-mid) 0%, var(--panel-bg) 100%) !important;
  border-radius: 3px;
  overflow: visible;
}
.Content .Box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  z-index: 5;
}

.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(135deg, #1a1208 0%, #1e1a0a 100%) !important;
  border-bottom: 1px solid var(--border-gold) !important;
  height: 30px !important;
  position: relative;
}
.Content .Title {
  position: absolute !important;
  top: 4px !important;
  left: 8px !important;
  filter: brightness(1.1);
}
.Content .Border_2 {
  margin: 2px !important;
  padding: 0 !important;
  background: var(--border-dark) !important;
  border-radius: 2px;
}
.Content .Border_3 {
  margin: 1px !important;
  border-top: 1px solid rgba(30,37,53,0.8) !important;
  border-bottom: 1px solid rgba(30,37,53,0.8) !important;
}
.Content .BoxContent {
  font-family: 'Rajdhani', 'Verdana', sans-serif !important;
  font-size: 13px !important;
  background: linear-gradient(180deg, #0e1520 0%, #0a1018 100%) !important;
  color: var(--text-main) !important;
  min-height: 200px !important;
  padding: 10px !important;
  background-image: none !important;
  border-radius: 0 0 2px 2px;
}

/* Info Bar */
.InfoBar { font-family: 'Rajdhani', sans-serif !important; color: var(--text-main) !important; font-size: 12px !important; }
.InfoBar a, .InfoBar a:link, .InfoBar a:visited, .InfoBar a:hover { color: var(--gold-light) !important; font-size: 12px !important; }
.InfoBarLinks { font-size: 12px !important; }

/* Tables */
.Content th {
  background: linear-gradient(135deg, #1a1208, #1e1a0a) !important;
  color: var(--gold-light) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 12px !important;
  padding: 5px 8px !important;
  border-bottom: 1px solid var(--border-gold) !important;
}
.Content .BoxContent td {
  font-family: 'Rajdhani', 'Verdana', sans-serif !important;
  font-size: 13px !important;
  color: var(--text-main) !important;
}
.Content a { color: var(--gold) !important; font-family: 'Rajdhani', sans-serif !important; transition: color 0.2s; }
.Content a:hover { color: var(--gold-glow) !important; text-decoration: none !important; }

.TableContainer { border: 1px solid var(--border-dark) !important; border-radius: 2px; }
.TableContainer .Odd  { background-color: #0c1220 !important; }
.TableContainer .Even { background-color: #0a0f1a !important; }
.TableContainer .CaptionContainer,
.TableContainer .CaptionContainer .CaptionInnerContainer {
  background: linear-gradient(135deg, #1a1208 0%, #1e1a0a 100%) !important;
}
.TableContainer .CaptionContainer .Text {
  color: var(--gold-light) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  letter-spacing: 1px;
}
.TableContentContainer { background-color: #0a0f1a !important; border-color: var(--border-dark) !important; box-shadow: none !important; }
.TableContent td { border-color: rgba(30,37,53,0.6) !important; }

.Content .BoxContent .Odd  { background-color: #0c1220 !important; }
.Content .BoxContent .Even { background-color: #0a0f1a !important; }

.SmallBox .ErrorMessage {
  background: rgba(100,20,20,0.3) !important;
  color: #ff8080 !important;
  border: 1px solid rgba(180,30,30,0.4);
  border-radius: 2px;
  font-family: 'Rajdhani', sans-serif;
}
.SmallBox .Message {
  background: rgba(20,40,80,0.3) !important;
  color: var(--text-light) !important;
  border: 1px solid rgba(50,100,180,0.3);
  border-radius: 2px;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================================
   NEWS
   ============================================================ */
.Content #News .NewsHeadlineBackground,
.Content #FeaturedArticle .NewsHeadlineBackground,
.Content #NewsArchive .NewsHeadlineBackground {
  background: linear-gradient(135deg, #1a1208 0%, #221c0a 100%) !important;
  border-left: 1px solid var(--border-gold) !important;
  border-right: 1px solid var(--border-gold) !important;
}
.Content #News .NewsHeadlineDate,
.Content #FeaturedArticle .NewsHeadlineDate,
.Content #NewsArchive .NewsHeadlineDate { color: var(--text-dim) !important; }
.Content #News .NewsHeadlineText,
.Content #FeaturedArticle .NewsHeadlineText,
.Content #NewsArchive .NewsHeadlineText { color: var(--gold-light) !important; }

.Content #NewsTicker .BoxContent {
  background: linear-gradient(180deg, #0a1018 0%, #080d15 100%) !important;
  min-height: 80px !important;
}

/* ============================================================
   RIGHT COLUMN - Creature Box
   ============================================================ */
#RightArtwork {
  position: relative !important;
  top: auto !important; right: auto !important;
  width: 100% !important;
  text-align: center;
  margin-bottom: 8px;
  display: none !important; /* hidden - replaced by ModernCreatureBox */
}

#ModernCreatureBox {
  background: linear-gradient(180deg, #0f1520 0%, #0a0e17 100%);
  border: 1px solid var(--border-dark);
  border-top: 1px solid rgba(201,168,76,0.25);
  border-radius: 3px;
  padding: 8px;
  margin-bottom: 8px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
#ModernCreatureBox::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
#ModernCreatureBox .mcb-title {
  font-family: 'Cinzel', serif;
  font-size: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
  display: block;
}
#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: 2px;
}
#ModernCreatureBox .mcb-creature-wrap > span {
  font-family: 'Rajdhani', sans-serif;
  font-size: 8px;
  color: var(--text-dim);
  letter-spacing: .5px;
  text-transform: uppercase;
}
#ModernCreatureBox .mcb-label {
  font-family: 'Cinzel', serif;
  font-size: 7px;
  letter-spacing: .5px;
  display: block;
  text-align: center;
  max-width: 85px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#ModernCreatureBox .mcb-label-creature { color: var(--gold); }
#ModernCreatureBox .mcb-label-boss     { color: var(--red-glow); }

#Themeboxes { width: 100%; }

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

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

/* ============================================================
   BUTTONS
   ============================================================ */
.BigButton, .BigButtonText {
  background: linear-gradient(135deg, #1a1208 0%, #2a1e08 100%) !important;
  border: 1px solid var(--gold) !important;
  border-radius: 2px !important;
  color: var(--gold-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(--panel-light) !important;
  border: 1px solid var(--border-dark) !important;
  border-bottom-color: var(--border-gold) !important;
  color: var(--text-light) !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(--gold) !important;
  box-shadow: 0 0 5px rgba(201,168,76,0.15) !important;
}

/* ============================================================
   SCROLL TO TOP + HELPER DIV
   ============================================================ */
.scrollToTop {
  background: linear-gradient(135deg, #1a1208, #0a0e17) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: 3px !important;
  padding: 5px !important;
  transition: all 0.2s !important;
}
.scrollToTop:hover { border-color: var(--gold) !important; }

#HelperDivContainer {
  background: var(--panel-mid) !important;
  border: 1px solid var(--border-gold) !important;
  color: var(--text-main) !important;
  box-shadow: var(--shadow) !important;
}

/* ============================================================
   PAGE LOAD ANIMATION
   ============================================================ */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
#ContentRow { animation: pageIn 0.35s ease forwards; }

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

/* ============================================================
   MENU LABELS - CSS TEXT (replaces GIF images)
   ============================================================ */

/* Hide the background-image from .Label - we use text now */
.Label.ModernLabel {
  background-image: none !important;
  display: flex !important;
  align-items: center;
  height: 100% !important;
  width: auto !important;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #a08050 !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding-right: 14px;
}

.MenuButton:hover .Label.ModernLabel {
  color: var(--gold-light) !important;
}

/* Active submenu state - make label brighter */
.menuitem .Submenu:not([style*="display: none"]) ~ span .Label.ModernLabel,
.menuitem .Submenu[style*="visibility: visible"] .Label.ModernLabel {
  color: var(--gold) !important;
}

/* Icon - keep the animated gif but override broken absolute positioning */
.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 0 3px rgba(201,168,76,0.3)) brightness(1.1);
}

/* ============================================================
   HIGHSCORES BOX - full restyle
   ============================================================ */

/* Remove old themebox bg image */
#Topbar.Themebox {
  background-image: none !important;
  background: linear-gradient(180deg, #0f1520 0%, #0a0e17 100%) !important;
  border: 1px solid var(--border-dark) !important;
  border-top: 1px solid rgba(201,168,76,0.25) !important;
  border-radius: 3px !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  margin-bottom: 8px !important;
  position: relative !important;
  overflow: hidden !important;
}
#Topbar.Themebox::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* Hide the old .top_level absolute div */
#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-main) !important;
  font-weight: normal !important;
  text-align: left !important;
  background: none !important;
  background-image: none !important;
}

/* ============================================================

/* ============================================================
   MENU BUTTON FLEX FIX
   ============================================================ */
.MenuButton {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 6px 8px 6px 9px !important;
}
.MenuButton > div:first-child,
.MenuButton .Lights,
.MenuButton .light_lu,
.MenuButton .light_ld,
.MenuButton .light_ru { display: none !important; }

.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: 11px !important;
  font-weight: 600 !important;
  color: #9a8050 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  padding: 0 !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
}
.MenuButton:hover .Label.ModernLabel { color: #f0d080 !important; }

.MenuButton .Extend {
  position: relative !important;
  top: auto !important; right: auto !important;
  transform: none !important;
  width: 12px !important;
  height: 12px !important;
  background-image: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.MenuButton .Extend::after {
  content: '\25BE' !important;
  color: #5a4a30 !important;
  font-size: 13px !important;
  position: static !important;
}

/* ============================================================
   LOGIN BOX — versão final limpa
   ============================================================ */

#Loginbox {
  position: relative !important;
  left: auto !important; top: auto !important;
  width: 100% !important;
  margin-bottom: 8px !important;
  background: linear-gradient(180deg, #0f1520 0%, #0a0e17 100%) !important;
  border: 1px solid #1e2535 !important;
  border-top: 1px solid rgba(201,168,76,0.35) !important;
  border-radius: 3px !important;
  padding: 10px 8px !important;
  overflow: visible !important;
}
#Loginbox::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, #c9a84c, transparent);
  pointer-events: none;
}

/* Esconde tudo que não deve aparecer */
#Loginbox #LoginTop,
#Loginbox #LoginBottom,
#Loginbox .LoginBorder,
#Loginbox #LoginButtonOver,
#Loginbox .Button,
#Loginbox div[style*="clear"] { display: none !important; }

/* Container do botão */
#Loginbox #LoginButtonContainer {
  position: relative !important;
  left: auto !important;
  width: 100% !important;
  height: auto !important;
  background: none !important;
  background-image: none !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
}

/* Botão Login / My Account */
#Loginbox #LoginButton {
  position: relative !important;
  top: auto !important; left: auto !important;
  width: 100% !important;
  height: 38px !important;
  background: linear-gradient(135deg, #1c1408 0%, #2c2008 50%, #1c1408 100%) !important;
  background-image: none !important;
  border: 1px solid #c9a84c !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;
}
#Loginbox #LoginButton:hover {
  background: linear-gradient(135deg, #2a2010 0%, #3a2c10 100%) !important;
  box-shadow: 0 0 12px rgba(201,168,76,0.25) !important;
}

/* O div filho wrapper */
#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;
}

/* ButtonText — exibe o PNG do botão (Login ou My Account) */
#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;
  /* SEM content::after — evita texto duplo */
}

/* ---- Create Account / Logout button ---- */
#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(135deg, #100c1e 0%, #160f28 100%) !important;
  background-image: none !important;
  border: 1px solid rgba(120,90,200,0.25) !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;
}
#Loginbox #LoginstatusText_2::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(140,100,220,0.4), transparent);
  pointer-events: none;
}
#Loginbox #LoginstatusText_2:hover {
  background: linear-gradient(135deg, #1a1030 0%, #221540 100%) !important;
  border-color: rgba(140,100,220,0.45) !important;
  box-shadow: 0 0 10px rgba(120,80,200,0.15) !important;
}

/* Esconde os divs de GIF internos — usamos data-label via JS */
#Loginbox #LoginstatusText_2_1,
#Loginbox #LoginstatusText_2_2 { display: none !important; }

/* Texto via data-label (Create Account / Logout) */
#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: #7050b0;
  pointer-events: none;
}

/* Estado Logout — tom avermelhado */
#Loginbox #LoginstatusText_2.login-state-logout {
  background: linear-gradient(135deg, #1a0c0c 0%, #280f0f 100%) !important;
  border-color: rgba(180,40,40,0.3) !important;
}
#Loginbox #LoginstatusText_2.login-state-logout::before {
  background: linear-gradient(90deg, transparent, rgba(180,40,40,0.3), transparent) !important;
}
#Loginbox #LoginstatusText_2.login-state-logout[data-label]::after { color: #c05050; }
#Loginbox #LoginstatusText_2.login-state-logout:hover {
  background: linear-gradient(135deg, #260e0e 0%, #381414 100%) !important;
  border-color: rgba(200,60,60,0.45) !important;
}

/* ============================================================
   DOWNLOAD BOX — versão final limpa
   ============================================================ */
.SmallMenuBox#DownloadBox {
  position: relative !important;
  left: auto !important; top: auto !important;
  width: 100% !important;
  margin-bottom: 8px !important;
  background: linear-gradient(180deg, #0d1a0d 0%, #081008 100%) !important;
  border: 1px solid #1e2535 !important;
  border-top: 1px solid rgba(60,140,40,0.35) !important;
  border-radius: 3px !important;
  padding: 10px 8px !important;
  overflow: hidden !important;
}
.SmallMenuBox#DownloadBox::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(80,180,60,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(135deg, #0e1e08 0%, #1a3010 50%, #0e1e08 100%) !important;
  background-image: none !important;
  border: 1px solid rgba(60,160,40,0.45) !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;
}
.MediumButtonBackground:hover {
  background: linear-gradient(135deg, #162e0c 0%, #224518 100%) !important;
  box-shadow: 0 0 12px rgba(60,180,40,0.2) !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;
}

/* ============================================================
   HIGHSCORES — fix para quando está dentro de .Themebox
   ============================================================ */
/* O .Themebox tem padding:8px — cancela isso no hs-wrap */
.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;
}
/* Remove a linha dourada duplicada do wrapper */
.Themebox .hs-wrap::before { display: none !important; }

/* ============================================================
   PÁGINAS INTERNAS — override completo do tema bege antigo
   Cobre: guilds, highscores, characters, community, etc.
   ============================================================ */

/* BoxContent — fundo bege #fff2db → dark */
.Content .BoxContent {
  background-color: #0b1018 !important;
  background-image: none !important;
  color: #c8b98a !important;
  font-family: 'Rajdhani', 'Verdana', sans-serif !important;
  font-size: 13px !important;
}

/* Texto padrão dentro de tds */
.Content .BoxContent td,
.Content .BoxContent p,
.Content .BoxContent span,
.Content .BoxContent li,
.Content .BoxContent div {
  color: #c8b98a !important;
  font-family: 'Rajdhani', 'Verdana', sans-serif !important;
  font-size: 13px !important;
}

/* Cabeçalho das tabelas — bege escuro #505050 → dark gold */
.Content th,
.TableContainer .CaptionContainer .Text,
.Content .BoxContent th {
  background: linear-gradient(135deg, #1a1208 0%, #1e1a0a 100%) !important;
  background-color: #1a1208 !important;
  color: #c9a84c !important;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  letter-spacing: 0.5px;
  padding: 6px 8px !important;
  border-bottom: 1px solid #3a2e12 !important;
}

/* CaptionContainer (header das TableContainer) */
.TableContainer .CaptionContainer,
.TableContainer .CaptionContainer .CaptionInnerContainer {
  background: linear-gradient(135deg, #1a1208 0%, #1e1a0a 100%) !important;
  background-color: #1a1208 !important;
}
.TableContainer .CaptionContainer .Text {
  color: #c9a84c !important;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
}

/* Cantos decorativos da caption — esconde os GIFs antigos */
.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; }

/* Linhas Odd/Even — bege → dark */
.TableContainer .Odd,
.Content .BoxContent .Odd,
.Content .BoxContent tr.Odd,
.Content .BoxContent tr.Odd td {
  background-color: #0d1422 !important;
}
.TableContainer .Even,
.Content .BoxContent .Even,
.Content .BoxContent tr.Even,
.Content .BoxContent tr.Even td {
  background-color: #0a0f1a !important;
}

/* Table1-5 backgrounds — todos os tons bege/areia → dark */
.TableContainer .Table1,
.TableContainer .Table2,
.TableContainer .Table3,
.TableContainer .Table4,
.TableContainer .Table5 {
  background-color: #0a0f1a !important;
  border: 1px solid #1e2535 !important;
  width: 100% !important;
}

.TableContainer .Table1 .InnerTableContainer,
.TableContainer .Table2 .InnerTableContainer,
.TableContainer .Table3 .InnerTableContainer,
.TableContainer .Table4 .InnerTableContainer,
.TableContainer .Table5 .InnerTableContainer {
  background-color: #0a0f1a !important;
}

.TableContainer .Table2 td,
.TableContainer .Table3 td,
.TableContainer .Table4 td,
.TableContainer .Table5 td {
  border-color: #1e2535 !important;
  color: #c8b98a !important;
}

.TableContainer .Table2 .InnerTableContainer td,
.TableContainer .Table3 .TableContentAndRightShadow td,
.TableContainer .Table4 .TableContentAndRightShadow .TableContent td,
.TableContainer .Table5 .TableContentAndRightShadow .TableContent td {
  border-color: #1e2535 !important;
}

/* TableContentContainer */
.TableContentContainer {
  background-color: #0a0f1a !important;
  box-shadow: none !important;
}
.TableContentAndRightShadow {
  background-color: #0a0f1a !important;
  background-image: none !important;
}

/* TableContainer wrapper */
.TableContainer {
  border: 1px solid #1e2535 !important;
  background-color: transparent !important;
}

/* Texto dentro das TableContent cells */
.TableContent td,
.TableContent tr td {
  color: #c8b98a !important;
  border-color: #1e2535 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
}

/* ---- Formulários internos ---- */
.Content .BoxContent input[type="text"],
.Content .BoxContent input[type="password"],
.Content .BoxContent input[type="email"],
.Content .BoxContent input[type="number"],
.Content .BoxContent select,
.Content .BoxContent textarea,
input[type="text"], input[type="password"],
input[type="email"], input[type="number"],
select, textarea {
  background: #0e1520 !important;
  background-color: #0e1520 !important;
  border: 1px solid #2a3040 !important;
  border-bottom-color: #3a2e12 !important;
  color: #c8b98a !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
  padding: 4px 8px !important;
  border-radius: 2px !important;
  outline: none !important;
}
.Content .BoxContent input:focus,
.Content .BoxContent select:focus,
.Content .BoxContent textarea:focus,
input:focus, select:focus, textarea:focus {
  border-color: #c9a84c !important;
  box-shadow: 0 0 6px rgba(201,168,76,0.15) !important;
}

/* ---- Botões dos formulários ---- */
.Content .BoxContent input[type="submit"],
.Content .BoxContent input[type="button"],
.Content .BoxContent button,
input[type="submit"], input[type="button"], button {
  background: linear-gradient(135deg, #1a1208 0%, #2a1e08 100%) !important;
  border: 1px solid #c9a84c !important;
  color: #c9a84c !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;
}
.Content .BoxContent input[type="submit"]:hover,
.Content .BoxContent button:hover,
input[type="submit"]:hover, button:hover {
  background: linear-gradient(135deg, #2a2010 0%, #3a2c10 100%) !important;
  box-shadow: 0 0 8px rgba(201,168,76,0.2) !important;
}

/* ---- Links coloridos internos ---- */
.Content .BoxContent a,
.Content .BoxContent a:link,
.Content .BoxContent a:visited {
  color: #c9a84c !important;
  text-decoration: none !important;
}
.Content .BoxContent a:hover {
  color: #f0d080 !important;
  text-decoration: underline !important;
}

/* ---- Classes de cor específicas do MyAAC ---- */
.Content .BoxContent td .white,
.Content .BoxContent td .whites,
.Content .BoxContent .white    { color: #e8dcc0 !important; }
.Content .BoxContent td .green { color: #6cb870 !important; }
.Content .BoxContent td .yellow{ color: #c9a84c !important; }
.Content .BoxContent td .red   { color: #c05050 !important; }
.Content .BoxContent td .grey  { color: #7a6a58 !important; }
.Content .BoxContent td .orange{ color: #c07840 !important; }

/* ff_ font classes */
.Content .BoxContent .ff_info,
.Content .BoxContent .ff_white,
.Content .BoxContent .ff_whitelarge { color: #c8b98a !important; }
.Content .BoxContent .ff_red        { color: #c05050 !important; }
.Content .BoxContent .ff_correct    { color: #6cb870 !important; }
.Content .BoxContent .ff_pagetext,
.Content .BoxContent .ff_pagetextgrey { color: #8a7a60 !important; }
.Content .BoxContent .ff_pagetextred  { color: #c05050 !important; }
.Content .BoxContent .ff_infotext,
.Content .BoxContent .ff_smallinfo,
.Content .BoxContent .ff_large { color: #c8b98a !important; }

/* ---- Box title / headlines dentro das páginas ---- */
.Content .Box .BorderTitleText,
.Content .Box .Title {
  background: linear-gradient(135deg, #1a1208 0%, #1e1a0a 100%) !important;
}

/* ---- Títulos H1-H4 internos ---- */
.Content .BoxContent h1,
.Content .BoxContent h2,
.Content .BoxContent h3,
.Content .BoxContent h4 {
  color: #c9a84c !important;
  font-family: 'Cinzel', serif !important;
  border-bottom: 1px solid #3a2e12 !important;
  padding-bottom: 4px !important;
}

/* ---- SmallBox messages ---- */
.SmallBox, .SmallBox .ErrorMessage, .SmallBox .Message {
  background: #0b1018 !important;
  color: #c8b98a !important;
  border-color: #1e2535 !important;
}
.SmallBox .ErrorMessage { color: #ff8080 !important; border-color: rgba(180,30,30,0.4) !important; }

/* ---- Guilds específico ---- */
#GuildLogoHolder { background: #0e1520 !important; border-color: #1e2535 !important; }
.Content .BoxContent .GuildLogo { background: #0e1520 !important; }

/* ---- Placeholder text ---- */
::placeholder { color: #5a4a30 !important; opacity: 1; }
::-webkit-input-placeholder { color: #5a4a30 !important; }

/* ---- Checkbox / Radio ---- */
input[type="checkbox"], input[type="radio"] {
  accent-color: #c9a84c;
}

/* ---- HR / dividers ---- */
.Content .BoxContent hr {
  border: none !important;
  border-top: 1px solid #1e2535 !important;
  margin: 8px 0 !important;
}

/* ============================================================
   HIGHSCORES OUTFIT — sprite centralizada perfeitamente
   ============================================================ */
/* hs-outfit styles moved to highscores.html.twig */

/* ============================================================
   SPELLS / LABELHH / DATATABLES — override completo
   ============================================================ */

/* LabelH — header bege das tabelas (spells, highscores, etc.) */
.LabelH,
.LabelH td,
td.LabelH,
tr .LabelH {
  background-color: #1a1208 !important;
  background: linear-gradient(135deg, #1a1208, #1e1a0a) !important;
  color: #c9a84c !important;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  border-bottom: 1px solid #3a2e12 !important;
  padding: 6px 8px !important;
  white-space: nowrap !important;
}

/* DataTables wrapper */
.dataTables_wrapper,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  background: transparent !important;
  color: #c8b98a !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 12px !important;
}

/* DataTables input filter */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: #0e1520 !important;
  border: 1px solid #2a3040 !important;
  color: #c8b98a !important;
  border-radius: 2px !important;
  padding: 3px 6px !important;
}

/* DataTables thead */
table.dataTable thead th,
table.dataTable thead td,
table.dataTable tfoot th,
table.dataTable tfoot td {
  background: linear-gradient(135deg, #1a1208, #1e1a0a) !important;
  color: #c9a84c !important;
  border-bottom: 1px solid #3a2e12 !important;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
}

/* DataTables sorting arrows */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  background-color: #1a1208 !important;
}

/* DataTables tbody rows */
table.dataTable tbody tr {
  background-color: #0a0f1a !important;
}
table.dataTable tbody tr:nth-child(odd) {
  background-color: #0d1422 !important;
}
table.dataTable tbody tr:hover {
  background-color: #111828 !important;
}
table.dataTable tbody td {
  color: #c8b98a !important;
  border-color: #1e2535 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
}

/* DataTables paginate buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: #0e1520 !important;
  color: #c8b98a !important;
  border: 1px solid #1e2535 !important;
  border-radius: 2px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #1a2030 !important;
  color: #c9a84c !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: linear-gradient(135deg, #1a1208, #2a1e08) !important;
  color: #c9a84c !important;
  border-color: #c9a84c !important;
}

/* Spells filter tabs (the buttons above the table) */
.Content .BoxContent .nav-tabs,
.Content .BoxContent .nav-tabs li a,
.Content .BoxContent .spell-filter {
  background: #0a0f1a !important;
  border-color: #1e2535 !important;
  color: #c8b98a !important;
}

/* Vocation filter buttons in spells page */
.Content .BoxContent a.btn,
.Content .BoxContent .btn {
  background: linear-gradient(135deg, #0e1520, #111828) !important;
  border: 1px solid #2a3040 !important;
  color: #c8b98a !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(135deg, #1a1208, #2a1e08) !important;
  border-color: #c9a84c !important;
  color: #c9a84c !important;
}

/* vdarkborder used in tabs background */
[style*="background-color: #1e2535"],
[style*="background-color:#1e2535"] {
  background-color: #1a1208 !important;
}