/* ===========================================================================
 * components.css — kit de componentes do tema nixdorf (MuDarkNight)
 * ---------------------------------------------------------------------------
 * POR QUE ESTE ARQUIVO EXISTE
 *
 * O pacote nixdorf desenhou 5 telas (home, noticia, painel de conta, download,
 * ranking). O tema do DMNCMS precisa de 137. O nixdorf.css original e todo
 * escrito por pagina — .dTop-cat_block-mega, .account-icon-email,
 * .table-top-rank — e nao serve de vocabulario para as outras ~132 telas.
 *
 * Este arquivo extrai a linguagem visual do nixdorf.css em primitivos
 * reutilizaveis, para que portar cada view restante seja MONTAR pecas, nao
 * inventar desenho. Toda view portada a partir da Fase 3 consome daqui.
 * Regra: nenhuma view escreve CSS proprio.
 *
 * LIMITACAO HERDADA QUE ESTE KIT RESOLVE
 * Os widgets do nixdorf sao PNGs de tamanho fixo: .button e 228x90px,
 * .form-group label e um PNG de 60px de altura, .more-button 163x89px. Isso
 * funciona nas 5 telas desenhadas e quebra em formulario longo, tabela larga
 * ou grid de itens. Por isso cada primitivo aqui tem variante FLUIDA, feita
 * com borda e fundo solidos, que degrada bem em qualquer largura.
 *
 * Carregar sempre DEPOIS de nixdorf.css.
 * =========================================================================== */

/* ---------------------------------------------------------------------------
 * 1. TOKENS
 * O nixdorf.css nao tem uma unica variavel: sao hex literais espalhados por
 * 2.578 linhas. Os valores abaixo foram extraidos dele; declara-los aqui e o
 * que torna viavel a "paleta final" ainda pendente no documento padrao do site.
 * ------------------------------------------------------------------------- */
:root {
	/* superficies */
	--nx-bg: #152532;          /* fundo de painel (.top-rank) */
	--nx-bg-dark: #1b252e;     /* dropdown, aba ativa, linha zebrada */
	--nx-bg-steel: #475d6e;    /* destaque de linha (.account-setting_block) */
	--nx-border: #495865;      /* divisoria de tabela */

	/* texto */
	--nx-fg: #ffffff;          /* titulo e rotulo */
	--nx-fg-data: #a0e1ff;     /* valor, celula de tabela */
	--nx-fg-accent: #e5d9a5;   /* destaque pergaminho (.section-title) */
	--nx-fg-muted: #4f6070;    /* inativo, texto secundario */
	--nx-fg-link: #4191b6;

	/* estado */
	--nx-online: #b0d90e;
	--nx-online-alt: #83d300;
	--nx-offline: #e91414;
	--nx-offline-alt: #fb0171;
	--nx-warn: #e5d9a5;

	/* metrica — o ritmo vertical do nixdorf e de 60px por linha */
	--nx-row-h: 60px;
	--nx-gap: 15px;
	--nx-pad-x: 30px;
	--nx-radius: 0;            /* o tema nao usa canto arredondado */
}

/* ---------------------------------------------------------------------------
 * 2. SUPERFICIES — painel e titulo
 * Uso: toda pagina interna (body.bg-pages). Substitui o .top-rank, que so
 * servia ao bloco de ranking da home.
 * ------------------------------------------------------------------------- */
.nx-panel {
	background-color: var(--nx-bg);
	padding: 25px var(--nx-pad-x);
	margin-bottom: 30px;
	color: var(--nx-fg);
}

.nx-panel--flush { padding: 0; }
.nx-panel--dark { background-color: var(--nx-bg-dark); }

.nx-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nx-gap);
	min-height: var(--nx-row-h);
	padding: 0 var(--nx-pad-x);
	background-color: var(--nx-bg-dark);
	text-transform: uppercase;
	font-weight: 700;
	color: var(--nx-fg);
}

.nx-panel--flush .nx-panel-body { padding: 25px var(--nx-pad-x); }

/* Titulo de secao menor que o .section-title da home (40px), para nao dominar
   a pagina interna. Mantem o ornamento pergaminho do tema. */
.nx-title {
	position: relative;
	display: flex;
	justify-content: center;
	color: var(--nx-fg-accent);
	font-size: 28px;
	text-align: center;
	margin: 40px 0 45px;
}

.nx-title::after {
	content: '';
	position: absolute;
	bottom: -18px;
	left: 50%;
	transform: translateX(-50%);
	width: 227px;
	height: 15px;
	background: url('../images/nx/section-title.png') no-repeat;
	background-size: contain;
}

.nx-title--plain { margin-bottom: 25px; }
.nx-title--plain::after { display: none; }

/* ---------------------------------------------------------------------------
 * 3. TABELA — o primitivo mais reutilizado
 * Usado por: rankings, market, warehouse, historico, logs de conta, shop,
 * character_market, muun_market, cashshop_log, achievements.
 * Derivado de .table-top-rank, com scroll horizontal obrigatorio: varias
 * tabelas do CMS tem mais colunas do que a de ranking (que tem 6).
 * ------------------------------------------------------------------------- */
.nx-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.nx-table {
	width: 100%;
	min-width: 440px;
	border-collapse: collapse;
}

.nx-table th,
.nx-table td {
	padding: 20px var(--nx-pad-x);
	border-top: 1px solid var(--nx-border);
	vertical-align: middle;
	text-align: left;
}

.nx-table thead th {
	border-top: 0;
	text-transform: uppercase;
	color: var(--nx-fg);
	font-weight: 700;
	white-space: nowrap;
}

.nx-table tbody td { color: var(--nx-fg-data); }

.nx-table tbody tr { transition: background-color 0.3s; }
.nx-table tbody tr:hover { background-color: var(--nx-bg-dark); }

.nx-table--zebra tbody tr:nth-child(even) { background-color: rgba(27, 37, 46, 0.5); }

/* Densa: para log de conta e historico, onde ha muitas linhas por pagina. */
.nx-table--compact th,
.nx-table--compact td { padding: 10px 15px; }

.nx-table .nx-num { text-align: right; font-variant-numeric: tabular-nums; }
.nx-table .nx-center { text-align: center; }

/* ---------------------------------------------------------------------------
 * 4. LISTA DE DEFINICAO — rotulo/valor
 * Usado por: painel de conta, info de personagem, detalhe de item, resumo de
 * doacao. Derivado de .account-setting_block (linha de 60px, par destacado).
 * ------------------------------------------------------------------------- */
.nx-deflist {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
}

.nx-deflist > div {
	display: flex;
	align-items: center;
	gap: 10px;
	width: calc(50% - 2px);
	min-height: var(--nx-row-h);
	padding: 0 25px;
	background-color: var(--nx-bg-dark);
}

.nx-deflist > div:nth-child(even) { background-color: var(--nx-bg-steel); }
.nx-deflist dt,
.nx-deflist .nx-dt { text-transform: uppercase; color: var(--nx-fg); font-weight: 700; }
.nx-deflist dd,
.nx-deflist .nx-dd { margin: 0; color: var(--nx-fg-data); }

.nx-deflist--single > div { width: 100%; }

/* ---------------------------------------------------------------------------
 * 5. BOTOES
 * O tema tem 3 botoes em PNG de tamanho fixo (.button 228x90, .more-button
 * 163x89, .download-btn). Continuam validos nas telas desenhadas. Abaixo a
 * variante fluida, obrigatoria em formulario, tabela e acao secundaria.
 * ------------------------------------------------------------------------- */
.nx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 24px;
	border: 1px solid var(--nx-fg-accent);
	background-color: transparent;
	color: var(--nx-fg-accent);
	font-family: 'GothamPro', sans-serif;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease;
}

.nx-btn:hover,
.nx-btn:focus {
	background-color: var(--nx-fg-accent);
	color: var(--nx-bg-dark);
	text-decoration: none;
}

.nx-btn[disabled],
.nx-btn.is-disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

.nx-btn--primary {
	background-color: var(--nx-fg-accent);
	color: var(--nx-bg-dark);
}
.nx-btn--primary:hover { filter: brightness(115%); }

.nx-btn--ghost { border-color: var(--nx-border); color: var(--nx-fg-data); }
.nx-btn--ghost:hover { background-color: var(--nx-bg-steel); color: var(--nx-fg); }

.nx-btn--danger { border-color: var(--nx-offline); color: var(--nx-offline); }
.nx-btn--danger:hover { background-color: var(--nx-offline); color: var(--nx-fg); }

.nx-btn--sm { min-height: 32px; padding: 0 14px; font-size: 13px; }
.nx-btn--block { display: flex; width: 100%; }

.nx-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nx-gap);
	align-items: center;
}
.nx-actions--end { justify-content: flex-end; }
.nx-actions--center { justify-content: center; }

/* ---------------------------------------------------------------------------
 * 6. FORMULARIO
 * O .form-group do nixdorf usa form-input.png (60px fixo) e centraliza o texto
 * — serve para login e registro, que tem 2 a 4 campos. As telas do CMS tem
 * formularios longos (doacao, suporte, troca de senha, venda de item), entao
 * a variante fluida abaixo e a padrao a partir da Fase 3.
 * ------------------------------------------------------------------------- */
.nx-form { max-width: 620px; }
.nx-form--wide { max-width: none; }

.nx-field { margin-bottom: 20px; }

.nx-label {
	display: block;
	margin-bottom: 8px;
	color: var(--nx-fg);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
}

.nx-input,
.nx-select,
.nx-textarea {
	width: 100%;
	min-height: 46px;
	padding: 10px 15px;
	border: 1px solid var(--nx-border);
	background-color: var(--nx-bg-dark);
	color: var(--nx-fg-data);
	font-family: 'GothamPro', sans-serif;
	font-size: 16px;
}

.nx-textarea { min-height: 140px; resize: vertical; }

.nx-input:focus,
.nx-select:focus,
.nx-textarea:focus {
	outline: none;
	border-color: var(--nx-fg-accent);
	color: var(--nx-fg);
}

.nx-input::placeholder,
.nx-textarea::placeholder { color: var(--nx-fg-muted); }

.nx-input[readonly],
.nx-input[disabled] { opacity: 0.6; cursor: not-allowed; }

.nx-help { margin-top: 6px; font-size: 13px; color: var(--nx-fg-muted); }
.nx-error { margin-top: 6px; font-size: 13px; color: var(--nx-offline); }

.nx-field--inline {
	display: flex;
	align-items: center;
	gap: var(--nx-gap);
}
.nx-field--inline .nx-label { margin-bottom: 0; white-space: nowrap; }

/* ---------------------------------------------------------------------------
 * 7. AVISOS
 * O CMS emite mensagem por App.notice() e por bloco no proprio HTML. Sem um
 * primitivo, cada view inventaria o seu.
 * ------------------------------------------------------------------------- */
.nx-alert {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 15px 20px;
	margin-bottom: 20px;
	border-left: 3px solid var(--nx-fg-muted);
	background-color: var(--nx-bg-dark);
	color: var(--nx-fg-data);
}

.nx-alert--success { border-left-color: var(--nx-online); }
.nx-alert--error { border-left-color: var(--nx-offline); }
.nx-alert--warn { border-left-color: var(--nx-warn); }
.nx-alert--info { border-left-color: var(--nx-fg-link); }

/* Estado vazio: "nenhum item", "nenhum resultado" — recorrente no market,
   warehouse, historico e busca de ranking. */
.nx-empty {
	padding: 50px 20px;
	text-align: center;
	color: var(--nx-fg-muted);
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * 8. ESTADO E SELO
 * ------------------------------------------------------------------------- */
.nx-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border: 1px solid var(--nx-border);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--nx-fg-data);
}

.nx-badge--online { border-color: var(--nx-online); color: var(--nx-online); }
.nx-badge--offline { border-color: var(--nx-offline); color: var(--nx-offline); }
.nx-badge--accent { border-color: var(--nx-fg-accent); color: var(--nx-fg-accent); }

/* ---------------------------------------------------------------------------
 * 9. BARRA DE PROGRESSO
 * Derivada das barras Complexity/Attack/Protection do slider de classes.
 * Reusada em: barra de experiencia, battle_pass, achievements, meta de doacao.
 * ------------------------------------------------------------------------- */
.nx-bar {
	position: relative;
	width: 100%;
	height: 12px;
	background-color: var(--nx-bg-dark);
	overflow: hidden;
}

.nx-bar > span {
	display: block;
	height: 100%;
	background-color: var(--nx-fg-accent);
	transition: width 0.6s ease;
}

.nx-bar--online > span { background-color: var(--nx-online); }
.nx-bar-label {
	display: flex;
	justify-content: space-between;
	margin-bottom: 6px;
	font-size: 13px;
	text-transform: uppercase;
	color: var(--nx-fg-muted);
}

/* ---------------------------------------------------------------------------
 * 10. GRID DE ITENS
 * O nixdorf nao desenhou nada disso. Necessario para warehouse, market,
 * shop, shopping_cart, item_exchange, mystery_box e inventario.
 * Slot desenhado em CSS puro, sem depender de imagem: o pacote nao tem arte de
 * slot e o default_assets nao tem no-item.png.
 * A imagem do item vem de $this->itemimage->load() e e posicionada por cima.
 * ------------------------------------------------------------------------- */
.nx-items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 8px;
}

.nx-item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 96px;
	padding: 6px;
	border: 1px solid var(--nx-border);
	background-color: rgba(27, 37, 46, 0.85);
	transition: all 0.3s;
}

.nx-item:hover {
	border-color: var(--nx-fg-accent);
	background-color: var(--nx-bg-dark);
}

.nx-item img { max-width: 100%; height: auto; }

.nx-item.is-empty { opacity: 0.35; }
.nx-item.is-selected { border-color: var(--nx-fg-accent); box-shadow: inset 0 0 0 1px var(--nx-fg-accent); }

.nx-item-tag {
	position: absolute;
	right: 4px;
	bottom: 2px;
	font-size: 11px;
	font-weight: 700;
	color: var(--nx-fg-accent);
}

/* ---------------------------------------------------------------------------
 * 11. ABAS FLUIDAS
 * .tabs-buttons do nixdorf assume 3 abas numa linha. Rankings tem 10 tipos e
 * o painel de conta tem mais. Esta variante quebra em varias linhas.
 * ------------------------------------------------------------------------- */
.nx-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nx-gap);
	margin-bottom: 25px;
	border-bottom: 1px solid var(--nx-border);
}

.nx-tabs button,
.nx-tabs a {
	padding: 10px 4px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	color: var(--nx-fg-muted);
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.3s;
}

.nx-tabs button:hover,
.nx-tabs a:hover { color: var(--nx-fg-data); }

.nx-tabs .active,
.nx-tabs button.active,
.nx-tabs a.active {
	color: var(--nx-fg-accent);
	border-bottom-color: var(--nx-fg-accent);
}

/* ---------------------------------------------------------------------------
 * 12. LAYOUT AUXILIAR
 * O nixdorf.css tem .flex, .flex-c, .flex-s-c, .flex-c-c e nada mais. Estes
 * cobrem os arranjos de duas colunas das paginas internas.
 * ------------------------------------------------------------------------- */
.nx-split {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	align-items: flex-start;
}
.nx-split > * { flex: 1 1 320px; min-width: 0; }
.nx-split--aside > :last-child { flex: 0 0 300px; }

.nx-stack > * + * { margin-top: var(--nx-gap); }

/* ---------------------------------------------------------------------------
 * 13. RESPONSIVO
 * O responsivo do tema vive em nixdorf-mobile.css, com 13 breakpoints
 * (1900...425px). O kit precisa apenas dos dois pontos em que os primitivos
 * deixam de caber.
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.nx-deflist > div { width: 100%; }
	.nx-split--aside > :last-child { flex: 1 1 100%; }
	.nx-panel { padding: 20px 15px; }
	.nx-panel-head { padding: 0 15px; }
	.nx-table th,
	.nx-table td { padding: 14px 15px; }
	.nx-title { font-size: 22px; }
}

@media (max-width: 460px) {
	.nx-items { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
	.nx-item { min-height: 72px; }
	.nx-btn { width: 100%; }
	.nx-actions { flex-direction: column; align-items: stretch; }
}


/* ---------------------------------------------------------------------------
 * 14. ARTE DAS CLASSES (slider de personagens)
 * O nixdorf desenhou 5 classes (.hero-img-1 a -5); o MuDarkNight tem 16, com a
 * arte da Season 21 refeita em 2026-09-04 (upscale Real-ESRGAN + recorte
 * birefnet, distribuida pelo deploy.zip). As 32 regras abaixo sao ESSA
 * calibragem, trazida do style.css do tema undead.
 *
 * Transferem direto porque a geometria dos dois temas coincide: .hero-img e
 * position:absolute/width:100% nos dois, .slider-for-block tem max-width 1900px
 * nos dois e .slider-for-slide tem os mesmos padding-left/right de 350px.
 *
 * Cada id esta amarrado a UMA arte — images/hero-<id>.png e
 * images/hero-small-<id>.png. Reordenar as classes na view.characters.php nunca
 * pode renumerar estes ids, ou cada classe recebe o render errado.
 *
 * Vem depois do nixdorf.css de proposito: sobrescreve os .hero-img-1 a -5 dele.
 *
 * Só os .hero-img-<id> (o render grande) ficam aqui. Os .hero-small-<id> foram
 * REMOVIDOS: eles deslocavam a miniatura com margin-top/margin-left calibrados
 * para o layout do undead, e neste tema o flex da moldura ja centraliza. Medido
 * no navegador, aqueles valores empurravam a arte de 10 a 26px para cima e ate
 * 35px para o lado — era o que deixava as miniaturas tortas dentro do losango.
 * O enquadramento agora e feito na secao 34, por medida e nao por deslocamento.
 * ------------------------------------------------------------------------- */
.hero-img-1 { top: 0px; left: 650px; }  /* class 0    Dark Wizard */
.hero-img-2 { top: 60px; left: 750px; }  /* class 176  Light Wizard */
.hero-img-3 { top: 45px; left: 800px; }  /* class 192  Lemuria Mage */
.hero-img-4 { top: 0px; left: 730px; }  /* class 160  Gun Crusher */
.hero-img-5 { top: 55px; left: 760px; }  /* class 144  Slayer */
.hero-img-6 { top: 0px; left: 750px; }  /* class 16   Dark Knight */
.hero-img-7 { top: 45px; left: 700px; }  /* class 32   Fairy Elf */
.hero-img-8 { top: 0px; left: 680px; }  /* class 48   Magic Gladiator */
.hero-img-9 { top: 7px; left: 851px; }  /* class 64   Dark Lord - 683x793 */
.hero-img-10 { top: 28px; left: 817px; }  /* class 80   Summoner - 799x772 */
.hero-img-11 { top: 50px; left: 880px; }  /* class 128  Rune Wizard */
.hero-img-12 { top: 39px; left: 720px; }  /* class 96   Rage Fighter - busto 1002x610, espelhado p/ olhar a esquerda; base dissolvida na secao 38 */
.hero-img-13 { top: -75px; left: 650px; }  /* class 208  Illusion Knight */
.hero-img-14 { top: 40px; left: 819px; }  /* class 112  Grow Lancer - 1045x703, capa cortada a esquerda; base dissolvida na secao 38 */
.hero-img-15 { top: 39px; left: 982px; }  /* class 224  Alchemist - busto 545x611; base dissolvida na secao 38 */
.hero-img-16 { top: 39px; left: 1089px; }  /* class 240  Crusader - busto 624x604; base dissolvida na secao 38 */

/* .hero-title_bonus — combo de bonus de party por classe. Adicao do MuDarkNight;
   nao existe no pacote nixdorf. */
.hero-title_bonus {
	display: block;
	margin-top: 6px;
	font-style: normal;
	font-size: 13px;
	color: var(--nx-fg-accent);
}

/* Envolucro da secao de classes; o pacote usa a classe mas nunca a estilizou. */
.characters {
	position: relative;
}

/* ---------------------------------------------------------------------------
 * 15. TABELA DE RANKING COM 5 COLUNAS
 * O nixdorf desenhou .top-table com 4 colunas (15% / 41% / 22% / 22% = 100%).
 * Os rankings do CMS podem mostrar uma quinta — Resets/GR — quando
 * rankings_config tem display_resets = 1, e ai as larguras estouram.
 * ------------------------------------------------------------------------- */
.top-table .td-5 {
	width: 18%;
	font-weight: 700;
	text-align: center;
}

@supports selector(li:has(div)) {
	.top-table li:has(.td-5) .td-1 { width: 10%; }
	.top-table li:has(.td-5) .td-2 { width: 34%; }
	.top-table li:has(.td-5) .td-3 { width: 18%; }
	.top-table li:has(.td-5) .td-4 { width: 20%; }
}

/* ---------------------------------------------------------------------------
 * 16. WIDGETS DO CMS QUE O NIXDORF NAO DESENHOU
 * O pacote cobre 5 telas de um site estatico. O DMNCMS acrescenta ao cabecalho
 * e a home coisas que nenhum desenho previa: contador de online, seletor de
 * idioma e agenda de eventos. Sem as regras abaixo esses blocos aparecem crus —
 * a lista de idiomas, por exemplo, fica permanentemente aberta sobre o menu,
 * porque quem a mantinha fechada era o .langBlock-select { display:none } do
 * style.css do undead, que este tema nao carrega.
 * ------------------------------------------------------------------------- */

/* --- Seletor de idioma ---------------------------------------------------- */
.langBlock {
	position: relative;
	z-index: 20;
}

.langBlock-active {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 14px;
	color: var(--nx-fg-accent);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: 0.3s;
}

.langBlock-active:hover,
.langBlock-active.active { background-color: var(--nx-bg-dark); }

.langBlock-select {
	display: none;               /* ESSENCIAL: so abre no clique (.buttonDrop) */
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 220px;
	padding: 8px 0;
	background-color: var(--nx-bg-dark);
	border: 1px solid var(--nx-border);
}

.langBlock-select ul { margin: 0; padding: 0; list-style: none; }

.langBlock-select ul li a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	color: var(--nx-fg-data);
	white-space: nowrap;
}

.langBlock-select ul li a:hover {
	background-color: var(--nx-bg-steel);
	color: var(--nx-fg);
	text-decoration: none;
}

/* --- Contador de online (circliful) --------------------------------------- */
/* O undead emoldurava com images/servers.png, arte dele. Aqui o circulo fica
   solto sobre o hero, so com o traco do circliful. */
.radial-stat {
	position: absolute;
	top: 120px;
	left: 40px;
	z-index: 6;
	width: 125px;
	text-align: center;
}

.circle-online {
	position: relative;
	display: inline-block;
	width: 125px;
	height: 125px;
}

.serverInfo {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	transform: translateY(-50%);
}

.serverInfo span { display: block; width: 100%; text-align: center; }
.serverInfo__name { font-size: 12px; text-transform: uppercase; color: var(--nx-fg-muted); }
.serverInfo__x { font-size: 22px; font-weight: 700; color: var(--nx-fg-accent); }

@media (max-width: 1260px) {
	.radial-stat { display: none; }   /* nao cabe ao lado do menu recolhido */
}

/* --- Agenda de eventos ----------------------------------------------------
 * O App.events() (app.js:2162) monta cada evento como UM <li> com duas colunas:
 *
 *   <li>
 *     <div class="event-name"><p>Blood Castle</p><span>Starts In</span></div>
 *     <div class="event-time"><p>00:30</p><span id="eventN">30m 25s</span></div>
 *   </li>
 *
 * Ou seja: nome sobre o rotulo, e horario sobre a contagem regressiva. A regra
 * anterior tratava tudo como uma linha unica e o resultado parecia dois eventos
 * empilhados por evento.
 *
 * Hierarquia de leitura, do mais para o menos importante: a CONTAGEM (o numero
 * que muda a cada segundo), o NOME do evento, o horario e por fim o rotulo.
 * ------------------------------------------------------------------------- */
.events-table { margin: 0; padding: 0; list-style: none; }

.events-table li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nx-gap);
	min-height: 68px;
	padding: 10px var(--nx-pad-x);
	border-top: 1px solid var(--nx-border);
	transition: background-color 0.3s;
}

.events-table li:first-child { border-top: 0; }
.events-table li:nth-child(even) { background-color: rgba(27, 37, 46, 0.45); }
.events-table li:hover { background-color: var(--nx-bg-dark); }

.events-table .event-name,
.events-table .event-time { display: flex; flex-direction: column; gap: 3px; }

.events-table .event-time { align-items: flex-end; text-align: right; }

.events-table .event-name p,
.events-table .event-time p,
.events-table .event-name span,
.events-table .event-time span { margin: 0; }

/* nome do evento */
.events-table .event-name p {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--nx-fg);
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

/* rotulo "Starts In" */
.events-table .event-name span {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--nx-fg-muted);
}

/* horario marcado */
.events-table .event-time p {
	font-size: 15px;
	font-weight: 700;
	color: var(--nx-fg-data);
	font-variant-numeric: tabular-nums;
}

/* contagem regressiva: o dado vivo, o mais destacado da linha */
.events-table .event-time span {
	font-size: 21px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--nx-fg-accent);
	font-variant-numeric: tabular-nums;
	text-shadow: 0 0 12px rgba(229, 217, 165, 0.28);
}

@media (max-width: 640px) {
	.events-table li { padding: 10px 15px; min-height: 60px; }
	.events-table .event-name p { font-size: 15px; }
	.events-table .event-time span { font-size: 18px; }
}

/* ---------------------------------------------------------------------------
 * 17. ALTURA DO SLIDER DE CLASSES
 * No nixdorf .charactersBlock tem 700px, .slider-for-slide tem 900px e
 * .slider-nav-block e absolute bottom:0 — a fita de miniaturas cai DENTRO do
 * slide. Passa despercebido com as 5 classes do pacote, cujo card e curto;
 * com as 16 do MuDarkNight (titulo + tiers + bonus + texto + 4 barras) a fita
 * cobre as barras.
 *
 * Medido no navegador: o card mais alto e o Dark Lord, terminando a 722px do
 * topo do bloco. Dai 760 para o slide e 910 para o bloco (760 + 150 da fita).
 * ------------------------------------------------------------------------- */
.charactersBlock { height: 910px; }
.slider-for-slide { height: 760px; }

.team-online-barBlock_title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
	color: var(--nx-fg-accent);
}

/* ===========================================================================
 * 18. SHELL DO CMS — reveste as classes dmn-* na paleta do nixdorf
 * ---------------------------------------------------------------------------
 * As 133 views ainda nao portadas montam a pagina assim:
 *
 *   .dmn-content > .dmn-page-box > .dmn-page-title + .dmn-page-content
 *
 * O dmncms.css estiliza isso na paleta do undead — .dmn-content e uma caixa
 * preta de min-height 1200px e o .dmn-page-box nao tem regra nenhuma, o que
 * produzia a "lajota preta" com titulo laranja sobre o fundo azul do nixdorf.
 *
 * Esta secao NAO edita o dmncms.css: sobrescreve daqui, que carrega depois.
 * O dmncms.css fica intacto — as cores de raridade de item do MU (item_yellow,
 * item_socket, item_ancient) sao convencao do jogo e continuam como estao — e o
 * caminho de atualizacao do CMS fica preservado.
 *
 * Efeito: as 133 telas ganham a moldura, a tabela, o botao e o formulario do
 * nixdorf sem uma linha de marcacao alterada.
 * =========================================================================== */

/* --- Moldura da pagina ---------------------------------------------------- */
.dmn-content {
	padding: 0;
	margin: 0 0 60px;
	min-height: 0;                    /* era 1200px: gerava a lajota vazia */
	background-color: transparent;
	border: 0;
	color: var(--nx-fg);
}

.dmn-page-box {
	background-color: rgba(21, 37, 50, 0.92);
	border: 1px solid var(--nx-border);
	padding: 30px var(--nx-pad-x);
	margin-bottom: 30px;
}

.dmn-page-title {
	position: relative;
	display: flex;
	justify-content: center;
	margin: 10px 0 45px;
	text-align: center;
}

.dmn-page-title::after {
	content: '';
	position: absolute;
	bottom: -18px;
	left: 50%;
	transform: translateX(-50%);
	width: 227px;
	height: 15px;
	background: url('../images/nx/section-title.png') no-repeat;
	background-size: contain;
}

.dmn-page-title h1,
.dmn-page-title h2,
.dmn-page-title h3 {
	margin: 0;
	color: var(--nx-fg-accent);
	font-size: 28px;
	font-weight: 400;
	text-transform: uppercase;
}

.dmn-page-content { color: var(--nx-fg-data); }

.dmn-page-content h2,
.dmn-page-content h3,
.dmn-page-content .title,
h2.title {
	color: var(--nx-fg);
	font-size: 20px;
	text-transform: uppercase;
	margin-bottom: 20px;
}

.dmn-sidebar-box {
	padding: 25px;
	background-color: var(--nx-bg-dark);
	box-shadow: none;
	border: 1px solid var(--nx-border);
}

/* --- Tabelas -------------------------------------------------------------- */
.dmn-content table,
.dmn-account-table,
.ranking-table,
table.table {
	width: 100%;
	border-collapse: collapse;
	color: var(--nx-fg-data);
}

.dmn-content table th,
.dmn-account-table th,
.ranking-table th,
table.table th {
	padding: 14px 16px;
	border-top: 0;
	border-bottom: 1px solid var(--nx-border);
	color: var(--nx-fg);
	text-transform: uppercase;
	font-weight: 700;
	white-space: nowrap;
	background-color: var(--nx-bg-dark);
}

.dmn-content table td,
.dmn-account-table td,
.ranking-table td,
table.table td {
	padding: 14px 16px;
	border-top: 1px solid var(--nx-border);
	vertical-align: middle;
}

.table-striped tbody tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-of-type(odd) > * {
	background-color: rgba(27, 37, 46, 0.55);
	color: var(--nx-fg-data);
}

.dmn-content table tbody tr:hover,
table.table tbody tr:hover { background-color: var(--nx-bg-dark); }

/* --- Botoes --------------------------------------------------------------- */
.btn,
.btn-primary,
.buttonn,
.buttonsub,
.dmn-download-button,
.payment-method-button,
.add_to_card,
.buy_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	height: auto;
	width: auto;
	padding: 10px 24px;
	border: 1px solid var(--nx-fg-accent) !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-image: none !important;
	color: var(--nx-fg-accent) !important;
	font-family: 'GothamPro', sans-serif;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	float: none;
	transition: all 0.3s ease;
}

.btn:hover,
.btn-primary:hover,
.buttonn:hover,
.buttonsub:hover,
.dmn-download-button:hover,
.payment-method-button:hover,
.add_to_card:hover,
.buy_button:hover {
	background: var(--nx-fg-accent) !important;
	color: var(--nx-bg-dark) !important;
	text-decoration: none;
}

.btn-danger { border-color: var(--nx-offline) !important; color: var(--nx-offline) !important; }
.btn-danger:hover { background: var(--nx-offline) !important; color: var(--nx-fg) !important; }

.dmn-download-button { width: 100%; font-size: 20px; }

/* --- Formularios ---------------------------------------------------------- */
.dmn-content .form-control,
.dmn-page-content .form-control {
	min-height: 46px;
	padding: 10px 15px;
	border: 1px solid var(--nx-border) !important;
	border-radius: 0;
	background: var(--nx-bg-dark) !important;
	color: var(--nx-fg-data) !important;
	font-size: 16px;
	text-align: left;
	box-shadow: none !important;
}

.dmn-content .form-control:focus,
.dmn-page-content .form-control:focus { border-color: var(--nx-fg-accent) !important; color: var(--nx-fg) !important; }

.dmn-content select.form-control option { background: var(--nx-bg-dark); color: var(--nx-fg-data); }

/* .control-label aparece 81 vezes nas views e nao existe em folha nenhuma —
   era o rotulo do Bootstrap 3, que o CMS nunca acompanhou. */
.control-label {
	display: block;
	margin-bottom: 8px;
	color: var(--nx-fg);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
}

.dmn-content .form-group { margin-bottom: 20px; text-align: left; text-transform: none; }
.dmn-content .form-group label { background: none; height: auto; width: auto; margin: 0 0 8px; padding: 0; color: var(--nx-fg); font-size: 14px; }
.dmn-content .form-group label div { position: static; transform: none; color: var(--nx-fg); }

/* --- Avisos --------------------------------------------------------------- */
.alert {
	padding: 15px 20px;
	margin-bottom: 20px;
	border: 0;
	border-left: 3px solid var(--nx-fg-muted);
	border-radius: 0;
	background-color: var(--nx-bg-dark);
	color: var(--nx-fg-data);
}

.alert-success { border-left-color: var(--nx-online); }
.alert-danger  { border-left-color: var(--nx-offline); }
.alert-warning { border-left-color: var(--nx-warn); }
.alert-primary,
.alert-info    { border-left-color: var(--nx-fg-link); }

/* --- Abas, modais e cartoes ----------------------------------------------- */
.nav-tabs,
.nav-pills { border-bottom: 1px solid var(--nx-border); gap: 6px; }

.nav-tabs .nav-link,
.nav-pills .nav-link {
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: transparent;
	color: var(--nx-fg-muted);
	text-transform: uppercase;
	font-weight: 700;
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
	background: transparent;
	color: var(--nx-fg-accent);
	border-bottom-color: var(--nx-fg-accent);
}

.modal-header,
.modal-header2 {
	background: var(--nx-bg-dark) !important;
	border-bottom: 1px solid var(--nx-border);
	border-radius: 0;
	padding: 16px 20px;
	color: var(--nx-fg);
}

.card {
	background-color: var(--nx-bg-dark);
	border: 1px solid var(--nx-border);
	border-radius: 0;
	color: var(--nx-fg-data);
}

.dropdown-menu {
	background-color: var(--nx-bg-dark);
	border: 1px solid var(--nx-border);
	border-radius: 0;
}

.dropdown-menu a,
.list-group-item-action { color: var(--nx-fg-data); }
.dropdown-menu a:hover,
.list-group-item-action:hover { background-color: var(--nx-bg-steel); color: var(--nx-fg); }

.dmn-content a { color: var(--nx-fg-link); }
.dmn-content a:hover { color: var(--nx-fg-accent); }

/* ---------------------------------------------------------------------------
 * 19. COMPATIBILIDADE BOOTSTRAP 4 PARA 5   (TEMPORARIO)
 * O tema undead rodava BS 4.6 e as 133 views ainda nao portadas usam nomes que
 * o BS5 removeu: float-right (56 usos), float-left (15), mr-N (27), ml-N (18),
 * text-right (8) e os paddings laterais. Sem isto elas perdem alinhamento em
 * silencio. Cada view portada troca para os nomes do BS5 (float-end, me-N,
 * ms-N, text-end); quando as 137 estiverem prontas, esta secao inteira sai.
 * ------------------------------------------------------------------------- */
.float-left  { float: left !important; }
.float-right { float: right !important; }
.text-left   { text-align: left !important; }
.text-right  { text-align: right !important; }
.ml-0 { margin-left: 0 !important; }
.mr-0 { margin-right: 0 !important; }
.ml-1 { margin-left: .25rem !important; }
.mr-1 { margin-right: .25rem !important; }
.ml-2 { margin-left: .5rem !important; }
.mr-2 { margin-right: .5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.mr-3 { margin-right: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }
.mr-5 { margin-right: 3rem !important; }
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }
.pl-0 { padding-left: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.pl-1 { padding-left: .25rem !important; }
.pr-1 { padding-right: .25rem !important; }
.pl-2 { padding-left: .5rem !important; }
.pr-2 { padding-right: .5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }
.pr-5 { padding-right: 3rem !important; }
.no-gutters { margin-right: 0; margin-left: 0; }
.no-gutters > * { padding-right: 0; padding-left: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.form-row { display: flex; flex-wrap: wrap; margin-right: -5px; margin-left: -5px; }
.form-row > * { padding-right: 5px; padding-left: 5px; }
.mx-auto { margin-right: auto !important; margin-left: auto !important; }

/* ---------------------------------------------------------------------------
 * 20. TABELAS DO BOOTSTRAP 5 NA PALETA DO TEMA
 * O .table-striped do BS5 nao pinta com background-color: ele resolve
 * --bs-table-bg-type a partir de --bs-table-striped-bg e aplica por box-shadow
 * interno em cada celula. Como --bs-table-bg vale #fff por padrao, a tabela de
 * ranking saia com as linhas impares BRANCAS sobre o fundo escuro do tema.
 * Sobrescrever background-color nao resolve — e preciso trocar as variaveis.
 * ------------------------------------------------------------------------- */
.dmn-content table,
.dmn-account-table,
.ranking-table,
table.table {
	--bs-table-bg: transparent;
	--bs-table-color: var(--nx-fg-data);
	--bs-table-striped-bg: rgba(27, 37, 46, 0.55);
	--bs-table-striped-color: var(--nx-fg-data);
	--bs-table-hover-bg: rgba(27, 37, 46, 0.9);
	--bs-table-hover-color: var(--nx-fg);
	--bs-table-border-color: var(--nx-border);
	--bs-table-accent-bg: transparent;
}

/* ---------------------------------------------------------------------------
 * 21. PODIO DO RANKING
 * O rank_players.ejs numera os lugares com .place-1 / .place-2 / .place-3,
 * enquanto o HTML do pacote usava .first-place / .second-place. Nenhuma das
 * duas familias tem regra no nixdorf.css: quem desenha e o .circle dentro do
 * .topThree-block_place. As cores por colocacao sao acrescimo daqui.
 * ------------------------------------------------------------------------- */
.topThree-block_place .circle {
	width: 54px;
	height: 54px;
	font-size: 22px;
	font-weight: 700;
	color: var(--nx-bg-dark);
}

.topThree-block_place.place-1 .circle,
.topThree-block_place.first-place .circle {
	background-color: var(--nx-fg-accent);
	box-shadow: 0 0 18px rgba(229, 217, 165, 0.5);
}

.topThree-block_place.place-2 .circle,
.topThree-block_place.second-place .circle { background-color: #b9c7d1; }

.topThree-block_place.place-3 .circle,
.topThree-block_place.third-place .circle { background-color: #a8794f; }

/* A tabela de ranking traz o icone da classe como fundo de um <span>. */
.rank-class-icon {
	display: inline-block;
	width: 34px;
	height: 34px;
	margin-right: 10px;
	vertical-align: middle;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.rankings-player-class-img,
.rounded-image-corners { border-radius: 0; vertical-align: middle; }

/* ---------------------------------------------------------------------------
 * 22. CAIXAS DE MARCACAO E BOTOES DE OPCAO
 * O nixdorf so previu o checkbox estilizado (.custom-checkbox + label, com PNG)
 * das suas duas telas de modal. As views do CMS usam <input type="checkbox">
 * cru — no registro, nos termos, nos filtros do market. Como o tema aplica
 * width:100% aos campos, o checkbox esticava para a largura toda do formulario
 * e aparecia como um quadrado branco solto no meio da linha.
 * ------------------------------------------------------------------------- */
.dmn-content input[type="checkbox"],
.dmn-content input[type="radio"],
.dmn-page-content input[type="checkbox"],
.dmn-page-content input[type="radio"] {
	width: 18px !important;
	min-width: 18px;
	height: 18px;
	min-height: 0;
	margin: 0 8px 0 0;
	padding: 0;
	vertical-align: middle;
	accent-color: var(--nx-fg-accent);
	background: transparent !important;
	border: 1px solid var(--nx-border) !important;
	cursor: pointer;
}

.dmn-content input[type="checkbox"] + a,
.dmn-content input[type="checkbox"] + b,
.dmn-content label > input[type="checkbox"] { vertical-align: middle; }

/* A linha "li e concordo com as regras" precisa ficar em linha, nao empilhada. */
.dmn-content .form-group:has(> input[type="checkbox"]) {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	text-align: left;
}

/* ===========================================================================
 * 23. CLASSES DOS PLUGINS ESCRITOS CONTRA O ARTIC-V1
 * ---------------------------------------------------------------------------
 * Os plugins shopping_cart, battle_pass, donate e alguns outros trazem views
 * que usam um vocabulario proprio — bg-major-black, fs-16, py-10, border-bt-1,
 * payment-option, sidebox-title, vs-btn. Nenhuma delas existe no nixdorf.css
 * NEM no style.css do undead: elas foram escritas contra o tema artic-v1, que
 * as define em assets/artic-v1/css/{v1,market,ice_theme}.css.
 *
 * Ou seja, essas telas ja estavam parcialmente sem estilo no tema anterior.
 * Aqui a geometria do artic-v1 e reexpressa na paleta do nixdorf — nao e copia:
 * as medidas vem de la, as cores vem dos tokens deste kit.
 * =========================================================================== */

/* --- Superficies ---------------------------------------------------------- */
.bg-major-black { background-color: var(--nx-bg-dark) !important; }
.bg-light-dark  { background-color: var(--nx-bg) !important; }

/* --- Tipografia ----------------------------------------------------------- */
.fs-11 { font-size: 11px !important; }
.fs-12 { font-size: 12px !important; }
.fs-13 { font-size: 13px !important; }
.fs-14 { font-size: 14px !important; }
.fs-15 { font-size: 15px !important; }
.fs-16 { font-size: 16px !important; }
.fs-18 { font-size: 18px !important; }
.fs-20 { font-size: 20px !important; }
.text-white { color: var(--nx-fg) !important; }

/* --- Espacamento em pixel (o artic usa passo de 5, o Bootstrap nao tem) ---- */
.py-10 { padding-top: 10px !important; padding-bottom: 10px !important; }
.py-15 { padding-top: 15px !important; padding-bottom: 15px !important; }
.py-20 { padding-top: 20px !important; padding-bottom: 20px !important; }
.px-10 { padding-left: 10px !important; padding-right: 10px !important; }
.px-15 { padding-left: 15px !important; padding-right: 15px !important; }
.pl-10 { padding-left: 10px !important; }
.pl-15 { padding-left: 15px !important; }
.pl-20 { padding-left: 20px !important; }
.pr-10 { padding-right: 10px !important; }
.pr-15 { padding-right: 15px !important; }
.mt-10 { margin-top: 10px !important; }
.mt-15 { margin-top: 15px !important; }
.mt-20 { margin-top: 20px !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-15 { margin-bottom: 15px !important; }
.mb-20 { margin-bottom: 20px !important; }

/* --- Bordas --------------------------------------------------------------- */
.border-1    { border: 1px solid var(--nx-border) !important; }
.border-bt-1 { border-top: 0 !important; border-bottom: 1px solid var(--nx-border) !important; padding-top: 10px !important; padding-bottom: 10px !important; }
.border-bb-1 { border-bottom: 1px solid var(--nx-fg-accent) !important; opacity: 1 !important; }

/* --- Pagamento (donate, shopping_cart) ------------------------------------ */
.payment-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 15px;
	border: 1px solid var(--nx-border);
	margin-bottom: 8px;
	cursor: pointer;
	transition: all 0.3s;
}

.payment-option:hover,
.payment-option.active { border-color: var(--nx-fg-accent); background-color: var(--nx-bg-dark); }

.payment-info {
	display: none;
	padding: 12px 15px;
	margin: -1px 0 8px;
	border: 1px solid var(--nx-border);
	border-top: 0;
	font-size: 14px;
	color: var(--nx-fg-data);
}

/* --- Titulos e caixas laterais -------------------------------------------- */
.sidebox-title {
	position: relative;
	margin-bottom: 25px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--nx-border);
	color: var(--nx-fg-accent);
	text-transform: uppercase;
	font-weight: 700;
}

.h2-title,
.h2-title-table {
	position: relative;
	display: flex;
	align-items: flex-end;
	margin-bottom: 25px;
	color: var(--nx-fg);
	font-size: 20px;
	text-transform: uppercase;
}

.box-style1 {
	padding: 20px;
	background-color: var(--nx-bg-dark);
	border: 1px solid var(--nx-border);
	margin-bottom: 20px;
}

/* Painel do Bootstrap 3, que alguns plugins ainda usam. */
.panel-default { border: 1px solid var(--nx-border); background-color: var(--nx-bg-dark); margin-bottom: 20px; }
.panel-heading { padding: 14px 18px; border-bottom: 1px solid var(--nx-border); color: var(--nx-fg); text-transform: uppercase; font-weight: 700; }
.panel-body    { padding: 18px; color: var(--nx-fg-data); }

/* --- Botoes e estados dos plugins ----------------------------------------- */
.vs-btn,
.battlepass-claim {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	border: 1px solid var(--nx-fg-accent);
	background: transparent;
	color: var(--nx-fg-accent);
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.3s;
}

.vs-btn:hover,
.battlepass-claim:hover { background: var(--nx-fg-accent); color: var(--nx-bg-dark); }

.required { color: var(--nx-offline); }
.entry { margin-bottom: 15px; }
.clean { clear: both; }

/* ---------------------------------------------------------------------------
 * 24. UTILITARIOS EM PIXEL USADOS PELAS VIEWS
 * O artic-v1 usa passo em pixel (pt-10, mb-50, px-20), que o Bootstrap nao tem
 * — a escala dele vai de 0 a 5 em rem. A lista abaixo foi gerada varrendo as
 * 137 views: so entra o que alguma tela realmente usa.
 * ------------------------------------------------------------------------- */
.mb-10 { margin-bottom: 10px !important; }
.mb-30 { margin-bottom: 30px !important; }
.mb-50 { margin-bottom: 50px !important; }
.mb-60 { margin-bottom: 60px !important; }
.mt-10 { margin-top: 10px !important; }
.mt-15 { margin-top: 15px !important; }
.mt-20 { margin-top: 20px !important; }
.pb-15 { padding-bottom: 15px !important; }
.pb-20 { padding-bottom: 20px !important; }
.pb-30 { padding-bottom: 30px !important; }
.pl-15 { padding-left: 15px !important; }
.pl-20 { padding-left: 20px !important; }
.pr-10 { padding-right: 10px !important; }
.pt-10 { padding-top: 10px !important; }
.pt-15 { padding-top: 15px !important; }
.pt-20 { padding-top: 20px !important; }
.px-10 { padding-left: 10px !important; padding-right: 10px !important; }
.px-20 { padding-left: 20px !important; padding-right: 20px !important; }
.px-30 { padding-left: 30px !important; padding-right: 30px !important; }
.py-10 { padding-top: 10px !important; padding-bottom: 10px !important; }
.py-20 { padding-top: 20px !important; padding-bottom: 20px !important; }

/* --- Genericos que as views assumem existir ------------------------------- */
.hidden { display: none !important; }
.center { text-align: center; }
.end { text-align: right; }
.title1 { color: var(--nx-fg-accent); font-size: 20px; text-transform: uppercase; margin-bottom: 15px; }
.bg-light-gray { background-color: var(--nx-bg-steel) !important; }
.gradient-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	border: 1px solid var(--nx-fg-accent);
	background: transparent;
	color: var(--nx-fg-accent);
	font-weight: 700;
	text-transform: uppercase;
	transition: all 0.3s;
}
.gradient-btn:hover { background: var(--nx-fg-accent); color: var(--nx-bg-dark); }

/* ---------------------------------------------------------------------------
 * 25. TEMPLATES EJS DO RANKING E DO MARKET
 * Dos 20 .ejs, so sidebar_rank_players e sidebar_rank_guilds usam a lista
 * ul.top-table do nixdorf — sao os dois que a home invoca. Os outros 18 montam
 * <table>, ja coberto pela secao 18, e mais estas cinco classes proprias:
 * .sidebar_rank (a tabela em si), .i_note (aviso de lista vazia) e o trio do
 * sidebar_items.ejs, que e o bloco de ultimos itens do market.
 * ------------------------------------------------------------------------- */
table.sidebar_rank {
	width: 100%;
	border-collapse: collapse;
	color: var(--nx-fg-data);
}

table.sidebar_rank th {
	padding: 10px 12px;
	border-bottom: 1px solid var(--nx-border);
	background-color: var(--nx-bg-dark);
	color: var(--nx-fg);
	font-size: 13px;
	text-transform: uppercase;
	white-space: nowrap;
}

table.sidebar_rank td {
	padding: 10px 12px;
	border-top: 1px solid var(--nx-border);
	vertical-align: middle;
}

table.sidebar_rank tr:hover td { background-color: var(--nx-bg-dark); }

.i_note {
	padding: 25px 15px;
	text-align: center;
	color: var(--nx-fg-muted);
	text-transform: uppercase;
	font-size: 13px;
}

/* --- Ultimos itens do market (sidebar_items.ejs) -------------------------- */
.list-goods {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.list-goods li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 12px 10px;
	border: 1px solid var(--nx-border);
	background-color: rgba(27, 37, 46, 0.85);
	text-align: center;
	transition: all 0.3s;
}

.list-goods li:hover { border-color: var(--nx-fg-accent); }
.list-goods li img { max-width: 100%; height: auto; }

.title-good {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--nx-fg);
	text-transform: none;
}

.list-goods .price { color: var(--nx-fg-accent); font-weight: 700; font-size: 13px; }

.button-buy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 4px;
	padding: 6px 14px;
	border: 1px solid var(--nx-fg-accent);
	color: var(--nx-fg-accent);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	transition: all 0.3s;
}

.button-buy:hover { background: var(--nx-fg-accent); color: var(--nx-bg-dark); text-decoration: none; }

/* ---------------------------------------------------------------------------
 * 26. TABELAS DE RANKING NO CELULAR
 * A .top-table do nixdorf tem min-width: 440px e o .table-top-scroll rola na
 * horizontal. Num celular de 390px o contêiner fica com 366px, entao a ultima
 * coluna — justamente a dos NUMEROS (online, contas, personagens, level) — cai
 * fora da area visivel. A informacao esta la, mas atras de uma rolagem lateral
 * que ninguem descobre.
 *
 * Abaixo de 640px a largura minima cai e o respiro encolhe, para as colunas
 * caberem. O overflow-x continua ligado como rede de seguranca para as tabelas
 * de 5 colunas.
 * ------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.top-table { min-width: 0; }

	.top-table li {
		padding: 0 12px;
		height: auto;
		min-height: 52px;
		font-size: 14px;
	}

	.top-table .td-1 { width: 15%; min-width: 34px; }
	.top-table .td-2 { width: 45%; }
	.top-table .td-3 { width: 20%; }
	.top-table .td-4 { width: 20%; }

	/* linha de 5 colunas (ranking com Resets): reparte de novo */
	.top-table li:has(.td-5) .td-1 { width: 12%; }
	.top-table li:has(.td-5) .td-2 { width: 32%; }
	.top-table li:has(.td-5) .td-3 { width: 18%; }
	.top-table li:has(.td-5) .td-4 { width: 19%; }
	.top-table li:has(.td-5) .td-5 { width: 19%; }

	.server-icon { transform: scale(0.8); transform-origin: left center; }

	/* o painel de ranking da home tambem precisa de menos respiro */
	.tabs-rank { padding: 12px 14px; }
	.tabs-buttons { gap: 10px; }
	.tabs-buttons button { font-size: 14px; }
}

@media (max-width: 460px) {
	.top-table li { padding: 0 8px; font-size: 13px; }
	.tabs-buttons button { font-size: 13px; }
}

/* ---------------------------------------------------------------------------
 * 27. ALVOS DE TOQUE EM APARELHO DE TOQUE
 * Medido em 390px: 11 links do menu do rodape ficavam com 15px de altura, as
 * setas do slider com 20px e os selos de pagamento com 26px. Tudo isso e area
 * de toque — a recomendacao de acessibilidade e 44px, e abaixo de ~32px o erro
 * de toque cresce muito.
 *
 * A area cresce por padding, entao o desenho nao muda: o texto continua do
 * mesmo tamanho e no mesmo lugar, so o alvo fica maior.
 *
 * O limite e 1024px, nao 768: um iPad em paisagem tem exatamente 1024 e e um
 * aparelho de toque. Parar em 768 deixava o tablet deitado com alvos de 15px.
 * ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.f-menu {
		flex-wrap: wrap;
		justify-content: center;
		min-width: 0;
		gap: 0 18px;
	}

	.f-menu li { padding: 0; }

	.f-menu li a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0 4px;
	}

	.f-payments { gap: 10px; }

	.f-payment {
		min-height: 44px;
		margin: 0 10px;
		background-position-y: center;
	}

	/* setas do slick: alvo de 44px sem mudar a arte, que fica centralizada */
	.slick-prev,
	.slick-next {
		width: 44px !important;
		height: 44px !important;
		background-position: center !important;
		background-size: 24px 24px !important;
	}

	.pagination-btn { width: 44px; height: 44px; background-position: center; }

	/* o menu do cabecalho aberto pelo burger tambem precisa de linha alta */
	.header-menu li a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.logo a,
	.f-logo a { display: inline-block; }
}

/* Links dentro de tabela de ranking: o texto tem 16px, mas a linha tem ~52px.
   Fazer o link preencher a celula transforma a linha inteira em area de toque
   sem mudar nada do desenho. */
@media (max-width: 1024px) {
	.dmn-content table td a,
	.ranking-table td a,
	.top-table li a,
	.topThree-block_text a {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
	}
}

/* Titulo de noticia e a imagem que o acompanha: no celular o link do titulo
   tinha 16px e o da imagem colapsava para a altura da linha. */
@media (max-width: 1024px) {
	.post-title a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.post a,
	.new-slide a { display: inline-block; }
	.post a img,
	.new-slide a img { display: block; }
}

/* ---------------------------------------------------------------------------
 * 28. SELETORES DA PAGINA DE RANKING NO CELULAR
 * O .selectTop e um flex de tres .select lado a lado, cada um com altura fixa
 * de 45px e max-width 290px. Num aparelho de 390px os tres nao cabem: o do meio
 * ("Select the type of rank") quebra em quatro linhas e o texto vaza da caixa,
 * porque a altura e fixa.
 * Abaixo de 768px eles empilham, um por linha, ocupando a largura toda.
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.selectTop {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.selectTop .select {
		max-width: none;
		height: auto;
		min-height: 48px;
		margin-right: 0 !important;
		padding: 10px 40px 10px 16px;
	}

	.selectTop .select_value {
		white-space: normal;
		line-height: 1.3;
	}

	.select_option { padding: 12px 16px; }
}

/* ---------------------------------------------------------------------------
 * 29. PAINEL DE RANKING DA HOME: A PLACA PRECISA ACOMPANHAR A LISTA
 * ---------------------------------------------------------------------------
 * O fundo escuro do painel e um pseudo-elemento .top-list::after com a textura
 * bg-top-rank.png em TAMANHO FIXO: 444x399px. O desenho do pacote mostrava 4
 * linhas, entao a placa dava conta. O MuDarkNight lista o Top 10 — da quinta
 * linha em diante o conteudo saia da placa e ficava solto sobre o fundo da
 * pagina.
 *
 * A correcao usa border-image de 9 fatias: as bordas rasgadas ficam nos cantos,
 * nitidas e sem esticar, e so o miolo se estende. As fatias foram medidas na
 * propria imagem — a irregularidade vai ate 20px no topo, 24px a direita, 12px
 * na base e 8px a esquerda.
 * ------------------------------------------------------------------------- */
.top-list::after {
	top: 5px;
	right: 0;
	bottom: 0;
	left: 0;
	width: auto;
	height: auto;
	background: none;
	border-style: solid;
	border-width: 20px 24px 12px 8px;
	border-color: transparent;
	border-image: url('../images/nx/bg-top-rank.png') 20 24 12 8 fill stretch;
	z-index: 0;
}

/* O conteudo tem de ficar por cima da placa. */
.top-list .tabs-rank,
.top-list .tab-content,
.top-list .more {
	position: relative;
	z-index: 5;
}

/* Sem altura minima presa aos 4 registros do desenho original. */
.top-list { min-height: 0; }
.top-list .tab-content { padding-bottom: 6px; }

/* ---------------------------------------------------------------------------
 * 30. BOTOES DE TROCA DE SERVIDOR, NA HORIZONTAL
 * O .more nunca teve regra neste tema (existia so no style.css do undead), e o
 * .more-button e um PNG de 163x89 que ocupa a linha toda — com tres servidores
 * eles empilhavam. Aqui viram uma linha, com o botao reduzido para os tres
 * caberem nos 444px do painel.
 * ------------------------------------------------------------------------- */
.more {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 2px;
	margin-top: 6px;
}

.top-list .more { padding: 0 10px 12px; }

.top-list .more .more-button {
	width: 138px;
	height: 76px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	padding-bottom: 30px;
	font-size: 13px;
}

/* Um servidor so: o botao "More" volta ao tamanho cheio. */
.top-list .more:has(> :only-child) .more-button {
	width: 163px;
	height: 89px;
	padding-bottom: 38px;
	font-size: 14px;
}

@media (max-width: 640px) {
	.top-list .more .more-button { width: 118px; height: 66px; padding-bottom: 26px; font-size: 12px; }
}

/* ---------------------------------------------------------------------------
 * 31. ONLINE POR SERVIDOR
 * O circulo do cabecalho mostrava so o total somado, que com Hard, Medium e
 * Easy no ar nao diz nada. A lista abaixo dele reparte o numero por servidor e
 * marca quem esta fora do ar. So aparece quando ha mais de um servidor.
 * ------------------------------------------------------------------------- */
.radial-stat { width: 178px; }

.online-servidores {
	margin: 10px 0 0;
	/* fundo proprio: a lista fica sobre a arte do hero, que e clara e agitada;
	   sem ele o numero de um servidor offline (cinza) some */
	padding: 4px 8px;
	list-style: none;
	text-align: left;
	background-color: rgba(13, 26, 36, 0.72);
	border: 1px solid rgba(73, 88, 101, 0.5);
	backdrop-filter: blur(2px);
}

.online-servidores li {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 4px 6px;
	font-size: 12px;
	line-height: 1.2;
	color: var(--nx-fg-data);
	border-top: 1px solid rgba(73, 88, 101, 0.45);
}

.online-servidores li:first-child { border-top: 0; }

.online-servidores .ponto {
	flex: 0 0 7px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--nx-fg-muted);
}

.online-servidores li.online .ponto {
	background-color: var(--nx-online);
	box-shadow: 0 0 6px var(--nx-online);
}

.online-servidores li.offline .ponto { background-color: var(--nx-offline); }

.online-servidores .nome {
	flex: 1 1 auto;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.online-servidores b {
	font-weight: 700;
	color: var(--nx-fg-accent);
	font-variant-numeric: tabular-nums;
}

.online-servidores li.offline b { color: var(--nx-fg-muted); }

/* ---------------------------------------------------------------------------
 * 32. ICONE DE GUILDS NA ABA SERVER
 * O pacote so desenhou os icones de contas e personagens. O de guild foi gerado
 * reaproveitando a moldura de server-characters-icon.png — isolada por
 * componentes conectados, para as pontas do escudo saírem intactas — com um
 * estandarte novo no lugar do simbolo interno.
 * ------------------------------------------------------------------------- */
.server-icon.guild {
	width: 42px;
	height: 42px;
	background: url('../images/nx/server-guilds-icon.png') no-repeat;
}

/* ---------------------------------------------------------------------------
 * 33. ENQUADRAMENTO DOS CARDS DE NOTICIA
 * O .new-slide tem altura fixa (600px) e area util de 316x514. O desenho do
 * pacote conta com uma imagem de 320x197 (proporcao 1,62). As imagens de
 * noticia do CMS tem outra proporcao — as do MuDarkNight sao 558x262, ou seja
 * 2,13 —, entao entravam com 148px de altura e sobrava um vao morto no meio do
 * card.
 *
 * A imagem passa a preencher a area prevista, recortando o excesso em vez de
 * encolher. Assim o card fica igual ao do desenho com qualquer imagem que o
 * administrador subir.
 * ------------------------------------------------------------------------- */
.new-slide .slide-wrapper img {
	display: block;
	width: 100%;
	aspect-ratio: 320 / 197;
	object-fit: cover;
	object-position: center;
}

/* O texto varia de tamanho por noticia; limitar a 6 linhas mantem os tres cards
   com o mesmo ritmo e impede que um texto longo empurre a data para fora. */
.new-slide-text {
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* O titulo tambem: duas linhas no maximo. */
.new-slide-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 26px;
	margin-bottom: 20px;
}

/* Sem imagem, o card nao pode ficar com o titulo colado no topo. */
.new-slide .slide-wrapper > .new-slide-title:first-child { margin-top: 60px; }

/* A lista de eventos rola quando ha muitos horarios cadastrados, sem esticar a
   home. O limite substitui o style inline que estava na view. */
.events-section .nx-panel-body {
	max-height: 460px;
	overflow-y: auto;
	padding: 0;
}

/* ---------------------------------------------------------------------------
 * 34. MOLDURA DAS MINIATURAS DE CLASSE
 * ---------------------------------------------------------------------------
 * As 16 miniaturas do MuDarkNight variam de 72x97 (Crusader) a 176x123
 * (Slayer), e os deslocamentos .hero-small-<id> da secao 14 foram calibrados
 * contra a moldura do tema undead, de 154x155. A do nixdorf tem 125x126 — as
 * maiores estouravam e a arte nao pousava dentro do losango.
 *
 * Aqui volta o conjunto COMPLETO do undead, que sao tres pecas:
 *     hero-small-bg.png            154x155  moldura normal
 *     hero-small-hover-bg.png      154x155  a mesma com a borda dourada acesa
 *     hero-small-bright-effect.png  72x50   o brilho sob a miniatura
 * O slick marca a miniatura do meio com .slick-center; e ela que recebe a
 * moldura acesa e o brilho. Sem JS: e so troca de fundo.
 *
 * O losango foi medido na propria imagem: linha mais larga em y=78, centro em
 * (77, 78) — praticamente o centro da moldura. Por isso o alinhamento e
 * "center". Uma versao anterior usava flex-end e jogava a arte sobre as asas
 * ornamentadas da base, que foi o que deixou o encaixe pior.
 * ------------------------------------------------------------------------- */
.charactersBlock .slider-nav { max-width: 1120px; }

.charactersBlock .slider-nav-block {
	height: 178px;
	background-image: url('../images/char-slide-active-border.png');
	background-repeat: no-repeat;
	background-position: center;
	background-color: rgba(20, 32, 42, 0.55);
}

.charactersBlock .slider-nav-slide {
	height: 178px;
	margin-top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.charactersBlock .slider-nav-slide-block {
	flex: 0 0 154px;
	width: 154px;
	height: 155px;
	margin: 0 auto;
	background-image: url('../images/hero-small-bg.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 154px 155px;
	align-items: center;          /* o losango e centrado na moldura */
	position: relative;
	transition: 0.5s;
}

/* brilho sob a miniatura, apagado por padrao */
.charactersBlock .slider-nav-slide-block::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 33px;
	width: 72px;
	height: 50px;
	margin-left: -36px;
	background: url('../images/hero-small-bright-effect.png') center no-repeat;
	opacity: 0;
	transition: 0.5s;
	pointer-events: none;
}

.charactersBlock .slider-nav-slide-block img { position: relative; z-index: 2; }

/* a classe selecionada: moldura acesa e brilho ligado */
.charactersBlock .slider-nav .slick-center { opacity: 1; }
.charactersBlock .slider-nav .slick-center .slider-nav-slide-block {
	background-image: url('../images/hero-small-hover-bg.png');
}
.charactersBlock .slider-nav .slick-center .slider-nav-slide-block::after { opacity: 1; }

/* o bloco cresce para caber a fita mais alta: 760 do card + 178 da fita */
.charactersBlock { height: 938px; }

/* ---------------------------------------------------------------------------
 * O PODIO DO RANKING E UM CLONE DA FITA DA HOME
 * ---------------------------------------------------------------------------
 * O podio reusa `.slider-nav-slide-block`, mas as regras da fita sao escopadas em
 * `.charactersBlock` e ele nao esta dentro dele — entao herdava so o vendor e saia
 * diferente: moldura pintada em tamanho natural numa caixa de 150px (cortada em
 * cima e embaixo), sem o brilho de baixo, sobre o painel CLARO do podio, que
 * denunciava todo pedaco de losango que a arte nao cobre.
 *
 * Em vez de recalibrar um encaixe proprio, aqui o conjunto da fita e reproduzido
 * inteiro e em 1:1 — mesmo painel escuro, mesmo suporte dourado, mesma moldura
 * acesa, mesmo brilho e a MESMA caixa de arte de 114px da secao 35, que ja esta
 * calibrada classe a classe. Nada de escala: o que estiver certo la fica certo
 * aqui, e um ajuste futuro numa miniatura vale nos dois lugares de uma vez.
 *
 * A celula cresce de 134x120 para 176x170 para caber o conjunto: o suporte
 * `char-slide-active-border.png` tem 172x150 e a moldura 154x155.
 * ------------------------------------------------------------------------- */
.topThree-block { height: 170px; }

/* A celula da moldura passou de 134 para 176px, e com isso o bloco foi de 534
   para 576 — dois deles nao cabiam mais nos 1139px da area, e o podio virou uma
   coluna de tres. Os 100px aqui (eram 120, para um circulo de 54) devolvem a
   largura necessaria e o arranjo 2+1 do desenho volta. */
.topThree-block_place { width: 100px; }

/* No empilhado o `nixdorf-mobile.css` poe `height: auto` no bloco e `min-height:
   120px` nas tres celulas — 120 e menos que os 155 da moldura, e com o
   `overflow: hidden` da celula ela saia cortada. O breakpoint e o mesmo 640px que
   ele usa, para nao mexer na faixa 641..768, onde o layout ainda e em linha. */
@media (max-width: 640px) {
	.topThree-block_class {
		min-height: 170px;
	}
}

.topThree-block_class {
	width: 176px;
	align-content: center;
	background-image: url('../images/char-slide-active-border.png');
	background-repeat: no-repeat;
	background-position: center;
	background-color: rgba(20, 32, 42, 0.55);
}

.topThree-block_class .slider-nav-slide-block {
	flex: 0 0 154px;
	width: 154px;
	height: 155px;
	margin: 0 auto;
	background-image: url('../images/hero-small-hover-bg.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 154px 155px;
	align-items: center;
	position: relative;
	transform: none;
}

/* O brilho sob a miniatura, que na fita so a slide central recebe. No podio as
   tres colocacoes sao "a selecionada", entao ele fica sempre aceso. */
.topThree-block_class .slider-nav-slide-block::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 33px;
	width: 72px;
	height: 50px;
	margin-left: -36px;
	background: url('../images/hero-small-bright-effect.png') center no-repeat;
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * 35. ENQUADRAMENTO DA ARTE DENTRO DO LOSANGO
 * ---------------------------------------------------------------------------
 * Medindo as 16 miniaturas, o desenho de cada PNG ja esta centrado no proprio
 * arquivo — o desvio maximo em relacao ao centro e de 1,5px. Ou seja, o flex da
 * moldura sozinho ja acerta a posicao, e os antigos margin-top/margin-left so
 * atrapalhavam.
 *
 * O que realmente desencaixava era o TAMANHO: 8 das 16 sao maiores que a area
 * util do losango, que mede 122x118. Os extremos:
 *     Slayer       176x123   (54px mais largo que o losango)
 *     Gun Crusher  111x137   (19px mais alto)
 *     Dark Lord    137x121
 *     Rage Fighter 130x122
 *
 * A solucao e limitar por medida, preservando a proporcao de cada arte. O
 * limite e um pouco maior que o losango de proposito: uma leve sobra no topo e
 * o que faz o personagem parecer emergir da moldura, que e a leitura do
 * desenho original. Vale para a fita de classes e para o podio do ranking.
 * ------------------------------------------------------------------------- */
.charactersBlock .slider-nav-slide-block img,
.topThree-block_class .slider-nav-slide-block img {
	margin: 0;
	/* Caixa FIXA e nao max-width/max-height: aqueles so encolhem, nunca ampliam,
	   entao qualquer arte menor que 114px renderizava no tamanho natural e
	   sobrava folga dentro do losango. Com a caixa fixa e object-fit: contain,
	   toda arte cresce ou encolhe ate encostar em 114 numa das dimensoes,
	   preservando a proporcao. */
	width: 114px;
	height: 114px;
	object-fit: contain;

	/* O losango vai de y=18 a y=120 na moldura de 155px — as asas douradas
	   entram a partir de y=126. O centro util fica em y=69, ou seja 9px acima
	   do centro da moldura. Subir a arte por 'top' e nao por margin porque no
	   flex centrado a margem desloca apenas METADE do valor, o que tornava os
	   numeros do tema antigo dificeis de ler. */
	position: relative;
	top: -10px;
}

/* ---------------------------------------------------------------------------
 * 36. AJUSTE HORIZONTAL POR CLASSE
 * A regra da secao 35 centra a arte pela caixa da imagem, o que serve para a
 * maioria. Em algumas o ponto focal — o rosto — fica deslocado porque a arma ou
 * a capa ocupa um lado e puxa a caixa para la. Nesses casos o ajuste e no olho,
 * nao por medida: o centro de massa e o centro da caixa dizem que esta certo,
 * mas a leitura diz que nao.
 *
 * Ajuste feito por 'left' e nao por padding no PNG de proposito: padding mudaria
 * a largura do arquivo e o limite de 114px encolheria a arte junto.
 * Positivo = move para a direita.
 *
 * As miniaturas 9, 10, 12, 14, 15 e 16 foram refeitas num canvas de 114x114 —
 * exatamente a caixa da secao 35. Nessas, 'object-fit: contain' nao reescala nada
 * (1px do arquivo = 1px na tela) e todo o enquadramento ja esta dentro do PNG,
 * entao elas nao precisam de regra aqui. O gerador e o miniaturas\build_thumbs.py.
 *
 * ATENCAO ao alterar essas seis: a ancora vertical e o TOPO DA SILHUETA, nao a
 * linha dos olhos. A primeira versao (2026-09-05) fixou o olho em y=40 do bloco e
 * afundou o desenho — quanto menos cabelo ou elmo a classe tem acima dos olhos,
 * mais baixo ele parava. Medido em 2026-09-06: topo da silhueta em 10, 12, 17, 18,
 * 20 e 27, contra 8..13 das dez originais (sete delas exatamente em 10). O que as
 * dez respeitam e preencher o losango — silhueta da linha 0 do arquivo ate o corte
 * em V. Corrigido em 2026-09-06 mantendo a escala do rosto (olhos->queixo de 12px);
 * so a posicao mudou. O corte em V da base continua em alpha=0 onde y > 123-|x-76|.
 * ------------------------------------------------------------------------- */
.charactersBlock .slider-nav-slide-block img.hero-small-4,
.topThree-block_class .slider-nav-slide-block img.hero-small-4 { left: 1px; top: -11px; }   /* Gun Crusher: ajuste fino, encostando no losango */

.charactersBlock .slider-nav-slide-block img.hero-small-2,
.topThree-block_class .slider-nav-slide-block img.hero-small-2 { left: 8px; }    /* Light Wizard */

.charactersBlock .slider-nav-slide-block img.hero-small-8,
.topThree-block_class .slider-nav-slide-block img.hero-small-8 { left: 3px; top: -8px; }    /* Magic Gladiator */

/* SM (linha do Dark Wizard) e BK (linha do Dark Knight) usam o mesmo
   posicionamento do Magic Gladiator. */
.charactersBlock .slider-nav-slide-block img.hero-small-1,
.topThree-block_class .slider-nav-slide-block img.hero-small-1 { left: 8px; top: -10px; }   /* Dark Wizard / SM */

.charactersBlock .slider-nav-slide-block img.hero-small-6,
.topThree-block_class .slider-nav-slide-block img.hero-small-6 { left: 3px; top: -8px; }    /* Dark Knight / BK */

.charactersBlock .slider-nav-slide-block img.hero-small-13,
.topThree-block_class .slider-nav-slide-block img.hero-small-13 { left: 8px; top: -12px; }  /* Illusion Knight / IK */

/* ---------------------------------------------------------------------------
 * 37. DESCRICAO DA CLASSE (.hero-text)
 * ---------------------------------------------------------------------------
 * O nixdorf nao carrega o style.css do undead e .hero-text so existia la, entao
 * o paragrafo estava sem regra nenhuma: saia com a largura inteira do slide
 * (1200px), em branco puro herdado, e passava POR BAIXO do render — .hero-img e
 * absoluto e, por ser posicionado, pinta acima de conteudo em fluxo. Era o
 * unico elemento da coluna da esquerda sem coluna.
 *
 * Tres correcoes:
 *
 * 1) Coluna. Mesma sangria de 120px do titulo, do "BASIC BUILD:" e dos rotulos
 *    das barras — a coluna passa a ter um alinhamento so. A largura saiu de
 *    medicao, nao de chute: para cada uma das 16 classes foi procurado onde o
 *    CORPO do render comeca na faixa vertical que o paragrafo ocupa (y 130..340
 *    do slide), contando so as colunas com 25% ou mais de pixels opacos. O mais
 *    apertado e o Gun Crusher, com corpo a partir de x=732; depois Dark Knight
 *    (785), Magic Gladiator (797) e Dark Wizard (828). Comecando em 470, 260px
 *    param em 730 e nenhuma das 16 encosta na figura.
 *
 * 2) Empilhamento. position/z-index como .team-online ja faz — se a arte mudar
 *    de lugar um dia, o texto passa por cima em vez de sumir atras dela.
 *
 * 3) Tipografia. 15px/1.6 num tom frio em vez de branco puro: corpo de texto em
 *    branco puro concorre com o titulo e cansa sobre um fundo agitado. O maior
 *    dos 16 textos tem 226 caracteres, o que da 7 linhas nessa medida; o bloco
 *    empurra o "BASIC BUILD:" para baixo mas as barras ainda terminam bem antes
 *    dos 900px do slide.
 * ------------------------------------------------------------------------- */
.hero-text {
	max-width: 260px;
	margin-left: 120px;
	color: #b9c7d2;
	font-size: 15px;
	line-height: 1.6;
	position: relative;
	z-index: 5;
}

/* No empilhado a arte sai do lado do texto e a coluna nao faz mais sentido.
   Precisa estar aqui porque o components.css e carregado depois do
   nixdorf-mobile.css e ganharia o desempate. */
@media (max-width: 768px) {
	.hero-text {
		max-width: 100%;
		margin-left: 0;
		margin-bottom: 20px;
	}
}


/* ---------------------------------------------------------------------------
 * 38. BASE DAS ARTES DA SEASON 21 (.hero-img-12/14/15/16)
 * ---------------------------------------------------------------------------
 * As dez artes herdadas do undead sao figuras inteiras: a perna ou o manto
 * afina ate uma ponta de 50 a 190px e a arte se dissolve sozinha na base. As
 * seis da Season 21 (9, 10, 12, 14, 15, 16) nao — sao recortes, e todas
 * terminam num CORTE RETO de 471 a 801px de largura, o Crusader nos 624px
 * inteiros do arquivo.
 *
 * A calibragem de 2026-09-04 escondeu esse corte empurrando as seis para baixo
 * ate a base cair fora do palco (y=794 num palco de 760). Funcionou para o
 * corte, mas ancorou a arte pela BASE em vez de pela figura: as mais curtas
 * ficaram com a cabeca la embaixo. Medido em 2026-09-06, topo da figura dentro
 * do slide:
 *
 *     Illusion Knight  -68     Dark Lord          7     Grow Lancer     97
 *     Dark Knight / MG   0     Summoner          29     Rage Fighter   191
 *     Fairy Elf / Slayer 45..60                         Alchemist      190
 *                                                       Crusader       197
 *
 * Rage Fighter, Grow Lancer, Alchemist e Crusader comecavam a um quarto da
 * altura do palco, deixando o canto superior direito vazio ao lado do titulo.
 * A correcao poe a cabeca das quatro em y=40 — a faixa das outras — e dissolve
 * o corte reto por mascara, mantendo a escala original da arte (nada de
 * upscale, nada de rosto inflado).
 *
 * O fade comeca em 78%: medido nas duas piores, 68% apagava metade do torso do
 * Rage Fighter e 86% ainda deixava a borda perceptivel.
 *
 * Dark Lord (9) e Summoner (10) NAO entram aqui: a cabeca deles ja cai em 7 e
 * 29, e a base cortada continua saindo do palco por baixo, entao nao ha o que
 * dissolver.
 * ------------------------------------------------------------------------- */
.hero-img-12,
.hero-img-14,
.hero-img-15,
.hero-img-16 {
	-webkit-mask-image: linear-gradient(to bottom, #000 0, #000 78%, transparent 100%);
	        mask-image: linear-gradient(to bottom, #000 0, #000 78%, transparent 100%);
}


/* ---------------------------------------------------------------------------
 * 39. BUILD DA CLASSE SEM O TITULO "BASIC BUILD:"
 * ---------------------------------------------------------------------------
 * No pacote nixdorf a faixa `.team-online-title` era o "Party Buff: <skill>" da
 * classe, com 3 barras embaixo. O MuDarkNight reaproveitou a faixa para um
 * rotulo "Basic Build:" e passou para 4 barras.
 *
 * Medido em 2026-09-06, topo do bloco de barras dentro do slide:
 *
 *     original nixdorf ... 294   (slide de 900px, sem descricao de classe)
 *     MuDarkNight ........ 438   (slide de 760px, com a coluna .hero-text)
 *
 * Os 144px de diferenca sao exatamente a altura da `.hero-text` da secao 37,
 * que o pacote original nao tinha. Com o rotulo somado a isso, as barras
 * desciam ate y=758 — encostando no fim do palco de 760px.
 *
 * O rotulo sai (a informacao ja esta implicita: sao as quatro barras de build)
 * e as barras sobem 98px, para 340..660. Nao da para chegar aos 294 do original
 * sem invadir a descricao, que termina em 315.
 *
 * O `margin-top` de 25px repete o `margin-bottom` que o rotulo tinha, para o
 * respiro entre a descricao e a primeira barra continuar o mesmo. O rotulo e
 * escondido por CSS, e nao removido da view, para a string continuar traduzida
 * no `pt.json` e o teste ser reversivel em uma linha.
 * ------------------------------------------------------------------------- */
.charactersBlock .team-online-title { display: none; }
.charactersBlock .team-online { margin-top: 25px; }


/* ---------------------------------------------------------------------------
 * 40. CADEIA DE EVOLUCAO DA CLASSE (.hero-title_tiers)
 * ---------------------------------------------------------------------------
 * A linha logo acima do PARTY BONUS. Ate 2026-09-06 ela listava so os estagios
 * do meio — "Soul Master, Grand Master and Soul Wizard" — e agora traz a cadeia
 * inteira do `class_config.json`, do nome base ate o ultimo estagio:
 * "Dark Wizard, Soul Master, Grand Master, Soul Wizard and Darkness Wizard".
 *
 * Isso triplicou o comprimento da linha, e ela nao tinha largura nenhuma: era um
 * no de texto solto dentro do `.hero-title_text`, que ocupa 830px. Resultado —
 * a cadeia atravessava o render e sumia em cima do desenho. Rune Wizard, Gun
 * Crusher, Summoner e Dark Knight ficavam ilegiveis no meio da frase.
 *
 * Agora a cadeia tem elemento proprio e a mesma coluna esquerda da descricao.
 * A largura de 230px saiu de medicao, pelo criterio da secao 37, mas na faixa
 * vertical que ESTA linha ocupa (y 100..340, ja contando o quanto ela cresce ao
 * quebrar): para cada uma das 16 procurou-se onde o corpo do render comeca,
 * contando so colunas com 25% ou mais de pixels opacos. A mais apertada e o
 * Magic Gladiator, com corpo a partir de x=700 — 230px a partir de 470.
 *
 * 13px em vez dos 18px do `.hero-title_text` porque a cadeia agora e uma lista
 * de ate cinco nomes: em 18px ela ocupava quatro linhas e empurrava as barras
 * para fora do palco de 760px. Em 13px a mais longa (Rune Wizard, 95 caracteres)
 * cabe em quatro linhas estreitas e o Dark Lord — o unico com cinco barras, e
 * portanto o mais apertado na vertical — ainda termina dentro do palco.
 *
 * O `margin-bottom` do nome caiu de 20px para 12px pelo mesmo motivo: os 8px
 * comprados ali sao o que garante a folga do Dark Lord.
 * ------------------------------------------------------------------------- */
.hero-title_tiers {
	display: block;
	max-width: 230px;
	font-style: normal;
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: 0.02em;
}

/* O nome tem 50px e a cadeia 13px — 20px de respiro entre os dois era o valor do
   pacote, calibrado para uma linha de 18px. Com a cadeia menor e em varias
   linhas, 6px equilibram melhor e devolvem altura ao slide. */
.charactersBlock .hero-title_text span { margin-bottom: 6px; }

/* O Dark Lord e o unico com CINCO barras (400px em vez de 320), e por isso o
   unico que a cadeia completa fazia estourar o palco de 760px — por 7px. Em vez
   de encolher o respiro das outras quinze, o ajuste vale so para o slide de
   cinco barras. Sem suporte a :has() a regra some e ele ainda cabe, com folga
   menor, porque a line-height e o margin-bottom acima ja resolveram o estouro. */
@supports selector(div:has(div)) {
	.charactersBlock .slider-for-slide:has(.team-online-block:nth-child(5)) .team-online {
		margin-top: 8px;
	}
}

/* No empilhado a arte sai do lado do texto — a coluna nao faz mais sentido.
   Precisa estar aqui porque o components.css vence o nixdorf-mobile.css. */
@media (max-width: 768px) {
	.hero-title_tiers { max-width: 100%; }
}


/* ---------------------------------------------------------------------------
 * 41. RESPIRO NO RODAPE ONDE FICAVAM OS SELOS DE PAGAMENTO
 * ---------------------------------------------------------------------------
 * Os selos Visa / Mastercard / G2A Pay foram removidos da `view.footer.php` em
 * 2026-09-06 (ver o comentario la). Eles ocupavam uma faixa de 76px entre o logo
 * e o copyright — 20px de margem, 26px de altura e 30px de margem — e era essa
 * faixa que separava os dois. Sem ela o "Copyright ... All rights reserved"
 * encostava no logo.
 *
 * Aqui a faixa volta como espaco vazio, com a mesma medida, para o ritmo do
 * rodape ficar igual ao do desenho original. O alvo e o `.f-info`, e nao o
 * `.footerBottom-block` que o envolve, porque os tres blocos daquele rodape
 * compartilham a mesma classe e so este precisa do respiro.
 * ------------------------------------------------------------------------- */
.footerBottom .f-info { margin-top: 76px; }

/* No celular o rodape ja empilha com folga propria; 76px ali abririam um vazio
   grande demais numa tela curta. */
@media (max-width: 768px) {
	.footerBottom .f-info { margin-top: 40px; }
}


/* ---------------------------------------------------------------------------
 * 42. TEXTO DIGITADO NOS CAMPOS ORNAMENTADOS (modais de login e registro)
 * ---------------------------------------------------------------------------
 * O `.form-group label` do nixdorf usa `images/nx/form-input.png` como fundo —
 * uma placa CREME (#e5d9a5, a mesma cor de destaque do tema) — e ja declara
 * `color: #1a3441` para o texto. Mas o `dmncms.css` traz um
 * `.form-control { color: #ffd267 !important }` global, e o `!important` vence a
 * heranca. Resultado: texto ambar sobre placa creme, contraste de **1,01:1** —
 * na pratica invisivel enquanto se digita.
 *
 * A secao 6 ja corrige isso para as telas do CMS via `.dmn-page-content
 * .form-control`, mas os MODAIS nao estao dentro de `.dmn-page-content`, e por
 * isso escaparam.
 *
 * A cor aqui e a que o proprio tema ja pedia no label. Medido contra o creme:
 *
 *     #ffd267 ambar (o que estava)    1,01:1   reprova
 *     #ffffff branco                  1,42:1   reprova
 *     #1a3441 azul-escuro do tema     9,18:1   passa AA com folga
 *
 * Branco NAO resolve: sobre uma placa clara ele fica quase tao ruim quanto o
 * ambar. Para texto branco a placa teria de ficar escura, o que descartaria a
 * arte ornamentada que e a assinatura destes modais.
 * ------------------------------------------------------------------------- */
.modal .form-group .form-control,
.modal .form-group input,
.modal .form-group select,
.modal .form-group textarea {
	color: #1a3441 !important;
	caret-color: #1a3441;
}

/* O placeholder acompanha, mais claro para nao competir com o que foi digitado. */
.modal .form-group .form-control::placeholder,
.modal .form-group input::placeholder {
	color: rgba(26, 52, 65, 0.55);
	opacity: 1;
}

/* Preenchimento automatico do navegador: o Chrome pinta fundo e texto proprios e
   ignora `background`/`color` comuns. O `box-shadow` interno repinta a placa e o
   `-webkit-text-fill-color` e a unica forma de mandar na cor do texto. */
.modal .form-group input:-webkit-autofill,
.modal .form-group input:-webkit-autofill:hover,
.modal .form-group input:-webkit-autofill:focus {
	-webkit-text-fill-color: #1a3441;
	-webkit-box-shadow: 0 0 0 60px #e5d9a5 inset;
	caret-color: #1a3441;
}


/* ---------------------------------------------------------------------------
 * 43. O TURNSTILE DENTRO DO MODAL DE LOGIN
 * ---------------------------------------------------------------------------
 * No modal, `.form-group label` desenha a placa creme do `form-input.png`, que e
 * o campo em si. No Turnstile nao ha campo para preencher — o widget e um bloco
 * proprio — entao a placa aparecia vazia logo acima dele.
 *
 * O `<label>` continua no lugar porque e ele que posiciona o titulo "SECURITY":
 * o `.form-group label div` do nixdorf.css e absoluto em `top: -40px`, ancorado
 * nele. Aqui a placa e apagada e a altura zerada, e a margem de cima devolve os
 * 40px que o titulo ocupa.
 * ------------------------------------------------------------------------- */
.form-group.captcha--turnstile label {
	background: none;
	height: 0;
	min-height: 0;
	margin: 46px auto 0;
	padding: 0;
}

.form-group.captcha--turnstile {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* O widget tem largura fixa de 300px; centralizado ele acompanha as placas. */
.form-group.captcha--turnstile .cf-turnstile {
	display: flex;
	justify-content: center;
	margin-top: 6px;
}


/* ---------------------------------------------------------------------------
 * 44. BARRAS DE ROLAGEM NO TOM DO TEMA
 * ---------------------------------------------------------------------------
 * O tema nunca estilizou scrollbar, entao o navegador desenhava a dele: clara,
 * berrante sobre um site escuro. Aparecia principalmente na lista de eventos da
 * home, que rola dentro de uma caixa de 460px.
 *
 * Duas sintaxes, de proposito. `scrollbar-color`/`scrollbar-width` sao o padrao
 * (Firefox desde sempre, Chrome/Edge a partir do 121). Os `::-webkit-scrollbar`
 * cobrem WebKit antigo e Safari, que ainda nao implementam o padrao. Quem
 * entende as duas usa a primeira; quem entende so uma usa a que conhece.
 *
 * `color-scheme: dark` e o que faz o navegador desenhar em modo escuro tudo o
 * que ele mesmo pinta — a barra da propria pagina, menus de <select>, o seletor
 * de data. Sem ele a barra externa continuaria clara mesmo com as regras abaixo.
 * ------------------------------------------------------------------------- */
:root {
	color-scheme: dark;
	scrollbar-color: var(--nx-bg-steel) var(--nx-bg);
	scrollbar-width: thin;
}

.events-section .nx-panel-body,
.nx-table-wrap,
.table-top-scroll,
.dmn-content .table-responsive,
.dmn-content .table-responsive-sm {
	scrollbar-color: var(--nx-bg-steel) var(--nx-bg-dark);
	scrollbar-width: thin;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: var(--nx-bg-dark);
}

::-webkit-scrollbar-thumb {
	background: var(--nx-bg-steel);
	border: 2px solid var(--nx-bg-dark);   /* afina o polegar sem mudar a pista */
	border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
	background: #6b8598;
}

::-webkit-scrollbar-corner {
	background: var(--nx-bg-dark);
}