/* =====================================================================
   WarLover$Z — TIBIA NOSTALGIA
   3 colunas no estilo do Tibia.com classico: pedra no menu, pergaminho no
   conteudo, faixas vermelha/verde nos titulos, fichas prateadas na direita.
   Pecas classicas: templates/tibiacom/images (caminhos no <style> do nostalgia.php).
   ===================================================================== */
body.tn {
	margin: 0; min-height: 100vh; color: #e7dcc2; background: #07090f fixed center top / cover no-repeat;
	font: 12px/1.45 Verdana, Tahoma, Geneva, sans-serif;
}
body.tn a { color: #e8c36a; }
.tn-pular { position: absolute; left: -999px; top: 0; z-index: 99; padding: 8px 12px; background: #000; color: #fff; }
.tn-pular:focus { left: 8px; }
.tn .wlz-fundo { display: none; }

/* ---------- topo ---------- */
.tn-topo { position: relative; max-width: 1180px; margin: 0 auto; padding: 10px 12px 0; display: flex; align-items: center; justify-content: center; }
.tn-logo { display: block; line-height: 0; }
.tn-logo img { width: clamp(240px, 44vw, 520px); height: auto; filter: drop-shadow(0 8px 18px rgba(0,0,0,.75)); }
.tn-logo-txt { font: 900 44px/1 Cinzel, Georgia, serif; color: #e8c36a; }
.tn-topo-acoes { position: absolute; right: 12px; bottom: 6px; display: flex; gap: 8px; }
.tn-so-celular { display: none; }

/* ---------- botoes classicos (sbutton azul/verde 135x25) ---------- */
.tn-btn { display: inline-flex; align-items: center; justify-content: center; width: 135px; height: 25px; padding: 0 6px; border: 0;
	background: center / 100% 100% no-repeat; color: #fff !important; font: 700 11px/1 Verdana, sans-serif; letter-spacing: .02em;
	text-decoration: none !important; text-shadow: 1px 1px 0 #000; cursor: pointer; }
.tn-btn:focus-visible { outline: 2px dotted #fff; outline-offset: 2px; }

/* ---------- grade de 3 colunas ---------- */
.tn-pagina { max-width: 1180px; margin: 6px auto 0; padding: 0 12px; display: grid; grid-template-columns: 200px minmax(0, 1fr) 230px; gap: 14px; align-items: start; }

/* ---------- coluna esquerda: botoes ilustrados + menu de pedra ---------- */
.tn .tn-bi { display: block; margin: 0 0 6px; }
.tn .tn-bi .wlz-bi-img { width: 100%; max-width: none; }
.tn-sub { margin: -2px 0 8px; text-align: center; font-size: 11px; color: #c9b88f; }
.tn-menu { margin-top: 4px; }
.tn-menu.wlz-menu-escondido { display: none; }
.tn-cat { margin-bottom: 3px; }
.tn-barra-cat { display: flex; align-items: center; gap: 6px; width: 100%; height: 34px; padding: 0 10px 0 4px; border: 0; cursor: pointer;
	background: center / 100% 100% no-repeat; color: #f6e7bf; font: 700 13px/1 Cinzel, Georgia, serif; letter-spacing: .06em; text-transform: uppercase;
	text-shadow: 1px 1px 0 #000, 0 0 6px rgba(0,0,0,.8); }
.tn-barra-cat .wlz-ico-sprite { width: 30px; height: 30px; flex: 0 0 30px; }
.tn-barra-cat span { flex: 1; text-align: left; }
.tn-barra-cat i { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #e8c36a; transition: transform .15s ease; }
.tn-cat-aberta > .tn-barra-cat i { transform: rotate(180deg); }
.tn-barra-cat:focus-visible { outline: 2px dotted #e8c36a; outline-offset: -3px; }
.tn-sub-itens { display: none; list-style: none; margin: 0; padding: 2px 0;
	background: linear-gradient(180deg, rgba(18,13,8,.96), rgba(28,20,12,.96)); border: 1px solid #000; border-top: 0; box-shadow: inset 0 0 0 1px rgba(232,195,106,.18); }
.tn-cat-aberta > .tn-sub-itens { display: block; }
.tn-item { display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 6px; color: #dccba2 !important; text-decoration: none !important; font-size: 11.5px;
	border-left: 3px solid transparent; }
.tn-item .wlz-ico-sprite { width: 24px; height: 24px; flex: 0 0 24px; }
a.tn-item:hover { background: rgba(232,195,106,.12); color: #fff3c9 !important; border-left-color: #8f6f2c; }
a.tn-item:hover .wlz-ico-sprite { filter: drop-shadow(0 0 4px rgba(255,220,120,.85)) drop-shadow(0 1px 1px #000); }
.tn-ativo { background: rgba(232,195,106,.16); border-left-color: #e8c36a !important; color: #fff !important; font-weight: 700; }
.tn-em-breve { opacity: .5; }
.tn-em-breve em { margin-left: auto; font-size: 9px; font-style: normal; text-transform: uppercase; color: #a8946b; }

/* ---------- caixas do centro (moldura prateada classica + faixa de titulo) ---------- */
.tn-caixa { position: relative; margin: 0 0 14px; background: #120d08; border: 1px solid #000;
	box-shadow: 0 0 0 2px #6d7682, 0 0 0 3px #1b1f25, 0 8px 22px rgba(0,0,0,.6); }
.tn-faixa { position: relative; display: flex; align-items: center; justify-content: center; height: 30px; margin: 0; padding: 0 44px;
	background: left center / auto 100% repeat-x; color: #fff; font: 700 14px/1 Cinzel, Georgia, serif; letter-spacing: .08em; text-transform: uppercase;
	text-shadow: 1px 1px 0 #000, 0 0 8px rgba(0,0,0,.7); border-bottom: 1px solid #000; }
.tn-bracer-e, .tn-bracer-d { position: absolute; top: -6px; width: 46px; height: 41px; background: center / contain no-repeat; pointer-events: none; }
.tn-bracer-e { left: -16px; }
.tn-bracer-d { right: -16px; }
.tn-pergaminho { background: #f1e0c6 repeat; color: #2b1a0b; padding: 14px 18px; }
.tn-pergaminho a { color: #004294; }
.tn-pergaminho a:hover { color: #00285c; }
.tn-corpo { min-height: 120px; font-size: 12px; }
.tn-corpo h1, .tn-corpo h2, .tn-corpo h3 { font-family: Cinzel, Georgia, serif; color: #5a2800; }
.tn-ver-mais { margin: 10px 0 0; text-align: right; }
/* noticias: faixa vermelha classica + letra capitular */
.tn .NewsHeadline { margin: 0 -18px 10px; }
.tn .NewsHeadlineBackground { position: relative; display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 12px; background-repeat: repeat-x; color: #fff; text-shadow: 1px 1px 0 #000; }
.tn .NewsHeadlineIcon { width: 28px; height: 28px; }
.tn .NewsHeadlineDate { font-size: 11px; opacity: .9; }
.tn .NewsHeadlineText { font: 700 13px/1.2 Verdana, sans-serif; }
.tn .NewsHeadlineAuthor { margin-left: auto; font-size: 10px; opacity: .85; }
.tn .NewsHeadline + table td::first-letter { float: left; margin: 4px 6px 0 0; font: 900 40px/0.85 Cinzel, Georgia, serif; color: #8b0000; text-shadow: 1px 1px 0 #e7c27a; }
/* tabelas do MyAAC dentro do pergaminho (cores classicas) */
.tn-corpo table { border-collapse: separate; }
.tn-corpo .TableContainer, .tn-corpo .Table3, .tn-corpo .Table1 { width: 100%; }
.tn-corpo .white, .tn-corpo td.white { color: #fff; }

/* arena (arte do YZZY) dentro da moldura classica */
.tn-arena { min-height: 220px; padding: 16px 18px 18px; text-align: center; background-size: cover; background-position: center; color: #fff; overflow: hidden; }
.tn-arena-titulo { margin: 6px 0 2px; font: 900 30px/1.1 Cinzel, Georgia, serif; color: #f6d77a; letter-spacing: .08em;
	text-shadow: 0 2px 0 #000, 0 0 14px rgba(255,120,0,.65); }
.tn-arena-sub { margin: 0 0 12px; font-size: 12px; color: #f3e9d2; text-shadow: 1px 1px 0 #000; }
.tn .wlz-escudos { position: absolute; left: 10px; right: 10px; top: 14px; margin: 0; pointer-events: none; }
.tn .wlz-escudo { width: 84px; }
.tn .wlz-sem-guerra { display: inline-block; padding: 6px 12px; background: rgba(0,0,0,.55); border: 1px solid #6d7682; color: #e7dcc2; }

/* cartoes "Por que" */
.tn-cartoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tn-cartao { text-align: center; padding: 10px 8px; background: rgba(255,255,255,.28); border: 1px solid #b89a63; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.tn-cartao img { width: 72px; height: 72px; border: 1px solid #5a2800; box-shadow: 0 2px 5px rgba(0,0,0,.35); }
.tn-cartao h3 { margin: 6px 0 4px; font: 700 14px/1.2 Cinzel, Georgia, serif; color: #5a2800; }
.tn-cartao p { margin: 0; font-size: 11px; color: #3a2610; }

/* ---------- coluna direita: fichas prateadas (box-top / pergaminho / box-bottom) ---------- */
.tn-ficha { margin: 0 0 10px; }
.tn-ficha-topo, .tn-ficha-base { height: 12px; background: center / 100% 12px no-repeat; }
.tn-ficha-corpo { margin: 0 6px; padding: 8px 10px; background: #f1e0c6 repeat; color: #2b1a0b; border-left: 1px solid #5c4a2d; border-right: 1px solid #5c4a2d; }
.tn-ficha-corpo a { color: #004294; }
/* "Online agora" no pergaminho (mesmo conteudo, cores para fundo claro) */
.tn .tn-online { padding: 0 !important; background: none; border: 0; box-shadow: none; }
.tn .tn-online .wlz-online-txt { color: #3a2408; text-shadow: none; }
.tn .tn-online .wlz-contador { color: #8b0000; text-shadow: none; }
.tn .tn-online .wlz-voc-tira li { background: rgba(90,40,0,.08); border-color: #a8864c; box-shadow: none; color: #2b1a0b; }
.tn .tn-online .wlz-voc-tira li a:hover { background: rgba(232,195,106,.35); }
.tn .tn-online .wlz-recorde { color: #5a3a12; }
.tn .tn-online .wlz-recorde strong { color: #8b0000; }
.tn-top5 { list-style: none; margin: 0; padding: 0; }
.tn-top5 li { display: flex; align-items: center; gap: 4px; padding: 3px 0; border-bottom: 1px dotted #b89a63; font-size: 11.5px; }
.tn-top5 li:last-child { border-bottom: 0; }
.tn-pos { width: 18px; text-align: center; font-weight: 700; color: #5a2800; }
.tn-top5 .wlz-outfit { width: 32px; height: 32px; margin: -6px 0; }
.tn-top5 a { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-lvl { font-weight: 700; color: #5a2800; }
.tn .wlz-leamas { margin-top: 40px; }

/* ---------- rodape ---------- */
.tn-rodape { max-width: 1180px; margin: 18px auto 0; padding: 12px 12px 28px; text-align: center; color: #a9977a; font-size: 11px; }
.tn-rodape-corrente { height: 2px; margin: 0 auto 10px; max-width: 760px; background: linear-gradient(90deg, transparent, #6d7682 20%, #e8c36a 50%, #6d7682 80%, transparent); }
.tn-rodape nav a { color: #e8c36a; }
.tn .wlz-modal-caixa.tn-pergaminho { color: #2b1a0b; }

/* ---------- telas menores ---------- */
@media (max-width: 1080px) {
	.tn-pagina { grid-template-columns: 190px minmax(0, 1fr); }
	.tn-direita { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; align-items: start; }
}
@media (max-width: 760px) {
	.tn-pagina { grid-template-columns: 1fr; padding: 0 16px; }
	.tn-topo { flex-direction: column; gap: 8px; padding: 10px 16px 0; }
	.tn-topo-acoes { position: static; }
	.tn-so-celular { display: inline-flex; }
	.tn-esquerda { order: 2; }
	.tn-centro { order: 1; }
	.tn-direita { order: 3; grid-template-columns: 1fr; }
	.tn-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tn .NewsHeadline { margin: 0 -18px 10px; }
}
@media (prefers-reduced-motion: reduce) { .tn-barra-cat i { transition: none; } }