/* AURABRA DESIGN SYSTEM v1 */
:root{
  --ab-bg-deep:#061523;
  --ab-bg:#081b2b;
  --ab-bg-soft:#0c263a;
  --ab-bg-hover:#12364f;
  --ab-blue:#102f49;
  --ab-cyan:#62d1e8;
  --ab-cyan-soft:#8ddbea;
  --ab-gold:#e7c96b;
  --ab-gold-soft:#f0d98c;
  --ab-gold-border:#8d7134;
  --ab-text:#dce8ef;
  --ab-text-soft:#a9bfcd;
  --ab-border:#31516a;
  --ab-success:#7ee0aa;
  --ab-danger:#e17e7e;
}

.ab-page{
  width:100%;
  color:var(--ab-text);
  font-family:Arial,Helvetica,sans-serif;
  box-sizing:border-box;
}
.ab-page *,.ab-page *::before,.ab-page *::after{box-sizing:border-box}

.ab-hero{
  margin-bottom:12px;
  padding:22px 18px;
  text-align:center;
  background:linear-gradient(135deg,#061523 0%,#0b2941 55%,#123d5c 100%);
  border:1px solid var(--ab-gold-border);
  box-shadow:inset 0 0 20px rgba(0,0,0,.32),0 2px 5px rgba(0,0,0,.15);
}
.ab-hero-title{
  margin:0;
  color:var(--ab-gold);
  font-size:27px;
  line-height:1.15;
  letter-spacing:2px;
  font-weight:bold;
}
.ab-hero-subtitle{
  margin-top:7px;
  color:var(--ab-cyan);
  font-size:14px;
  font-weight:bold;
}
.ab-hero-text{
  max-width:680px;
  margin:10px auto 0;
  color:#cbdbe6;
  font-size:13px;
  line-height:1.55;
}

.ab-section{margin-bottom:12px}
.ab-section-title{
  padding:9px 12px;
  background:var(--ab-blue);
  border:1px solid var(--ab-gold-border);
  color:var(--ab-gold);
  font-size:13px;
  font-weight:bold;
  letter-spacing:.6px;
}
.ab-section-body{
  padding:10px;
  background:var(--ab-bg-deep);
  border:1px solid var(--ab-gold-border);
  border-top:0;
}

.ab-grid{display:grid;gap:7px}
.ab-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ab-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ab-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.ab-card{
  min-width:0;
  padding:11px 9px;
  background:var(--ab-bg-soft);
  border:1px solid var(--ab-border);
  color:var(--ab-text);
}
.ab-card-center{text-align:center}
.ab-card-label{
  margin-bottom:6px;
  color:var(--ab-cyan-soft);
  font-size:10px;
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:.7px;
}
.ab-card-value{
  color:var(--ab-gold);
  font-size:17px;
  font-weight:bold;
}
.ab-card-small{
  margin-top:4px;
  color:var(--ab-text-soft);
  font-size:10px;
}

.ab-online{color:var(--ab-success)!important}
.ab-offline{color:var(--ab-danger)!important}

.ab-table-wrap{
  width:100%;
  overflow-x:auto;
  background:var(--ab-bg-deep);
  border:1px solid var(--ab-gold-border);
}
.ab-table{
  width:100%;
  border-collapse:collapse;
  border-spacing:0;
}
.ab-table th{
  padding:9px 8px;
  background:var(--ab-blue);
  border-bottom:1px solid var(--ab-gold-border);
  color:var(--ab-gold);
  font-size:12px;
  font-weight:bold;
  text-align:left;
}
.ab-table td{
  padding:8px;
  background:#0b2234;
  border-bottom:1px solid #263f51;
  color:var(--ab-text);
}
.ab-table tbody tr:nth-child(even) td{background:#0d283d}
.ab-table tbody tr:hover td{background:var(--ab-bg-hover)}
.ab-table a{
  color:var(--ab-cyan);
  text-decoration:none;
}
.ab-table a:hover{color:var(--ab-gold-soft)}

.ab-link{
  color:var(--ab-cyan);
  text-decoration:none;
  font-weight:bold;
}
.ab-link:hover{color:var(--ab-gold)}

.ab-button{
  display:inline-block;
  padding:8px 14px;
  background:linear-gradient(180deg,#174866 0%,#0d3048 100%);
  border:1px solid var(--ab-gold-border);
  color:var(--ab-gold);
  font-weight:bold;
  text-decoration:none;
  cursor:pointer;
}
.ab-button:hover{
  background:#174866;
  color:#fff0af;
}

.ab-badge{
  display:inline-block;
  padding:3px 7px;
  background:#102f49;
  border:1px solid var(--ab-border);
  color:var(--ab-cyan);
  font-size:10px;
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:.4px;
}

.ab-note{
  margin-bottom:10px;
  padding:8px 12px;
  background:#091d2d;
  border:1px solid #2c4a60;
  color:var(--ab-text-soft);
  font-size:11px;
  text-align:center;
}

.ab-empty{
  padding:24px 15px;
  background:#091d2d;
  color:var(--ab-text-soft);
  text-align:center;
}

.ab-footer{
  margin-top:12px;
  padding:14px;
  background:#091d2d;
  border:1px solid #705a2d;
  color:#b8cbd7;
  text-align:center;
  line-height:1.5;
}
.ab-footer strong{color:var(--ab-gold)}

.ab-gold{color:var(--ab-gold)}
.ab-cyan{color:var(--ab-cyan)}
.ab-muted{color:var(--ab-text-soft)}
.ab-center{text-align:center}

@media(max-width:720px){
  .ab-grid-4,.ab-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-hero-title{font-size:23px}
}
@media(max-width:480px){
  .ab-grid-2,.ab-grid-3,.ab-grid-4{grid-template-columns:1fr}
  .ab-hero{padding:18px 12px}
}
/* ==========================================================
   AURABRA GLOBAL SKIN TEST V1
   Broad MyAAC visual override - reversible
   ========================================================== */

body {
    color: #dce8ef;
}

/* Main content surfaces */
.BoxContent,
#ContentColumn .BoxContent,
#Content .BoxContent {
    background: #071927 !important;
    color: #dce8ef !important;
}

/* Classic page headline */
.BoxHeadline {
    background: #102f49 !important;
    background-image: none !important;
    border-color: #8d7134 !important;
    color: #e7c96b !important;
    text-shadow: none !important;
}

.BoxHeadline,
.BoxHeadline .Text,
.BoxHeadline span,
.BoxHeadline b,
.BoxHeadline strong {
    color: #e7c96b !important;
}

/* Standard MyAAC table containers */
.TableContainer,
.TableContent,
.InnerTableContainer {
    background: #071927 !important;
    background-image: none !important;
    color: #dce8ef !important;
    border-color: #8d7134 !important;
}

.TableContainer .TableContent,
.TableContainer .InnerTableContainer {
    background: #071927 !important;
}

/* Caption / headline bars used by old tables */
.CaptionContainer,
.CaptionContainer .CaptionInnerContainer,
.TableContainer .CaptionContainer,
.TableContainer .CaptionInnerContainer {
    background: #102f49 !important;
    background-image: none !important;
    color: #e7c96b !important;
}

.CaptionContainer .Text,
.CaptionContainer b,
.CaptionContainer strong {
    color: #e7c96b !important;
}

/* Tables */
.myaac-table,
.Table1,
.Table2,
.Table3,
.TableContent table {
    background: #071927 !important;
    color: #dce8ef !important;
    border-color: #31516a !important;
}

.myaac-table th,
.myaac-table .LabelH,
.TableContent .LabelH,
.LabelH {
    background: #102f49 !important;
    background-image: none !important;
    color: #e7c96b !important;
    border-color: #8d7134 !important;
}

.myaac-table td,
.TableContent td {
    color: #dce8ef;
    border-color: #31516a !important;
}

.myaac-table tbody tr:nth-child(odd) td {
    background-color: #0b2234 !important;
}

.myaac-table tbody tr:nth-child(even) td {
    background-color: #0d283d !important;
}

.myaac-table tbody tr:hover td {
    background-color: #12364f !important;
}

.LabelV,
.LabelV150,
td.LabelV,
td.LabelV150 {
    color: #8ddbea !important;
    font-weight: bold;
}

/* Common legacy row classes */
.Odd td,
tr.Odd td {
    background-color: #0b2234 !important;
    color: #dce8ef !important;
}

.Even td,
tr.Even td {
    background-color: #0d283d !important;
    color: #dce8ef !important;
}

/* Links */
.BoxContent a,
.TableContent a,
.myaac-table a {
    color: #62d1e8;
}

.BoxContent a:hover,
.TableContent a:hover,
.myaac-table a:hover {
    color: #f0d98c;
}

/* Form fields */
.BoxContent input[type="text"],
.BoxContent input[type="password"],
.BoxContent input[type="email"],
.BoxContent input[type="number"],
.BoxContent input[type="search"],
.BoxContent textarea,
.BoxContent select {
    background: #0b2234 !important;
    color: #dce8ef !important;
    border: 1px solid #31516a !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.35);
}

.BoxContent input[type="text"]:focus,
.BoxContent input[type="password"]:focus,
.BoxContent input[type="email"]:focus,
.BoxContent input[type="number"]:focus,
.BoxContent input[type="search"]:focus,
.BoxContent textarea:focus,
.BoxContent select:focus {
    border-color: #62d1e8 !important;
    outline: none;
}

/* Native buttons - legacy image buttons remain untouched */
.BoxContent button,
.BoxContent input[type="submit"],
.BoxContent input[type="button"] {
    background: linear-gradient(180deg, #174866 0%, #0d3048 100%) !important;
    background-image: none !important;
    border: 1px solid #8d7134 !important;
    color: #e7c96b !important;
    font-weight: bold;
    padding: 7px 13px;
    cursor: pointer;
}

.BoxContent button:hover,
.BoxContent input[type="submit"]:hover,
.BoxContent input[type="button"]:hover {
    background: #174866 !important;
    color: #fff0af !important;
}

/* Messages and generic content */
.InfoBox,
.WarningBox,
.ErrorBox,
.SuccessBox {
    background: #091d2d !important;
    color: #dce8ef !important;
    border-color: #31516a !important;
}

/* Horizontal rules */
.BoxContent hr {
    border: 0;
    border-top: 1px solid #31516a;
}

/* Keep AURABRA custom components authoritative */
.ab-page,
.aurabra-faq,
.aurabra-online {
    color: #dce8ef;
}

/* ==========================================================
   AURABRA GLOBAL SKIN V2
   Legacy MyAAC compatibility layer
   ========================================================== */

/* Central content only */
#ContentColumn .BoxContent {
    background: #071927 !important;
    color: #dce8ef !important;
}

/* Typography */
#ContentColumn .BoxContent h1,
#ContentColumn .BoxContent h2,
#ContentColumn .BoxContent h3,
#ContentColumn .BoxContent h4 {
    color: #e7c96b !important;
    text-shadow: none !important;
}

#ContentColumn .BoxContent p,
#ContentColumn .BoxContent td,
#ContentColumn .BoxContent th,
#ContentColumn .BoxContent label {
    color: #dce8ef;
}

#ContentColumn .BoxContent a {
    color: #62d1e8 !important;
}

#ContentColumn .BoxContent a:hover {
    color: #f0d98c !important;
}

/* Legacy HTML bgcolor rows */
#ContentColumn .BoxContent tr[bgcolor] > td,
#ContentColumn .BoxContent td[bgcolor] {
    background-color: #0b2234 !important;
    color: #dce8ef !important;
    border-color: #31516a !important;
}

#ContentColumn .BoxContent tr[bgcolor]:nth-child(even) > td {
    background-color: #0d283d !important;
}

/* Header rows */
#ContentColumn .BoxContent td.white,
#ContentColumn .BoxContent th.white,
#ContentColumn .BoxContent tr.LabelH > td,
#ContentColumn .BoxContent tr.LabelH > th,
#ContentColumn .BoxContent td.LabelH,
#ContentColumn .BoxContent th.LabelH {
    background: #102f49 !important;
    color: #e7c96b !important;
    border-color: #8d7134 !important;
    font-weight: bold !important;
}

/* Labels */
#ContentColumn .BoxContent .LabelV,
#ContentColumn .BoxContent .LabelV150,
#ContentColumn .BoxContent td.LabelV,
#ContentColumn .BoxContent td.LabelV150 {
    color: #8ddbea !important;
    font-weight: bold;
}

/* Legacy MyAAC tables */
#ContentColumn .TableContent,
#ContentColumn .myaac-table,
#ContentColumn table.Table1,
#ContentColumn table.Table2,
#ContentColumn table.Table3,
#ContentColumn .InnerTableContainer table {
    background: #071927 !important;
    color: #dce8ef !important;
    border-color: #31516a !important;
}

#ContentColumn .TableContent td,
#ContentColumn .myaac-table td,
#ContentColumn table.Table1 td,
#ContentColumn table.Table2 td,
#ContentColumn table.Table3 td {
    border-color: #31516a !important;
}

/* Old alternating rows */
#ContentColumn tr.Odd > td,
#ContentColumn .Odd > td {
    background: #0b2234 !important;
    color: #dce8ef !important;
}

#ContentColumn tr.Even > td,
#ContentColumn .Even > td {
    background: #0d283d !important;
    color: #dce8ef !important;
}

/* Table/caption containers */
#ContentColumn .CaptionContainer,
#ContentColumn .CaptionInnerContainer,
#ContentColumn .InnerTableContainer {
    background-color: #071927 !important;
    color: #dce8ef !important;
}

#ContentColumn .CaptionContainer,
#ContentColumn .CaptionInnerContainer {
    border-color: #8d7134 !important;
}

/* Character page + equipment legacy inline backgrounds */
#ContentColumn table[style*="background: #808080"],
#ContentColumn table[style*="background:#808080"] {
    background: #102f49 !important;
    border-color: #31516a !important;
}

#ContentColumn table[style*="background: #292929"],
#ContentColumn table[style*="background:#292929"] {
    background: #081b2b !important;
}

#ContentColumn td[style*="border:1px solid #808080"],
#ContentColumn td[style*="border: 1px solid #808080"] {
    border-color: #31516a !important;
    background: #0b2234 !important;
}

/* Inputs and selects */
#ContentColumn .BoxContent input[type="text"],
#ContentColumn .BoxContent input[type="password"],
#ContentColumn .BoxContent input[type="email"],
#ContentColumn .BoxContent input[type="number"],
#ContentColumn .BoxContent input[type="search"],
#ContentColumn .BoxContent textarea,
#ContentColumn .BoxContent select {
    background: #081b2b !important;
    color: #dce8ef !important;
    border: 1px solid #31516a !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.35);
}

#ContentColumn .BoxContent input:focus,
#ContentColumn .BoxContent textarea:focus,
#ContentColumn .BoxContent select:focus {
    border-color: #62d1e8 !important;
    outline: none !important;
}

/* Text colors left by old template */
#ContentColumn .BoxContent font[color="#5A2800"],
#ContentColumn .BoxContent font[color="#5a2800"] {
    color: #dce8ef !important;
}

/* Preserve semantic status colors */
#ContentColumn .BoxContent [style*="color: green"],
#ContentColumn .BoxContent [style*="color:green"] {
    color: #7ee0aa !important;
}

#ContentColumn .BoxContent [style*="color: red"],
#ContentColumn .BoxContent [style*="color:red"] {
    color: #e17e7e !important;
}

#ContentColumn .BoxContent [style*="color: white"],
#ContentColumn .BoxContent [style*="color:white"] {
    color: #e7c96b !important;
}

/* Highscores */
#ContentColumn .BoxContent h2 {
    margin-top: 8px;
}

#ContentColumn .BoxContent table td > select {
    min-width: 110px;
}

/* Search blocks and generic forms */
#ContentColumn .BoxContent form table {
    color: #dce8ef;
}

#ContentColumn .BoxContent form b,
#ContentColumn .BoxContent form strong {
    color: #e7c96b;
}

/* Remove beige borders from classic table-content areas */
#ContentColumn .TableContent[style*="#faf0d7"],
#ContentColumn table[style*="border:1px solid #faf0d7"],
#ContentColumn table[style*="border: 1px solid #faf0d7"] {
    border-color: #31516a !important;
}

/* Old Tibia table shadows: retain structure but remove beige visual noise */
#ContentColumn .TableShadowRightTop,
#ContentColumn .TableContentAndRightShadow,
#ContentColumn .TableBottomShadow,
#ContentColumn .TableBottomLeftShadow,
#ContentColumn .TableBottomRightShadow {
    border-color: #31516a !important;
}

/* Generic empty / message rows */
#ContentColumn .BoxContent td[colspan] {
    border-color: #31516a;
}

/* Strong section titles inside old tables */
#ContentColumn .BoxContent td.white b,
#ContentColumn .BoxContent td.white strong,
#ContentColumn .BoxContent tr.LabelH b,
#ContentColumn .BoxContent tr.LabelH strong {
    color: #e7c96b !important;
}

/* Character search and standard search tables */
#ContentColumn .BoxContent input[type="submit"],
#ContentColumn .BoxContent button {
    color: #e7c96b;
}

/* Keep custom Aurabra components authoritative */
#ContentColumn .ab-page,
#ContentColumn .aurabra-faq,
#ContentColumn .aurabra-online {
    color: #dce8ef !important;
}

/* ==========================================================
   AURABRA LOGIN ART V2
   ========================================================== */

#Loginbox.AurabraLoginBox {
    position: relative !important;
    display: block !important;

    left: 0 !important;
    top: 0 !important;

    width: 170px !important;
    height: 112px !important;
    min-height: 112px !important;

    margin: 0 0 14px 5px !important;
    padding: 0 !important;

    background: url('/templates/aurabra/images/custom/aurabra-login-box.png')
                center center / 180px 112px no-repeat !important;

    border: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
}


/* Esconde somente o status superior */

#Loginbox.AurabraLoginBox #LoginstatusText_1 {
    display: none !important;
}


/* LOGIN */

#Loginbox.AurabraLoginBox #LoginButton {
    position: absolute !important;
    left: 26px !important;
    top: 22px !important;

    width: 126px !important;
    height: 31px !important;

    display: block !important;
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;

    cursor: pointer !important;
    z-index: 50 !important;
}

#Loginbox.AurabraLoginBox #ButtonText {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    font-size: 0 !important;
    color: transparent !important;

    background: transparent !important;
    background-image: none !important;
}


/* CREATE ACCOUNT */

#Loginbox.AurabraLoginBox #LoginstatusText_2 {
    position: absolute !important;
    left: 26px !important;
    top: 59px !important;

    width: 126px !important;
    height: 29px !important;

    display: block !important;
    margin: 0 !important;
    padding: 0 !important;

    font-size: 0 !important;
    color: transparent !important;

    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;

    cursor: pointer !important;
    z-index: 50 !important;
}


/* Hover sutil */

#Loginbox.AurabraLoginBox #LoginButton:hover,
#Loginbox.AurabraLoginBox #LoginstatusText_2:hover {
    background: rgba(55, 178, 255, 0.07) !important;
    box-shadow: inset 0 0 8px rgba(65, 195, 255, 0.24) !important;
}


/* ==========================================================
   AURABRA LOGINBOX - FIX FINAL
   remove sobreposição do layout antigo
   e corta a borda branca da arte
   ========================================================== */

#Loginbox.AurabraLoginBox {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 170px !important;
    height: 112px !important;
    margin: 0 0 14px 5px !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

/* A arte nova */
#Loginbox.AurabraLoginBox::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    /* levemente maior para "comer" a borda branca */
    background: url('/templates/aurabra/images/custom/aurabra-login-box.png')
                center center / 186px 116px no-repeat !important;
}

/* Mata TODAS as sobras do loginbox antigo */
#Loginbox.AurabraLoginBox #LoginTop,
#Loginbox.AurabraLoginBox #LoginBottom,
#Loginbox.AurabraLoginBox .LoginBorder,
#Loginbox.AurabraLoginBox .Loginstatus,
#Loginbox.AurabraLoginBox #BorderRight {
    display: none !important;
}

/* Área clicável do LOGIN */
#Loginbox.AurabraLoginBox #LoginButton {
    position: absolute !important;
    left: 26px !important;
    top: 23px !important;
    width: 128px !important;
    height: 29px !important;
    z-index: 20 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Esconde o texto visual antigo do botão, mas mantém clique */
#Loginbox.AurabraLoginBox #LoginButton .Button,
#Loginbox.AurabraLoginBox #LoginButton #ButtonText {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    background-image: none !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    border: none !important;
    z-index: 21 !important;
}

/* Área clicável do CREATE ACCOUNT */
#Loginbox.AurabraLoginBox #LoginstatusText_2,
#Loginbox.AurabraLoginBox #LoginstatusText_2_1,
#Loginbox.AurabraLoginBox #LoginstatusText_2_2 {
    position: absolute !important;
    left: 26px !important;
    top: 60px !important;
    width: 128px !important;
    height: 27px !important;
    z-index: 20 !important;

    display: block !important;
    visibility: visible !important;

    background: transparent !important;
    background-image: none !important;
    border: none !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
}

/* Hover bem sutil */
#Loginbox.AurabraLoginBox #LoginButton:hover,
#Loginbox.AurabraLoginBox #LoginstatusText_2:hover,
#Loginbox.AurabraLoginBox #LoginstatusText_2_1:hover,
#Loginbox.AurabraLoginBox #LoginstatusText_2_2:hover {
    box-shadow: inset 0 0 10px rgba(70, 190, 255, 0.18) !important;
    border-radius: 4px !important;
}


/* ==========================================================
   AURABRA LOGINBOX ART V3
   ========================================================== */

#Loginbox.AurabraLoginBox::before {
    content: "" !important;

    position: absolute !important;

    /* pequeno corte externo para não aparecer qualquer borda
       residual da imagem */
    inset: -2px !important;

    background-image:
        url('/images/layout/aurabra-login-box-v3.png') !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    pointer-events: none !important;

    z-index: 1 !important;
}


/* ==========================================================
   AURABRA LOGINBOX FINAL V4
   ========================================================== */

#Loginbox.AurabraLoginBox {
    position: relative !important;
    display: block !important;

    width: 170px !important;
    height: 113px !important;
    min-height: 113px !important;

    left: 0 !important;
    top: 0 !important;

    margin: 0 0 14px 5px !important;
    padding: 0 !important;

    background: none !important;
    border: none !important;
    box-shadow: none !important;

    overflow: hidden !important;
}


/* ARTE FINAL */

#Loginbox.AurabraLoginBox::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    background-image:
        url('/images/layout/aurabra-login-box-final.png') !important;

    background-size: 170px 113px !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    z-index: 1 !important;
    pointer-events: none !important;
}


/* STATUS ANTIGO */

#Loginbox.AurabraLoginBox #LoginstatusText_1 {
    display: none !important;
}


/* LOGIN */

#Loginbox.AurabraLoginBox #LoginButton {
    position: absolute !important;

    left: 21px !important;
    top: 29px !important;
    width: 127px !important;
    height: 24px !important;

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

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    cursor: pointer !important;
    z-index: 20 !important;
}


#Loginbox.AurabraLoginBox #ButtonText {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    font-size: 0 !important;
    color: transparent !important;

    background: transparent !important;
    background-image: none !important;

    cursor: pointer !important;
}


/* CREATE ACCOUNT / LOGOUT */

#Loginbox.AurabraLoginBox #LoginstatusText_2 {
    position: absolute !important;

    left: 21px !important;
    top: 63px !important;
    width: 127px !important;
    height: 24px !important;

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

    font-size: 0 !important;
    color: transparent !important;

    background: transparent !important;
    background-image: none !important;

    border: none !important;
    box-shadow: none !important;

    cursor: pointer !important;
    z-index: 20 !important;
}


/* HOVER DISCRETO */

#Loginbox.AurabraLoginBox #LoginButton:hover,
#Loginbox.AurabraLoginBox #LoginstatusText_2:hover {
    background: rgba(60, 180, 255, 0.05) !important;
    box-shadow: inset 0 0 8px rgba(70, 190, 255, 0.18) !important;
}


/* ==========================================================
   AURABRA LOGINBOX - AJUSTE DE PROPORÇÃO
   ========================================================== */

#Loginbox.AurabraLoginBox {
    width: 195px !important;
    height: 130px !important;
    min-height: 130px !important;

    margin-left: 0 !important;
    margin-bottom: 14px !important;
}

#Loginbox.AurabraLoginBox::before {
    background-size: 195px 130px !important;
}


/* LOGIN */
#Loginbox.AurabraLoginBox #LoginButton {
    left: 25px !important;
    top: 34px !important;

    width: 145px !important;
    height: 27px !important;
}


/* CREATE ACCOUNT */
#Loginbox.AurabraLoginBox #LoginstatusText_2 {
    left: 25px !important;
    top: 74px !important;

    width: 145px !important;
    height: 27px !important;
}


/* ==========================================================
   AURABRA LOGINBOX - ALINHAMENTO FINAL COM MENU
   ========================================================== */

#Loginbox.AurabraLoginBox {
    width: 180px !important;
    height: 120px !important;
    min-height: 120px !important;

    left: -5px !important;

    margin-left: 0 !important;
    margin-bottom: 14px !important;
}

#Loginbox.AurabraLoginBox::before {
    background-size: 180px 120px !important;
}


/* LOGIN */
#Loginbox.AurabraLoginBox #LoginButton {
    left: 23px !important;
    top: 31px !important;

    width: 134px !important;
    height: 25px !important;
}


/* CREATE ACCOUNT */
#Loginbox.AurabraLoginBox #LoginstatusText_2 {
    left: 23px !important;
    top: 68px !important;

    width: 134px !important;
    height: 25px !important;
}


/* ==========================================================
   AURABRA LOGINBOX - AJUSTE FINO FINAL
   ========================================================== */

#Loginbox.AurabraLoginBox {
    width: 192px !important;
    height: 128px !important;
    min-height: 128px !important;

    left: -2px !important;
    top: -10px !important;

    margin-left: 0 !important;
    margin-bottom: 14px !important;
}

#Loginbox.AurabraLoginBox::before {
    background-size: 192px 128px !important;
}


/* LOGIN */
#Loginbox.AurabraLoginBox #LoginButton {
    left: 25px !important;
    top: 33px !important;

    width: 142px !important;
    height: 26px !important;
}


/* CREATE ACCOUNT */
#Loginbox.AurabraLoginBox #LoginstatusText_2 {
    left: 25px !important;
    top: 72px !important;

    width: 142px !important;
    height: 26px !important;
}


/* ==========================================================
   AURABRA LOGINBOX - ALINHAMENTO POR SAFIRAS
   ========================================================== */

#Loginbox.AurabraLoginBox {
    width: 204px !important;
    height: 136px !important;
    min-height: 136px !important;

    left: -11px !important;
    top: -19px !important;

    margin-left: 0 !important;
    margin-bottom: 14px !important;
}

#Loginbox.AurabraLoginBox::before {
    background-size: 204px 136px !important;
}


/* LOGIN */
#Loginbox.AurabraLoginBox #LoginButton {
    left: 27px !important;
    top: 35px !important;

    width: 151px !important;
    height: 28px !important;
}


/* CREATE ACCOUNT */
#Loginbox.AurabraLoginBox #LoginstatusText_2 {
    left: 27px !important;
    top: 77px !important;

    width: 151px !important;
    height: 28px !important;
}


/* ==========================================================
   AURABRA HEADER V2
   Background e logo em camadas independentes
   ========================================================== */

/* O background continua pertencendo ao layout original */
#ArtworkHelper {
    position: relative !important;

    background-image:
        url('/images/layout/background-aurabra.png') !important;

    background-position: top center !important;
    background-repeat: no-repeat !important;

    /* preserva a proporção original da arte */
    background-size: 100% auto !important;
}


/* Logo AURABRA independente */
#AurabraHeaderLogo {
    position: absolute !important;

    top: 4px !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    width: 460px !important;
    height: auto !important;

    display: block !important;

    z-index: 100 !important;
    pointer-events: none !important;

    filter:
        drop-shadow(0 5px 5px rgba(0,0,0,0.75))
        drop-shadow(0 0 10px rgba(37,145,255,0.16)) !important;
}


/* ==========================================================
   AURABRA HEADER - AJUSTE HARMÔNICO DO LOGO
   ========================================================== */

#AurabraHeaderLogo {
    top: 0px !important;

    width: 400px !important;
    max-width: 400px !important;

    height: auto !important;

    filter:
        drop-shadow(0 4px 5px rgba(0,0,0,0.72))
        drop-shadow(0 0 8px rgba(37,145,255,0.12)) !important;
}


/* telas um pouco menores */
@media (max-width: 1200px) {
    #AurabraHeaderLogo {
        width: 370px !important;
        max-width: 370px !important;
    }
}


/* ==========================================================
   AURABRA HEADER COMPACTO V1
   Logo menor + estrutura principal mais alta
   ========================================================== */

/* LOGO */
#AurabraHeaderLogo {
    top: -6px !important;

    width: 330px !important;
    max-width: 330px !important;

    height: auto !important;

    filter:
        drop-shadow(0 4px 5px rgba(0,0,0,0.72))
        drop-shadow(0 0 7px rgba(37,145,255,0.12)) !important;
}


/* SOBE O SITE INTEIRO */
#ContentRow {
    top: 170px !important;
}


/* ==========================================================
   AURABRA PLAYERS ONLINE BADGE V1
   Somente painel superior - Highscores permanece intacto
   ========================================================== */

#RightArtwork {
    width: 150px !important;
    height: 0 !important;

    right: 15px !important;

    overflow: visible !important;
}

/* Final mobile overrides stay last because the theme contains legacy breakpoints. */
@media (max-width: 640px) {
    #ArtworkHelper {
        box-sizing: border-box !important;
        width: 100% !important;
        padding-bottom: 150px !important;
        overflow-x: hidden !important;
    }

    #Bodycontainer {
        box-sizing: border-box !important;
        width: calc(100% - 16px) !important;
        max-width: none !important;
        margin: 0 8px !important;
    }

    #AurabraLogoLink {
        top: -12px !important;
        left: 50% !important;
        width: min(300px, 86vw) !important;
        max-width: 86vw !important;
        height: 182px !important;
        transform: translateX(-50%) !important;
    }

    #AurabraHeaderLogo {
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        transform: none !important;
        object-fit: contain !important;
        object-position: center center !important;
    }

    #AurabraTopNav {
        top: 158px !important;
        left: 10px !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        width: calc(100% - 20px) !important;
        min-height: 0 !important;
        transform: none !important;
        overflow: visible !important;
    }

    #AurabraTopNav a {
        box-sizing: border-box !important;
        grid-column: span 2 !important;
        flex: none !important;
        min-width: 0 !important;
        min-height: 38px !important;
        padding: 0 3px !important;
        border-right: 1px solid #594420 !important;
        border-bottom: 1px solid #594420 !important;
        font-size: 9px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    #AurabraTopNav a:nth-child(3),
    #AurabraTopNav a:last-child {
        border-right: 0 !important;
    }

    #AurabraTopNav a:nth-child(n + 4) {
        grid-column: span 3 !important;
        border-bottom: 0 !important;
    }

    #ContentRow {
        top: 252px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        padding-bottom: 150px !important;
    }

    #ContentColumn,
    #ContentColumn .Content,
    #ContentColumn .Box,
    #ContentColumn .BoxContent {
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    #ContentColumn .ab2-info-hero {
        min-height: 250px !important;
        padding: 78px 14px 20px !important;
        background-position: center center !important;
    }

    #ContentColumn .ab2-info-hero h1 {
        font-size: 22px !important;
        line-height: 1.08 !important;
    }

    #ContentColumn .ab2-info-hero p {
        color: #fff4dd !important;
        font-size: 11px !important;
        line-height: 1.42 !important;
        text-shadow: 1px 1px 3px #000 !important;
    }

    .ab2-anchor-nav {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .ab2-anchor-nav a { min-width: 0 !important; }

    .ab2-system-detail,
    .ab2-copy-section {
        box-sizing: border-box !important;
        max-width: 100% !important;
        padding: 12px !important;
    }

    #ContentColumn #createaccount table.TableContent td.LabelV {
        width: 105px !important;
    }

    #ContentColumn #createaccount input[type="text"],
    #ContentColumn #createaccount input[type="password"],
    #ContentColumn #createaccount select {
        width: 100% !important;
    }
}

/* Final phone readability and form flow. */
#ContentColumn .ab2-home-hero p {
    color: #fff4dd !important;
    text-shadow: 1px 1px 3px #000 !important;
}

@media (max-width: 640px) {
    #ContentColumn .ab2-home-hero h1 {
        font-size: 24px !important;
        line-height: 1.05 !important;
    }

    #ContentColumn .ab2-home-hero p {
        color: #fff4dd !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
        text-shadow: 1px 1px 3px #000 !important;
    }

    #ContentColumn #createaccount,
    #ContentColumn #createaccount > table,
    #ContentColumn #createaccount .TableContainer,
    #ContentColumn #createaccount table.Table5,
    #ContentColumn #createaccount .InnerTableContainer,
    #ContentColumn #createaccount .TableContentAndRightShadow,
    #ContentColumn #createaccount .TableContentContainer,
    #ContentColumn #createaccount table.TableContent {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    #ContentColumn #createaccount .TableContainer .Table5 .InnerTableContainer {
        width: auto !important;
        margin: 5px 0 0 !important;
        padding: 6px !important;
    }

    #ContentColumn #createaccount table.TableContent {
        table-layout: fixed !important;
    }

    #ContentColumn #createaccount table.TableContent > tbody > tr > td {
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 4px 5px !important;
        white-space: normal !important;
    }

    #ContentColumn #createaccount table.TableContent > tbody > tr > td:empty {
        display: none !important;
    }

    #ContentColumn #createaccount table.TableContent td.LabelV,
    #ContentColumn #createaccount table.TableContent td.LabelV span {
        width: 100% !important;
        padding-bottom: 1px !important;
        white-space: normal !important;
    }

    #ContentColumn #createaccount input[type="text"],
    #ContentColumn #createaccount input[type="password"],
    #ContentColumn #createaccount select {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    #ContentColumn #createaccount #account_country {
        width: calc(100% - 27px) !important;
    }

    #ContentColumn #createaccount #account_country_img {
        display: inline-block;
        margin-left: 4px;
        vertical-align: middle;
    }

    #ContentColumn #createaccount .OptionContainer {
        display: inline-flex !important;
        align-items: center;
        margin: 3px 10px 3px 0 !important;
    }
}

/* Account creation keeps the classic Tibia structure with readable parchment fields. */
#ContentColumn #createaccount .TableContainer,
#ContentColumn #createaccount .InnerTableContainer,
#ContentColumn #createaccount .TableContentAndRightShadow,
#ContentColumn #createaccount .TableContentContainer {
    height: auto !important;
    min-height: 0 !important;
}

#ContentColumn #createaccount .CaptionContainer {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    overflow: visible !important;
    border: 1px solid #9d793e !important;
    background: linear-gradient(180deg, #4b3420 0%, #2c1d12 100%) !important;
}

#ContentColumn #createaccount .CaptionInnerContainer {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 !important;
    background: transparent !important;
}

#ContentColumn #createaccount .CaptionContainer .Text {
    display: block !important;
    box-sizing: border-box !important;
    height: 30px !important;
    padding: 0 13px !important;
    color: #f0d474 !important;
    font: bold 13px/30px Georgia, "Times New Roman", serif !important;
    letter-spacing: .25px !important;
    text-shadow: 1px 1px #000 !important;
}

#ContentColumn #createaccount table.Table5,
#ContentColumn #createaccount .InnerTableContainer,
#ContentColumn #createaccount .TableContentAndRightShadow,
#ContentColumn #createaccount .TableContentContainer,
#ContentColumn #createaccount table.TableContent {
    box-sizing: border-box !important;
    background-color: rgba(239, 219, 181, .93) !important;
    background-image: none !important;
    color: #3e2b1b !important;
    border-color: #a78652 !important;
}

#ContentColumn #createaccount .InnerTableContainer {
    padding: 10px !important;
}

#ContentColumn #createaccount table.TableContent td,
#ContentColumn #createaccount table.TableContent span,
#ContentColumn #createaccount table.TableContent label,
#ContentColumn #createaccount table.TableContent b,
#ContentColumn #createaccount table.TableContent strong {
    color: #3e2b1b !important;
    border-color: #c0a574 !important;
}

#ContentColumn #createaccount table.TableContent td.LabelV,
#ContentColumn #createaccount table.TableContent td.LabelV span {
    color: #285c72 !important;
}

#ContentColumn #createaccount table.TableContent table,
#ContentColumn #createaccount table.TableContent table tbody,
#ContentColumn #createaccount table.TableContent table tr,
#ContentColumn #createaccount table.TableContent table td {
    background: transparent !important;
    color: #3e2b1b !important;
}

#ContentColumn #createaccount .OptionContainer,
#ContentColumn #createaccount .OptionContainer label {
    color: #3e2b1b !important;
}

#ContentColumn #createaccount input[type="text"],
#ContentColumn #createaccount input[type="password"],
#ContentColumn #createaccount select {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-height: 28px !important;
    padding: 4px 7px !important;
    border: 1px solid #8d7043 !important;
    border-radius: 2px !important;
    background: #fff8e8 !important;
    color: #2d2116 !important;
}

#ContentColumn #createaccount a {
    color: #0a628e !important;
}

#ContentColumn #createaccount .FormFieldError,
#ContentColumn #createaccount .FormFieldError * {
    color: #a51818 !important;
}

@media (max-width: 560px) {
    #ContentColumn #createaccount .InnerTableContainer { padding: 6px !important; }
    #ContentColumn #createaccount table.TableContent td { padding: 5px !important; }
    #ContentColumn #createaccount table.TableContent td.LabelV { width: 120px !important; }
}

/* Mobile layout: centered brand, complete navigation and no horizontal drift. */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

#AurabraHeaderLogo {
    top: auto !important;
    left: auto !important;
    transform: none !important;
}

@media (max-width: 640px) {
    #ArtworkHelper {
        box-sizing: border-box !important;
        width: 100% !important;
        padding-bottom: 150px !important;
        overflow-x: hidden !important;
    }

    #Bodycontainer {
        box-sizing: border-box !important;
        width: calc(100% - 16px) !important;
        max-width: none !important;
        margin: 0 8px !important;
    }

    #AurabraLogoLink {
        top: -12px !important;
        left: 50% !important;
        width: min(300px, 86vw) !important;
        max-width: 86vw !important;
        height: 182px !important;
        transform: translateX(-50%) !important;
    }

    #AurabraHeaderLogo {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
    }

    #AurabraTopNav {
        top: 158px !important;
        left: 10px !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        width: calc(100% - 20px) !important;
        min-height: 0 !important;
        transform: none !important;
        overflow: visible !important;
    }

    #AurabraTopNav a {
        box-sizing: border-box !important;
        grid-column: span 2;
        min-width: 0 !important;
        min-height: 38px !important;
        padding: 0 3px !important;
        border-right: 1px solid #594420 !important;
        border-bottom: 1px solid #594420 !important;
        font-size: 9px !important;
        line-height: 1.1 !important;
        white-space: nowrap;
    }

    #AurabraTopNav a:nth-child(3),
    #AurabraTopNav a:last-child {
        border-right: 0 !important;
    }

    #AurabraTopNav a:nth-child(n + 4) {
        grid-column: span 3;
        border-bottom: 0 !important;
    }

    #ContentRow {
        top: 252px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        padding-bottom: 150px !important;
    }

    #ContentColumn,
    #ContentColumn .Content,
    #ContentColumn .Box,
    #ContentColumn .BoxContent {
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    #ContentColumn .ab2-info-hero {
        min-height: 250px !important;
        padding: 78px 14px 20px !important;
        background-position: center center !important;
    }

    #ContentColumn .ab2-info-hero h1 {
        font-size: 22px !important;
        line-height: 1.08 !important;
    }

    #ContentColumn .ab2-info-hero p {
        color: #fff4dd !important;
        font-size: 11px !important;
        line-height: 1.42 !important;
        text-shadow: 1px 1px 3px #000 !important;
    }

    .ab2-anchor-nav {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ab2-anchor-nav a {
        min-width: 0;
    }

    .ab2-system-detail,
    .ab2-copy-section {
        box-sizing: border-box;
        max-width: 100%;
        padding: 12px;
    }

    #ContentColumn #createaccount table.TableContent td.LabelV {
        width: 105px !important;
    }

    #ContentColumn #createaccount input[type="text"],
    #ContentColumn #createaccount input[type="password"],
    #ContentColumn #createaccount select {
        width: 100% !important;
    }
}


/* Remove qualquer resquício das artes antigas */

#RightArtwork #Monster,
#RightArtwork #PedestalAndOnline {
    display: none !important;
}


/* Nova arte AURABRA */

#RightArtwork #AurabraOnlineBadge {
    position: absolute !important;

    top: -112px !important;
    left: 0 !important;

    width: 150px !important;
    height: 100px !important;

    object-fit: contain !important;

    z-index: 15 !important;
    cursor: pointer !important;

    filter:
        drop-shadow(0 3px 4px rgba(0,0,0,0.70))
        drop-shadow(0 0 6px rgba(35,150,255,0.10)) !important;
}


/* Contador dinâmico sobre a placa da arte */

#RightArtwork #PlayersOnline {
    position: absolute !important;

    top: -46px !important;
    left: 28px !important;
    bottom: auto !important;

    width: 94px !important;

    z-index: 30 !important;

    border: 0 !important;

    text-align: center !important;

    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 9px !important;
    line-height: 11px !important;
    font-weight: bold !important;

    color: #e2bd58 !important;

    text-shadow:
        1px 1px 1px #000,
        0 0 4px rgba(0,0,0,0.80) !important;

    cursor: pointer !important;
}


/* Número de jogadores */

#RightArtwork #PlayersOnline #players {
    font-size: 14px !important;
    line-height: 14px !important;

    color: #f5d978 !important;

    text-shadow:
        1px 1px 1px #000,
        0 0 5px rgba(31,153,255,0.18) !important;
}


/* ==========================================================
   AURABRA PLAYERS ONLINE BADGE V2
   Alinhado ao Highscores + contador dinâmico
   ========================================================== */

#RightArtwork {
    width: 180px !important;
    right: 0 !important;
    overflow: visible !important;
}


/* Nova arte - mesma largura visual do Highscores */

#RightArtwork #AurabraOnlineBadge {
    position: absolute !important;

    width: 180px !important;
    height: 120px !important;

    left: 0 !important;
    top: -116px !important;

    object-fit: contain !important;

    z-index: 15 !important;
    cursor: pointer !important;

    filter:
        drop-shadow(0 3px 4px rgba(0,0,0,.72))
        drop-shadow(0 0 5px rgba(33,150,255,.10)) !important;
}


/* Garante que nada antigo apareça */

#RightArtwork #Monster,
#RightArtwork #PedestalAndOnline {
    display: none !important;
}


/* ==========================================================
   CONTADOR REAL

   Esta área cobre somente o "0 Players Online"
   que veio desenhado na imagem e coloca o valor real por cima.
   ========================================================== */

#RightArtwork #PlayersOnline {
    position: absolute !important;

    left: 37px !important;
    top: -40px !important;
    bottom: auto !important;

    width: 106px !important;
    height: 28px !important;

    box-sizing: border-box !important;

    padding: 2px 2px 0 2px !important;

    background:
        linear-gradient(
            180deg,
            #0b1c2d 0%,
            #071522 100%
        ) !important;

    border: 0 !important;

    display: block !important;

    text-align: center !important;

    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 9px !important;
    line-height: 11px !important;
    font-weight: bold !important;

    color: #e7c25d !important;

    text-shadow:
        1px 1px 1px #000,
        0 0 3px rgba(0,0,0,.8) !important;

    cursor: pointer !important;

    z-index: 30 !important;
}


/* Número */

#RightArtwork #PlayersOnline #players {
    display: block !important;

    font-size: 12px !important;
    line-height: 12px !important;

    color: #f3d36b !important;
}


/* O DIV do número já quebra a linha sozinho */

#RightArtwork #PlayersOnline br {
    display: none !important;
}


/* ==========================================================
   AURABRA ONLINE BADGE - ENCAIXE COM HIGHSCORES
   ========================================================== */

#RightArtwork #AurabraOnlineBadge {
    top: -110px !important;
}

#RightArtwork #PlayersOnline {
    top: -34px !important;
}

/* ==========================================================
   AURABRA CLASSIC FRAME + CONTINUOUS BACKGROUND V5
   ========================================================== */

html,
body {
    min-height: 100%;
}

body {
    background-color: #04101f !important;
    background-image: url('/images/layout/background-aurabra.png') !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

#ArtworkHelper {
    height: auto !important;
    min-height: 100vh !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

#Bodycontainer {
    height: auto !important;
    min-height: 100vh !important;
}

.Content .Box {
    border: 3px solid #07152b !important;
    outline: 1px solid #c6942c;
    background: #07172b !important;
    box-shadow:
        0 0 0 2px #164b86,
        0 0 0 4px #4d2d08,
        0 5px 14px rgba(0, 0, 0, .72),
        inset 0 0 0 1px #e0b24c !important;
}

.Content .Box::before,
.Content .Box::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    height: 4px;
    z-index: 45;
    background: linear-gradient(180deg, #f3d36f 0%, #9a5e12 42%, #211006 48%, #1659a0 60%, #06244f 100%);
    border-left: 1px solid #e5b94f;
    border-right: 1px solid #e5b94f;
    box-shadow: 0 1px 3px #000;
}

.Content .Box::before { top: -6px; }
.Content .Box::after { bottom: -6px; }

.Content .Border_1 {
    height: 6px !important;
    background-image: none !important;
    background: linear-gradient(180deg, #e8c45f 0%, #8b5513 35%, #2a1708 55%, #0c4b8d 70%, #041a3c 100%) !important;
    box-shadow: inset 0 1px #ffe596, inset 0 -1px #031024;
}

.Content .BorderTitleText {
    height: 30px !important;
    background-image: none !important;
    background:
        radial-gradient(circle at 75% 48%, rgba(40, 149, 255, .18), transparent 24%),
        linear-gradient(180deg, #0d3d77 0%, #082b59 48%, #04162f 100%) !important;
    border-top: 1px solid #d7aa43;
    border-bottom: 1px solid #d7aa43;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, .72);
}

.Content .BorderTitleText::after {
    content: "◆";
    position: absolute;
    right: 14px;
    top: 3px;
    color: #56cfff;
    font: bold 18px/22px Georgia, "Times New Roman", serif;
    text-shadow: 0 0 2px #fff, 0 0 6px #168fff, 1px 1px 0 #7b4f0d, -1px -1px 0 #7b4f0d;
}

.Content .Title {
    top: 8px !important;
    z-index: 48;
}

.Content .Border_2 {
    margin: 5px !important;
    padding: 1px !important;
    background: #b68122 !important;
    box-shadow: inset 0 0 0 1px #3a2107;
}

.Content .Border_3 {
    margin: 1px !important;
    border: 1px solid #124775 !important;
    background: #04101f;
}

.Content .Corner-tl,
.Content .Corner-tr,
.Content .Corner-bl,
.Content .Corner-br {
    width: 13px !important;
    height: 13px !important;
    background-image: none !important;
    background: radial-gradient(circle at 35% 30%, #bff5ff 0%, #29a9ff 20%, #073f91 48%, #020c21 72%) !important;
    border: 2px solid #d2a03a;
    box-shadow: 0 0 0 1px #3e2607, 0 0 5px rgba(38, 154, 255, .7);
    transform: rotate(45deg);
}

.Content .Corner-tl { top: -6px !important; left: -7px !important; }
.Content .Corner-tr { top: -6px !important; right: -7px !important; }
.Content .Corner-bl { bottom: -6px !important; left: -7px !important; }
.Content .Corner-br { bottom: -6px !important; right: -7px !important; }

/* ==========================================================
   LEGACY PAGE NORMALIZATION
   ========================================================== */

#ContentColumn .TableContentContainer,
#ContentColumn .TableContentAndRightShadow,
#ContentColumn .InnerTableContainer,
#ContentColumn .SmallBox .Message,
#ContentColumn .SmallBox .ErrorMessage {
    background-color: #081b2b !important;
    background-image: none !important;
    color: #dce8ef !important;
    border-color: #31516a !important;
}

#ContentColumn table[style*="background-color"] {
    background-color: #071927 !important;
}

#ContentColumn tr[style*="background-color"] > td {
    background-color: #0b2234 !important;
    color: #dce8ef !important;
}

#ContentColumn tr[style*="background-color"]:nth-child(even) > td {
    background-color: #0d283d !important;
}

#ContentColumn .BoxContent tr[bgcolor] {
    background-color: #0b2234 !important;
}

#ContentColumn .BoxContent tr[bgcolor]:nth-child(even) {
    background-color: #0d283d !important;
}

#ContentColumn .TableContainer .Table1,
#ContentColumn .TableContainer .Table2,
#ContentColumn .TableContainer .Table3,
#ContentColumn .TableContainer .Table4,
#ContentColumn .TableContainer .Table5 {
    background: #071927 !important;
    border-color: #8d7134 !important;
}

#ContentColumn .TableContainer .TableContentAndRightShadow td,
#ContentColumn .TableContainer .InnerTableContainer td {
    border-color: #31516a !important;
}

#ContentColumn .SmallBox .BoxFrameHorizontal,
#ContentColumn .SmallBox .BoxFrameVerticalLeft,
#ContentColumn .SmallBox .BoxFrameVerticalRight,
#ContentColumn .SmallBox .BoxFrameEdgeLeftTop,
#ContentColumn .SmallBox .BoxFrameEdgeLeftBottom,
#ContentColumn .SmallBox .BoxFrameEdgeRightTop,
#ContentColumn .SmallBox .BoxFrameEdgeRightBottom {
    background-image: none !important;
    background-color: #8d7134 !important;
}

/* ==========================================================
   CHARACTER PAGE
   ========================================================== */

.ab-character-page {
    color: #dce8ef;
}

.ab-character-summary {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.ab-character-details {
    min-width: 0;
    flex: 1 1 auto;
}

.ab-character-outfit {
    flex: 0 0 142px;
    padding: 8px;
    background: #071927;
    border: 1px solid #8d7134;
    box-shadow: inset 0 0 0 1px #163f60, inset 0 0 14px rgba(0, 0, 0, .72);
}

.ab-character-outfit-title {
    margin-bottom: 6px;
    padding: 5px 4px;
    color: #e7c96b;
    background: #102f49;
    border-bottom: 1px solid #8d7134;
    font: bold 12px Georgia, "Times New Roman", serif;
    text-align: center;
}

.ab-character-outfit-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 124px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at center 75%, rgba(41, 139, 189, .28) 0%, rgba(8, 28, 45, 0) 48%),
        linear-gradient(180deg, #06131f 0%, #0b2638 70%, #07121c 71%, #02070b 100%);
    border: 1px solid #31516a;
    box-shadow: inset 0 0 18px #000;
}

.ab-character-outfit-stage::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 13px;
    height: 9px;
    background: #0b3954;
    border: 1px solid #8d7134;
    border-radius: 50%;
    box-shadow: 0 5px 8px #000;
}

.ab-character-outfit-stage img {
    position: relative;
    z-index: 2;
    width: 96px;
    height: 96px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(3px 5px 2px rgba(0, 0, 0, .8));
    transform: translate(-7px, 2px);
}

.ab-character-stats-layout {
    width: auto !important;
    border-spacing: 0;
}

.ab-character-skills-panel {
    width: 260px !important;
    padding-right: 7px;
}

.ab-equipment-panel {
    width: 174px !important;
}

.ab-equipment-panel > table {
    width: 174px !important;
}

.ab-equipment-panel > table > tbody > tr:last-child > td {
    padding: 6px !important;
}

.ab-equipment-grid {
    display: grid;
    grid-template-columns: repeat(3, 40px);
    grid-template-rows: repeat(4, 40px);
    justify-content: center;
    gap: 2px;
    padding: 6px;
    background:
        radial-gradient(circle at center, #0e3148 0%, #071725 68%),
        #071725;
    border: 1px solid #8d7134;
    box-shadow: inset 0 0 14px #000, 0 1px 0 #174e72;
}

.ab-equipment-slot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    background: linear-gradient(135deg, #0d2b40 0%, #061522 100%);
    border: 1px solid #355f78;
    box-shadow: inset 0 0 0 1px #06101a, inset 0 0 9px rgba(0, 0, 0, .75);
    color: transparent;
    font-size: 0;
}

.ab-equipment-slot:hover {
    border-color: #c89b3f;
    background: #12364f;
}

.ab-equipment-slot img {
    display: block;
    width: 32px !important;
    height: 32px !important;
    object-fit: contain;
    image-rendering: pixelated;
    font-size: 0;
    color: transparent;
}

.ab-equipment-slot-boots {
    grid-column: 2;
}

.ab-character-skull {
    margin-top: 6px;
    text-align: center;
}

.ab-character-skull img {
    vertical-align: middle;
}

/* ==========================================================
   HIGHSCORES
   ========================================================== */

.ab-highscores-update {
    margin: 0 0 8px;
    padding: 6px 9px;
    color: #b8cad6;
    background: rgba(5, 20, 32, .72);
    border-left: 3px solid #8f7235;
    font-size: 11px;
}

.ab-highscores {
    color: #dce8ef;
}

.ab-highscores-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 10px;
    padding: 13px 15px;
    background:
        radial-gradient(circle at 15% 0%, rgba(42, 126, 177, .22), transparent 44%),
        linear-gradient(180deg, #0d304b, #071a2a);
    border: 3px double #8e7133;
    box-shadow: inset 0 0 16px rgba(0, 0, 0, .72);
}

.ab-highscores-kicker {
    color: #68d1e8;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1.5px;
}

.ab-highscores-head h2 {
    margin: 2px 0 2px;
    color: #e8cb72;
    font: bold 24px Georgia, "Times New Roman", serif;
    text-shadow: 1px 1px 0 #241302;
}

.ab-highscores-head p {
    margin: 0;
    color: #b9ccd8;
    font-size: 11px;
}

.ab-highscores-filters {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(140px, .8fr);
    gap: 7px;
    min-width: 340px;
}

.ab-highscores-filters label {
    display: block;
}

.ab-highscores-filters label > span {
    display: block;
    margin-bottom: 4px;
    color: #e2c66d;
    font: bold 11px Georgia, "Times New Roman", serif;
}

.ab-highscores-filters select {
    width: 100%;
    height: 30px;
    padding: 3px 28px 3px 8px;
    color: #dff5ff;
    background: #071927;
    border: 1px solid #3d667d;
    box-shadow: inset 0 0 8px #000;
    font-size: 12px;
}

.ab-highscores-table-wrap {
    overflow-x: auto;
    border: 1px solid #8d7134;
    box-shadow: inset 0 0 14px #000;
}

.ab-highscores-table {
    border-collapse: collapse;
    min-width: 590px;
}

.ab-highscores-table th {
    padding: 7px 8px;
    color: #efd278;
    background: linear-gradient(180deg, #123a59, #0a263c);
    border-right: 1px solid #294b62;
    border-bottom: 1px solid #8d7134;
    font: bold 12px Georgia, "Times New Roman", serif;
    text-align: left;
}

.ab-highscores-table td {
    padding: 6px 8px;
    color: #dce8ef;
    background: #0b263b;
    border-right: 1px solid #1e4258;
    border-bottom: 1px solid #173449;
    vertical-align: middle;
}

.ab-highscores-table tbody tr:nth-child(even) td {
    background: #0d2d45;
}

.ab-highscores-table tbody tr:hover td {
    background: #123952;
}

.ab-highscores-table a {
    color: #69d5ed;
    text-decoration: none;
    font-weight: bold;
}

.ab-highscores-table a:hover {
    color: #f0d278;
}

.ab-highscores-name small {
    display: block;
    margin-top: 1px;
    color: #c8d7df;
    font-size: 10px;
}

.ab-highscores-rank,
.ab-highscores-flag,
.ab-highscores-outfit,
.ab-highscores-value,
.ab-highscores-points {
    text-align: center !important;
    white-space: nowrap;
}

.ab-highscores-rank { width: 38px; color: #e8cb72 !important; }
.ab-highscores-flag { width: 32px; }
.ab-highscores-outfit { width: 54px; }
.ab-highscores-value { width: 74px; }
.ab-highscores-points { width: 118px; }

.ab-highscores-outfit img {
    display: block;
    margin: -5px auto;
    image-rendering: pixelated;
}

.ab-highscores-empty {
    padding: 22px !important;
    text-align: center;
}

.ab-highscores-pagination {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    margin-top: 9px;
}

.ab-highscores-pagination a {
    padding: 6px 9px;
    color: #efd278;
    background: #0d304a;
    border: 1px solid #8d7134;
    text-decoration: none;
    font-weight: bold;
}

.ab-is-online { color: #79d891; }
.ab-is-offline { color: #69d5ed; }

@media (max-width: 760px) {
    .ab-highscores-head {
        display: block;
    }

    .ab-highscores-filters {
        grid-template-columns: 1fr;
        min-width: 0;
        margin-top: 10px;
    }
}

/* ==========================================================
   AURABRA WEBSITE V2 — PAINTED CLASSIC MMORPG PORTAL
   ========================================================== */

:root {
    --ab2-ink: #24180d;
    --ab2-ink-soft: #5e4a32;
    --ab2-parchment: #ead9b8;
    --ab2-parchment-light: #f5e8cb;
    --ab2-parchment-dark: #cfb889;
    --ab2-wood: #24160d;
    --ab2-wood-light: #4a2d16;
    --ab2-stone: #20262a;
    --ab2-stone-light: #566067;
    --ab2-blue: #0a4f94;
    --ab2-blue-light: #1a77cf;
    --ab2-gold: #e5be59;
    --ab2-gold-dark: #855410;
    --ab2-green: #4de26e;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0 !important;
    background-color: #06101a !important;
    background-image:
        linear-gradient(180deg, rgba(2, 9, 17, .08) 0, rgba(2, 9, 17, .16) 420px, rgba(2, 9, 17, .78) 1100px),
        url('images/header/aurabra-world-painted.jpg') !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    color: var(--ab2-ink);
    font-family: Arial, Helvetica, sans-serif;
}

#ArtworkHelper {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100vh !important;
    height: auto !important;
    padding-bottom: 360px;
    background: linear-gradient(180deg, rgba(3, 11, 18, .14), rgba(3, 11, 18, .02) 280px, rgba(3, 11, 18, .34)) !important;
    overflow: hidden;
}

#Bodycontainer {
    display: block !important;
    width: calc(100% - 28px) !important;
    min-width: 0 !important;
    max-width: 1260px !important;
    min-height: 100vh !important;
    height: auto !important;
    margin: 0 auto !important;
}

#AurabraLogoLink {
    position: absolute;
    top: -36px;
    left: 50%;
    z-index: 110;
    display: block;
    width: 490px;
    height: 285px;
    transform: translateX(-50%);
}

#AurabraHeaderLogo {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 7px 8px rgba(0, 0, 0, .86)) drop-shadow(0 0 12px rgba(24, 123, 232, .36)) !important;
}

#AurabraTopNav {
    position: absolute;
    z-index: 105;
    top: 216px;
    left: 50%;
    display: grid;
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    width: min(900px, calc(100% - 60px));
    min-height: 46px;
    transform: translateX(-50%);
    border: 3px solid #171b1d;
    outline: 1px solid var(--ab2-gold);
    background: #171717;
    box-shadow: 0 5px 16px rgba(0, 0, 0, .7), inset 0 0 0 1px #5c3b16;
}

#AurabraTopNav a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 12px;
    border-right: 1px solid #594420;
    background: linear-gradient(180deg, #292b2c 0%, #141617 100%);
    color: #f1d583;
    font: bold 13px Georgia, "Times New Roman", serif;
    letter-spacing: .45px;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000;
    transition: background .15s ease, color .15s ease;
}

#AurabraTopNav a:last-child { border-right: 0; }
#AurabraTopNav a:hover {
    background: linear-gradient(180deg, #1266ad, #082d58);
    color: #fff3b5;
}

#ContentRow {
    position: relative !important;
    top: 286px !important;
    display: grid !important;
    grid-template-columns: 190px minmax(0, 1fr) 190px;
    align-items: start;
    gap: 14px;
    width: 100%;
    padding-bottom: 330px;
}

#MenuColumn,
#ContentColumn,
#ThemeboxesColumn {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    margin: 0 !important;
}

#ContentColumn { min-width: 0; }
#LeftArtwork { display: none !important; }

/* Left account and navigation panels */
#Loginbox.AurabraLoginBox {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 105px !important;
    margin: 0 0 12px !important;
    padding: 13px 12px 12px !important;
    border: 3px solid #1b2023 !important;
    outline: 1px solid #bd8c31;
    background:
        linear-gradient(180deg, rgba(71, 40, 17, .96), rgba(27, 17, 11, .98)) !important;
    box-shadow: inset 0 0 0 1px #765022, inset 0 0 18px #080402, 0 5px 12px rgba(0, 0, 0, .62) !important;
}

#Loginbox.AurabraLoginBox::before { display: none !important; }
#Loginbox.AurabraLoginBox .AurabraLoginStatus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin-bottom: 8px;
    color: #d9c79e !important;
    font: bold 9px Arial, sans-serif !important;
    letter-spacing: 1px;
    text-align: center;
}

#Loginbox.AurabraLoginBox .AurabraLoginButton,
#Loginbox.AurabraLoginBox .AurabraLoginSecondary {
    position: static !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 32px !important;
    margin: 0 0 7px !important;
    padding: 0 8px !important;
    border: 1px solid #d2a841 !important;
    background: linear-gradient(180deg, #155da0, #082b54) !important;
    box-shadow: inset 0 0 0 1px #061528, inset 0 1px 0 rgba(255, 255, 255, .2) !important;
    color: #f8df91 !important;
    cursor: pointer;
    font: bold 11px Georgia, "Times New Roman", serif !important;
    letter-spacing: .45px;
    text-align: center;
    text-shadow: 1px 1px #000;
}

#Loginbox.AurabraLoginBox .AurabraLoginSecondary {
    margin-bottom: 0 !important;
    background: linear-gradient(180deg, #49301a, #26170d) !important;
}

#Loginbox.AurabraLoginBox #ButtonText {
    position: static !important;
    width: auto !important;
    height: auto !important;
    color: inherit !important;
    font: inherit !important;
}

#Loginbox.AurabraLoginBox .AurabraLoginButton:hover,
#Loginbox.AurabraLoginBox .AurabraLoginSecondary:hover {
    filter: brightness(1.18);
}

#Menu {
    left: 0 !important;
    width: 100%;
    padding: 7px 7px 8px;
    border: 3px solid #1c2124;
    outline: 1px solid #b7862d;
    background: linear-gradient(180deg, rgba(63, 36, 17, .97), rgba(27, 17, 10, .98));
    box-shadow: inset 0 0 0 1px #755022, inset 0 0 18px #080402, 0 5px 12px rgba(0, 0, 0, .6);
}

#MenuTop,
#MenuBottom { display: none !important; }

#Menu .menuitem { margin-bottom: 4px; }
#Menu .MenuButton {
    width: 100% !important;
    height: 34px !important;
    border: 1px solid #8b682e;
    background: linear-gradient(180deg, #3b2a1a, #20150d) !important;
    box-shadow: inset 0 0 0 1px #12100d;
}

#Menu .MenuButton .Button { display: none !important; }
#Menu .Icon {
    left: 7px !important;
    top: 1px !important;
    filter: sepia(.25) saturate(1.1) brightness(1.2);
}

#Menu .Label {
    left: 40px !important;
    top: 0 !important;
    display: flex;
    align-items: center;
    width: 120px !important;
    height: 32px !important;
    background-image: none !important;
    color: #f0d172;
    font: bold 12px Georgia, "Times New Roman", serif;
    letter-spacing: .35px;
}

#news_Label::after { content: "NOTÍCIAS"; }
#account_Label::after { content: "CONTA"; }
#community_Label::after { content: "COMUNIDADE"; }
#forum_Label::after { content: "FÓRUM"; }
#library_Label::after { content: "BIBLIOTECA"; }
#shops_Label::after { content: "LOJA"; }

#Menu .Extend { right: 5px !important; top: 11px !important; }
#Menu .Submenu {
    width: auto !important;
    margin: 0 3px !important;
    border-right: 1px solid #70552a;
    border-left: 1px solid #70552a;
    background: #18130e !important;
}

#Menu .Submenuitem {
    min-height: 27px;
    background: linear-gradient(90deg, rgba(15, 63, 92, .5), rgba(15, 30, 38, .15));
}

#Menu .SubmenuitemLabel {
    box-sizing: border-box;
    padding: 6px 8px 6px 17px !important;
    border-bottom: 1px solid #513d20 !important;
    color: #e8dcc6;
    font-size: 11px;
    font-weight: normal;
}

#Menu .Submenuitem:hover { background: #164e72 !important; }
#Menu .LeftChain,
#Menu .RightChain { display: none !important; }

/* Main classic stone and parchment frame */
.Content .Box {
    position: relative;
    border: 4px solid #171c1f !important;
    outline: 1px solid #c5973c;
    background: #d0b98d !important;
    box-shadow: 0 0 0 2px #596168, 0 8px 20px rgba(0, 0, 0, .72), inset 0 0 0 1px #886225 !important;
}

.Content .Box::before,
.Content .Box::after { display: none !important; }

.Content .Corner-tl,
.Content .Corner-tr,
.Content .Corner-bl,
.Content .Corner-br { display: none !important; }

.Content .Border_1 {
    height: 5px !important;
    background: linear-gradient(180deg, #c09a48, #3a2b18) !important;
    box-shadow: inset 0 1px #f4d47c;
}

.Content .BorderTitleText {
    position: relative;
    height: 38px !important;
    border: 0 !important;
    border-bottom: 1px solid #9c722b !important;
    background: linear-gradient(180deg, #3a2919, #1e160f) !important;
}

.Content .BorderTitleText::after { display: none !important; }
.Content .Title { display: none !important; }
.AurabraPageTitle {
    position: absolute;
    z-index: 55;
    top: 13px;
    left: 18px;
    color: #f0d47b;
    font: bold 17px Georgia, "Times New Roman", serif;
    letter-spacing: .5px;
    text-shadow: 1px 1px #000;
}

.Content .Border_2 {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.Content .Border_3 {
    margin: 0 !important;
    border: 0 !important;
    background: var(--ab2-parchment) !important;
}

.Content .BoxContent,
#ContentColumn .BoxContent,
#Content .BoxContent {
    min-height: 170px;
    padding: 13px !important;
    border: 0 !important;
    background:
        linear-gradient(rgba(247, 235, 207, .95), rgba(232, 213, 174, .97)),
        url('images/content/scroll.gif') !important;
    color: var(--ab2-ink) !important;
    box-shadow: inset 0 0 26px rgba(103, 72, 28, .28);
}

#ContentColumn .BoxContent p,
#ContentColumn .BoxContent td,
#ContentColumn .BoxContent th,
#ContentColumn .BoxContent label { color: var(--ab2-ink) !important; }
#ContentColumn .BoxContent a { color: #74450c; }
#ContentColumn .BoxContent a:hover { color: #0c599a; }

/* Home page */
.ab-page-news .Content .BorderTitleText,
.ab-page-news .AurabraPageTitle { display: none !important; }
.ab-page-news .Content .BoxContent { padding: 0 !important; }
.ab-page-news .Content .Border_1:first-of-type { display: none; }

.ab2-home { color: var(--ab2-ink); }
.ab2-home-hero {
    position: relative;
    min-height: 365px;
    overflow: hidden;
    background: url('images/header/aurabra-home-hero.jpg') center center / cover no-repeat;
    border-bottom: 3px solid #725020;
}

.ab2-home-hero-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 10, 14, .02), rgba(5, 10, 14, .16) 48%, rgba(5, 9, 12, .88) 100%);
}

.ab2-home-hero-copy {
    position: absolute;
    z-index: 2;
    right: 34px;
    bottom: 28px;
    left: 34px;
    text-align: center;
    text-shadow: 1px 2px 3px #000;
}

.ab2-eyebrow {
    display: inline-block;
    margin-bottom: 5px;
    padding: 4px 10px;
    border: 1px solid rgba(235, 200, 103, .8);
    background: rgba(5, 18, 29, .78);
    color: #83ddf1;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1.35px;
}

.ab2-home-hero h1 {
    margin: 0;
    color: #f4d878;
    font: bold 34px Georgia, "Times New Roman", serif;
    letter-spacing: 1.2px;
}

.ab2-home-hero p {
    margin: 5px 0 13px;
    color: #fff5df !important;
    font: bold 14px Georgia, "Times New Roman", serif;
}

.ab2-hero-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.ab2-btn {
    min-width: 155px;
    padding: 9px 14px;
    border: 1px solid #d2a53e;
    background: linear-gradient(180deg, #4b3018, #20140b);
    box-shadow: inset 0 0 0 1px #0b0b0b, 0 2px 5px #000;
    color: #f6d87e !important;
    font: bold 12px Georgia, "Times New Roman", serif;
    letter-spacing: .4px;
    text-decoration: none;
}

.ab2-btn-primary { background: linear-gradient(180deg, #1974c2, #083568); }
.ab2-btn:hover { filter: brightness(1.16); color: #fff3ba !important; }

.ab2-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid #9e7940;
    background: var(--ab2-parchment-light);
}

.ab2-pillar {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 82px;
    padding: 12px 14px;
    border-right: 1px solid #b79a64;
    color: var(--ab2-ink) !important;
    text-decoration: none;
}

.ab2-pillar:last-child { border-right: 0; }
.ab2-pillar:hover { background: #fff0ce; }
.ab2-pillar-icon {
    color: #a4650b;
    font: bold 29px Georgia, serif;
    text-shadow: 0 1px #fff;
}
.ab2-pillar span:last-child { min-width: 0; }
.ab2-pillar strong {
    display: block;
    margin-bottom: 4px;
    color: #38230f;
    font: bold 12px Georgia, serif;
}
.ab2-pillar small { display: block; color: #654f37; font-size: 10px; line-height: 1.35; }

.ab2-home-section { padding: 20px 20px 4px; }
.ab2-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 11px;
    padding-bottom: 7px;
    border-bottom: 2px solid #9a6f2d;
}
.ab2-section-heading span { color: #0b639f; font-size: 9px; font-weight: bold; letter-spacing: 1.5px; }
.ab2-section-heading h2 { margin: 2px 0 0; color: #38240f; font: bold 20px Georgia, serif; }
.ab2-section-heading > a { color: #85500b !important; font-size: 10px; font-weight: bold; text-decoration: none; }

.ab2-system-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ab2-system-card {
    min-height: 108px;
    padding: 13px 14px;
    border: 1px solid #b29156;
    background: linear-gradient(135deg, #f6e7c7, #dbc398);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.42);
    color: var(--ab2-ink) !important;
    text-decoration: none;
}
.ab2-system-card:hover { border-color: #0d689f; transform: translateY(-1px); }
.ab2-system-card b { display: block; margin-bottom: 3px; color: #0b669e; font-size: 9px; letter-spacing: .8px; text-transform: uppercase; }
.ab2-system-card strong { display: block; color: #3e260f; font: bold 15px Georgia, serif; }
.ab2-system-card p { margin: 6px 0 0; color: #654d32 !important; font-size: 11px; line-height: 1.45; }

.ab2-latest { padding-bottom: 20px; }
.ab2-news-list { border: 1px solid #af8a50; background: rgba(250, 236, 207, .62); }
.ab2-news-list article { display: grid; grid-template-columns: 145px 1fr; min-height: 88px; border-bottom: 1px solid #c8aa77; }
.ab2-news-list article:last-child { border-bottom: 0; }
.ab2-news-thumb { min-height: 88px; background-size: cover; background-position: center; border-right: 1px solid #a9864d; }
.ab2-news-thumb-world { background-image: url('images/header/aurabra-journey-painted.jpg'); }
.ab2-news-thumb-season { background-image: url('images/header/aurabra-battlepass-painted.jpg'); }
.ab2-news-list article > div:last-child { padding: 10px 12px; }
.ab2-news-list time { color: #0b639f; font-size: 9px; font-weight: bold; letter-spacing: 1px; }
.ab2-news-list h3 { margin: 2px 0 4px; color: #3a250f; font: bold 14px Georgia, serif; }
.ab2-news-list p { margin: 0; color: #624c34 !important; font-size: 10px; line-height: 1.4; }
.ab2-dynamic-news:empty { display: none; }
.ab2-dynamic-news:not(:empty) { padding: 0 20px 20px; }

/* Right sidebar */
#ThemeboxesColumn { text-align: left !important; }
#RightArtwork.ab2-side-card,
.ab2-side-card {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
    margin: 0 0 12px !important;
    padding: 10px;
    overflow: hidden !important;
    border: 3px solid #1b2023;
    outline: 1px solid #bd8c31;
    background: linear-gradient(180deg, rgba(61, 35, 17, .98), rgba(25, 16, 10, .99));
    box-shadow: inset 0 0 0 1px #715021, inset 0 0 16px #080402, 0 5px 12px rgba(0, 0, 0, .62);
    color: #e7dcc5;
    text-align: center;
}

.ab2-side-card h2 {
    margin: -2px -2px 8px;
    padding-bottom: 7px;
    border-bottom: 1px solid #80602a;
    color: #f0d16d;
    font: bold 13px Georgia, serif;
    letter-spacing: .4px;
}

.ab2-world-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 8px 0 5px;
    color: var(--ab2-green);
    font: bold 20px Georgia, serif;
}
.ab2-world-status i {
    width: 15px;
    height: 15px;
    border: 2px solid #a5f8a8;
    border-radius: 50%;
    background: #19c948;
    box-shadow: 0 0 10px #31ff61;
}
.ab2-world-offline { color: #ed7770; }
.ab2-world-offline i { border-color: #ffaaa5; background: #bb2922; box-shadow: 0 0 9px #e94239; }
#RightArtwork #PlayersOnline {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    color: #ccb88f !important;
    font: normal 9px Arial, sans-serif !important;
    text-shadow: none !important;
}
#RightArtwork #PlayersOnline #players { display: inline !important; color: #f1d477 !important; font: bold 11px Arial, sans-serif !important; }
.ab2-status-card ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; margin: 9px 0 0; padding: 8px 0 0; border-top: 1px solid #553f21; list-style: none; }
.ab2-status-card li { color: #e4d5b8; font-size: 9px; font-weight: bold; }
.ab2-status-card li + li::before { content: "◆"; margin-right: 5px; color: #b68429; }

.ab2-side-art {
    height: 142px;
    margin: 0 -1px 8px;
    border: 1px solid #ae8441;
    background: linear-gradient(180deg, transparent 40%, rgba(9, 12, 14, .72)), url('images/header/aurabra-battlepass-painted.jpg') 35% 35% / cover;
}
.ab2-side-battlepass > strong { color: #f1d373; font: bold 12px Georgia, serif; }
.ab2-side-card p { margin: 6px 2px 10px; color: #d5c7a9 !important; font-size: 9px; line-height: 1.4; }
.ab2-side-card > a {
    display: block;
    padding: 8px 6px;
    border: 1px solid #d1a13a;
    background: linear-gradient(180deg, #156cb8, #082e5b);
    color: #ffe59a !important;
    font: bold 10px Georgia, serif;
    text-align: center;
    text-decoration: none;
}
.ab2-side-card > a:hover { filter: brightness(1.15); }

#Themeboxes { width: 100%; }
#Themeboxes #Topbar.AurabraHighscores {
    width: 100% !important;
    box-sizing: border-box;
    margin: 0 0 12px !important;
    border: 3px solid #1b2023 !important;
    outline: 1px solid #bd8c31;
    background: linear-gradient(180deg, rgba(57, 34, 18, .98), rgba(22, 15, 10, .99)) !important;
}
#Themeboxes .AurabraHighscoresTitle { color: #efd16d !important; }
#Themeboxes .AurabraRankRow { background: rgba(8, 25, 35, .72) !important; border-color: #5b4827 !important; }
#Themeboxes .AurabraRankName { max-width: 102px; color: #dfd3bd !important; }
#Themeboxes .AurabraRankLevel { color: #c7a95e !important; }
#Themeboxes #NewcomerBox,
#Themeboxes #GalleryBox,
#Themeboxes #CurrentPollBox { display: none !important; }

#Footer {
    box-sizing: border-box;
    margin-top: 12px;
    padding: 14px 10px 18px !important;
    border-top: 1px solid rgba(221, 181, 79, .62);
    background: rgba(5, 12, 17, .78);
    color: #d1c5ad !important;
    font-size: 9px !important;
    line-height: 1.6;
    text-shadow: 1px 1px #000;
}
#Footer strong { color: #efd270; font: bold 11px Georgia, serif; letter-spacing: 1.2px; }

/* Existing content components inherit the parchment portal colors. */
.ab-page,
.aurabra-faq,
.ab-highscores,
.ab-account-manage,
.ab-character-page,
.ab-serverinfo { color: var(--ab2-ink) !important; }

.ab-hero,
.aurabra-faq-hero,
.ab-si-hero,
.ab-highscores-head,
.ab-account-manage .SmallBox .Message {
    border-color: #9b7535 !important;
    background: linear-gradient(rgba(250, 237, 207, .9), rgba(222, 199, 154, .94)), url('images/header/aurabra-home-hero.jpg') center / cover !important;
    box-shadow: inset 0 0 18px rgba(67, 42, 12, .32) !important;
}

.ab-hero-title,
.aurabra-faq-hero h1,
.ab-si-hero h1,
.ab-highscores-head h2 { color: #57350f !important; text-shadow: 0 1px #fff0c6 !important; }
.ab-hero-subtitle,
.aurabra-faq-hero .subtitle,
.ab-si-hero strong,
.ab-highscores-kicker { color: #0b639f !important; }
.ab-hero-text,
.aurabra-faq-hero p,
.ab-si-hero p,
.ab-highscores-head p { color: #4c3b28 !important; }

.ab-section-title,
.ab-si-title,
.aurabra-faq-toolbar {
    border-color: #8a642b !important;
    background: linear-gradient(180deg, #49321b, #24170d) !important;
    color: #efd276 !important;
}

.ab-section-body,
.ab-si-panel,
.ab-card,
.ab-si-card,
.ab-si-mini,
.ab-empty,
.ab-footer,
.aurabra-faq-item,
.aurabra-faq-answer,
.aurabra-faq-footer {
    border-color: #aa8951 !important;
    background: rgba(247, 232, 201, .74) !important;
    color: var(--ab2-ink) !important;
}

.ab-card-label,
.ab-si-card b,
.ab-si-mini h3,
.ab-card-value,
.aurabra-faq-question,
.aurabra-faq-footer strong { color: #644015 !important; }
.ab-card-small,
.ab-si-card span,
.ab-si-mini li,
.aurabra-faq-answer { color: #58452f !important; }

@media (max-width: 1080px) {
    #Bodycontainer { width: calc(100% - 20px) !important; }
    #ContentRow { grid-template-columns: 178px minmax(0, 1fr) 178px; gap: 10px; }
    #AurabraTopNav { width: calc(100% - 250px); }
}

@media (max-width: 860px) {
    body { background-attachment: scroll !important; background-size: auto 1000px !important; }
    #ArtworkHelper { padding-bottom: 180px; }
    #AurabraLogoLink { top: -18px; width: 390px; height: 235px; }
    #AurabraTopNav { top: 190px; width: calc(100% - 24px); grid-template-columns: repeat(5, minmax(0, 1fr)); }
    #AurabraTopNav a { min-height: 39px; padding: 0 4px; font-size: 10px; }
    #ContentRow { top: 248px !important; grid-template-columns: 165px minmax(0, 1fr); }
    #ContentColumn { grid-column: 2; grid-row: 1 / span 2; }
    #ThemeboxesColumn { grid-column: 1; grid-row: 2; }
    .ab2-home-hero { min-height: 330px; }
    .ab2-home-hero h1 { font-size: 28px; }
    .ab2-pillars { grid-template-columns: 1fr; }
    .ab2-pillar { min-height: 65px; border-right: 0; border-bottom: 1px solid #b79a64; }
}

@media (max-width: 640px) {
    #ArtworkHelper { overflow: visible; }
    #AurabraLogoLink { top: -8px; width: 330px; max-width: 92vw; height: 200px; }
    #AurabraTopNav { top: 166px; display: flex; overflow-x: auto; justify-content: flex-start; }
    #AurabraTopNav a { flex: 0 0 auto; min-width: 112px; }
    #ContentRow { top: 224px !important; display: flex !important; flex-direction: column; padding-bottom: 180px; }
    #MenuColumn { display: none; }
    #ContentColumn { order: 1; width: 100% !important; }
    #ThemeboxesColumn { order: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100% !important; }
    #RightArtwork.ab2-side-card,
    .ab2-side-card { margin: 0 !important; }
    #Themeboxes { grid-column: 1 / -1; }
    .ab2-home-hero { min-height: 360px; background-position: 58% center; }
    .ab2-home-hero-copy { right: 18px; bottom: 22px; left: 18px; }
    .ab2-home-hero h1 { font-size: 25px; }
    .ab2-home-hero p { font-size: 12px; }
    .ab2-system-grid { grid-template-columns: 1fr; }
    .ab2-news-list article { grid-template-columns: 100px 1fr; }
    .ab2-hero-actions { flex-direction: column; align-items: center; }
    .ab2-btn { box-sizing: border-box; width: min(240px, 100%); }
}

@media (max-width: 420px) {
    #ThemeboxesColumn { grid-template-columns: 1fr; }
    .ab2-home-section { padding-right: 12px; padding-left: 12px; }
    .ab2-news-list article { grid-template-columns: 1fr; }
    .ab2-news-thumb { min-height: 115px; border-right: 0; border-bottom: 1px solid #a9864d; }
    .ab2-section-heading { align-items: flex-start; flex-direction: column; }
}

/* ==========================================================
   ACCOUNT MANAGEMENT
   ========================================================== */

.ab-account-manage {
    color: #dce8ef;
}

.ab-account-manage .SmallBox {
    margin: 0 0 12px;
    border: 1px solid #8d7134;
    box-shadow: inset 0 0 0 1px #153f60;
}

.ab-account-manage .SmallBox .Message {
    padding: 12px 14px;
    background:
        radial-gradient(circle at 80% 30%, rgba(29, 112, 171, .16), transparent 30%),
        #081b2b !important;
}

.ab-account-manage .ab-account-topbar .Message {
    min-height: 34px;
}

.ab-account-welcome {
    margin: 2px 0 14px;
    padding: 10px;
    text-align: center;
    background: #071927;
    border-top: 1px solid #31516a;
    border-bottom: 1px solid #31516a;
}

.ab-account-welcome-copy {
    padding: 0 12px;
    text-align: center;
    vertical-align: middle;
}

.ab-account-welcome-copy strong,
.ab-account-welcome-copy span {
    display: block;
}

.ab-account-welcome-copy strong {
    color: #e7c96b;
    font: bold 19px Georgia, "Times New Roman", serif;
}

.ab-account-welcome-copy span {
    margin-top: 4px;
    color: #a9bfcd;
    font-size: 11px;
}

.ab-account-manage .CaptionContainer,
.ab-account-manage .CaptionInnerContainer {
    background:
        radial-gradient(circle at 88% 50%, rgba(56, 160, 239, .13), transparent 22%),
        linear-gradient(180deg, #123b60 0%, #0b2945 54%, #071b30 100%) !important;
}

.ab-account-manage .CaptionContainer .Text {
    color: #e7c96b !important;
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: .2px;
}

.ab-account-manage .TableContent td {
    padding: 6px 7px !important;
}

.ab-account-manage .InnerTableButtonRow {
    margin-top: 5px;
    padding: 5px 0 1px;
}

.ab-account-manage .TopButtonContainer {
    opacity: .7;
}

@media (max-width: 760px) {
    .ab-character-summary {
        flex-direction: column;
    }

    .ab-character-outfit {
        flex-basis: auto;
    }

    .ab-character-outfit-stage {
        height: 112px;
    }

    .ab-character-stats-layout,
    .ab-character-stats-layout > tbody,
    .ab-character-stats-layout > tbody > tr,
    .ab-character-stats-layout > tbody > tr > td {
        display: block;
        width: 100% !important;
    }

    .ab-character-skills-panel {
        padding: 0 0 7px;
    }

    .ab-equipment-panel > table {
        width: 174px !important;
    }
}

/* AURABRA presentation and systems pages */
.ab2-info-page { color: var(--ab2-ink); }
.ab2-info-hero {
    position: relative;
    min-height: 245px;
    box-sizing: border-box;
    margin-bottom: 16px;
    padding: 92px 34px 25px;
    overflow: hidden;
    border: 1px solid #8e672b;
    background-position: center;
    background-size: cover;
    box-shadow: inset 0 -130px 100px rgba(4, 8, 11, .8);
    text-align: center;
}
.ab2-info-hero-world { background-image: url('images/header/aurabra-home-hero.jpg'); }
.ab2-info-hero-systems { background-image: url('images/header/aurabra-world-painted.jpg'); }
.ab2-info-hero > * { position: relative; z-index: 2; }
.ab2-info-hero > span { color: #7ee4f5; font-size: 10px; font-weight: bold; letter-spacing: 1.8px; text-shadow: 1px 1px 2px #000; }
.ab2-info-hero h1 { margin: 5px 0 7px; color: #f2d577; font: bold 28px Georgia, serif; text-shadow: 1px 2px 3px #000; }
.ab2-info-hero p { max-width: 670px; margin: 0 auto; color: #fff4dd !important; font-size: 12px; line-height: 1.55; text-shadow: 1px 1px 2px #000; }

.ab2-copy-section {
    margin-bottom: 12px;
    padding: 17px;
    border: 1px solid #b29057;
    background: rgba(249, 235, 205, .66);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.42);
}
.ab2-copy-section header { margin-bottom: 9px; padding-bottom: 7px; border-bottom: 2px solid #9c7131; }
.ab2-copy-section header span,
.ab2-system-detail > div > span { color: #0c679f; font-size: 9px; font-weight: bold; letter-spacing: 1.35px; }
.ab2-copy-section h2,
.ab2-system-detail h2 { margin: 3px 0 0; color: #3d260f; font: bold 20px Georgia, serif; }
.ab2-copy-section > p,
.ab2-system-detail p { color: #5c472f !important; font-size: 12px; line-height: 1.6; }

.ab2-values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.ab2-values-grid article { padding: 13px; border: 1px solid #b2945d; background: rgba(255, 245, 220, .62); }
.ab2-values-grid b { float: right; color: rgba(10, 100, 155, .28); font: bold 28px Georgia, serif; }
.ab2-values-grid h3 { margin: 0 0 6px; color: #4b2d0d; font: bold 15px Georgia, serif; }
.ab2-values-grid p { margin: 0; color: #665039 !important; font-size: 10px; line-height: 1.5; }

.ab2-split-section { display: grid; grid-template-columns: minmax(210px, .72fr) 1.28fr; gap: 17px; align-items: stretch; }
.ab2-split-art { min-height: 245px; border: 1px solid #9d783d; background-position: center; background-size: cover; }
.ab2-split-art-access { background-image: linear-gradient(180deg, transparent, rgba(4,11,15,.35)), url('images/header/aurabra-journey-painted.jpg'); }
.ab2-check-list { margin: 12px 0 0; padding: 0; list-style: none; }
.ab2-check-list li { position: relative; margin: 6px 0; padding: 6px 8px 6px 27px; border-left: 2px solid #0f6ea8; background: rgba(219, 194, 148, .48); color: #4f3b27; font-size: 11px; }
.ab2-check-list li::before { content: "◆"; position: absolute; left: 9px; color: #a86d11; }

.ab2-feature-line { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ab2-feature-line > div { padding: 12px; border-top: 3px solid #126ba3; background: rgba(251, 239, 213, .65); }
.ab2-feature-line strong { color: #4a2d0e; font: bold 14px Georgia, serif; }
.ab2-feature-line p { margin: 5px 0 0; color: #645039 !important; font-size: 10px; line-height: 1.5; }

.ab2-page-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 15px 5px 5px; }
.ab2-page-actions .ab2-btn { text-align: center; }

.ab2-anchor-nav { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 12px; padding: 8px; border: 1px solid #8e692f; background: #342416; }
.ab2-anchor-nav a { flex: 1 1 100px; padding: 7px 5px; border: 1px solid #735628; background: #1d1711; color: #efd27a !important; font: bold 10px Georgia, serif; text-align: center; text-decoration: none; }
.ab2-anchor-nav a:hover { background: #0e5686; }

.ab2-system-detail {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 9px;
    padding: 15px;
    border: 1px solid #b08d54;
    background: rgba(249, 235, 207, .7);
}
.ab2-system-number { color: rgba(10, 101, 158, .4); font: bold 36px Georgia, serif; text-align: center; }
.ab2-system-detail h2 { margin-bottom: 6px; }
.ab2-system-detail p { margin: 0; }
.ab2-system-detail ul { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 0; padding: 0; list-style: none; }
.ab2-system-detail li { padding: 5px 8px; border: 1px solid #a88751; background: rgba(215, 189, 143, .48); color: #533c23; font-size: 10px; font-weight: bold; }
.ab2-system-highlight { grid-template-columns: 60px minmax(0, 1fr) 175px; border-color: #9b6f24; background: linear-gradient(90deg, rgba(248,235,205,.92), rgba(223,196,145,.78)); }
.ab2-system-promo-art { min-height: 190px; border: 1px solid #9e773d; background: linear-gradient(180deg, transparent, rgba(3, 10, 15, .5)), url('images/header/aurabra-battlepass-painted.jpg') 38% 38% / cover; }
.ab2-vip-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.ab2-vip-stats > div { padding: 9px 6px; border: 1px solid #9f7b42; background: #3a2919; text-align: center; }
.ab2-vip-stats b { display: block; color: #f1d16d; font: bold 18px Georgia, serif; }
.ab2-vip-stats span { display: block; margin-top: 3px; color: #dfd0b4; font-size: 9px; }

/* Final palette fixes for templates that contain local legacy styles. */
#ContentColumn .ab-si-table th,
#ContentColumn .ab-highscores-table th { background: #3c2b1b !important; color: #efd273 !important; border-color: #8e6d37 !important; }
#ContentColumn .ab-si-table td,
#ContentColumn .ab-highscores-table td,
#ContentColumn .ab-highscores-table tbody tr:nth-child(even) td { background: rgba(248, 234, 204, .74) !important; color: #3f2d1c !important; border-color: #b79a66 !important; }
#ContentColumn .ab-si-table tr:nth-child(even) td,
#ContentColumn .ab-highscores-table tbody tr:hover td { background: rgba(221, 197, 153, .8) !important; }
#ContentColumn .ab-si-table td:last-child { color: #0c629a !important; }

@media (max-width: 700px) {
    .ab2-values-grid,
    .ab2-feature-line,
    .ab2-vip-stats { grid-template-columns: 1fr 1fr; }
    .ab2-split-section { grid-template-columns: 1fr; }
    .ab2-split-art { min-height: 180px; }
    .ab2-system-highlight { grid-template-columns: 48px minmax(0, 1fr); }
    .ab2-system-promo-art { grid-column: 1 / -1; min-height: 220px; }
}

@media (max-width: 430px) {
    .ab2-info-hero { min-height: 290px; padding: 112px 18px 22px; }
    .ab2-info-hero h1 { font-size: 23px; }
    .ab2-values-grid,
    .ab2-feature-line,
    .ab2-vip-stats { grid-template-columns: 1fr; }
    .ab2-system-detail,
    .ab2-system-highlight { grid-template-columns: 1fr; }
    .ab2-system-number { text-align: left; }
}

/* Login selectors require two IDs to override the legacy Tibia template. */
#Loginbox.AurabraLoginBox #LoginstatusText_1 {
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 8px !important;
    color: #d9c79e !important;
    font: bold 9px Arial, sans-serif !important;
    letter-spacing: 1px !important;
    text-align: center !important;
}

#Loginbox.AurabraLoginBox #LoginButton,
#Loginbox.AurabraLoginBox #LoginstatusText_2 {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 32px !important;
    margin: 0 0 7px !important;
    padding: 0 8px !important;
    border: 1px solid #d2a841 !important;
    background: linear-gradient(180deg, #155da0, #082b54) !important;
    color: #f8df91 !important;
    font: bold 11px Georgia, "Times New Roman", serif !important;
    letter-spacing: .45px !important;
    text-align: center !important;
    text-shadow: 1px 1px #000 !important;
}

#Loginbox.AurabraLoginBox #LoginstatusText_2 {
    margin-bottom: 0 !important;
    background: linear-gradient(180deg, #49301a, #26170d) !important;
    text-indent: 0 !important;
    overflow: visible !important;
}

#Loginbox.AurabraLoginBox #LoginButton #ButtonText {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    color: #f8df91 !important;
    font: bold 11px Georgia, "Times New Roman", serif !important;
    line-height: normal !important;
    letter-spacing: .45px !important;
    text-indent: 0 !important;
    overflow: visible !important;
}

/* Final mobile overrides stay last because the theme contains legacy breakpoints. */
@media (max-width: 640px) {
    #ArtworkHelper {
        box-sizing: border-box !important;
        width: 100% !important;
        padding-bottom: 150px !important;
        overflow-x: hidden !important;
    }

    #Bodycontainer {
        box-sizing: border-box !important;
        width: calc(100% - 16px) !important;
        max-width: none !important;
        margin: 0 8px !important;
    }

    #AurabraLogoLink {
        top: -12px !important;
        left: 50% !important;
        width: min(300px, 86vw) !important;
        max-width: 86vw !important;
        height: 182px !important;
        transform: translateX(-50%) !important;
    }

    #AurabraHeaderLogo {
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        transform: none !important;
        object-fit: contain !important;
        object-position: center center !important;
    }

    #AurabraTopNav {
        top: 158px !important;
        left: 10px !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        width: calc(100% - 20px) !important;
        min-height: 0 !important;
        transform: none !important;
        overflow: visible !important;
    }

    #AurabraTopNav a {
        box-sizing: border-box !important;
        grid-column: span 2 !important;
        flex: none !important;
        min-width: 0 !important;
        min-height: 38px !important;
        padding: 0 3px !important;
        border-right: 1px solid #594420 !important;
        border-bottom: 1px solid #594420 !important;
        font-size: 9px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    #AurabraTopNav a:nth-child(3),
    #AurabraTopNav a:last-child {
        border-right: 0 !important;
    }

    #AurabraTopNav a:nth-child(n + 4) {
        grid-column: span 3 !important;
        border-bottom: 0 !important;
    }

    #ContentRow {
        top: 252px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        padding-bottom: 150px !important;
    }

    #ContentColumn,
    #ContentColumn .Content,
    #ContentColumn .Box,
    #ContentColumn .BoxContent {
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    #ContentColumn .ab2-info-hero {
        min-height: 250px !important;
        padding: 78px 14px 20px !important;
        background-position: center center !important;
    }

    #ContentColumn .ab2-info-hero h1 {
        font-size: 22px !important;
        line-height: 1.08 !important;
    }

    #ContentColumn .ab2-info-hero p {
        color: #fff4dd !important;
        font-size: 11px !important;
        line-height: 1.42 !important;
        text-shadow: 1px 1px 3px #000 !important;
    }

    .ab2-anchor-nav {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .ab2-anchor-nav a { min-width: 0 !important; }

    .ab2-system-detail,
    .ab2-copy-section {
        box-sizing: border-box !important;
        max-width: 100% !important;
        padding: 12px !important;
    }

    #ContentColumn #createaccount table.TableContent td.LabelV {
        width: 105px !important;
    }

    #ContentColumn #createaccount input[type="text"],
    #ContentColumn #createaccount input[type="password"],
    #ContentColumn #createaccount select {
        width: 100% !important;
    }
}