/* =============================================================
   Noxor OT - Modern UI layer
   Non-destructive overrides for the legacy Znote/Tibia layout.
   ============================================================= */
:root {
  --nox-bg: #07101c;
  --nox-panel: rgba(10, 18, 31, .90);
  --nox-panel-soft: rgba(18, 29, 46, .84);
  --nox-panel-light: rgba(234, 225, 207, .96);
  --nox-line: rgba(137, 169, 211, .22);
  --nox-line-strong: rgba(183, 145, 73, .55);
  --nox-gold: #d4ad64;
  --nox-gold-2: #f0d28e;
  --nox-blue: #72a7dc;
  --nox-text: #e8edf5;
  --nox-muted: #9ca9bb;
  --nox-dark-text: #352719;
  --nox-radius: 14px;
  --nox-shadow: 0 16px 42px rgba(0,0,0,.42);
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
  min-height: 100vh;
  color: var(--nox-text);
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  background-color: var(--nox-bg) !important;
  background-image:
    linear-gradient(180deg, rgba(2,8,16,.18) 0%, rgba(2,8,16,.42) 54%, rgba(2,8,16,.82) 100%),
    url("../images/global/header/noxor-background.png") !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 8%, rgba(103,148,196,.10), transparent 38%);
  z-index: 0;
}

#ArtworkHelper {
  position: relative;
  z-index: 1;
  min-width: 0 !important;
  height: auto !important;
  min-height: 100vh;
  padding-top: 150px !important;
  background: none !important;
}

#Bodycontainer {
  position: relative;
  width: min(1240px, calc(100% - 36px)) !important;
  margin: 0 auto !important;
  display: block !important;
  min-height: 720px;
}

/* ---------- left navigation ---------- */
#MenuColumn {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  width: 190px !important;
  margin: 0 !important;
  padding: 12px 10px 16px !important;
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-radius);
  background: linear-gradient(180deg, rgba(11,20,34,.94), rgba(6,13,24,.91));
  box-shadow: var(--nox-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: visible;
}

#LeftArtwork {
  left: 4px !important;
  top: -145px !important;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.75));
}

#LeftArtwork #TibiaLogoArtworkTop {
  transition: transform .2s ease, filter .2s ease;
}
#LeftArtwork #TibiaLogoArtworkTop:hover {
  transform: translateY(-2px) scale(1.025);
  filter: brightness(1.08);
}

#Loginbox {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  margin: 0 0 12px !important;
  min-height: 48px;
  border: 1px solid rgba(129,159,196,.20);
  border-radius: 10px;
  background: rgba(22,34,52,.82) !important;
  overflow: hidden;
  box-shadow: inset 0 1px rgba(255,255,255,.03);
}
#Loginbox #LoginTop,
#Loginbox #LoginBottom,
#Loginbox .LoginBorder,
#MenuTop,
#MenuBottom,
.LeftChain,
.RightChain { display: none !important; }
#Loginbox .Loginstatus,
#Loginbox #LoginButtonContainer {
  background: none !important;
}
#Loginbox #LoginButtonContainer {
  left: 0 !important;
  width: 100% !important;
  height: 43px !important;
}
#Loginbox #LoginButton {
  left: 0 !important;
  top: 3px !important;
  width: 100% !important;
  text-align: center;
}
#Loginbox #LoginButton img {
  max-width: 150px;
  height: 37px;
  border-radius: 7px;
  filter: drop-shadow(0 4px 7px rgba(0,0,0,.35));
}

#Menu {
  left: 0 !important;
  width: 100%;
}

.menuitem {
  margin: 0 0 8px;
}

.MenuButton {
  width: 100% !important;
  height: 36px !important;
  border: 1px solid rgba(125,158,201,.22);
  border-radius: 9px;
  background-color: rgba(34,50,72,.74) !important;
  background-blend-mode: soft-light;
  overflow: hidden;

  transition:
    transform .45s ease,
    border-color 1s ease,
    background-color 1.2s ease,
    filter 1.2s ease !important;
}

/* NORMAL BUTTON STATE */
.MenuButton .Button {
  width: 100% !important;
  border-radius: 9px;

  filter: none !important;
  opacity: 1 !important;

  transition:
    filter 1.2s ease,
    opacity 1.2s ease,
    background-color 1.2s ease !important;
}

/* HOVER */
.MenuButton:hover {
  transform: translateX(2px);
  border-color: rgba(212,173,100,.62) !important;
  background-color: rgba(49,65,87,.95) !important;

  transition:
    transform .15s ease,
    border-color .15s ease,
    background-color .15s ease !important;
}

.MenuButton:hover .Button {
  filter: brightness(1.12) !important;

  transition:
    filter .15s ease !important;
}

/* FORCE RETURN TO NORMAL AFTER MOUSE LEAVES */
.MenuButton:not(:hover) {
  transform: translateX(0) !important;
  border-color: rgba(125,158,201,.22) !important;
  background-color: rgba(34,50,72,.74) !important;
  filter: none !important;
}

.MenuButton:not(:hover) .Button {
  filter: none !important;
  opacity: 1 !important;
}

.Icon {
  left: 7px !important;
}

.Label {
  left: 41px !important;
}

.Extend {
  right: 3px !important;
}

.Submenu {
  width: calc(100% - 8px) !important;
  margin: 4px 4px 8px !important;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(5,12,23,.68) !important;
}

.Submenuitem > div {
  background: transparent !important;
}

.SubmenuitemLabel {
  padding: 7px 8px 7px 13px !important;
  border-bottom: 1px solid rgba(122,151,190,.12) !important;
  color: #cdd8e8;
  font-size: 11px;
  font-weight: 600;

  transition:
    color 1s ease,
    background-color 1.2s ease,
    padding-left .5s ease !important;
}

.Submenu a:hover .SubmenuitemLabel {
  color: var(--nox-gold-2);
  background-color: rgba(212,173,100,.08) !important;
  padding-left: 17px !important;

  transition:
    color .15s ease,
    background-color .15s ease,
    padding-left .15s ease !important;
}

/* RETURN SUBMENU TO NORMAL */
.Submenu a:not(:hover) .SubmenuitemLabel {
  color: #cdd8e8 !important;
  background-color: transparent !important;
  padding-left: 13px !important;
}

/* ---------- center content ---------- */
#ContentColumn {
  margin: 0 215px !important;
  padding: 0 !important;
}
.Content { z-index: 10 !important; }
.Content .Box {
  margin: 0 0 18px !important;
  border: 1px solid rgba(115,142,178,.24) !important;
  border-radius: var(--nox-radius) !important;
  background: rgba(8,15,26,.90) !important;
  box-shadow: var(--nox-shadow);
  overflow: hidden !important;
}
.Content .Corner-tl,
.Content .Corner-tr,
.Content .Corner-bl,
.Content .Corner-br,
.Content .Border_1 { display: none !important; }
.Content .BorderTitleText {
  height: 40px !important;
  background-image: none !important;
  background: linear-gradient(90deg, rgba(47,66,91,.94), rgba(22,35,53,.94)) !important;
  border-bottom: 1px solid rgba(212,173,100,.38);
}
.Content .Title {
  top: 8px !important;
  left: 12px !important;
  max-height: 24px;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.55));
}
.Content .Border_2 {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.Content .Border_3 {
  margin: 0 !important;
  border: 0 !important;
}
.Content .BoxContent {
  min-height: 320px !important;
  height: auto !important;
  padding: 18px !important;
  color: var(--nox-dark-text) !important;
  background-color: rgba(16,25,38,.97) !important;
  background-blend-mode: soft-light;
  line-height: 1.45;
}
.Content .BoxContent a { color: #235e9c !important; }
.Content .BoxContent a:hover { color: #174674 !important; }

/* modern tables without changing PHP markup */
table {
  width: 100% !important;
  max-width: 100%;
  margin: 10px 0 22px !important;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 9px;
}
table tr th,
.Content th {
  padding: 9px 10px !important;
  color: #f3f6fb !important;
  background: #34465b !important;
  border-color: rgba(255,255,255,.08) !important;
}
table tr td,
.Content .BoxContent td {
  padding: 8px 10px !important;
  color: #3d2d1d !important;
  background: rgba(226,212,188,.94) !important;
  border-top: 1px solid rgba(255,255,255,.56) !important;
}
table tr:nth-child(even) td { background: rgba(238,226,205,.96) !important; }
tr.yellow td { background: #6d3030 !important; color: #f5e9e9 !important; }
tr.special:hover td { background: #c9d9e9 !important; }
.TableContainer { border-radius: 10px; overflow: hidden; border-color: #7e715f !important; }

input[type="text"], input[type="password"], input[type="email"], input[type="number"],
select, textarea {
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid #a6957a;
  border-radius: 7px;
  outline: none;
  background: #fffaf1;
  color: #312719;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
select:focus, textarea:focus {
  border-color: #638db7;
  box-shadow: 0 0 0 3px rgba(79,125,171,.16);
}
input[type="submit"], input[type="button"], button {
  padding: 8px 14px;
  border: 1px solid #8f6e32;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(#bd9348, #876327);
  box-shadow: 0 3px 8px rgba(0,0,0,.16);
  cursor: pointer;
}
input[type="submit"]:hover, input[type="button"]:hover, button:hover { filter: brightness(1.07); }
.galleryImage { max-width: 100% !important; border-radius: 10px; }

/* ---------- right column ---------- */
#ThemeboxesColumn {
  position: absolute !important;
  top: 0 !important;
  right: 0px !important;
  left: auto !important;
  width: 190px !important;
  margin: 0 !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 12px 10px 16px;
  transform: none !important;
  z-index: 20;
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-radius);
  background: linear-gradient(180deg, rgba(11,20,34,.94), rgba(6,13,24,.91));
  box-shadow: var(--nox-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#RightArtwork {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  width: 100% !important;
  height: 110px;
  margin: -6px 0 8px;
}
#RightArtwork #Monster {
  left: 8px !important;
  top: -55px !important;
}

#PedestalAndOnline {
  left: 8px !important;
  top: -10px !important;
}

#RightArtwork #PlayersOnline {
  left: 40px !important;
  bottom: 26px !important;
}

#online {
  color: var(--nox-gold-2) !important;
  text-shadow: 0 1px 2px #000;
}
.Themebox,
.TranslateBoxing,
.HighscoreBox {
  top: 0 !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 0 12px !important;
  padding: 8px;
  border: 1px solid rgba(128,160,202,.18);
  border-radius: 10px;
  background-color: rgba(27,40,60,.70) !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  overflow: hidden;
}
.Themebox .panel-heading,
.Themebox .panel-body,
.single_sidebar_widget { background-color: transparent !important; }
.Themebox img { max-width: 100%; height: auto; }
#PremiumBox { margin-top: 0 !important; min-height: 185px; }

/* discord card from header */
.zaptablee {
  position: fixed !important;
  top: 14px !important;
  right: 18px !important;
  left: auto !important;
  margin: 0 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(106,143,224,.58) !important;
  background: rgba(8,17,31,.86) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(10px);
  z-index: 10000 !important;
}
.zaptablee:hover { transform: translateY(-1px); background: rgba(25,40,69,.95) !important; }

#Footer {
  margin-top: 28px;
  padding: 18px 10px 30px !important;
  color: #aeb9c8 !important;
  text-shadow: 0 1px 2px #000;
}

/* Stable desktop three-column geometry.
   Both sidebars are anchored to #Bodycontainer instead of legacy negative margins. */
@media (min-width: 1051px) {

  #Bodycontainer {
    position: relative !important;
  }

  #ContentColumn {
    margin-left: 215px !important;
    margin-right: 215px !important;
    min-width: 0 !important;
  }

  #MenuColumn {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 180px !important;
    margin: 0 !important;
  }

  #ThemeboxesColumn {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 180px !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }
}

/* ---------- responsive ---------- */
@media (max-width: 1050px) {
  body { background-attachment: scroll !important; }
  #ArtworkHelper { padding-top: 125px !important; }
  #Bodycontainer { width: min(760px, calc(100% - 24px)) !important; }
  #MenuColumn, #ThemeboxesColumn {
    position: relative !important;
    width: 100% !important;
    left: auto !important;
    right: auto !important;
  }
  #MenuColumn { margin-bottom: 14px !important; }
  #ThemeboxesColumn { margin-top: 14px !important; }
  #ContentColumn { margin: 0 !important; }
  #LeftArtwork { left: 50% !important; transform: translateX(-50%); }
  #Menu { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .menuitem { min-width: 0; margin: 0; }
  .Submenu { width: 100% !important; }
  #ThemeboxesColumn { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  #RightArtwork { grid-column: 1 / -1; max-width: 190px; margin: 0 auto 8px; }
  .Themebox { margin: 0 !important; }
  .zaptablee { top: 8px !important; right: 8px !important; transform: scale(.9); transform-origin: top right; }
}

@media (max-width: 640px) {
  #ArtworkHelper { padding-top: 108px !important; }
  #Bodycontainer { width: calc(100% - 14px) !important; }
  #Menu, #ThemeboxesColumn { grid-template-columns: 1fr; }
  #MenuColumn, #ThemeboxesColumn { padding: 9px 8px 12px !important; }
  .Content .BoxContent { padding: 12px !important; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
  .zaptablee small { display: none !important; }
  .zaptablee { font-size: 8pt !important; padding: 7px 8px 5px 39px !important; }
  .zaptablee img { width: 34px !important; margin-left: -37px !important; }
}
/* =====================================================
   NOXOR RIGHT SIDE - HIGHSCORES + SHOP
   ===================================================== */

.NoxorRightBox {
    width: 100%;
    margin: 0 0 14px;
    overflow: hidden;

    border: 1px solid rgba(137,169,211,.24);
    border-radius: 11px;

    background:
        linear-gradient(
            180deg,
            rgba(14,25,41,.97),
            rgba(7,14,25,.96)
        );

    box-shadow:
        0 12px 28px rgba(0,0,0,.34),
        inset 0 1px rgba(255,255,255,.035);
}


/* HEADER */

.NoxorRightBoxHeader {
    position: relative;

    display: flex;
    align-items: center;

    height: 39px;
    padding: 0 10px;

    border-bottom:
        1px solid rgba(212,173,100,.30);

    background:
        linear-gradient(
            90deg,
            rgba(47,68,94,.96),
            rgba(22,36,55,.96)
        );
}


.NoxorRightHeaderIcon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 23px;
    height: 23px;

    margin-right: 7px;

    border:
        1px solid rgba(212,173,100,.38);

    border-radius: 6px;

    color: #f0d28e;

    background:
        rgba(212,173,100,.09);

    font-size: 12px;
}


.NoxorRightTitle {
    color: #f2d795;

    font-size: 12px;
    font-weight: 700;

    text-shadow:
        0 1px 2px rgba(0,0,0,.9);
}


.NoxorViewAll {
    position: absolute;

    right: 10px;

    color: #9badc4 !important;

    font-size: 21px;
    text-decoration: none !important;

    transition:
        color .6s ease,
        transform .6s ease;
}


.NoxorViewAll:hover {
    color: #f0d28e !important;
    transform: translateX(2px);

    transition:
        color .15s ease,
        transform .15s ease;
}


/* BODY */

.NoxorRightBoxBody {
    padding: 7px;
}


/* =====================================================
   PLAYER ROWS
   ===================================================== */

.NoxorPlayerRow {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;
    height: 49px;

    margin-bottom: 6px;

    padding: 3px 21px 3px 3px;

    overflow: hidden;

    border:
        1px solid rgba(128,160,202,.15);

    border-radius: 8px;

    background:
        rgba(30,44,64,.62);

    text-decoration: none !important;

    transition:
        background-color .9s ease,
        border-color .9s ease,
        transform .45s ease;
}


.NoxorPlayerRow:hover {
    background:
        rgba(49,65,87,.95);

    border-color:
        rgba(212,173,100,.48);

    transform:
        translateX(2px);

    transition:
        background-color .15s ease,
        border-color .15s ease,
        transform .15s ease;
}


/* RANK */

.NoxorPlayerRank {
    flex: 0 0 22px;

    width: 22px;
    height: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-right: 2px;

    border-radius: 6px;

    color: #aab8ca;

    background:
        rgba(255,255,255,.045);

    font-size: 10px;
    font-weight: 700;
}


.NoxorPlayerRank.rank-1 {
    color: #ffe49a;

    border:
        1px solid rgba(212,173,100,.40);

    background:
        rgba(212,173,100,.12);
}


.NoxorPlayerRank.rank-2 {
    color: #dce5ee;
}


.NoxorPlayerRank.rank-3 {
    color: #d8a573;
}


/* OUTFIT */

.NoxorPlayerOutfit {
    position: relative;

    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    overflow: hidden;
}


.NoxorPlayerOutfit img {
    position: absolute;

    width: auto !important;
    max-width: none !important;

    height: auto !important;

    left: 10%;
    top: 20%;

    transform:
        translate(-50%, -50%);

    image-rendering: auto;
}


/* PLAYER INFORMATION */

.NoxorPlayerInfo {
    min-width: 0;

    flex: 1;

    margin-left: 2px;

    overflow: hidden;
}


.NoxorPlayerName {
    overflow: hidden;

    color: #d8e1ed;

    font-size: 10px;
    font-weight: 700;

    white-space: nowrap;

    text-overflow: ellipsis;

    transition:
        color .8s ease;
}


.NoxorPlayerRow:hover
.NoxorPlayerName {
    color: #f0d28e;

    transition:
        color .15s ease;
}


.NoxorPlayerLevel {
    margin-top: 2px;

    color: #8497ad;

    font-size: 9px;
}


.NoxorPlayerArrow {
    position: absolute;

    right: 7px;

    color: #71869f;

    font-size: 16px;

    transition:
        color .6s ease,
        right .3s ease;
}


.NoxorPlayerRow:hover
.NoxorPlayerArrow {
    right: 4px;

    color: #f0d28e;
}


/* HIGHSCORES BUTTON */

.NoxorRightBottomButton {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-top: 8px;

    padding: 8px 9px;

    border:
        1px solid rgba(137,169,211,.20);

    border-radius: 7px;

    color: #c8d4e3 !important;

    background:
        rgba(31,47,69,.67);

    font-size: 10px;
    font-weight: 600;

    text-decoration: none !important;

    transition:
        background-color .8s ease,
        border-color .8s ease,
        color .8s ease;
}


.NoxorRightBottomButton:hover {
    color: #f0d28e !important;

    border-color:
        rgba(212,173,100,.48);

    background:
        rgba(48,65,88,.90);

    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease;
}


/* =====================================================
   SHOP
   ===================================================== */

.NoxorShopDescription {
    padding:
        4px 5px 10px;

    color: #96a6ba;

    font-size: 9px;
    line-height: 1.45;

    text-align: center;
}


.NoxorShopMainButton {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 49px;

    margin-bottom: 8px;

    padding:
        6px 23px 6px 7px;

    border:
        1px solid rgba(212,173,100,.55);

    border-radius: 8px;

    color: #fff3d3 !important;

    background:
        linear-gradient(
            180deg,
            rgba(172,128,60,.96),
            rgba(105,76,35,.96)
        );

    box-shadow:
        inset 0 1px rgba(255,255,255,.10),
        0 4px 10px rgba(0,0,0,.20);

    text-decoration: none !important;

    transition:
        filter .8s ease,
        transform .4s ease,
        box-shadow .8s ease;
}


.NoxorShopMainButton:hover {
    filter: brightness(1.13);

    transform:
        translateY(-1px);

    box-shadow:
        inset 0 1px rgba(255,255,255,.13),
        0 6px 14px rgba(0,0,0,.30);

    transition:
        filter .15s ease,
        transform .15s ease,
        box-shadow .15s ease;
}


.NoxorShopButtonIcon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 29px;

    width: 29px;
    height: 29px;

    margin-right: 8px;

    border:
        1px solid rgba(255,236,188,.35);

    border-radius: 7px;

    background:
        rgba(255,255,255,.08);

    font-size: 18px;
}


.NoxorShopButtonText {
    display: flex;
    flex-direction: column;

    text-align: left;
}


.NoxorShopButtonText strong {
    color: #fff3d3;

    font-size: 10px;
}


.NoxorShopButtonText small {
    margin-top: 2px;

    color: #e4cca1;

    font-size: 8px;
}


/* SMALL SHOP LINKS */

.NoxorShopMenuLink {
    position: relative;

    display: flex;
    align-items: center;

    height: 34px;

    margin-bottom: 6px;

    padding:
        5px 22px 5px 8px;

    border:
        1px solid rgba(128,160,202,.14);

    border-radius: 7px;

    color: #cbd7e6 !important;

    background:
        rgba(30,45,65,.57);

    font-size: 10px;
    font-weight: 600;

    text-decoration: none !important;

    transition:
        background-color .9s ease,
        border-color .9s ease,
        color .9s ease,
        transform .4s ease;
}


.NoxorShopMenuLink:hover {
    color: #f0d28e !important;

    border-color:
        rgba(212,173,100,.45);

    background:
        rgba(49,65,87,.91);

    transform:
        translateX(2px);

    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease,
        transform .15s ease;
}


.NoxorShopMenuIcon {
    display: inline-flex;

    width: 20px;

    color: #d4ad64;
}


.NoxorShopArrow {
    position: absolute;

    right: 8px;

    color: #8295aa;

    font-size: 16px;

    transition:
        right .3s ease,
        color .5s ease;
}


.NoxorShopMainButton:hover
.NoxorShopArrow,

.NoxorShopMenuLink:hover
.NoxorShopArrow {

    right: 5px;

    color: #fff1c8;
}


.NoxorEmptyRightBox {
    padding: 15px 5px;

    color: #91a1b5;

    font-size: 10px;

    text-align: center;
}
.CreateAccountText {
    margin: 5px 0 10px;
    text-align: center;
    color: #8fa0b5;
    font-size: 10px;
}

.CreateAccountText a {
    color: var(--nox-gold-2) !important;
    font-weight: 600;
    text-decoration: none !important;
}

.CreateAccountText a:hover {
    color: #fff1c4 !important;
    text-decoration: underline !important;
}
/* =====================================================
   FIX LEFT SIDEBAR HEIGHT
   Prevent sidebar from stretching down the whole page
   ===================================================== */

#MenuColumn {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    align-self: flex-start !important;
}

/* Make sure the actual menu only uses its natural height */
#Menu {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* Login/download boxes must not stretch either */
#Loginbox {
    height: auto !important;
    min-height: 48px !important;
    max-height: none !important;
}

/* Prevent children from forcing huge inherited heights */
#MenuColumn > div {
    height: auto;
}
/* =====================================================
   NOXOR - LEFT MENU HEIGHT FIX
   Hide all submenus by default.
   initialize.js will open the ones that should be open.
   ===================================================== */


/* =====================================================
   NOXOR - MYACCOUNT HEIGHT FIX
   ===================================================== */

#myaccount,
#myaccount .SmallBox,
#myaccount .MessageContainer,
#myaccount .Message {
    height: auto !important;
    min-height: 0 !important;
}

#myaccount .MessageContainer {
    display: block !important;
}

#myaccount .Message {
    position: relative !important;
}
/* Fix legacy Tibia SmallBox height */
.SmallBox,
.SmallBox .MessageContainer,
.SmallBox .Message {
    height: auto !important;
    min-height: 0 !important;
}
/* Move Noxor logo slightly left */
#LeftArtwork #TibiaLogoArtworkTop {
    transform: translateX(-35px) !important;
}
/* =====================================================
   REMOVE LEGACY BEIGE BACKGROUNDS
   ===================================================== */

.Content .BoxContent .Odd,
.TableContainer .Odd,
.Content .BoxContent table tbody tr:nth-child(odd) td {
    background-color: #1b2a3b !important;
    color: #d9e3ef !important;
}

.Content .BoxContent .Even,
.TableContainer .Even,
.Content .BoxContent table tbody tr:nth-child(even) td {
    background-color: #22344a !important;
    color: #d9e3ef !important;
}

.Content .BoxContent table tbody tr,
.BoxContent table tbody tr {
    background-color: #1b2a3b !important;
}

.TableContainer .Table1,
.TableContainer .Table2,
.TableContainer .Table3,
.TableContainer .Table4,
.TableContainer .Table5,
.TableContent {
    background-color: #1b2a3b !important;
    color: #d9e3ef !important;
}

.SmallBox .ErrorMessage,
.SmallBox .Message {
    background-color: #1b2a3b !important;
    color: #d9e3ef !important;
}

.LabelH,
.LabelH td {
    background-color: #22344a !important;
    color: #d9e3ef !important;
}


/* =========================================================
   NOXOROT MOBILE LAYOUT - CORRECTED FOR REAL SITE STRUCTURE
   Uses:
   #MenuColumn
   #ContentColumn
   #ThemeboxesColumn
   ========================================================= */

@media screen and (max-width: 900px) {

    html,
    body {
        width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    body {
        background-attachment: scroll !important;
    }

    /* Main page wrapper */
    #ArtworkHelper {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding-top: 8px !important;
        overflow: visible !important;
    }

    #Bodycontainer {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;

        width: calc(100% - 12px) !important;
        max-width: 760px !important;
        min-width: 0 !important;

        margin: 0 auto !important;
        padding: 0 !important;
    }

    /* =====================================================
       NOXOROT LOGO
       ===================================================== */

    /*
       IMPORTANT:
       The logo lives inside #LeftArtwork.
       Do NOT hide #LeftArtwork on mobile.
    */

    #LeftArtwork {
        order: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        visibility: visible !important;
        opacity: 1 !important;

        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 82px !important;

        margin: 0 0 10px 0 !important;
        padding: 4px 0 6px !important;

        transform: none !important;
        overflow: visible !important;
        z-index: 100 !important;
    }

    #LeftArtwork #TibiaLogoArtworkTop {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        position: relative !important;
        top: 0 !important;
        left: 0 !important;

        width: auto !important;
        max-width: min(82vw, 320px) !important;
        height: auto !important;

        margin: 0 auto !important;
        transform: none !important;

        max-height: 76px !important;
        object-fit: contain !important;

        filter: drop-shadow(0 6px 10px rgba(0,0,0,.65));
        z-index: 101 !important;
    }

    /* Decorative right artwork can be removed on phones */
    #RightArtwork {
        display: none !important;
    }

    /* =====================================================
       COLUMN ORDER
       Logo -> Login -> Main content -> Menu -> small right information
       ===================================================== */

    #ContentColumn {
        order: 2 !important;

        position: relative !important;
        float: none !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    #MenuColumn {
        /* Flatten this wrapper so Login and Menu can have separate mobile order */
        display: contents !important;
    }

    #ThemeboxesColumn {
        order: 4 !important;

        position: relative !important;
        float: none !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 12px 0 0 0 !important;
        padding: 8px !important;

        transform: none !important;
    }

    /* =====================================================
       CONTENT
       ===================================================== */

    .Content,
    .Content .Box,
    .Content .Border_2,
    .Content .Border_3,
    .Content .BoxContent {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .Content {
        float: none !important;
        margin: 0 !important;
    }

    .Content .BoxContent {
        min-height: 0 !important;
        height: auto !important;
        padding: 10px !important;
        overflow-x: auto !important;
    }

    /* Headline image */
    #ContentBoxHeadline,
    .Content .Title {
        position: static !important;
        display: block !important;

        width: auto !important;
        max-width: calc(100% - 16px) !important;
        max-height: 26px !important;
        height: auto !important;

        margin: 6px 8px !important;
    }

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

    /* =====================================================
       LEFT MENU - COMPACT MOBILE VERSION
       ===================================================== */

    #Loginbox {
        display: block !important;
        position: relative !important;
        order: 1 !important;
        z-index: 50 !important;
        pointer-events: auto !important;

        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        height: auto !important;

        margin: 0 0 12px 0 !important;
        padding: 9px 8px !important;
        border: 1px solid var(--nox-line) !important;
        border-radius: var(--nox-radius) !important;
        background: linear-gradient(180deg, rgba(11,20,34,.94), rgba(6,13,24,.91)) !important;
        box-shadow: var(--nox-shadow) !important;
    }

    /* Navigation comes after the main content */
    #Menu {
        order: 3 !important;
        margin-top: 12px !important;
        padding: 9px 8px 12px !important;
        border: 1px solid var(--nox-line) !important;
        border-radius: var(--nox-radius) !important;
        background: linear-gradient(180deg, rgba(11,20,34,.94), rgba(6,13,24,.91)) !important;
        box-shadow: var(--nox-shadow) !important;

        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;

        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
    }

    .menuitem {
        min-width: 0 !important;
        margin: 0 !important;
    }

    .MenuButton {
        width: 100% !important;
        min-width: 0 !important;
        height: 34px !important;
        margin: 0 !important;
    }

    .MenuButton .Button {
        width: 100% !important;
        min-width: 0 !important;
    }

    .Label {
        font-size: 11px !important;
    }

    .Submenu {
        width: 100% !important;
        max-width: 100% !important;
        margin: 3px 0 6px !important;
    }

    .SubmenuitemLabel {
        padding: 6px 7px 6px 11px !important;
        font-size: 10px !important;
    }

    /* =====================================================
       RIGHT SIDE - SMALLER INFO
       ===================================================== */

    #ThemeboxesColumn {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .Themebox,
    .TranslateBoxing,
    .HighscoreBox,
    .NoxorRightBox {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 6px !important;
    }

    .NoxorRightBoxHeader {
        height: 33px !important;
        padding: 0 7px !important;
    }

    .NoxorRightTitle {
        font-size: 10px !important;
    }

    .NoxorRightBoxBody {
        padding: 5px !important;
    }

    .NoxorPlayerRow {
        height: 40px !important;
        margin-bottom: 4px !important;
    }

    .NoxorPlayerOutfit {
        width: 34px !important;
        height: 34px !important;
        flex-basis: 34px !important;
    }

    .NoxorPlayerName {
        font-size: 9px !important;
    }

    .NoxorPlayerLevel {
        font-size: 8px !important;
    }

    .NoxorShopDescription {
        font-size: 8px !important;
        padding: 3px 4px 7px !important;
    }

    .NoxorShopMainButton {
        min-height: 42px !important;
        padding: 5px 20px 5px 6px !important;
    }

    .NoxorShopMenuLink {
        height: 30px !important;
        font-size: 9px !important;
    }

    /* Discord widget smaller on mobile */
    .zaptablee {
        top: 6px !important;
        right: 6px !important;

        transform: scale(.82) !important;
        transform-origin: top right !important;
    }

    /* =====================================================
       TABLES
       ===================================================== */

    table {
        max-width: 100% !important;
    }

    .BoxContent table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;

        overflow-x: auto !important;
        white-space: normal !important;
    }

    .TableContainer,
    .TableContent,
    .Table1,
    .Table2,
    .Table3,
    .Table4,
    .Table5 {
        max-width: 100% !important;
    }

    /* =====================================================
       FORMS / IMAGES / TEXT
       ===================================================== */

    input,
    select,
    textarea,
    button {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    select,
    textarea {
        width: 100% !important;
    }

    .Content img,
    .BoxContent img {
        max-width: 100% !important;
        height: auto;
    }

    td,
    th,
    p,
    a,
    span,
    div {
        overflow-wrap: anywhere;
    }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media screen and (max-width: 600px) {

    #ArtworkHelper {
        padding-top: 6px !important;
    }

    #Bodycontainer {
        width: calc(100% - 8px) !important;
    }

    #LeftArtwork {
        min-height: 72px !important;
        margin-bottom: 8px !important;
    }

    #LeftArtwork #TibiaLogoArtworkTop {
        max-width: min(88vw, 285px) !important;
    }

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

    /* One menu item per row on small phones */
    #Menu {
        grid-template-columns: 1fr !important;
        gap: 5px !important;
    }

    /* One right-side box per row */
    #ThemeboxesColumn {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    #ThemeboxesColumn {
        padding: 7px !important;
    }

    #Menu {
        padding: 7px !important;
    }

    .MenuButton {
        height: 32px !important;
    }

    .Label {
        font-size: 10px !important;
    }

    .Content .Title,
    #ContentBoxHeadline {
        max-height: 22px !important;
    }

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

    .zaptablee {
        transform: scale(.72) !important;
    }

    .zaptablee small {
        display: none !important;
    }

    .TableContainer td,
    .TableContainer th {
        padding: 5px !important;
        font-size: 11px !important;
    }
}
/* ============================================================
   NOXOROT CONTENT TEXT
   Make all normal website/news information text white
   ============================================================ */

.BoxContent,
.BoxContent p,
.BoxContent div,
.BoxContent span,
.BoxContent strong,
.BoxContent b,
.BoxContent em,
.BoxContent i,
.BoxContent small,
.BoxContent label,
.BoxContent li,
.BoxContent ul,
.BoxContent ol,
.BoxContent td,
.BoxContent th,
.BoxContent h1,
.BoxContent h2,
.BoxContent h3,
.BoxContent h4,
.BoxContent h5,
.BoxContent h6 {
    color: #ffffff !important;
}


/* Headings */

.BoxContent h1,
.BoxContent h2,
.BoxContent h3,
.BoxContent h4 {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px #000000;
}


/* Bold text */

.BoxContent strong,
.BoxContent b {
    color: #ffffff !important;
    font-weight: bold;
}


/* Keep links visible */

.BoxContent a,
.BoxContent a:link,
.BoxContent a:visited {
    color: #6fa8ff !important;
    text-decoration: none;
}

.BoxContent a:hover {
    color: #9fc5ff !important;
    text-decoration: underline;
}
/* ============================================================
   NOXOROT NEWS TEXT
   Force all news/article text inside the content box to white
   ============================================================ */

#news .BoxContent,
#news .BoxContent *,
#news .BoxContent font,
#news .BoxContent span,
#news .BoxContent div,
#news .BoxContent p,
#news .BoxContent td,
#news .BoxContent th,
#news .BoxContent table,
#news .BoxContent strong,
#news .BoxContent b,
#news .BoxContent i,
#news .BoxContent em,
#news .BoxContent small,
#news .BoxContent li,
#news .BoxContent h1,
#news .BoxContent h2,
#news .BoxContent h3,
#news .BoxContent h4,
#news .BoxContent h5,
#news .BoxContent h6 {
    color: #ffffff !important;
}


/* ============================================================
   NEWS HEADINGS
   ============================================================ */

#news .BoxContent h1,
#news .BoxContent h2,
#news .BoxContent h3,
#news .BoxContent h4,
#news .BoxContent strong,
#news .BoxContent b {
    color: #ffffff !important;
}


/* ============================================================
   NEWS LINKS
   Keep links blue instead of forcing them white
   ============================================================ */

#news .BoxContent a,
#news .BoxContent a:link,
#news .BoxContent a:visited,
#news .BoxContent a * {
    color: #6fa8ff !important;
}

#news .BoxContent a:hover,
#news .BoxContent a:hover * {
    color: #a8c7ff !important;
}


/* ============================================================
   OLD ZNOTE / TIBIA FONT TAGS
   ============================================================ */

#news .BoxContent font[color],
#news .BoxContent span[style],
#news .BoxContent div[style],
#news .BoxContent p[style],
#news .BoxContent td[style] {
    color: #ffffff !important;
}
/* ============================================================
   NOXOROT GLOBAL NEWS STYLE
   Applies automatically to every current and future news post
   ============================================================ */

.noxor-news-content {
    color: #ffffff !important;
    font-family: Verdana, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.65;
}


/* Normal text */

.noxor-news-content p,
.noxor-news-content div,
.noxor-news-content span,
.noxor-news-content font,
.noxor-news-content td,
.noxor-news-content th,
.noxor-news-content li {
    color: #ffffff !important;
}


/* Headings */

.noxor-news-content h1,
.noxor-news-content h2,
.noxor-news-content h3,
.noxor-news-content h4,
.noxor-news-content h5,
.noxor-news-content h6 {
    color: #ffffff !important;

    margin-top: 20px;
    margin-bottom: 10px;

    text-shadow:
        1px 1px 2px #000000;
}


/* Main news title */

.noxor-news-content h1 {
    font-size: 21px;
}


/* Section headings */

.noxor-news-content h2 {
    font-size: 17px;
}


/* Bold */

.noxor-news-content strong,
.noxor-news-content b {
    color: #ffffff !important;
    font-weight: bold;
}


/* Italic */

.noxor-news-content em,
.noxor-news-content i {
    color: #ffffff !important;
}


/* Links */

.noxor-news-content a,
.noxor-news-content a:link,
.noxor-news-content a:visited {
    color: #6fa8ff !important;
    text-decoration: none;
}

.noxor-news-content a:hover {
    color: #a8c7ff !important;
    text-decoration: underline;
}


/* Lists */

.noxor-news-content ul,
.noxor-news-content ol {
    color: #ffffff !important;

    margin-top: 8px;
    margin-bottom: 12px;
}


/* Separators */

.noxor-news-content hr {
    border: 0;

    border-top:
        1px solid rgba(255,255,255,0.20);

    margin:
        20px 0;
}


/* Override old Znote inline text colors */

.noxor-news-content *[style] {
    color: #ffffff !important;
}


/* But links stay blue */

.noxor-news-content a,
.noxor-news-content a * {
    color: #6fa8ff !important;
}