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

/* OldOT retro refresh: preserva os sprites classicos e melhora a leitura. */
:root {
  --oldot-night: #090d12;
  --oldot-gold: #d3aa55;
  --oldot-gold-light: #f4dc96;
}

html { min-height: 100%; background: var(--oldot-night); }
body {
  min-height: 100vh;
  color: #2a1b10;
  background-color: var(--oldot-night) !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at 50% 12%, rgba(195,150,76,.15), transparent 35%), linear-gradient(180deg, rgba(5,7,10,.08), rgba(4,5,7,.76));
}
.main-site-container {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.55));
}
.Content .Box,
.Content .TableContainer,
.Themeboxes > div:not(#DeactivationContainerThemebox) { filter: drop-shadow(0 5px 7px rgba(0,0,0,.42)); }
.Content .BoxContent { color: #2b1b10; line-height: 1.5; }
.Content .BoxContent a { color: #6d160f; font-weight: 700; text-decoration-color: rgba(109,22,15,.4); }
.Content .BoxContent a:hover { color: #9c2418; text-shadow: 0 1px 0 #f5dfac; }
.Content .NewsHeadlineBackground { box-shadow: inset 0 1px rgba(255,226,154,.35), 0 2px 4px rgba(38,18,8,.3); }
.Content .NewsHeadlineText,
.Content .NewsHeadlineDate { text-shadow: 1px 1px 1px #240b06; }
.MenuButton .Label,
.SubmenuitemLabel { letter-spacing: .15px; text-shadow: 1px 1px 1px #000; }
.SubmenuitemLabel { transition: color .16s ease, padding-left .16s ease, background-color .16s ease; }
.Submenuitem:hover .SubmenuitemLabel {
  padding-left: 27px;
  color: var(--oldot-gold-light) !important;
  background-color: rgba(211,170,85,.08);
}
.MediumButtonBackground,
.BigButton {
  filter: saturate(.88) sepia(.08) drop-shadow(0 3px 3px rgba(0,0,0,.55));
  transition: filter .16s ease, transform .16s ease;
}
.MediumButtonBackground:hover,
.BigButton:hover {
  filter: saturate(1.08) brightness(1.08) drop-shadow(0 4px 4px rgba(0,0,0,.65));
  transform: translateY(-1px);
}
#TibiaLogoArtworkTop {
  filter: drop-shadow(0 5px 5px rgba(0,0,0,.72));
  transition: filter .2s ease, transform .2s ease;
}
#TibiaLogoArtworkTop:hover {
  filter: drop-shadow(0 5px 7px rgba(211,170,85,.5));
  transform: translateY(-2px);
}
#Footer { padding: 16px 12px 28px; color: #d7c49d; text-shadow: 1px 1px 2px #000; }
#Footer a:link, #Footer a:visited { color: var(--oldot-gold-light); }
input[type="text"], input[type="password"], input[type="email"], select, textarea {
  border: 1px solid #70502c;
  outline: 1px solid rgba(255,229,166,.28);
  background-color: #f1dfb9;
  color: #29180d;
  box-shadow: inset 1px 1px 3px rgba(54,29,12,.25);
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, select:focus, textarea:focus {
  border-color: #a77833;
  box-shadow: 0 0 0 2px rgba(211,170,85,.23), inset 1px 1px 3px rgba(54,29,12,.2);
}
@media (max-width: 1023px) {
  body { background-position: center top !important; background-size: auto 720px !important; }
  .main-site-container { min-width: 0; width: 100%; margin: 0 auto; filter: none; }
  .main-header { height: 116px; }
  .MobileTibiaLogo { width: 108px; height: 116px; filter: drop-shadow(0 4px 5px rgba(0,0,0,.65)); }
  .Content { max-width: 100%; }
  .Content .BoxContent { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .Content img, .Content iframe, .Content video { max-width: 100%; height: auto; }
  #Footer { padding-inline: 18px; }
}

@media (max-width: 768px) {
  html { scroll-behavior: smooth; }
  body { overflow-x: hidden; }
  .main-site-container {
    display: block !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  .main-header {
    display: block;
    visibility: visible;
    position: relative;
    height: 116px;
  }
  #MobileMenu { display: block; }
  .main-menu,
  .main-themboxes,
  .Themeboxes { display: none !important; }
  .main-content {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 6px !important;
  }
  .Content,
  #ContentHelper { width: 100% !important; max-width: 100% !important; }
  .Content .Box { margin-left: 0 !important; margin-right: 0 !important; }
  .Content .Corner-tr,
  .Content .Corner-br,
  .Content .Corner-tl,
  .Content .Corner-bl { display: none; }
  .Content .Border_2,
  .Content .Border_3 { margin: 0; border-left: 0; border-right: 0; }
  .Content .BoxContent { box-sizing: border-box; min-width: 0; }
  .InfoBar { width: 100% !important; box-sizing: border-box; }
  #RightArtwork { display: none !important; }
  #BackToTopButton { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}
.ImgPesquisarPersonagembarrinha {
  background: url(/images/lupa.gif) no-repeat;
  border: 0;
  margin-left: 173px;
  margin-top: -38px;
  position: absolute;
  z-index: 1081;
}
.inputbk {
  margin-top: -35px;
  width: 201px;
  height: 24px;
  z-index: 1080;
  position: absolute;
  border-radius: 7px;
  border: 1px solid rgb(255 255 255);
  background-image: linear-gradient(to right, rgb(86 1 1), #ff3d3d);
  color: #fff;
  text-align: center;
  box-shadow: 0 0 3px #00242c;
  outline: 0;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 11px;
}
.ImgPesquisarPersonagem {
  background: url(/images/imgbuscapersonagem/procurar.png) no-repeat;
  width: 94px;
  height: 30px;
  border: 0;
  margin-left: 200px;
  margin-top: -38px;
  position: absolute;
  z-index: 10;
}
.SmallMenuBox {
  z-index: 100;
}
#LeftArtwork #TibiaLogoArtworkTop {
  position: relative;
  top: -68px;
  left: 0px;
  height: 220px;
  width: auto;
  z-index: 101;
  cursor: pointer;
  border: 0;
}
.SubmenuitemLabel {
    margin: 0;
    border-top: 0;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 23px;
    border-bottom: 1px solid #505050;
    overflow: hidden;
    font-family: 'Laila', serif;
}
#BannerModal .modal-open .modal {
    z-index: 2060;
    --bs-backdrop-zindex: 2060;
}
.MobileTibiaLogo {
    position: relative;
    top: 0px;
    width: 90px;
    height: 110px;
    margin-left: auto;
    margin-right: auto;
    background-size: contain;
    background-image: url(../zinx-logo-artwork-top.png);
    background-position: center;
    background-repeat: no-repeat;
    z-index: 999;
}
.main-site-container {
    margin: 35px auto;
}

.Content #FeaturedArticle #TeaserText {
	height: 100% !important;
}

/* Menu lateral: alinhamento dos botoes, rotulos e controles +/- */
#Menu {
  width: 170px;
  box-sizing: border-box;
}

#Menu .menuitem,
#Menu .MenuButton,
#Menu .Button {
  width: 170px;
  box-sizing: border-box;
}

#Menu .MenuButton {
  height: 34px;
  overflow: visible;
}

#Menu .Button {
  position: absolute;
  inset: 0;
  height: 34px;
}

#Menu .Icon {
  top: 1px;
  left: 9px;
  width: 32px;
  height: 32px;
  z-index: 2;
}

#Menu .Label {
  top: 4px;
  left: 43px;
  width: 116px;
  height: 26px;
  line-height: 26px;
  white-space: nowrap;
  z-index: 2;
}

#Menu .Extend {
  top: 11px;
  right: 4px;
  width: 12px;
  height: 12px;
  z-index: 4;
}

#Menu .Submenu {
  width: 160px;
  margin: 0 5px;
  box-sizing: border-box;
  overflow: visible;
}

#Menu .Submenuitem {
  min-height: 22px;
  box-sizing: border-box;
}

#Menu .SubmenuitemLabel {
  width: 100%;
  min-height: 22px;
  padding: 3px 18px 3px 23px;
  line-height: 16px;
  box-sizing: border-box;
  white-space: normal;
}

#Menu .Submenuitem:hover .SubmenuitemLabel {
  padding-left: 23px;
  background: linear-gradient(90deg, rgba(211,170,85,.13), rgba(211,170,85,.03));
}

#Menu .ActiveSubmenuItemIcon {
  top: 6px;
  left: 7px;
}