/* ==========================================================================
   IMPERA — OFFICIAL TIBIA.COM STYLE LAYER (v1)
   Re-skins the modern dark redesign with the classic official Tibia look:
   dark blue background, parchment parchment-brown content boxes, green
   glowing menu buttons and white-on-black submenu items.
   Loaded AFTER modern_redesign.css so it wins the cascade.
   ========================================================================== */

:root {
  /* Official tibia.com palette */
  --ot-bg: #0e2a47;                 /* deep tibian blue */
  --ot-bg-dark: #0a1f35;
  --ot-panel: #3d4148;              /* outer box grey frame */
  --ot-panel-dark: #2b2e33;
  --ot-parchment: #fffceb;          /* parchment claro estilo tibia.com */
  --ot-parchment-light: #fffef6;
  --ot-parchment-dark: #f1e8cc;
  --ot-brown: #505050;              /* headline bar */
  --ot-border: #000000;
  --ot-green: #3ba62f;              /* menu button green */
  --ot-green-dark: #2c7d23;
  --ot-green-glow: #7dff5e;
  --ot-menu-bg: #0d1a26;            /* submenu black-blue */
  --ot-text: #3a3223;               /* dark text on parchment */
  --ot-link: #00429e;               /* classic blue link on parchment */

  --font-tibia: 'Cinzel', Georgia, serif;
  --font-tibia-body: Verdana, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   MOBILE READABILITY GUARDRAILS
   Prevent iOS/Android auto-zoom amplification on text and images.
   Keeps layout density on small screens and disables oversized tap-zoom.
   -------------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

img {
  max-width: 100% !important;
  height: auto !important;
  width: auto !important;
  max-height: 100vh !important;
}

.Content,
.Sidebar,
.BoostedContainer,
.BoostedBox,
.BoostedBox.GoldBorder,
.Themebox,
.ThemeboxContent,
#HighscoresBox,
#newsticker,
#news,
.NewsArticleCard,
#Menu,
.MenuButton,
.MenuButton:hover,
.ThemeboxFooter a,
#HighscoresBox .ThemeboxFooter a {
  touch-action: manipulation;
}

/* Keep pixel sprites intact on mobile (no auto upscale) */
.BoostedBox .BoostedIcon img,
#HighscoresBox .SidebarHighscoreOutfit .OutfitWrapper img,
.SidebarHighscoreOutfit .OutfitWrapper img,
.HighscoreOutfit img {
  image-rendering: pixelated !important;
  image-rendering: -moz-crisp-edges !important;
  image-rendering: crisp-edges !important;
  -ms-interpolation-mode: nearest-neighbor !important;
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
}

/* Sidebar highscore outfits keep a stable rendered footprint on small screens */
#HighscoresBox .SidebarHighscoreOutfit .OutfitWrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Caption text never gets blown up by mobile text scaling */
.BoostedBox .BoostedCaption {
  font-size: clamp(10px, 2.4vw, 11px) !important;
  line-height: 1.25 !important;
}

/* Rank and name text stay legible without overscaling on phones */
.SidebarHighscoreRank,
#HighscoresBox .SidebarHighscoreRank {
  font-size: clamp(10px, 2.2vw, 13px) !important;
}
#HighscoresBox .SidebarHighscoreName,
#HighscoresBox .SidebarHighscoreLevel {
  font-size: clamp(10px, 2.2vw, 12px) !important;
}

/* Mobile scale lock: ensure tiny CSS px-based elements don't inflate on touch */
@media (max-width: 720px) {
  .BoostedBox .BoostedIcon img,
  .SidebarHighscoreOutfit .OutfitWrapper img,
  #HighscoresBox .SidebarHighscoreOutfit .OutfitWrapper img,
  .HighscoreOutfit img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   PAGE BACKGROUND & LAYOUT FRAME
   -------------------------------------------------------------------------- */
html, body {
  background: var(--ot-bg-dark) !important;
  background-image: radial-gradient(ellipse at top, #16436e 0%, var(--ot-bg) 35%, var(--ot-bg-dark) 100%) !important;
  font-family: var(--font-tibia-body) !important;
}

#ArtworkHelper {
  background-position: top center !important;
  background-size: 1920px auto !important;
  box-shadow: inset 0 -160px 120px -30px rgba(10, 31, 53, 0.95) !important;
}

/* Soft blue vignette instead of the dark one */
#ArtworkHelper::after {
  background: radial-gradient(circle at top center, transparent 45%, rgba(10, 31, 53, 0.55) 85%, var(--ot-bg-dark) 100%),
              linear-gradient(to bottom, transparent 70%, var(--ot-bg-dark) 100%) !important;
}

/* --------------------------------------------------------------------------
   CONTENT BOXES — classic Tibia panel + parchment interior
   -------------------------------------------------------------------------- */
.Content .Box {
  background: var(--ot-panel) !important;
  background-image: linear-gradient(180deg, #4a4e56 0%, #3d4148 12%, #35383e 100%) !important;
  border: 1px solid #000 !important;
  border-radius: 6px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: none !important;
  padding: 3px !important;
}

.Content .Box::before {
  display: none !important; /* no gold line */
}

/* Parchment interior */
.Content .BoxContent {
  background: var(--ot-parchment) !important;
  background-image: linear-gradient(180deg, var(--ot-parchment-light) 0%, var(--ot-parchment) 30%, var(--ot-parchment-dark) 100%) !important;
  color: var(--ot-text) !important;
  border: 1px solid #5b5340 !important;
  border-radius: 3px !important;
  font-family: var(--font-tibia-body) !important;
  font-size: 12px !important;
  text-shadow: none !important;
}

/* Headline title bar — dark grey strip like official */
.Content .Box > .Title,
#newsticker > .Title,
#news > .Title {
  background: var(--ot-brown) !important;
  background-image: linear-gradient(180deg, #6a6a6a 0%, #505050 45%, #3c3c3c 100%) !important;
  border-bottom: 2px solid #2a2a2a !important;
  border-radius: 4px 4px 0 0 !important;
  height: 28px !important;
  padding: 2px 10px !important;
  filter: none !important;
}
/* Restore retro corner/border GIFs hidden by the modern layer */
.Corner-tl, .Corner-tr, .Corner-bl, .Corner-br,
.CornerWrapper-b, .Border_1, .BorderTitleText {
  display: block !important;
}

/* Links on parchment: classic blue */
.Content .BoxContent a,
.NewsArticleBody a {
  color: var(--ot-link) !important;
  font-weight: bold !important;
  text-shadow: none !important;
}
.Content .BoxContent a:hover,
.NewsArticleBody a:hover {
  color: #c47a00 !important;
}

/* Headings on parchment: dark brown serif, not gold */
.Content .BoxContent h1,
.Content .BoxContent h2,
.Content .BoxContent h3,
.Content .BoxContent h4 {
  color: #4a3a20 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

/* Tables inside content: parchment striping */
.Content .BoxContent table td,
.NewsArticleBody table td,
.Content #news table td {
  color: var(--ot-text) !important;
  border-bottom: 1px solid rgba(90, 80, 50, 0.25) !important;
}

.Content .BoxContent table,
.NewsArticleBody table,
.Content #news table {
  background: transparent !important;
  border: 1px solid #5b5340 !important;
}

/* --------------------------------------------------------------------------
   NEWS TICKER & ARTICLES — parchment cards
   -------------------------------------------------------------------------- */
#newsticker .Row .Odd,
#newsticker .Row .Even,
#NewsTicker .Row .Odd,
#NewsTicker .Row .Even {
  background: rgba(255, 252, 235, 0.55) !important;
  border: 1px solid #9d9467 !important;
  border-radius: 3px !important;
}
#newsticker .Row:hover .Odd,
#newsticker .Row:hover .Even {
  background: rgba(255, 255, 245, 0.85) !important;
  border-color: #6e6540 !important;
}

.NewsTickerText {
  color: var(--ot-text) !important;
}

/* --------------------------------------------------------------------------
   NEWS TICKER — compact rows, legible text, centred icons
   --------------------------------------------------------------------------
   The row is a flex line, so the entry cell used to shrink to its content: the
   date badge sat right after the text instead of at the right edge, and the
   icon was absolutely placed at top:1px/left:1px with a 0.9 scale, sticking out
   above the row instead of being centred. The cell now fills the row, the icon
   is a real flex item centred in a 16px box, and the date is flush right.
   -------------------------------------------------------------------------- */
#newsticker .Title {
  height: 22px !important;
  max-width: 190px !important;
}
#newsticker .BoxContent {
  padding: 8px 6px 5px 6px !important;
}
#newsticker .Row {
  margin-bottom: 3px !important;
  padding: 0 !important;
  min-height: 0 !important;
}
#newsticker .Row:last-child {
  margin-bottom: 0 !important;
}
#newsticker .Row > .Odd,
#newsticker .Row > .Even {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  padding: 3px 7px !important;
  box-sizing: border-box !important;
  background: rgba(255, 252, 235, 0.92) !important;
  border: 1px solid #9d9467 !important;
  border-radius: 3px !important;
}
#newsticker .Row:hover .Odd,
#newsticker .Row:hover .Even {
  background: #fffef7 !important;
  border-color: #6e6540 !important;
  transform: none !important;
}
#newsticker .NewsTickerIcon {
  position: static !important;
  top: auto !important;
  left: auto !important;
  flex: 0 0 16px !important;
  align-self: center !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  transform: none !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 16px 16px !important;
  image-rendering: pixelated !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)) !important;
}
#newsticker .NewsTickerText {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px 8px !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: #241d10 !important;
  font-size: 12.5px !important;
  line-height: 1.3 !important;
}
/* Two lines max (no display rule: the +/- toggle flips it inline) */
#newsticker .NewsTickerShortText {
  order: 1 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: 2.6em !important;
  margin: 0 !important;
  overflow: hidden !important;
  font-size: 12.5px !important;
  color: #241d10 !important;
}
#newsticker .NewsTickerFullText {
  order: 1 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  font-size: 12.5px !important;
  color: #241d10 !important;
}
#newsticker .NewsTickerDate {
  order: 2 !important;
  flex: 0 0 auto !important;
  margin: 0 0 0 auto !important;
  padding: 2px 6px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  white-space: nowrap !important;
  color: #5b4300 !important;
  background: #fff4ca !important;
  border: 1px solid #b8a468 !important;
  border-radius: 3px !important;
}

.NewsArticleCard {
  background: var(--ot-parchment) !important;
  background-image: linear-gradient(180deg, var(--ot-parchment-light) 0%, var(--ot-parchment) 100%) !important;
  border: 1px solid #5b5340 !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4) !important;
  border-radius: 3px !important;
}
.NewsHeadlineBackground {
  background: var(--ot-brown) !important;
  background-image: linear-gradient(180deg, #6a6a6a 0%, #505050 50%, #3c3c3c 100%) !important;
  border-bottom: 2px solid #2a2a2a !important;
  border-left: none !important;
}
.NewsHeadlineBackground .NewsHeadline,
.NewsHeadlineBackground h2,
.NewsHeadlineBackground a {
  color: #f5e9c8 !important;
}
.NewsArticleBody {
  color: var(--ot-text) !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
}

/* --------------------------------------------------------------------------
   NEWS ARTICLES — compact cards, centred headline icon
   --------------------------------------------------------------------------
   The 32x32 headline icon used to blow the 32px title bar open: the global
   `img { width: auto }` rule silently overrode the inline 20px, so the sprite
   hung 9px below the bar and dragged the date/title out of line. The icon is
   now a fixed, centred flex item and the paddings are tightened.
   -------------------------------------------------------------------------- */
.NewsArticleCard {
  margin-bottom: 12px !important;
  border-radius: 3px !important;
}
.Content #News .NewsHeadlineBackground,
.NewsHeadlineBackground {
  height: 34px !important;
  padding: 1px 10px !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  box-sizing: border-box !important;
  border-top: 1px solid #d4af37 !important;
}
.Content #News .NewsHeadlineIcon,
.NewsArticleCard .NewsHeadlineIcon {
  position: static !important;
  top: auto !important;
  left: auto !important;
  flex: 0 0 32px !important;
  align-self: center !important;
  width: 32px !important;
  height: 32px !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  image-rendering: pixelated !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)) !important;
}
.Content #News .NewsHeadlineDate,
.NewsArticleCard .NewsHeadlineDate {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 2px 6px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  white-space: nowrap !important;
  color: #5b4300 !important;
  background: #fff4ca !important;
  border: 1px solid #b8a468 !important;
  border-radius: 3px !important;
}
.Content #News .NewsHeadlineText,
.NewsHeadlineText {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  align-self: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #fff8e6 !important;
  letter-spacing: 0.4px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.NewsHeadlineAuthor {
  flex: 0 0 auto !important;
  align-self: center !important;
  margin-left: auto !important;
  font-size: 10.5px !important;
  color: #e8dcc0 !important;
}
.Content #News .NewsArticleBody,
.NewsArticleBody {
  padding: 8px 11px 10px 11px !important;
  color: #33291a !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}
/* Trim the outer paragraph margins so a one-line news item is not padded with
   an inch of empty parchment (inner spacing between paragraphs stays). */
.NewsArticleBody > :first-child {
  margin-top: 0 !important;
}
.NewsArticleBody > :last-child {
  margin-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   MENU — official green glowing buttons + black submenu
   -------------------------------------------------------------------------- */
#Menu {
  background: rgba(8, 20, 34, 0.88) !important;
  border: 1px solid #000 !important;
  border-radius: 6px !important;
  padding: 6px 5px !important;
  backdrop-filter: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), inset 0 0 22px rgba(20, 60, 100, 0.35) !important;
}

.MenuButton {
  background: var(--ot-green) !important;
  background-image: linear-gradient(180deg, #63c94f 0%, var(--ot-green) 45%, var(--ot-green-dark) 100%) !important;
  border: 1px solid #1d4d16 !important;
  border-radius: 4px !important;
  box-shadow: 0 0 9px rgba(90, 255, 60, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  height: 36px !important;
}
.MenuButton:hover {
  background-image: linear-gradient(180deg, #7ada66 0%, #4cb83d 45%, #2c7d23 100%) !important;
  border-color: #b8ffb0 !important;
  box-shadow: 0 0 16px rgba(125, 255, 94, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  transform: none !important;
}

.MenuButton .Icon {
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.9)) brightness(1.15) !important;
}
.MenuButton .Label {
  filter: brightness(1.35) drop-shadow(0 1px 1px rgba(0,0,0,0.9)) !important;
}

/* Submenu: black panel with white text, hover grey — official look */
.Submenu {
  background: var(--ot-menu-bg) !important;
  border-left: 1px solid #2e5c88 !important;
  border-radius: 0 0 4px 4px !important;
  margin: 2px 0 6px 3px !important;
  padding: 5px 3px !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8) !important;
}

.Submenuitem {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 3px !important;
  height: 26px !important;
}
.Submenuitem:hover {
  background: #4f4f4f !important;   /* official hover grey */
  transform: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

.SubmenuitemLabel {
  font-family: Verdana, Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: normal !important;
  color: #ffffff !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9) !important;
}
.Submenuitem:hover .SubmenuitemLabel {
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   SIDEBAR WIDGETS — parchment cards
   -------------------------------------------------------------------------- */
.BoostedBox {
  background: rgba(10, 10, 10, 0.92) !important;
  background-image: none !important;
  border: 1px solid #5b5340 !important;
  border-radius: 4px !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.85), 0 2px 8px rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(1px) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.BoostedBox:hover {
  transform: none !important;
  border-color: #d4af37 !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.95), 0 0 14px rgba(255,215,0,0.15), 0 2px 10px rgba(0,0,0,0.5) !important;
}
.BoostedBox div {
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(255, 215, 0, 0.25) !important;
}

.BoostedBox .BoostedCaption {
  font-size: 9px !important;
  line-height: 12px !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 1px #000, 0 0 7px rgba(255, 215, 0, 0.3) !important;
}
.BoostedBox .BoostedIcon {
  width: 60px !important;
  height: 52px !important;
  margin: 0 !important;
  overflow: visible !important;
}
.BoostedBox .BoostedIcon img {
  width: 52px !important;
  height: 52px !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  transform: translate(0,0) !important;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.55)) !important;
  transition: transform 0.15s ease, filter 0.15s ease !important;
}
.BoostedBox:hover .BoostedIcon img {
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.6)) !important;
  transform: scale(1.15) !important;
}

#Themeboxes .Box,
#Themeboxes .Themebox {
  background: var(--ot-panel) !important;
  border: 1px solid #000 !important;
  border-radius: 4px !important;
}

/* --------------------------------------------------------------------------
   LOGIN / DOWNLOAD BUTTONS — official gold-amber
   -------------------------------------------------------------------------- */
.MediumButtonBackground {
  background-image: linear-gradient(180deg, #f0c040 0%, #d99e1f 50%, #b07a10 100%) !important;
  border: 1px solid #6b4c05 !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
.MediumButtonBackground::after {
  color: #3d2b04 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

/* --------------------------------------------------------------------------
   FOOTER & MISC
   -------------------------------------------------------------------------- */
#Footer {
  color: #c9d9ea !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}
#Footer a {
  color: #ffd76e !important;
}
#Footer a:hover {
  color: #ffe9a8 !important;
}

.scrollToTop::after {
  color: #ffe9a8 !important;
}

/* Keep accessibility features from the base layer */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline-color: #ffd76e !important;
}

/* Submenu icon (active page arrow) hidden — the active item is marked by its label color instead */
.ActiveSubmenuItemIcon {
  display: none !important;
}

/* ==========================================================================
   PLAY NOW! / CREATE ACCOUNT BUTTONS — official tibia.com loginbox style
   Blue glossy button inside a dark metal frame, without the chains.
   ========================================================================== */

/* --- Outer metal frame around the whole login button block --- */
#MenuColumn #Loginbox {
  background: linear-gradient(180deg, #4a4e55 0%, #33363c 50%, #232529 100%) !important;
  border: 1px solid #15161a !important;
  border-radius: 7px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.7),
    0 3px 9px rgba(0, 0, 0, 0.65) !important;
  padding: 5px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  width: 100% !important;
  max-width: 100% !important;   /* span the full sidebar column width */
  margin: 0 auto !important;
}

/* --- Play Now! button (stretches to the exact same width as Create Account) --- */
#MenuColumn #LoginButtonContainer {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  display: block !important;
}

#MenuColumn #LoginButton,
#MenuColumn #PlayNowContainer {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
}

#MenuColumn #ButtonText {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: linear-gradient(180deg, #4a4e55 0%, #2b2e34 55%, #1a1c20 100%) !important;
  border: 1px solid #101114 !important;
  border-radius: 5px !important;
  box-sizing: border-box !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -6px 10px -6px rgba(0, 0, 0, 0.7),
    0 0 8px rgba(212, 175, 55, 0.25) !important;
  cursor: pointer !important;
  transition: filter 0.15s ease, box-shadow 0.15s ease !important;
}

/* Kill the duplicated pseudo-element label from the base layer */
#MenuColumn #ButtonText::before,
#ButtonText::before {
  content: none !important;
  display: none !important;
}

#MenuColumn #ButtonText:hover {
  filter: brightness(1.3) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 16px rgba(255, 215, 0, 0.5) !important;
}

/* Real label (single source of truth) */
#MenuColumn #ButtonText .ButtonTextLabel,
#ButtonText .ButtonTextLabel {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  font-family: Verdana, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-style: italic !important;
  color: #ffd76e !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 8px rgba(255, 200, 60, 0.5) !important;
  line-height: 36px !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

/* --- Create Account strip under the blue button --- */
#MenuColumn #Loginbox .Loginstatus {
  margin: 5px 0 0 !important;
  width: 100% !important;
  height: 26px !important;
  background: linear-gradient(180deg, #3a3d43 0%, #26282d 55%, #1a1b1f 100%) !important;
  border: 1px solid #101114 !important;
  border-radius: 4px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: filter 0.15s ease, background 0.15s ease !important;
  overflow: visible !important;
}

#MenuColumn #Loginbox .Loginstatus:hover {
  filter: brightness(1.25) !important;
}

#MenuColumn #LoginstatusText_2 {
  width: 100% !important;
  height: 100% !important;
  background: none !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Remove the old pseudo-element labels (now real text inside) */
#MenuColumn #LoginstatusText_2::before,
#LoginstatusText_2::before {
  content: none !important;
  display: none !important;
}

#LoginstatusText_2 .ButtonStatusLabel {
  display: block !important;
  font-family: Verdana, Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #e8e8e8 !important;
  text-shadow: 0 1px 1px #000 !important;
  letter-spacing: 0.3px !important;
  line-height: 24px !important;
  text-align: center !important;
}

/* ==========================================================================
   CREATE ACCOUNT FORM — cream text on the dark form background
   ========================================================================== */

/* Labels: cream, bold, clearly visible on the dark form */
.Content .BoxContent td.LabelV,
.Content .BoxContent .LabelV,
.Content .BoxContent .LabelH {
  color: #f8ecc9 !important;
  font-family: Verdana, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9) !important;
  background: transparent !important;
}

/* All text inside the form tables: cream */
.Content .BoxContent .TableContent td span,
.Content .BoxContent .TableContent td,
.Content .BoxContent .TableContainer td span,
.Content .BoxContent .InnerTableContainer td {
  color: #f8ecc9 !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.85) !important;
}

/* Inputs and selects: dark bg with cream typed text */
.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 {
  background: #10131a !important;
  background-image: none !important;
  border: 1px solid #6e6444 !important;
  border-radius: 3px !important;
  color: #f8ecc9 !important;
  caret-color: #ffd76e !important;
  font-family: Verdana, Arial, sans-serif !important;
  font-size: 13px !important;
  text-shadow: none !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}
.Content .BoxContent input[type="text"]:focus,
.Content .BoxContent input[type="password"]:focus,
.Content .BoxContent input[type="email"]:focus,
.Content .BoxContent select:focus,
.Content .BoxContent textarea:focus {
  border-color: #ffd76e !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.3) !important;
}

/* Any input (catch-all so typed text is always cream) */
.Content .BoxContent input {
  color: #f8ecc9 !important;
  background-color: #10131a !important;
}

/* Radio labels & checkbox text (sex/vocation options) */
.Content .BoxContent label,
.Content .BoxContent td label {
  color: #f8ecc9 !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.85) !important;
}

/* Form error messages: bright red readable on dark */
.Content .BoxContent .FormFieldError {
  color: #ff6b6b !important;
  font-weight: 700 !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9) !important;
}

/* Section header rows ("Please select the following check box") */
.Content .BoxContent .TableContent td b,
.Content .BoxContent .TableContent td strong {
  color: #ffffff !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9) !important;
}

/* ==========================================================================
   ACCOUNT MANAGEMENT — panel layout
   ========================================================================== */

/* Top nav bar: title + anchor links + action button */
.AccountPageNav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 7px 12px;
  background: linear-gradient(180deg, #1d2940 0%, #131c2c 100%);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.AccountPageNavTitle {
  font-family: var(--font-tibia, 'Cinzel', Georgia, serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #f8ecc9;
  margin-right: auto;
}
.AccountPageNavLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.AccountPageNavLinks a {
  color: #ffd76e;
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.85);
}
.AccountPageNavLinks a:hover { color: #ffe9a8; }
.AccountPageNavButton {
  font-family: var(--font-tibia, 'Cinzel', Georgia, serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #1a2436 !important;
  background: linear-gradient(180deg, #ffd76e 0%, #d4a937 100%);
  border: 1px solid #8a6d1f;
  border-radius: 4px;
  padding: 5px 14px;
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  transition: filter 0.15s ease;
}
.AccountPageNavButton:hover { filter: brightness(1.12); }

/* Account Status: icon | info | button stack */
.AccountStatusRow > td { vertical-align: middle !important; }
.AccountStatusIconCell { width: 52px; text-align: center; }
.AccountStatusInfoCell { padding: 4px 8px !important; }
.AccountStatusImage {
  width: 38px !important;
  height: 38px !important;
  max-width: none !important;
  image-rendering: pixelated;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.7));
  margin: 0 8px 0 4px !important;
}
.AccountStatusButtonsCell {
  width: 128px;
  display: table-cell;
  vertical-align: middle;
}
.AccountStatusButtonsCell .BigButton {
  display: block;
  margin: 0 0 4px 0;
  min-width: 120px;
}
.AccountStatusButtonsCell form { display: block; margin: 0 0 4px 0 !important; }
.AccountStatusButtonsCell form:last-child { margin-bottom: 0 !important; }
.AccountStatusTitle {
  display: block;
  font-family: var(--font-tibia, 'Cinzel', Georgia, serif);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1.25;
}
.AccountStatusTitle.StatusPremium { color: #7fe08a; }
.AccountStatusTitle.StatusFree { color: #ff8f7a; }
.AccountStatusLine {
  display: block;
  color: #c9bd93 !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.85) !important;
}

/* Attention! Download row */
.AttentionDownloadRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px;
}
.AttentionIcon {
  font-size: 26px;
  color: #ffd76e;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
  flex-shrink: 0;
}
.AttentionText {
  flex: 1;
  color: #e8dcb8 !important;
  font-size: 12.5px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.85);
}
.AttentionText a { color: #ffd76e !important; font-weight: 700; }
.AttentionDownloadLink {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  flex-shrink: 0;
}
.AttentionDownloadLink img {
  width: 38px;
  height: 38px;
  max-width: none;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.65));
}
.AttentionDownloadLink span {
  color: #ffd76e;
  font-weight: 700;
  font-size: 11px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.85);
}
.AttentionDownloadLink:hover span { color: #ffe9a8; }

/* Characters table cells */
.CharacterWorldCell { color: #c9bd93 !important; font-size: 12px; }
.CharacterNameLine { white-space: nowrap; vertical-align: middle; }
.CharacterName {
  font-size: 14px;
  font-family: var(--font-tibia, 'Cinzel', Georgia, serif);
  letter-spacing: 0.3px;
}
.CharacterSubLine {
  color: #c9bd93 !important;
  font-size: 11px !important;
  line-height: 1.5;
}
.CharacterOptions a {
  color: #ffd76e !important;
  text-decoration: none !important;
  font-size: 11px !important;
  padding: 1px 6px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 3px;
  background: rgba(212, 175, 55, 0.08);
  transition: all 0.15s ease;
  display: inline-block;
}
.CharacterOptions a:hover {
  background: rgba(212, 175, 55, 0.2);
  border-color: #ffd76e;
  color: #ffe9a8 !important;
}

/* Action button rows under panels */
.CharactersActionsRow {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  padding: 6px 4px 0 4px;
}
.CharactersActionsRow form { display: contents; }

/* Mobile: stack status row, keep tables scrollable */
@media (max-width: 760px) {
  .AccountPageNavTitle { width: 100%; margin-right: 0; }
  .AccountStatusRow { display: block; }
  .AccountStatusRow > td { display: block; width: auto !important; }
  .AccountStatusIconCell { text-align: left; padding-bottom: 4px !important; }
  .AccountStatusButtonsCell { display: block; padding-top: 8px !important; }
  .AccountStatusButtonsCell .BigButton { display: inline-block; margin: 0 6px 5px 0; }
  .AccountStatusButtonsCell form { display: inline-block; margin: 0 6px 5px 0 !important; }
  .AttentionDownloadRow { flex-wrap: wrap; }
  .CharactersActionsRow { justify-content: flex-start; }
}


.Content .BoxContent .BigBoldText {
  font-size: 18px !important;
  font-family: var(--font-tibia, 'Cinzel', Georgia, serif) !important;
  color: #f8ecc9 !important;
  letter-spacing: 0.4px !important;
}

.Content .BoxContent .BigBoldText small,
.Content .BoxContent td small {
  color: #c9bd93 !important;
  font-size: 11px !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.85) !important;
}

/* Get Coins / Logout buttons: consistent compact stack */
.Content .BoxContent .BigButton {
  min-width: 128px !important;
  border-radius: 4px !important;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55) !important;
  transition: filter 0.15s ease, transform 0.15s ease !important;
}
.Content .BoxContent .BigButton:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}
.Content .BoxContent .BigButtonText {
  font-family: var(--font-tibia, 'Cinzel', Georgia, serif) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
  cursor: pointer;
}

/* Premium benefits strip: icons aligned, subtle carding.
   The flex container is a DIV inside the td — flex on a td breaks table layout. */
.premiumbenefits {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 10px !important;
  padding: 8px 4px !important;
}
.premiumbenefits > div {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex: 1 1 170px !important;
  min-width: 0 !important;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 6px;
  padding: 6px 10px !important;
  gap: 8px !important;
  margin: 0 !important;
  text-align: left !important;
}
.premiumbenefits > div > div {
  flex: 1 !important;
  min-width: 0 !important;
  color: #c9bd93 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.85) !important;
}

/* Download Client: clean row, no absolute-positioned float mess */
.DownloadRow { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; height: auto !important; min-height: 0 !important; padding: 4px 2px !important; }
.DownloadText { position: static !important; top: auto !important; color: #e8dcb8 !important; font-size: 12px !important; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.85) !important; }
.DownloadText a { color: #ffd76e !important; font-weight: 700 !important; }
#DowloadBox {
  position: static !important;
  float: right !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  margin-left: 14px !important;
}
.PremiumFeatureImage1 {
  width: 22px !important;
  height: 22px !important;
  max-width: none !important;
  image-rendering: pixelated;
  filter: saturate(1.4) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
  flex-shrink: 0;
  margin: 0 !important;
}
#DowloadBox img {
  width: 48px !important;
  height: 48px !important;
  max-width: none !important;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.65));
  margin: 0 !important;
}
#DowloadBox .DownloadLink {
  position: static !important;
  bottom: auto !important;
  right: auto !important;
  color: #ffd76e !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.85) !important;
}
#DowloadBox .DownloadLink:hover { color: #ffe9a8 !important; }

/* Characters table: card rows instead of hard stripes */
.Content .BoxContent .TableContent tr.LabelH td {
  font-family: var(--font-tibia, 'Cinzel', Georgia, serif) !important;
  font-size: 11px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase;
  color: #ffd76e !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.35) !important;
  padding: 7px 10px !important;
}

.Content .BoxContent .TableContent tr[style*="background-color"] td {
  border-bottom: 1px solid rgba(212, 175, 55, 0.12) !important;
  padding: 8px 10px !important;
  transition: background 0.15s ease !important;
}
.Content .BoxContent .TableContent tr[style*="background-color"]:hover td {
  background: rgba(212, 175, 55, 0.07) !important;
}

/* Character name row: main badge + name (only the NAME line, not the sub-line) */
.Content .BoxContent .TableContent td > span[style*="white-space"] > span[id^="CharacterNameOf"] {
  font-size: 14px !important;
  font-family: var(--font-tibia, 'Cinzel', Georgia, serif) !important;
  letter-spacing: 0.3px !important;
}
.Content .BoxContent .TableContent td small span[id^="CharacterNameOf"] {
  font-size: 11px !important;
  font-family: inherit !important;
}
.Content .BoxContent .TableContent td img[src*="maincharacter"] {
  image-rendering: pixelated;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
  vertical-align: middle;
}

/* Online/offline + daily reward icons: aligned, crisp */
.Content .BoxContent .TableContent td img[src*="icon-status"],
.Content .BoxContent .TableContent td img[src*="on.gif"],
.Content .BoxContent .TableContent td img[src*="off.gif"] {
  image-rendering: pixelated;
  margin: 0 3px !important;
  vertical-align: middle !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

/* Edit/Delete links: subtle buttons instead of raw brackets */
.Content .BoxContent .TableContent span[id^="CharacterOptionsOf"] a {
  color: #ffd76e !important;
  text-decoration: none !important;
  font-size: 11px !important;
  padding: 1px 6px !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  border-radius: 3px !important;
  background: rgba(212, 175, 55, 0.08) !important;
  transition: all 0.15s ease !important;
  display: inline-block;
}
.Content .BoxContent .TableContent span[id^="CharacterOptionsOf"] a:hover {
  background: rgba(212, 175, 55, 0.2) !important;
  border-color: #ffd76e !important;
  color: #ffe9a8 !important;
}

/* Create Character / action buttons row: right aligned, breathing room */
.InnerTableButtonRow td.DivWithButton,
.Content .BoxContent .InnerTableButtonRow {
  padding-top: 6px !important;
}
.Content .BoxContent .InnerTableButtonRow form {
  display: inline-block;
  margin-left: 8px;
}

/* "Regular Characters" header strip */
.Content .BoxContent td[style*="text-align: center"][style*="font-weight: bold"] {
  font-family: var(--font-tibia, 'Cinzel', Georgia, serif) !important;
  font-size: 12px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase;
  color: #f8ecc9 !important;
  background: rgba(212, 175, 55, 0.06) !important;
  padding: 7px !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25) !important;
}

/* ==========================================================================
   TOP 5 PLAYERS WIDGET — vivid outfits & crisper readability
   ========================================================================== */

/* Widget container: slightly darker panel so colorful outfits pop */
#HighscoresBox.Themebox,
#HighscoresBox .ThemeboxContent {
  background: linear-gradient(180deg, #101828 0%, #0a1120 100%) !important;
  border-color: rgba(212, 175, 55, 0.45) !important;
}

/* Global reset: any other layer must not shift outfits via absolute margins/offsets */
.SidebarHighscoreOutfit img,
#HighscoresBox .SidebarHighscoreOutfit img,
.BoostedIcon img,
.BoostedBox .BoostedIcon img {
  position: static !important;
  margin: 0 !important;
  max-width: none !important;
  max-height: none !important;
  transform: translate(0,0) !important;
}
.OutfitWrapper {
  width: 46px !important;
  height: 46px !important;
  overflow: hidden !important;
}

/* ---- Top 5 Players (sidebar dark widget) ---- */
#HighscoresBox .SidebarHighscoreOutfit {
  width: 52px !important;
}
#HighscoresBox .OutfitWrapper {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255, 190, 60, 0.25) 0%, rgba(255, 190, 60, 0.08) 60%, transparent 75%) !important;
  box-shadow: 0 0 10px rgba(180, 120, 20, 0.35) !important;
}
#HighscoresBox .OutfitWrapper img {
  width: 44px !important;
  height: 44px !important;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.55)) !important;
  transition: transform 0.2s ease, filter 0.2s ease !important;
}
#HighscoresBox .SidebarHighscoreTable tr:hover .OutfitWrapper img {
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.6)) !important;
  transform: scale(1.12) !important;
}
#HighscoresBox .SidebarHighscoreTable tr:hover .OutfitWrapper {
  box-shadow: 0 0 16px rgba(180, 120, 20, 0.55) !important;
}
#HighscoresBox .SidebarHighscoreRank span {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 12px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9) !important;
}
#HighscoresBox .SidebarHighscoreRank span sup {
  font-size: 8px !important;
}
#HighscoresBox .SidebarHighscoreName {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.8) !important;
}
#HighscoresBox .SidebarHighscoreName:hover {
  color: #ffe9a8 !important;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5) !important;
}
#HighscoresBox .SidebarHighscoreLevel {
  font-size: 11px !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.8) !important;
}
#HighscoresBox .SidebarHighscoreLevel b {
  color: #ffd76e !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85) !important;
}

/* ---- Boosted Creature / Boss boxes (caption + icon size) ---- */
.BoostedBox .BoostedCaption {
  font-size: clamp(10px, 2.4vw, 11px) !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: #FFE9C2 !important;
  text-shadow: 0 1px 1px #000, 0 0 7px rgba(255, 215, 0, 0.35) !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.BoostedBox.GoldBorder .BoostedCaption {
  color: #FFD76E !important;
}
.BoostedBox .BoostedIcon {
  width: 74px !important;
  height: 54px !important;
  margin: 0 !important;
  overflow: visible !important;
}
.BoostedBox .BoostedIcon img {
  width: 56px !important;
  height: 56px !important;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.75)) !important;
  transition: transform 0.15s ease, filter 0.15s ease !important;
  will-change: transform;
}
.BoostedBox:hover .BoostedIcon img {
  filter: drop-shadow(0 3px 7px rgba(0,0,0,0.85)) !important;
  transform: scale(1.18) !important;
}

/* Mobile safeguard: stop pixel sprites from being blown up by image auto-sizing */
.BoostedBox .BoostedIcon img,
.BoostedBox .BoostedIcon,
.SidebarHighscoreOutfit .OutfitWrapper img,
#HighscoresBox .SidebarHighscoreOutfit .OutfitWrapper img,
.HighscoreOutfit img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
}

/* OUTFITS: true sprite colours, soft shadow for depth (no saturation/glow boost) */
.SidebarHighscoreOutfit .OutfitWrapper img,
#HighscoresBox .SidebarHighscoreOutfit .OutfitWrapper img {
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.9)) !important;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  transition: filter 0.2s ease, transform 0.2s ease !important;
}

.SidebarHighscoreTable tr:hover .OutfitWrapper img,
#HighscoresBox .SidebarHighscoreRow:hover .OutfitWrapper img {
  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.95)) !important;
  transform: scale(1.14) !important;
}

/* Bigger outfit frame so the sprite breathes */
.SidebarHighscoreOutfit .OutfitWrapper,
#HighscoresBox .SidebarHighscoreOutfit .OutfitWrapper {
  width: 50px !important;
  height: 50px !important;
}

/* Rank numbers with glow */
.SidebarHighscoreRank.rank-1,
#HighscoresBox .SidebarHighscoreRank.rank-1 {
  color: #ffd700 !important;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.9) !important;
  font-size: 13px !important;
}
.SidebarHighscoreRank.rank-2 {
  color: #e8e8f0 !important;
  text-shadow: 0 0 6px rgba(220, 225, 255, 0.6) !important;
}
.SidebarHighscoreRank.rank-3 {
  color: #ff9d3c !important;
  text-shadow: 0 0 6px rgba(255, 140, 40, 0.7) !important;
}
.SidebarHighscoreRank.rank-others {
  color: #b8c4d8 !important;
}
/* Row separator subtle, hover glow */
.SidebarHighscoreTable tr {
  border-bottom: 1px solid rgba(212, 175, 55, 0.18) !important;
}
.SidebarHighscoreTable tr:hover {
  background: rgba(212, 175, 55, 0.12) !important;
}

/* VIEW FULL RANKING link: gold, prominent */
.ThemeboxFooter a,
#HighscoresBox .ThemeboxFooter a {
  color: #ffd76e !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9) !important;
  transition: color 0.15s ease, text-shadow 0.15s ease !important;
}
.ThemeboxFooter a:hover,
#HighscoresBox .ThemeboxFooter a:hover {
  color: #ffe9a8 !important;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.7) !important;
}

/* ==========================================================================
   Highscores page - animated outfits + vivid rank styling
   ========================================================================== */

/* Rows */
.HighscoreRow td {
  padding: 6px 10px !important;
  vertical-align: middle !important;
}
.HighscoreRow:nth-child(even) td {
  background: rgba(0, 0, 0, 0.04) !important;
}
.HighscoreRow.HighscoreRank--gold td {
  background: linear-gradient(90deg, rgba(255, 200, 60, 0.22), rgba(255, 200, 60, 0.05)) !important;
}
.HighscoreRow.HighscoreRank--silver td {
  background: linear-gradient(90deg, rgba(200, 205, 215, 0.22), rgba(200, 205, 215, 0.05)) !important;
}
.HighscoreRow.HighscoreRank--bronze td {
  background: linear-gradient(90deg, rgba(205, 127, 50, 0.22), rgba(205, 127, 50, 0.05)) !important;
}

/* Rank number - medal style */
.HighscoreRow .HighscoreRank {
  display: inline-block;
  min-width: 30px;
  padding: 2px 6px;
  font-weight: bold;
  color: #4a3a20;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.HighscoreRow.HighscoreRank--gold .HighscoreRank {
  color: #8a6d00;
  text-shadow: 0 0 8px rgba(255, 200, 60, 0.9), 0 1px 0 rgba(255, 255, 255, 0.5);
}
.HighscoreRow.HighscoreRank--silver .HighscoreRank {
  color: #5a5f6a;
  text-shadow: 0 0 8px rgba(220, 225, 235, 0.8), 0 1px 0 rgba(255, 255, 255, 0.5);
}
.HighscoreRow.HighscoreRank--bronze .HighscoreRank {
  color: #8a4a1a;
  text-shadow: 0 0 8px rgba(230, 150, 80, 0.8), 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Animated outfit cell - vivid + glow like the sidebar widget */
.HighscoreOutfit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 110, 0.16) 0%, rgba(255, 215, 110, 0.04) 60%, transparent 75%);
  box-shadow: 0 0 12px rgba(255, 200, 80, 0.25);
}
.HighscoreOutfit img {
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
  transition: transform 0.2s ease, filter 0.2s ease;
}
.HighscoreRow:hover .HighscoreOutfit img {
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
  transform: scale(1.12);
}
.HighscoreRow:hover .HighscoreOutfit {
  box-shadow: 0 0 18px rgba(255, 200, 80, 0.45);
}

/* Player names */
.HighscoreRow a {
  font-weight: bold;
  color: #00429e !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.HighscoreRow a:hover {
  text-shadow: 0 0 8px rgba(0, 100, 220, 0.4);
}
.HighscoreRow a span {
  text-shadow: inherit;
}

/* ==========================================================================
   Top 5 Players sidebar widget - classic tibia.com ranking style
   (rank badge "1st", animated outfit, name + level/vocation, online dot)
   ========================================================================== */

/* Reset modern_redesign cell padding for the new layout */
#HighscoresBox .SidebarHighscoreTable,
#HighscoresBox .SidebarHighscoreTable tbody {
  display: table;
  width: 100%;
  border-collapse: collapse;
}
#HighscoresBox .SidebarHighscoreTable tr {
  display: table-row;
}
#HighscoresBox .SidebarHighscoreTable td {
  display: table-cell;
}

/* Rows */
#HighscoresBox .SidebarHighscoreRow td {
  padding: 3px 6px !important;
  vertical-align: middle !important;
  background: transparent !important;
}
#HighscoresBox .SidebarHighscoreRow:nth-child(odd) td {
  background: rgba(255, 255, 255, 0.03) !important;
}
#HighscoresBox .SidebarHighscoreRow:hover td {
  background: rgba(255, 200, 80, 0.08) !important;
}

/* Rank badge - "1st" medal style */
#HighscoresBox .SidebarHighscoreRank {
  width: 30px;
  white-space: nowrap;
}
#HighscoresBox .SidebarHighscoreBadge {
  display: inline-block;
  font-weight: bold;
  font-size: 13px;
  color: #b9a670;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
#HighscoresBox .SidebarHighscoreBadge sup {
  font-size: 8px;
  margin-left: 1px;
}
#HighscoresBox .SidebarHighscoreBadge--1 {
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255, 200, 60, 0.7), 0 1px 2px rgba(0, 0, 0, 0.8);
}
#HighscoresBox .SidebarHighscoreBadge--2 {
  color: #c8cdd7;
  text-shadow: 0 0 6px rgba(220, 225, 235, 0.5), 0 1px 2px rgba(0, 0, 0, 0.8);
}
#HighscoresBox .SidebarHighscoreBadge--3 {
  color: #e08a3a;
  text-shadow: 0 0 6px rgba(230, 150, 80, 0.5), 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Animated outfit - vivid with warm glow */
#HighscoresBox .SidebarHighscoreOutfit {
  width: 60px;
}
#HighscoresBox .OutfitWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 110, 0.16) 0%, rgba(255, 215, 110, 0.04) 60%, transparent 75%);
  box-shadow: 0 0 12px rgba(255, 200, 80, 0.25);
  overflow: visible;
}
#HighscoresBox .OutfitWrapper img {
  width: 46px;
  height: 46px;
  max-width: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
  transition: transform 0.2s ease, filter 0.2s ease;
}
#HighscoresBox .SidebarHighscoreRow:hover .OutfitWrapper img {
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
  transform: scale(1.12);
}
#HighscoresBox .SidebarHighscoreRow:hover .OutfitWrapper {
  box-shadow: 0 0 18px rgba(255, 200, 80, 0.45);
}

/* Name + level/vocation */
#HighscoresBox .SidebarHighscoreInfo {
  line-height: 1.35;
}
#HighscoresBox .SidebarHighscoreName {
  display: block;
  font-weight: bold;
  font-size: 13px;
}
#HighscoresBox .SidebarHighscoreName.is-online {
  color: #7ce38b !important;
  text-shadow: 0 0 6px rgba(80, 220, 120, 0.4);
}
#HighscoresBox .SidebarHighscoreName.is-offline {
  color: #c9c4b2 !important;
}
#HighscoresBox .SidebarHighscoreName:hover {
  text-shadow: 0 0 8px rgba(255, 200, 80, 0.6);
}
#HighscoresBox .SidebarHighscoreLevel {
  display: block;
  font-size: 11px;
  color: #e8dcb8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* Online dot */
#HighscoresBox .SidebarHighscoreStatus {
  width: 14px;
}
#HighscoresBox .SidebarHighscoreOnlineDot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #5a5245;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}
#HighscoresBox .SidebarHighscoreOnlineDot.is-online {
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.8);
}

/* ==========================================================================
   OUTFIT SLOTS — COMPLETE, CENTRED SPRITES (no circular mask, no glow halo)
   --------------------------------------------------------------------------
   Outfit images are 64x64 canvases with lots of transparent padding around a
   sprite that is not centred inside them, so the old round frame
   (border-radius + overflow:hidden + radial glow) was slicing the head, arms
   and feet and leaving the character off-centre with a visible gap.

   Sprites keep their true colours (no saturate/brightness/glow filter, which made
   them look neon) and only a soft drop shadow for depth.

   The widget now measures the sprite's alpha bounds (see outfit/outfit_source.php)
   and passes --ow/--oh/--ox/--oy so this square slot crops exactly to the
   character: every outfit is centred on both axes, and the safety margin keeps
   the walk animation from ever touching the edges. Without those custom
   properties the image falls back to the whole canvas.

   All five rows share one scale, which is the smallest one that still fits the
   tallest sprite of the list (the PHP side computes it). Scaling each sprite to
   fill the slot on its own made the tall outfits render small and the compact
   ones big - the rows looked mismatched - so what the slot guarantees is not
   "every outfit fills the box" but "every character is drawn at the same size".
   A sprite with tall ornaments (antlers, wings) simply sticks out further.
   Declared last on purpose, so it wins over the older outfit rules above.
   ========================================================================== */
#HighscoresBox .SidebarHighscoreRow td.SidebarHighscoreOutfit {
  width: 60px !important;
  padding: 3px 0 !important;
}
#HighscoresBox .SidebarHighscoreOutfit .OutfitWrapper,
#HighscoresBox .OutfitWrapper,
.SidebarHighscoreOutfit .OutfitWrapper {
  position: relative !important;
  display: block !important;
  width: 60px !important;
  height: 60px !important;
  max-width: none !important;
  max-height: none !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition: transform 0.18s ease !important;
}
#HighscoresBox .SidebarHighscoreOutfit .OutfitWrapper img,
#HighscoresBox .OutfitWrapper img,
.SidebarHighscoreOutfit .OutfitWrapper img {
  position: absolute !important;
  left: var(--ox, 0) !important;
  top: var(--oy, 0) !important;
  width: var(--ow, 100%) !important;
  height: var(--oh, 100%) !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  image-rendering: pixelated !important;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55)) !important;
  transition: filter 0.18s ease !important;
}
#HighscoresBox .SidebarHighscoreRow:hover .OutfitWrapper,
#HighscoresBox .SidebarHighscoreTable tr:hover .OutfitWrapper {
  background: none !important;
  box-shadow: none !important;
  transform: scale(1.05) !important;
}
#HighscoresBox .SidebarHighscoreRow:hover .OutfitWrapper img,
#HighscoresBox .SidebarHighscoreTable tr:hover .OutfitWrapper img,
.SidebarHighscoreTable tr:hover .OutfitWrapper img {
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.65)) !important;
}

/* ==========================================================================
   BOOSTED CREATURE / BOSS ICONS — hover stays in CSS
   --------------------------------------------------------------------------
   The grow-on-hover used to live in inline onmouseover/onmouseout handlers whose
   "out" branch re-applied the enlarged state (scale(1.28)) instead of the base
   one, so the sprite grew and never shrank back. Declaring the hover here means
   the browser always restores the resting size, and limiting it to fine pointers
   keeps a tap on mobile from leaving it stuck enlarged too.

   The monsters also render in their real colours now: the old saturate(2.1-2.8)
   + brightness(1.18-1.28) boost made every sprite look like it was glowing.
   ========================================================================== */
.BoostedBox .BoostedIconHover img {
  transform: none;
  transition: transform 0.15s ease, filter 0.15s ease !important;
}
.BoostedBox .BoostedIconHover--creature img {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7));
}
.BoostedBox .BoostedIconHover--boss img {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}
@media (hover: hover) and (pointer: fine) {
  .BoostedBox:hover .BoostedIconHover--creature img {
    transform: translate(-3px, -13px) scale(1.2);
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.8));
  }
  .BoostedBox:hover .BoostedIconHover--boss img {
    transform: scale(1.28);
    filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.85));
  }
}

/* Highscores page rows: same outfits, same treatment (no circular halo) */
.HighscoreOutfit {
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.HighscoreRow:hover .HighscoreOutfit {
  background: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   DOWNLOAD CLIENT — TIBIA SERVICE AGREEMENT PANEL
   --------------------------------------------------------------------------
   The agreement reuses .TableContainer, which the modern layer paints as a dark
   navy card, but its text was inheriting the parchment colour of the surrounding
   .BoxContent (#3a3223): dark brown on dark blue, so the whole licence was
   practically unreadable. The panel now carries a light text colour that matches
   its own background (like every other dark card on the site) and a tighter
   rhythm — smaller paragraph gap, line height and title bar — so the wall of
   legal text takes about a fifth less height and fits without scrolling.

   Scoped to .AgreementBox, which system/pages/downloadclient.php sets only on
   the agreement card; the neighbouring client/disclaimer boxes are untouched.
   The .Content .BoxContent prefix is needed to outrank the parchment colour
   rule for table cells declared earlier in this same file.
   ========================================================================== */
/* The legacy caption bar spends ~23px of padding around a 21px title. */
.AgreementBox .CaptionContainer,
#createaccount .CaptionContainer {
  padding: 2px 8px !important;
}
.AgreementBox .CaptionInnerContainer,
#createaccount .CaptionInnerContainer {
  padding: 2px 8px !important;
}
.AgreementBox .CaptionContainer .Text,
#createaccount .CaptionContainer .Text {
  line-height: 1.35 !important;
}
.AgreementBox .InnerTableContainer {
  padding: 8px 12px 10px !important;
  color: #cbd5e1 !important;
}
.AgreementBox .InnerTableContainer p {
  color: #cbd5e1 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  margin: 0 0 8px !important;
}
.AgreementBox .InnerTableContainer p:last-child {
  margin-bottom: 0 !important;
}
.Content .BoxContent .AgreementBox .InnerTableContainer td,
.AgreementBox .InnerTableContainer a {
  color: #cbd5e1 !important;
}

/* ==========================================================================
   LEGACY TABLE SHADOW FRAME — drop the orphaned corner brackets
   --------------------------------------------------------------------------
   The official form tables wrap their content in a frame built from
   table-shadow-*.gif pieces. The modern layer neutralised the ones applied via
   class rules (.TableContentAndRightShadow, .TableShadowContainer), but the four
   whose image is set *inline* survived and rendered as floating 4x5px brackets
   at the right edge of every form block - the stray "]" marks you can see lined
   up along the account form. With their middle pieces already gone they are
   decoration without a frame, so they go too.
   ========================================================================== */
.TableShadowContainerRightTop,
.TableShadowRightTop,
.TableShadowContainer,
.TableBottomShadow,
.TableBottomLeftShadow,
.TableBottomRightShadow {
  display: none !important;
  background-image: none !important;
}

/* ==========================================================================
   CREATE ACCOUNT — compact, readable form rows
   --------------------------------------------------------------------------
   Three things wasted the page: every field row carried 5px of padding per side,
   the template emits an empty row after each field to hold its error message
   (11px of pure air, eight times, until an error is actually printed), and the
   country <img> starts with src="" so its broken-image icon pushed the select
   into a second line. The fields also stopped at 285px inside a much wider cell,
   leaving the right half of every row empty.

   Text was the other half: the utility links ("suggest number", "suggest name",
   the rules link) are small text styled with the parchment link colour
   (#00429e) which is close to invisible on a dark row, so they now use the
   theme's gold.
   ========================================================================== */
.Content .BoxContent #createaccount td {
  padding: 3px 10px !important;
}
/* Hide the empty error rows; a row holding a real message keeps its text in the
   span, fails the :empty test and stays visible. */
.Content .BoxContent #createaccount .TableContent tr:has(> td:empty):has(.FormFieldError:empty) {
  display: none !important;
}
.Content .BoxContent #createaccount #account_country_img:not([src]),
.Content .BoxContent #createaccount #account_country_img[src=""] {
  display: none !important;
}
.Content .BoxContent #createaccount input[type="text"],
.Content .BoxContent #createaccount input[type="password"],
.Content .BoxContent #createaccount select {
  width: 100% !important;
  max-width: 420px !important;
  box-sizing: border-box !important;
  padding: 5px 10px !important;
}
/* Fields and the country select share their line with a small status/flag image
   (the template's live-validation tick). Left at 100% they push it onto its own
   line, which costs ~12px on every row, so each stops just short of the edge. */
.Content .BoxContent #createaccount input[type="text"],
.Content .BoxContent #createaccount input[type="password"] {
  max-width: min(420px, calc(100% - 22px)) !important;
}
.Content .BoxContent #createaccount select[name="country"] {
  max-width: min(420px, calc(100% - 26px)) !important;
}
/* Sex/vocation options: 15px of gap each pushed the list onto a second line. */
.Content .BoxContent #createaccount .OptionContainer {
  margin: 0 !important;
  white-space: nowrap !important;
}
/* The option list lives in a nested one-cell table: that cell becomes the flex
   box that places the cards, centred, and the gap replaces the per-option
   margin. */
.Content .BoxContent #createaccount td:has(> .OptionContainer) {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 6px !important;
}
.Content .BoxContent #createaccount #account_country_img {
  height: 12px !important;
  margin-left: 4px !important;
  vertical-align: middle !important;
}
/* Labels sit on the field's line instead of the row's top edge. */
.Content .BoxContent #createaccount td.LabelV {
  padding-top: 8px !important;
  font-size: 12.5px !important;
}
.Content .BoxContent #createaccount a {
  color: var(--gold-primary) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.Content .BoxContent #createaccount a:hover {
  color: var(--gold-bright) !important;
}
.Content .BoxContent #createaccount #SuggestAccountNumber,
.Content .BoxContent #createaccount #SuggestCharacterName {
  font-size: 11px !important;
  margin-top: 2px !important;
}
/* Vocation picker: the outfit of the vocation's sample character, framed to the
   sprite's alpha bounds exactly like the Top 5 Players widget (the geometry
   arrives in --ow/--oh/--ox/--oy), so the five icons show the character at the
   same size instead of five differently padded 64x64 canvases. */
.Content .BoxContent #createaccount .VocationOutfit {
  position: relative !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: 56px !important;
  height: 56px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 4px !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}
.Content .BoxContent #createaccount .VocationOutfit img {
  position: absolute !important;
  left: var(--ox, 0) !important;
  top: var(--oy, 0) !important;
  width: var(--ow, 100%) !important;
  height: var(--oh, 100%) !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  image-rendering: pixelated !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)) !important;
}
/* Vocation options: the outfit of each vocation in its own square box, name
   underneath, the whole option a click target (the <label> wraps the box and the
   name and is bound to the radio through for="vocationN"; the radio itself sits
   in the corner of the box). One fixed box size keeps the five of them aligned
   as a centred row whatever the length of the vocation name. */
.Content .BoxContent #createaccount .OptionContainer:has(.VocationOutfit) {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px !important;
  background: none !important;
  border: none !important;
}
.Content .BoxContent #createaccount .OptionContainer:has(.VocationOutfit) label {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 2px 4px !important;
  cursor: pointer !important;
  line-height: 1.2 !important;
  text-align: center !important;
  transition: color 0.15s ease !important;
}
.Content .BoxContent #createaccount .OptionContainer:has(.VocationOutfit) input[type="radio"] {
  flex: 0 0 auto !important;
  margin: 0 !important;
}
/* Selected state reads on the box and on the name */
.Content .BoxContent #createaccount .OptionContainer:has(input:checked) label {
  color: var(--gold-light) !important;
}
.Content .BoxContent #createaccount .OptionContainer:has(.VocationOutfit):hover .VocationOutfit {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(212, 175, 55, 0.6) !important;
}
.Content .BoxContent #createaccount .OptionContainer:has(.VocationOutfit):has(input:checked) .VocationOutfit {
  background: rgba(212, 175, 55, 0.16) !important;
  border-color: var(--gold-bright) !important;
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.35) !important;
}