body {
  margin:50px;
  padding:50px;
  background-color: #061222;
  /* Fundo: quem manda no dia a dia e o layouts/tibiacom/wallpaper_diario.php,
     que imprime um <style> depois deste arquivo e troca a imagem todo dia.
     A url abaixo e so o plano B (se o PHP falhar ou a pasta ficar vazia).
     Antes apontava para padrao1.jpg, que nao existe mais na pasta. */
  background-image: url('/layouts/tibiacom/images/Wallpaper/1.jpg');
  background-position: top;
  background-attachment: fixed;
  background-size: 100%;
  background-repeat: no-repeat;
}

/*
body {
  margin: 20px;
  padding: 20px;
  background:
    linear-gradient(rgba(6, 18, 34, .0), rgba(6, 18, 34, .9)),
    url('/layouts/tibiacom/images/Wallpaper/default12.jpg');
  background-color: #061222;     
  background-position: top;
  background-size: contain;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
*/

.top_level {
  position: relative; /* Cria o stacking context para poder usar z-index */
  z-index: 0;         /* Garante que o container base esteja atrás, se precisar */
}

/* Camada escura */
.top_level::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0;
  
  background-color: rgba(0, 0, 0, 0.7); /* Meio transparente */
  
  /* O truque: colocar z-index negativo para ficar atrás do conteúdo */
  z-index: -1;
}



.frags {
  position: absolute;
  right: -20px;
  top: 70px;
  width: auto;
  display: block;
  text-align: center;
  text-decoration: none;
  
  /* Fonte e cor */
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: bold;
  line-height: 1.1;
  color: #FFD700;  /* Dourado */
  
  /* Vertical (cima pra baixo) */
  writing-mode: vertical-rl;
  text-orientation: upright;

  /* Fundo com degradê e borda dourada */
  background: linear-gradient(180deg, #333 0%, #111 100%);
  border: 1px solid red;
  border-radius: 12px;

  /* Sombra pra dar profundidade */
  box-shadow: 0 0 4px rgba(0,0,0,0.8);
  
  /* Espaço interno */
  padding: 8px 5px;

  /* Transição suave */
  transition: all 0.2s ease;
}

/* Forçar cor dourada em todos estados do link */
.frags,
.frags:link,
.frags:visited,
.frags:hover,
.frags:active {
  color: red !important;
}

/* Efeito ao passar mouse */
.frags:hover {
  /* Clareia um pouco o degradê */
  background: linear-gradient(180deg, #444 0%, #222 100%);
}







.view-button-text {
  position: absolute;
  right: -20px;
  top: 0px;
  width: auto;
  display: block;
  text-align: center;
  text-decoration: none;
  
  /* Fonte e cor */
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: bold;
  line-height: 1.1;
  color: #FFD700;  /* Dourado */
  
  /* Vertical (cima pra baixo) */
  writing-mode: vertical-rl;
  text-orientation: upright;

  /* Fundo com degradê e borda dourada */
  background: linear-gradient(180deg, #333 0%, #111 100%);
  border: 1px solid #FFD700;
  border-radius: 12px;

  /* Sombra pra dar profundidade */
  box-shadow: 0 0 4px rgba(0,0,0,0.8);
  
  /* Espaço interno */
  padding: 8px 5px;

  /* Transição suave */
  transition: all 0.2s ease;
}

/* Forçar cor dourada em todos estados do link */
.view-button-text,
.view-button-text:link,
.view-button-text:visited,
.view-button-text:hover,
.view-button-text:active {
  color: #FFD700 !important;
}

/* Efeito ao passar mouse */
.view-button-text:hover {
  /* Clareia um pouco o degradê */
  background: linear-gradient(180deg, #444 0%, #222 100%);
}


.view-button-text2 {
  position: absolute;
  right: -20px;
  top: 0px;
  width: auto;
  display: block;
  text-align: center;
  text-decoration: none;
  
  /* Fonte e cor */
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: bold;
  line-height: 1.1;
  color: #FFD700;  /* Dourado */
  
  /* Vertical (cima pra baixo) */
  writing-mode: vertical-rl;
  text-orientation: upright;

  /* Fundo com degradê e borda dourada */
  background: linear-gradient(180deg, #333 0%, #111 100%);
  border: 1px solid #FFD700;
  border-radius: 12px;

  /* Sombra pra dar profundidade */
  box-shadow: 0 0 4px rgba(0,0,0,0.8);
  
  /* Espaço interno */
  padding: 8px 5px;

  /* Transição suave */
  transition: all 0.2s ease;
}

/* Forçar cor dourada em todos estados do link */
.view-button-text2,
.view-button-text2:link,
.view-button-text2:visited,
.view-button-text2:hover,
.view-button-text2:active {
  color: #FFD700 !important;
}

/* Efeito ao passar mouse */
.view-button-text2:hover {
  /* Clareia um pouco o degradê */
  background: linear-gradient(180deg, #444 0%, #222 100%);
}








.view-button-text3 {
  position: absolute;
  right: -20px;
  top: 70px;
  width: auto;
  display: block;
  text-align: center;
  text-decoration: none;
  
  /* Fonte e cor */
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: bold;
  line-height: 1.1;
  color: #FFD700;  /* Dourado */
  
  /* Vertical (cima pra baixo) */
  writing-mode: vertical-rl;
  text-orientation: upright;

  /* Fundo com degradê e borda dourada */
  background: linear-gradient(180deg, #333 0%, #111 100%);
  border: 1px solid #05ff12;
  border-radius: 12px;

  /* Sombra pra dar profundidade */
  box-shadow: 0 0 4px rgba(0,0,0,0.8);
  
  /* Espaço interno */
  padding: 8px 5px;

  /* Transição suave */
  transition: all 0.2s ease;
}

/* Forçar cor dourada em todos estados do link */
.view-button-text3,
.view-button-text3:link,
.view-button-text3:visited,
.view-button-text3:hover,
.view-button-text3:active {
  color: #05ff12 !important;
}

/* Efeito ao passar mouse */
.view-button-text3:hover {
  /* Clareia um pouco o degradê */
  background: linear-gradient(180deg, #444 0%, #222 100%);
}







.marketButton {
  display: inline-block;
  cursor: pointer;          /* o cursor de "mãozinha" ao passar */
  transition: transform 0.3s ease;
  /* se quiser também efeito de sombra ou algo mais, pode adicionar aqui */
}

.marketButton:hover {
  transform: translateY(-5px); 
  /* move um pouco pra cima; você pode usar scale(), ou combinar:
     transform: scale(1.05) translateY(-3px); 
  */
}

.itemStrokeBelow {
  color: #FFF;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000,
               -1px 1px 0 #000, 1px 1px 0 #000;
  position: static !important;
  pointer-events: auto !important;
  padding-top: 0 !important;
}

.boxmarket {
    margin: 3px;
    width: 32px;
    height: 50px; /* ou 42, 45... o que achar melhor */
    background: rgba(155, 155, 155, 0.53);
    border-radius: 10px;
    border: 1.5px solid #434040;
    
}

.xpPotionButton {
  background: linear-gradient(to bottom, #ffcc33 0%, #ff9900 100%) !important;
  border: 1px solid #cc6600 !important;
  border-radius: 5px;
  color: #fff !important;
  font-weight: bold;
  padding: 5px 10px;
  /* Remova margin-left: 5px; */
  cursor: pointer;
  text-shadow: 1px 1px 0 #cc6600;
}
.xpPotionButton:hover {
  background: linear-gradient(to bottom, #ffdb66 0%, #ff9900 100%);
}

.ExpPotionButton {
  background: linear-gradient(to bottom, #32CD32 50%, #00FF00 100%) !important;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #006400 !important;
  border-radius: 5px;
  color: #fff !important;
  font-weight: bold;
  padding: 5px 10px;
  /* Remova margin-left: 5px; */
  cursor: pointer;
  text-shadow: 1px 1px 0 #006400;
}
.ExpPotionButton:hover {
  background: linear-gradient(to bottom, #32CD32 50%, #00FF00 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.search {
  background: linear-gradient(to bottom, #FF4500 50%, #FF8C00 100%) !important;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #FF0000 !important;
  border-radius: 5px;
  color: #fff !important;
  font-weight: bold;
  padding: 5px 10px;
  /* Remova margin-left: 5px; */
  cursor: pointer;
  text-shadow: 1px 1px 0 #FF0000;
}
.search:hover {
  background: linear-gradient(to bottom, #FF4500 50%, #FF8C00 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

@keyframes piscarBrilho {
  0% {
    /* Vermelho */
    text-shadow: 0 0 6px #ff0000,
                 0 0 10px #ff0000,
                 0 0 20px #ff0000;
  }
  20% {
    /* Laranja */
    text-shadow: 0 0 6px #ff9900,
                 0 0 10px #ff9900,
                 0 0 20px #ff9900;
  }
  40% {
    /* Amarelo */
    text-shadow: 0 0 6px #ffff00,
                 0 0 10px #ffff00,
                 0 0 20px #ffff00;
  }
  60% {
    /* Verde */
    text-shadow: 0 0 6px #00ff00,
                 0 0 10px #00ff00,
                 0 0 20px #00ff00;
  }
  80% {
    /* Azul */
    text-shadow: 0 0 6px #0000ff,
                 0 0 10px #0000ff,
                 0 0 20px #0000ff;
  }
  100% {
    /* Roxo */
    text-shadow: 0 0 6px #ff00ff,
                 0 0 10px #ff00ff,
                 0 0 20px #ff00ff;
  }
}


/* DemoWiki em destaque */
.demoWikiDestacado {
  color: #f6f609;
  text-shadow: 0 0 6px red, 0 0 10px red, 0 0 20px red;
  animation: piscarBrilho 7.0s infinite alternate;

  font-size: 15px;    /* Aumenta a letra */
  display: inline-block;
  margin: 0;          /* Remove qualquer espaçamento extra */
  padding: 0;
}

#submenu_demowiki {
  /* Ajuste se quiser tirar recuo extra */
  margin-left: 0;
  padding-left: 0px; /* teste 2px, 0px, etc. pra ver o melhor alinhamento */
}





.med {
  line-height: 1.4em;
}

.guild_name a:hover {
   color: #004294;
}
.guild_name a:active{
   color: #004294;
}
.guild_name a:link{
   color: #004294;
}
.guild_name a:visited {
   color: #004294;
}

   .titulo_topico {
       color: #5f2800;
       font-size: 11px;
   }



 .titulo_topico a:hover {
   color: #004294;
      font-size: 11px;
   }
.titulo_topico a:active{
   color: #004294;
       font-size: 11px;
}
.titulo_topico a:link{
   color: #004294;
       font-size: 11px;
}
.titulo_topico a:visited {
   color: #004294;
       font-size: 11px;
}

.tcat{background:#505050 url(/images/forum/gradient.png) repeat-x scroll 50% 10%;color:#FFF!important;font:bold 9pt verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif}

.explanation_page{width:10%;background-color:#D4C0A1;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fefcaf),color-stop(1,#fffeda));background-image:-webkit-linear-gradient(top,#D4C0A1,#fffeda);background-image:-moz-linear-gradient(top,#D4C0A1,#fffeda);background-image:-ms-linear-gradient(top,#D4C0A1,#fffeda);background-image:-o-linear-gradient(top,#D4C0A1,#fffeda);padding:6px;margin:0 0 6px;-webkit-box-shadow:1px 1px 3px rgba(0,0,0,0.25);-moz-box-shadow:1px 1px 3px rgba(0,0,0,0.25);box-shadow:1px 1px 3px rgba(0,0,0,0.25);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefcaf',endColorstr='#fffeda',GradientType=0);border-radius:7px}


.explanation{background-color:#D4C0A1;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fefcaf),color-stop(1,#fffeda));background-image:-webkit-linear-gradient(top,#D4C0A1,#fffeda);background-image:-moz-linear-gradient(top,#D4C0A1,#fffeda);background-image:-ms-linear-gradient(top,#D4C0A1,#fffeda);background-image:-o-linear-gradient(top,#D4C0A1,#fffeda);padding:6px;margin:0 0 6px;-webkit-box-shadow:1px 1px 3px rgba(0,0,0,0.25);-moz-box-shadow:1px 1px 3px rgba(0,0,0,0.25);box-shadow:1px 1px 3px rgba(0,0,0,0.25);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefcaf',endColorstr='#fffeda',GradientType=0);border-radius:7px}

 .explanation a:hover {
   color: #004294;
      font-size: 11px;
   }
.explanation a:active{
   color: #004294;
       font-size: 11px;
}
.explanation a:link{
   color: #004294;
       font-size: 11px;
}
.explanation a:visited {
   color: #004294;
       font-size: 11px;
}

.fr{float:right}

a.index{background:url(/images/forum/_index.png) no-repeat;padding:2px 5px 1px 20px}

a.lastpost{background:url(/images/forum/lastpost.gif) no-repeat center left;padding:4px;border:0 solid #A8A8A8}

.destaqueshop {
  color: #5f2800;
  border: 2px dashed #5f4d41;
  background: #fff600;
  width: 96%;
  font-size: 100%;
  border-radius: 2px;
  padding: 1%;
  margin: 0;
  text-align: left;
}
.destaqueshop img {
  float: left;
  padding-right: 10px;
}
.destaqueshop b {
  float: left;
  padding-right: 4px;
  color: brown;
}

.crieumaconta {
  background: url("images/buttons/criar_conta.png");
  height:43px;
  width:133px;
   left: 355px;
   margin-top: -43px;
  border:0;
  outline:0;
  position: relative;
  -moz-outline:0;
  cursor: url(/images/cursor_hover.png), auto
  
}
.crieumaconta:hover {
  background: url("images/buttons/criar_conta_over.png");
}
.crieumaconta:active {
  background: url("images/buttons/criar_conta_over.png");
}

/*-- Novos */
.servertext {
   font-size:13px;
   text-align:left;
   margin:14px;
   line-height:13.5pt 
}
.serverip {
   font-size:13px;
   text-align:center;
   margin:14px;
   line-height:13.5pt 
}

.button-reflexo-resets {
   width: 32px;
   height: 32px;
   position: absolute;
   left: 105px;
   top: 40px;
      -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

.button-reflexo-direita {
   width: 32px;
   height: 32px;
   position: absolute;
   margin-left: 15px;
   margin-top: 35px;
      -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
.createaccount {
  margin: 0;
  z-index: 1;
  border: 2px solid #5f4d41;
  border-radius: 3px;
  box-shadow: 0 0 3px rgba(0,0,0,.6);
  padding: 17px 15px 15px 45px;
  font-weight: 600;
  background: #d4c0a1;
}

.characters { 
  margin: 0;
  z-index: 1;
  border: 2px solid #5f4d41;
  border-radius: 3px;
  box-shadow: 0 0 3px rgba(0,0,0,.6);
  padding: 17px 15px 15px 45px;
  font-weight: 600;
  background: #d4c0a1;
}

.ButtonText{
  top:0;
  height:25px
  
}
 .ButtonText,.ButtonTextInputs{
  left:0;
  z-index:20;
  position:absolute;
  width:135px
}

.ButtonTextInputs{
  text-align:center;
  overflow:hidden;
  font:400 9pt serif;
   color: #f4cc6a;
   text-shadow: -1px -1px 0 #000,1px -1px 0 #2c2c2c,-1px 1px 0 #000,1px 1px 0 #530600;
   text-decoration: none;
   display: block;
   border-bottom: 0px solid #af0400;
  height:22px;
  top:6px
}

    .aviso{
  color: #5f2800;
  border: 2px dashed #5f4d41;
  background: #fff600;
  width: 96%;
  font-size: 100%;
  border-radius: 2px;
  padding: 1%;
  margin: 0;
  text-align: red;
}
.aviso img {
  float: left;
  padding-right: 10px;
}
.aviso b {
  float: left;
  padding-right: 4px;
  color: red;
} 

/* Aviso no Create Account */

.infoacc{
  text-align: left;
  color: #5f2800;
  border: 2px dashed #5f4d41;
  background: #d4c0a1;
  width: 96%;
  font-size: 100%;
  border-radius: 2px;
  padding: 1%;
  margin: 0;
  -webkit-user-select: none;
 -ms-user-select: none;
  user-select: none 
}
.infoacc img {
  float: left;
  padding-right: 10px;
  width: 30px;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none 
}
.infoacc b {
  float: left;
  padding-right: 4px;
  color: brown;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none 
}



.methodpay{
  color: #5f2800;
  border: 2px dashed #5f4d41;
  background: #fff600;
  width: 96%;
  font-size: 100%;
  border-radius: 2px;
  padding: 1%;
  margin: 0;
  text-align: left;
}
.methodpay img {
  float: left;
  padding-right: 10px;
}
.methodpay b {
  float: left;
  padding-right: 4px;
  color: brown;
}
 
.payment-method {
    display: flex;
    align-items: center;  /* Alinha os itens verticalmente */
    justify-content: flex-start;  /* Mantém os itens à esquerda */
    border: 2px solid #5f4d41;
    background-color: #fdf5e6;
    width: 95.5% !important; 
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 10px;
    transition: background-color 0.3s ease;
}

.payment-method:hover {
    background-color: #f4e3c0;
}

.payment-method img {
    height: 50px;
    width: auto;
    margin-right: 15px;  /* Espaçamento entre a imagem e o texto */
    vertical-align: middle;
}

.payment-method td {
    display: flex;
    align-items: center;  /* Centraliza verticalmente os itens na célula */
}

.payment-method .text {
    text-align: center;  /* Centraliza o texto */
    flex-grow: 1;  /* Faz o texto ocupar o espaço disponível */
	
}

.payment-method input[type="radio"] {
    margin-right: 15px;
    vertical-align: middle;
}

.promo-description,
.promo-text {
    font-weight: normal;
}

.inline-image-text {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.inline-image-text img {
    margin-right: 5px;
}

.highlight-red {
    color: red;
    font-weight: bold;
}

.text-orange {
    color: #FF6700;
}



/* Estilos para a Tabela de Promoções */
.promo-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.promo-table th {
  background-color: #00274D; /* Cabeçalho azul escuro */
  color: #fff; /* Texto branco */
  font-size: 22px; /* Tamanho da fonte aumentado */
  text-align: left;
  padding: 10px;
}

.promo-table td {
  background-color: #fdf5e6; /* Fundo neutro */
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.promo-description {
  color: #6C757D; /* Cinza para descrições */
  font-size: 18px;
}

.promo-text {
  color: #28A745; /* Verde vivo para o valor promocional */
  font-weight: bold;
}

.promo-highlight {
  color: #FF6700; /* Laranja vibrante para destaques */
  font-weight: bold;
}

/* Estilo de Botão */
.action-button {
  background-color: #DC3545; /* Vermelho forte para chamar ação */
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  text-align: center;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  margin-top: 20px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.action-button:hover {
  background-color: #c82333; /* Tom mais escuro no hover */
}

/* Estilos para métodos de pagamento */
.payment-method {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: 2px solid #5f4d41;
  background-color: #fdf5e6;
  width: 96%;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 10px;
  transition: background-color 0.3s ease;
}

.payment-method:hover {
  background-color: #f4e3c0;
}

.payment-method img {
  height: 50px;
  width: auto;
  margin-right: 15px;
  vertical-align: middle;
}

.payment-method td {
  display: flex;
  align-items: center;
}

.payment-method .text {
  text-align: center;
  flex-grow: 1;
}

.payment-method input[type="radio"] {
  margin-right: 15px;
  vertical-align: middle;
}



 
 
 
.TopGuildsText {
  top: 6px;
  text-align: center;
  font-size: 11pt;
  font-weight: 700;
  color: #fff
}
.TopGuildsText {
  position: relative
}
.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.serverinfo {
  display:block;
  text-align:center;
  font-size:13px;
  margin:1px;
  color:#5a2801;
  padding:11px 0
  }
  .servertext
  {
  font-size:13px;
  text-align:left;
  margin:14px;
  line-height:13.5pt
  }
.ui-helper-reset {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    line-height: 1.3;
    text-decoration: none;
    font-size: 100%;
    list-style: none
}
.ui-helper-clearfix:after,
.ui-helper-clearfix:before {
    content: "";
    display: table;
    border-collapse: collapse
}
.ui-helper-clearfix:after {
    clear: both
}
.ui-helper-clearfix {
    min-height: 0
}
.ui-helper-zfix {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    opacity: 0;
    filter: Alpha(Opacity=0)
}
.ui-front {
    z-index: 100
}
.ui-state-disabled {
    cursor: url(images/demowiki/cursor_hover.png), auto!important
}
.ui-icon {
    display: block;
    text-indent: -99999px;
    overflow: hidden
}
.ui-widget-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}
.ui-draggable-handle {
    -ms-touch-action: none;
    touch-action: none
}
.ui-resizable {
    position: relative
}
.ui-resizable-handle {
    position: absolute;
    font-size: .1px;
    display: block;
    -ms-touch-action: none;
    touch-action: none
}
.ui-resizable-autohide .ui-resizable-handle,
.ui-resizable-disabled .ui-resizable-handle {
    display: none
}
.ui-resizable-n {
    cursor: n-resize;
    height: 7px;
    width: 100%;
    top: -5px;
    left: 0
}
.ui-resizable-s {
    cursor: s-resize;
    height: 7px;
    width: 100%;
    bottom: -5px;
    left: 0
}
.ui-resizable-e {
    cursor: e-resize;
    width: 7px;
    right: -5px;
    top: 0;
    height: 100%
}
.ui-resizable-w {
    cursor: w-resize;
    width: 7px;
    left: -5px;
    top: 0;
    height: 100%
}
.ui-resizable-se {
    cursor: se-resize;
    width: 12px;
    height: 12px;
    right: 1px;
    bottom: 1px
}
.ui-resizable-sw {
    cursor: sw-resize;
    width: 9px;
    height: 9px;
    left: -5px;
    bottom: -5px
}
.ui-resizable-nw {
    cursor: nw-resize;
    width: 9px;
    height: 9px;
    left: -5px;
    top: -5px
}
.ui-resizable-ne {
    cursor: url(images/demowiki/cursor_hover.png), auto width: 9px;
    height: 9px;
    right: -5px;
    top: -5px
}
.ui-selectable {
    -ms-touch-action: none;
    touch-action: none
}
.ui-selectable-helper {
    position: absolute;
    z-index: 100;
    border: 1px dotted #000
}
.ui-sortable-handle {
    -ms-touch-action: none;
    touch-action: none
}
.ui-accordion .ui-accordion-header {
    display: block;
    /* [DMD fix 24/07/2026] faltava o ponto-e-virgula depois de `auto`: o segundo
       dois-pontos invalidava a declaracao INTEIRA, e as barras do accordion
       ficaram sem cursor de mao (o position:relative que vinha junto tambem
       morria — quem salvava era o dmd_wiki.css). Duas declaracoes agora. */
    cursor: url(images/demowiki/cursor_hover.png), auto;
    position: relative;
    margin: 2px 0 0;
    padding: .5em .5em .5em .7em;
    min-height: 0;
    font-size: 100%
}
.ui-accordion .ui-accordion-icons,
.ui-accordion .ui-accordion-icons .ui-accordion-icons {
    padding-left: 2.2em
}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
    position: absolute;
    left: .5em;
    top: 50%;
    margin-top: -8px
}
.ui-accordion .ui-accordion-content {
    padding: 1em 2.2em;
    border-top: 0;
    overflow: auto
}
.ui-autocomplete {
    position: absolute;
    top: 0;
    left: 0;
    cursor: url(images/demowiki/cursor_hover.png), auto
}
.ui-button {
    display: inline-block;
    position: relative;
    padding: 0;
    line-height: normal;
    margin-right: .1em;
    cursor: url(images/demowiki/cursor_hover.png), auto text-align: center;
    overflow: visible
}
.ui-button,
.ui-button:active,
.ui-button:hover,
.ui-button:link,
.ui-button:visited {
    text-decoration: none
}
.ui-button-icon-only {
    width: 2.2em
}
button.ui-button-icon-only {
    width: 2.4em
}
.ui-button-icons-only {
    width: 3.4em
}
button.ui-button-icons-only {
    width: 3.7em
}
.ui-button .ui-button-text {
    display: block;
    line-height: normal
}
.ui-button-text-only .ui-button-text {
    padding: .4em 1em
}
.ui-button-icon-only .ui-button-text,
.ui-button-icons-only .ui-button-text {
    padding: .4em;
    text-indent: -9999999px
}
.ui-button-text-icon-primary .ui-button-text,
.ui-button-text-icons .ui-button-text {
    padding: .4em 1em .4em 2.1em
}
.ui-button-text-icon-secondary .ui-button-text,
.ui-button-text-icons .ui-button-text {
    padding: .4em 2.1em .4em 1em
}
.ui-button-text-icons .ui-button-text {
    padding-left: 2.1em;
    padding-right: 2.1em
}
input.ui-button {
    padding: .4em 1em
}
.ui-button-icon-only .ui-icon,
.ui-button-icons-only .ui-icon,
.ui-button-text-icon-primary .ui-icon,
.ui-button-text-icon-secondary .ui-icon,
.ui-button-text-icons .ui-icon {
    position: absolute;
    top: 50%;
    margin-top: -8px
}
.ui-button-icon-only .ui-icon {
    left: 50%;
    margin-left: -8px
}
.ui-button-icons-only .ui-button-icon-primary,
.ui-button-text-icon-primary .ui-button-icon-primary,
.ui-button-text-icons .ui-button-icon-primary {
    left: .5em
}
.ui-button-icons-only .ui-button-icon-secondary,
.ui-button-text-icon-secondary .ui-button-icon-secondary,
.ui-button-text-icons .ui-button-icon-secondary {
    right: .5em
}
.ui-buttonset {
    margin-right: 7px
}
.ui-buttonset .ui-button {
    margin-left: 0;
    margin-right: -.3em
}
button.ui-button::-moz-focus-inner,
input.ui-button::-moz-focus-inner {
    border: 0;
    padding: 0
}
.ui-datepicker {
    width: 17em;
    padding: .2em .2em 0;
    display: none
}
.ui-datepicker .ui-datepicker-header {
    position: relative;
    padding: .2em 0
}
.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-prev {
    position: absolute;
    top: 2px;
    width: 1.8em;
    height: 1.8em
}
.ui-datepicker .ui-datepicker-next-hover,
.ui-datepicker .ui-datepicker-prev-hover {
    top: 1px
}
.ui-datepicker .ui-datepicker-prev {
    left: 2px
}
.ui-datepicker .ui-datepicker-next {
    right: 2px
}
.ui-datepicker .ui-datepicker-prev-hover {
    left: 1px
}
.ui-datepicker .ui-datepicker-next-hover {
    right: 1px
}
.ui-datepicker .ui-datepicker-next span,
.ui-datepicker .ui-datepicker-prev span {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -8px;
    top: 50%;
    margin-top: -8px
}
.ui-datepicker .ui-datepicker-title {
    margin: 0 2.3em;
    line-height: 1.8em;
    text-align: center
}
.ui-datepicker .ui-datepicker-title select {
    font-size: 1em;
    margin: 1px 0
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    width: 49%
}
.ui-datepicker table {
    width: 100%;
    font-size: .9em;
    margin: 0 0 .4em
}
.ui-datepicker th {
    padding: .7em .3em;
    text-align: center;
    font-weight: 700;
    border: 0
}
.ui-datepicker td {
    border: 0;
    padding: 1px
}
.ui-datepicker td a,
.ui-datepicker td span {
    display: block;
    padding: .2em;
    text-align: right;
    text-decoration: none
}
.ui-datepicker .ui-datepicker-buttonpane {
    background-image: none;
    margin: .7em 0 0;
    padding: 0 .2em;
    border-left: 0;
    border-right: 0;
    border-bottom: 0
}
.ui-datepicker .ui-datepicker-buttonpane button {
    float: right;
    margin: .5em .2em .4em;
    cursor: url(images/demowiki/cursor_hover.png), auto padding: .2em .6em .3em;
    width: auto;
    overflow: visible
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-multi .ui-datepicker-group,
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
    float: left
}
.ui-datepicker.ui-datepicker-multi {
    width: auto
}
.ui-datepicker-multi .ui-datepicker-group table {
    width: 95%;
    margin: 0 auto .4em
}
.ui-datepicker-multi-2 .ui-datepicker-group {
    width: 50%
}
.ui-datepicker-multi-3 .ui-datepicker-group {
    width: 33.3%
}
.ui-datepicker-multi-4 .ui-datepicker-group {
    width: 25%
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
    border-left-width: 0
}
.ui-datepicker-multi .ui-datepicker-buttonpane {
    clear: left
}
.ui-datepicker-row-break {
    clear: both;
    width: 100%;
    font-size: 0
}
.ui-datepicker-rtl {
    direction: rtl
}
.ui-datepicker-rtl .ui-datepicker-prev {
    right: 2px;
    left: auto
}
.ui-datepicker-rtl .ui-datepicker-next {
    left: 2px;
    right: auto
}
.ui-datepicker-rtl .ui-datepicker-prev:hover {
    right: 1px;
    left: auto
}
.ui-datepicker-rtl .ui-datepicker-next:hover {
    left: 1px;
    right: auto
}
.ui-datepicker-rtl .ui-datepicker-buttonpane {
    clear: right
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
    float: right
}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
    border-right-width: 0;
    border-left-width: 1px
}
.ui-dialog {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    padding: .2em;
    outline: 0
}
.ui-dialog .ui-dialog-titlebar {
    padding: .4em 1em;
    position: relative
}
.ui-dialog .ui-dialog-title {
    float: left;
    margin: .1em 0;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis
}
.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: .3em;
    top: 50%;
    width: 20px;
    margin: -10px 0 0;
    padding: 1px;
    height: 20px
}
.ui-dialog .ui-dialog-content {
    position: relative;
    border: 0;
    padding: .5em 1em;
    background: 0 0;
    overflow: auto
}
.ui-dialog .ui-dialog-buttonpane {
    text-align: left;
    border-width: 1px 0 0;
    background-image: none;
    margin-top: .5em;
    padding: .3em 1em .5em .4em
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: right
}
.ui-dialog .ui-dialog-buttonpane button {
    margin: .5em .4em .5em 0;
    cursor: url(images/demowiki/cursor_hover.png), auto
}
.ui-dialog .ui-resizable-se {
    width: 12px;
    height: 12px;
    right: -5px;
    bottom: -5px;
    background-position: 16px 16px
}
#MenuBottom,
.ui-slider-vertical .ui-slider-range-min,
.ui-spinner-down {
    bottom: 0
}
.ui-draggable .ui-dialog-titlebar {
    cursor: move
}
.ui-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
    outline: 0
}
.ui-menu .ui-menu {
    position: absolute
}
.ui-menu .ui-menu-item {
    position: relative;
    margin: 0;
    padding: 3px 1em 3px .4em;
    cursor: url(images/demowiki/cursor_hover.png), auto min-height: 0;
    list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
}
.ui-menu .ui-menu-divider {
    margin: 5px 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    border-width: 1px 0 0
}
.ui-menu .ui-state-active,
.ui-menu .ui-state-focus {
    margin: -1px
}
.ui-menu-icons {
    position: relative
}
.ui-menu-icons .ui-menu-item {
    padding-left: 2em
}
.ui-menu .ui-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    left: .2em;
    margin: auto 0
}
.ui-menu .ui-menu-icon {
    left: auto;
    right: 0
}
.ui-progressbar {
    height: 2em;
    text-align: left;
    overflow: hidden
}
.ui-progressbar .ui-progressbar-value {
    margin: -1px;
    height: 100%
}
.ui-progressbar .ui-progressbar-overlay {
    background: url(images/demowiki/animated-overlay.gif);
    height: 100%;
    filter: alpha(opacity=25);
    opacity: .25
}
.ui-progressbar-indeterminate .ui-progressbar-value {
    background-image: none
}
.ui-selectmenu-menu {
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    display: none
}
.ui-selectmenu-menu .ui-menu {
    overflow: auto;
    overflow-x: hidden;
    padding-bottom: 1px
}
.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
    font-size: 1em;
    font-weight: 700;
    line-height: 1.5;
    padding: 2px .4em;
    margin: .5em 0 0;
    height: auto;
    border: 0
}
.ui-selectmenu-open {
    display: block
}
.ui-selectmenu-button {
    display: inline-block;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    cursor: url(images/demowiki/cursor_hover.png), auto
}
.ui-selectmenu-button span.ui-icon {
    right: .5em;
    left: auto;
    margin-top: -8px;
    position: absolute;
    top: 50%
}
.SmallBox .BoxFrameVerticalRight,
.ui-slider-horizontal .ui-slider-range-max {
    right: 0
}
.ui-selectmenu-button span.ui-selectmenu-text {
    text-align: left;
    padding: .4em 2.1em .4em 1em;
    display: block;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
.ui-slider {
    position: relative;
    text-align: left
}
.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 1.2em;
    height: 1.2em;
    cursor: url(images/demowiki/cursor_hover.png), auto;
    -ms-touch-action: none;
    touch-action: none
}
.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    font-size: .7em;
    display: block;
    border: 0;
    background-position: 0 0
}
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
    filter: inherit
}
.ui-slider-horizontal {
    height: .8em
}
.ui-slider-horizontal .ui-slider-handle {
    top: -.3em;
    margin-left: -.6em
}
.ui-slider-horizontal .ui-slider-range {
    top: 0;
    height: 100%
}
.ui-slider-horizontal .ui-slider-range-min {
    left: 0
}
.ui-slider-vertical {
    width: .8em;
    height: 100px
}
.ui-slider-vertical .ui-slider-handle {
    left: -.3em;
    margin-left: 0;
    margin-bottom: -.6em
}
.ui-slider-vertical .ui-slider-range {
    left: 0;
    width: 100%
}
.ui-slider-vertical .ui-slider-range-max {
    top: 0
}
.ui-spinner {
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 0
}
.ui-spinner-input {
    border: none;
    background: 0 0;
    color: inherit;
    padding: 0;
    margin: .2em 22px .2em .4em
}
.ui-spinner-button {
    width: 16px;
    height: 50%;
    font-size: .5em;
    padding: 0;
    margin: 0;
    text-align: center;
    position: absolute;
    cursor: url(images/demowiki/cursor_hover.png), auto;
    display: block;
    overflow: hidden;
    right: 0
}
.Toplevelbox,
.top_level {
    display: block;
    overflow: visible
}
.top_level1 {
  display: block;
  overflow: visible
}
.ui-spinner a.ui-spinner-button {
    border-top: none;
    border-bottom: none;
    border-right: none
}
.ui-spinner .ui-icon {
    position: absolute;
    margin-top: -8px;
    top: 50%;
    left: 0
}
.ui-spinner-up {
    top: 0
}
.ui-spinner .ui-icon-triangle-1-s {
    background-position: -65px -16px
}
.ui-tabs {
    position: relative;
    padding: .2em
}
.ui-tabs .ui-tabs-nav {
    margin: 0;
    padding: .2em .2em 0
}
.ui-tabs .ui-tabs-nav li {
    list-style: none;
    float: left;
    position: relative;
    top: 0;
    margin: 1px .2em 0 0;
    border-bottom-width: 0;
    padding: 0;
    white-space: nowrap
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    float: left;
    padding: .5em 1em;
    text-decoration: none
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    margin-bottom: -1px;
    padding-bottom: 1px
}
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
    cursor: text
}
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
    cursor: url(images/demowiki/cursor_hover.png), auto
}
.ui-tabs .ui-tabs-panel {
    display: block;
    border-width: 0;
    padding: 1em 1.4em;
    background: 0 0
}
.ui-tooltip {
    padding: 8px;
    position: absolute;
    z-index: 9999;
    max-width: 300px;
    -webkit-box-shadow: 0 0 5px #aaa;
    box-shadow: 0 0 5px #aaa
}
body .ui-tooltip {
    border-width: 2px
}
.ui-widget {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1.1em
}
.ui-widget .ui-widget {
    font-size: 1em
}
.ui-widget button,
.ui-widget input,
.ui-widget select,
.ui-widget textarea {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1em
}
.ui-widget-content {
    border: 1px solid #796038;
    background: url(images/demowiki/ui-bg_flat_0_e6ceac_40x100.png) 50% 50% repeat-x #e6ceac;
    color: #5A2800
}
.ui-widget-content a {
    color: #5A2800
}
.ui-widget-header {
    border: 1px solid #796038;
    background: url(images/demowiki/ui-bg_diagonals-thick_10_bc9251_40x40.png) 50% 50% #bc9251;
    color: #fff;
    font-weight: 700
}
.ui-widget-header a {
    color: #fff
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    border: 1px solid #76644b;
    background: url(images/demowiki/ui-bg_gloss-wave_50_c8af7e_500x100.png) 50% 50% repeat-x #c8af7e;
    font-weight: 700;
    color: #362a21
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
    color: #362a21;
    text-decoration: none
}
.ui-state-focus,
.ui-state-hover,
.ui-widget-content .ui-state-focus,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-focus,
.ui-widget-header .ui-state-hover {
    border: 1px solid #76644b;
    background: url(images/demowiki/ui-bg_gloss-wave_50_f5f0e5_500x100.png) 50% 50% repeat-x #f5f0e5;
    font-weight: 700;
    color: #9c5619
}
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited,
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited {
    color: #9c5619;
    text-decoration: none
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
    border: 1px solid #76644b;
    background: url(images/demowiki/ui-bg_gloss-wave_50_f7ecd6_500x100.png) 50% 50% repeat-x #f7ecd6;
    font-weight: 700;
    color: #623206
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
    color: #623206;
    text-decoration: none
}
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    border: 1px solid #cca037;
    background: url(images/demowiki/ui-bg_highlight-hard_75_f5f5b5_1x100.png) 50% top repeat-x #f5f5b5;
    color: #060200
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
    color: #060200
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
    border: 1px solid #f8893f;
    background: url(layouts/tibiacom/images/demowiki/ui-bg_highlight-hard_65_fee4bd_1x100.png) 50% top repeat-x #fee4bd;
    color: #592003
}
.ui-state-error a,
.ui-state-error-text,
.ui-widget-content .ui-state-error a,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error a,
.ui-widget-header .ui-state-error-text {
    color: #592003
}
a,
input:focus {
    outline: 0
}
a,
input::-moz-focus-inner {
    border: 0
}
.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
    font-weight: 700
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
    opacity: .7;
    filter: Alpha(Opacity=70);
    font-weight: 400
}
#MenuColumn,
.Content a,
.Content a:hover,
.Content th,
.top_level {
    font-weight: 700
}
.top_level1 {
  font-weight: 700
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
    opacity: .35;
    filter: Alpha(Opacity=35);
    background-image: none
}
.ui-state-disabled .ui-icon {
    filter: Alpha(Opacity=35)
}
.ui-icon {
    width: 16px;
    height: 16px
}
.ui-icon,
.ui-widget-content .ui-icon {
    background-image: url(images/demowiki/ui-icons_c47a23_256x240.png)
}
.ui-widget-header .ui-icon {
    background-image: url(images/demowiki/ui-icons_ffffff_256x240.png)
}
.ui-state-default .ui-icon,
.ui-state-focus .ui-icon,
.ui-state-hover .ui-icon {
    background-image: url(images/demowiki/ui-icons_f08000_256x240.png)
}
.ui-state-active .ui-icon {
    background-image: url(images/demowiki/ui-icons_f35f07_256x240.png)
}
.ui-state-highlight .ui-icon {
    background-image: url(images/demowiki/ui-icons_cb672b_256x240.png)
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
    background-image: url(images/demowiki/ui-icons_ff7519_256x240.png)
}
.ui-icon-blank {
    background-position: 16px 16px
}
.ui-icon-carat-1-n {
    background-position: 0 0
}
.ui-icon-carat-1-ne {
    background-position: -16px 0
}
.ui-icon-carat-1-e {
    background-position: -32px 0
}
.ui-icon-carat-1-se {
    background-position: -48px 0
}
.ui-icon-carat-1-s {
    background-position: -64px 0
}
.ui-icon-carat-1-sw {
    background-position: -80px 0
}
.ui-icon-carat-1-w {
    background-position: -96px 0
}
.ui-icon-carat-1-nw {
    background-position: -112px 0
}
.ui-icon-carat-2-n-s {
    background-position: -128px 0
}
.ui-icon-carat-2-e-w {
    background-position: -144px 0
}
.ui-icon-triangle-1-n {
    background-position: 0 -16px
}
.ui-icon-triangle-1-ne {
    background-position: -16px -16px
}
.ui-icon-triangle-1-e {
    background-position: -32px -16px
}
.ui-icon-triangle-1-se {
    background-position: -48px -16px
}
.ui-icon-triangle-1-s {
    background-position: -64px -16px
}
.ui-icon-triangle-1-sw {
    background-position: -80px -16px
}
.ui-icon-triangle-1-w {
    background-position: -96px -16px
}
.ui-icon-triangle-1-nw {
    background-position: -112px -16px
}
.ui-icon-triangle-2-n-s {
    background-position: -128px -16px
}
.ui-icon-triangle-2-e-w {
    background-position: -144px -16px
}
.ui-icon-arrow-1-n {
    background-position: 0 -32px
}
.ui-icon-arrow-1-ne {
    background-position: -16px -32px
}
.ui-icon-arrow-1-e {
    background-position: -32px -32px
}
.ui-icon-arrow-1-se {
    background-position: -48px -32px
}
.ui-icon-arrow-1-s {
    background-position: -64px -32px
}
.ui-icon-arrow-1-sw {
    background-position: -80px -32px
}
.ui-icon-arrow-1-w {
    background-position: -96px -32px
}
.ui-icon-arrow-1-nw {
    background-position: -112px -32px
}
.ui-icon-arrow-2-n-s {
    background-position: -128px -32px
}
.ui-icon-arrow-2-ne-sw {
    background-position: -144px -32px
}
.ui-icon-arrow-2-e-w {
    background-position: -160px -32px
}
.ui-icon-arrow-2-se-nw {
    background-position: -176px -32px
}
.ui-icon-arrowstop-1-n {
    background-position: -192px -32px
}
.ui-icon-arrowstop-1-e {
    background-position: -208px -32px
}
.ui-icon-arrowstop-1-s {
    background-position: -224px -32px
}
.ui-icon-arrowstop-1-w {
    background-position: -240px -32px
}
.ui-icon-arrowthick-1-n {
    background-position: 0 -48px
}
.ui-icon-arrowthick-1-ne {
    background-position: -16px -48px
}
.ui-icon-arrowthick-1-e {
    background-position: -32px -48px
}
.ui-icon-arrowthick-1-se {
    background-position: -48px -48px
}
.ui-icon-arrowthick-1-s {
    background-position: -64px -48px
}
.ui-icon-arrowthick-1-sw {
    background-position: -80px -48px
}
.ui-icon-arrowthick-1-w {
    background-position: -96px -48px
}
.ui-icon-arrowthick-1-nw {
    background-position: -112px -48px
}
.ui-icon-arrowthick-2-n-s {
    background-position: -128px -48px
}
.ui-icon-arrowthick-2-ne-sw {
    background-position: -144px -48px
}
.ui-icon-arrowthick-2-e-w {
    background-position: -160px -48px
}
.ui-icon-arrowthick-2-se-nw {
    background-position: -176px -48px
}
.ui-icon-arrowthickstop-1-n {
    background-position: -192px -48px
}
.ui-icon-arrowthickstop-1-e {
    background-position: -208px -48px
}
.ui-icon-arrowthickstop-1-s {
    background-position: -224px -48px
}
.ui-icon-arrowthickstop-1-w {
    background-position: -240px -48px
}
.ui-icon-arrowreturnthick-1-w {
    background-position: 0 -64px
}
.ui-icon-arrowreturnthick-1-n {
    background-position: -16px -64px
}
.ui-icon-arrowreturnthick-1-e {
    background-position: -32px -64px
}
.ui-icon-arrowreturnthick-1-s {
    background-position: -48px -64px
}
.ui-icon-arrowreturn-1-w {
    background-position: -64px -64px
}
.ui-icon-arrowreturn-1-n {
    background-position: -80px -64px
}
.ui-icon-arrowreturn-1-e {
    background-position: -96px -64px
}
.ui-icon-arrowreturn-1-s {
    background-position: -112px -64px
}
.ui-icon-arrowrefresh-1-w {
    background-position: -128px -64px
}
.ui-icon-arrowrefresh-1-n {
    background-position: -144px -64px
}
.ui-icon-arrowrefresh-1-e {
    background-position: -160px -64px
}
.ui-icon-arrowrefresh-1-s {
    background-position: -176px -64px
}
.ui-icon-arrow-4 {
    background-position: 0 -80px
}
.ui-icon-arrow-4-diag {
    background-position: -16px -80px
}
.ui-icon-extlink {
    background-position: -32px -80px
}
.ui-icon-newwin {
    background-position: -48px -80px
}
.ui-icon-refresh {
    background-position: -64px -80px
}
.ui-icon-shuffle {
    background-position: -80px -80px
}
.ui-icon-transfer-e-w {
    background-position: -96px -80px
}
.ui-icon-transferthick-e-w {
    background-position: -112px -80px
}
.ui-icon-folder-collapsed {
    background-position: 0 -96px
}
.ui-icon-folder-open {
    background-position: -16px -96px
}
.ui-icon-document {
    background-position: -32px -96px
}
.ui-icon-document-b {
    background-position: -48px -96px
}
.ui-icon-note {
    background-position: -64px -96px
}
.ui-icon-mail-closed {
    background-position: -80px -96px
}
.ui-icon-mail-open {
    background-position: -96px -96px
}
.ui-icon-suitcase {
    background-position: -112px -96px
}
.ui-icon-comment {
    background-position: -128px -96px
}
.ui-icon-person {
    background-position: -144px -96px
}
.ui-icon-print {
    background-position: -160px -96px
}
.ui-icon-trash {
    background-position: -176px -96px
}
.ui-icon-locked {
    background-position: -192px -96px
}
.ui-icon-unlocked {
    background-position: -208px -96px
}
.ui-icon-bookmark {
    background-position: -224px -96px
}
.ui-icon-tag {
    background-position: -240px -96px
}
.ui-icon-home {
    background-position: 0 -112px
}
.ui-icon-flag {
    background-position: -16px -112px
}
.ui-icon-calendar {
    background-position: -32px -112px
}
.ui-icon-cart {
    background-position: -48px -112px
}
.ui-icon-pencil {
    background-position: -64px -112px
}
.ui-icon-clock {
    background-position: -80px -112px
}
.ui-icon-disk {
    background-position: -96px -112px
}
.ui-icon-calculator {
    background-position: -112px -112px
}
.ui-icon-zoomin {
    background-position: -128px -112px
}
.ui-icon-zoomout {
    background-position: -144px -112px
}
.ui-icon-search {
    background-position: -160px -112px
}
.ui-icon-wrench {
    background-position: -176px -112px
}
.ui-icon-gear {
    background-position: -192px -112px
}
.ui-icon-heart {
    background-position: -208px -112px
}
.ui-icon-star {
    background-position: -224px -112px
}
.ui-icon-link {
    background-position: -240px -112px
}
.ui-icon-cancel {
    background-position: 0 -128px
}
.ui-icon-plus {
    background-position: -16px -128px
}
.ui-icon-plusthick {
    background-position: -32px -128px
}
.ui-icon-minus {
    background-position: -48px -128px
}
.ui-icon-minusthick {
    background-position: -64px -128px
}
.ui-icon-close {
    background-position: -80px -128px
}
.ui-icon-closethick {
    background-position: -96px -128px
}
.ui-icon-key {
    background-position: -112px -128px
}
.ui-icon-lightbulb {
    background-position: -128px -128px
}
.ui-icon-scissors {
    background-position: -144px -128px
}
.ui-icon-clipboard {
    background-position: -160px -128px
}
.ui-icon-copy {
    background-position: -176px -128px
}
.ui-icon-contact {
    background-position: -192px -128px
}
.ui-icon-image {
    background-position: -208px -128px
}
.ui-icon-video {
    background-position: -224px -128px
}
.ui-icon-script {
    background-position: -240px -128px
}
.ui-icon-alert {
    background-position: 0 -144px
}
.ui-icon-info {
    background-position: -16px -144px
}
.ui-icon-notice {
    background-position: -32px -144px
}
.ui-icon-help {
    background-position: -48px -144px
}
.ui-icon-check {
    background-position: -64px -144px
}
.ui-icon-bullet {
    background-position: -80px -144px
}
.ui-icon-radio-on {
    background-position: -96px -144px
}
.ui-icon-radio-off {
    background-position: -112px -144px
}
.ui-icon-pin-w {
    background-position: -128px -144px
}
.ui-icon-pin-s {
    background-position: -144px -144px
}
.ui-icon-play {
    background-position: 0 -160px
}
.ui-icon-pause {
    background-position: -16px -160px
}
.ui-icon-seek-next {
    background-position: -32px -160px
}
.ui-icon-seek-prev {
    background-position: -48px -160px
}
.ui-icon-seek-end {
    background-position: -64px -160px
}
.ui-icon-seek-first,
.ui-icon-seek-start {
    background-position: -80px -160px
}
.ui-icon-stop {
    background-position: -96px -160px
}
.ui-icon-eject {
    background-position: -112px -160px
}
.ui-icon-volume-off {
    background-position: -128px -160px
}
.ui-icon-volume-on {
    background-position: -144px -160px
}
.ui-icon-power {
    background-position: 0 -176px
}
.ui-icon-signal-diag {
    background-position: -16px -176px
}
.ui-icon-signal {
    background-position: -32px -176px
}
.ui-icon-battery-0 {
    background-position: -48px -176px
}
.ui-icon-battery-1 {
    background-position: -64px -176px
}
.ui-icon-battery-2 {
    background-position: -80px -176px
}
.ui-icon-battery-3 {
    background-position: -96px -176px
}
.ui-icon-circle-plus {
    background-position: 0 -192px
}
.ui-icon-circle-minus {
    background-position: -16px -192px
}
.ui-icon-circle-close {
    background-position: -32px -192px
}
.ui-icon-circle-triangle-e {
    background-position: -48px -192px
}
.ui-icon-circle-triangle-s {
    background-position: -64px -192px
}
.ui-icon-circle-triangle-w {
    background-position: -80px -192px
}
.ui-icon-circle-triangle-n {
    background-position: -96px -192px
}
.ui-icon-circle-arrow-e {
    background-position: -112px -192px
}
.ui-icon-circle-arrow-s {
    background-position: -128px -192px
}
.ui-icon-circle-arrow-w {
    background-position: -144px -192px
}
.ui-icon-circle-arrow-n {
    background-position: -160px -192px
}
.ui-icon-circle-zoomin {
    background-position: -176px -192px
}
.ui-icon-circle-zoomout {
    background-position: -192px -192px
}
.ui-icon-circle-check {
    background-position: -208px -192px
}
.ui-icon-circlesmall-plus {
    background-position: 0 -208px
}
.ui-icon-circlesmall-minus {
    background-position: -16px -208px
}
.ui-icon-circlesmall-close {
    background-position: -32px -208px
}
.ui-icon-squaresmall-plus {
    background-position: -48px -208px
}
.ui-icon-squaresmall-minus {
    background-position: -64px -208px
}
.ui-icon-squaresmall-close {
    background-position: -80px -208px
}
.ui-icon-grip-dotted-vertical {
    background-position: 0 -224px
}
.ui-icon-grip-dotted-horizontal {
    background-position: -16px -224px
}
.ui-icon-grip-solid-vertical {
    background-position: -32px -224px
}
.ui-icon-grip-solid-horizontal {
    background-position: -48px -224px
}
.ui-icon-gripsmall-diagonal-se {
    background-position: -64px -224px
}
.ui-icon-grip-diagonal-se {
    background-position: -80px -224px
}
.ui-corner-all,
.ui-corner-left,
.ui-corner-tl,
.ui-corner-top {
    border-top-left-radius: 2px
}
.ui-corner-all,
.ui-corner-right,
.ui-corner-top,
.ui-corner-tr {
    border-top-right-radius: 2px
}
.ui-corner-all,
.ui-corner-bl,
.ui-corner-bottom,
.ui-corner-left {
    border-bottom-left-radius: 2px
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-br,
.ui-corner-right {
    border-bottom-right-radius: 2px
}
.ui-widget-overlay {
    background: url(images/demowiki/ui-bg_flat_75_796038_40x100.png) 50% 50% repeat-x #796038;
    opacity: .5;
    filter: Alpha(Opacity=50)
}
.ui-widget-shadow {
    margin: -4px 0 0 -4px;
    padding: 4px;
    background: url(images/demowiki/ui-bg_flat_90_7c5b38_40x100.png) 50% 50% repeat-x #7c5b38;
    opacity: .3;
    filter: Alpha(Opacity=30);
    border-radius: 4px
}
.OptionContainer input {
    vertical-align: middle;
    margin: 0px;
    margin-right: 3px;
}
.OptionContainer label {
    vertical-align: middle;
}
a,
div,
html,
input,
body,
frame,
iframe,
frameset,
Bodycontainer {
    cursor: url(images/demowiki/cursor.png), auto
}
a:visited,
a:link,
a:focus,
a:active,
a:hover {
    cursor: url(images/demowiki/cursor_hover.png), auto
}
#DeactivationContainer {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 80;
    height: 1300px;
    width: 100%;
    background-color: #061122;
    filter: alpha(opacity=75);
    opacity: 0.75;
    -moz-opacity: 0.75;
    display: none;
}
#DeactivationContainerThemebox {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 95;
    height: 600px;
    width: 100%;
    display: none;
}
#MainHelper1 {
      position: relative;
      text-align: center;
      top: 0px;
      height: 100%;
      min-width: 1000px;
      overflow: visible;
  }
  #MainHelper2 {
      position: relative;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      top: 0px;
      height: 100%;
      max-width: 1200px;
      overflow: visible;
      padding-top: 155px;
  }
  #ArtworkHelper1 {
      position: absolute;
      max-width: 1200px;
      text-align: center;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      overflow: visible;
      margin-left: -800px;
  }
  #ArtworkHelper2 {
      position: absolute;
      text-align: center;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      overflow: visible;
      width: 1600px;
      margin-right: auto;
      margin-left: 50%;
  }
  #HeaderArtworkDiv {
      position: absolute;
      text-align: center;
      background-position: top center;
      background-attachment: scroll;
      background-repeat: no-repeat;
      top: 0px;
      height: 800px;
      width: 100%;
}
/* Top - Ranks */

a.topfont,
a:hover.topfont {
    font-family: Verdana, Arial, Helvetica;
    font-size: 11px;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.50), 1px -1px 0 rgba(0, 0, 0, 0.50), -1px 1px 0 rgba(0, 0, 0, 0.50), 1px 1px 0 rgba(0, 0, 0, 0.50);
}

.topleveltext {
  z-index: 99;
  padding: 3px;
  position: absolute;
  height: 24px;
  width: 100%;
  top: 2px;
  left: 7px;
  color: #ffd698;
  text-shadow: -1px -1px 0 #000,1px -1px 0 #2c2c2c,-1px 1px 0 #000,1px 1px 0 #000;
  font: 100 14pt Fondamento,Arial,Times New Roman,sans-serif;
  -ms-user-select: none;
  user-select: none;
  cursor: default
}

.topleveltext1 {
    z-index: 99;
    padding: 3px;
    position: absolute;
    height: 24px;
    width: 100%;
    top: 300px;
    left: 7px;
    color: #ffd698;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #2c2c2c,-1px 1px 0 #000,1px 1px 0 #000;
    font: 100 14pt Fondamento,Arial,Times New Roman,sans-serif;
    -ms-user-select: none;
    user-select: none;
    cursor: default
  }

#Footer a:focus,
#Topbar a,
a.topfont,
a:hover.topfont {
    text-decoration: none
}
a.topfont {
    color: #fc3
}
a:hover.topfont {
    color: #fff
}
/* container to implement min/max width */

#Bodycontainer {
    text-align: center;
    min-width: 1000px;
    max-width: 1200px;
    width: 100%;
    height: 100%;
    margin: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    display: table;
}
#MenuColumn {
    position: absolute;
    width: 180px;
    top: 160px;
    margin-right: 15px;
    margin-left: 15px;
    padding: 0px;
    font-family: Arial, sans-serif;
    font-size: 10pt;
    font-weight: bold;
    line-height: 12pt;
    text-align: left;
}
* html #MenuColumn {
    top: 155px;
    margin-left: -190px;
}
#ContentColumn {
    margin: 0px;
    margin-left: 205px;
    margin-right: 205px;
    text-align: left;
}
* html #ContentColumn {
    width: 790px;
}
#ThemeboxesColumn {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 180px;
    margin-top: -144px;
    margin-left: 15px;
    margin-right: -190px;
    filter: alpha(opacity=100);
}
* html #ThemeboxesColumn {
    top: 5px;
    height: 1000px;
}
#Footer {
    font-family: Verdana, Arial, Times New Roman, sans-serif;
    font-size: 7pt;
    font-weight: normal;
    text-align: center;
    position: relative;
    width: 100%;
    padding-bottom: 20px;
    color: white;
}
* html #Footer {
    padding-bottom: 120px;
    margin-bottom: 50px;
}
/* Footer linkes */

#Footer a:link {
    color: white;
    text-decoration: none;
}
#Footer a:visited {
    color: white;
    text-decoration: none;
}
#Footer a:focus {
    color: white;
    text-decoration: none;
}
#Footer a:active {
    color: white;
    text-decoration: underline;
}
#Footer a:hover {
    color: white;
    text-decoration: underline;
}
/** -------------------------------
*  Stylesheet declarations for the
*  HEADER AREA
*  -------------------------------
*/

#LeftArtwork {
    position: absolute;
    height: 140px;
    width: 166px;
    top: -140px;
    left: 4px;
    background-repeat: no-repeat;
    z-index: 5;
}
#LeftArtwork #TibiaLogoArtworkTop {
    position: absolute;
    top: -17px;
    left: -14px;
    height: 158px;
    width: 196px;
    z-index: 5;
    cursor: url(images/demowiki/cursor_hover.png), auto border: 0px;
}
#LeftArtwork #LogoLink {
    position: absolute;
    bottom: 12px;
    left: 60px;
    height: 20px;
    width: 40px;
    z-index: 99;
    cursor: url(images/demowiki/cursor_hover.png), auto
}
#RightArtwork {
    text-align: center;
    position: absolute;
    top: 143px;
    right: 24px;
    width: 132px;
    background-repeat: no-repeat;
    z-index: 90;
}
#RightArtwork #Monster {
    position: absolute;
    height: 80px;
    width: 80px;
    top: -145px;
    left: -9px;
    z-index: 15;
    cursor: url(images/demowiki/cursor_hover.png), auto
}
#PedestalAndOnline {
    position: absolute;
    left: -10px;
    top: -105px;
    width: 153px;
    height: 107px;
}
#RightArtwork #PlayersOnline {
    font-family: Verdana, Arial, Times New Roman, sans-serif;
    font-size: 7pt;
    line-height: 8pt;
    text-align: center;
    position: absolute;
    width: 92px;
    bottom: 11px;
    left: 21px;
    color: #cfa600;
    border-bottom: 1px solid #010101;
    cursor: url(images/demowiki/cursor_hover.png), auto
}
/** -------------------------------
*  Stylesheet declarations for the
*  LOGINBOX
*  -------------------------------
*/

#Loginbox {
    position: relative;
    left: 5px;
    top: 8px;
    width: 100%;
    margin-bottom: 42px;
    background-repeat: no-repeat;
}
#Loginbox #LoginTop {
    position: absolute;
    left: -5px;
    top: -12px;
    height: 12px;
    width: 180px;
    background-repeat: no-repeat;
}
#Loginbox #LoginBottom {
    position: absolute;
    top: 52px;
    left: -5px;
    height: 12px;
    width: 180px;
    background-repeat: no-repeat;
}
#Loginbox .LoginBorder {
    position: absolute;
    top: 0px;
    height: 52px;
    width: 8px;
    background-repeat: repeat-y;
    z-index: 10;
}
#Loginbox #BorderRight {
    right: 9px;
}
#Loginbox .Loginstatus {
    position: relative;
    top: 0px;
    left: 5px;
    height: 13px;
    width: 160px;
}
#Loginbox .LoginstatusText {
    position: absolute;
    top: 1px;
    left: 18px;
    width: 124px;
    height: 11px;
    cursor: url(images/demowiki/cursor_hover.png), auto
}
#Loginbox #LoginstatusText_1 {
    visibility: visible;
}
#Loginbox #LoginstatusText_2 {
    visibility: hidden;
}
#LoginBox #LoginButtonContainer {
    position: relative;
    height: 39px;
    width: 160px;
    left: 5px;
    background-repeat: repeat-y;
    z-index: 99;
}
#PlayNowContainer {
    position: absolute;
    width: 150px;
    height: 37px;
    top: 1px;
    left: 5px;
}
#PlayNowContainer form {
    margin: 0px;
    padding: 0px;
    border: 0px;
}
.BigBoldText {
    font-weight: bold;
    font-size: 7pt;
}
/** -------------------------------
*  Stylesheet declarations for the
*  MENU
*  -------------------------------
*/

#Eyes {
    position: absolute;
    height: 13px;
    width: 57px;
    top: -400px;
    left: -466px;
    z-index: 15;
    cursor: url(images/demowiki/cursor_hover.png), auto
}

.buttontextt,.menufonts {
  text-align: center;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -moz-user-select: none
}

.menufonts {
  padding: 3px;
  position: absolute;
  height: 24px;
  width: 116px;
  top: 5px;
  left: 38px;
  color: #ffd698;
  font-family: Fondamento,cursive;
  text-shadow: -1px -1px 0 #000,1px -1px 0 #2c2c2c,-1px 1px 0 #000,1px 1px 0 #000;
  font-weight: 400;
  font-size: 18px;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none
}

#Menu {
    position: relative;
    left: 5px;
    top: 0px;
    background-repeat: no-repeat;
}
#MenuTop {
    position: absolute;
    left: -5px;
    top: -12px;
    height: 12px;
    width: 180px;
    background-repeat: no-repeat;
}
#MenuBottom {
    position: relative;
    left: -5px;
    bottom: 0px;
    height: 12px;
    width: 180px;
    background-repeat: no-repeat;
}
/* Menuitems */

.MenuButton {
    position: relative;
    height: 32px;
    width: 170px;
    display: block;
    cursor: url(images/demowiki/cursor_hover.png), auto
}
.Button {
    position: relative;
    height: 32px;
    width: 170px;
    visibility: hidden;
    display: block;
}
.Extend {
    position: absolute;
    top: 20px;
    right: -2px;
    height: 12px;
    width: 12px;
    background-repeat: no-repeat;
}
.Lights {
    visibility: hidden;
}
.Light_lu {
    position: absolute;
    top: 2px;
    left: 3px;
    height: 2px;
    width: 2px;
    background-repeat: no-repeat;
}
.Light_ru {
    position: absolute;
    top: 2px;
    right: 3px;
    height: 2px;
    width: 2px;
    background-repeat: no-repeat;
}
.Light_ld {
    position: absolute;
    height: 2px;
    width: 2px;
    top: 28px;
    left: 3px;
}
.Icon {
    position: absolute;
    height: 32px;
    width: 32px;
    top: 0px;
    left: 8px;
}
.Label {
    position: absolute;
    height: 22px;
    width: 116px;
    top: 6px;
    left: 42px;
}
/* Submenus(items) */

.LeftChain {
    position: absolute;
    top: 0px;
    left: -5px;
    height: 33px;
    width: 7px;
    background-repeat: repeat-y;
}
.RightChain {
    position: absolute;
    top: 0px;
    right: -4px;
    height: 33px;
    width: 7px;
    background-repeat: repeat-y;
}
.Submenu {
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
    background-color: #161616;
    width: 160px;
}
.Submenuitem {
    position: relative;
    margin: 0px;
    padding: 0px;
}
.ActiveSubmenuItemIcon {
    position: absolute;
    top: 5px;
    left: 3px;
    width: 10px;
    height: 10px;
    background-repeat: no-repeat;
    visibility: hidden;
}
.SubmenuitemLabel {
    margin: 0px;
    border-top: 0;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 15px;
    border-bottom: 1px solid #3c3c3c;
    overflow: hidden;
}
/* Submenu links */

.Submenu a:link {
    color: #d7d7d7;
    text-decoration: none;
}
.Submenu a:visited {
    color: #d7d7d7;
    text-decoration: none;
}
.Submenu a:focus {
    color: #d7d7d7;
    text-decoration: none;
}
.Submenu a:active {
    color: white;
    text-decoration: none;
}
.Submenu a:hover {
    color: white;
    text-decoration: none;
}
/** -------------------------------
*  Stylesheet declarations for the
*  CONTENT AREA
*  -------------------------------
*/

.Content .BoxContent {
    padding: 10px;
}
/* "tanhack" for correction of IE bug */

* html .Content {
    top: -5px;
}
.Content {
    position: relative;
    top: 0px;
    width: 100%;
    z-index: 100;
}
/* "star-HTML-hack" to correct the position of the content area */

* html .Content {
    position: relative;
    top: 796px;
    margin: 20px;
    border: 0px dashed #051122;
    border-right-width: 550px;
}
#ContentHelper {
    position: relative;
}
/* "star-HTML-hack" to to implement min-width in IE */

* html #ContentHelper {
    display: inline-block;
    position: relative;
    top: -800px;
    margin: -20px;
    margin-right: -570px;
}
.Content .Box {
    font-size: 0pt;
    position: relative;
    margin: 5px;
    margin-bottom: 18px;
    color: #5A2800;
    border-left: 2px solid #a43c06;
    border-right: 2px solid #a43c06;
    background-color: #181816;
    background-repeat: no-repeat;
    overflow: visible;
}
.Content .BoxContent {
    font-family: Verdana, Arial, Times New Roman, sans-serif;
    font-size: 9pt;
    background-color: #FFF2db;
    color: #5A2800;
    min-height: 367px;
    height: auto !important;
    height: 387px;
}
/* "star-HTML-hack" to correct Box width in IE */

* html .Content .Box {
    width: 100%;
}
/* "star-HTML-hack" to correct BoxContent width in IE */

* html .Content .BoxContent {
    width: 100%;
}
.Content th {
    font-family: Verdana, Arial, Times New Roman, sans-serif;
    font-size: 10pt;
    font-weight: bold;
    text-align: left;
    color: white;
    background-color: #505050;
}
.Content .BoxContent td {
    font-family: Verdana, Arial, Times New Roman, sans-serif;
    font-size: 10pt;
    color: #5A2800;
}
/* Content Links */

.Content a {
    font-family: Verdana, Arial, Times New Roman, sans-serif;
    font-weight: bold;
    color: #004294;
    text-decoration: none;
}
.Content a:hover {
    font-family: Verdana, Arial, Times New Roman, sans-serif;
    font-weight: bold;
    text-decoration: underline;
    color: #0063DC;
}
.Content .HelpLink {
    font-size: 7pt;
    cursor: url(images/demowiki/cursor_hover.png), auto
}
.TableHeadlineNavigation {
    margin-top: 4px;
    font-size: 8px;
    float: right;
}
.TableHeadlineNavigation a {
    color: white;
}
.TableHeadlineNavigation a:hover {
    color: white;
}
/* Corners */

.Content .Corner-tl {
    position: absolute;
    top: -4px;
    left: -5px;
    width: 17px;
    height: 17px;
    z-index: 50;
}
.Content .Corner-tr {
    position: absolute;
    top: -4px;
    right: -5px;
    width: 17px;
    height: 17px;
    z-index: 50;
}
.Content .BottomCornersHelper {
    position: absolute;
    width: 100%;
}
.Content .CornerWrapper-b {
    position: absolute;
    width: 100%;
}
.Content .Corner-bl {
    position: absolute;
    bottom: -4px;
    left: -6px;
    width: 17px;
    height: 17px;
    z-index: 50;
}
.Content .Corner-br {
    position: absolute;
    bottom: -4px;
    right: -6px;
    width: 17px;
    height: 17px;
    z-index: 50;
}
/* Borders */

.Content .Border_1 {
    position: relative;
    height: 6px;
    width: 100%;
    background-repeat: repeat-x;
}
.Content .BorderTitleText {
    position: relative;
    height: 24px;
    background-repeat: repeat-x;
}
.Content .Title {
    position: absolute;
    top: 6px;
    left: 5px;
}
.Color-Success {
    color: rgb(51, 201, 90);
}

.Content .Div-Right {
    position: absolute;
    top: 12px;
    right: 0px;
    text-align: right;
    margin: 0;
    font-family: Helvetica, Verdana, Arial;
    z-index: 999;
}

.Content .Div-Right p {
    position: absolute;
    color: white;
    font-size: 12px;
    margin: 0 15px;
    padding: 0;
    top: 0;
}

.Content .Div-Right p a {
    color: #ccc !important;
    font-family: Helvetica, Verdana, Arial;
    font-weight: normal;
} 

.Content .Border_2 {
    margin: 4px;
    padding: 0px;
    background-color: #793d03;
}
.Content .Border_3 {
    margin: 1px;
    border-top: 1px solid #793d03;
    border-bottom: 1px solid #793d03;
}

.content_box {
  z-index: 99;
  padding: 3px;
  position: absolute;
  height: 24px;
  width: 100%;
  top: 3px;
  text-align: left;
  left: 1%;
  color: #ffd698;
  text-shadow: -1px -1px 0 #000,1px -1px 0 #2c2c2c,-1px 1px 0 #000,1px 1px 0 #000;
  font: 100 15pt Fondamento,Arial,Times New Roman,sans-serif;
  -ms-user-select: none;
  user-select: none;
  cursor: default
}

.Content .ScrollableTextBox {
    height: 125px;
    padding: 3px;
    margin-right: 5px;
    overflow-y: scroll;
    font-family: Courier New;
    border: 1px solid grey;
    font-weight: normal !important;
    background-image: url("/TibiaWebsite_refactoring/html/images/demowiki/global/content/scroll.gif");
}
.Content .BoxContent .ScrollableTextBox td {
    font-family: Courier New;
}
/** -------------------------------
*  Stylesheet declarations for the
*  THEMEBOXES of the Tibia
*  website
*  -------------------------------
*/

.Themebox {
    position: relative;
    margin-bottom: 10px;
    top: 140px;
    width: 180px;
    height: 154px;
}
#Themeboxes div {
    font-size: 10pt;
    background-repeat: no-repeat;
}
#Themeboxes .ThemeboxButton {
    position: absolute;
    bottom: 20px;
    left: 22px;
    height: 25px;
    width: 135px;
    cursor: url(images/demowiki/cursor_hover.png), auto
}
#Themeboxes .Bottom {
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 12px;
    width: 180px;
}
/* "star-HTML-hack" to correct the position of the bottom element */

* html #Themeboxes .Bottom {
    bottom: -3px;
}
#Themeboxes #NewcomerBox .ThemeboxButton {
    bottom: 15px;
}
#Themeboxes #PremiumBox {
    height: 164px;
}
#Themeboxes #JobBox {
    height: 164px;
}
#Themeboxes #ScreenshotBox #ScreenshotContent {
    position: relative;
    height: 111px;
    width: 170px;
    top: 31px;
    left: 0px;
    margin-left: 5px;
    margin-right: 5px;
    border: 0;
    cursor: url(images/demowiki/cursor_hover.png), auto
}
#Themeboxes #CurrentPollBox #CurrentPollText {
    font-family: Verdana, Arial, sans-serif;
    font-weight: bold;
    line-height: 11pt;
    color: #5A2800;
    position: absolute;
    height: 70px;
    width: 150px;
    top: 37px;
    left: 15px;
    padding-top: 5px;
    overflow: hidden;
    text-align: center;
}
#Themeboxes #FansiteBox {
    position: relative;
    height: 188px;
    text-align: center;
}
#Themeboxes #FansiteLogoFrame {
    position: relative;
    top: 31px;
    width: 180;
    height: 145px;
}
#Themeboxes #FansiteLogo {
    position: relative;
    height: 100px;
    width: 150px;
    top: 8px;
    border: 0;
    cursor: url(images/demowiki/cursor_hover.png), auto
}
#Themeboxes #FansiteBox .ThemeboxButton {
    bottom: 19px;
}
#Themeboxes #NetworksBox {
    position: relative;
    height: 354px;
}
#Themeboxes #NetworksBox #FacebookBlock {
    position: relative;
    top: 92px;
    height: 113px;
}
#Themeboxes #NetworksBox #FacebookLikeBox {
    position: relative;
    left: 27px;
    top: 30px;
    height: 60px;
    width: 115px;
    overflow: hidden;
}
#Themeboxes #NetworksBox #FacebookLikeBox div {
    position: relative;
    left: -1px;
    top: 10px;
}
#Themeboxes #NetworksBox #FacebookSendBox {
    position: absolute;
    left: 92px;
    top: 14px;
    width: 50px;
}
#Themeboxes #NetworksBox #FacebookLikes {
    position: relative;
    left: 14px;
    top: 10px;
    width: 155px;
    left: 13px;
    overflow: hidden;
}
#Themeboxes #NetworksBox #FacebookLikes div {
    position: relative;
    left: -69px;
}
#Themeboxes #NetworksBox #TwitterBlock {
    position: relative;
    top: 42px;
    text-align: center;
}
/** -------------------------------
*  OLD Stylesheet declarations for
*  the CONTENT AREA
*  -------------------------------
*/

.Content .BoxContent td .white {
    color: #EFEFEF;
    visibility: visible;
}
.Content .BoxContent td .whites {
    color: #EFEFEF;
    visibility: visible;
    font-size: 9pt;
}
.Content .BoxContent .white {
    color: #EFEFEF;
    visibility: visible;
}
.Content .BoxContent td .green {
    color: #00BF00;
}
.Content .BoxContent td .yellow {
    color: #FFBB05;
}
.Content .BoxContent td .red {
    color: #EF0000;
}
.Content .BoxContent td .grey {
    color: #808080;
}
.Content .BoxContent td .orange {
    color: #FF9712;
}
/** -------------------------------
*  OLD Stylesheet declarations for
*  the CONTENT AREA (forum)
*  -------------------------------
*/

.Content .BoxContent .ff_info {
    font-family: Verdana, Arial, Times New Roman, sans-serif;
    font-size: 10pt;
    color: #5A2800;
    visibility: visible;
}
.Content .ff_white a {
    color: #FFFFFF;
}
.Content .BoxContent .ff_white {
    font-family: Verdana, Arial, Times New Roman, sans-serif;
    color: #EFEFEF;
    visibility: visible;
    font-size: 7pt;
    font-weight: bold;
}
.Content .BoxContent .ff_red {
    font-family: Verdana, Arial, Times New Roman, sans-serif;
    color: #EF0000;
    visibility: visible;
    font-size: 8pt;
    font-weight: bold;
}
.Content .BoxContent .ff_whitelarge {
    font-family: Verdana, Arial, Times New Roman, sans-serif;
    color: #EFEFEF;
    visibility: visible;
    font-size: 9pt;
    font-weight: bold;
}
.Content .BoxContent .ff_info {
    font-family: Verdana, Arial, Times New Roman, sans-serif;
    font-size: 8pt;
    color: #5A2800;
    visibility: visible;
}
.Content .BoxContent .ff_infotext {
    font-family: Verdana, Arial, Times New Roman, sans-serif;
    font-size: 8pt;
    color: #5A2800;
    visibility: visible;
    line-height: 12pt;
}
.Content .BoxContent .ff_smallinfo {
    font-family: Verdana, Arial, Times New Roman, sans-serif;
    font-size: 7pt;
    color: #5A2800;
    visibility: visible;
}
.Content .BoxContent .ff_large {
    font-family: Verdana, Arial, Times New Roman, sans-serif;
    font-size: 12pt;
    color: #5A2800;
    visibility: visible;
}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
}
.Content .BoxContent .ff_pagetext {
    font-family: Verdana, Arial, Times New Roman, sans-serif;
    font-size: 9pt;
    color: #5A2800;
    visibility: visible;
    line-height: 13pt;
}
.Content .BoxContent .ff_pagetextgrey {
    font-family: Verdana, Arial, Times New Roman, sans-serif;
    font-size: 9pt;
    color: #505050;
    visibility: visible;
    line-height: 13pt;
}
.Content .BoxContent .ff_pagetextred {
    font-family: Verdana, Arial, Times New Roman, sans-serif;
    font-size: 9pt;
    color: #F00;
    visibility: visible;
    line-height: 13pt;
}
.Content .BoxContent .ff_correct {
    font-family: Verdana, Arial, Times New Roman, sans-serif;
    font-size: 11pt;
    color: #FF0000;
    visibility: visible;
    font-weight: bold;
}
/** ------------------------------
*  new payment and error handling
*  ------------------------------
*/

.PaymentOrderTypeImage {
    width: 81px;
    height: 80px;
    margin-right: 5px;
}
.PaymentMethodBrandingSmall {
    width: 48px;
    height: 30px;
}
.PaymentMethodBrandingBig {
    width: 103px;
    height: 65px;
}
.PaymentResultImage {
    float: left;
    margin-right: 8px;
    margin-top: 3px;
    width: 62px;
    height: 60px;
}
.FormFieldError {
    font-size: 8pt;
    color: red;
}
.SmallBox {
    position: relative;
    font-size: 1px;
}
.SmallBox .ErrorMessage {
    font-size: 8pt;
    position: relative;
    color: red;
    height: 100%;
    background-color: #d4c0a1;
    padding: 5px;
    padding-left: 43px;
}
.SmallBox .Message {
    font-size: 10pt;
    position: relative;
    height: 100%;
    background-color: #d4c0a1;
    padding: 10px;
}
.SmallBox .ErrorMessage ul {
    padding-left: 15px;
}
.SmallBox .BoxFrameHorizontal {
    position: relative;
    height: 4px;
}
.SmallBox .BoxFrameVerticalRight {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 3px;
    background-repeat: repeat-y;
    height: 100%;
}
.SmallBox .BoxFrameVerticalLeft {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 3px;
    background-repeat: repeat-y;
    height: 100%;
}
.SmallBox .MessageContainer {
    position: relative;
    height: 100%;
}
.SmallBox .BoxFrameEdgeLeftTop {
    position: absolute;
    left: -1px;
    top: -1px;
    width: 5px;
    height: 5px;
}
.SmallBox .BoxFrameEdgeLeftBottom {
    position: absolute;
    left: -1px;
    bottom: -1px;
    width: 5px;
    height: 5px;
}
.SmallBox .BoxFrameEdgeRightTop {
    position: absolute;
    right: -1px;
    top: -1px;
    width: 5px;
    height: 5px;
}
.SmallBox .BoxFrameEdgeRightBottom {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 5px;
    height: 5px;
}
.SmallBox .AttentionSign {
    position: absolute;
    top: 3px;
    left: 8px;
    width: 30px;
    height: 26px;
}
#BrowserIssuesBox #DownloadClientContainer {
    float: right;
    text-align: center;
    margin-right: 5px;
}
#BrowserIssuesBox #DownloadClientContainer img {
    height: 45px;
}
/** ----------------
*  new process bars
*  ----------------
*/

#ProgressBar #Headline {
    text-align: center;
    font-size: 14pt;
    font-weight: bold;
    margin-bottom: 5px;
}
#ProgressBar #MainContainer {
    position: relative;
    top: 10px;
    height: 50px;
    margin-bottom: 25px;
}
#ProgressBar #BackgroundContainer {
    position: relative;
    width: 100%;
}
#ProgressBar #BackgroundContainerLeftEnd {
    position: absolute;
    float: left;
}
#ProgressBar #BackgroundContainerCenter {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 17px;
    width: 100%;
}
#ProgressBar #BackgroundContainerCenterImage {
    position: relative;
    margin-left: 25px;
    margin-right: 25px;
    height: 17px;
}
#ProgressBar #BackgroundContainerRightEnd {
    position: absolute;
    right: 0px;
    top: 0px;
    float: right;
}
#ProgressBar #TubeLeftEnd {
    position: absolute;
    left: 25px;
    top: 4px;
}
#ProgressBar #TubeRightEnd {
    position: absolute;
    right: 25px;
    top: 4px;
    z-index: 0;
}
#ProgressBar .Steps {
    position: relative;
    height: 39px;
    font-size: 9px;
    float: left;
    top: -11px;
    margin-left: -1px;
}
#ProgressBar #StepsContainer1 {
    text-align: right;
    margin-left: 92px;
    margin-right: 40px;
    height: 10px;
}
#ProgressBar #StepsContainer2 {
    width: 100%;
    height: 10px;
}
#ProgressBar .TubeContainer {
    position: relative;
    padding-right: 47px;
}
#ProgressBar .Tube {
    position: relative;
    top: 16px;
    left: 0px;
    width: 100%;
    height: 7px;
    background: #FFFFFF none repeat scroll 0%;
}
* html #ProgressBar .Tube {
    top: 13px;
}
#ProgressBar .SingleStepContainer {
    position: absolute;
    top: 0px;
    width: 47px;
    height: 30px;
    right: 0px;
    text-align: center;
}
#ProgressBar #FirstStep .SingleStepContainer {
    left: 45px;
    width: 47px;
    position: absolute;
}
#ProgressBar .StepIcon {
    position: absolute;
    right: 0px;
}
* html #ProgressBar .StepIcon {
    right: -1px;
}
#ProgressBar #FirstStep .StepIcon {
    top: 0px;
    left: 0px;
}
#ProgressBar .StepText {
    top: 40px;
    position: absolute;
    width: 200px;
    right: -77px;
}
/** -------------------------------
*  Stylesheet declarations for the
*  NEW TABLES
*  -------------------------------
*/

.TableContainer {
    border: 1px solid black;
    position: relative;
    width: 100%;
    font-size: 1px;
}
.TableContainer .Odd {
    background-color: #f1e0c6;
}
.TableContainer .Even {
    background-color: #d5c0a1;
}
/* TABLEHEADER DECORATION */

.TableContainer .CaptionContainer {
    position: relative;
    font-size: 1pt;
    background-color: #5f4d41 !important;
    height: 100%;
    width: 100%;
    text-align: left;
}
.CaptionContainer .CaptionInnerContainer {
    position: relative;
    background-color: #5f4d41;
    width: 100%;
    height: 100%;
    padding-top: 3px;
    padding-bottom: 4px;
}
.CaptionContainer .Text {
    font-family: Verdana, Arial, Times New Roman, sans-serif;
    font-size: 10pt;
    font-weight: bold;
    text-align: left;
    color: white;
    padding-left: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
}
.CaptionContainer .CaptionEdgeLeftTop {
    position: absolute;
    width: 5px;
    height: 5px;
    top: -2px;
    left: -2px;
    z-index: 50;
}
.CaptionContainer .CaptionEdgeRightTop {
    position: absolute;
    width: 5px;
    height: 5px;
    top: -2px;
    right: -2px;
    z-index: 50;
}
.CaptionContainer .CaptionEdgeLeftBottom {
    position: absolute;
    width: 5px;
    height: 5px;
    left: -2px;
    bottom: -3px;
    z-index: 50;
}
.CaptionContainer .CaptionEdgeRightBottom {
    position: absolute;
    width: 5px;
    height: 5px;
    right: -2px;
    bottom: -3px;
    z-index: 50;
}
.CaptionContainer .CaptionBorderTop {
    position: absolute;
    width: 100%;
    height: 4px;
    left: 0px;
    top: -1px;
}
.CaptionContainer .CaptionBorderBottom {
    position: absolute;
    width: 100%;
    height: 4px;
    left: 0px;
    bottom: -2px;
}
.CaptionContainer .CaptionVerticalLeft {
    position: absolute;
    height: 100%;
    width: 3px;
    left: -1px;
    top: 0px;
}
.CaptionContainer .CaptionVerticalRight {
    position: absolute;
    height: 100%;
    width: 3px;
    right: -1px;
    top: 0px;
}
* html .TableContainer .CaptionContainer .CaptionEdgeRightTop {
    right: -3px;
}
* html .TableContainer .CaptionContainer .CaptionEdgeLeftBottom {
    bottom: -4px;
}
* html .TableContainer .CaptionContainer .CaptionEdgeRightBottom {
    right: -3px;
    bottom: -4px;
}
* html .TableContainer .CaptionContainer .CaptionBorderBottom {
    bottom: -3;
}
* html .TableContainer .CaptionContainer .CaptionVerticalRight {
    right: -2px;
}
/* TABLE CONTENT */

.TableContentContainer {
    border: 1px solid #5F4D41;
    position: relative;
    margin-right: 4px;
    height: 100%;
    background-color: #d4c0a1;
    padding: 0px;
}
.TableContent {
    width: 100%;
    border-collapse: collapse;
}
.TableContent td {
    padding-left: 5px;
    padding-top: 2px;
    padding-right: 5px;
    padding-bottom: 2px;
}
/* INNERLYOUT 1 */

.TableContainer .Table1 {
    width: 100%;
    background-color: #d4c0a1;
    border: 2px solid #55636c;
}
.TableContainer .Table1 .InnerTableContainer {
    padding: 5px;
}
/* INNERLYOUT 2 */

.TableContainer .Table2 {
    width: 100%;
    border: 2px solid #55636c;
    background-color: #f1e0c5;
    padding: 0px;
    margin: 0px;
    border-collapse: collapse;
}
.TableContainer .Table2 td {
    padding: 0px;
    margin: 0px;
}
.TableContainer .Table2 .InnerTableContainer {
    margin-top: 1px;
}
.TableContainer .Table2 .InnerTableContainer table {
    border-collapse: collapse;
}
.TableContainer .Table2 .InnerTableContainer td {
    padding-top: 2px;
    padding-left: 5px;
    padding-bottom: 2px;
    padding-right: 5px;
    border: 1px solid #faf0d7;
}
/* INNERLYOUT 3 */

.TableContainer .Table3 {
    width: 100%;
    border: 2px solid #55636c;
    background-color: #f1e0c5;
}
.TableContainer .Table3 .InnerTableContainer {
    width: 100%;
    position: relative;
    margin-top: 5px;
    margin-left: 3px;
}
.TableContainer .Table3 .TableContentAndRightShadow td {
    border: 1px solid #faf0d7;
}
/* INNERLYOUT 4 */

.TableContainer .Table4 {
    width: 100%;
    border: 2px solid #55636c;
    background-color: #f1e0c5;
    padding-left: 3px;
}
.TableContainer .Table4 .InnerTableContainer {
    width: 100%;
    position: relative;
    margin-top: 3px;
}
.TableContainer .Table4 .TableContentAndRightShadow .TableContent td {
    padding-left: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
}
.TableContainer .RowInnerTableDataBorders td {
    border: 1px solid #faf0d7;
}
/* INNERLYOUT 5 */

.TableContainer .Table5 {
    width: 100%;
    border: 2px solid #55636c;
    background-color: #f1e0c5;
}
.TableContainer .Table5 .InnerTableContainer {
    width: 100%;
    position: relative;
    margin-top: 5px;
    margin-left: 3px;
}
.TableContainer .Table5 .TableContentAndRightShadow .TableContent td {
    padding-left: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
}
/* SHADOWS */

.TableShadowContainerRightTop {
    position: relative;
    top: 0px;
    right: 3px;
    margin-right: 0px;
    font-size: 1px;
    float: right;
    z-index: 98;
}
.TableShadowRightTop {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 4px;
    height: 5px;
    z-index: 98;
}
.TableContentAndRightShadow {
    position: relative;
    background-repeat: repeat-y;
    background-position: top right;
    margin-right: 3px;
    font-size: 1px;
}
.TableShadowContainer {
    position: relative;
    margin-right: 5px;
}
.TableBottomShadow {
    position: relative;
    font-size: 1px;
    height: 5px;
    width: 100%;
    padding: 0px;
    margin: 0px;
}
.TableBottomLeftShadow {
    position: relative;
    height: 5px;
    width: 4px;
    float: left;
    padding: 0px;
    margin: 0px;
}
.TableBottomRightShadow {
    position: relative;
    float: right;
    right: -2px;
    top: 0px;
    height: 5px;
    width: 4px;
}
/* HEADLESS CONTENT TABLE */

.HeadlessTable {
    border: 0px;
    border-style: solid;
    border-color: #656565;
    border-top-width: 1px;
    border-top-color: white;
    border-left-width: 1px;
    border-left-color: white;
    border-bottom-width: 1px;
    border-right-width: 1px;
    border-right-color: #656565;
    margin-left: 15px;
}
/* LABELS */

.LabelV {
    font-weight: bold;
    padding-right: 10px;
    white-space: nowrap;
    vertical-align: top;
}
.LabelV120 {
    font-weight: bold;
    padding-right: 10px;
    white-space: nowrap;
    vertical-align: top;
    width: 120px;
}
.LabelV150 {
    font-weight: bold;
    padding-right: 10px;
    white-space: nowrap;
    vertical-align: top;
    width: 150px;
}
.LabelV200 {
    font-weight: bold;
    padding-right: 10px;
    white-space: nowrap;
    vertical-align: top;
    width: 200px;
}
.LabelH {
    font-weight: bold;
    padding-right: 10px;
    white-space: nowrap;
    background-color: #d5c0a1;
}
.LabelH td {
    background-color: #d5c0a1;
    padding-left: 5px;
    padding-top: 2px;
    padding-right: 5px;
    padding-bottom: 2px;
}
/* BUTTONS */

.InnerTableButtonRow {
    width: 100%;
    padding-left: 1px;
    padding-right: 0px;
    padding-bottom: 4px;
    border: 0px;
}
.InnerTableButtonRow td {
    padding-right: 4px;
}
.MediumButtonText {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 37px;
    width: 150px;
    z-index: 20;
}
.MediumButtonBackground {
    position: relative;
    top: 0px;
    left: 0px;
    width: 150px;
    height: 37px;
    z-index: 10;
}
.MediumButtonOver {
    position: relative;
    top: 0px;
    left: 0px;
    width: 150px;
    height: 37px;
    visibility: hidden;
    z-index: 15;
}
.MediumButtonForm {
    margin: 0px;
    padding: 0px;
}
.BigButton {
    position: relative;
    width: 135px;
    height: 25px;
    z-index: 10;
}
.BigButtonOver {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 135px;
    height: 25px;
    visibility: hidden;
    z-index: 15;
}
.ButtonText {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 25px;
    width: 135px;
    z-index: 20;
}
.TopButtonContainer {
    position: relative;
    right: 4px;
    top: 4px;
    z-index: 60;
}
.TopButtonContainerInnerTable {
    position: absolute;
    right: 4px;
    top: 2px;
    z-index: 60;
}
* html .TopButtonContainer {
    right: 27px;
}
.TopButtonContainer .TopButton {
    position: absolute;
    right: 0px;
    z-index: 55;
}
#world_list_tr td {
    text-align: left;
}
.OptionContainer {
    text-align: center;
}
label {
    cursor: url(images/demowiki/cursor_hover.png), auto
}
.InputIndicator {
    position: relative;
    top: 5px;
    left: 218px;
    height: 12px;
    width: 12px;
    background-repeat: no-repeat;
}
* html .InputIndicator {
    left: 0px;
}
.sortarrow {
    width: 10px;
    height: 10px;
}
/* FORUM - general post format */

.ForumPost {
    position: relative;
    height: 100%;
    width: 798px;
    margin: -5px;
}
.PostUpper {
    clear: both;
}
.PostLower {
    clear: both;
    border-top: 1px solid #fff0d9;
    height: 50px;
    padding: 4px 0px;
}
.PostSeparatorV {
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: #fff0d9;
    left: 185px;
}
* html .PostCharacterText {
    width: 185px;
}
.PostCharacterText {
    width: 175px;
    float: left;
    padding: 5px;
}
.PostText {
    position: relative;
    min-height: 150px;
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    width: 600px;
    word-wrap: break-word;
    padding: 5px;
}
.PostDetails {
    width: 175px;
    float: left;
    padding: 0px 5px;
    font-size: 7pt;
}
.PostActions {
    position: relative;
    overflow-x: auto;
    overflow-y: visible;
    word-wrap: break-word;
    font-size: 8pt;
    padding: 10px;
    padding-right: 0px;
    margin-left: 180px;
    width: 600px;
}
.PostActions .AdditionalBox {
    float: right;
    white-space: nowrap;
    text-align: right;
    margin: 4px 4px 0px 0px;
}
/* FORUM - CipSoft post format */

.CipPost .CipBorder {
    font-size: 1px;
    position: absolute;
    width: 798px;
    height: 3px;
    z-index: 99;
}
.CipPost .CipBorderBottom .CipBorder {
    bottom: 0px;
}
.CipPost .CipBorder .CipBorderCornerL {
    position: absolute;
    width: 3px;
    height: 3px;
    top: 0px;
    left: 0px;
    z-index: 99;
}
.CipPost .CipBorder .CipBorderH {
    position: absolute;
    width: 792px;
    height: 3px;
    top: 0px;
    left: 3px
}
.CipPost .CipBorder .CipBorderCornerR {
    position: absolute;
    width: 3px;
    height: 3px;
    top: 0px;
    right: 0px;
    z-index: 99;
}
.CipPost .CipBorderLeft {
    font-size: 1px;
    width: 3px;
    position: absolute;
    top: 0px;
    height: 100%;
    z-index: 0;
}
.CipPost .CipBorderLeft .CipBorderV {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 3px;
    height: 100%;
}
.CipPost .CipBorderRight .CipBorderV {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 3px;
    height: 100%;
}
.CipPost .CipPostIcon {
    position: relative;
    top: 7px;
    left: 12px;
    width: 80px;
    height: 80px;
}
.PostDetailsHelper {
    position: relative;
}
.HNCContainer {
    position: absolute;
    margin-top: -10px;
}
* html .HNCContainer {
    margin-left: -10px;
}
.ThreadClassificationNumberContainer {
    float: left;
    width: 15px;
    height: 15px;
    margin-right: 7px;
}
* html .ThreadClassificationNumberContainer {
    margin-left: 0px;
}
#BoardView td {
    padding-top: 0px;
    padding-right: 3px;
    padding-bottom: 0px;
    padding-left: 3px;
}
#BoardView .CipPost {
    position: relative;
    height: 100%;
}
.ThreadTitleHeadline {
    position: relative;
    height: 100%;
    width: 798px;
    margin-top: -2px;
}
.ThreadClassificationNumber {
    width: 15px;
    height: 15px;
    margin-top: 1px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-right: 7px;
    border: 0px;
}
.ThreadTitleHeadline .ThreadClassificationNumber {
    margin-left: -1px;
    margin-top: 3px;
}
.BoardThreadLine {
    margin-left: -61px;
    margin-top: -3px;
    margin-bottom: 0px;
    min-height: 47px;
}
* html .BoardThreadLine {
    margin-top: 0px;
}
* html .BoardThreadLine {
    height: 47px;
}
.BoardThreadLine .CipBorderRight .CipBorderV {
    left: 734px;
}
.Text {
    margin-top: 3px;
    margin-left: 4px;
    margin-bottom: 2px;
    padding: 3px;
    padding-top: 3px;
}
* html .Text {
    margin-top: 0px;
    margin-left: 4px;
}
.BoardThreadLine .Text {
    margin-left: 11px;
    padding-left: 50px;
    padding-top: 13px;
    padding-bottom: 10px;
}
* html .BoardThreadLine .Text {
    padding-left: 55px;
}
.PostReplyLink {
    float: right;
    margin-top: 3px;
}
.HintBox {
    width: 100%;
    margin-top: -3px;
}
.HintBox p {
    margin-top: 0px;
}
.HintBox .BoxButtons {
    width: 135px;
    float: right;
}
#PremiumBoxSpecialOfferHorizontal {
    position: absolute;
    top: 70px;
    left: 13px;
    width: 150px;
    height: 14px;
}
.Container1_PaymentMethod {
    height: 88px;
    width: 165px;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 2px;
    cursor: url(images/demowiki/cursor_hover.png), auto
}
.Container2_PaymentMethod {
    top: 2px;
    left: 2px;
    height: 80px;
    width: 157px;
    background-color: #d5c0a1;
    margin: 2px;
    padding: 2px;
}
.BlockedPaymentMethod {
    color: red;
    cursor: help !important;
}
/* helper div */
.HelperDivIndicator {
    position: relative;
    cursor: help;
}
#HelperDivContainer {
    display: none;
    position: absolute;
    width: 225px;
    z-index: 1000;
    color: #5A2800;
    font-family: Verdana,Arial,Times New Roman,sans-serif;
    font-size: 9pt;
    text-align: left;
    padding: 10px;
    border: 1px double #5A2800;
    margin-left: 8px;
}
#HelperDivContainer .HelperDivArrow {
    position: absolute;
    top: -1px;
    left: -8px;
    width: 8px;
    height: 13px;
}
#HelperDivContainer #HelperDivHeadline {
    font-size: 12pt;
    font-weight: bold;
}
#HelperDivContainer #HelperDivHeadline {
    position: relative;
    white-space: normal;
    text-align: justify;
    margin-top: 0px;
    margin-bottom: 15px;
}
#HelperDivContainer .Ornament {
    width: 220px;
}
#HelperDivContainer #HelperDivText {
    text-align: justify;
}
#HelperDivContainer #HelperDivText ul {
    padding-left: 20px;
}
#SuggestCharacterName {
    font-size: 7pt;
    margin-top: -5px;
}
.FB_Identification {
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    background: none repeat scroll 0 0 #526DA4;
    color: #D8DFEA;
    border: gray;
    font-size: 11px;
    font-weight: bold;
    padding: 2px;
    height: 25px;
    border: 1px solid blue;
}
.FB_Identification div {
    position: relative;
    float: left;
    margin-right: 4px;
}
#FB_ProfileWindow {
    width: 23px;
    height: 23px;
    border: 1px solid blue;
    overflow: hidden;
}
#FB_ProfileWindow img {
    height: 50px !important;
}
#FB_Name {
    top: 5px;
}
#FB_Button {
    top: 1px;
    float: right;
}
#FB_Button div {
    display: inline;
}
.FacebookButtonText {
    position: absolute;
    color: white;
    left: 20px;
    width: 112;
    top: 5px;
    font-size: 11px;
    text-align: center;
    cursor: url(images/demowiki/cursor_hover.png), auto z-index: 15;
}
#FB_LoginButton {
    position: relative;
    width: 68px;
    height: 22px;
    float: right;
    cursor: url(images/demowiki/cursor_hover.png), auto color: #ffffff;
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
}
#FB_LoginButton span {
    position: absolute;
    left: 28px;
    top: 4px;
}
.ButtonText:hover {
    margin-top: 1px;
    margin-left: 1px;
}
#LoginCreateAccountBox p {
    margin: 0px;
    padding: 0px;
    font-size: 12pt;
}
.Toplevelbox {
    top: -4px;
    position: relative;
    margin-bottom: 10px;
    width: 280px;
    height: 200px;
   -ms-user-select: none;
    user-select: none;
}
.Toplevelbox1 {
    top: -4px;
    position: relative;
    margin-bottom: 10px;
    width: 280px;
    height: 200px;
   -ms-user-select: none;
    user-select: none;
}

.top_level {
    position: absolute;
    top: 29px;
    left: 6px;
    height: 290px;
    width: 168px;
    z-index: 20;
    text-align: center;
    padding-top: 6px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 9.2pt;
    color: black;
    font-weight: bold;
    text-align: right;
    text-decoration: inherit;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.50), 1px -1px 0 rgba(0, 0, 0, 0.50), -1px 1px 0 rgba(0, 0, 0, 0.50), 1px 1px 0 rgba(0, 0, 0, 0.50);
    -ms-user-select: none;
    user-select: none;
}
.top_level1 {
  position: absolute;
  margin-top: 0px;
  left: 6px;
  height: 290px;
  width: 168px;
  z-index: 20;
  text-align: center;
  padding-top: 6px;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 9.2pt;
  color: black;
  font-weight: bold;
  text-align: right;
  text-decoration: inherit;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.50), 1px -1px 0 rgba(0, 0, 0, 0.50), -1px 1px 0 rgba(0, 0, 0, 0.50), 1px 1px 0 rgba(0, 0, 0, 0.50);
  -ms-user-select: none;
  user-select: none;
}
#Topbar a {
    text-decoration: none;
    cursor: url(images/demowiki/cursor_hover.png), auto
    -ms-user-select: none;
    user-select: none;
}
#warcastle {
    text-decoration: none;
    text-align: center;
    cursor: url(images/demowiki/cursor_hover.png), auto
}


/* Tooltip */
#Tooltip {
  position: absolute;
  background: url('../images/content/scroll.gif') center center;
  padding: 8px;
  z-index: 1000;
  color: #5A2800;
  border: 1px double #5A2800;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  max-width: 220px !important;
  width: auto;
}

#TooltipArrow {
  background: url('../images/content/helper-div-arrow.png');
  position: absolute;
  top: -1px;
  left: -8px;
  width: 8px;
  height: 13px;
}

#TooltipOrnament {
  position: relative;
  width: 220px;
  height: 30px;
  margin: 0 auto;
}

#TooltipOrnament img {
  width: 220px;
}

.TooltipTitle {
  font-size: 15px;
  font-weight: bold;
  line-height: 20px;
}

.TooltipDescription {
  margin-top: 5px;
  font-size: 12px !important;
  text-align: justify;
}

/* Donate Rewards */
.BigButtonText {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 135px;
  height: 25px;
  margin: 0;
  padding: 0;
  background: 0 0;
  border: none;
  text-align: center;
  color: #ffd18c;
  font-family: Verdana,Arial,Times New Roman,sans-serif;
  font-size: 12px;
  font-weight: 400;
  z-index: 20;
  text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000;
}

.BigButtonText:hover {
  top: 1px;
  left: 1px;
}

.OptionsContainer {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  max-height: 470px;
  overflow-y: scroll;
}

.ServiceID_Icon_Container {
  position: relative;
  width: 156px;
  height: 156px;
}

.ServiceID_Icon_Container_Background {
  position: absolute;
  width: 150px;
  height: 150px;
  top: 3px;
  left: 3px;
}

.ServiceID_Icon_Container label {
  font-size: 8pt;
}

.ServiceID_Icon {
  position: relative;
  float: left;
  width: 150px;
  height: 150px;
  text-align: center;
  background-repeat: no-repeat;
  color: white;
  cursor: pointer;
}

.ServiceID_Icon_New {
  position: absolute;
  left: 10px;
  top: 48px;
  height: 64px;
  width: 128px;
}

.ServiceID_Icon .ServiceID_Deactivated {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
  z-index: 99;
}

.ServiceID_Icon .ServiceID_Icon_Selected {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
  z-index: 98;
}

.ServiceID_Icon .ServiceIDLabelContainer {
  position: absolute;
  left: 0;
  display: table;
  top: 6px;
  height: 35px;
  width: 130px;
  margin-left: 10px;
  margin-right: 10px;
  z-index: 99;
}

.ServiceID_Icon .ServiceIDLabel {
  display: table-cell;
  vertical-align: middle;
}

.ServiceIDLabel input {
  display: none;
}

.ServiceID_Icon .ServiceIDPriceContainer {
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 140px;
  margin-left: 5px;
  margin-right: 5px;
  z-index: 99;
}

.ServiceID_Icon .ServiceIDSpecialOffer {
  position: absolute;
  left: 0;
  top: -5px;
  z-index: 100;
}

.ServiceID_Icon .ServiceID_Icon_Over {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
  z-index: 97;
}

.ServiceID_Icon .ServiceID_HelperDiv {
  position: relative;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
  z-index: 399;
}

.ServiceID_Icon .RibbonNewProduct {
  position: absolute;
  top: -4px;
  left: -4px;
  height: 58px;
  width: 58px;
  z-index: 199;
}

.ServiceID_Icon .RibbonLastChance {
  position: absolute;
  top: -4px;
  left: 96px;
  height: 58px;
  width: 58px;
  z-index: 199;
}

.ServiceID_Icon .ServiceID_Icon_Animation_1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 150px;
  display: none;
  z-index: 95;
}

.ServiceID_Icon .ServiceID_Icon_New_Animation_1 {
  position: absolute;
  top: 48px;
  right: 12px;
  width: 128px;
  height: 64px;
  display: none;
  z-index: 95;
}

.CharactersContainer {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.CharactersContainer .CharacterContainer {
  height: 140px;
  border: 1px solid #411809;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  background-color: #fef0d9;
  box-shadow: 3px 3px 2px #875f3e;
  opacity: 0.7;
}

.CharactersContainer .CharacterContainer:hover {
  opacity: 1;
}

.CharactersContainer .Selected {
  opacity: 1;
  background-color: #59ff4c7a;
}

.CharactersContainer .CharacterContainer .CharacterOutfit {
  width: 100%;
  height: 100%;

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

.CharactersContainer .CharacterContainer .CharacterOutfit > img {
  margin-left: -32px;
  margin-top: -32px;
}

.CharactersContainer .CharacterContainer .CharacterInfo {
  border-top: 1px solid #411809;
  width: 100%;
}

.CharactersContainer .CharacterContainer .CharacterInfo .CharacterName {
  margin: 0;
  padding: 4px;
  text-align: center;
  background-color: #f9c078;
}

.CharactersContainer .CharacterContainer .CharacterInfo .CharacterLevel {
  margin: 0;
  padding: 2px;
  text-align: center;
  background-color: #793315;
  color: #fef0d9;
}

/* ==== DMD MODERN BOXES v2 "VERGA ENTALHADA" - BEGIN - remover este bloco p/ reverter ====
   SUBSTITUI o bloco "DMD MODERN BOXES" v1 INTEIRO (basic_d.css, BEGIN..END, ~linhas 4930-4944).
   NAO deixar os dois blocos coexistindo: o v1 usa shorthand background com !important e
   venceria os longhands daqui em silencio (armadilha 1 do projeto).
   Geometria preservada do v1: header 42px + junta 2px = 44px; gif .Title segue em top:8px. */

/* 0) cenografia de gifs do tema antigo: fora (herdado do v1, inalterado) */
.Content .Corner-tl,.Content .Corner-tr,.Content .Corner-bl,.Content .Corner-br,.Content .CornerWrapper-b,.Content .Border_1{display:none !important}
.CaptionContainer .CaptionEdgeLeftTop,.CaptionContainer .CaptionEdgeRightTop,.CaptionContainer .CaptionEdgeLeftBottom,.CaptionContainer .CaptionEdgeRightBottom,.CaptionContainer .CaptionBorderTop,.CaptionContainer .CaptionBorderBottom,.CaptionContainer .CaptionVerticalLeft,.CaptionContainer .CaptionVerticalRight{display:none !important}
.Content .Border_2{margin:0 !important;background:transparent !important;padding:0 !important}
.Content .Border_3{margin:0 !important;border:none !important}

/* 1) O COFRE: moldura em ouro cunhado (moeda torneada).
      Aresta superior do aro clara (pega luz), base na sombra; anel escuro externo
      assenta a peca no fundo de lava e um fio de luz apanha a borda inferior
      (0 2px 0 declarado DEPOIS do anel 0 0 0 1px - sombras anteriores pintam por
      cima, entao a ordem importa). Radius 9 -> 10 (escala aprovada: 6/10/12). */
.Content .Box, .Content #news, .TableContainer{
  border:2px solid #b8912e !important;
  border-top-color:#cfa845 !important;
  border-bottom-color:#8a6a22 !important;
  border-radius:10px !important;
  overflow:hidden !important;
  background:#c9b78d !important;
  margin-bottom:15px !important;
  box-shadow:
    0 0 0 1px #150c05,
    0 2px 0 rgba(255,215,130,.10),
    0 12px 28px rgba(0,0,0,.50),
    0 3px 9px rgba(0,0,0,.42),
    inset 0 0 0 1px #170b05,
    inset 0 0 0 2px rgba(255,222,150,.07) !important;
}

/* 2) A VERGA ENTALHADA (42px + junta 2px = 44px, igual hoje).
      Todas as camadas estaticas vivem no background do PROPRIO elemento: pintam
      ATRAS do conteudo (titulo, pot-bar do Castle War), nada escurece texto nem
      rouba clique. Camadas, de cima p/ baixo:
        1 arame de ouro embutido 3px abaixo da aresta (mais vivo nas pontas)
        2 brilho radial vindo de cima (luz de tocha)
        3 sheen diagonal estatico (polimento)
        4 sombreamento das extremidades (a verga "entra" na moldura)
        5 grao de talha horizontal quase invisivel
        6 brasa radial subindo da base (a luz "de dentro" do cofre)
        7 corpo em 5 paradas: aresta acesa -> quente -> frio na base.
      DISCIPLINA (armadilha 1): longhands, nao shorthand. !important so em
      background-color/background-image (precisam bater o background-image INLINE
      do PHP no ticker e o background-color:#5f4d41 !important da regra base do
      CaptionContainer - este ultimo perde por ordem, mesma especificidade).
      repeat/size/position ficam SEM !important. O repeat-x da regra base
      .Content .BorderTitleText perde por ordem (mesma especificidade, este bloco
      vem depois). */
.Content .BorderTitleText, .TableContainer .CaptionContainer, .CaptionContainer .CaptionInnerContainer{
  position:relative !important;
  border:none !important;
  padding:0 !important;
  height:42px !important;
  border-bottom:2px solid #7a5a1e !important;
  background-color:#150806 !important;
  background-image:
    linear-gradient(90deg, rgba(255,216,138,0) 0%, rgba(255,216,138,.50) 8%, rgba(230,194,90,.14) 50%, rgba(255,216,138,.50) 92%, rgba(255,216,138,0) 100%),
    radial-gradient(130% 120% at 50% -35%, rgba(255,196,110,.17) 0%, rgba(255,196,110,0) 58%),
    linear-gradient(100deg, rgba(255,236,190,0) 30%, rgba(255,236,190,.05) 46%, rgba(255,236,190,0) 62%),
    linear-gradient(90deg, rgba(0,0,0,.26) 0px, rgba(0,0,0,0) 26px, rgba(0,0,0,0) calc(100% - 26px), rgba(0,0,0,.26) 100%),
    repeating-linear-gradient(180deg, rgba(255,244,215,.016) 0px, rgba(255,244,215,.016) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px),
    radial-gradient(120% 170% at 50% 128%, rgba(255,122,38,.16) 0%, rgba(214,58,20,.07) 34%, rgba(0,0,0,0) 58%),
    linear-gradient(180deg, #5b2b20 0%, #4a221b 16%, #36150f 52%, #210d08 83%, #150806 100%) !important;
  background-repeat:no-repeat;
  background-size:calc(100% - 28px) 1px, auto, auto, auto, auto, auto, auto;
  background-position:14px 3px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  box-shadow:
    inset 0 1px 0 rgba(255,205,115,.42),
    inset 0 2px 5px rgba(255,170,90,.12),
    inset 0 -1px 0 rgba(0,0,0,.65),
    inset 0 -9px 16px rgba(0,0,0,.48),
    inset 1px 0 0 rgba(255,205,115,.07),
    inset -1px 0 0 rgba(0,0,0,.35) !important;
}

/* filamento de brasa POR CIMA da junta: bottom:-2px pinta sobre os 2px de
   border-bottom (#7a5a1e estrutural nas pontas -> ouro -> quente no centro),
   como se a luz viesse de dentro do cofre. Halo minimo p/ nao virar neon.
   Estatico de proposito: brasa viva, nao pisca-pisca (nada de animacao perpetua).
   position:absolute = nao vira flex-item quando a pot-bar poe display:flex no
   header do #news; pointer-events:none = nao rouba clique.
   So no BorderTitleText e no CaptionInnerContainer (o CaptionContainer externo
   nao recebe, senao duplicaria o filamento no header aninhado do TableContainer). */
.Content .BorderTitleText::after, .CaptionContainer .CaptionInnerContainer::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:2px;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(122,90,30,0) 0%, #7a5a1e 7%, #b8912e 26%, #e8b96a 44%, #ffc27a 50%, #e8b96a 56%, #b8912e 74%, #7a5a1e 93%, rgba(122,90,30,0) 100%);
  box-shadow:0 0 7px rgba(255,150,60,.30), 0 -1px 4px rgba(255,150,70,.14);
}

/* 3) titulos em texto: gravacao cunhada (sombra dura 1px + macia) + aura ambar contida.
      font-size/weight declarados separados (nunca shorthand font - armadilha 2). */
.Content .Title, .CaptionContainer .Text{
  color:#f2d17e !important;
  font-weight:bold !important;
  font-size:12px !important;
  letter-spacing:.8px !important;
  text-transform:uppercase !important;
  text-shadow:0 1px 1px rgba(0,0,0,.85), 0 2px 6px rgba(0,0,0,.5), 0 0 10px rgba(240,190,80,.30) !important;
}
.Content .Title{top:13px !important;left:15px !important}
.CaptionContainer .Text{padding:11px 15px !important}

/* titulo-imagem gif (asset do tema, arte intocada): centralizado (44-28)/2 = 8px.
   Sombra de assentamento via filter SO no img (em titulo-texto dobraria com o
   text-shadow acima). */
.Box > .Title, .Box > img.Title{top:8px !important}
.Box > img.Title{filter:drop-shadow(0 1px 1px rgba(0,0,0,.7)) drop-shadow(0 0 5px rgba(0,0,0,.3))}

/* ============ FAIXA DO TICKER: "mural de avisos da guilda" ============ */

/* cravos dourados torneados nas extremidades da verga (so no ticker):
   miolo claro -> ouro -> aro escuro -> sombra. O ::before fica livre p/ isso
   porque o arame de ouro generico vive no background (nao em pseudo).
   Ficam ATRAS da .Div-Right (que e sibling com z-index:999). */
#NewsTicker > .BorderTitleText::before{
  content:'';
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  pointer-events:none;
  background-image:
    radial-gradient(4px 4px at 10px 50%, #f7df9e 0%, #d9b24e 38%, #7a5a1e 58%, rgba(0,0,0,.55) 66%, rgba(0,0,0,0) 74%),
    radial-gradient(4px 4px at calc(100% - 10px) 50%, #f7df9e 0%, #d9b24e 38%, #7a5a1e 58%, rgba(0,0,0,.55) 66%, rgba(0,0,0,0) 74%);
  background-repeat:no-repeat;
}

/* separadores: os <p> de 1px que carregam o "|" viram goivas entalhadas sem tocar
   no PHP. O seletor de atributo casa a string exata "width: 1px" presente nos
   DOIS ramos do PHP (com e sem <b>); se alguem reformatar o inline, degrada p/ o
   "|" branco de hoje (benigno). font-size:0 apaga o glifo (herda pro <b>);
   line-height:0 PRECISA de !important (o <style> interno da pagina tem
   line-height:18px !important). top/height vencem o top:0 da regra base por
   especificidade (1,2,1 vs 0,2,1), sem !important.
   Goiva = fio dourado que morre nas pontas + sombra dupla (funda a direita,
   meia a esquerda) = talha de cinzel. */
#NewsTicker .Div-Right p[style*="width: 1px"]{
  font-size:0;
  line-height:0 !important;
  pointer-events:none;
  top:1px;
  height:16px;
  background:linear-gradient(180deg, rgba(230,194,90,0) 0%, rgba(230,194,90,.5) 30%, rgba(230,194,90,.5) 70%, rgba(230,194,90,0) 100%);
  box-shadow:1px 0 0 rgba(0,0,0,.55), -1px 0 0 rgba(0,0,0,.28);
}

/* itens do mural: repouso ouro assentado. O ID no seletor vence o <style> interno
   da pagina (.Div-Right ... !important, 0,1,x) e a regra base
   .Content .Div-Right p a{color:#ccc !important} (0,2,2). */
#NewsTicker .Div-Right p{
  color:#f2d17e !important;   /* vence o color:#fff inline (sem !important) dos <p> */
}
#NewsTicker .Div-Right svg{
  fill:#e6c25a !important;    /* ouro apagado em repouso; vence o <style>svg{fill:#ffffff}</style> interno dos SVGs */
  vertical-align:-0.22em !important;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.55));
  transition:fill .15s ease, filter .15s ease;
}
/* hover: o icone ACENDE - ouro-vivo + nucleo curto + halo largo.
   Glow via filter, nunca via box-shadow animado (armadilha 3: box-shadow com
   !important na base nao transiciona). */
#NewsTicker .Div-Right p:hover svg{
  fill:#ffd98a !important;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.55)) drop-shadow(0 0 4px rgba(255,214,120,.85)) drop-shadow(0 0 9px rgba(240,190,80,.4));
}
#NewsTicker .Div-Right a{
  color:#f2d17e !important;
  text-decoration:none !important;
  transition:color .15s ease, text-shadow .15s ease;
}
#NewsTicker .Div-Right p:hover a, #NewsTicker .Div-Right a:hover{
  color:#ffd98a !important;
  text-shadow:0 0 8px rgba(255,217,138,.7);
}
/* contador "Jogadores unicos": verde canonico unico, aceso de leve */
#NewsTicker .Div-Right .Color-Success{
  color:#4ade80 !important;
  text-shadow:0 0 6px rgba(74,222,128,.3);
}

@media (prefers-reduced-motion:reduce){
  #NewsTicker .Div-Right svg, #NewsTicker .Div-Right a{transition:none}
}
/* pote semanal na verga (.dmd5-pote e o fallback .cw-potbar): o a:hover generico do tema
   desenhava o sublinhado cru do navegador. No lugar: FIO DE OURO que cresce do centro,
   lift de 1px e brilho no numero - mesmo vocabulario dos marcadores do characters. */
.dmd5-pote, .dmd5-pote:hover, .dmd5-pote:hover *, .cw-potbar, .cw-potbar:hover, .cw-potbar:hover *{text-decoration:none !important}
.dmd5-pote, .cw-potbar{position:relative;transition:filter .15s ease, transform .15s ease}
.dmd5-pote::after, .cw-potbar::after{content:'';position:absolute;left:6%;right:6%;bottom:-3px;height:2px;border-radius:2px;pointer-events:none;background:linear-gradient(90deg,transparent,#e6c25a 30%,#ffd98a 50%,#e6c25a 70%,transparent);box-shadow:0 0 5px rgba(240,190,80,.45);transform:scaleX(0);transform-origin:center;transition:transform .18s ease}
.dmd5-pote:hover::after, .cw-potbar:hover::after{transform:scaleX(1)}
.dmd5-pote:hover, .cw-potbar:hover{transform:translateY(-1px);filter:brightness(1.1)}
.dmd5-pote:hover .dmd5-potval, .cw-potbar:hover .cw-potval{text-shadow:0 1px 2px rgba(0,0,0,.6), 0 0 9px rgba(255,217,138,.6)}
@media (prefers-reduced-motion:reduce){.dmd5-pote,.cw-potbar,.dmd5-pote::after,.cw-potbar::after{transition:none}}
/* ==== DMD MODERN BOXES v2 "VERGA ENTALHADA" - END ==== */

/* ==== DMD MODERN MENU (v3 "Ouro Cunhado" - fusao refinada) - BEGIN - remover este bloco p/ reverter ==== */
/* Onde e POR QUE ha !important neste bloco (menu nao sofre vazamento de outras paginas;
   todo !important aqui existe p/ vencer estilo INLINE do markup/JS legado):
   - .MenuButton background: o markup traz background-image INLINE (button-background1.gif etc);
   - .Submenuitem background-color: initialize.js grava INLINE #3c3c3c/#161616 no over/out;
   - label do .dmd-here (color/text-shadow/background/animation): spans com estilo INLINE no
     markup + JS velho pinta branco/mostra iconezinho;
   - demais: espelham o bloco anterior (base .MenuButton legada linha ~2843, .SubmenuitemLabel ~2944).
   ARMADILHAS respeitadas: nenhuma animacao de background-position no menu (shorthand background
   com !important e seguro AQUI); zero shorthand font; dmd-attract anima FILTER (nunca box-shadow,
   que tem !important na base) e o .MenuButton NAO declara filter nem transition de filter. */

/* -- pecas do tema velho fora deste vocabulario -- */
/* chains/topo/rodape: GLOBAL de proposito, identico ao bloco anterior (todas as .LeftChain/.RightChain
   do layout vivem dentro do menu - verificado; escopar nao muda nada, manter igual = zero regressao) */
.LeftChain, .RightChain, #MenuTop, #MenuBottom, .Extend{display:none !important}
#Menu .Button{display:none !important}   /* gif de hover legado (JS alterna visibility; display vence) */
#Menu .Lights div{display:none}          /* pontinhos verdes legados dentro do span .Lights */

/* -- painel do menu: raio 12 (escala oficial), vinheta + respiro de luz no topo -- */
#Menu{
  background:
    radial-gradient(140% 60% at 50% -8%, rgba(255,196,110,.07), transparent 60%),
    linear-gradient(180deg, rgba(26,16,10,.78) 0%, rgba(10,6,3,.9) 100%) !important;
  border:1px solid rgba(184,145,46,.55) !important;
  border-radius:12px !important;
  padding:8px 7px !important;
  width:180px !important;
  box-sizing:border-box !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,214,130,.14),
    inset 0 0 44px rgba(0,0,0,.55) !important;
}

/* -- botao principal 164x34, raio 6: metal cunhado sobre brasa --
   camadas: sheen radial (luz de cima) + calor subindo da base + corpo em rampa CANONICA de brasa.
   O background NAO muda em hover/active: todo o acendimento e por border/box-shadow (transicionaveis)
   - zero pulo de layout, zero snap de gradiente. As 5 sombras mantem a MESMA contagem e o MESMO
   padrao inset/nao-inset em todos os estados, senao o navegador nao interpola. */
#Menu .MenuButton{
  position:relative !important;
  background:
    radial-gradient(120% 95% at 50% -18%, rgba(255,196,110,.15), rgba(255,170,80,.05) 45%, transparent 72%),
    linear-gradient(0deg, rgba(122,52,16,.18), transparent 40%),
    linear-gradient(180deg,#42301a 0%,#2a1c12 42%,#241708 70%,#140d08 100%) !important;
  border:1px solid #7a5a1e !important;
  border-radius:6px !important;
  margin:0 0 6px 0 !important;
  overflow:hidden !important;
  width:auto !important;
  box-shadow:
    0 3px 9px rgba(0,0,0,.55),
    0 0 0 0 rgba(240,190,80,0),
    inset 0 1px 0 rgba(255,216,138,.17),
    inset 0 -1px 0 rgba(0,0,0,.52),
    inset 0 12px 16px -10px rgba(255,196,110,.13) !important;
  transition:border-color .16s ease, box-shadow .2s ease;
}
/* hover: acende por dentro (borda viva + glow externo sutil + bisel mais claro) */
#Menu .MenuButton:hover{
  border-color:#b8912e !important;
  box-shadow:
    0 4px 12px rgba(0,0,0,.6),
    0 0 12px 1px rgba(240,190,80,.2),
    inset 0 1px 0 rgba(255,222,150,.32),
    inset 0 -1px 0 rgba(0,0,0,.52),
    inset 0 12px 18px -10px rgba(255,196,110,.3) !important;
}
/* metal pressionado (fusao do conceito Relicario): bisel invertido no clique */
#Menu .MenuButton:active{
  border-color:#7a5a1e !important;
  box-shadow:
    0 1px 4px rgba(0,0,0,.5),
    0 0 0 0 rgba(240,190,80,0),
    inset 0 2px 6px rgba(0,0,0,.5),
    inset 0 -1px 0 rgba(255,216,138,.08),
    inset 0 12px 16px -10px rgba(0,0,0,.28) !important;
}

/* -- colchetes dourados: token accent na base, ouro vivo + micro-halo no hover -- */
#Menu .MenuButton::before, #Menu .MenuButton::after{
  content:'' !important;
  position:absolute !important;
  width:9px;height:9px;
  pointer-events:none;
  opacity:.75;
  z-index:2;
  filter:drop-shadow(0 0 0 rgba(255,205,110,0));
  transition:opacity .16s ease, border-color .16s ease, filter .16s ease;
}
#Menu .MenuButton::before{top:3px;left:3px;border-top:2px solid #e6c25a;border-left:2px solid #e6c25a;border-top-left-radius:3px}
#Menu .MenuButton::after{bottom:3px;right:3px;border-bottom:2px solid #e6c25a;border-right:2px solid #e6c25a;border-bottom-right-radius:3px}
#Menu .MenuButton:hover::before, #Menu .MenuButton:hover::after{
  opacity:1;
  border-color:#ffd98a;
  filter:drop-shadow(0 0 3px rgba(255,205,110,.8));
}

/* -- rotulo Fondamento: token ouro texto-titulo (#f2d17e, consolidado; era #f2d17e),
   acende p/ ouro vivo no hover. Estrutura/fonte legadas (.menufonts ~2802) intocadas. -- */
#Menu .menufonts{
  color:#f2d17e !important;
  letter-spacing:.4px;
  text-shadow:0 1px 2px rgba(0,0,0,.8), 0 0 9px rgba(240,190,80,.26) !important;
  transition:color .18s ease, text-shadow .18s ease;
}
#Menu .MenuButton:hover .menufonts{
  color:#ffd98a !important;
  text-shadow:0 1px 2px rgba(0,0,0,.85), 0 0 12px rgba(255,205,110,.5) !important;
}

/* -- estado COLAPSADO deliberado: initialize.js ja alterna visibility do span .Lights
   (visivel = submenu fechado; InitializeMenu seta no load) - viramos ele num chevron
   dourado discreto a direita, apontando p/ baixo = "abre" -- */
#Menu .Lights{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:2}
#Menu .Lights::after{
  content:'';
  position:absolute;
  right:13px;top:50%;
  width:5px;height:5px;margin-top:-4px;
  border-right:2px solid #b8912e;
  border-bottom:2px solid #b8912e;
  border-bottom-right-radius:1px;
  transform:rotate(45deg);
  opacity:.75;
}

/* -- submenu: poco escavado (raio 6 p/ parear com o botao) --
   profundidade real: sombra interna no topo + lip de luz na base + fio de cunho */
#Menu .Submenu{
  background:linear-gradient(180deg,#241708 0%,#140d08 100%) !important;
  border:1px solid rgba(122,90,30,.8) !important;
  border-radius:6px !important;
  overflow:hidden !important;
  margin:0 0 6px 0 !important;
  width:auto !important;
  box-shadow:
    0 4px 10px rgba(0,0,0,.45),
    inset 0 2px 6px rgba(0,0,0,.55),
    inset 0 -1px 0 rgba(255,210,120,.06),
    inset 0 0 0 1px rgba(0,0,0,.4) !important;
}

/* -- item do submenu -- */
#Menu .Submenuitem{
  position:relative !important;
  background-color:transparent !important;  /* vence o inline #161616 do MouseOutSubmenuItem */
  background-image:none;
  border-bottom:1px solid rgba(184,145,46,.12) !important;
  transition:background-color .14s ease;
}
#Menu .Submenu > a:last-of-type .Submenuitem{border-bottom:none !important}
/* barrinha dourada que desliza no hover (tokens accent -> borda viva) */
#Menu .Submenuitem::before{
  content:'' !important;
  position:absolute !important;
  left:0;top:3px;bottom:3px;width:3px;
  background:linear-gradient(180deg,#e6c25a,#b8912e);
  border-radius:2px;
  transform:scaleY(0);
  transform-origin:center;
  transition:transform .14s ease, box-shadow .14s ease;
}
#Menu .Submenuitem:hover{
  background-color:rgba(184,145,46,.13) !important;  /* vence o inline #3c3c3c do MouseOverSubmenuItem */
  background-image:linear-gradient(90deg, rgba(240,190,80,.08), transparent 70%);
}
#Menu .Submenuitem:hover::before{transform:scaleY(1)}
/* label: some a linha cinza #3c3c3c legada (duplicava o fio dourado do item = linha dupla) */
#Menu .SubmenuitemLabel{padding:6px 12px !important;border-bottom:0 !important;transition:padding-left .14s ease}
#Menu .Submenuitem:hover .SubmenuitemLabel{padding-left:16px !important}
/* texto no hover: dourado-titulo no lugar do branco cru legado (.Submenu a:hover{color:white}) */
#Menu .Submenu a:hover, #Menu .Submenu a:active{color:#f2d17e}
/* teclado: paridade com o hover (o <a> e PAI do .Submenuitem, entao focus desce por descendencia) */
#Menu .Submenu a:focus-visible .Submenuitem{background-color:rgba(184,145,46,.13) !important}
#Menu .Submenu a:focus-visible .Submenuitem::before{transform:scaleY(1)}

/* ===== VOCE ESTA AQUI (.dmd-here - aplicada pelo fix de JS no div.Submenuitem ativo) =====
   trio: filamento incandescente fixo + lavagem de brasa que emana da esquerda e morre a ~70%
   + tacha de ouro cunhada a direita. Label em ouro vivo. Estas regras vem DEPOIS das de :hover
   de proposito: no empate de especificidade, o estado ativo vence por ordem no arquivo. */
#Menu .Submenuitem.dmd-here{
  background-color:rgba(62,36,15,.55) !important;   /* vence o inline do JS */
  background-image:
    radial-gradient(95% 140% at 0% 50%, rgba(214,110,34,.2), rgba(214,110,34,.05) 45%, transparent 72%),
    linear-gradient(90deg, rgba(240,190,80,.1), rgba(240,190,80,.03) 55%, transparent) !important;
  border-bottom-color:rgba(184,145,46,.22) !important;
  box-shadow:inset 0 1px 0 rgba(255,214,130,.1), inset 0 -1px 0 rgba(0,0,0,.35);
}
#Menu .Submenuitem.dmd-here:hover{background-color:rgba(70,41,17,.6) !important}
/* filamento: a mesma barrinha do hover, agora fixa, mais quente e com halo */
#Menu .Submenuitem.dmd-here::before{
  transform:scaleY(1);
  top:2px;bottom:2px;
  background:linear-gradient(180deg,#ffd98a 0%,#e6c25a 45%,#7a5a1e 100%);
  box-shadow:0 0 7px rgba(255,205,110,.55), 0 0 2px rgba(255,224,160,.8);
}
/* tacha de ouro cunhada (losango) a direita, com anel de engaste escuro (fusao Relicario) */
#Menu .Submenuitem.dmd-here::after{
  content:'' !important;
  position:absolute !important;
  right:9px;top:50%;
  width:6px;height:6px;margin-top:-3px;
  transform:rotate(45deg);
  border-radius:1px;
  background:linear-gradient(135deg,#ffd98a 0%,#e6c25a 45%,#7a5a1e 100%);
  box-shadow:
    0 0 0 1px rgba(20,13,8,.85),
    0 0 6px rgba(255,205,110,.45),
    inset 0 1px 0 rgba(255,244,210,.7),
    inset 0 -1px 0 rgba(70,45,8,.7);
  pointer-events:none;
}
/* indent fixo (igual ao do hover: sem pulo) + folga a direita p/ a tacha */
#Menu .Submenuitem.dmd-here .SubmenuitemLabel{padding-left:16px !important;padding-right:22px !important}
/* label ouro vivo - vence os spans/font com color/text-shadow/background INLINE do markup e o
   branco do JS velho; animation:none mata o piscarBrilho do DemoWiki quando ele e a pagina atual;
   metrica de fonte intocada (nada de bold) = zero risco de clipar rotulos longos */
#Menu .dmd-here .SubmenuitemLabel,
#Menu .dmd-here .SubmenuitemLabel span,
#Menu .dmd-here .SubmenuitemLabel font{
  color:#ffd98a !important;
  text-shadow:0 1px 1px rgba(0,0,0,.8), 0 0 8px rgba(255,190,90,.35) !important;
  background:none !important;  /* alguns spans carregam bg_menu.gif inline */
  animation:none !important;
}
/* iconezinho gif do tema velho: nunca aparece no item modernizado (display vence visibility do JS) */
#Menu .dmd-here .ActiveSubmenuItemIcon{display:none !important}

/* -- apresentacao do menu News na 1a visita (PRESERVADO; consumidor em layout.php ~l.184) --
   PEGADINHA: .MenuButton tem box-shadow com !important, e animacao CSS PERDE para !important -
   glow por box-shadow nao rodaria (falha silenciosa). Por isso o pulso e via FILTER.
   As duas etapas do keyframe tem a MESMA quantidade de drop-shadow, senao o navegador nao
   interpola e o brilho pisca seco. NAO declarar filter nem transition de filter no .MenuButton
   base, senao esta animacao morre. */
@keyframes dmdNewsAttract{
  0%,100%{filter:drop-shadow(0 0 0 rgba(255,214,120,0)) drop-shadow(0 0 0 rgba(240,190,80,0))}
  50%{filter:drop-shadow(0 0 10px rgba(255,214,120,1)) drop-shadow(0 0 20px rgba(240,190,80,.6))}
}
#Menu .MenuButton.dmd-attract{animation:dmdNewsAttract 1.5s ease-in-out 1;border-color:#e6c25a !important}

/* -- acessibilidade: sem movimento p/ quem pediu sem movimento -- */
@media (prefers-reduced-motion:reduce){
  #Menu .MenuButton.dmd-attract{animation:none}
  #Menu .MenuButton,
  #Menu .MenuButton::before,
  #Menu .MenuButton::after,
  #Menu .menufonts,
  #Menu .Submenuitem,
  #Menu .Submenuitem::before,
  #Menu .SubmenuitemLabel{transition:none}
}
/* ==== DMD MODERN MENU - END ==== */

/* ==== DMD ACCOUNT BUTTON v4 "RISCA DE ALFAIATE" - BEGIN - remover p/ reverter ====
   Escolha do dono (20/07): luxo de relojoaria - filete DUPLO de ouro embutido rente a
   borda (feito por sombras INTERNAS: nada ancorado, nada que desalinhe), losangos de
   ouro flanqueando o rotulo em letra-de-ouro (gradiente no glifo + drop-shadow no
   proprio elemento). LOGIN carmesim | MY ACCOUNT negro-ouro | CRIAR CONTA placa dourada
   com risca escura. Sem particulas, sem pseudo-camadas de texto - a licao dos dois
   uploads truncados: quanto menos pecas dependentes, menos ha o que quebrar. */
/* integracao do loginbox no topo do menu */
#Menu #Loginbox{width:auto !important;height:auto !important;top:0 !important;left:0 !important;margin:0 0 6px 0 !important;position:relative !important}
#Menu #LoginTop, #Menu .LoginBorder, #Menu #BorderLeft, #Menu #BorderRight, #Menu #LoginBottom{display:none !important}
#Menu #LoginButtonContainer{background:none !important;padding:0 !important;height:auto !important;position:relative !important;left:0 !important;top:0 !important;width:auto !important}
#Menu #PlayNowContainer{position:relative !important;left:0 !important;top:0 !important;width:auto !important}
#Menu .MediumButtonForm{margin:0 !important;width:auto !important}
/* pecas da gema antiga: se alguma folha/markup velho sobreviver em cache, some em silencio */
#Menu .dmd-cta-glow, #Menu .dmd-cta-frame, #Menu .dmd-cta-body{display:none !important}
#Menu .dmd-cta .dmd-cta-txt::before{content:none !important}

/* ---- o botao: carmesim com filete duplo embutido ---- */
#Menu button.dmd-cta{
  display:block !important; position:relative !important; box-sizing:border-box !important;
  width:100% !important; height:40px !important; margin:0 !important; padding:0 !important;
  cursor:pointer !important; overflow:hidden !important;
  border:1px solid #e6c25a !important; border-radius:8px !important;
  -webkit-appearance:none !important; appearance:none !important;
  background-color:#7e120d !important;
  background-image:linear-gradient(180deg,#b32418 0%,#7e120d 55%,#4e0806 100%) !important;
  box-shadow:
    0 4px 12px rgba(0,0,0,.55),
    inset 0 0 0 3px rgba(20,8,4,.55),
    inset 0 0 0 4px rgba(230,194,90,.65),
    inset 0 1px 0 rgba(255,236,190,.35) !important;
  transition:filter .15s ease, border-color .15s ease, transform .1s ease !important;
}
#Menu button.dmd-cta:hover{filter:brightness(1.08) saturate(1.04) !important;border-color:#ffd98a !important}
#Menu button.dmd-cta:active{transform:translateY(1px) !important;filter:brightness(.97) !important}
#Menu button.dmd-cta:focus-visible{outline:2px solid #ffd98a !important;outline-offset:3px !important}

/* logado: MY ACCOUNT em NEGRO-OURO (o luxo assentado de quem ja e de casa) */
#Menu button.dmd-cta.dmd-account{
  background-color:#1a0f08 !important;
  background-image:linear-gradient(180deg,#2c1c10 0%,#1a0f08 55%,#100904 100%) !important;
  border-color:#b8912e !important;
}
#Menu button.dmd-cta.dmd-account:hover{border-color:#e6c25a !important}

/* ---- o rotulo: losango + letra de ouro + losango ---- */
#Menu .dmd-cta .dmd-cta-txt{
  position:absolute !important; left:0 !important; right:0 !important; top:0 !important; bottom:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  gap:8px !important; z-index:2 !important; pointer-events:none !important;
  filter:drop-shadow(0 2px 0 rgba(28,6,3,.95)) drop-shadow(0 0 9px rgba(255,170,90,.4)) !important;
}
#Menu .dmd-cta .dmd-cta-txt em{
  font-family:Georgia,'Times New Roman',serif !important;
  font-style:normal !important; font-weight:bold !important;
  font-size:15px !important; line-height:1 !important; letter-spacing:2.2px !important;
  color:#ffe9c4 !important;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  #Menu .dmd-cta .dmd-cta-txt em{
    background-image:linear-gradient(180deg,#fff6dc 0%,#ffe2a0 34%,#f2c35a 62%,#d09a28 86%,#a8781a 100%) !important;
    -webkit-background-clip:text !important; background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
  }
}
/* MY ACCOUNT e mais longo: um degrau menor p/ respirar entre os losangos */
#Menu .dmd-cta.dmd-account .dmd-cta-txt em{font-size:12.5px !important;letter-spacing:1.8px !important}
/* os losangos de ouro */
#Menu .dmd-cta .dmd-cta-txt .dmd-dia{
  display:inline-block !important; flex:0 0 auto !important;
  width:5px !important; height:5px !important; border-radius:1px !important;
  transform:rotate(45deg) !important;
  background-image:linear-gradient(135deg,#ffe9ad 0%,#e6c25a 45%,#8a6218 100%) !important;
}

/* ---- status (Criar Conta / Logout) ---- */
#Menu .dmd-loginstatus{background:none !important;position:relative !important;left:0 !important;width:164px !important;height:auto !important;margin:8px 0 16px 0 !important;padding:0 !important;text-align:center !important;overflow:visible !important;font-size:0 !important;z-index:30 !important} /* 16px embaixo: respiro entre Criar Conta e o News (antes 6px = amontoado) */
/* fio de ouro "RISCA DUPLA" fechando a zona de conta (escolha 21/07):
   dois fios paralelos - o de baixo mais curto e mais fraco - eco da risca
   dupla embutida nos botoes. UMA caixa ::after com as duas linhas pintadas
   como camadas de background (nada posicionado, nada que desalinhe). */
#Menu .dmd-loginstatus::before{content:none !important}
#Menu .dmd-loginstatus::after{
  content:'' !important; display:block !important;
  width:138px !important; height:5px !important;
  margin:9px auto 0 !important; border:0 !important;
  background-image:
    linear-gradient(90deg,rgba(184,145,46,0) 0%,#b8912e 22%,#e9c96a 50%,#b8912e 78%,rgba(184,145,46,0) 100%),
    linear-gradient(90deg,rgba(184,145,46,0) 0%,rgba(184,145,46,.55) 22%,rgba(233,201,106,.55) 50%,rgba(184,145,46,.55) 78%,rgba(184,145,46,0) 100%) !important;
  background-position:center top, center bottom !important;
  background-size:100% 1px, 84px 1px !important;
  background-repeat:no-repeat !important;
  opacity:.85 !important;
}
/* CRIAR CONTA: placa de ouro com a risca escura embutida (a gemea invertida do LOGIN) */
#Menu .dmd-loginstatus a.dmd-createacc{
  display:block !important; position:relative !important; box-sizing:border-box !important;
  width:154px !important; height:28px !important; margin:0 auto !important; padding:0 10px !important;
  overflow:hidden !important;
  border:0 !important; border-radius:7px !important;
  -webkit-clip-path:none !important; clip-path:none !important;
  font-family:Verdana,Geneva,Arial,sans-serif !important;
  font-weight:bold !important; font-size:10.5px !important; line-height:28px !important;
  letter-spacing:1.4px !important; text-transform:uppercase !important;
  text-align:center !important; text-decoration:none !important; white-space:nowrap !important;
  color:#241203 !important;
  text-shadow:0 1px 0 rgba(255,247,219,.65) !important;
  background-image:linear-gradient(180deg,#ffedb6 0%,#ffd069 30%,#e0a93a 60%,#a87e1c 100%) !important;
  box-shadow:
    inset 0 0 0 2px rgba(60,36,4,.4),
    inset 0 0 0 3px rgba(255,244,210,.55),
    inset 0 1px 0 rgba(255,255,255,.5),
    0 3px 7px rgba(0,0,0,.5) !important;
  transition:filter .14s ease, transform .14s ease !important;
}
#Menu .dmd-loginstatus a.dmd-createacc::before,
#Menu .dmd-loginstatus a.dmd-createacc::after{content:none !important}
#Menu .dmd-loginstatus a.dmd-createacc:hover{filter:brightness(1.07) saturate(1.05) drop-shadow(0 0 8px rgba(255,217,138,.6)) !important;transform:translateY(-1px) !important}
#Menu .dmd-loginstatus a.dmd-createacc:active{transform:translateY(0) !important;filter:brightness(.97) !important}
#Menu .dmd-loginstatus a.dmd-createacc:focus-visible{outline:2px solid #ffd98a !important;outline-offset:2px !important}
/* logado: "Logout" discreto */
#Menu .dmd-loginstatus a.dmd-logout{display:inline-block !important;color:#c8a24a !important;font-weight:bold !important;font-size:10px !important;font-family:Verdana,Arial,sans-serif !important;text-decoration:none !important;text-transform:uppercase !important;letter-spacing:.6px !important;transition:color .12s}
#Menu .dmd-loginstatus a.dmd-logout:hover{color:#f2d17e !important;text-shadow:0 0 6px rgba(240,190,80,.5) !important}
/* ==== DMD ACCOUNT BUTTON - END ==== */

/* ==== DMD SIDEBAR CLEANUP (anexo 2: logo removido + coluna subida | anexo 3: badge online) - BEGIN - remover p/ reverter ==== */
#LeftArtwork{display:none !important}
#MenuColumn{top:160px !important}
#Monster, #PedestalAndOnline{display:none !important}
#PlayersOnline{background:linear-gradient(180deg,#241a12,#140d08) !important;border:1px solid #b8912e !important;border-radius:9px !important;padding:6px 12px !important;box-shadow:0 4px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,210,120,.15) !important;text-align:center !important;line-height:1.3 !important;white-space:nowrap !important;min-width:96px}
#PlayersOnline small{color:#f2d17e !important;letter-spacing:2px !important;font-size:9px !important;font-weight:bold !important}
#PlayersOnline span[style*="url"]{background:none !important}
#PlayersOnline span[style*="text-shadow"]{text-shadow:0 0 6px rgba(255,220,120,.35) !important}
/* ==== DMD SIDEBAR CLEANUP - END ==== */

/* ==== DMD RIGHT COLUMN (coluna direita premium) - BEGIN - remover p/ reverter ==== */
/* painel de fundo coeso atras da coluna direita (igual o do menu esquerdo) */
#Themeboxes{background:linear-gradient(180deg, rgba(24,14,9,.72) 0%, rgba(12,7,4,.86) 100%) !important;border:1px solid rgba(184,145,46,.55) !important;border-radius:12px !important;padding:10px 9px !important;width:202px !important;box-sizing:border-box !important;box-shadow:0 10px 26px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,210,120,.12), inset 0 0 40px rgba(0,0,0,.5) !important}
/* --- pedestal ONLINE --- */
#PlayersOnline.dmd-online{position:relative !important;display:block !important;background:linear-gradient(180deg,#35240f 0%,#160d06 100%) !important;border:2px solid #b8912e !important;border-radius:13px !important;text-align:center !important;padding:13px 14px 14px !important;box-shadow:0 9px 24px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,210,120,.28), inset 0 0 28px rgba(0,0,0,.5) !important;overflow:hidden !important;width:auto !important;min-width:0 !important;margin:0 auto 12px !important;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;white-space:normal !important;line-height:normal !important}
/* alinhamento: badge no fluxo + remove offsets antigos do pedestal */
#ThemeboxesColumn{margin-top:0 !important}
#Topbar, #Topbonus, #Topmedia{position:relative !important;top:0 !important;left:0 !important;margin:0 auto 12px !important}
#warcastle, #warcastle24, #quoteBox{position:relative !important;top:0 !important;left:0 !important}
#PlayersOnline.dmd-online::before,#PlayersOnline.dmd-online::after{content:'' !important;position:absolute !important;width:15px;height:15px;pointer-events:none}
#PlayersOnline.dmd-online::before{top:6px;left:6px;border-top:2px solid #ffd98a;border-left:2px solid #ffd98a;border-top-left-radius:4px}
#PlayersOnline.dmd-online::after{bottom:6px;right:6px;border-bottom:2px solid #ffd98a;border-right:2px solid #ffd98a;border-bottom-right-radius:4px}
#PlayersOnline.dmd-online .dmd-onlbl{display:flex;align-items:center;justify-content:center;gap:7px;font:bold 10px Verdana,sans-serif !important;letter-spacing:4px;color:#f2d17e !important;text-shadow:0 0 9px rgba(240,190,80,.4)}
#PlayersOnline.dmd-online .dmd-ondot{width:7px;height:7px;border-radius:50%;background:#5df08e;box-shadow:0 0 7px #5df08e;animation:dmdopulse 1.8s ease-in-out infinite}
@keyframes dmdopulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
@media(prefers-reduced-motion:reduce){#PlayersOnline.dmd-online .dmd-ondot{animation:none}}
#PlayersOnline.dmd-online .dmd-onnum{font-family:Georgia,'Times New Roman',serif !important;font-weight:bold;font-size:27px !important;margin:6px 0 4px !important;letter-spacing:.5px}
#PlayersOnline.dmd-online .dmd-onon{color:#5df08e !important;text-shadow:0 1px 2px rgba(0,0,0,.6), 0 0 15px rgba(74,222,128,.45) !important}
#PlayersOnline.dmd-online .dmd-onsl{color:#7a6440 !important;margin:0 6px;font-size:20px}
#PlayersOnline.dmd-online .dmd-onmax{color:#e0574d !important;font-size:21px;text-shadow:0 1px 2px rgba(0,0,0,.6)}
/* --- frame dos boxes de ranking --- */
.Themebox{background:linear-gradient(180deg,#2a1c12 0%,#140d08 100%) !important;border:1px solid #7a5a1e !important;border-radius:11px !important;box-shadow:0 6px 16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,210,120,.12) !important;margin:0 auto 12px !important;overflow:hidden !important;padding:0 0 2px !important}
.topleveltext{position:relative !important;color:#f2d17e !important;font-family:Georgia,'Times New Roman',serif !important;font-size:15px !important;font-weight:bold !important;text-shadow:0 1px 2px rgba(0,0,0,.7), 0 0 9px rgba(240,190,80,.3) !important;letter-spacing:.3px !important}
.top_level{position:static !important;background:none !important;width:auto !important;height:auto !important;padding:2px 9px 4px !important}
.Themebox{height:auto !important;min-height:0 !important}
/* header do box: titulo centralizado na largura INTEIRA.
   O escudo sai do fluxo (absolute) - se ficar no fluxo ele empurra o texto ~15px p/ direita.
   Tambem zeramos o left:7px / padding:3px / width:100% herdados de .topleveltext (linha ~2488,
   sobras do layout absoluto antigo do tema) que somavam mais ~8px de desvio.
   Escudo 22px (nao 28): com 28 o titulo mais longo ("Top Act. Players", 112.8px de tinta)
   colidiria com ele em 5.4px ao centralizar de verdade. */
#Themeboxes .dmd-rhd{position:relative !important;display:flex !important;align-items:center !important;justify-content:center !important;gap:0 !important;min-height:44px !important;box-sizing:border-box !important;padding:9px 11px 5px !important;text-align:center !important}
#Themeboxes .dmd-rhd .dmd-shield{position:absolute !important;left:7px !important;top:9px !important;transform:none !important;width:22px !important;height:30px !important;margin:0 !important;flex:none !important;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
/* escudo espelhado do lado direito, formando um par heraldico em volta do titulo.
   Feito com ::after (puro enfeite, nao merece markup) - o ::after do header ficou livre
   quando a setinha de colapso foi removida. So cabe porque o titulo esta centralizado:
   a folga que sobra a direita e exatamente a mesma da esquerda (4.6px no titulo mais longo).
   A arte do shield.gif e 59% assimetrica, entao o scaleX(-1) faz diferenca real. */
#Themeboxes .dmd-rhd::after{content:"" !important;position:absolute !important;right:7px !important;top:9px !important;width:22px !important;height:30px !important;background:url('../images/themeboxes/rankings/shield.gif') center/contain no-repeat !important;transform:scaleX(-1) !important;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6)) !important;pointer-events:none !important}
#Themeboxes .dmd-rhd .topleveltext{position:static !important;left:auto !important;width:auto !important;max-width:100% !important;height:auto !important;padding-left:0 !important;padding-right:0 !important;flex:0 1 auto !important;display:inline !important;text-align:center !important;font-size:13px !important;white-space:nowrap !important;line-height:1.2 !important}
.top_level > div[style*="rank1"], .top_level > div[style*="rank2"], .top_level > div[style*="rank3"], .top_level > div[style*="effect_bg"], .Themebox .Bottom{display:none !important}
/* --- linhas dos rankings --- */
.dmd-rank{display:flex !important;align-items:center;gap:9px;padding:5px 2px;border-bottom:1px solid rgba(184,145,46,.12);text-decoration:none !important}
.dmd-rank:last-of-type{border-bottom:none !important}
.dmd-medal{width:22px;height:22px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font:bold 11px Verdana,sans-serif;color:#1a0f06;box-shadow:0 1px 3px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.4)}
.dmd-m1{background:linear-gradient(180deg,#ffe07a,#e0a92a)}
.dmd-m2{background:linear-gradient(180deg,#eef0f5,#b8bcc6)}
.dmd-m3{background:linear-gradient(180deg,#e9a866,#b56a2e)}
.dmd-mx{background:linear-gradient(180deg,#3e3018,#241a0e);color:#f2d17e;border:1px solid #7a5a1e;box-shadow:none}
.dmd-who{flex:1;min-width:0;line-height:1.25}
.dmd-nm{display:block;color:#ffd98a;font:bold 12px Verdana,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dmd-val{display:block;color:#93805a;font:10.5px Verdana,sans-serif}
.dmd-val b{color:#4ade80;font-weight:bold}
/* --- botoes rodape (VIEW/FRAG/GUIA) --- */
.dmd-rft{display:flex !important;gap:6px;padding:6px 9px 8px}
.dmd-rbtn{flex:1;text-align:center;padding:5px 0 !important;font:bold 10px Verdana,sans-serif !important;letter-spacing:.7px;color:#f2d17e !important;text-decoration:none !important;border:1px solid #7a5a1e !important;border-radius:6px !important;background:linear-gradient(180deg,#3a2a18,#20150c) !important;transition:all .12s;position:static !important;width:auto !important;height:auto !important}
.dmd-rbtn:hover{border-color:#b8912e !important;color:#ffd98a !important;box-shadow:0 0 8px rgba(240,190,80,.28) !important}
.dmd-rbtn.dmd-frag{color:#ff8a6a !important;border-color:#7a3a1e !important;background:linear-gradient(180deg,#3a1c12,#20100a) !important}
.dmd-rbtn.dmd-frag:hover{border-color:#c0512a !important;color:#ffb199 !important;box-shadow:0 0 8px rgba(220,90,50,.3) !important}
/* --- castle boxes --- */
#warcastle, #warcastle24{background:linear-gradient(180deg,#2a1c12 0%,#140d08 100%) !important;border:1px solid #7a5a1e !important;border-radius:11px !important;box-shadow:0 6px 16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,210,120,.12) !important;margin:0 auto 12px !important;overflow:hidden !important;height:auto !important;width:auto !important;padding-bottom:8px !important}
#warcastle .Bottom, #warcastle24 .Bottom{display:none !important}
#warcastle .topleveltext, #warcastle24 .topleveltext{position:relative !important;display:block !important;text-align:center !important;top:auto !important;left:auto !important;width:100% !important;margin:2px 0 0 !important}
#castlewar, #castlewar24{position:static !important;top:auto !important;left:auto !important;width:auto !important;max-width:100% !important;margin:4px auto 6px !important}
#Themeboxes > br{display:none !important}
/* castle: esconde as coroas-imagem (empurravam o titulo pra baixo) e usa emoji dourado no titulo */
#warcastle > div[style*="crown"], #warcastle > div[style*="effect_bg"], #warcastle24 > div[style*="crown"], #warcastle24 > div[style*="effect_bg"]{display:none !important}
#warcastle .topleveltext::before, #warcastle24 .topleveltext::before{content:'\265B\00A0\00A0';color:#f5c542}
#warcastle .topleveltext::after, #warcastle24 .topleveltext::after{content:'\00A0\00A0\265B';color:#f5c542}
#warcastle .topleveltext, #warcastle24 .topleveltext{margin-top:10px !important}
/* --- coin box --- */
#quoteBox{background:linear-gradient(180deg,#2a1c12 0%,#140d08 100%) !important;border:1px solid #7a5a1e !important;border-radius:11px !important;box-shadow:0 6px 16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,210,120,.12) !important;margin:0 auto 12px !important;overflow:hidden !important;position:relative !important;height:190px !important;width:auto !important}
#quoteBox .topleveltext{color:#f2d17e !important;font-family:Georgia,serif !important;font-weight:bold !important}
#quoteBox .topleveltext{left:auto !important;top:auto !important}
/* Top Bonus XP + Top Act. Media COLAPSAVEIS (clique no header abre/fecha, o resto sobe/desce) */
.dmd-collapsible .dmd-rhd{cursor:pointer !important;position:relative !important}
/* (setinha ▾ removida a pedido — os headers continuam clicaveis via cursor:pointer) */
.dmd-collapsible .top_level{max-height:0 !important;overflow:hidden !important;padding-top:0 !important;padding-bottom:0 !important;transition:max-height .32s ease, padding .32s ease}
.dmd-collapsible.dmd-open .top_level{max-height:260px !important;padding-top:2px !important;padding-bottom:4px !important}
/* PEGADINHA: characters.php tem <style> inline que carrega DEPOIS do basic_d.css e vaza cor
   pra coluna direita (nomes ficavam marrons/azuis). Forcamos as cores com !important scoped. */
#Themeboxes .dmd-rank{color:#ffd98a !important;text-decoration:none !important}
#Themeboxes .dmd-nm{color:#ffd98a !important}
#Themeboxes .dmd-val{color:#93805a !important}
#Themeboxes .dmd-val b{color:#4ade80 !important}
#Themeboxes .dmd-rbtn{color:#f2d17e !important}
#Themeboxes .dmd-rbtn.dmd-frag{color:#ff8a6a !important}
#Themeboxes .topleveltext{color:#f2d17e !important}
#Themeboxes .dmd-medal{color:#1a0f06 !important}
#Themeboxes .dmd-medal.dmd-mx{color:#f2d17e !important;background:linear-gradient(180deg,#3e3018,#241a0e) !important;border-color:#7a5a1e !important;box-shadow:0 1px 2px rgba(0,0,0,.45) !important} /* composto: vence o override generico de .dmd-medal independente de ordem */
#Themeboxes #PlayersOnline .dmd-onon{color:#5df08e !important}
#Themeboxes #PlayersOnline .dmd-onmax{color:#e0574d !important}
#Themeboxes #PlayersOnline .dmd-onlbl{color:#f2d17e !important}
/* characters.php tambem vaza FONT-SIZE e altura pra coluna direita (nomes viravam 18px e
   truncavam; pedestal cortava em 42px por overflow:hidden). Forcamos as dimensoes: */
#Themeboxes #PlayersOnline{height:auto !important;min-height:0 !important}
#Themeboxes #PlayersOnline .dmd-onnum{font-size:27px !important;line-height:1.1 !important}
#Themeboxes .dmd-nm{font-size:12px !important;line-height:1.25 !important}
#Themeboxes .dmd-val{font-size:10.5px !important}
#Themeboxes .dmd-rank{font-size:12px !important}
#Themeboxes .topleveltext{font-size:13px !important}
#Themeboxes .dmd-rbtn{font-size:10px !important}
/* medalhas 1/2/3 NITIDAS: anel escuro define a borda + gradiente metalico de 3 paradas
   + numero escuro com relevo claro (antes ficavam "borradas": sem borda e sombra difusa) */
#Themeboxes .dmd-medal{width:23px !important;height:23px !important;font:800 12px/1 Verdana,Arial,sans-serif !important;color:#3d2708 !important;border:1px solid rgba(0,0,0,.55) !important;box-shadow:0 1px 2px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.6), inset 0 -2px 3px rgba(0,0,0,.18) !important;text-shadow:0 1px 0 rgba(255,255,255,.45) !important}
#Themeboxes .dmd-m1{background:linear-gradient(180deg,#ffe485 0%,#f2b62c 52%,#c98c10 100%) !important}
#Themeboxes .dmd-m2{background:linear-gradient(180deg,#fbfcfe 0%,#ccd2dc 52%,#98a0ad 100%) !important}
#Themeboxes .dmd-m3{background:linear-gradient(180deg,#f0b57f 0%,#cb8140 52%,#96551d 100%) !important}
/* ==== DMD RIGHT COLUMN - END ==== */

/* ==== DMD ONLINE v5 "FIO DE OURO" - BEGIN - remover p/ reverter ====
   Minimalismo final (escolha do dono): UMA linha - gema pulsante + numero + ONLINE -
   com um fio de ouro por baixo, que tambem faz o papel de divisor antes do primeiro
   ranking. Numero SEM separador de milhar (2000, nao 2.000), texto SEMPRE parado
   (regra do projeto: rotacao re-rasteriza e deixa fosco; movimento so na gema).
   ESTADOS: SEM mudanca de cor por lotacao (decisao do dono 20/07: acima de 2000 fica
   identico ao normal). Gema sempre verde = coracao batendo. Unica variacao: manutencao
   (texto ambar pequeno, sem gema, fio apagado). O markup ainda distingue onon/onmax (o JS
   usa isso p/ decidir reconstrucao), mas o CSS pinta os dois IGUAIS de proposito.
   Escopo #Themeboxes + !important (vazamento do characters.php). */

/* ---------- 1. o box vira suporte invisivel ---------- */
#Themeboxes #PlayersOnline.dmd-online{
  position:relative !important; display:block !important; box-sizing:border-box !important;
  width:auto !important; height:auto !important; min-width:0 !important; min-height:0 !important;
  left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
  margin:4px auto 12px !important; padding:2px 0 0 !important;
  text-align:center !important; white-space:normal !important; line-height:normal !important;
  overflow:visible !important;
  cursor:pointer; /* SEM !important: na whoisonline o JS poe cursor:auto inline e precisa vencer */
  border:0 !important; border-radius:0 !important;
  background-color:transparent !important; background-image:none !important;
  box-shadow:none !important;
  transition:filter .16s ease !important;
}
#Themeboxes #PlayersOnline.dmd-online::before,
#Themeboxes #PlayersOnline.dmd-online::after{ content:none !important; }
#Themeboxes #PlayersOnline.dmd-online:hover{ filter:brightness(1.12) !important; }
#Themeboxes #PlayersOnline.dmd-online:active{ filter:brightness(.98) !important; }

/* ---------- 2. a linha: gema + numero + rotulo ---------- */
#Themeboxes #PlayersOnline.dmd-online .dmd-fio-row{
  display:flex !important; align-items:center !important; justify-content:center !important;
  gap:8px !important; line-height:1 !important;
}
#Themeboxes #PlayersOnline.dmd-online .dmd-ondot{
  display:inline-block !important; flex:0 0 auto !important;
  width:7px !important; height:7px !important; border-radius:50% !important;
  background-color:#2fae62 !important;
  background-image:radial-gradient(circle at 35% 30%, #dfffe9 0%, #7bf5a6 35%, #2fae62 70%, #157a41 100%) !important;
  box-shadow:0 0 0 1px rgba(122,90,30,.9), 0 1px 1px rgba(0,0,0,.55), 0 0 7px rgba(93,240,142,.55), inset 0 -1px 1px rgba(0,0,0,.35) !important;
  animation-name:dmdForgeBeat !important; animation-duration:2.8s !important;
  animation-timing-function:ease-in-out !important; animation-iteration-count:infinite !important;
}
@keyframes dmdForgeBeat{
  0%,48%,100%{transform:scale(1);opacity:1}
  10%{transform:scale(.72);opacity:.55}
  20%{transform:scale(1);opacity:1}
  30%{transform:scale(.82);opacity:.7}
}
#Themeboxes #PlayersOnline.dmd-online .dmd-onnum{
  display:inline-block !important; position:static !important;
  margin:0 !important; padding:0 !important; white-space:nowrap !important;
  border:0 !important; background:none !important; box-shadow:none !important;
}
#Themeboxes #PlayersOnline.dmd-online .dmd-onnum .dmd-onon,
#Themeboxes #PlayersOnline.dmd-online .dmd-onnum .dmd-onmax{
  font-family:Georgia,'Times New Roman',serif !important; font-weight:bold !important;
  font-size:21px !important; line-height:1 !important; letter-spacing:.4px !important;
  font-variant-numeric:tabular-nums !important;
  color:#ffd98a !important;
  text-shadow:0 1px 1px rgba(0,0,0,.85), 0 0 9px rgba(255,190,80,.25) !important;
}
#Themeboxes #PlayersOnline.dmd-online .dmd-fio-t{
  font-family:Verdana,Geneva,sans-serif !important; font-weight:bold !important;
  font-size:8px !important; line-height:1 !important; letter-spacing:2.6px !important;
  color:#93805a !important;
  text-shadow:0 1px 1px rgba(0,0,0,.8) !important;
}

/* ---------- 3. o fio de ouro (tambem divisor antes do 1o ranking) ---------- */
#Themeboxes #PlayersOnline.dmd-online .dmd-fio-line{
  height:1px !important; width:140px !important; margin:7px auto 0 !important;
  background-color:transparent !important;
  background-image:linear-gradient(90deg, rgba(184,145,46,0) 0%, rgba(230,194,90,.7) 30%, #ffd98a 50%, rgba(230,194,90,.7) 70%, rgba(184,145,46,0) 100%) !important;
  transition:background-image .4s ease !important;
}

/* ---------- 4. (lotado nao muda mais de cor - decisao do dono 20/07: acima de 2000 fica igual) ---------- */







/* ---------- 5. MANUTENCAO: apagado e digno ---------- */
#Themeboxes #PlayersOnline.dmd-online[data-dmd-mode="maintenance"] .dmd-fio-line,
#Themeboxes #PlayersOnline.dmd-online:not(:has(.dmd-onon)):not(:has(.dmd-onmax)) .dmd-fio-line{
  background-image:linear-gradient(90deg, rgba(184,145,46,0) 0%, rgba(184,145,46,.35) 50%, rgba(184,145,46,0) 100%) !important;
}

/* ---------- 6. movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  #Themeboxes #PlayersOnline.dmd-online .dmd-ondot{animation-name:none !important}
}
/* ==== DMD ONLINE v5 "FIO DE OURO" - END ==== */
/* ==== DMD RANKING "RELICARIO CUNHADO" - BEGIN - remover bloco inteiro p/ reverter ====
   Colar no FIM do basic_d.css, DEPOIS de "DMD RIGHT COLUMN - END" (~linha 5159).
   Bloco 100% aditivo: refina o bloco DMD RIGHT COLUMN por cascata/especificidade.
   Hooks livres (verificado por grep): .Themebox::before, .dmd-rhd::before, .dmd-rank::before.
   O .dmd-rhd::after e o ESCUDO ESPELHADO (linha ~5082) - nao e tocado aqui.
   Armadilhas respeitadas:
   - background: shorthand SO no .Themebox, de proposito (mata o top_level.png inline do markup);
     nada anima background-position em lugar nenhum;
   - nenhum shorthand font: (so longhands);
   - box-shadow NUNCA e transicionado (glow = filter/opacity em camada; press = corte seco);
   - tudo escopado em #Themeboxes com !important (characters.php vaza estilos). */

/* --- 1. COFRE: bisel na borda (topo claro/base escura), radius 10, luz em 3 camadas
   (lintel dourado no topo + brasa fraca emanando da base + vinheta) sobre metal de 4 paradas.
   position:relative para o filete interno (::before). --- */
#Themeboxes .Themebox{
  position:relative !important;
  border:1px solid #7a5a1e !important;
  border-top-color:#8a6826 !important;
  border-bottom-color:#5e4414 !important;
  border-radius:10px !important;
  overflow:hidden !important;
  margin:0 auto 12px !important;
  padding:0 0 2px !important;
  height:auto !important;min-height:0 !important;
  background:
    radial-gradient(130% 52px at 50% -8px, rgba(255,196,96,.10) 0%, rgba(255,196,96,.03) 55%, rgba(255,196,96,0) 100%),
    radial-gradient(ellipse 90% 55% at 50% 112%, rgba(214,98,34,.09) 0%, rgba(214,98,34,0) 62%),
    radial-gradient(150% 96px at 50% 114%, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 70%),
    linear-gradient(180deg,#2e2013 0%,#241708 46%,#170e07 79%,#120c07 100%) !important;
  box-shadow:
    0 8px 20px rgba(0,0,0,.55),
    0 2px 5px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,214,130,.16),
    inset 0 -1px 0 rgba(0,0,0,.55),
    inset 1px 0 0 rgba(255,214,130,.05),
    inset -1px 0 0 rgba(255,214,130,.05),
    inset 0 0 18px rgba(0,0,0,.32) !important;
}
/* filete de ouro interno do relicario: moldura dentro da moldura, 3px pra dentro (radius 10-3=7) */
#Themeboxes .Themebox::before{
  content:"" !important;position:absolute !important;
  top:3px !important;left:3px !important;right:3px !important;bottom:3px !important;
  border:1px solid rgba(184,145,46,.24) !important;
  border-top-color:rgba(230,194,90,.38) !important;
  border-radius:7px !important;
  pointer-events:none !important;z-index:3 !important;
}

/* --- 2. HEADER: affordance SEM setinha = fio da soleira (::before) + header que acende.
   Estados do fio: ABERTO = ouro aceso / FECHADO = cor de brasa (fogo guardado) /
   HOVER = engrossa 1->2px + glow. O hover tambem sobe o brilho do header INTEIRO
   (filter no pai clareia titulo + os 2 escudos + o fio de uma vez) + bloom no titulo.
   Os TRES boxes sao colapsaveis (layout.php:249 binda o Topbar tambem, aberto por padrao).
   Troca brasa<->ouro e corte seco proposital: gradiente nao interpola, e coincide com o colapso.
   Sem JS (.dmd-collapsible ausente) degrada bem: fio de ouro estatico, sem hover. --- */
#Themeboxes .dmd-rhd{
  filter:brightness(1) !important;
  background-color:rgba(255,196,96,0) !important;
  transition:filter .18s ease, background-color .18s ease !important;
}
#Themeboxes .dmd-rhd .topleveltext{
  text-shadow:0 1px 1px rgba(0,0,0,.8), 0 0 8px rgba(240,190,80,.24) !important;
  transition:color .18s ease, text-shadow .18s ease !important;
}
#Themeboxes .dmd-rhd::before{
  content:"" !important;position:absolute !important;
  left:34px !important;right:34px !important;bottom:0 !important;
  height:1px !important;border-radius:1px !important;
  background:linear-gradient(90deg, rgba(230,194,90,0) 0%, rgba(230,194,90,.55) 18%, #ffd98a 50%, rgba(230,194,90,.55) 82%, rgba(230,194,90,0) 100%) !important;
  opacity:.9 !important;
  filter:drop-shadow(0 0 2px rgba(240,190,80,.22)) !important;
  transition:opacity .2s ease, height .2s ease, filter .22s ease !important;
  pointer-events:none !important;
}
#Themeboxes .dmd-collapsible:not(.dmd-open) .dmd-rhd::before{
  background:linear-gradient(90deg, rgba(192,81,42,0) 0%, rgba(192,81,42,.6) 20%, #e08a4a 50%, rgba(192,81,42,.6) 80%, rgba(192,81,42,0) 100%) !important;
  opacity:.75 !important;
  filter:drop-shadow(0 0 3px rgba(214,98,34,.28)) !important;
}
#Themeboxes .dmd-collapsible .dmd-rhd:hover{
  filter:brightness(1.14) !important;
  background-color:rgba(255,196,96,.045) !important;
}
#Themeboxes .dmd-collapsible .dmd-rhd:hover::before{
  opacity:1 !important;height:2px !important;
  filter:drop-shadow(0 0 4px rgba(255,200,90,.55)) !important;
}
#Themeboxes .dmd-collapsible:not(.dmd-open) .dmd-rhd:hover::before{
  filter:drop-shadow(0 0 5px rgba(224,122,58,.6)) !important;
}
#Themeboxes .dmd-collapsible .dmd-rhd:hover .topleveltext{
  color:#ffd98a !important;
  text-shadow:0 1px 1px rgba(0,0,0,.8), 0 0 11px rgba(255,205,100,.5), 0 0 24px rgba(255,190,80,.22) !important;
}
#Themeboxes .dmd-collapsible .dmd-rhd:active{filter:brightness(.94) !important}

/* --- 3. LINHAS: sulco gravado (linha escura + fio de luz estatico logo abaixo);
   hover que convida: desliza 2px + lamina de luz com sliver dourado na esquerda.
   A luz e um ::before absolute (fora do fluxo flex) animando SO opacity, z-index:-1
   dentro do stacking context da linha (nunca cobre texto/medalha).
   left/right:-3px (NAO -5px): o filete interno do cofre passa em x=3-4px do box e
   a lamina em -5px cairia em cima dele. --- */
#Themeboxes .dmd-rank{
  position:relative !important;z-index:0 !important;
  border-bottom:1px solid rgba(0,0,0,.4) !important;
  box-shadow:0 1px 0 rgba(255,214,130,.06) !important;
  transform:translateX(0) !important;
  transition:transform .16s ease !important;
}
#Themeboxes .dmd-rank:last-of-type{border-bottom:none !important;box-shadow:none !important}
#Themeboxes .dmd-rank::before{
  content:"" !important;position:absolute !important;z-index:-1 !important;
  top:0 !important;bottom:0 !important;left:-3px !important;right:-3px !important;
  border-radius:5px !important;
  background:
    linear-gradient(180deg, rgba(255,217,138,0) 10%, rgba(255,217,138,.7) 50%, rgba(255,217,138,0) 90%) 0 0/2px 100% no-repeat,
    linear-gradient(90deg, rgba(255,200,100,.10) 0%, rgba(255,200,100,.04) 42%, rgba(255,200,100,0) 78%) !important;
  opacity:0 !important;transition:opacity .18s ease !important;pointer-events:none !important;
}
#Themeboxes .dmd-rank:hover{transform:translateX(2px) !important}
#Themeboxes .dmd-rank:hover::before{opacity:1 !important}
#Themeboxes .dmd-rank .dmd-nm{transition:color .15s ease, text-shadow .15s ease !important}
#Themeboxes .dmd-rank:hover .dmd-nm{color:#ffe6ac !important;text-shadow:0 0 8px rgba(240,190,80,.3) !important}
#Themeboxes .dmd-rank .dmd-val{transition:color .15s ease !important}
#Themeboxes .dmd-rank:hover .dmd-val{color:#a8946a !important}
#Themeboxes .dmd-rank .dmd-medal{transition:filter .15s ease !important}
#Themeboxes .dmd-rank:hover .dmd-medal{filter:brightness(1.07) !important}

/* --- 4. MEDALHAS cunhadas: hotspot especular de moeda batida (32%/24%) sobre metal;
   top-1 = aro CRAVADO (filete de ouro + assento escuro) + halo PARADO.
   Seletores COMPOSTOS (.dmd-medal.dmd-mN, 1-2-0) vencem o bloco legado
   (#Themeboxes .dmd-mN, 1-1-0) por especificidade - independente de ordem.
   Prata/bronze mantem o box-shadow padrao da linha ~5155 (hierarquia). --- */
#Themeboxes .dmd-medal.dmd-m1{
  border-color:rgba(80,50,5,.8) !important;
  background:
    radial-gradient(120% 70% at 32% 24%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 52%),
    linear-gradient(180deg,#ffe98f 0%,#f6c23a 46%,#d99c16 78%,#bd820e 100%) !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,.55),
    0 0 0 1px rgba(230,194,90,.7),
    0 0 0 2px rgba(20,13,8,.65),
    0 0 9px rgba(255,190,70,.42),
    inset 0 1px 1px rgba(255,255,255,.65),
    inset 0 -2px 3px rgba(0,0,0,.22) !important;
}
#Themeboxes .dmd-medal.dmd-m2{
  background:
    radial-gradient(120% 70% at 32% 24%, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(180deg,#fbfcfe 0%,#ccd2dc 52%,#939cab 100%) !important;
}
#Themeboxes .dmd-medal.dmd-m3{
  background:
    radial-gradient(120% 70% at 32% 24%, rgba(255,240,225,.5) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(180deg,#f2ba84 0%,#cb8140 52%,#8f5119 100%) !important;
}

/* --- 5. RODAPE: soleira gravada (linha escura + fio de luz) + placas de metal cunhado.
   Placa cravada: assento escuro de 1px (0 0 0 1px) em volta da borda biselada, linha de
   usinagem no meio do metal (parada dupla 44/52%), texto letterpress.
   Hover: levanta 1px + brilho via FILTER (o glow legado das linhas ~5100/5102, 0-2-0,
   perde para esta base 1-1-0 por ID - box-shadow nunca e transicionado).
   :active afunda (inset, corte seco) e FICA POR ULTIMO: empata 1-2-0 com a base
   .dmd-frag e precisa vencer por ordem no arquivo. --- */
#Themeboxes .dmd-rft{
  display:flex !important;gap:7px !important;
  margin:2px 6px 0 !important;
  padding:5px 4px 6px !important; /* geometria ~igual a antiga (14px verticais) - ressalva do dono: mesma altura */
  border-top:1px solid rgba(0,0,0,.45) !important;
  box-shadow:inset 0 1px 0 rgba(184,145,46,.12) !important;
}
#Themeboxes .dmd-rbtn{
  flex:1 1 0 !important;position:static !important;width:auto !important;height:auto !important;
  text-align:center !important;text-decoration:none !important;
  padding:6px 0 5px !important; /* 23px de alvo (era 22) - unico +1px, ajuda o toque */
  font-family:Verdana,sans-serif !important;font-size:10px !important;font-weight:bold !important;
  line-height:1 !important;letter-spacing:1.1px !important;
  text-shadow:0 1px 1px rgba(0,0,0,.78) !important;
  border:1px solid #7a5a1e !important;
  border-top-color:#8a6826 !important;border-bottom-color:#5e4414 !important;
  border-radius:6px !important;
  background:
    radial-gradient(95% 130% at 50% -12%, rgba(255,214,130,.14) 0%, rgba(255,214,130,0) 55%),
    linear-gradient(180deg,#4a3620 0%,#382817 44%,#251a0d 52%,#2c1e10 100%) !important;
  box-shadow:
    0 2px 3px rgba(0,0,0,.5),
    0 0 0 1px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,217,138,.22),
    inset 0 -2px 3px rgba(0,0,0,.4) !important;
  transform:translateY(0) !important;
  transition:color .15s ease, border-color .15s ease, transform .12s ease, filter .15s ease !important;
}
#Themeboxes .dmd-rbtn:hover{
  color:#ffd98a !important;
  border-color:#b8912e !important;
  border-top-color:#c9a344 !important;border-bottom-color:#8a6826 !important;
  transform:translateY(-1px) !important;
  filter:brightness(1.1) drop-shadow(0 0 5px rgba(240,190,80,.32)) !important;
}
#Themeboxes .dmd-rbtn.dmd-frag{
  border-color:#7a3a1e !important;
  border-top-color:#8f4a24 !important;border-bottom-color:#5c2a12 !important;
  background:
    radial-gradient(95% 130% at 50% -12%, rgba(255,160,120,.12) 0%, rgba(255,160,120,0) 55%),
    linear-gradient(180deg,#4a2416 0%,#361a10 44%,#23100a 52%,#2a150c 100%) !important;
  box-shadow:
    0 2px 3px rgba(0,0,0,.5),
    0 0 0 1px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,170,130,.18),
    inset 0 -2px 3px rgba(0,0,0,.4) !important;
}
#Themeboxes .dmd-rbtn.dmd-frag:hover{
  color:#ffb199 !important;
  border-color:#c0512a !important;
  border-top-color:#d06a3a !important;border-bottom-color:#8f4a24 !important;
  filter:brightness(1.1) drop-shadow(0 0 5px rgba(220,90,50,.38)) !important;
}
#Themeboxes .dmd-rbtn:active{
  transform:translateY(0) !important;
  filter:brightness(.95) !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,.5),
    0 0 0 1px rgba(0,0,0,.5),
    inset 0 2px 4px rgba(0,0,0,.55) !important;
}

/* --- 6. Teclado + movimento reduzido --- */
#Themeboxes .dmd-rank:focus-visible{outline:1px solid #b8912e !important;outline-offset:-1px !important}
#Themeboxes .dmd-rbtn:focus-visible{outline:1px solid #b8912e !important;outline-offset:1px !important}
@media (prefers-reduced-motion:reduce){
  #Themeboxes .dmd-rhd,
  #Themeboxes .dmd-rhd::before,
  #Themeboxes .dmd-rhd .topleveltext,
  #Themeboxes .dmd-rank,
  #Themeboxes .dmd-rank::before,
  #Themeboxes .dmd-rank .dmd-nm,
  #Themeboxes .dmd-rank .dmd-val,
  #Themeboxes .dmd-rank .dmd-medal,
  #Themeboxes .dmd-rbtn{transition:none !important}
  #Themeboxes .dmd-rank:hover{transform:none !important}
  #Themeboxes .dmd-rbtn:hover{transform:none !important}
}
/* ==== DMD RANKING "RELICARIO CUNHADO" - END ==== */
/* ==================================================================
   DMD TRONO & COFRE v2 (fusao Throne&Vault + Ourivesaria) - BEGIN
   Escopo: #Themeboxes #warcastle / #warcastle24 / #quoteBox e filhos.
   Colar DEPOIS de "==== DMD RIGHT COLUMN - END ====" (~linha 5159).
   Especificidade 2 IDs + !important: vence o bloco DMD antigo (1 ID),
   os estilos inline do layout.php e o vazamento do characters.php.
   Reverter = apagar este bloco inteiro.
   ================================================================== */

/* ---------- 1. MOLDURA COMUM: brasa em 4 camadas + bisel cunhado ----------
   background em LONGHANDS (trap 1): color = fallback, image = luz zenital
   dourada + brasa vermelha no rodape + vertical de 4 paradas. */
#Themeboxes #warcastle,
#Themeboxes #warcastle24,
#Themeboxes #quoteBox{
  position:relative !important; top:auto !important; left:auto !important;
  display:block !important; width:auto !important; height:auto !important; min-height:0 !important;
  margin:0 auto 12px !important; padding:0 0 10px !important;
  overflow:hidden !important; box-sizing:border-box !important;
  text-align:center !important; cursor:auto !important;
  background-color:#140d08 !important;
  background-image:
    radial-gradient(130% 100% at 50% -25%, rgba(255,214,122,.10) 0%, rgba(255,214,122,0) 55%),
    radial-gradient(140% 90% at 50% 120%, rgba(214,34,34,.10) 0%, rgba(214,34,34,0) 58%),
    linear-gradient(180deg,#42301a 0%,#2a1c12 32%,#1c1108 66%,#140d08 100%) !important;
  border:1px solid #7a5a1e !important;
  border-radius:10px !important;
  box-shadow:
    0 8px 20px rgba(0,0,0,.55),
    0 1px 0 rgba(255,214,122,.05),
    inset 0 1px 0 rgba(255,214,122,.16),
    inset 0 0 0 1px rgba(184,145,46,.14),
    inset 0 -2px 6px rgba(0,0,0,.5),
    inset 0 0 26px rgba(0,0,0,.32) !important;
  font-family:Verdana,Arial,sans-serif !important;
  transition:border-color .18s ease !important;
}
#Themeboxes #warcastle:hover,
#Themeboxes #warcastle24:hover,
#Themeboxes #quoteBox:hover{ border-color:#b8912e !important; }

/* quoteBox vira coluna flex: filhos entram no fluxo por `order`
   (mata o layout absoluto de coordenadas fixas do inline) */
#Themeboxes #quoteBox{
  display:flex !important; flex-direction:column !important;
  align-items:stretch !important; padding:0 !important;
}

/* aposenta enfeites-imagem legados (coroas gif, effect_bg, rodape) */
#Themeboxes #warcastle > div[style*="crown"],
#Themeboxes #warcastle > div[style*="effect_bg"],
#Themeboxes #warcastle24 > div[style*="crown"],
#Themeboxes #warcastle24 > div[style*="effect_bg"],
#Themeboxes #quoteBox > div[style*="effect_bg"],
#Themeboxes #warcastle .Bottom,
#Themeboxes #warcastle24 .Bottom{ display:none !important; }

/* ---------- 2. HEADER-BRASAO: placa cunhada + fio de ouro ----------
   LONGHANDS de fonte (o .topleveltext base usa `font:` shorthand - trap 2)
   e LONGHANDS de borda (o shorthand `border:` resetaria o border-image). */
#Themeboxes #warcastle .topleveltext,
#Themeboxes #warcastle24 .topleveltext,
#Themeboxes #quoteBox .topleveltext{
  position:relative !important; z-index:2 !important; display:block !important;
  top:auto !important; left:auto !important; width:auto !important; height:auto !important;
  margin:0 !important; padding:9px 30px 8px !important; box-sizing:border-box !important;
  text-align:center !important; white-space:nowrap !important; line-height:1.2 !important;
  font-family:Georgia,'Times New Roman',serif !important;
  font-size:13px !important; font-weight:bold !important; letter-spacing:.4px !important;
  color:#f2d17e !important;
  text-shadow:0 1px 2px rgba(0,0,0,.8), 0 0 10px rgba(240,190,80,.28) !important;
  background-color:transparent !important;
  background-image:linear-gradient(180deg,#42301a 0%,#241708 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,217,138,.18), inset 0 -6px 9px rgba(0,0,0,.28) !important;
  border-width:0 0 1px !important;
  border-style:solid !important;
  border-color:transparent !important;
  border-image:linear-gradient(90deg, rgba(184,145,46,0) 4%, rgba(184,145,46,.7) 26%, #e6c25a 50%, rgba(184,145,46,.7) 74%, rgba(184,145,46,0) 96%) 1 !important;
  cursor:default !important;
  -ms-user-select:none !important; user-select:none !important;
}
#Themeboxes #quoteBox .topleveltext{ order:-1 !important; }

/* coroas CUNHADAS nas pontas do header dos castelos
   (sobrescreve as coroas-texto do bloco antigo, linhas ~5111-5112) */
#Themeboxes #warcastle .topleveltext::before,
#Themeboxes #warcastle .topleveltext::after,
#Themeboxes #warcastle24 .topleveltext::before,
#Themeboxes #warcastle24 .topleveltext::after{
  content:'\265B' !important;
  position:absolute !important; top:50% !important; transform:translateY(-54%) !important;
  font-family:Georgia,serif !important; font-size:12px !important;
  font-weight:normal !important; line-height:1 !important;
  color:#e6c25a !important;
  text-shadow:0 1px 1px rgba(0,0,0,.85), 0 0 6px rgba(240,190,80,.35) !important;
  opacity:.95 !important; pointer-events:none !important;
}
#Themeboxes #warcastle .topleveltext::before,
#Themeboxes #warcastle24 .topleveltext::before{ left:12px !important; right:auto !important; }
#Themeboxes #warcastle .topleveltext::after,
#Themeboxes #warcastle24 .topleveltext::after{ right:12px !important; left:auto !important; }

/* discos-moeda cunhados no header do DemolidoresCoin (mesma gramatica) */
#Themeboxes #quoteBox .topleveltext::before,
#Themeboxes #quoteBox .topleveltext::after{
  content:'' !important;
  position:absolute !important; top:50% !important; transform:translateY(-50%) !important;
  width:11px !important; height:11px !important; border-radius:50% !important;
  background-image:radial-gradient(circle at 35% 28%, #ffe9ad 0%, #f0cf6a 32%, #e6c25a 48%, #b8912e 68%, #6b4d0e 100%) !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,.65),
    0 0 5px rgba(240,190,80,.22),
    inset 0 1px 1px rgba(255,255,255,.5),
    inset 0 -1px 2px rgba(0,0,0,.4) !important;
  pointer-events:none !important;
}
#Themeboxes #quoteBox .topleveltext::before{ left:14px !important; right:auto !important; }
#Themeboxes #quoteBox .topleveltext::after{ right:14px !important; left:auto !important; }
/* [DMD] centralizacao FINA do titulo DemolidoresCoin: com 30px de padding o texto
   (~124px) estourava o content-box (~118px) e o navegador o encostava -> ficava
   ~2.8px pra direita. Padding 22px faz o texto CABER e o text-align:center
   centralizar de verdade (medido ao vivo: desloc 2.84px -> 0.00). O inicio do texto
   fica em ~27px, ainda limpando os discos-moeda (que terminam em 25px). So no quoteBox. */
#Themeboxes #quoteBox .topleveltext{ padding-left:22px !important; padding-right:22px !important; }

/* ---------- 3. CASTELOS: trono / brasao ---------- */
#Themeboxes #castlewar,
#Themeboxes #castlewar24{
  position:static !important; top:auto !important; left:auto !important;
  width:auto !important; max-width:100% !important;
  margin:9px auto 0 !important; padding:0 !important;
  text-align:center !important; text-shadow:none !important;
  font-family:Verdana,Arial,sans-serif !important;
}
#Themeboxes #castlewar a,
#Themeboxes #castlewar24 a{ text-decoration:none !important; }

/* relicario do emblema: camara escura + duplo filete de ouro + halo de brasa */
#Themeboxes #castlewar a > img,
#Themeboxes #castlewar24 a > img{
  display:block !important; width:56px !important; height:56px !important;
  margin:0 auto !important; padding:4px !important; box-sizing:content-box !important;
  background-color:#140d08 !important;
  background-image:radial-gradient(circle at 50% 38%, #42301a 0%, #241708 55%, #0d0803 100%) !important;
  border:1px solid rgba(122,90,30,.9) !important; border-radius:8px !important;
  box-shadow:
    0 0 0 1px #140d08,
    0 0 0 2px #b8912e,
    0 0 0 3px rgba(122,90,30,.45),
    0 6px 14px rgba(0,0,0,.6),
    0 0 18px rgba(240,160,70,.14),
    inset 0 1px 2px rgba(255,217,138,.28),
    inset 0 -2px 5px rgba(0,0,0,.7) !important;
  transition:transform .18s ease, filter .18s ease !important;
}
/* hover via transform/filter: nao colide com o box-shadow !important (trap 3) */
#Themeboxes #castlewar a:hover > img,
#Themeboxes #castlewar24 a:hover > img{
  transform:translateY(-1px);
  filter:brightness(1.08) drop-shadow(0 0 6px rgba(255,190,90,.25));
}

/* nome da guild: Georgia ouro-vivo, dono da hierarquia (nome > tempo) */
#Themeboxes #castlewar a > div,
#Themeboxes #castlewar24 a > div{
  max-width:168px !important; margin:8px auto 0 !important;
  font-family:Georgia,'Times New Roman',serif !important;
  font-size:14px !important; font-weight:bold !important; letter-spacing:.3px !important;
  line-height:1.25 !important;
  color:#ffd98a !important;
  text-shadow:0 1px 2px rgba(0,0,0,.85), 0 0 9px rgba(240,190,80,.22) !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
  transition:text-shadow .15s ease !important;
}
#Themeboxes #castlewar a:hover > div,
#Themeboxes #castlewar24 a:hover > div{
  text-shadow:0 1px 2px rgba(0,0,0,.85), 0 0 13px rgba(240,190,80,.45) !important;
}

/* horario da guerra: micro-selo gravado (rebaixado, caps apagado, acende no hover) */
#Themeboxes #warcastle a[href*="castlevote"]{
  display:inline-block !important; margin-top:6px !important; padding:4px 10px !important;
  font-family:Verdana,Geneva,sans-serif !important;
  font-size:8.5px !important; font-weight:bold !important; line-height:1.2 !important;
  letter-spacing:1.1px !important; text-transform:uppercase !important;
  font-variant-numeric:tabular-nums !important;
  color:#93805a !important; text-decoration:none !important;
  text-shadow:0 1px 1px rgba(0,0,0,.8) !important;
  background-color:transparent !important;
  background-image:linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.2)) !important;
  border:1px solid rgba(122,90,30,.55) !important; border-radius:6px !important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.65), 0 1px 0 rgba(255,217,138,.07) !important;
  transition:color .15s ease, border-color .15s ease !important;
}
#Themeboxes #warcastle a[href*="castlevote"]:hover{
  color:#ffd98a !important; border-color:#b8912e !important;
}

/* ---------- 4. QUOTEBOX: cofre / camara de cambio ---------- */
/* moeda DMC cunhada: face de ouro + serrilha conic + legenda em baixo-relevo.
   background-image declarado 2x: a 1a e fallback caso repeating-conic nao exista. */
#Themeboxes #quoteBox::before{
  content:'DMC' !important; order:0 !important; align-self:center !important; /* 38px: presenca sem roubar a cena */
  flex:0 0 auto !important;
  width:38px !important; height:38px !important; border-radius:50% !important;
  margin:9px 0 0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-family:Georgia,'Times New Roman',serif !important;
  font-size:9.5px !important; font-weight:bold !important; line-height:1 !important;
  letter-spacing:.5px !important;
  color:rgba(74,49,10,.95) !important;
  text-shadow:0 1px 0 rgba(255,235,190,.55) !important;
  background-image:radial-gradient(circle at 32% 28%, #ffe5aa 0%, #ffd98a 24%, #e6c25a 48%, #b8912e 72%, #7a5a1e 100%) !important;
  background-image:
    radial-gradient(circle at 32% 28%, #ffe5aa 0%, #ffd98a 24%, #e6c25a 48%, #b8912e 72%, rgba(122,90,30,.85) 84%, rgba(122,90,30,0) 90%),
    repeating-conic-gradient(#b8912e 0deg 8deg, #7a5a1e 8deg 16deg) !important;
  box-shadow:
    0 0 0 1px rgba(58,40,10,.9),
    0 4px 9px rgba(0,0,0,.55),
    inset 0 1px 1px rgba(255,255,255,.4),
    inset 0 -2px 3px rgba(58,40,10,.5) !important;
  animation:dmdCoinEmber 5.5s ease-in-out infinite;
  /* keyframes animam FILTER, que NAO e declarado nesta regra (trap 3 ok) */
}

/* guiche da cotacao, linha 1 (hero): janela rebaixada, ouro vivo QUENTE, sem neon */
#Themeboxes #quoteBox #cryptoQuote{display:none !important}

/* linha 2 do ledger: paridade inversa, apagada, celula emendada por fio de ouro */
#Themeboxes #quoteBox #usdtQuote{display:none !important}
/* par de ledger: fio de ouro + micro-rotulo caps (texto "1 DMC = 1 Premium Point") */
#Themeboxes #quoteBox #points{display:none !important}

/* multiplicador de points: selo de metal ("Cotacao atual: Points Nx") */
#Themeboxes #quoteBox #pointsQuote{
  order:1 !important; position:static !important; top:auto !important; left:auto !important;
  display:block !important; width:auto !important;
  margin:8px 10px 0 !important; padding:2px 0 3px !important;
  background-color:transparent !important; background-image:none !important;
  border:0 !important; box-shadow:none !important;
  text-align:center !important; white-space:nowrap !important; overflow:hidden !important;
  font-family:Verdana,Geneva,sans-serif !important;
  font-size:10px !important; font-weight:bold !important; line-height:1.25 !important;
  color:#93805a !important; text-shadow:0 1px 1px rgba(0,0,0,.7) !important;
}
#Themeboxes #quoteBox #pointsQuote .dmd-qlbl{
  display:block !important; margin:0 0 4px !important;
  font-size:8px !important; font-weight:bold !important; line-height:1 !important;
  letter-spacing:2.2px !important; color:#93805a !important;
  text-shadow:0 1px 1px rgba(0,0,0,.7) !important;
}

#Themeboxes #quoteBox #pointsQuote .dmd-qbig{
  display:block !important;
  font-family:Georgia,'Times New Roman',serif !important;
  font-size:13px !important; font-weight:bold !important; line-height:1.05 !important;
  color:#f2d17e !important; letter-spacing:.4px !important;
  text-shadow:0 1px 2px rgba(0,0,0,.85) !important;
}
#Themeboxes #quoteBox #pointsQuote .dmd-qbig b{
  display:inline-block !important; margin-left:5px !important;
  font-size:22px !important; font-weight:bold !important; line-height:1 !important;
  color:#ffd98a !important; vertical-align:-2px !important;
  font-variant-numeric:tabular-nums !important;
  text-shadow:0 0 1px rgba(255,244,214,.8), 0 0 9px rgba(255,180,60,.38), 0 2px 3px rgba(0,0,0,.8) !important;
}
/* wrapper do botao: [style*="text-align"] desambigua do enfeite effect_bg
   que tambem tem top:140px no inline */
#Themeboxes #quoteBox > div[style*="top:140"][style*="text-align"]{
  order:5 !important; position:static !important; top:auto !important; left:auto !important;
  width:auto !important; margin:10px 12px 12px !important;
}
/* placa Trade Now: ouro cunhado em 4 paradas + bisel (radius 6 = escala aprovada) */
#Themeboxes #quoteBox button{
  display:block !important; width:100% !important; margin:0 !important;
  padding:8px 0 !important; cursor:pointer !important;
  font-family:Verdana,Arial,sans-serif !important;
  font-size:11px !important; font-weight:bold !important;
  letter-spacing:1.5px !important; text-transform:uppercase !important; line-height:1.2 !important;
  color:#221305 !important;
  background-color:#c49a24 !important;
  background-image:linear-gradient(180deg,#f6d97e 0%,#e6b93e 38%,#c49a24 64%,#9a7414 100%) !important;
  border:1px solid #f0cf6a !important; border-bottom-color:#7a5a1e !important;
  border-radius:6px !important;
  box-shadow:
    0 3px 8px rgba(0,0,0,.5),
    0 0 0 1px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 3px rgba(0,0,0,.22) !important;
  text-shadow:0 1px 0 rgba(255,236,170,.55) !important;
  transition:filter .15s ease, transform .1s ease !important;
}
#Themeboxes #quoteBox button:hover{ filter:brightness(1.07) saturate(1.04); }
#Themeboxes #quoteBox button:active{ transform:translateY(1px); filter:brightness(.96); }
#Themeboxes #quoteBox button strong{ font-weight:bold !important; letter-spacing:inherit !important; }

/* brilho de vidro varrendo o cofre a cada 10s - vivo e discreto.
   Pseudo SEM !important e em LONGHANDS de background: e o que permite a
   animacao de background-position (traps 1/3). Nenhuma outra regra do site
   toca #quoteBox::after - manter assim. */
#Themeboxes #quoteBox::after{
  content:''; position:absolute; left:0; right:0; top:0; bottom:0;
  border-radius:10px; pointer-events:none; z-index:3;
  background-image:linear-gradient(105deg, rgba(255,214,122,0) 44%, rgba(255,214,122,.07) 50%, rgba(255,214,122,0) 56%);
  background-size:240% 100%;
  background-repeat:no-repeat;
  background-position:120% 0;
  animation:dmdVaultSheen 10s ease-in-out infinite;
}
@keyframes dmdVaultSheen{
  0%,62%   { background-position:120% 0; }
  86%,100% { background-position:-20% 0; }
}
@keyframes dmdCoinEmber{
  0%,100%{ filter:drop-shadow(0 0 2px rgba(255,190,90,.12)); }
  50%    { filter:drop-shadow(0 0 7px rgba(255,190,90,.38)); }
}
@media (prefers-reduced-motion:reduce){
  #Themeboxes #quoteBox::after{ animation:none; background-image:none; }
  #Themeboxes #quoteBox::before{ animation:none; }
}
/* ==== DMD TRONO & COFRE v2 - END ==== */
/* ==== DMD CHARACTERS ATLAS (pagina de personagem "Atlas do Heroi") - BEGIN - remover p/ reverter ====
   Consolida os 11 blocos <style> que viviam no BODY de pages/characters.php (fonte historica de
   vazamento p/ a coluna direita e de conflito com a Verga v2). A partir daqui a pagina emite so
   markup; TODO o visual dela mora neste bloco. Seletores dmd-/dmdg- sao exclusivos da pagina;
   os genericos (progress, input, a.equipment) estao escopados em .Content (o miolo central -
   #Themeboxes fica fora de .Content, entao nada vaza pra coluna direita).
   ARMADILHAS respeitadas: zero shorthand font:; background em shorthand so onde nada anima;
   nenhuma animacao ociosa (movimento so em hover); tudo com fallback legivel. */

/* ---------- tokens de tinta sobre pergaminho (papel unico p/ cada cor) ---------- */
/* pergaminho: p0 #efdfba (celula) | p1 #e7d6ae (faixa) | p2 #d8c7a0 (trilho) | p3 #c9b78d (fundo caixa v2)
   tinta #2e1d0a (valor) | rotulo #7c6535 | apagado #93805a | ouro-link #8a5a10
   semanticas: verde-tinta #1e7a37 | rubi #8a2a2a | aco #2b4f9a */

/* ---------- progress (Tasks/Quests) — antes: seletor global vazando ---------- */
.Content progress{height:16px;border-radius:6px;-webkit-appearance:none;appearance:none;border:none}
.Content progress::-webkit-progress-bar{background:#d8c7a0;border:1px solid #b08d3f;border-radius:6px;box-shadow:inset 0 1px 3px rgba(0,0,0,.22);padding:0}
.Content progress::-webkit-progress-value{background:linear-gradient(180deg,#5bd06e,#2f9e47);border-radius:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.Content progress::-moz-progress-bar{background:linear-gradient(180deg,#5bd06e,#2f9e47);border-radius:6px}

/* ---------- barras de task ---------- */
.Content .task-progress-bar{width:100%;height:16px;background:#d8c7a0;border:1px solid #b08d3f;border-radius:6px;box-shadow:inset 0 1px 3px rgba(0,0,0,.22);overflow:hidden}
.Content .task-progress-bar-inner{height:100%;border-radius:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35);transition:width .3s ease}
.Content .task-progress-bar-inner.completed{background:linear-gradient(180deg,#5bd06e,#2f9e47)}
.Content .task-progress-bar-inner.in-progress{background:linear-gradient(180deg,#f0c04a,#c89a2e)}
.Content .task-progress-bar-inner.not-started{background:#c9b78d}

/* ---------- botoes da pagina ---------- */
.Content .dmd-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:Verdana,Arial,sans-serif;font-size:12px;font-weight:bold;color:#3a2600 !important;padding:6px 20px;border:1px solid #a07d1e;border-top-color:#f0cf6a;border-bottom-color:#7a5a1e;border-radius:6px;cursor:pointer;background:linear-gradient(180deg,#f2cf6a,#c89a2e);box-shadow:0 2px 5px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.5);text-shadow:0 1px 0 rgba(255,255,255,.35);transition:filter .12s, transform .12s;letter-spacing:.3px;line-height:1.3}
.Content .dmd-btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.Content .dmd-btn:active{transform:translateY(1px);filter:brightness(.96)}
.Content .dmd-showbtn{display:inline-flex;align-items:center;gap:3px;font-family:Verdana,Arial,sans-serif;font-size:10px;font-weight:bold;color:#5a3d00;background:linear-gradient(180deg,#f6dd8e,#d8b24a);border:1px solid #b8912e;border-top-color:#f0cf6a;border-bottom-color:#8a6a22;border-radius:6px;padding:3px 11px;cursor:pointer;user-select:none;box-shadow:0 1px 2px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.55);text-shadow:0 1px 0 rgba(255,255,255,.35);vertical-align:middle;transition:filter .12s, transform .12s}
.Content .dmd-showbtn:hover{filter:brightness(1.06);transform:translateY(-1px)}

/* ---------- campo de busca (as 3 copias ganham a mesma pele) ---------- */
.Content input[name="name"]{background:#efdfba;border:1px solid #b8912e;border-radius:6px;padding:6px 10px;color:#2e1d0a;font-family:Verdana,Arial,sans-serif;font-size:11px}
.Content input[name="name"]:focus{outline:none;border-color:#e6c25a;box-shadow:0 0 0 2px rgba(255,217,138,.35), inset 0 1px 2px rgba(0,0,0,.12)}

/* ---------- tooltip de equipamento — sai o "WoW cinza", entra o painel de brasa ---------- */
.Content a.equipment{border:none;cursor:help}
.Content a.equipment img{border:none}
.Content a.equipment span{visibility:hidden;display:none}
.Content a.equipment:hover{position:relative;text-decoration:none}
.Content a:hover.equipment span{position:absolute;left:.25em;top:1.25em;z-index:150;display:block;width:185px;padding:7px 6px;text-align:center;font-family:Verdana,sans-serif;font-weight:400;text-decoration:none;background:linear-gradient(180deg,#2a1c12,#160d07);border:1px solid #7a5a1e;border-top-color:#b8912e;border-radius:6px;box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 8px 18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,217,138,.15);opacity:.98}
.Content #equipment .EquipTitleNormal{font-size:12px;color:#e8d9b0}
.Content #equipment .EquipTitleMagical{font-size:12px;color:#9fc3e8}
.Content #equipment .EquipTitleDonation{font-size:12px;font-weight:700;color:#ffd98a}
.Content #equipment .EquipText{font-size:10px;color:#d8c7a0}
.Content #equipment a:hover span,.Content #equipment a:active span,.Content #equipment a:focus span{visibility:visible}
.Content #equipment a:hover,.Content #equipment a:focus{visibility:visible}

/* ---------- scrollbar do historico (antes: div::-webkit-scrollbar GLOBAL) ---------- */
.Content .dmd-scroll::-webkit-scrollbar{width:8px}
.Content .dmd-scroll::-webkit-scrollbar-track{background:#eaddbf;border-radius:4px}
.Content .dmd-scroll::-webkit-scrollbar-thumb{background:#b08d3f;border-radius:4px}
.Content .dmd-scroll::-webkit-scrollbar-thumb:hover{background:#8a6a2e}

/* =================== 1 · CAPA (card-heroi escuro em ouro cunhado) =================== */
.dmd-hero{position:relative;display:flex;align-items:center;gap:13px;padding:13px 14px 12px;font-family:Verdana,Arial,sans-serif;border:2px solid #b8912e;border-radius:10px;background:radial-gradient(90% 70% at 50% -15%, rgba(255,244,210,.8), rgba(255,244,210,0) 60%),linear-gradient(180deg,#efdfba 0%,#e2d0a6 60%,#d4c094 100%);box-shadow:0 0 0 1px #8a6a22, 0 8px 18px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.55), inset 0 0 0 3px rgba(184,145,46,.28)} /* A3 pergaminho nobre: moldura dupla, zero carvao */
.dmd-hero-banners{padding-right:150px}
@keyframes dmdFade{from{opacity:0}to{opacity:1}}
.dmd-ava{position:relative;box-sizing:border-box;width:62px;height:62px;flex:0 0 auto;border-radius:50%;background:radial-gradient(circle at 34% 26%,#e8d8b0,#b39a6a);border:2px solid #c6a24a;box-shadow:0 1px 3px rgba(0,0,0,.22), inset 0 0 4px rgba(0,0,0,.14);display:flex;align-items:center;justify-content:center;overflow:hidden}
/* status escrito (misto): legenda sob o avatar + sufixo na linha da vocacao */
.dmd-avwrap{display:flex;flex-direction:column;align-items:center;gap:5px;flex:0 0 auto}
.dmd-avst{font-family:Verdana,Arial,sans-serif;font-weight:bold;font-size:8px;letter-spacing:.6px;text-transform:uppercase;display:inline-flex;align-items:center;gap:4px;margin-top:3px;padding:2px 9px;border-radius:9px;line-height:1.5}
.dmd-avst.on{color:#1c7a34;background:rgba(30,122,55,.12);box-shadow:inset 0 0 0 1px rgba(30,122,55,.28)}
.dmd-avst.on::before{content:'\25CF';font-size:8px;line-height:1}
.dmd-avst.off{color:#8a7a52;background:rgba(140,120,80,.14);box-shadow:inset 0 0 0 1px rgba(140,120,80,.3)}
.dmd-avst.off::before{content:'\25CB';font-size:8px;line-height:1}
.dmd-vsep{color:#b8a678;margin:0 1px}
.dmd-vst.on{color:#1e7a37;font-weight:bold}
.dmd-vst.off{color:#93805a}
.dmd-ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;z-index:1}
.dmd-ava-fb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:30px;line-height:1;z-index:0;text-shadow:0 1px 1px rgba(0,0,0,.15)}
.dmd-online{position:absolute;right:2px;bottom:2px;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#dfffe9,#4ade80 60%,#157a41);border:2px solid #150c05;z-index:2;box-shadow:0 0 6px rgba(74,222,128,.7)}
.dmd-id{flex:1;min-width:0}
.dmd-nm{font-family:Georgia,'Times New Roman',serif;font-size:21px;font-weight:bold;color:#4a2e08;text-shadow:0 1px 0 rgba(255,255,255,.55)}
.dmd-nm font{color:#4a2e08 !important}   /* o <font color> legado fica no markup; o ouro vence (status online = bolinha) */
.dmd-sex{vertical-align:middle;margin:0 2px 0 5px}
.dmd-vip{font-family:Georgia,'Times New Roman',serif;font-weight:bold;font-size:11px;letter-spacing:1.5px;color:#5a3d00;background:linear-gradient(to bottom,#ffe79a,#e0a400);border:1px solid #7a5a1e;border-radius:4px;padding:1px 7px;margin-left:5px;box-shadow:0 1px 2px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.5);text-shadow:0 1px 0 rgba(255,255,255,.4);vertical-align:middle}
.dmd-sub{font-size:11px;color:#7a6338;margin-top:3px}
.dmd-status{margin-top:5px;font-size:11px}
.dmd-badge{display:inline-block;font-weight:bold;color:#ffe6d8;padding:1px 8px;border-radius:4px;margin-right:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.5)}
.dmd-badge-ban{background:linear-gradient(180deg,#a03030,#6e1c1c);border:1px solid #c05050}
.dmd-badge-sale{background:linear-gradient(180deg,#3d6fc4,#274a86);border:1px solid #5a8ad8;text-decoration:none}
.dmd-rk{font-size:11px;margin-top:7px;color:#93805a;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.dmd-rk-lb{font-size:8px;font-weight:bold;letter-spacing:1.2px;text-transform:uppercase;color:#9a8354;margin-right:2px} /* contexto: e posicao em ranking, nao quantidade */
.dmd-rk a{font-weight:bold;text-decoration:none;color:#5a3d00 !important;font-size:9px;letter-spacing:.4px;text-transform:uppercase;background:linear-gradient(180deg,#f3e3b4,#e2ce98);border:1px solid #b8912e;border-radius:20px;padding:3px 10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.15);transition:border-color .15s, color .15s}
.dmd-rk a:hover{border-color:#8a6a22;color:#3a2600 !important}
/* strip de medalhoes (fora do card, mesma prancha) */
.dmd-strip{display:flex;gap:8px;margin-top:8px}
.dmd-cell{flex:1;text-align:center;padding:8px 3px 7px;border-radius:6px;border:1px solid #cdb884;border-top:2px solid #b8912e;background:#f6ecd0;box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 2px 4px rgba(0,0,0,.12);display:flex;flex-direction:column;gap:3px;transition:border-color .15s, box-shadow .15s}
.dmd-cell.dmd-clk2, .dmd-cell.dmd-hot{cursor:pointer}
.dmd-cell.dmd-clk2:hover, .dmd-cell.dmd-hot:hover{border-color:#8a6a22;box-shadow:inset 0 0 0 1px #e6c25a, 0 2px 4px rgba(0,0,0,.12)}
.dmd-cell .v{font-family:Georgia,'Times New Roman',serif;font-size:16px;font-weight:bold;color:#4a2e08;line-height:1;text-shadow:0 1px 0 rgba(255,255,255,.45)}
.dmd-cell .l{font-size:7.5px;color:#8a744a;text-transform:uppercase;letter-spacing:.5px;font-weight:bold}
.dmd-cell .l img{width:12px;vertical-align:middle}
.dmd-cell .s{font-size:8.5px;color:#9a7d3a}
/* RESETS = a metrica do servidor: medalhao-mestre do strip (maior, lavagem dourada, coroa) */
.dmd-cell.dmd-hot{flex:1.35;background:linear-gradient(180deg,#f9efd0,#eeddb0);border:1px solid #b8912e;border-top:3px solid #b8912e;box-shadow:inset 0 1px 0 rgba(255,255,255,.65), inset 0 0 0 1px rgba(184,145,46,.25), 0 2px 5px rgba(0,0,0,.16)}
.dmd-cell.dmd-hot .v{font-size:20px;color:#5a3800}
.dmd-cell.dmd-hot .l{color:#7a5f28;font-size:8px}
.dmd-cell.dmd-hot .l::before{content:'\1F451  ';font-size:9px} /* coroa antes de RESETS */
/* (Onda 1) regra morta removida: .dmd-hot .v (0,2,0) sempre perdeu para .dmd-cell.dmd-hot .v
   (0,3,0) da linha acima — nunca pintou nada. */
.dmd-cell .arw{font-size:9px;color:#895910 !important;margin-left:3px}
.dmd-links{text-align:center;font-size:11px;margin:6px 0 2px;color:#6a5636}
.dmd-links a{font-weight:bold;text-decoration:none;color:#8a5a10}
/* bandeirolas TOP - MODELO 10 "MARCADOR DE CODICE": fitas de marcador de livro saindo
   do topo (ecoam a verga escura do header). Corpo escuro tingido pela CATEGORIA
   (.dmd-c-*), numero ORDINAL em ouro Georgia, e o FIO de metal diz o tier
   (.dmd-t-*): ouro/prata/bronze/padrao. Sem nail, sem brilho ocioso; movimento
   so no hover. O fio vive no ::after do <b> do numero (pseudo livre). */
.dmd-banners{position:absolute;top:-2px;right:12px;display:flex;gap:9px;z-index:6}
.dmd-pennant{display:block;text-decoration:none;color:inherit;cursor:pointer;position:relative;width:44px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.4));animation:dmdFade .5s ease both;transition:transform .16s, filter .16s}
.dmd-pennant:nth-child(2){animation-delay:.25s}
.dmd-pennant:nth-child(3){animation-delay:.5s}
.dmd-pennant:hover{transform:translateY(-3px);filter:brightness(1.08) drop-shadow(0 6px 6px rgba(0,0,0,.5))}
/* o a:hover generico do tema devolvia sublinhado azul por cima do marcador */
.dmd-pennant:hover,.dmd-pennant:focus,.dmd-pennant:active,.dmd-pennant:hover *{text-decoration:none !important}
.dmd-nail,.dmd-shine{display:none}
.dmd-cloth{position:relative;margin:0;padding:9px 2px 14px;text-align:center;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 100%,50% 86%,0 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3), inset 0 -8px 10px rgba(0,0,0,.25);background:linear-gradient(180deg,#4a221b,#210d08)}
.dmd-ico{font-size:12px;line-height:1;margin-bottom:2px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}
.dmd-txt b{display:block;font-family:Georgia,'Times New Roman',serif;font-weight:bold;font-size:13px;line-height:1;color:#f2d17e;text-shadow:0 1px 2px rgba(0,0,0,.6);font-variant-numeric:lining-nums}
.dmd-txt b::after{content:'';display:block;width:62%;height:2px;margin:3px auto 2px;border-radius:2px;background:linear-gradient(90deg,transparent,#8a7a5a 30%,#b9a67e 50%,#8a7a5a 70%,transparent)}
.dmd-txt span{display:block;font-family:Verdana,Arial,sans-serif;font-weight:bold;font-size:6px;letter-spacing:1px;color:#d8c8a8;text-shadow:0 1px 1px rgba(0,0,0,.6);text-transform:uppercase;white-space:nowrap}
/* fio = tier */
.dmd-t-gold .dmd-txt b::after{background:linear-gradient(90deg,transparent,#f2ce58 30%,#fff6cf 50%,#f2ce58 70%,transparent);box-shadow:0 0 4px rgba(242,206,88,.55)}
.dmd-t-silver .dmd-txt b::after{background:linear-gradient(90deg,transparent,#c4ccd6 30%,#ffffff 50%,#c4ccd6 70%,transparent)}
.dmd-t-bronze .dmd-txt b::after{background:linear-gradient(90deg,transparent,#c8863e 30%,#f2ca98 50%,#c8863e 70%,transparent)}
/* corpo = categoria */
.dmd-c-reset .dmd-cloth{background:linear-gradient(180deg,#4a221b,#210d08)}
.dmd-c-ms .dmd-cloth{background:linear-gradient(180deg,#2e3a56,#131a28)}
.dmd-c-ed .dmd-cloth{background:linear-gradient(180deg,#26402e,#0e1a12)}
.dmd-c-rp .dmd-cloth{background:linear-gradient(180deg,#5c3a1a,#2e1a08)}
.dmd-c-ek .dmd-cloth{background:linear-gradient(180deg,#54221e,#260d0b)}
.dmd-c-ml .dmd-cloth{background:linear-gradient(180deg,#463358,#1e1428)}
.dmd-c-mdia .dmd-cloth{background:linear-gradient(180deg,#2e3a4e,#141c26)}
.dmd-c-mining .dmd-cloth{background:linear-gradient(180deg,#4a3a28,#221a10)}
.dmd-c-sword .dmd-cloth,.dmd-c-axe .dmd-cloth,.dmd-c-club .dmd-cloth,.dmd-c-dist .dmd-cloth{background:linear-gradient(180deg,#3a3f46,#181b20)}
.dmd-c-shield .dmd-cloth{background:linear-gradient(180deg,#2e4640,#12201c)}
.dmd-c-fish .dmd-cloth{background:linear-gradient(180deg,#1e4250,#0c1e26)}
@media(max-width:560px){.dmd-hero{flex-direction:column;text-align:center;padding-right:14px}.dmd-rk{justify-content:center}.dmd-strip{flex-wrap:wrap}.dmd-cell{flex:1 0 30%}.dmd-banners{position:static;justify-content:center;margin-top:8px}}
@media (prefers-reduced-motion:reduce){.dmd-pennant{animation:none;transition:none}}

/* =================== 2 · GRID 2x2 + celulas/cartoes das categorias =================== */
.dmd-grid2{display:grid;grid-template-columns:1fr;gap:2px;align-items:start}
@media(min-width:900px){.dmd-grid2{grid-template-columns:1fr 1fr;gap:2px 14px}}
.dmd-grid2 > .TableContainer{margin-bottom:13px !important}
.dmdg{font-family:Verdana,Arial,sans-serif;padding:8px;background:transparent}
.dmdg-cells{display:flex;gap:7px;flex-wrap:wrap}
.dmdg-cell{flex:1;min-width:82px;background:#efdfba;border:1px solid #cdb884;border-top:2px solid #b8912e;border-radius:6px;padding:8px 4px 7px;text-align:center;display:flex;flex-direction:column;gap:3px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2px 4px rgba(0,0,0,.12)}
.dmdg-cell.dmdg-hot{background:#f3e6c0}
.dmdg-cell .i{font-size:14px;line-height:1;opacity:.85}
.dmdg-cell .v{font-family:Georgia,'Times New Roman',serif;font-size:16px;font-weight:bold;color:#2e1d0a;line-height:1.05;font-variant-numeric:tabular-nums}
.dmdg-cell .v.sm{font-size:12px;padding-top:3px}
.dmdg-cell .l{font-size:8px;font-weight:bold;color:#7c6535;text-transform:uppercase;letter-spacing:.4px;display:flex;align-items:center;gap:4px;justify-content:center}
.dmdg-clk{cursor:pointer;transition:box-shadow .12s}
.dmdg-clk:hover{box-shadow:inset 0 0 0 1px #e6c25a, 0 2px 4px rgba(0,0,0,.12)}
.dmdg-cell .arw{font-size:9px;color:#8a5a10}
.dmdg-links{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;align-items:center;margin-top:10px;font-size:11px;color:#6a5636}
.dmdg-links a{color:#8a5a10;font-weight:bold;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.dmdg-links .tog{display:inline-flex;align-items:center;gap:5px;cursor:pointer;color:#5a4a2a;font-weight:bold;user-select:none}
.dmdg-links .tog:hover{color:#8a5a10}
.dmdg-links .tog .arw{color:#8a5a10;font-size:9px}
.dmdg-detail{margin-top:8px}
.dmdg-detail th{background:linear-gradient(180deg,#36150f,#210d08) !important;color:#f2d17e !important;border-color:#4a3020 !important;text-shadow:0 1px 1px rgba(0,0,0,.6)}
.dmdg-detail table tr{background:transparent !important}
.dmdg-detail td{background:transparent !important;border-color:#cdb884 !important}
.dmdg-detail table tr:nth-child(even) td{background:rgba(120,90,40,0.08) !important}
.dmdg-detail img{vertical-align:middle}
/* chips -> cartoes-stat (rotulo caps + valor Georgia + filete esquerdo) */
.dmdg-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:7px;padding:8px}
.dmdg-chip{display:flex;flex-direction:column;gap:2px;background:#efdfba;border:1px solid #cdb884;border-left:3px solid #b8912e;border-radius:6px;padding:7px 11px;min-width:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2px 4px rgba(0,0,0,.1)}
.dmdg-chip .k{font-size:8px;color:#7c6535;text-transform:uppercase;letter-spacing:.5px;font-weight:bold}
.dmdg-chip .v{font-family:Georgia,'Times New Roman',serif;font-size:13px;color:#2e1d0a;font-weight:bold}
.dmdg-chip .v a{color:#8a5a10;text-decoration:none;font-weight:normal;margin-left:4px}
.dmdg-chip .v a:hover{text-decoration:underline}

/* =================== 4 · CRONICA (Deaths frio · Frags ouro) =================== */
tr.dmdDeathRow{background:#efdfba !important}
tr.dmdDeathRow td{border-bottom:1px dashed #cdb884;color:#3a2c14;font-size:11px;line-height:1.45}
tr.dmdDeathRow td:first-child{background-image:linear-gradient(90deg,transparent 24px,rgba(122,90,30,.4) 24px,rgba(122,90,30,.4) 26px,transparent 26px),radial-gradient(5px 5px at 25px 50%, #9a9284 0 55%, #150c05 60%, transparent 72%);background-repeat:no-repeat;padding-left:42px !important;font-family:Georgia,'Times New Roman',serif;font-size:10px;color:#7c6535;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
tr.dmdDeathRow td b{font-family:Georgia,'Times New Roman',serif}
tr.dmdDeathRow td a{color:#8a2a2a !important;text-decoration:none;font-weight:bold}
tr.dmdDeathRow td a:hover{text-decoration:underline}
tr.dmdFragRow{background:#efdfba !important}
tr.dmdFragRow td{border-bottom:1px dashed #cdb884;color:#3a2c14;font-size:11px;line-height:1.45}
tr.dmdFragRow td:first-child{background-image:linear-gradient(90deg,transparent 24px,rgba(122,90,30,.4) 24px,rgba(122,90,30,.4) 26px,transparent 26px),radial-gradient(5px 5px at 25px 50%, #e6c25a 0 55%, #7a5a1e 62%, transparent 74%);background-repeat:no-repeat;padding-left:42px !important;font-family:Georgia,'Times New Roman',serif;font-size:10px;color:#7c6535;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
tr.dmdFragRow td a{color:#8a5a10 !important;text-decoration:none;font-weight:bold}
tr.dmdFragRow td a:hover{text-decoration:underline}
.dmd-tag{display:inline-block;font-family:Verdana,Arial,sans-serif;font-size:8px;font-weight:bold;letter-spacing:.4px;padding:1px 6px;border-radius:4px;text-transform:uppercase;vertical-align:1px}
.dmd-tag.ok{background:rgba(30,122,55,.14);color:#1e7a37;border:1px solid rgba(30,122,55,.4)}
.dmd-tag.bad{background:rgba(138,42,42,.12);color:#8a2a2a;border:1px solid rgba(138,42,42,.4)}

/* =================== 5 · PROGRESS (checklist de quests + tasks) =================== */
.dmd-qdot{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;border:1.5px solid #93805a;font-family:Georgia,'Times New Roman',serif;font-size:9px;font-weight:bold;color:#5a3d00;vertical-align:middle;background:transparent}
.dmd-qdot.done{background:radial-gradient(circle at 35% 30%,#ffe79a,#c89a2e);border-color:#7a5a1e;box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.25)}
.dmd-checklist{columns:2 260px;column-gap:18px;padding:8px 12px;font-family:Verdana,Arial,sans-serif;font-size:10.5px}
.dmd-check{break-inside:avoid;display:flex;align-items:center;gap:8px;padding:4px 2px;border-bottom:1px dashed #cdb884;color:#3a2c14}
.dmd-check.done{color:#1e7a37;font-weight:bold}
.dmd-check .dmd-qdot{flex:0 0 auto}
.dmd-check small{margin-left:auto;color:#c9772b;font-weight:bold;white-space:nowrap}
.dmd-check progress{width:46px !important;height:9px !important;flex:0 0 auto}

/* =================== 6 · CHARACTERS (cartoes-avatar; o cartao inteiro e o "Ver") =================== */
.dmd-charcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:9px;font-family:Verdana,Arial,sans-serif}
.dmd-charcard{position:relative;background:#efdfba;border:1px solid #cdb884;border-radius:10px;padding:11px 6px 10px;text-align:center;transition:border-color .15s, box-shadow .15s;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.dmd-charcard:hover{border-color:#b8912e;box-shadow:0 4px 10px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.5)}
.dmd-charcard .num{position:absolute;top:6px;left:9px;font-family:Georgia,serif;font-size:8px;font-weight:bold;color:#b8912e}
.dmd-charcard .av{width:36px;height:36px;margin:0 auto 6px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#d8c7a0,#a8916a);border:1.5px solid #b8912e;display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-size:15px;font-weight:bold;color:#5a3d00;box-shadow:inset 0 1px 2px rgba(0,0,0,.2)}
.dmd-charcard .nm{font-family:Georgia,serif;font-size:11.5px;font-weight:bold;color:#2e1d0a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dmd-charcard .nm .del{color:#8a2a2a;font-size:9px}
.dmd-charcard .wd{font-size:8px;letter-spacing:.5px;text-transform:uppercase;color:#93805a;margin-top:2px}
.dmd-charcard .st{font-size:9px;font-weight:bold;margin-top:4px}
.dmd-charcard .st.on{color:#1e7a37}
.dmd-charcard .st.on::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#1e7a37;margin-right:4px;box-shadow:0 0 4px rgba(30,122,55,.5)}
.dmd-charcard .st.off{color:#93805a}
.dmd-charcard .st.off::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#93805a;margin-right:4px}
.dmd-charcard form.go{position:absolute;inset:0;margin:0}
.dmd-charcard form.go button{position:absolute;inset:0;width:100%;height:100%;background:none;border:none;cursor:pointer}

/* =================== 3 · EQUIPS/SKILLS (ilha re-tintada; motor intacto) =================== */
.Content .signBgrnd .cap, .Content .signBgrnd .soul{color:rgba(255,244,214,.75) !important}
/* ==== DMD CHARACTERS ATLAS - END ==== */


/* ==== DMD COLUNAS NOBRES (a verga do miolo chega as colunas) - BEGIN - remover p/ reverter ====
   Aprovado pelo dono em 20/07 ("os menus estao menos nobres que o miolo"): os headers das
   colunas ganham a MESMA verga carmesim+ouro das caixas centrais, e as molduras sobem de
   1px para o aro cunhado de 2px. Bloco 100% aditivo no FIM do arquivo - vence os blocos
   RANKING/TRONO/MENU por ordem (mesma especificidade). Geometria: so as molduras crescem
   +2px de altura (borda 1->2px); headers e paddings intocados.
   FUSAO DELIBERADA nos rankings: a soleira de estado (brasa=fechado/ouro=aberto) PERMANECE
   como o filamento da junta - ela ja e viva e e o sinal de colapso aprovado pelo dono.
   Nada aqui declara filter/transition novos no .MenuButton (o dmdNewsAttract anima filter). */

/* ---------- A+B. MOLDURAS: aro cunhado de 2px com anel escuro (igual as caixas centrais) ---------- */
#Themeboxes .Themebox,
#Themeboxes #warcastle,
#Themeboxes #warcastle24,
#Themeboxes #quoteBox{
  border:2px solid #b8912e !important;
  border-top-color:#cfa845 !important;
  border-bottom-color:#8a6a22 !important;
  box-shadow:
    0 0 0 1px #150c05,
    0 2px 0 rgba(255,215,130,.1),
    0 10px 22px rgba(0,0,0,.5),
    inset 0 0 0 1px #170b05,
    inset 0 0 0 2px rgba(255,222,150,.07),
    inset 0 0 18px rgba(0,0,0,.28) !important;
}
#Themeboxes #warcastle:hover,
#Themeboxes #warcastle24:hover,
#Themeboxes #quoteBox:hover{
  border-color:#cfa845 !important;
  border-bottom-color:#9a7a2c !important;
}

/* ---------- A. HEADERS DOS RANKINGS: verga carmesim + arame de ouro embutido.
   A soleira (::before do bloco RANKING) segue pintando a junta por cima. ---------- */
#Themeboxes .dmd-rhd{
  background-color:#150806 !important;
  background-image:
    linear-gradient(90deg, rgba(255,216,138,0) 0%, rgba(255,216,138,.5) 8%, rgba(230,194,90,.14) 50%, rgba(255,216,138,.5) 92%, rgba(255,216,138,0) 100%),
    radial-gradient(130% 120% at 50% -35%, rgba(255,196,110,.17) 0%, rgba(255,196,110,0) 58%),
    linear-gradient(180deg,#5b2b20 0%,#4a221b 16%,#36150f 52%,#210d08 83%,#150806 100%) !important;
  background-repeat:no-repeat !important;
  background-size:calc(100% - 26px) 1px, auto, auto !important;
  background-position:13px 3px, 0 0, 0 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,205,115,.42),
    inset 0 -1px 0 rgba(0,0,0,.65),
    inset 0 -8px 14px rgba(0,0,0,.4) !important;
}
/* titulo com a gravacao da verga (mesma voz do miolo) */
#Themeboxes .dmd-rhd .topleveltext{
  text-shadow:0 1px 1px rgba(0,0,0,.85), 0 2px 6px rgba(0,0,0,.5), 0 0 10px rgba(240,190,80,.3) !important;
}

/* ---------- B. PLACAS DOS CASTELOS E DA COIN: mesma verga ---------- */
#Themeboxes #warcastle .topleveltext,
#Themeboxes #warcastle24 .topleveltext,
#Themeboxes #quoteBox .topleveltext{
  background-color:#150806 !important;
  background-image:
    linear-gradient(90deg, rgba(255,216,138,0) 0%, rgba(255,216,138,.5) 8%, rgba(230,194,90,.14) 50%, rgba(255,216,138,.5) 92%, rgba(255,216,138,0) 100%),
    radial-gradient(130% 120% at 50% -35%, rgba(255,196,110,.17) 0%, rgba(255,196,110,0) 58%),
    linear-gradient(180deg,#5b2b20 0%,#4a221b 16%,#36150f 52%,#210d08 83%,#150806 100%) !important;
  background-repeat:no-repeat !important;
  background-size:calc(100% - 26px) 1px, auto, auto !important;
  background-position:13px 3px, 0 0, 0 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,205,115,.42),
    inset 0 -1px 0 rgba(0,0,0,.65),
    inset 0 -6px 9px rgba(0,0,0,.35) !important;
}
/* coroas dos castelos acendem sobre o carmesim (eram gravadas no marrom) */
#Themeboxes #warcastle .topleveltext::before,
#Themeboxes #warcastle .topleveltext::after,
#Themeboxes #warcastle24 .topleveltext::before,
#Themeboxes #warcastle24 .topleveltext::after{
  color:#c9a344 !important;
  text-shadow:0 1px 1px rgba(0,0,0,.85), 0 0 6px rgba(240,190,80,.3) !important;
}

/* ---------- C. MENU ESQUERDO: botoes-verga (News/Wars/... sao os headers do menu) ----------
   Mesma banda carmesim + arame de ouro; bisel/borda/colchetes/hover do bloco MENU v3 continuam
   (eles mexem em border-color e box-shadow no hover - aqui so trocamos o fundo). */
#Menu .MenuButton{
  background-color:#150806 !important;
  background-image:
    linear-gradient(90deg, rgba(255,216,138,0) 0%, rgba(255,216,138,.45) 8%, rgba(230,194,90,.12) 50%, rgba(255,216,138,.45) 92%, rgba(255,216,138,0) 100%),
    radial-gradient(130% 130% at 50% -40%, rgba(255,196,110,.16) 0%, rgba(255,196,110,0) 58%),
    linear-gradient(180deg,#5b2b20 0%,#4a221b 18%,#36150f 55%,#210d08 85%,#150806 100%) !important;
  background-repeat:no-repeat !important;
  background-size:calc(100% - 22px) 1px, auto, auto !important;
  background-position:11px 3px, 0 0, 0 0 !important;
}
/* rotulo Fondamento com a gravacao da verga */
#Menu .menufonts{
  text-shadow:0 1px 1px rgba(0,0,0,.85), 0 0 10px rgba(240,190,80,.3) !important;
}
/* ==== DMD COLUNAS NOBRES - END ==== */


/* ==== DMD PODIO ROMANO (marcadores I-II-III) - BEGIN - remover p/ reverter ====
   Escolha do dono (20/07): as bolinhas 1/2/3 sumiram - o posto agora e ALGARISMO ROMANO
   em Georgia metalica, sem forma nenhuma. Ouro/prata/bronze vivem na COR do numeral.
   O PHP emite I/II/III (layout.php, 3 loops); .dmd-mx (4o+ se o ranking crescer) fica
   apagado. Bloco no FIM do arquivo: anula por ordem os circulos/gradientes/aneis dos
   blocos RIGHT COLUMN e RANKING RELICARIO (mesmos seletores, mesma especificidade).
   A largura fixa de 26px mantem os nomes alinhados entre as linhas (I vs III). */
#Themeboxes .dmd-medal{
  width:26px !important; height:auto !important; flex:0 0 26px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  background:none !important; border:0 !important; border-radius:0 !important;
  box-shadow:none !important;
  font-family:Georgia,'Times New Roman',serif !important; font-weight:800 !important;
  font-size:13px !important; line-height:1 !important; letter-spacing:.5px !important;
  text-align:center !important;
}
#Themeboxes .dmd-medal.dmd-m1{
  background:none !important; border:0 !important; box-shadow:none !important;
  color:#ffd98a !important;
  text-shadow:0 1px 1px rgba(0,0,0,.85), 0 0 8px rgba(255,190,80,.4) !important;
}
#Themeboxes .dmd-medal.dmd-m2{
  background:none !important; border:0 !important; box-shadow:none !important;
  color:#cfd6e0 !important;
  text-shadow:0 1px 1px rgba(0,0,0,.85), 0 0 6px rgba(200,215,235,.3) !important;
}
#Themeboxes .dmd-medal.dmd-m3{
  background:none !important; border:0 !important; box-shadow:none !important;
  color:#d89b62 !important;
  text-shadow:0 1px 1px rgba(0,0,0,.85), 0 0 6px rgba(216,155,98,.3) !important;
}
#Themeboxes .dmd-medal.dmd-mx{
  background:none !important; border:0 !important; box-shadow:none !important;
  color:#93805a !important;
  text-shadow:0 1px 1px rgba(0,0,0,.8) !important;
}
/* ==== DMD PODIO ROMANO - END ==== */


/* ==== DMD CRISTAL (62% + blur sobre a lava) - BEGIN - remover p/ reverter ====
   Escolha do dono (20/07): opcao C "Cristal" nas tres colunas.
   ARQUITETURA (resposta a duvida do dono sobre o painel translucido que ja existia):
   o painel de tras (#Menu / #Themeboxes) E a chapa de cristal - so ele carrega o
   backdrop-filter (1 blur por pilha; blur aninhado soma custo de GPU e re-desfoca o
   ja-desfocado). Os boxes internos viram TINTA rasa (~45%, sem blur proprio) - se
   fossem vidro tambem, 62% sobre 62% = ~86% opaco e o cristal morre.
   Vergas carmesim e botoes continuam OPACOS (vidro no corpo, metal na coroa).
   No centro, o pergaminho do .Box fica translucido mas as LINHAS de conteudo (news
   ticker etc.) tem fundo proprio opaco - a lava sangra nas margens, o texto nao sofre.
   Fallback @supports: navegador sem backdrop-filter cai na versao "Sopro" (mais
   opaca, sem blur) - nunca quebra, so fica menos cristal. */

/* ---------- 1. AS CHAPAS DE CRISTAL (paineis de tras): 62% + blur ---------- */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #Menu{
    background:
      radial-gradient(140% 60% at 50% -8%, rgba(255,196,110,.09), transparent 60%),
      linear-gradient(180deg, rgba(22,13,8,.58) 0%, rgba(10,6,3,.66) 100%) !important;
    -webkit-backdrop-filter:blur(9px) saturate(1.15);
    backdrop-filter:blur(9px) saturate(1.15);
  }
  #Themeboxes{
    background:
      radial-gradient(140% 60% at 50% -8%, rgba(255,196,110,.09), transparent 60%),
      linear-gradient(180deg, rgba(22,13,8,.58) 0%, rgba(10,6,3,.66) 100%) !important;
    -webkit-backdrop-filter:blur(9px) saturate(1.15);
    backdrop-filter:blur(9px) saturate(1.15);
  }
  /* centro: o proprio box e a chapa (nao ha painel de tras) - pergaminho translucido */
  .Content .Box, .Content #news, .TableContainer{
    background:rgba(201,183,141,.6) !important;
    -webkit-backdrop-filter:blur(8px) saturate(1.08);
    backdrop-filter:blur(8px) saturate(1.08);
  }
}
/* fallback: sem backdrop-filter, transparencia leve (Sopro) p/ preservar leitura */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #Menu{
    background:
      radial-gradient(140% 60% at 50% -8%, rgba(255,196,110,.07), transparent 60%),
      linear-gradient(180deg, rgba(26,16,10,.86) 0%, rgba(10,6,3,.9) 100%) !important;
  }
  #Themeboxes{
    background:
      radial-gradient(140% 60% at 50% -8%, rgba(255,196,110,.07), transparent 60%),
      linear-gradient(180deg, rgba(26,16,10,.86) 0%, rgba(10,6,3,.9) 100%) !important;
  }
  .Content .Box, .Content #news, .TableContainer{
    background:rgba(201,183,141,.88) !important;
  }
}

/* ---------- 2. TINTA RASA nos corpos internos (sem blur proprio; vale nos 2 mundos) ---------- */
#Themeboxes .Themebox,
#Themeboxes #warcastle,
#Themeboxes #warcastle24,
#Themeboxes #quoteBox{
  background-color:transparent !important;
  background-image:
    radial-gradient(ellipse 90% 55% at 50% 112%, rgba(214,98,34,.08) 0%, rgba(214,98,34,0) 62%),
    linear-gradient(180deg, rgba(42,28,18,.46) 0%, rgba(26,16,8,.5) 60%, rgba(18,11,6,.56) 100%) !important;
}
/* poco do submenu: translucido na mesma medida */
#Menu .Submenu{
  background:linear-gradient(180deg, rgba(30,19,10,.52) 0%, rgba(16,10,5,.6) 100%) !important;
}
/* ==== DMD CRISTAL - END ==== */

/* ==== DMD AVATAR FRAMES (molduras preset do avatar de personagem) - BEGIN ==== */
/* A imagem e recortada no circulo pelo .dmd-ava (overflow:hidden). A moldura e um
   ANEL desenhado POR CIMA da imagem via ::after (z-index acima do <img>): a imagem
   nunca extrapola e a borda fica sempre na frente. O brilho externo vai no proprio
   elemento (box-shadow do proprio elemento NAO e cortado pelo overflow:hidden). */
/* Moldura = ANEL METALICO desenhado por cima (::after mascarado em anel fino).
   SEM borda preta: a moldura zera a borda base e poe so um contorno tenue + brilho.
   O conic-gradient simula metal polido (reflexos claros/escuros ao redor). */
.dmd-ava[class*="dmd-avframe-"]{position:relative;border-width:0 !important}
.dmd-ava[class*="dmd-avframe-"]::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:3;
  -webkit-mask:radial-gradient(circle closest-side,transparent 0 76%,#000 81%);mask:radial-gradient(circle closest-side,transparent 0 76%,#000 81%)}
.dmd-avframe-gold{box-shadow:0 0 0 1px rgba(35,22,6,.4), 0 0 11px rgba(240,196,92,.55) !important}
.dmd-avframe-gold::after{background:conic-gradient(from 210deg,#6e4d12,#f8e79b,#c99a2f,#fff6cf,#b9862a,#f2dc8a,#8a6417,#6e4d12)}
.dmd-avframe-ember{box-shadow:0 0 0 1px rgba(40,14,4,.45), 0 0 13px rgba(226,104,32,.6) !important}
.dmd-avframe-ember::after{background:conic-gradient(from 200deg,#5c1e06,#ff9b3d,#e0551a,#ffd08a,#d6431a,#ff8a3a,#7a2408,#5c1e06)}
.dmd-avframe-silver{box-shadow:0 0 0 1px rgba(20,24,28,.4), 0 0 10px rgba(200,214,226,.55) !important}
.dmd-avframe-silver::after{background:conic-gradient(from 210deg,#5f6a74,#eef3f7,#9aa6b0,#ffffff,#8b98a3,#dfe7ee,#6b757f,#5f6a74)}
.dmd-avframe-laurel{box-shadow:0 0 0 1px rgba(20,30,10,.4), 0 0 10px rgba(150,180,80,.5) !important}
.dmd-avframe-laurel::after{background:conic-gradient(from 210deg,#33430f,#c7e07a,#6f8a2c,#eef7c2,#5f7a24,#b7d06a,#3d4f13,#33430f)}
.dmd-avframe-royal{box-shadow:0 0 0 1px rgba(24,10,34,.45), 0 0 12px rgba(150,90,210,.5) !important}
.dmd-avframe-royal::after{background:conic-gradient(from 210deg,#3a1360,#c9a0ff,#7a3fd0,#f0d9ff,#6a2fb8,#b98cf0,#e7c86a,#3a1360)}
.dmd-avframe-abyss{box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 0 12px rgba(230,190,90,.45) !important}
.dmd-avframe-abyss::after{background:conic-gradient(from 210deg,#0c0a08,#4a3a1a,#1a150e,#c8a24a,#181209,#3a2c14,#0c0a08,#0c0a08)}
/* galeria de avatares padrao (simbolos) na pagina ?subtopic=avatar */
.dmd-avgal{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:8px;margin-top:10px;max-width:430px}
.dmd-avopt{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 4px 6px;background:linear-gradient(180deg,#faf4e4,#efe3c6);border:1px solid #cdb884;border-radius:10px;cursor:pointer;transition:transform .12s,box-shadow .12s,border-color .12s;font:inherit}
.dmd-avopt:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(120,90,20,.22);border-color:#b8912e}
.dmd-avopt.sel{border-color:#b8912e;background:linear-gradient(180deg,#fff6da,#f3e2ad);box-shadow:0 0 0 2px rgba(184,145,46,.5),inset 0 0 6px rgba(184,145,46,.25)}
.dmd-avopt-i{width:42px;height:42px;display:flex;align-items:center;justify-content:center;font-size:26px;line-height:1;border-radius:50%;background:radial-gradient(circle at 34% 26%,#e8d8b0,#b39a6a);box-shadow:inset 0 0 0 2px #c6a24a,inset 0 0 5px rgba(0,0,0,.15)}
.dmd-avopt-l{font-size:9px;font-weight:bold;color:#6f5722;text-transform:uppercase;letter-spacing:.3px}
/* engrenagem "Editar avatar" sob o avatar. ESCONDIDA por padrao: so o dono logado
   a ve, revelada por script per-request (fora do cache) em characters.php. */
.dmd-avedit{display:none;align-items:center;gap:4px;margin-top:3px;font-size:12px;font-weight:bold;line-height:1;
  color:#7a5410;text-decoration:none;cursor:pointer;padding:4px 10px;border-radius:9px;
  background:linear-gradient(180deg,#faf1d6,#eeddb2);box-shadow:inset 0 0 0 1px rgba(184,145,46,.55), 0 1px 2px rgba(120,90,20,.18);
  transition:transform .12s, box-shadow .12s, background .12s}
.dmd-avedit::before{content:'\2699';font-size:15px;line-height:1}
.dmd-avedit:hover{transform:translateY(-1px);text-decoration:none;background:linear-gradient(180deg,#fff6dd,#f2e2ac);box-shadow:inset 0 0 0 1px #b8912e, 0 3px 7px rgba(120,90,20,.28)}
/* ==== DMD AVATAR FRAMES - END ==== */

/* ==== DMD ONDA 1 (redesign Characters: foco no nome + contraste) - BEGIN - remover bloco inteiro p/ reverter ====
   Auditoria de 25/07/2026. Bloco 100% ADITIVO, colado depois do ATLAS: vence por ORDEM, mesma
   especificidade, sem precisar de !important a nao ser onde o ATLAS ja usa !important.
   Duas edicoes NAO estao aqui (tiveram de ser in-place no ATLAS, ver linhas ~6398-6399):
   a regra morta .dmd-hot .v foi apagada e o .arw (que tinha !important) mudou de cor.
   Reverter = apagar deste BEGIN ate o END + desfazer aquelas 2 linhas. */

/* --- 1.4 o nome vira o protagonista (era 21px, empatado com o Resets a 20px) --- */
.dmd-nm{font-size:28px;line-height:1.08;letter-spacing:-.3px;color:#3a2308;
  display:inline-block;padding-bottom:4px;position:relative}
.dmd-nm::after{content:'';display:block;width:min(320px,100%);height:2px;margin-top:6px;
  background:linear-gradient(90deg,#b8912e,#f2d17e 35%,#b8912e 70%,rgba(184,145,46,0))}
.dmd-nm font{color:#3a2308 !important}   /* acompanha o novo tom (o ATLAS:6372 usa !important) */

/* --- 1.5 CORRECAO DE BUG: .dmd-nm significa duas coisas. O ATLAS:6371 (Georgia 21px, nome do
   char) vencia o RIGHT COLUMN:5572 (Verdana 12px, nomes do ranking da coluna direita) por ordem,
   mesma especificidade (0,1,0) — e os resgates de 5604/5619 so cobrem color e font-size, nunca
   font-family. Resultado: os nomes da sidebar renderizavam em serif em TODAS as paginas do site.
   Confirmado por getComputedStyle em producao antes e depois. --- */
#Themeboxes .dmd-nm{font-family:Verdana,Arial,Helvetica,sans-serif !important;
  font-size:12px !important;letter-spacing:0 !important;display:block !important;
  padding-bottom:0 !important;position:static !important}
#Themeboxes .dmd-nm::after{content:none !important}

/* --- 1.4b as flamulas recuam: continuam o trofeu, param de ser o assunto ---
   Conta de largura: 40x3 + gap 9x2 + folga 12 = 150px = o padding-right ja reservado
   em .dmd-hero-banners (ATLAS:6354). Zero colisao nova. */
.dmd-pennant{width:40px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.26))}
.dmd-pennant:nth-child(n+2){animation:none}   /* so a primeira anima */
.dmd-txt span{font-size:7px;letter-spacing:.3px}

/* --- 1.4c pesos do strip: Resets manda, Level recua, Atk|Def viram um par --- */
.dmd-cell{flex:1.1}
.dmd-strip .dmd-cell:first-child{flex:.85}          /* Level: a metrica do servidor e reset */
.dmd-cell.dmd-hot{flex:1.7}                          /* era 1.35 */
.dmd-cell .v{font-size:18px}                         /* era 16px */
.dmd-cell.dmd-hot .v{font-size:22px}                 /* era 20px */
.dmd-strip .dmd-cell:nth-child(4){margin-left:13px;border-top-color:#8a2a2a}  /* rubi = ataque */
.dmd-strip .dmd-cell:nth-child(5){border-top-color:#2b4f9a}                   /* aco  = defesa */

/* --- 1.3 contraste: 15 falhas WCAG medidas no DOM (70 ocorrencias em 138 elementos visiveis).
   Cada valor e o MENOR escurecimento que cruza 4,5:1 — mesmo matiz, tinta mais carregada.
   Nenhuma cor nova entra na paleta. --- */
.dmd-cell .l{font-size:9px;color:#7c6843;letter-spacing:.4px;line-height:1.2}  /* era 7,5px #8a744a = 3,81 */
.dmd-cell.dmd-hot .l{color:#6f5620;font-size:9px}
.dmd-cell .s{font-size:9px;color:#765f2c}                                       /* era 8,5px #9a7d3a */
.dmd-rk{color:#5a4f37}                                                          /* era #93805a */
.dmd-rk-lb{color:#5c4e32;font-size:9px}                                         /* era 8px #9a8354 = 2,06 */
.dmd-sub{color:#5f4d2c}                                                         /* era #7a6338 */
.dmd-avst.on{color:#135324}
.dmd-avst.off{color:#524831}
.dmd-vst.on{color:#175c2a}
.dmd-vst.off{color:#706144}
.dmdg-cell .l,.dmdg-chip .k{color:#6e5a2f;font-size:9px}                        /* era 8px #7c6535 */
.dmd-charcard .wd{color:#706144;font-size:9px}                                  /* era 8px #93805a = 2,91 */
.dmd-charcard .st.off{color:#706144}
.dmd-charcard .st.off::before{background:#706144}
.dmd-charcard .num{color:#79601e}                                               /* era #b8912e = 2,24 */

/* --- 1.9 anel de foco: o ATLAS inteiro (224 linhas) nao tinha UMA regra :focus-visible.
   A 6413 mata o sublinhado das flamulas com !important; o anel e o substituto. --- */
.Content .dmd-cell:focus-visible,
.Content .dmd-rk a:focus-visible,
.Content .dmd-showbtn:focus-visible,
.Content .dmd-pennant:focus-visible,
.Content .dmd-charcard a.go:focus-visible{
  outline:2px solid #7a5410;outline-offset:2px;
  box-shadow:0 0 0 4px rgba(255,217,138,.55)}

/* --- 1.13 avatar real nos cartoes da lista da conta ---
   O <img> fica ABSOLUTO por cima da inicial: se o arquivo falhar, o onerror esconde a imagem e
   a letra reaparece sozinha, sem buraco. Mesmo padrao do .dmd-ava do card-heroi (ATLAS:6367). */
.dmd-charcard .av{position:relative;overflow:hidden}
.dmd-charcard .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:50%;z-index:1;pointer-events:none}
/* pointer-events:none e obrigatorio: o form.go que torna o cartao inteiro clicavel e
   position:absolute com z-index auto, entao a imagem (z-index:1) pintaria POR CIMA dele e
   engoliria o clique nos 36px do avatar. */
.dmd-charcard .av .pz{font-size:19px;line-height:1}   /* simbolo preset no lugar da inicial */

/* --- 1.12 lista da conta: resets no lugar do nome do mundo repetido 16x --- */
.dmd-charcard .rr{font-size:9px;letter-spacing:.4px;text-transform:uppercase;color:#706144;margin-top:2px}
.dmd-charcard .rr b{font-family:Georgia,'Times New Roman',serif;font-size:14px;color:#4a2e08;letter-spacing:0}
.dmd-charcard.me{border-color:#b8912e;background:linear-gradient(180deg,#f9efd0,#eeddb0);
  box-shadow:inset 0 0 0 1px #e6c25a,0 2px 6px rgba(0,0,0,.16)}

/* --- mobile: media query nao soma especificidade, entao os pesos acima venceriam dentro dela.
   Re-declarado aqui. Hoje isto e codigo morto (falta a meta viewport, item 2.5 da Onda 2);
   entra agora para o breakpoint ja nascer coerente quando a meta for ligada. --- */
@media(max-width:560px){
  .dmd-strip .dmd-cell,.dmd-strip .dmd-cell:first-child{flex:1 0 30%}
  .dmd-cell.dmd-hot{flex:1 0 46%}
  .dmd-strip .dmd-cell:nth-child(4){margin-left:0}
  .dmd-nm{font-size:22px}
}
/* ==== DMD ONDA 1 - END ==== */


/* ==== DMD EIXO DE NUMEROS (pagina de personagem v4) - BEGIN - apagar o bloco inteiro p/ reverter ====
   Opcao A escolhida pelo dono em 27/07. Reaproveita .dmd-hero/.dmd-strip/.dmd-cell da Onda 1
   (que continuam valendo) e acrescenta: moldura .fg-*, abas .sal-* em CSS puro (radio+:checked,
   sem JS) e o eixo de numeros .eix-*.
   233 seletores, 169 com prefixo novo. Colisoes conferidas antes de colar: so as 3 regras de
   :focus-visible que a ONDA 1 ja tinha (mesma intencao) e os from/to de keyframes.
   Reverter = apagar deste BEGIN ate o END + restaurar characters.php.bak_eixo */

/* ==== DMD PAGINA DE PERSONAGEM · OPCAO A "O EIXO DE NUMEROS" - BEGIN ====
   Remover o bloco inteiro para reverter.

   BASE: "A Ficha de Guerra" (opcao 1) — moldura unica, verga unica, hierarquia
   por peso tipografico. ENXERTOS da opcao 2 (ordem do dono): o EQUIPAMENTO
   (.sal-armaria / .sal-doll / .sal-relic — intocavel) e a BARRA DE ABAS
   (.sal-bar / .sal-walls). CORTADO: "Salas do Salao".

   DIVERGENCIA desta opcao — O EIXO (.eix):
   os blocos de dados viram um EXTRATO. Cada linha e
       [icone] [rotulo + contexto + guia pontilhada] [NUMERO a direita] [selo]
   As duas ultimas colunas tem largura FIXA (--eixn e --eixm), entao a borda
   direita dos numeros cai sempre no mesmo x, em qualquer largura de caixa.
   Uma regua vertical ancorada A DIREITA marca esse eixo.
   Linhas multi-valor (.mul) abrem sub-linhas num grid FILHO que repete as
   mesmas colunas fixas e o mesmo gap: o 1fr do filho e matematicamente igual
   ao 1fr do pai, logo os sub-numeros pousam no MESMO eixo dos principais.

   Georgia = valor/nome · Verdana = rotulo. Rubi #8a2a2a = ataque/perigo,
   aco #2b4f9a = defesa, verde #175c2a = positivo, ouro #b8912e = estrutura.
   Tudo escopado em .Content. Sem framework, sem build, sem JS.
   Elastico: nenhuma medida horizontal travada entre 560px e 765px. */

/* ---------- 0 · prancha ---------- */
.Content .fg-page{
  padding:10px;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(255,190,90,.10), rgba(255,190,90,0) 60%),
    linear-gradient(180deg,#241408,#170c06);
  border-radius:12px;
}
.Content .fg-page *{box-sizing:border-box}

/* ---------- 1 · A FICHA: moldura unica (substitui as 9 caixas) ---------- */
.Content .fg{
  border:2px solid #b8912e;border-top-color:#cfa845;border-bottom-color:#8a6a22;
  border-radius:10px;overflow:hidden;background:#c9b78d;
  box-shadow:
    0 0 0 1px #150c05,
    0 2px 0 rgba(255,215,130,.10),
    0 12px 28px rgba(0,0,0,.50),
    0 3px 9px rgba(0,0,0,.42),
    inset 0 0 0 1px #170b05,
    inset 0 0 0 2px rgba(255,222,150,.07);
  font-family:Verdana,Arial,Helvetica,sans-serif;
}
.Content .fg-verga{
  position:relative;height:42px;border-bottom:2px solid #7a5a1e;
  display:flex;align-items:center;gap:10px;padding:0 14px;
  background-color:#150806;
  background-image:
    linear-gradient(90deg, rgba(255,216,138,0) 0%, rgba(255,216,138,.50) 8%, rgba(230,194,90,.14) 50%, rgba(255,216,138,.50) 92%, rgba(255,216,138,0) 100%),
    radial-gradient(130% 120% at 50% -35%, rgba(255,196,110,.17) 0%, rgba(255,196,110,0) 58%),
    linear-gradient(180deg,#3a1a12 0%,#2a1109 55%,#170a06 100%);
  background-repeat:no-repeat;background-size:100% 3px,100% 100%,100% 100%;
  background-position:0 3px,0 0,0 0;
}
.Content .fg-vg-t{
  font-family:Georgia,'Times New Roman',serif;font-weight:bold;font-size:14px;
  letter-spacing:2.4px;text-transform:uppercase;color:#f2d17e;
  text-shadow:0 1px 2px rgba(0,0,0,.7);white-space:nowrap;
}
.Content .fg-vg-s{
  font-size:9px;letter-spacing:.7px;text-transform:uppercase;font-weight:bold;
  color:#c2a877;text-shadow:0 1px 1px rgba(0,0,0,.7);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.Content .fg-corpo{padding:11px}

/* ================================================================
   2 · BLOCO DE COMANDO — card-heroi + strip (ONDA 1 preservada 1:1)
   ================================================================ */
.Content .dmd-hero{
  position:relative;display:flex;align-items:center;gap:13px;padding:13px 14px 12px;
  border:2px solid #b8912e;border-radius:10px;
  background:
    radial-gradient(90% 70% at 50% -15%, rgba(255,244,210,.8), rgba(255,244,210,0) 60%),
    linear-gradient(180deg,#efdfba 0%,#e2d0a6 60%,#d4c094 100%);
  box-shadow:0 0 0 1px #8a6a22, 0 6px 14px rgba(0,0,0,.30),
    inset 0 0 0 1px rgba(255,255,255,.55), inset 0 0 0 3px rgba(184,145,46,.28);
}
.Content .dmd-hero-banners{padding-right:150px}
@keyframes dmdFade{from{opacity:0}to{opacity:1}}

.Content .dmd-avwrap{display:flex;flex-direction:column;align-items:center;gap:5px;flex:0 0 auto}
.Content .dmd-ava{
  position:relative;box-sizing:border-box;width:62px;height:62px;flex:0 0 auto;border-radius:50%;
  background:radial-gradient(circle at 34% 26%,#e8d8b0,#b39a6a);border:2px solid #c6a24a;
  box-shadow:0 1px 3px rgba(0,0,0,.22), inset 0 0 4px rgba(0,0,0,.14);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.Content .dmd-ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;z-index:1;border:0}
.Content .dmd-ava-fb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:30px;line-height:1;z-index:0}
.Content .dmd-avst{
  font-weight:bold;font-size:8px;letter-spacing:.6px;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:4px;margin-top:3px;padding:2px 9px;border-radius:9px;line-height:1.5;
}
.Content .dmd-avst.on{color:#135324;background:rgba(30,122,55,.12);box-shadow:inset 0 0 0 1px rgba(30,122,55,.28)}
.Content .dmd-avst.on::before{content:'\25CF';font-size:8px;line-height:1}
.Content .dmd-avst.off{color:#524831;background:rgba(140,120,80,.14);box-shadow:inset 0 0 0 1px rgba(140,120,80,.3)}
.Content .dmd-avedit{
  font-size:8px;font-weight:bold;letter-spacing:.5px;text-transform:uppercase;
  color:#6b4c12;text-decoration:none;border-bottom:1px dotted #a98a45;
}
.Content .dmd-id{flex:1;min-width:0}

/* (Onda 1 · 1.4) o nome e o protagonista: 28px + filete dourado */
.Content .dmd-nm{
  font-family:Georgia,'Times New Roman',serif;font-weight:bold;
  font-size:28px;line-height:1.08;letter-spacing:-.3px;color:#3a2308;
  display:inline-block;padding-bottom:4px;position:relative;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}
.Content .dmd-nm font{color:#3a2308 !important}
.Content .dmd-nm::after{
  content:'';display:block;width:min(320px,100%);height:2px;margin-top:6px;
  background:linear-gradient(90deg,#b8912e,#f2d17e 35%,#b8912e 70%,rgba(184,145,46,0));
}
.Content .dmd-sex{vertical-align:middle;margin:0 2px 0 5px}
.Content .dmd-vip{
  font-family:Georgia,'Times New Roman',serif;font-weight:bold;font-size:11px;letter-spacing:1.5px;
  color:#5a3d00;background:linear-gradient(to bottom,#ffe79a,#e0a400);border:1px solid #7a5a1e;
  border-radius:4px;padding:1px 7px;margin-left:5px;vertical-align:middle;
  box-shadow:0 1px 2px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.5);
}
.Content .dmd-sub{font-size:11px;color:#5f4d2c;margin-top:3px}
.Content .dmd-vsep{color:#b8a678;margin:0 1px}
.Content .dmd-vst.on{color:#175c2a;font-weight:bold}
.Content .dmd-vst.off{color:#706144}
.Content .dmd-rk{font-size:11px;margin-top:7px;color:#5a4f37;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.Content .dmd-rk-lb{font-size:9px;font-weight:bold;letter-spacing:1.2px;text-transform:uppercase;color:#5c4e32;margin-right:2px}
.Content .dmd-rk a{
  font-weight:bold;text-decoration:none;color:#5a3d00 !important;font-size:9px;letter-spacing:.4px;
  text-transform:uppercase;background:linear-gradient(180deg,#f3e3b4,#e2ce98);border:1px solid #b8912e;
  border-radius:20px;padding:3px 10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.15);
  transition:border-color .15s, color .15s;
}
.Content .dmd-rk a:hover{border-color:#8a6a22;color:#3a2600 !important}

/* flamulas (Onda 1 · 1.4b): 40px, sombra curta, so a 1a anima */
.Content .dmd-banners{position:absolute;top:-2px;right:12px;display:flex;gap:9px;z-index:6}
.Content .dmd-pennant{
  display:block;text-decoration:none;color:inherit;cursor:pointer;position:relative;width:40px;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.26));animation:dmdFade .5s ease both;
  transition:transform .16s, filter .16s;
}
.Content .dmd-pennant:nth-child(n+2){animation:none}
.Content .dmd-pennant:hover{transform:translateY(-3px);filter:brightness(1.08) drop-shadow(0 5px 5px rgba(0,0,0,.4))}
.Content .dmd-pennant:hover,.Content .dmd-pennant:hover *{text-decoration:none !important}
.Content .dmd-cloth{
  position:relative;margin:0;padding:9px 2px 14px;text-align:center;overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 86%,0 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3), inset 0 -8px 10px rgba(0,0,0,.25);
  background:linear-gradient(180deg,#4a221b,#210d08);
}
.Content .dmd-ico{font-size:12px;line-height:1;margin-bottom:2px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}
.Content .dmd-txt b{
  display:block;font-family:Georgia,'Times New Roman',serif;font-weight:bold;font-size:13px;line-height:1;
  color:#f2d17e;text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.Content .dmd-txt b::after{
  content:'';display:block;width:62%;height:2px;margin:3px auto 2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#8a7a5a 30%,#b9a67e 50%,#8a7a5a 70%,transparent);
}
.Content .dmd-txt span{
  display:block;font-weight:bold;font-size:7px;letter-spacing:.3px;color:#d8c8a8;
  text-shadow:0 1px 1px rgba(0,0,0,.6);text-transform:uppercase;white-space:nowrap;
}
.Content .dmd-t-gold .dmd-txt b::after{background:linear-gradient(90deg,transparent,#f2ce58 30%,#fff6cf 50%,#f2ce58 70%,transparent);box-shadow:0 0 4px rgba(242,206,88,.55)}
.Content .dmd-t-silver .dmd-txt b::after{background:linear-gradient(90deg,transparent,#c4ccd6 30%,#fff 50%,#c4ccd6 70%,transparent)}
.Content .dmd-t-bronze .dmd-txt b::after{background:linear-gradient(90deg,transparent,#c8863e 30%,#f2ca98 50%,#c8863e 70%,transparent)}
.Content .dmd-c-reset .dmd-cloth{background:linear-gradient(180deg,#4a221b,#210d08)}
.Content .dmd-c-rp .dmd-cloth{background:linear-gradient(180deg,#5c3a1a,#2e1a08)}
.Content .dmd-c-mdia .dmd-cloth{background:linear-gradient(180deg,#2e3a4e,#141c26)}

/* strip (Onda 1 · 1.4c + 1.3): Resets manda, Level recua, Atk|Def sao um par */
.Content .dmd-strip{display:flex;gap:8px;margin-top:8px}
.Content .dmd-cell{
  flex:1.1;text-align:center;padding:8px 3px 7px;border-radius:6px;border:1px solid #cdb884;
  border-top:2px solid #b8912e;background:#f6ecd0;min-width:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 2px 4px rgba(0,0,0,.12);
  display:flex;flex-direction:column;gap:3px;transition:border-color .15s, box-shadow .15s;
}
.Content .dmd-strip .dmd-cell:first-child{flex:.85}
.Content .dmd-cell.dmd-clk2,.Content .dmd-cell.dmd-hot{cursor:pointer}
.Content .dmd-cell.dmd-clk2:hover,.Content .dmd-cell.dmd-hot:hover{border-color:#8a6a22;box-shadow:inset 0 0 0 1px #e6c25a, 0 2px 4px rgba(0,0,0,.12)}
.Content .dmd-cell .v{
  font-family:Georgia,'Times New Roman',serif;font-size:18px;font-weight:bold;color:#4a2e08;line-height:1;
  text-shadow:0 1px 0 rgba(255,255,255,.45);font-variant-numeric:tabular-nums;
}
.Content .dmd-cell .l{font-size:9px;color:#7c6843;text-transform:uppercase;letter-spacing:.4px;font-weight:bold;line-height:1.2}
.Content .dmd-cell .s{font-size:9px;color:#765f2c}
.Content .dmd-cell.dmd-hot{
  flex:1.7;background:linear-gradient(180deg,#f9efd0,#eeddb0);border:1px solid #b8912e;border-top:3px solid #b8912e;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), inset 0 0 0 1px rgba(184,145,46,.25), 0 2px 5px rgba(0,0,0,.16);
}
.Content .dmd-cell.dmd-hot .v{font-size:22px;color:#5a3800}
.Content .dmd-cell.dmd-hot .l{color:#6f5620;font-size:9px}
.Content .dmd-cell.dmd-hot .l::before{content:'\1F451  ';font-size:9px}
.Content .dmd-cell .arw{font-size:9px;color:#895910;margin-left:3px}
.Content .dmd-strip .dmd-cell:nth-child(4){margin-left:13px;border-top-color:#8a2a2a}
.Content .dmd-strip .dmd-cell:nth-child(5){border-top-color:#2b4f9a}

/* ---------- 3 · faixa de XP (opcao 1, fora das abas) ---------- */
.Content .fg-xp{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.Content .fg-xpc{
  flex:1 1 118px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 4px 6px;border-radius:6px;border:1px solid #cdb884;border-top:2px solid #b8912e;
  background:#efdfba;box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2px 4px rgba(0,0,0,.12);
  cursor:pointer;transition:border-color .15s, box-shadow .15s;
}
.Content .fg-xpc:hover{border-color:#8a6a22;box-shadow:inset 0 0 0 1px #e6c25a, 0 2px 4px rgba(0,0,0,.12)}
.Content .fg-xpc .v{
  font-family:Georgia,'Times New Roman',serif;font-size:19px;font-weight:bold;color:#2e1d0a;line-height:1;
  font-variant-numeric:tabular-nums;
}
.Content .fg-xpc .v i{font-style:normal;font-size:12px;color:#6e5a2f;margin-left:1px}
.Content .fg-xpc .v.sm{font-size:14px;padding-top:3px}
.Content .fg-xpc .v.ok{color:#175c2a}
.Content .fg-xpc .l{font-size:9px;font-weight:bold;color:#6e5a2f;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
.Content .fg-xpc .arw{font-size:9px;color:#895910}
.Content .fg-xpc-hot{background:linear-gradient(180deg,#f9efd0,#eeddb0);border-color:#b8912e;flex:1.5 1 150px}
.Content .fg-xpc-hot .v{font-size:24px;color:#5a3800}

/* ================================================================
   4 · BARRA DE ABAS + PAREDES (enxerto da opcao 2)
   radio + :checked, sem JS. Os inputs ficam recortados (nao display:none),
   entao continuam focaveis: Tab entra na barra, setas trocam de parede.
   ================================================================ */
.Content .sal-r{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.Content .sal-bar{display:flex;gap:4px;margin:11px 0 0;padding:0 3px;
  border-bottom:2px solid #b8912e;position:relative;z-index:2}
.Content .sal-bar label{flex:1 1 0;min-width:0;position:relative;top:2px;
  display:flex;align-items:center;justify-content:center;gap:5px;cursor:pointer;
  font-family:Verdana,Arial,sans-serif;font-size:10px;font-weight:bold;letter-spacing:.5px;
  text-transform:uppercase;color:#6e5a2f;white-space:nowrap;padding:9px 7px 8px;
  border:1px solid #cdb884;border-bottom:none;border-radius:8px 8px 0 0;
  background:linear-gradient(180deg,#e2d0a6,#d2be8e);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
  transition:color .13s, background .13s, top .13s}
.Content .sal-bar label .ic{font-size:12px;line-height:1;filter:saturate(.85)}
.Content .sal-bar label:hover{color:#3a2308;background:linear-gradient(180deg,#eddfb8,#dccaa0)}
.Content #saltab1:checked ~ .sal-bar label[for="saltab1"],
.Content #saltab2:checked ~ .sal-bar label[for="saltab2"],
.Content #saltab3:checked ~ .sal-bar label[for="saltab3"],
.Content #saltab4:checked ~ .sal-bar label[for="saltab4"],
.Content #saltab5:checked ~ .sal-bar label[for="saltab5"]{
  top:0;color:#3a2308;border-color:#b8912e;
  background:linear-gradient(180deg,#f9efd0,#e7d6ae);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 -2px 6px rgba(0,0,0,.10)}
.Content #saltab1:checked ~ .sal-bar label[for="saltab1"]::after,
.Content #saltab2:checked ~ .sal-bar label[for="saltab2"]::after,
.Content #saltab3:checked ~ .sal-bar label[for="saltab3"]::after,
.Content #saltab4:checked ~ .sal-bar label[for="saltab4"]::after,
.Content #saltab5:checked ~ .sal-bar label[for="saltab5"]::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;background:#e7d6ae}
.Content #saltab1:focus-visible ~ .sal-bar label[for="saltab1"],
.Content #saltab2:focus-visible ~ .sal-bar label[for="saltab2"],
.Content #saltab3:focus-visible ~ .sal-bar label[for="saltab3"],
.Content #saltab4:focus-visible ~ .sal-bar label[for="saltab4"],
.Content #saltab5:focus-visible ~ .sal-bar label[for="saltab5"]{
  outline:2px solid #7a5410;outline-offset:1px;box-shadow:0 0 0 4px rgba(255,217,138,.55)}

.Content .sal-walls{border:1px solid #b8912e;border-top:none;border-radius:0 0 9px 9px;
  background:linear-gradient(180deg,#e7d6ae,#dfcda3);padding:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 3px 8px rgba(0,0,0,.14)}
.Content .sal-wall{display:none;animation:dmdFade .18s ease both}
.Content #saltab1:checked ~ .sal-walls .sal-w1,
.Content #saltab2:checked ~ .sal-walls .sal-w2,
.Content #saltab3:checked ~ .sal-walls .sal-w3,
.Content #saltab4:checked ~ .sal-walls .sal-w4,
.Content #saltab5:checked ~ .sal-walls .sal-w5{display:block}

/* ---------- 5 · regua de secao: o unico "titulo" dentro da ficha ---------- */
.Content .fg-rule{
  display:flex;align-items:center;gap:9px;margin:0 0 7px;
  font-size:9px;font-weight:bold;letter-spacing:1.6px;text-transform:uppercase;color:#6b5628;
}
.Content .fg-rule span{white-space:nowrap}
.Content .fg-rule::before{content:'';width:9px;height:9px;flex:0 0 auto;border-radius:2px;transform:rotate(45deg);background:linear-gradient(135deg,#e6c25a,#a2761a)}
.Content .fg-rule::after{content:'';flex:1 1 auto;height:1px;background:linear-gradient(90deg,rgba(184,145,46,.75),rgba(184,145,46,.12))}
.Content .fg-rule-w{margin-top:14px}
.Content .sal-wall > .fg-rule-w:first-child{margin-top:0}

/* ================================================================
   6 · O EIXO DE NUMEROS (.eix) — a divergencia desta opcao
   ---------------------------------------------------------------
   --eixn = largura FIXA da coluna do numero
   --eixm = largura FIXA da margem (selo #11, #2)
   --eixg = gap unico, usado no pai E nos filhos
   A regua vertical e um background ancorado A DIREITA (right calc(...)),
   por isso ela nao se move quando a caixa estica: ela mora no eixo.
   ================================================================ */
.Content .eix{
  --eixn:104px;--eixm:44px;--eixg:9px;--eixp:12px;
  background-color:#efdfba;
  background-image:linear-gradient(#cbb488,#cbb488);
  background-repeat:no-repeat;background-size:1px 100%;
  background-position:right calc(var(--eixp) + var(--eixm) + var(--eixg) - 3px) top;
  border:1px solid #cdb884;border-left:3px solid #b8912e;border-radius:6px;
  padding:2px 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2px 4px rgba(0,0,0,.10);
}
.Content .eix-r{
  display:grid;
  grid-template-columns:18px minmax(0,1fr) var(--eixn) var(--eixm);
  column-gap:var(--eixg);align-items:baseline;
  padding:7px var(--eixp) 7px 5px;
}
.Content .eix-r + .eix-r{border-top:1px solid rgba(203,180,136,.55)}
.Content .eix-r .i{font-size:12px;line-height:1.4;text-align:center;opacity:.85}

/* coluna 2: rotulo + contexto + guia pontilhada ate o numero */
/* flex-wrap: quando rotulo + contexto nao cabem numa linha, o CONTEXTO desce
   inteiro (nunca e cortado com reticencias — nada de informacao se perde) e o
   numero continua ancorado a primeira baseline, isto e, no mesmo eixo. */
.Content .eix-r .l{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;min-width:0}
.Content .eix-r .k{
  flex:0 1 auto;min-width:0;font-size:9px;font-weight:bold;letter-spacing:.5px;
  text-transform:uppercase;color:#6e5a2f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.Content .eix-r .c{
  flex:1 1 auto;min-width:0;font-size:10px;color:#5f4d2c;line-height:1.4;
}
.Content .eix-r .c a.lk{
  font-weight:bold;color:#7a5410;text-decoration:none;border-bottom:1px dotted #a98a45;margin-left:3px;
}
.Content .eix-r .c a.lk:hover{color:#4a3200;border-bottom-style:solid}
.Content .eix-r .l::after{
  content:'';flex:1 1 auto;min-width:10px;height:0;
  border-bottom:1px dotted rgba(122,90,30,.32);transform:translateY(-4px);
}
.Content .eix-r.mul .l::after{border-bottom-color:transparent}

/* coluna 3: O NUMERO. Sempre a direita, sempre na mesma coluna fixa. */
.Content .eix-r .n{
  font-family:Georgia,'Times New Roman',serif;font-size:17px;font-weight:bold;color:#2e1d0a;
  line-height:1.15;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;
}
.Content .eix-r .n.big{font-size:20px}
.Content .eix-r .n.sm{font-size:14px}
.Content .eix-r .n.txt{font-family:Georgia,'Times New Roman',serif;font-size:11px;letter-spacing:.2px}
.Content .eix-r .n.rub{color:#8a2a2a}
.Content .eix-r .n.aco{color:#2b4f9a}
.Content .eix-r .n.ok{color:#175c2a}
.Content .eix-r .n i{font-style:normal;font-size:9px;font-weight:bold;color:#6e5a2f;margin-left:2px;letter-spacing:.3px}
.Content .eix-r .n em{font-style:normal;font-size:inherit;color:inherit}

/* coluna 4: a margem. O selo pousa aqui e NUNCA empurra o numero. */
.Content .eix-r .m{justify-self:end;min-width:0}
.Content .eix-r .pos{
  display:inline-block;font-size:9px;font-weight:bold;letter-spacing:.4px;white-space:nowrap;
  color:#5a3d00;background:linear-gradient(180deg,#f3e3b4,#e2ce98);border:1px solid #b8912e;
  border-radius:20px;padding:1px 6px;
}

/* linhas multi-valor: grid FILHO que repete as mesmas colunas fixas e o mesmo
   gap. Como o filho ocupa exatamente [col2 + gap + col3 + gap + col4], o seu
   1fr e igual ao 1fr do pai — logo os sub-numeros caem no MESMO eixo. */
.Content .eix-r.mul .i{grid-column:1;grid-row:1}
.Content .eix-r.mul .l{grid-column:2;grid-row:1}
.Content .eix-r.mul .m{grid-column:4;grid-row:1}
.Content .eix-r.mul .subs{
  grid-column:2 / -1;grid-row:2;margin-top:4px;
  display:grid;grid-template-columns:minmax(0,1fr) var(--eixn) var(--eixm);
  column-gap:var(--eixg);row-gap:4px;align-items:baseline;
}
.Content .eix-r.mul .subs .t{
  grid-column:1;display:flex;align-items:baseline;gap:8px;min-width:0;
}
.Content .eix-r.mul .subs .t i{
  font-style:normal;font-size:10px;color:#5f4d2c;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.Content .eix-r.mul .subs .t::after{
  content:'';flex:1 1 auto;min-width:10px;height:0;
  border-bottom:1px dotted rgba(122,90,30,.45);transform:translateY(-4px);
}
.Content .eix-r.mul .subs .n{grid-column:2;font-size:15px}
.Content .eix-r.mul .subs .n.sm{font-size:13px}

/* ---------- 7 · ESTANDARTE DA CASA (aprovado) ---------- */
.Content .fg-estandarte{
  display:flex;align-items:center;gap:13px;padding:10px 13px;margin-bottom:14px;
  border:1px solid #b8912e;border-left:4px solid #8a2a2a;border-radius:8px;
  background:linear-gradient(180deg,#f3e6c6,#e2d1a8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 2px 5px rgba(0,0,0,.14);
}
.Content .fg-brasao{
  flex:0 0 auto;width:56px;height:56px;border-radius:10px;overflow:hidden;
  background:radial-gradient(circle at 40% 30%,#3a2a18,#150c05);
  border:2px solid #b8912e;
  box-shadow:inset 0 0 0 1px rgba(255,222,150,.25), 0 2px 5px rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;
}
.Content .fg-brasao img{max-width:100%;max-height:100%;object-fit:contain;display:block;border:0}
.Content .fg-est-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.Content .fg-est-k{font-size:9px;font-weight:bold;letter-spacing:1.6px;text-transform:uppercase;color:#6e5a2f}
.Content .fg-est-n{
  font-family:Georgia,'Times New Roman',serif;font-size:21px;font-weight:bold;line-height:1.1;
  color:#8a2a2a !important;text-decoration:none;text-shadow:0 1px 0 rgba(255,255,255,.5);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.Content .fg-est-n:hover{color:#5e1a1a !important}
.Content .fg-est-c{font-size:11px;color:#5f4d2c;font-weight:bold}
.Content .fg-est-c em{font-style:normal;font-weight:normal;font-size:10px;color:#6e5a2f}
.Content .fg-est-go{
  flex:0 0 auto;font-size:9px;font-weight:bold;letter-spacing:.6px;text-transform:uppercase;
  color:#5a3d00 !important;text-decoration:none;background:linear-gradient(180deg,#f3e3b4,#e2ce98);
  border:1px solid #b8912e;border-radius:20px;padding:4px 11px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.Content .fg-est-go:hover{border-color:#8a6a22;color:#3a2600 !important}

/* ---------- 8 · FOLHA DE SERVICO (opcao 1): as datas ---------- */
.Content .fg-servico{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  border:1px solid #cdb884;border-top:2px solid #b8912e;border-radius:6px;overflow:hidden;
  background:#efdfba;box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2px 4px rgba(0,0,0,.10);
}
.Content .fg-sv{
  display:flex;flex-direction:column;gap:2px;padding:9px 12px;min-width:0;
  border-left:1px solid #cbb488;
}
.Content .fg-sv:first-child{border-left:none}
.Content .fg-sv .k{font-size:9px;font-weight:bold;letter-spacing:1.2px;text-transform:uppercase;color:#6e5a2f}
.Content .fg-sv .v{
  font-family:Georgia,'Times New Roman',serif;font-size:17px;font-weight:bold;color:#2e1d0a;line-height:1.15;
  font-variant-numeric:tabular-nums;
}
.Content .fg-sv .h{font-size:10px;color:#6e5a2f}
.Content .fg-sv-mid .v{color:#5a3800}
.Content .fg-sv-mid{background:linear-gradient(180deg,#f9efd0,#eeddb0)}

/* ================================================================
   9 · A ARMARIA (enxerto da opcao 2 — "e perfeita, tem que ir")
   paper-doll com nichos + as 10 reliquias com nome e atributos SEM hover
   ================================================================ */
.Content .sal-armaria{display:flex;flex-wrap:wrap;gap:11px;
  padding:11px;border:1px solid #cdb884;border-radius:8px;background:#efdfba;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2px 4px rgba(0,0,0,.10)}
.Content .sal-doll{flex:0 0 272px;max-width:100%;padding:10px 12px 12px;border-radius:9px;
  border:1px solid #b08d3f;
  background:radial-gradient(120% 80% at 50% 0%, rgba(255,246,214,.85), rgba(255,246,214,0) 62%),
             linear-gradient(180deg,#e9d8b0,#d8c7a0);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45), inset 0 0 22px rgba(122,90,30,.13)}
.Content .sal-dolltop{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.Content .sal-dolltop span{font-family:Georgia,'Times New Roman',serif;font-size:11px;font-weight:bold;
  letter-spacing:2px;text-transform:uppercase;color:#7a5410;white-space:nowrap}
.Content .sal-dolltop i{flex:1;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(184,145,46,0),#b8912e 45%,#f2d17e 60%,rgba(184,145,46,0))}
.Content .sal-dolltop i:first-child{background:linear-gradient(270deg,rgba(184,145,46,0),#b8912e 45%,#f2d17e 60%,rgba(184,145,46,0))}
.Content .sal-dollgrid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.Content .sal-silhueta{position:absolute;left:50%;top:2%;transform:translateX(-50%);
  height:96%;opacity:.14;pointer-events:none;z-index:0}
.Content .sal-slot{position:relative;z-index:1;aspect-ratio:1/1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;border-radius:9px;
  border:1px solid #a07d1e;padding:4px;
  background:linear-gradient(180deg,#3a2416,#1d1108);
  box-shadow:inset 0 0 0 1px rgba(242,209,126,.42), inset 0 2px 7px rgba(0,0,0,.6),
             0 1px 3px rgba(0,0,0,.3)}
.Content .sal-slot img{width:44px;height:44px;object-fit:contain;image-rendering:pixelated;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));border:0}
.Content .sal-slot .sk{font-size:7px;font-weight:bold;letter-spacing:.5px;text-transform:uppercase;
  color:#c9b184;line-height:1;text-align:center}
.Content .sal-slot.sal-nicho{background:linear-gradient(180deg,#2a1a10,#150c06);border-color:#6e5423;
  box-shadow:inset 0 0 0 1px rgba(242,209,126,.16), inset 0 2px 8px rgba(0,0,0,.7)}
.Content .sal-slot.sal-nicho .sk{color:#7d6a48}
.Content .sal-reliqs{flex:1 1 240px;min-width:0}
.Content .sal-relic{display:flex;align-items:center;gap:9px;padding:5px 7px;
  border-bottom:1px dashed #d5c398;min-width:0}
.Content .sal-relic:last-child{border-bottom:none}
.Content .sal-relic img{flex:0 0 auto;width:26px;height:26px;object-fit:contain;
  image-rendering:pixelated;border:0}
.Content .sal-relic .tx{min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 7px}
.Content .sal-relic .sl{flex:0 0 58px;font-size:8px;font-weight:bold;letter-spacing:.5px;
  text-transform:uppercase;color:#6e5a2f}
.Content .sal-relic .nm{flex:1 1 150px;min-width:0;font-family:Georgia,'Times New Roman',serif;
  font-size:12px;font-weight:bold;color:#2e1d0a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.Content .sal-relic .at{flex:1 1 auto;display:flex;flex-wrap:wrap;gap:4px}
.Content .sal-relic .at b{font-family:Verdana,Arial,sans-serif;font-size:9px;font-weight:bold;
  letter-spacing:.3px;padding:1px 7px;border-radius:10px;white-space:nowrap}
.Content .sal-relic .at .up{color:#5a3d00;background:rgba(184,145,46,.22);border:1px solid rgba(184,145,46,.6)}
.Content .sal-relic .at .rub{color:#8a2a2a;background:rgba(138,42,42,.10);border:1px solid rgba(138,42,42,.42)}
.Content .sal-relic .at .aco{color:#2b4f9a;background:rgba(43,79,154,.10);border:1px solid rgba(43,79,154,.42)}

/* ---------- 10 · CRONICA (baixas) ---------- */
.Content .fg-baixas{
  border:1px solid #cdb884;border-left:3px solid #8a2a2a;border-radius:6px;overflow:hidden;
  background:#efdfba;box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2px 4px rgba(0,0,0,.10);
}
.Content .fg-bx{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:baseline;gap:0 12px;padding:7px 11px}
.Content .fg-bx + .fg-bx{border-top:1px solid rgba(203,180,136,.6)}
.Content .fg-bx .d{
  font-family:Georgia,'Times New Roman',serif;font-size:11px;font-weight:bold;color:#6b5628;
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.Content .fg-bx .d i{font-style:normal;display:block;font-family:Verdana,Arial,sans-serif;font-size:9px;color:#6e5a2f;font-weight:normal}
.Content .fg-bx .t{font-size:11px;color:#3a2c14;line-height:1.45;min-width:0}
.Content .fg-bx .t b{font-family:Georgia,'Times New Roman',serif;font-size:12px;color:#2e1d0a}
.Content .fg-bx .t em{font-style:normal;display:block;font-size:10px;color:#8a2a2a;font-weight:bold}
.Content .fg-mais{margin-top:7px;font-size:10px}
.Content .fg-mais a{color:#7a5410;font-weight:bold;text-decoration:none;letter-spacing:.4px;border-bottom:1px dotted #a98a45}
.Content .fg-mais a:hover{color:#4a3200;border-bottom-style:solid}

/* ---------- 11 · PROGRESSO ---------- */
.Content .fg-prog{display:flex;flex-direction:column;gap:6px}
.Content .fg-pg{display:grid;grid-template-columns:64px minmax(0,1fr) 54px;align-items:center;gap:10px}
.Content .fg-pg .k{font-size:10px;font-weight:bold;letter-spacing:.6px;text-transform:uppercase;color:#4a3a1c}
.Content .fg-pg .bar{
  height:14px;border-radius:6px;background:#d8c7a0;border:1px solid #b08d3f;overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.22);
}
.Content .fg-pg .bar i{
  display:block;height:100%;border-radius:6px;
  background:linear-gradient(180deg,#f0c04a,#c89a2e);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.Content .fg-pg .bar i.hi{background:linear-gradient(180deg,#5bd06e,#2f9e47)}
.Content .fg-pg .p{
  font-family:Georgia,'Times New Roman',serif;font-size:13px;font-weight:bold;color:#4a3410;text-align:right;
  font-variant-numeric:tabular-nums;
}

/* ---------- 12 · LISTA COMPACTA DOS 16 PERSONAGENS (opcao 1) ---------- */
.Content .fg-roster{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:6px}
.Content .fg-ch{
  display:grid;grid-template-columns:20px 30px minmax(0,1fr) auto;align-items:center;gap:8px;
  padding:5px 10px 5px 6px;min-width:0;text-decoration:none;
  background:#efdfba;border:1px solid #cdb884;border-radius:6px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
  transition:border-color .12s, box-shadow .12s;
}
.Content .fg-ch:hover{border-color:#8a6a22;box-shadow:inset 0 0 0 1px #e6c25a}
.Content .fg-ch .n{font-size:9px;font-weight:bold;color:#79601e;text-align:right;font-variant-numeric:tabular-nums}
.Content .fg-ch .av{
  position:relative;overflow:hidden;
  width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:Georgia,'Times New Roman',serif;font-size:14px;font-weight:bold;color:#4a2e08;
  background:radial-gradient(circle at 34% 26%,#e8d8b0,#b39a6a);border:1px solid #c6a24a;
}
.Content .fg-ch .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;border:0}
.Content .fg-ch .nm{
  font-family:Georgia,'Times New Roman',serif;font-size:12px;font-weight:bold;color:#2e1d0a;line-height:1.15;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.Content .fg-ch .rr{
  grid-column:3;font-family:Verdana,Arial,sans-serif;font-size:9px;letter-spacing:.4px;
  text-transform:uppercase;color:#706144;
}
.Content .fg-ch .rr b{font-family:Georgia,'Times New Roman',serif;font-size:13px;color:#4a2e08;letter-spacing:0;margin-right:2px}
.Content .fg-ch .st{
  grid-row:1 / span 2;grid-column:4;font-size:9px;font-weight:bold;letter-spacing:.4px;
  display:inline-flex;align-items:center;gap:4px;
}
.Content .fg-ch .st::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.Content .fg-ch .st.on{color:#175c2a}
.Content .fg-ch .st.off{color:#706144}
.Content .fg-ch.me{
  border-color:#b8912e;background:linear-gradient(180deg,#f9efd0,#eeddb0);
  box-shadow:inset 0 0 0 1px #e6c25a,0 2px 6px rgba(0,0,0,.16);
}
.Content .fg-ch .nm{grid-row:1;grid-column:3}
.Content .fg-ch .n{grid-row:1 / span 2;grid-column:1}
.Content .fg-ch .av{grid-row:1 / span 2;grid-column:2}

/* ---------- 13 · BUSCA (fora das abas) ---------- */
.Content .fg-busca{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;padding:9px 11px;
  border-top:2px solid #b8912e;border-radius:0 0 6px 6px;
  background:linear-gradient(180deg,rgba(239,223,186,.55),rgba(216,199,160,.55));
}
.Content .fg-bk{font-size:9px;font-weight:bold;letter-spacing:1.4px;text-transform:uppercase;color:#4a3a1c}
.Content .fg-busca input[name="name"]{
  flex:1 1 160px;min-width:0;background:#efdfba;border:1px solid #b8912e;border-radius:6px;
  padding:6px 10px;color:#2e1d0a;font-family:Verdana,Arial,sans-serif;font-size:11px;
}
.Content .fg-busca input[name="name"]:focus{
  outline:none;border-color:#e6c25a;
  box-shadow:0 0 0 2px rgba(255,217,138,.35), inset 0 1px 2px rgba(0,0,0,.12);
}
.Content .fg-busca .dmd-btn{
  display:inline-flex;align-items:center;justify-content:center;font-family:Verdana,Arial,sans-serif;
  font-size:12px;font-weight:bold;color:#3a2600;padding:6px 20px;border:1px solid #a07d1e;
  border-top-color:#f0cf6a;border-bottom-color:#7a5a1e;border-radius:6px;cursor:pointer;
  background:linear-gradient(180deg,#f2cf6a,#c89a2e);
  box-shadow:0 2px 5px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.5);
  text-shadow:0 1px 0 rgba(255,255,255,.35);transition:filter .12s, transform .12s;
}
.Content .fg-busca .dmd-btn:hover{filter:brightness(1.07);transform:translateY(-1px)}

/* ---------- 14 · anel de foco (Onda 1 · 1.9) ---------- */
.Content .dmd-cell:focus-visible,
.Content .fg-xpc:focus-visible,
.Content .dmd-rk a:focus-visible,
.Content .dmd-pennant:focus-visible,
.Content .fg-est-n:focus-visible,
.Content .fg-est-go:focus-visible,
.Content .fg-ch:focus-visible,
.Content .fg-mais a:focus-visible,
.Content .eix-r .c a.lk:focus-visible{
  outline:2px solid #7a5410;outline-offset:2px;
  box-shadow:0 0 0 4px rgba(255,217,138,.55);
}

/* ================================================================
   15 · ELASTICIDADE — o eixo tem de sobreviver de 765px a 560px
   As colunas fixas nao dependem da largura da caixa, entao o eixo ja
   e estavel. Aqui so encurtamos as reservas para o rotulo respirar:
   como as variaveis vivem em .eix, TODAS as linhas (principais e
   sub-linhas) mudam no mesmo instante — o eixo se desloca inteiro,
   nunca se quebra em duas colunas.
   ================================================================ */
@media (max-width:660px){
  .Content .eix{--eixn:92px;--eixm:38px;--eixg:7px;--eixp:10px}
  .Content .eix-r .n{font-size:16px}
  .Content .eix-r .n.big{font-size:18px}
  .Content .sal-bar label{font-size:9px;padding:8px 5px 7px;letter-spacing:.2px;gap:4px}
  .Content .sal-walls{padding:10px}
}
@media (max-width:560px){
  .Content .dmd-hero{flex-direction:column;text-align:center;padding-right:14px}
  .Content .dmd-hero-banners{padding-right:14px}
  .Content .dmd-banners{position:static;justify-content:center;margin-bottom:8px}
  .Content .dmd-rk{justify-content:center}
  .Content .dmd-nm{font-size:22px}
  .Content .dmd-strip{flex-wrap:wrap}
  .Content .dmd-strip .dmd-cell,.Content .dmd-strip .dmd-cell:first-child{flex:1 0 30%}
  .Content .dmd-cell.dmd-hot{flex:1 0 46%}
  .Content .dmd-strip .dmd-cell:nth-child(4){margin-left:0}
  .Content .fg-vg-s{display:none}
  .Content .sal-bar label .ic{display:none}
  .Content .sal-doll{flex:1 1 100%}
  .Content .fg-servico{grid-template-columns:1fr}
  .Content .fg-sv{border-left:none;border-top:1px solid #cbb488}
  .Content .fg-sv:first-child{border-top:none}
  /* o contexto ja desce sozinho por flex-wrap; aqui so forcamos a quebra para
     dar respiro ao rotulo. O NUMERO nao se move em nenhum dos dois casos. */
  .Content .eix-r .c{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  .Content .dmd-pennant{animation:none;transition:none}
  .Content .sal-wall{animation:none}
  .Content .fg-busca .dmd-btn{transition:none}
}
/* ==== DMD PAGINA DE PERSONAGEM · OPCAO A "O EIXO DE NUMEROS" - END ==== */

/* ==== DMD EIXO DE NUMEROS - END ==== */

/* ==== DMD EIXO AJUSTE COLUNA ESTREITA - BEGIN - apagar p/ reverter ====
   Medido em producao: dentro de .dmd-grid2 (Combate & PvP e Conta & Vantagens) o .eix tem
   256px, e com --eixn:104px + --eixm:44px sobravam 41,5px para o rotulo -> os 11 rotulos
   saiam truncados ("CRITICO / ESQUI...") e a 4a coluna ficava como uma faixa vazia a direita.
   A media query da linha ~7499 nao resolve: a largura da caixa nao acompanha a da janela
   (o miolo e elastico via margin, nao via @media). Por isso o ajuste e por CONTEXTO. */
.Content .dmd-grid2 .eix{--eixn:62px;--eixm:auto;--eixg:7px;--eixp:8px}
.Content .dmd-grid2 .eix-r .k{white-space:normal;overflow:visible;text-overflow:clip}
/* o selo (#11, #2) so ocupa espaco quando existe */
.Content .eix-r .rk{justify-self:end}
.Content .sal-reltop{font:bold 9px Verdana,Arial,sans-serif;letter-spacing:1.1px;
  text-transform:uppercase;color:#6e5a2f;padding:0 0 6px;margin-bottom:4px;
  border-bottom:1px solid rgba(184,145,46,.45)}
/* ==== DMD EIXO AJUSTE COLUNA ESTREITA - END ==== */

/* ==== DMD EIXO AJUSTE 2 (retorno do dono 27/07) - BEGIN - apagar p/ reverter ====
   1) coluna do selo (#11) colapsa quando vazia TAMBEM na caixa larga -> some a
      faixa morta a direita do Mundo & Social;
   2) as duas caixas do grid ficam da MESMA altura (o dono: "nao quero menus em
      tamanhos diferentes sobrando espacos");
   3) encurta o vao entre a ultima caixa e "Procurar personagem". */
.Content .eix{--eixm:auto}

/* (27/07 correcao) Igualar altura foi ERRO meu: como Conta tem menos linhas que
   Combate, sobrou um vazio grande embaixo — exatamente o que o dono nao queria.
   Volta a altura NATURAL: cada caixa termina onde o conteudo termina. */
.Content .dmd-grid2{align-items:start}

/* o vao antes da busca: os <br> soltos somavam ~45px depois das abas */
.Content .sal-walls + br,
.Content .sal-walls ~ br{display:none}
.Content form[action="?subtopic=characters"]{margin-top:14px}
/* ==== DMD EIXO AJUSTE 2 - END ==== */

/* ==== DMD EIXO AJUSTE 3 (arsenal lado a lado) - BEGIN - apagar p/ reverter ====
   O dono mostrou o boneco sozinho, sem a lista das pecas ao lado. A .sal-armaria
   precisa ser flex com os dois filhos podendo encolher; sem min-width:0 a lista
   nao cabe e desce (ou some da vista). Abaixo de ~520px ela quebra de proposito. */
.Content .sal-armaria{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start}
.Content .sal-armaria .sal-doll{flex:0 1 300px;min-width:250px}
.Content .sal-armaria .sal-reliqs{flex:1 1 300px;min-width:0}
.Content .sal-relic .nm{overflow-wrap:anywhere}
/* ==== DMD EIXO AJUSTE 3 - END ==== */

/* ==== DMD EIXO AJUSTE 4 (retorno do dono) - BEGIN - apagar p/ reverter ====
   1) o VIP horizontal ("28d 0h 2min") vazava para fora da caixa: o .n estava
      com nowrap e sem folga. Agora quebra em vez de escapar.
   2) a lista de reliquias ganhou miniatura do sprite (.th) e o nome do item
      para de ser cortado com reticencias — a proposta nunca cortou nome. */
/* (correcao) o white-space:normal daqui foi o que jogou o VIP para vertical de novo.
   O valor volta a ficar em UMA linha; quem cede espaco e o rotulo, nao o numero. */
.Content .eix-r .n{white-space:nowrap;text-align:right}
.Content .eix-r .l{min-width:0}
.Content .eix-r .k{overflow-wrap:anywhere}
.Content .eix-r .n i{font-style:normal;font-size:8px;letter-spacing:.3px;
  color:#6e5a2f;margin-left:2px;text-transform:uppercase}

.Content .sal-relic{display:flex;align-items:flex-start;gap:8px;flex-wrap:nowrap}
.Content .sal-relic .th{flex:0 0 26px;width:26px;height:26px;display:flex;
  align-items:center;justify-content:center;border-radius:5px;
  background:radial-gradient(circle at 34% 28%,#3a2a18,#1a1109);
  box-shadow:inset 0 0 0 1px rgba(184,145,46,.45)}
.Content .sal-relic .th img{max-width:22px;max-height:22px;image-rendering:pixelated}
.Content .sal-relic .nm{white-space:normal;overflow:visible;text-overflow:clip;
  overflow-wrap:anywhere}
/* ==== DMD EIXO AJUSTE 4 - END ==== */

/* ==== DMD EIXO AJUSTE 5 (filete no lugar da caixa) - BEGIN - apagar p/ reverter ====
   Dentro das abas a proposta usa filete fino, nao caixa de verga escura. Como os
   blocos deixaram de ser .TableContainer, o respiro tem de vir daqui. */
.Content .sal-wall > .fg-rule{margin-top:14px}
.Content .sal-wall > .fg-rule:first-child{margin-top:2px}
.Content .sal-wall > .dmdg{padding:2px 0 8px}
.Content .dmd-grid2{gap:0 18px}
/* ==== DMD EIXO AJUSTE 5 - END ==== */

/* ==== DMD EIXO AJUSTE 6 - BEGIN - apagar p/ reverter ====
   1) .dmd-gcell: filete+conteudo como UM item do grid (o titulo ia p/ uma coluna
      e a caixa p/ outra — o "vazio enorme" do print do dono);
   2) a coluna do numero cresce por linha quando o valor nao cabe nos 62px
      (o "17d 3h 52min" do VIP saia cortado na borda). */
.Content .dmd-gcell{min-width:0}
.Content .dmd-grid2 > .dmd-gcell{display:block}
.Content .dmd-grid2 .eix{--eixn:minmax(62px,max-content)}
.Content .eix-r .n i{margin-left:1px}
/* ==== DMD EIXO AJUSTE 6 - END ==== */

/* ==== DMD EIXO AJUSTE 7 - BEGIN - apagar p/ reverter ====
   Nome curto deixava a pilula de atributo subir para o lado (zigue-zague na
   lista das pecas). Atributo agora fica SEMPRE sob o nome, coluna reta. */
.Content .sal-relic .at{flex:1 1 100%}
/* ==== DMD EIXO AJUSTE 7 - END ==== */



/* ==== DMD EIXO AJUSTE 9 (moldura da ficha) - BEGIN - apagar p/ reverter ====
   A verga interna "Character Information" some SO nesta pagina (o :has mira o
   TableContainer que contem #dmdTable1 — nenhuma outra pagina tem esse id).
   A barra global do site NAO e tocada. .fg-bodyx da o respiro interno da moldura. */
.Content .TableContainer:has(#dmdTable1) > .CaptionContainer{display:none}
.Content .fg-bodyx{padding:10px 10px 4px}
.Content .fg-bodyx > .TableContainer:first-child{margin-top:0}
/* ==== DMD EIXO AJUSTE 9 - END ==== */



/* ==== DMD EIXO AJUSTE 11 (titulo content_box + moldura) - BEGIN - apagar p/ reverter ====
   O subtitulo dentro do titulo oficial (mesma barra da Highscores) e o respiro
   da moldura dourada. Nada global muda: .content_box so existe quando a pagina
   emite, e o <small> so existe na characters. */
.content_box small{font-size:10pt;letter-spacing:1.2px;margin-left:12px;
  color:#e8d0a8;text-transform:uppercase;font-family:Verdana,Arial,sans-serif;
  font-size:9px;font-weight:bold;vertical-align:2px}
.Content .fg{margin-top:2px}
/* ==== DMD EIXO AJUSTE 11 - END ==== */

/* ==== DMD EIXO AJUSTE 12 (retorno do dono) - BEGIN - apagar p/ reverter ====
   1) as caixas recortadas (Tasks/Quests, Frags, Personagens) mantinham a moldura
      3D do .TableContainer -> "relevo estranho" dentro das abas. Achatadas.
   2) cor 'ouro' para valores que estavam pretos "sem vida" (Docura/VIP/Tokens).
   3) nichos Cap/Alma no lugar dos 2 vazios do boneco. */
.Content .sal-wall .TableContainer{background:none;border:0;box-shadow:none;margin:0}
.Content .sal-wall .TableContainer .Border_2,
.Content .sal-wall .TableContainer .Border_3,
.Content .sal-wall .TableContainer .BoxContent,
.Content .sal-wall .TableContainer .TableContentContainer,
.Content .sal-wall .TableContainer .TableContentAndRightShadow,
.Content .sal-wall .TableContainer .InnerTableContainer{background:none !important;
  border:0 !important;box-shadow:none !important;padding:0}
.Content .sal-wall .TableShadowContainer,
.Content .sal-wall .TableShadowContainerRightTop,
.Content .sal-wall .TableShadowRightTop{display:none}

.Content .eix-r .n.ouro{color:#8a5a10}
.Content .eix-r .n.ouro i{color:#a07d2a}

.Content .sal-slot.is-stat{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;background:radial-gradient(circle at 40% 30%,#2c2015,#171009)}
.Content .sal-slot.is-stat b{font-family:Georgia,'Times New Roman',serif;font-size:15px;
  font-weight:bold;color:#f2d17e;line-height:1}
.Content .sal-slot.is-stat b i{font-style:normal;font-size:9px;color:#c2a877;margin-left:1px}
/* ==== DMD EIXO AJUSTE 12 - END ==== */

/* ==== DMD EIXO AJUSTE 13 (cor que informa) - BEGIN - apagar p/ reverter ====
   A cor passa a carregar GRANDEZA, nao so enfeite: frio = pouco, quente = muito.
   Reusa a paleta do projeto (aco/verde/ouro/rubi) — nenhuma cor nova. */
.Content .eix-r .n.apagado{color:#7a6a4e}
.Content .eix-r .n.pos{color:#175c2a}
.Content .eix-r .n.ouro{color:#8a5a10}
.Content .eix-r .n.rub{color:#8a2a2a}
.Content .eix-r .n.aco{color:#2b4f9a}
.Content .eix-r .n.big{font-size:19px}
.Content .eix-r .n.apagado i,.Content .eix-r .n.pos i,
.Content .eix-r .n.rub i,.Content .eix-r .n.aco i{color:inherit;opacity:.7}

/* Folha de Servico: a celula inteira ganha o tom, com um fio na base */
.Content .fg-sv.is-pos  .v{color:#175c2a}
.Content .fg-sv.is-ouro .v{color:#8a5a10}
.Content .fg-sv.is-aco  .v{color:#2b4f9a}
.Content .fg-sv.is-frio .v{color:#7a6a4e}
.Content .fg-sv.is-pos {box-shadow:inset 0 -2px 0 rgba(23,92,42,.45)}
.Content .fg-sv.is-ouro{box-shadow:inset 0 -2px 0 rgba(184,145,46,.5)}
.Content .fg-sv.is-aco {box-shadow:inset 0 -2px 0 rgba(43,79,154,.35)}
.Content .fg-sv.is-frio{box-shadow:inset 0 -2px 0 rgba(122,106,78,.3)}
/* ==== DMD EIXO AJUSTE 13 - END ==== */

/* ==== DMD EIXO AJUSTE 14 (barra de stamina) - BEGIN - apagar p/ reverter ====
   Como no cliente: trilho escuro, preenchimento verde e o tempo por cima.
   Teto 42h (2520 min). Verde cheio, ambar na media, rubi quando esta acabando. */
.Content .eix-r .stbar{position:relative;display:block;height:15px;border-radius:8px;
  background:linear-gradient(180deg,#2a1f14,#161009);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.35);
  overflow:hidden;min-width:120px}
.Content .eix-r .stbar i{position:absolute;left:0;top:0;bottom:0;border-radius:8px;
  background:linear-gradient(180deg,#5bd06e,#2f9e47);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.Content .eix-r .stbar.mid i{background:linear-gradient(180deg,#f0c04a,#c89a2e)}
.Content .eix-r .stbar.low i{background:linear-gradient(180deg,#d05a4a,#8a2a2a)}
.Content .eix-r .stbar b{position:relative;z-index:1;display:block;text-align:center;
  font:bold 10px Verdana,Arial,sans-serif;line-height:15px;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.85)}
/* ==== DMD EIXO AJUSTE 14 - END ==== */

/* ==== DMD EIXO AJUSTE 15 - BEGIN - apagar p/ reverter ====
   ".Content .eix-r .pos" era uma PILULA (fundo+borda) de outro contexto e pegava
   os numeros com classe pos: o 491 de kills virava capsula dourada e o 337 ficava
   texto puro — par desalinhado. Como numero, pos e so a cor verde. */
.Content .eix-r .n.pos,.Content .eix-r .subs .n.pos,.Content .eix-r b.n.pos{
  display:inline;background:none;border:0;border-radius:0;padding:0;
  box-shadow:none;color:#175c2a;font-size:inherit;letter-spacing:inherit}
/* ==== DMD EIXO AJUSTE 15 - END ==== */

/* ==== DMD EIXO AJUSTE 16 (barras de vida/mana) - BEGIN - apagar p/ reverter ====
   Como no cliente: verde e azul lado a lado, largura proporcional, valor por cima.
   Valores /1000 no PHP (o banco guarda milesimos: 518.956.694 = 518.956 na tela). */
.Content .vmbar{display:flex;height:17px;border-radius:9px;overflow:hidden;margin:0 0 10px;
  background:linear-gradient(180deg,#2a1f14,#161009);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.35)}
.Content .vmbar span{position:relative;display:flex;align-items:center;justify-content:center;
  min-width:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.Content .vmbar .hp{background:linear-gradient(180deg,#e0574a,#a5241c)}
.Content .vmbar .mp{background:linear-gradient(180deg,#5a8fd8,#27488c)}
.Content .vmbar b{font:bold 10px Verdana,Arial,sans-serif;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.85);white-space:nowrap;overflow:hidden;padding:0 6px}
/* ==== DMD EIXO AJUSTE 16 - END ==== */

/* ==== DMD EIXO AJUSTE 17 (cores dos elementos, como no cliente) - BEGIN ====
   Fogo vermelho, gelo ciano, terra verde, energia roxo, holy dourado,
   death rubi escuro, physical cinza. Tons escurecidos o suficiente para
   passar no contraste sobre pergaminho (o cliente usa fundo preto). */
.Content .eix-r .n.el-fire  {color:#b23a1e}
.Content .eix-r .n.el-ice   {color:#1f6f8f}
.Content .eix-r .n.el-earth {color:#3f7a2a}
.Content .eix-r .n.el-energy{color:#6b3fa0}
.Content .eix-r .n.el-holy  {color:#9a6b12}
.Content .eix-r .n.el-death {color:#6e1f2a}
.Content .eix-r .n.el-phys  {color:#5c5347}
.Content .eix-r .n.el-dist  {color:#8a2a2a}
.Content .eix-r .n.el-shield{color:#2b4f9a}
.Content .eix-r .n.el-melee {color:#7a4a1e}
.Content .eix-r .n.ml       {color:#175c2a}
.Content .eix-r .n.el-fire i,.Content .eix-r .n.el-ice i,.Content .eix-r .n.el-earth i,
.Content .eix-r .n.el-energy i,.Content .eix-r .n.el-holy i,.Content .eix-r .n.el-death i,
.Content .eix-r .n.el-phys i,.Content .eix-r .n.ml i{color:inherit;opacity:.7}
/* ==== DMD EIXO AJUSTE 17 - END ==== */

/* ==== DMD EIXO AJUSTE 18 (lista de reliquias) - BEGIN - apagar p/ reverter ====
   Antes: 10 nomes iguais em preto, tracinho entre eles, pilulas todas beges.
   Agora: (1) o nome ganha tom pela FORCA da peca; (2) a pilula de elemento usa
   a cor do elemento; (3) o separador vira um losango de ouro que so aparece
   ENTRE as pecas — arremate em vez de linha tracejada. */
.Content .sal-relic{border-bottom:0;position:relative;padding:7px 7px}
.Content .sal-relic + .sal-relic::before{content:'';position:absolute;left:34px;right:8px;top:0;
  height:1px;background:linear-gradient(90deg,rgba(184,145,46,0),rgba(184,145,46,.42) 18%,
  rgba(184,145,46,.42) 82%,rgba(184,145,46,0))}
.Content .sal-relic + .sal-relic::after{content:'';position:absolute;left:50%;top:-3px;
  width:5px;height:5px;margin-left:-3px;transform:rotate(45deg);
  background:linear-gradient(135deg,#f2d17e,#b8912e);box-shadow:0 0 0 1px rgba(122,90,30,.35)}
.Content .sal-relic:hover{background:rgba(184,145,46,.07);border-radius:6px}

/* tom do nome pela forca da peca */
.Content .sal-relic.t-comum .nm{color:#4a3f2c}
.Content .sal-relic.t-raro  .nm{color:#2b4f9a}
.Content .sal-relic.t-epic  .nm{color:#6b3fa0}
.Content .sal-relic.t-lend  .nm{color:#8a5a10;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.Content .sal-relic.t-lend .sl{color:#8a5a10}

/* pilulas de atributo com a cor do elemento */
.Content .sal-relic .at b.el-fire  {color:#b23a1e;background:rgba(178,58,30,.10);border-color:rgba(178,58,30,.45)}
.Content .sal-relic .at b.el-ice   {color:#1f6f8f;background:rgba(31,111,143,.10);border-color:rgba(31,111,143,.45)}
.Content .sal-relic .at b.el-earth {color:#3f7a2a;background:rgba(63,122,42,.10);border-color:rgba(63,122,42,.45)}
.Content .sal-relic .at b.el-energy{color:#6b3fa0;background:rgba(107,63,160,.10);border-color:rgba(107,63,160,.45)}
.Content .sal-relic .at b.el-holy  {color:#9a6b12;background:rgba(154,107,18,.12);border-color:rgba(154,107,18,.5)}
.Content .sal-relic .at b.el-death {color:#6e1f2a;background:rgba(110,31,42,.10);border-color:rgba(110,31,42,.45)}
.Content .sal-relic .at b.el-phys  {color:#5c5347;background:rgba(92,83,71,.10);border-color:rgba(92,83,71,.45)}
.Content .sal-relic .at b.el-dist  {color:#8a2a2a;background:rgba(138,42,42,.10);border-color:rgba(138,42,42,.45)}
.Content .sal-relic .at b.el-shield{color:#2b4f9a;background:rgba(43,79,154,.10);border-color:rgba(43,79,154,.45)}
.Content .sal-relic .at b.ml       {color:#175c2a;background:rgba(23,92,42,.10);border-color:rgba(23,92,42,.45)}
/* ==== DMD EIXO AJUSTE 18 - END ==== */

/* ==== DMD EIXO AJUSTE 19 - BEGIN - apagar p/ reverter ====
   Frags injustos em vermelho sangue (mais escuro e saturado que o rubi de
   ataque, para nao se confundir com ele). Zero fica apagado: nada a mostrar. */
.Content .eix-r .n.sangue{color:#8f1218;font-weight:bold;
  text-shadow:0 1px 0 rgba(255,255,255,.45)}
.Content .eix-r .n.sangue i{color:inherit;opacity:.7}
/* ==== DMD EIXO AJUSTE 19 - END ==== */

/* ==== DMD EIXO AJUSTE 20 (Progresso natural na pagina) - BEGIN - apagar p/ reverter ====
   O AJUSTE 12 achatou os wrappers do .TableContainer, mas quem desenhava o
   contorno duplo "3D" era a TABELA interna e suas celulas — fora do alcance dele.
   Aqui a caixa toda vira superficie continua e as linhas viram o mesmo desenho
   do eixo: rotulo a esquerda, barra no meio, porcentagem a direita. */
.Content .sal-wall table,
.Content .sal-wall table td,
.Content .sal-wall table tr,
.Content .sal-wall table tbody{background:none !important;border:0 !important;
  box-shadow:none !important;background-image:none !important}
.Content .sal-wall .TableContent{width:100%;border-collapse:collapse}
.Content .sal-wall .TableContent td{padding:7px 8px !important;
  border-bottom:1px solid rgba(203,180,136,.5) !important;vertical-align:middle}
.Content .sal-wall .TableContent tr:last-child td{border-bottom:0 !important}

/* rotulo (Tasks/Quests) na voz dos rotulos do eixo */
.Content .sal-wall .TableContent td b,
.Content .sal-wall .TableContent td strong{font:bold 10px Verdana,Arial,sans-serif;
  letter-spacing:.6px;text-transform:uppercase;color:#6e5a2f}

/* barra: mesmo trilho escuro e verde das outras barras da pagina */
.Content .sal-wall .task-progress-bar,
.Content .sal-wall progress{height:15px !important;border-radius:8px !important;
  border:0 !important;box-shadow:inset 0 1px 2px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.35) !important;
  background:linear-gradient(180deg,#2a1f14,#161009) !important;overflow:hidden}
.Content .sal-wall .task-progress-bar-inner{border-radius:8px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4) !important}

/* o botao "Ver" encolhe: e acessorio, nao protagonista */
.Content .sal-wall .dmd-showbtn{font-size:9px;padding:2px 9px}
/* ==== DMD EIXO AJUSTE 20 - END ==== */

/* ==== DMD EIXO AJUSTE 21 (as 6 fases da Docura) - BEGIN - apagar p/ reverter ====
   Uma cor por FASE nomeada do jogo, subindo em temperatura. O vermelho fica
   reservado a ultima (Overdose, 1000) — antes ele aparecia no meio da escala. */
.Content .eix-r .n.doc0{color:#3f7a2a}                     /* Nivel Fit        */
.Content .eix-r .n.doc1{color:#2b4f9a}                     /* Docura Elevada   */
.Content .eix-r .n.doc2{color:#8a5a10}                     /* Incontrolavel    */
.Content .eix-r .n.doc3{color:#6b3fa0}                     /* Suprema          */
.Content .eix-r .n.doc4{color:#c06010}                     /* Hiperdocura      */
.Content .eix-r .n.doc5{color:#8f1218;font-size:19px;      /* Overdose (teto)  */
  text-shadow:0 1px 0 rgba(255,255,255,.5)}
/* ==== DMD EIXO AJUSTE 21 - END ==== */

/* ==== DMD EIXO AJUSTE 22 (fundo claro dentro das caixas) - BEGIN - apagar p/ reverter ====
   O AJUSTE 12/20 zerou o fundo das caixas recortadas e elas passaram a mostrar o
   pergaminho ESCURO do container — mesma cor de fora, sem separacao. Aqui elas
   voltam a ter a superficie CLARA das outras caixas da pagina (.eix). */
.Content .sal-wall .TableContainer{background:linear-gradient(180deg,#f3e7c8 0,#ecdcb4 100%) !important;
  border:1px solid #cdb884 !important;border-radius:8px;padding:2px 4px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55) !important;margin:0 0 4px}
/* linhas de morte e frag: zebra suave sobre o claro, sem o marrom escuro herdado */
.Content .sal-wall tr.dmdDeathRow,
.Content .sal-wall tr.dmdFragRow{background:transparent !important}
.Content .sal-wall tr.dmdDeathRow:nth-child(even) td,
.Content .sal-wall tr.dmdFragRow:nth-child(even) td{background:rgba(184,145,46,.07) !important}
.Content .sal-wall tr.dmdDeathRow td,
.Content .sal-wall tr.dmdFragRow td{border-bottom:1px solid rgba(203,180,136,.55) !important}
/* o checklist de quests herdava o mesmo escuro */
.Content .sal-wall .dmd-checklist{background:none}
/* ==== DMD EIXO AJUSTE 22 - END ==== */

/* ==== DMD EIXO AJUSTE 23 (numero x unidade) - BEGIN - apagar p/ reverter ====
   "27D 21H 54MIN" saia com numero e unidade do MESMO tamanho e cor: viravam um
   bloco unico, dificil de ler. Agora a unidade e menor, mais clara e com respiro
   antes do proximo numero — o olho separa 27 | 21 | 54 na hora. */
.Content .eix-r .n{font-size:17px;letter-spacing:-.2px}
.Content .eix-r .n i{font-style:normal;font-size:9px;font-weight:bold;
  letter-spacing:.5px;text-transform:uppercase;opacity:.85;
  margin:0 9px 0 2px;vertical-align:1px}
.Content .eix-r .n i:last-child{margin-right:0}
/* a unidade herda a cor da faixa, mas dessaturada — nao compete com o numero */
.Content .eix-r .n.ouro i{color:#a8834a}
.Content .eix-r .n.pos i {color:#4a8a5e}
.Content .eix-r .n.rub i {color:#a86a68}
.Content .eix-r .n.aco i {color:#6a83b4}
.Content .eix-r .n.sangue i{color:#b06a6e}
/* ==== DMD EIXO AJUSTE 23 - END ==== */

/* ==== DMD EIXO AJUSTE 24 (checklist de quests) - BEGIN - apagar p/ reverter ====
   Os nomes saiam em rgb(0,66,148) — o azul de link GLOBAL do tema, unica cor fria
   daquele tipo na pagina. Sem classe e sem inline: era heranca de ".Content a".
   Escopado no checklist, entao nenhum outro link do site muda.
   Concluida = verde da paleta; pendente = tinta normal, so o marcador difere. */
.Content .dmd-checklist a,
.Content .dmd-check a{color:#4a3f2c;text-decoration:none;
  border-bottom:1px solid rgba(122,90,30,.22)}
.Content .dmd-checklist a:hover,
.Content .dmd-check a:hover{color:#8a5a10;border-bottom-color:#8a5a10}
.Content .dmd-check.done a{color:#175c2a;font-weight:bold;
  border-bottom-color:rgba(23,92,42,.28)}
.Content .dmd-check.done a:hover{color:#0f4a20;border-bottom-color:#175c2a}
/* ==== DMD EIXO AJUSTE 24 - END ==== */

/* ==== DMD EIXO AJUSTE 25 - BEGIN - apagar p/ reverter ====
   1) TRILHO BEGE: eu tinha posto quase-preto (AJUSTE 20/14) imitando o cliente.
      Empilhado no checklist virou uma parede preta. Volta ao pergaminho rebaixado
      que o proprio site ja usava em .task-progress-bar (#d8c7a0 + inset).
   2) VIP: 27D 21H 46MIN saia com tudo do mesmo peso. Agora o 1o numero (dias) e
      grande e os seguintes recuam — hierarquia em vez de fileira uniforme. */
.Content .sal-wall .task-progress-bar,
.Content .sal-wall progress,
.Content .eix-r .stbar{background:#d8c7a0 !important;
  border:1px solid #b08d3f !important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.22) !important}
.Content .eix-r .stbar b{color:#3a2c14;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.Content .vmbar{background:#d8c7a0;border:1px solid #b08d3f;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.22)}

/* o primeiro numero manda; os demais sao detalhe */
.Content .eix-r .n{font-size:19px}
.Content .eix-r .n i ~ i{font-size:8px}
.Content .eix-r .n i + b,
.Content .eix-r .n i{opacity:.8}
.Content .eix-r .n i:first-of-type ~ *{font-size:13px;opacity:.75}
/* ==== DMD EIXO AJUSTE 25 - END ==== */

/* ==== DMD EIXO AJUSTE 26 (unidade com cor propria) - BEGIN - apagar p/ reverter ====
   O AJUSTE 23 dava cor a unidade, mas o 25 veio depois e a achatou com opacity/
   font-size genericos — voltou tudo igual. Aqui a unidade tem COR PROPRIA, marrom
   neutro, independente da cor do numero, e !important para nada mais sobrescrever. */
.Content .eix-r .n i,
.Content .eix-r .subs .n i,
.Content .eix-r b.n i{
  color:#8a7550 !important;opacity:1 !important;
  font-size:9px !important;font-weight:bold;font-style:normal;
  letter-spacing:.6px;text-transform:uppercase;
  margin:0 10px 0 3px !important;vertical-align:1px}
.Content .eix-r .n i:last-child{margin-right:0 !important}
/* ==== DMD EIXO AJUSTE 26 - END ==== */

/* ==== DMD EIXO AJUSTE 27 (identidade por tipo de dado) - BEGIN - apagar p/ reverter ====
   Estava tudo verde: Docura, Bless, VIP e Tokens. Verde em todo lugar = verde em
   lugar nenhum. Agora cada FAMILIA tem a sua cor e a intensidade conta a grandeza:
     Tokens = ouro velho -> ouro vivo (cofre)
     VIP    = ambar -> roxo real (realeza); sangue so quando esta acabando
     Bless  = azul celeste (protecao divina)
     Docura = as 6 fases ja definidas no AJUSTE 21 */
.Content .eix-r .n.tk1{color:#8a7126}
.Content .eix-r .n.tk2{color:#9a7a12}
.Content .eix-r .n.tk3{color:#8a5a10;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.Content .eix-r .n.vip1{color:#b06a10}
.Content .eix-r .n.vip2{color:#5b3a8f}
.Content .eix-r .n.bless{color:#2f6ea8}
/* o link Transferir para de competir com o numero */
.Content .eix-r .v a.act,.Content .eix-r a.act{color:#7a5410;font-weight:bold}
/* ==== DMD EIXO AJUSTE 27 - END ==== */

/* ==== DMD EIXO AJUSTE 28 (folga na margem direita) - BEGIN - apagar p/ reverter ====
   "28 DIAS 17 HORAS" encostava/vazava na borda: a ultima unidade tinha
   margin-right:0 e a celula do numero nao tinha respiro. Um respiro na coluna do
   valor resolve para TODAS as linhas, nao so o VIP — a proxima que crescer nao
   volta a vazar. */
.Content .eix-r .n{padding-right:6px;box-sizing:border-box}
.Content .eix-r .n i:last-child{margin-right:2px !important}
.Content .eix{padding-right:4px}
/* ==== DMD EIXO AJUSTE 28 - END ==== */

/* ==== DMD EIXO AJUSTE 29 (coluna do numero se ajusta ao conteudo) - BEGIN ====
   Medido no ar: a coluna do valor era FIXA em 104px e "28 DIAS 17 HORAS" e mais
   largo que isso — por isso encostava/vazava, e margem nenhuma resolveria.
   Agora ela cresce ate caber (max-content) e quem cede espaco e o rotulo, que
   pode quebrar. A 4a coluna (selo) so ocupa espaco quando existe. */
.Content .eix-r{grid-template-columns:18px minmax(0,1fr) minmax(62px,max-content) auto !important;
  column-gap:9px;padding-right:10px !important}
.Content .eix-r .n{padding-right:0;white-space:nowrap}
.Content .eix-r .k{overflow-wrap:anywhere;white-space:normal}
.Content .eix{padding-right:2px}
/* ==== DMD EIXO AJUSTE 29 - END ==== */

/* ==== DMD STAMINA (barra) - BEGIN - apagar este bloco p/ reverter ====
   A stamina tinha sumido junto com a caixa "Vitais". Volta como barra, no
   lugar onde ela e util: colada na de vida/mana, acima do arsenal.
   Teto = 100h (player.h STAMINA_MAX). As 2 marquinhas na regua sao os
   limiares do config.lua: 14h (sem loot) e 40h (bonus de XP). */
.Content .stbar{display:flex;align-items:center;gap:9px;margin:-4px 0 10px;
  font-family:Verdana,Arial,sans-serif}
.Content .stbar .k{flex:0 0 auto;font-size:8px;font-weight:bold;letter-spacing:.5px;
  text-transform:uppercase;color:#6e5a2f}
.Content .stbar .tr{position:relative;flex:1 1 auto;min-width:60px;height:13px;
  border-radius:7px;overflow:hidden;background:#d8c7a0;border:1px solid #b08d3f;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.28)}
.Content .stbar .fill{position:absolute;left:0;top:0;bottom:0;border-radius:6px 0 0 6px}
.Content .stbar .mk{position:absolute;top:0;bottom:0;width:1px;background:rgba(60,40,10,.34)}
.Content .stbar .v{flex:0 0 auto;font-size:14px;font-weight:bold;white-space:nowrap}
/* unidade NUNCA na mesma cor do numero (reclamacao recorrente do dono) */
.Content .stbar .v em{font-style:normal;font-size:10px;color:#8a7550;padding:0 1px}
.Content .stbar .c{flex:0 0 auto;font-size:9px;color:#7a6a4e;white-space:nowrap}

/* 6 faixas reais do stamina_stages.xml, em SEMAFORO (pedido do dono):
     80-100h  3,5x VERDE       — teto
     70-80h   3x   VERDE-LIMAO — primeiro degrau abaixo do teto
     50-70h   2,5x AMARELO     — ja caiu do teto
     20-50h   2x   VERMELHO    — caiu de novo
     10-20h   1x   vermelho escuro   — perdeu TODO o bonus
     0-10h    0,5x vermelho profundo — penalidade
   Os dois ultimos precisam continuar descendo: se 1x fosse neutro com o 2x
   vermelho, a barra diria que 1x e melhor que 2x — o contrario da verdade.
   O numero do multiplicador fica do lado, entao a cor so precisa dizer a
   direcao; a precisao vem do "2x"/"1x"/"0,5x". */
.Content .stbar.st-x5 .fill{background:linear-gradient(180deg,#4fe08a,#0a8f3d)}
.Content .stbar.st-x4 .fill{background:linear-gradient(180deg,#a8d84f,#5f9a1e)}
/* dourado exato do projeto (mesmo dos tokens / nome de item lendario) */
.Content .stbar.st-x3 .fill{background:linear-gradient(180deg,#f2d17e,#b8912e)}
.Content .stbar.st-x2 .fill{background:linear-gradient(180deg,#e5695c,#b53024)}
.Content .stbar.st-x1 .fill{background:linear-gradient(180deg,#c04a40,#8a1f19)}
.Content .stbar.st-x0 .fill{background:linear-gradient(180deg,#a13a33,#63120e)}
.Content .stbar.st-x5 .v{color:#0a7a37}
.Content .stbar.st-x4 .v{color:#4c7d14}
.Content .stbar.st-x3 .v{color:#8a5a10}
.Content .stbar.st-x2 .v{color:#a5352a}
.Content .stbar.st-x1 .v{color:#8a2a2a}
.Content .stbar.st-x0 .v{color:#6e1f1a}

/* o multiplicador e so texto na cor da faixa — sem capsula (o dono achou
   destaque demais para um dado que ja e reforcado pela cor da barra) */
.Content .stbar .c b{font-size:11px;font-family:Verdana,Arial,sans-serif}
.Content .stbar.st-x5 .c b{color:#0a7a37}
.Content .stbar.st-x4 .c b{color:#4c7d14}
.Content .stbar.st-x3 .c b{color:#8a5a10}
.Content .stbar.st-x2 .c b{color:#a5352a}
.Content .stbar.st-x1 .c b{color:#8a2a2a}
.Content .stbar.st-x0 .c b{color:#6e1f1a}

/* Tela estreita: some so a palavra "XP", NUNCA o multiplicador — ele e a
   informacao principal da linha. (Antes isso era display:none no .c inteiro e
   escondia justamente o "4x".) */
.Content .stbar .c em{font-style:normal;padding-left:3px;color:#7a6a4e}
@media (max-width:620px){ .Content .stbar .c em{display:none} }
/* ==== DMD STAMINA - END ==== */

/* ==== DMD LINK WIKI (linha do item clicavel) - BEGIN - apagar p/ reverter ====
   A LINHA inteira e o <a> (nao so o nome). Sem sublinhado: o aviso de clicavel
   e o cursor + o realce no hover. O <a> precisa herdar a cor porque o nome ja e
   colorido pela RARIDADE (.t-comum/.t-raro/.t-epic/.t-lend) e o azul global de
   link apagaria isso. text-align:left porque o .Content herda center em alguns
   pontos e a ancora, sendo display:flex, nao carregaria o alinhamento do div. */
.Content a.sal-relic{color:inherit;text-decoration:none;cursor:pointer;
  text-align:left;transition:background .12s ease}
/* precisa repetir color/text-decoration no :hover porque a regra global
   ".Content a:hover{text-decoration:underline;color:#0063DC}" tem a MESMA
   especificidade de ".Content a.sal-relic" e venceria no estado de hover. */
.Content a.sal-relic:hover,
.Content a.sal-relic:focus{background:rgba(184,145,46,.16);border-radius:6px;
  box-shadow:inset 0 0 0 1px rgba(184,145,46,.35);
  text-decoration:none;color:inherit}
/* NENHUM sublinhado no nome, nem no hover — pedido explicito do dono.
   O realce da linha inteira ja basta como aviso de clicavel. */
.Content a.sal-relic .nm,
.Content a.sal-relic:hover .nm,
.Content a.sal-relic:focus .nm{text-decoration:none;border-bottom:0}
/* item sem pagina na wiki continua <div>: sem cursor, sem hover, nao clicavel */
/* ==== DMD LINK WIKI - END ==== */

/* ==== DMD NOME ITEM COR UNICA - BEGIN - apagar este bloco p/ reverter ====
   Todo nome de item usa a cor do refino alto (o ouro do t-lend), por padrao.
   Antes a cor variava por faixa e gerava a pergunta "por que esse ta diferente?"
   toda vez que uma peca destoava — foi o caso da wand, que tem essencia mas nao
   tem +N no nome e caia na faixa mais baixa. A forca de cada peca ja esta dita
   nas capsulas (Upgrade +100, Ice +400%); a cor nao precisa repetir isso.
   As classes t-comum/t-raro/t-epic/t-lend continuam sendo emitidas (outras regras
   as usam), so deixam de mandar na cor do nome. */
.Content .sal-relic.t-comum .nm,
.Content .sal-relic.t-raro  .nm,
.Content .sal-relic.t-epic  .nm,
.Content .sal-relic.t-lend  .nm{color:#8a5a10;text-shadow:0 1px 0 rgba(255,255,255,.5)}
/* o rotulo do nicho acompanha, senao a linha fica com dois tons sem motivo */
.Content .sal-relic.t-comum .sl,
.Content .sal-relic.t-raro  .sl,
.Content .sal-relic.t-epic  .sl,
.Content .sal-relic.t-lend  .sl{color:#8a5a10}
/* ==== DMD NOME ITEM COR UNICA - END ==== */

/* ==== DMD ROTULO LIFE/MANA - BEGIN - apagar p/ reverter ====
   A barra de vida/mana ganha rotulo a esquerda, igual a de Stamina. Os dois
   rotulos compartilham a MESMA largura fixa, senao "LIFE/MANA" (maior que
   "STAMINA") empurraria a barra e as duas ficariam desalinhadas. */
.Content .vmrow{display:flex;align-items:center;gap:9px;margin:0 0 6px}
.Content .vmrow .k,
.Content .stbar .k{flex:0 0 58px;font-size:8px;font-weight:bold;letter-spacing:.5px;
  text-transform:uppercase;color:#6e5a2f;line-height:1}
.Content .vmrow .vmbar{flex:1 1 auto;min-width:0;margin:0}
.Content .stbar{margin-top:0}
/* ==== DMD ROTULO LIFE/MANA - END ==== */

/* ==== DMD CELULA ICONE (alinhamento) - BEGIN - apagar p/ reverter ====
   O .i tinha altura livre com line-height:1, entao a altura era o que a fonte
   de emoji devolvesse. As caixas ate batiam, mas cada glifo era PINTADO numa
   altura diferente dentro dela — o escudo aparecia menor e mais para baixo que
   o presente/tubo/calendario. Caixa de altura fixa + centralizacao: qualquer
   glifo (ou svg) cai exatamente no mesmo lugar nas 4 celulas. */
.Content .dmdg-cell .i{height:17px;display:flex;align-items:center;justify-content:center}
.Content .dmdg-cell .i.i-svg{opacity:1}
.Content .dmdg-cell .i.i-svg svg{width:16px;height:16px;display:block;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.5))}
/* ==== DMD CELULA ICONE - END ==== */