/* =========================================================================
   custom.css — Reskin "Steel/Prata + Preto-Branco" (Season 2 clássico).
   Carregado DEPOIS do style.min.css. Pass 1: tira o verde, mantém o clássico.
   ========================================================================= */

/* ----- 1) FUNDO: imagem custom (castelo em ruínas, escuro/aço) ----- */
body{
  background:#0a0d10 url(../images/bg-custom.jpg) top center no-repeat !important;
  background-size:cover !important;
  background-attachment:fixed !important;
}

/* ----- 2) VERDES -> prata/aço ----- */
a:hover{ color:#e3e8ef !important; }

.main .sidebar .box a{ color:#c4cad3 !important; }
.main .sidebar .box a:hover{ color:#ffffff !important; }

/* textos verde-oliva (.text, .time) -> prata-azulado */
.main .sidebar .box ul li span.text,
.main .sidebar .box .event span.time{ color:#9fb0c2 !important; }

/* "Wiki Guias" e demais links seguem o padrão prata */

/* ----- 3) Barra "online" (line.png verde) -> aço ----- */
.header .onlines .progress-bar .line{
  background:linear-gradient(180deg, #b6c0cd, #6f7c8c) !important;
}

/* ----- 4) Títulos (imagens verdes) -> aço escuro ----- */
.main .sidebar.left .container .title,
.main .sidebar.right .container .title,
.content .container h1.title{
  background:linear-gradient(180deg, #2c343f, #161b21) !important;
  border:1px solid #3b4450; border-bottom:none;
  color:#eef2f6 !important;
}
.content .container h2.title{
  border-image:none !important;
  border:1px solid #3b4450 !important;
  background:linear-gradient(180deg, #2c343f, #161b21) !important;
  color:#eef2f6 !important;
}

/* ----- 5) Botões (button-border.png verde) -> aço metálico ----- */
a.btn, a.morpheus-popup-btn, button.btn{
  border-image:none !important;
  border:1px solid #4a5360 !important;
  background:linear-gradient(180deg, #d2d8e0, #9aa6b4) !important;
  color:#171b21 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.3);
  padding:5px 14px !important;
  border-radius:5px;
}
a.btn:hover, a.morpheus-popup-btn:hover, button.btn:hover{
  filter:brightness(1.08); color:#171b21 !important;
}

/* botão secundário verde-azulado -> aço */
.btn-secondary{
  background:linear-gradient(180deg, #8a93a0, #6c7585) !important;
  border:1px solid #555e6b !important; text-shadow:0 1px 0 #2a2f37 !important;
}
.btn-secondary:hover{ background:linear-gradient(180deg, #6c7585, #8a93a0) !important; }

/* ----- 6) Sidebars: neutraliza o tom esverdeado/teal (mais aço) ----- */
.main .sidebar.left .container .box,
.main .sidebar.right .container .box{
  background:#141a20 !important;   /* cobre o tile teal por um cinza-aço neutro */
}

/* bandeira de idioma ativa: borda prata */
.wrap .language .active{ border-color:#aeb6c2 !important; }

/* ----- 7) Sidebars: container transparente + caixas como painéis aço ----- */
.main .sidebar.left,
.main .sidebar.right{ background:none !important; }

/* cada caixa vira um painel aço fechado (resolve o "saindo fora") */
.main .sidebar .container .title{ border-radius:6px 6px 0 0; }
.main .sidebar .container .box{
  background:#141a20 !important;
  border:1px solid #2a323c; border-top:none;
}
.main .sidebar .container .box-bottom{
  background:#141a20 !important;
  border:1px solid #2a323c; border-top:none;
  border-radius:0 0 6px 6px;
  height:8px !important;
}
.main .sidebar .sidebar-bottom{ background:none !important; height:4px !important; }

/* ----- 8) Cache-busting das molduras (Cloudflare cacheia imagens 4h) ----- */
/* .main .top é um <div> vazio só decorativo (frame bg-main-top.png) que ficava
   sobrepondo/aparecendo acima das colunas. O contador "19" NÃO está aqui (fica
   em .header .onlines), então removo o frame de vez -> topo limpo. */
.main .top{ display:none !important; }
.content .container{ background:url(../images/bg-content.gif?v=2) !important; }
.content .content-middle{ background:url(../images/bg-content-bottom.png?v=2) !important; }

/* ----- 9) Alinhamento: bordas/gradientes do reskin estavam alargando os
   elementos além da largura fixa do tema (style.min.css não usa box-sizing).
   border-box faz a borda/padding caberem DENTRO da largura -> sem transbordo. */
.main .sidebar .container .title,
.main .sidebar .container .box,
.main .sidebar .container .box-bottom,
.content .container h1.title,
.content .container h2.title{
  box-sizing:border-box !important;
}
/* Títulos do conteúdo (Últimas notícias / Castle Siege): travar na coluna */
.content .container h1.title{ width:556px !important; }

/* ----- 10) Páginas internas (/info, formulários): creme/dourado -> aço ----- */
/* Título dourado (title-border.png) dos painéis -> barra aço */
.box-panel .box-panel-title{
  border-image:none !important;
  border:1px solid #3b4450 !important;
  background:linear-gradient(180deg,#2c343f,#161b21) !important;
  color:#eef2f6 !important;
}
/* Fundo creme (bg-form.gif) dos painéis -> escuro */
.box-panel .box-panel-content{
  background:#141a20 !important;
  border:1px solid #2a323c !important; outline:none !important;
  color:#c4cad3 !important;
}
/* Tabelas .list: linhas creme (#d4c0a1/#f1e0c6) -> aço escuro alternado */
.list thead tr{ background:#2c343f !important; color:#eef2f6 !important; }
.list tbody tr td{
  background:#141a20 !important; color:#c4cad3 !important;
  border-bottom:1px solid #232a32 !important;
}
.list tbody tr:nth-child(2n) td{ background:#181f26 !important; }
.list tbody tr td strong{ color:#e6eaef !important; }
/* Breadcrumb "Início → ..." legível no fundo escuro */
.breadcrumber, .breadcrumber a, .breadcrumber li{ color:#9fb0c2 !important; }

/* ----- 11) Popups/alertas: fundo creme (#fcedd6) -> escuro ----- */
.morpheus-popup-content{
  background-color:#161b21 !important;   /* mantém o ícone (background-image) */
  border:1px solid #3b4450 !important; outline:none !important;
  color:#e6eaef !important;
}
.morpheus-popup-panel{ background:#0f1318 !important; }
.morpheus-popup-panel .morpheus-popup-btn{
  background:linear-gradient(180deg,#d2d8e0,#9aa6b4) !important;
  border:1px solid #4a5360 !important; color:#171b21 !important;
}

/* ----- 12) Logo: estava 350x262 com top:100 e vazava 112px sobre o conteúdo.
   Encolho e subo pra caber no header (sem invadir as "Últimas notícias"). ----- */
.wrap .header{ height:230px !important; }
.wrap .header .logotipo{ top:70px !important; height:auto !important; }
.wrap .header .logotipo img{ width:210px !important; height:auto !important; }

/* =====================================================================
   13) MOLDURAS DO ZERO — "Aço com cantos metálicos" (100% CSS, sem imagem)
   ===================================================================== */

/* 13a) Remove as filigranas/caps em imagem que sobraram do tema */
.main .content .content-middle{
  background:none !important; height:auto !important; min-height:0 !important; margin:0 !important;
}
.main .sidebar .sidebar-bottom{ display:none !important; }
.main .sidebar .container .box-bottom{ display:none !important; }

/* 13b) CONTENT: painel aço escuro com borda dupla + sombra */
.main .content .container{
  background:#0e1318 !important;
  border:1px solid #424d59 !important;
  border-radius:8px !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),
             0 6px 18px rgba(0,0,0,.55) !important;
  color:#bac2cc !important;
  min-height:520px !important;
  position:relative !important;
  padding:6px !important;
}
/* cantos metálicos (4 esquadrias em L feitas só com gradiente) */
.main .content .container::after{
  content:""; position:absolute; inset:3px; pointer-events:none; z-index:11;
  background:
    linear-gradient(#9aa6b4,#9aa6b4) left top,    linear-gradient(#9aa6b4,#9aa6b4) left top,
    linear-gradient(#9aa6b4,#9aa6b4) right top,   linear-gradient(#9aa6b4,#9aa6b4) right top,
    linear-gradient(#9aa6b4,#9aa6b4) left bottom, linear-gradient(#9aa6b4,#9aa6b4) left bottom,
    linear-gradient(#9aa6b4,#9aa6b4) right bottom,linear-gradient(#9aa6b4,#9aa6b4) right bottom;
  background-repeat:no-repeat;
  background-size:16px 2px, 2px 16px;
}

/* texto das notícias legível no fundo escuro */
.main .content ul.news li{ border-top:1px solid #222b34 !important; }
.main .content ul.news li a{ color:#dfe5ec !important; }
.main .content ul.news li a:hover{ color:#ffffff !important; }
.main .content ul.news li p,
.main .content .container .c,
.main .content .container .c p{ color:#b6bec8 !important; }
.main .content ul.news li p.author-created{ color:#828d9a !important; }

/* 13c) Barra de título (Menu / Últimas notícias / Castle Siege / Painel...):
   relevo metálico (highlight em cima, sombra embaixo) */
.main .sidebar .container .title,
.content .container h1.title,
.box-panel .box-panel-title{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),
             inset 0 -1px 0 rgba(0,0,0,.4) !important;
}

/* 13d) SIDEBARS: caixas como painel aço com cantos arredondados + sombra */
.main .sidebar .container .box{
  border:1px solid #424d59 !important; border-top:none !important;
  border-radius:0 0 6px 6px !important;
  box-shadow:0 5px 14px rgba(0,0,0,.45) !important;
}
.main .sidebar .container .title{
  border:1px solid #424d59 !important; border-bottom:none !important;
  border-radius:6px 6px 0 0 !important;
}

/* ===== 14) Correções pós-molduras ===== */

/* 14a) Sidebar DIREITA: título saía mais largo que a caixa. A caixa tinha
   padding que, com border-box, virou 179px; igualo à largura do título (197). */
.main .sidebar.right .container .box{ width:197px !important; }

/* 14b) Tabelas VIP (/vip/advantages) usam table.custom (verde #2c4a3e) -> aço */
.content .container table.custom td{
  background:#141a20 !important; color:#c4cad3 !important;
  border-bottom:1px solid #2a323c !important;
}
.content .container table.custom tr:first-child td{
  background:#2c343f !important; color:#eef2f6 !important;
}
.content .container table.custom tr:nth-child(2n) td{ background:#181f26 !important; }
.content .container table.custom td.true{ background:#0e1318 !important; color:#dfe5ec !important; }

/* 14c) Inputs de formulário (cadastro, recuperar senha): branco puro -> cinza
   suave (Gainsboro #DCDCDC, pedido do usuário) */
.content input[type="text"],
.content input[type="password"],
.content input[type="email"],
.content input[type="number"],
.content select, .content textarea{
  background:#dcdcdc !important;
  border:1px solid #9aa6b4 !important;
  color:#1a1f25 !important;
}

/* =====================================================================
   15) MOBILE / responsivo — empilha as colunas e mostra o essencial
   (precisa da meta viewport no <head>, já adicionada no default.phtml)
   ===================================================================== */
@media (max-width:820px){
  /* tudo fluido, sem largura fixa de 1007px */
  .wrap, .wrap .main, .wrap .header{ width:100% !important; max-width:100% !important; }
  .wrap{ margin:0 auto !important; }
  body{ background-attachment:scroll !important; background-size:cover !important; }

  /* HEADER: logo centralizada e menor; esconde o contador "19" no celular */
  .wrap .header{ height:auto !important; padding:14px 0 6px !important; }
  .wrap .header .logotipo{
    position:relative !important; top:auto !important; left:auto !important;
    height:auto !important; width:100% !important;
  }
  .wrap .header .logotipo img{ width:150px !important; }
  .wrap .header .onlines{ display:none !important; }

  /* COLUNAS empilhadas, full width: Menu -> Notícias -> Painel/Info/Equipe */
  .wrap .main .sidebar.left,
  .wrap .main .content,
  .wrap .main .sidebar.right{
    width:100% !important; float:none !important;
    margin:0 0 14px 0 !important; box-sizing:border-box !important;
    background:none !important;
  }

  /* força largura cheia em TODOS os elementos de largura fixa (184/197/556px) */
  .main .sidebar .container,
  .main .sidebar.left .container,
  .main .sidebar.right .container{ width:100% !important; margin-left:0 !important; box-sizing:border-box !important; }
  .main .sidebar .container .title,
  .main .sidebar .container .box,
  .main .sidebar.left .container .box,
  .main .sidebar.right .container .box,
  .main .content .container,
  .content .container h1.title,
  .box-panel, .box-panel .box-panel-content{
    width:100% !important; margin-left:0 !important; margin-right:0 !important;
    box-sizing:border-box !important;
  }
  .main .content .container{ min-height:0 !important; }
  .main .content .container .c{ margin-left:8px !important; margin-right:8px !important; width:auto !important; }
  /* tabelas ocupam a largura (e rolam se forem largas demais) */
  .content .container table{ width:100% !important; }
  /* cantos metálicos somem no mobile (ficariam tortos na largura fluida) */
  .main .content .container::after{ display:none !important; }

  /* login: input ocupa a largura, botão continua à direita */
  .main .sidebar.right .container .box .login-input{ width:60% !important; }

  /* tabelas largas (VIP/info) -> rolagem horizontal em vez de estourar */
  .content .container table.custom,
  .content .container .list{ display:block !important; overflow-x:auto !important; width:100% !important; }

  /* inputs de formulário ocupam a linha toda */
  .content input[type="text"], .content input[type="password"],
  .content input[type="email"], .content input[type="number"],
  .content select{ width:100% !important; box-sizing:border-box !important; }
}

/* telas bem pequenas */
@media (max-width:420px){
  .wrap .header .logotipo img{ width:120px !important; }
  .main .content ul.news li a{ font-size:13px !important; }
}